Measuring Success Measuring Vitor Interaction Instaing Google Araljtics What the Numbers Mean Other Important Metres Surveying Customers Creating 2 Survey Enabling Evolution Credits Litto 228 226 277 228 229 230 231 yEys 233Layout and Design Your layout needs to eee eed eee ar ee ene Pee aoe Pe ern oe eae ey er ae pe oa The Role of Your Design Lie elma lee Using the Grid PRCT P Ants MEL dale WUT ate) een en nae eee RS aca ene Reret eins Caen nan What is Your Look and Feel? a tena et) ert naaut and design u in this chapter are just that: guidelines. Feel free to break them creatively, Just take care that you don’t b them without thinkin about them first ee Don't be afraid to leave some empty space, at the bottom of a column, for exam design breathin: You don’t have every inch of your page with content or design elements whatever tools you find easiest. You could start with pen and paper use an art package li Adobe Photoshop, or 9} straight into an HTM: The key is xxperiment and no become wedded to any particular design or ut too early 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 goal © 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 dorit 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 its 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 tastier to your site achieving its goals. © Feel easy-to-use. Your site navigation needs to feel intuitive to visitors, so that they ean 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 sereen (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 hhas 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. Te takes control away from users, though. If they shrink the browser window, they might have to scroll horizontally as well as vertically to sce 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 sereen, 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. The ‘Guardian (www.guardian.co.uk) has built one of the many sites that use this strategy. Above: The Guardian website on a narrow monitor. Left: The Guardian website on a wide monitor. too How wide should your fixed width design be? W3Counter (wn w3counter.com/ gloabstats.php) publishes screen resolution data based on visitors to over 40,000 websites. In September 2010, only 2.2% of people stil use 800x600 screens. Most had at least 1024x768 resolution. Designers often use a fixed width cof 960 pixels, which space for the scrollbar and other browser features. 960 is also easily divisible into vse If you already have a website, use your web analytics to measu he screen resolution your visitors have. The global trends in sereen size are less important ‘than what your audience actually uses, Websites hat cater for corporate or public sector markets could find screen sizes lag considerably behind the web population, as a whole.Layout and Design 52 ee The subscription service Adobe CS Live includes SiteCatalyst Netaverages. This provides current data on the browsers and devices people are Using to view websites, The browser does all the hard work in putting things in the right place You just need to say how wide you want your website content by pixels, a percentage of able space, or a text size (using the em unit). Another strategy is to use an elastic design, which stretches in proportion to the size of the text. That means the length of lines of text remains constant, so you can ensure they remain easy to read. ..cont’d Flexible design In a flexible 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 is 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. ‘The Broads Authority (wwwbroads-authority.gowuk) uses a flexible design with a maximum width. The content columns expand to use the available space, but the maximum width stops them from becoming too wide. 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, ——— llUsing the Grid ‘Web designers often use a grid to help them position content on screen, within the container box. Grids are routinely used for designing print products. Newspapers, for example, use column-based layouts. Sometimes, a headline ora picture might span two, three or four columns. But it rarely spans two and a half columns, because that tends to look messy. Whether you're working in print or online, if you can line up blocks of content, it makes your design look tidier. ‘Take a look at the website for the Drupal content management system (www.drupal.org). The grey stripes have been overlaid to show the 12 column grid that is the foundation of this design. ‘The top blue section is divided into two halves. The first white section contains threc boxes, all aligned to the same grid. Some of the content within these boxes is centered, but most of it sits tightly against the edge of the column, ‘Towards the bottom of the page, the design is two-column again, and aligned to the same grid. Notice how well all the content on the left is aligned, from the logo down to the footer links. Not everything has to sit rigidly on the grid: you can break out of it for emphasis, and to create some pace in the design. But, if nothing lines up, a web page can Jook amateurish, or chaotic. rote The free 960 Grid System (www.960.gs), developed by Nathan Smith, provides CSS templates you can use to help build your grid-based layout. It also includes sketch sheets you can print out to help you plan a 12, 16 or 24 column design ‘0 stop the design looking too blocky, don’t put a border around all your content boxes. You can also use curves in your design, like Orion ‘Advisor Services (www. orionadvisor.cor),Layout and Design er Above: The rule of thirds says that designs based on dividing things into thirds look harmonious. The website of singer and songwriter Lily Allen (wwwillyallenmusic. com) uses three equally big columns on th homepage, and thirds / one-third layout on content pages two Right: The inconsistent alignment a aligned text Far right: The pictures line up with each other, the text above and the company name, The left-aligned main text looks cleaner. The footer is right-aligned with the right-margin of the main content box. This is far from a complete web design, but it does show the difference good alignment makes. Tips for Good Alignment ‘To ensure your web page lines up well, follow these steps: 8 Mark up your content correctly, using the right HTML, tags, to identify a heading or a list item, for example. By default, HTML brings consistency, ensuring that all headlines and bullets line up. You'll learn more about HTML in Chapter 6. e ‘Take care when adding spacing using CSS (changing the padding and margin around an element). This can introduce inconsistencies that throw out the natural alignment that HTML gives you. You'll learn how to control spacing using CSS in Chapter 7. 6 Be careful if you're using a visual editing system to build your web pages. They will often let you place content ‘wherever you want on the page, but wont alert you if you're a few pixels out in lining things up. That can lead to designs that look sloppy. oe Tt easier to create a strong alignment, and the impression, of good design that goes with it, if you align content with the left or right cdge of the page or content box. If you center content, the alignment is harder to see. Centered paragraphs are also harder to read, because the start of each line is harder to find. Newcomers often want to center everything, but you should limit your use of center alignment to a few carefully selected parts of your design. ‘Gener Bed Den Lt SAS Up. upand Away!