Designing effective websites

1. Designing effective websites cathy.needham@gmail.com

2. Web design process cathy.needham@gmail.com

3. Planning cathy.needham@gmail.com

4. Research • Set clear goals • Know your audience http://flickr.com/ cathy.needham@gmail.com

5. cathy.needham@gmail.com

6. The nature of web design • Platforms • Browsers • Connection speeds • Monitor resolutions • Monitor colours • Reader preferences • Alternative browsing http://flickr.com/ cathy.needham@gmail.com

7. Planning: summary cathy.needham@gmail.com

8. Information architecture cathy.needham@gmail.com

9. Organize content so readers can find it http://flickr.com/ cathy.needham@gmail.com

10. Lead the reader through the content using the most natural paths cathy.needham@gmail.com

11. Navigation signs TOOLS HOUSEWARES LAWN AND GARDEN POWER TOOLS HAND TOOLS SANDING AND GRINDING Look over individual products on the aisle Example from Don’t make me think, by Steve Krug cathy.needham@gmail.com

12. Write clear navigation labels http://flickr.com/ cathy.needham@gmail.com

13. Information architecture: summary cathy.needham@gmail.com

14. Writing for the web cathy.needham@gmail.com

15. This is an example of how not to structure your content. Writing for the web can increase readability dramatically. To have a successful website and communicate your messages effectively, it is worth spending some time writing and editing for the web. When writing for the web, break up your content into elements to make it easier to read. Avoid long, continuous pages of text with no visual break. People who read the web are impatient and multi-taskers. They scan the page, deciding very quickly which parts are useful to them. They rarely read text thoroughly. Structure your content and edit your text to help people scan the page. Break up your content into different elements and break up your pages into clearly defined areas. Give a clear visual hierarchy; the more important something is, the more prominent it is visually. Group related items together and use headings for each group. The BBC news site is a good example of content structuring. It uses short, punchy paragraphs and a variety of other elements to visually break up the page and help readers to scan and digest the content quickly. cathy.needham@gmail.com

16. Write clearly and concisely Use a style sheet Proofread http://flickr.com/ cathy.needham@gmail.com

17. Writing for the web: summary cathy.needham@gmail.com

18. Visual design cathy.needham@gmail.com

19. cathy.needham@gmail.com

20. 800 x 600 Designing for different resolutions 640 x 480 1024 x 768 cathy.needham@gmail.com

21. How to create liquid layouts div#main {width: 70%;margin-right: 5%; float: left; background: #99CCFF; } div#extras {width: 25%; float: left; background: #FFCC66; } cathy.needham@gmail.com

22. How to create fixed-width layouts div#container {width: 750px; position: absolute; padding: 0px; } div#extras { position: absolute; top: 0px; left: 0px; width: 200px; background-color: #FFCC66; } div#main {margin-left: 25px; background-color: #99CCFF; } cathy.needham@gmail.com

23. Using colour • Limit number of colours • Consistency • Corporate colours • Cultural meanings • Moods • Contrast • Colour blindness http://flickr.com/ cathy.needham@gmail.com

24. Specifying colour cathy.needham@gmail.com

25. Fonts • Times New Roman (Times) • Ariel (Helvetica) • Verdana • Trebuchet MS • Georgia • Courier cathy.needham@gmail.com

26. Conventions help you figure out a lot about a web page, even if you can’t understand a word of it! cathy.needham@gmail.com

27. The design process Review site goals Develop concepts Create final design templates and style sheet Design mockups of 2-3 ideas for feedback and testing cathy.needham@gmail.com

28. Images 1 year’s worth of LHC data (20 km of CD) Eachyear, the LHC willproduce more than 15 Petabytes (million gigabytes) of data “A picture is worth a thousand words” Mont Blanc (4.8 km) http://flickr.com/ Katie Weeks, RAL cathy.needham@gmail.com

29. Image formats Use JPEGs for photos JPEG (50kb) GIF (62kb) cathy.needham@gmail.com

30. Image formats Use GIFs for solid, flat colours and sharp edges GIF (2kb) JPEG (2kb) cathy.needham@gmail.com

31. width="145" height="100"actual size of image width="200" height="100" Don’t resize images in HTML width="290" height="200" width="72" height="50" All images are 5kb cathy.needham@gmail.com

32. Visual design: summary cathy.needham@gmail.com

33. Production cathy.needham@gmail.com

34. Web standards Web standards use a combination of technologies to deliver the greatest benefits to the greatest number of web users while ensuring the long-term viability of any document published on the web. http://flickr.com/ cathy.needham@gmail.com

35. “If my website is built with the standards, it will be unexciting and I will lose customers” Claudia, CEO “Creating a website which respects the standards has nothing to do with generating text-only web pages – you’ll be able to have very exciting websites” “I don’t have the budget to care about standards in my website. It will cost too much” Alan, Tech Director “Designing with standards will simplify maintenance and your pages will have a longer life. So designing with web standards will cost you less” “If I respect the standards, it will infringe upon my creativity” Sara, Artistic Director “It’s easy to make your websites engaging and attractive when creating with web standards” “I don’t care about accessibility. People with disabilities are not my target audience” Simon, Graphic Designer “People with disabilities represent ~10% of the total population. It's easier to maintain an accessible website, your traffic will increase, and more browsers will have access to the content” “Why should I respect web standards? The web is a free place” Jeff, Web Programmer “The web is a free place shared by many users whose needs you don't necessarily know. The standards have been designed to keep in mind all potential audiences” Adapted from “My website is standard! And yours? http://www.w3.org/QA/2002/04/Web-Quality cathy.needham@gmail.com

36. What is XHTML? XHTML – extensible HTML – is the latest version of HTML. It is a stricter and cleaner version of HTML. XHTML is a combination of HTML and XML – it consists of all the elements of HTML 4.01 combined with the syntax of XML. The changes from HTML to first-generation XHTML are minor and are mainly to achieve conformance with XML. cathy.needham@gmail.com

37. XHTML requirements • Element and attribute names must be lowercase • All elements (including empty elements) must be closed • Attribute values must be in quotation marks • Elements must be nested properly, e.g. • Use <p>Hello to <em>everyone</em></p> • And not <p>Hello to <em>everyone</p></em> • Always use character entities for special characters • Use a DOCTYPE declaration cathy.needham@gmail.com

38. XHTML: provides meaning and structure markup to content CSS (cascading style sheets): defines the presentation – colour, fonts and layout – of the content cathy.needham@gmail.com

39. Cascading style sheets • Better control • Less work • Smaller documents • More accessible sites • Reliable browser support • Easier maintenance • Separate style sheets for print • Increase search engine optimization http://flickr.com/ cathy.needham@gmail.com

40. The parts of an element box Margin area Padding area The general public seized the one and only opportunity to visit the Large Hadron Collider before it goes into service. Border Outer edge Content area height width Inner edge cathy.needham@gmail.com

41. 10 tips to make your site accessible • Use web standards • Write clearly and concisely • Write meaningful ALT text • Use a spell checker • Use high contrast colours for text • Make text scalable • Write meaningful link text • Provide transcripts of audio/video • Avoid frames • Be cautious with Flash http://flickr.com/ cathy.needham@gmail.com

42. Production: summary cathy.needham@gmail.com

43. Launch and beyond cathy.needham@gmail.com

44. What next? • Celebrate! • Announce the launch • Conduct a post-launch meeting • Develop a maintenance plan • Track your site’s success http://flickr.com/ cathy.needham@gmail.com

45. Summary Don’t Design for yourself or your boss Use frames Have long, continuous pages of text Use poor quality images Overuse images Overdo colours Use “click here” Use “under construction” notices Use the “new” gif Put too much content on the home page Use flags for languages Publish big files (images or pdfs) Use unvalidated, poor code Use busy backgrounds Use all CAPS for bodies of text Use blinking or flashing text Use Flash intros Use background music cathy.needham@gmail.com

46. Summary Do • Set clear goals • Organize your content so readers can find it • Write clearly and concisely • Proofread and use a spell checker • Put the most important content at the top left • Limit the number of colours and fonts you use • Be consistent in page layout, design and style • Keep content updated, relevant and fresh • Make your site accessible • Be consistent • Cut the word count • Think about your audience • Write meaningful nav labels • Write for the web • Use quality images • Use web standards • Verify XHTML and CSS • Test functionality and design • Check all links work • Do usability testing • Don’t make your readersthink cathy.needham@gmail.com