The role of your design
Now that you’ve spent some time planning and creating content, it’s time to look at the layout and design of your web pages. Your website design needs to achieve the following goals:
- Encourage engagement. Your website design needs to inspire visitors to look around your site and spend some time there. It’s easy to focus on this aspect of the design but don’t get carried away. Keep the purpose of your site in mind throughout its development, otherwise you might end up with something that is beautiful, but otherwise useless. Different styles will resonate with different audiences, which is why it’s important to understand your target visitors first.
- Communicate order. Whether you have five pages or five hundred, your website design needs to make it easy for people to understand which pages are more important, and which parts of each page are most important.
Define the boundaries of the website. Because people can move between websites so easily, it’s important that they understand when this has happened. Using a consistent design across your web pages helps to reassure visitors that they are still on your website. You can create different layouts for different page types (your homepage and product pages are bound to look different, for example), but these should share the same design elements. Avoid using radically different color schemes or graphic styles on different pages, otherwise visitors might think they’ve gone to a different website. Anything that makes the visitor think about using your website, instead of just getting on with doing so, is a barrier to your site achieving its goals.
- Feel easy-to-use. Your site navigation needs to feel intuitive to visitors, so that they can easily find things. They want to spend time using your content, not trying to figure out how to find it. Navigation is so important that Chapter 5 is dedicated to it.
- Inspire confidence. If you have a site that visitors consider to be professionally designed, they’re more likely to come back or spend money with you. People will (sometimes subconsciously) judge the quality of your expertise or services based on how professional your website looks.
Fixed or flexible?
One of the challenges of website design is that you don’t know how large the user’s web browser window will be. screen sizes vary greatly, and people often resize their browser window so that they can see more than one application on screen, side by side.
The website design is typically contained in a box on the screen (a container box). Sometimes this box has no border, so it’s invisible. But how the size of that box is defined governs what happens to the whole web page, at different screen and window sizes. There are several common strategies for dealing with the uncertainty of different screen and window sizes.
Fixed width design
Fixed width is perhaps the most popular solution to the challenge of different screen sizes. In a fixed width design, the container box has a width that is always the same size. This gives the designer the most control over the look of the final web page, so it makes it easier to create pages that consistently look good.
It takes control away from users, though. If they shrink the browser window, they might have to scroll horizontally as well as vertically to see everything, which is annoying. Users with big screens see the website at a smaller size than their screen could display, but the content remains easy to navigate and read.
On a smaller screen, there is less white space at the sides, and less of the page’s height is visible at once. But the core design is preserved, and the web designer remains in control.
Flexible design
In a flexible web design, the website design stretches or shrinks to the size of the browser window.
This strategy reduces the amount of scrolling users have to do because the content can make optimal use of the screen space available. You can combine a flexible design with a maximum width, so that the site scales down for smaller screens and windows, but doesn’t become too wide to read comfortably on large monitors. Flexible design can be hard to do well, because everybody sees a different amount of content on screen depending on the size of their monitor and/or browser window.
Variable content design
Some sites show additional content to users who have larger screens. This needs to be non-essential bonus content, because not everyone will see it. Amazon is a good example of this. Its main books page, for example, expands horizontally to show more books when viewed on a wider screen.