Goldilocks and the three web designers
I’ve been struck again how often web designers go for the “baby bear” option when creating visuals for a new look & feel. We’re just going through the early stages of a templating job for a client so have been reviewing a set of visuals that have been produced, before we make them into static web pages & then integrate into a content management system.
Now there’s nothing wrong with trying to present a design in the best light, but it’s important that in showing everything so that it’s “just right” that you don’t lose sight of what will be the reality of the life of your website.
I think there are three main issues that come into play here. The first is that there are still remnants of print-based thinking around. Sometimes it’s not just the Photoshop files that are static, but also the thinking that’s behind it. When you’re working in print then you’re more in control of how someone is going to look at the design that you have produced, but with the web it doesn’t work that way. You have to take into account the different screen sizes, the possibility of the user resizing their browser window, the fact that the user can change the size of the text, the difference between text displaying on Macs and Windows, etc.
The second issue is the current trend for web publishing towards the content providers having more control in the process. In print media the tendency is for the content to be handed over to design specialists - either an internal department or an external agency. So on the web the resources required to reproduce the look & feel need to be taken into account.
Finally in the print world it appears that you have the two extremes of brand guidelines and a finished document. The guidelines are used over a long time period and make general comments about the look & feel of documents, whereas the finished document is very specific but once it has been printed it will remain unchanged. Design for websites on the other hand has to take on board the fact that it is specific and is used over a number of years. So the Photoshop mock-up that you have in front of you has to be able to accommodate a wide array of changes - new content being added that might be longer or shorter, topics to be added to the menu and possibly highlighted on the home page, etc.
Some of the things that it’s worth looking out for:
- How it will look on different size screens
Quite often we’ll be presented with a page that’s laid out within a screenshot of a normal browser window. Whilst that can give a feel for how the design will appear on the user’s screen it won’t give you an idea of what happens when the user resizes their browser. Will it stretch to fit or add whitespace? How do those options look? What happens when the window is reduced? Is there a limit at which you’re not bothered how the page looks?
- Navigation that goes across the page
With this particular project alarm bells sounded for me when I saw some horizontal navigation lining up with the end of the header content. It’s highly unlikely that that would happen in reality - it all depends on the number of elements in the navigation (which can change over time) and the width of the text (again the exact wording can change over time). Even if you were to go for a fixed width option (e.g. 8 items each 125 pixels wide, so that you know they’ll take up 1000 pixels in total) then that raises the question of what is determining the choice of items - your design or the information architecture?
- Screen elements that line up at the bottom
If you take a look at the BBC News home page you’ll see that even there the text isn’t aligned with the bottom of the images. In fact I’d say that there’s a great deal of hidden skill working on the titles for the links (usually either they fit in one line or just a word over as normal text & two lines when used as the main articles) and the summary for the main articles (usually four lines). It’s possible to get a few elements to line up (for example we’ve made sure that the logo in the left column always appears at the bottom of the content on the Local Directgov site), but to do this with normal editable text & repeated a number of times on a page becomes unmanageable.
- What might be involved for your content providers
Are the changes in text style easy to reproduce using your rich text editor or do you need some HTML knowledge? Are there pull-out quotes (if you take a look at the BBC News stories then you’ll see quotes or facts in grey boxes within the central column)? These take a bit more than applying a style to some text, so they’ll either need some training if added manually or programming if it’s to be automatic.
- The content that might appear
Does the content shown just reflect the average size? What about shorter or longer pieces? Will there always be images (or no images)?
- Different users might have different views
If you’re using a content management system then you’ll probably have at least the login/logout functionality to include and links into the admin system. If your website allows users to register, for example to gain access to member-only content or functionality, then how do the pages appear to members and non-members?
As with any computing project it’s better to spot issues sooner rather than later, as they can be easier to put right early on and therefore less costly. So push the designs that you’re reviewing around about. Find out what happens when they’re faced with circumstances that aren’t just right, because one thing that I can guarantee is that that will happen when they’re used on your website.
