Behind the scenes we’ve kicked off the design of the website that will surround the National Broadband Map. This is an interesting part of any web project and can be a welcome diversion from the more technical aspects. This is where we are creating the look and feel of the website, it’s where we’re working out how to best communicate information around the mapping application and it’s the stage where we make sure we have an accessible website and adherence to web standards.
We can break this part of the project into four parts, that may appear separate but are all dependent on each other. The component parts:
- Information architecture
- Visual design
- CSS/HTML
- Technical integration
Information Architecture
When you visit a website you expect to find the information you want and when you do you probably don’t notice how easy it was, you’ll probably notice when you can’t find what you want leading to frustration and annoyance. Good information architecture in this context is about constructing and presenting the data to the user in a meaningful, logical and intuitive way to avoid that frustration and annoyance and more importantly to make the website more usable and relevant to the user. With the web we can’t pick our audience, but we can identify it and we’re very aware that we can have a wide and varied audience with the National Broadband Map from central and local government, to network suppliers to a curious New Zealand public to developers; we’re covering Grandmas to geeks. We need to make the information relevant and navigable to these audiences and this is where information architecture comes in.
There are a number of outputs from the information architecture process these include a site map, a navigation structure and wire-frame diagrams of the website outlining where content components are to go.
The sad thing is if we do a great job of the information architecture you probably won’t notice. If we get it wrong you will.
Visual Design
Visual design is the look of the website, it takes some of the outputs of information architecture and pulls them together into a design, it’s not about making the website visually stunning, it’s about making the website more usable in a visual way. As human beings we think visually and we look for visual cues to help us use websites, good visual design provides these cues. Part of it is ensuring the website is visually attractive but more importantly its about communicating in a visual way and making it easier for a user to traverse the website.
The outputs from the visual design phase include the graphics and logos for the site, some iconography to help identify demand points (for the mapping part of the website) and a more complete design of all pages, we now know what colours will be used, what graphics will be used, how wide the web pages will be and where individual content elements lie on the pages. We’ll have three ’styles’ of pages; the home page, section pages and detail pages.
CSS/HTML Production
HTML and CSS are where we bring the the visual design into the web so as it works with your web browser.
CSS, or cascading style sheets, define the look and layout of the site. They tell the web browser where to put everything and how to make it look, they tell the web browser to put the banner at the top and the footer at the bottom, they tell the browser what colour and size the headings will be, what font the text will be and how the menus behave.
HTML, or hypertext markup language, is where we put our content, it’s the information we display on the website. The way that we are applying HTML deals specifically with content, we don’t define they way anything looks within HTML, we only define what the content is. We will define that an item of text is a heading but it is the CSS that defines what the heading looks like.
A great demonstration of how CSS can change the entire look of a website can be found at CSS Zen Garden, under the ’select a design’ menu you can select a design and see the entire look of the website change. The HTML and hence content isn’t changing, only the CSS.
There are very good reasons why we use the combination of CSS and HTML in this way when we could build the entire site in HTML and not even use CSS. Here’s why:
- Ease of site management - we can change the the look and layout of the website by changing the CSS rather than changing every single page. If we need to create a new page, we only need to create content, not design.
- Accessibility - separating content from layout makes the content more accessible. Not every user will be using a common browser, some may be using tactile braille machines, screen readers or text only browsers, the content will render much more effectively when the HTML contains only content rather than content and layout.
- Editors of the site can concentrate on writing content rather than defining its layout.
The outputs of the CSS/HTML stage are some text files, some with a .css extension and some with a .html extension.
Technical Integration
This is where we pull everything together, we need to get the CSS, HTML and images on the web-server and in the right place so our content management system can read them. We need to make sure everything is working and working as it should across a range of browsers, unfortunately not all web browsers behave the same.
The output of the technical integration is a functioning website that looks and behaves how we want it to.
