1. Designing effective websites

2. Web design process cathy.needham@gmail.com Visual design Production
Launch and beyond
Site structure
Writing for the web
Planning
Site structure
Writing for the web
Visual design
Production
Launch and beyond
Planning

3. Planning cathy.needham@gmail.com Planning Site structure
Writing for the web
Visual design
Production
Launch and beyond

4. Research Set clear goals Know your audience cathy.needham@gmail.com
Planning
Site structure
Writing for the web
Visual design
Production
Launch and beyond

5. cathy.needham@gmail.com Planning Site structure Writing for the web
Visual design
Production
Launch and beyond

6. The nature of web design
Platforms
Browsers
Connection speeds
Monitor resolutions
Monitor colours
Reader preferences
Alternative browsing
Planning
Site structure
Writing for the web
Visual design
Production
Launch and beyond

7. Planning: summary cathy.needham@gmail.com Planning Site structure
Writing for the web
Visual design
Production
Launch and beyond

8. Information architecture
Planning
Site structure
Writing for the web
Visual design
Production
Launch and beyond

9. Organize content so readers can find it
Planning
Site structure
Writing for the web
Visual design
Production
Launch and beyond

10. Lead the reader through the content using the most natural paths
Planning
Site structure
Writing for the web
Visual design
Production
Launch and beyond

11. Example from Don’t make me think, by Steve Krug
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
Planning
Site structure
Writing for the web
Visual design
Production
Launch and beyond

12. Write clear navigation labels
Planning
Site structure
Writing for the web
Visual design
Production
Launch and beyond

13. Information architecture: summary
Planning
Site structure
Writing for the web
Visual design
Production
Launch and beyond

14. Writing for the web cathy.needham@gmail.com Planning Site structure
Visual design
Production
Launch and beyond

15. This is an example of how not to structure your content
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.
Planning
Site structure
Writing for the web
Visual design
Production
Launch and beyond

16. Write clearly and concisely
Use a style sheet
Proofread
Planning
Site structure
Writing for the web
Visual design
Production
Launch and beyond

17. Writing for the web: summary
Planning
Site structure
Writing for the web
Visual design
Production
Launch and beyond

18. Visual design cathy.needham@gmail.com Planning Site structure
Writing for the web
Visual design
Production
Launch and beyond

19. cathy.needham@gmail.com Planning Site structure Writing for the web
Visual design
Production
Launch and beyond

20. Designing for different resolutions
640 x 480
800 x 600
1024 x 768
Designing for different resolutions
Planning
Site structure
Writing for the web
Visual design
Production
Launch and beyond

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; }
Planning
Site structure
Writing for the web
Visual design
Production
Launch and beyond

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;
Planning
Site structure
Writing for the web
Visual design
Production
Launch and beyond

23. Using colour Limit number of colours Consistency Corporate colours
Cultural meanings
Moods
Contrast
Colour blindness
Planning
Site structure
Writing for the web
Visual design
Production
Launch and beyond

24. Specifying colour cathy.needham@gmail.com
Planning
Site structure
Writing for the web
Visual design
Production
Launch and beyond

25. Times New Roman (Times) Ariel (Helvetica) Verdana Trebuchet MS Georgia
Fonts
Times New Roman (Times)
Ariel (Helvetica)
Verdana
Trebuchet MS
Georgia
Courier
Planning
Site structure
Writing for the web
Visual design
Production
Launch and beyond

26. Conventions help you figure out a lot about a web page, even if you can’t understand a word of it!
Planning
Site structure
Writing for the web
Visual design
Production
Launch and beyond

27. The design process Review site goals Develop concepts
Design mockups of 2-3 ideas for feedback and testing
Create final design templates and style sheet
Planning
Site structure
Writing for the web
Visual design
Production
Launch and beyond

28. “A picture is worth a thousand words”
Images
1 year’s worth of LHC data
(20 km of CD)
Each year, the LHC will produce more than 15 Petabytes (million gigabytes) of data
“A picture is worth a thousand words”
Mont Blanc (4.8 km)
Katie Weeks, RAL
Planning
Site structure
Writing for the web
Visual design
Production
Launch and beyond

29. Image formats Use JPEGs for photos JPEG (50kb) GIF (62kb)
Planning
Site structure
Writing for the web
Visual design
Production
Launch and beyond
A plasma ball in the Microcosm museum

30. Use GIFs for solid, flat colours and sharp edges
Image formats
Use GIFs for solid, flat colours and sharp edges
GIF (2kb)
JPEG (2kb)
Planning
Site structure
Writing for the web
Visual design
Production
Launch and beyond
A plasma ball in the Microcosm museum

31. Don’t resize images in HTML
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
Planning
Site structure
Writing for the web
Visual design
Production
Launch and beyond
A plasma ball in the Microcosm museum

32. Visual design: summary
Planning
Site structure
Writing for the web
Visual design
Production
Launch and beyond

33. Production cathy.needham@gmail.com Planning Site structure
Writing for the web
Visual design
Production
Launch and beyond

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.
Planning
Site structure
Writing for the web
Visual design
Production
Launch and beyond

35. “Why should I respect web standards? The web is a free place”
“I don’t care about accessibility. People with disabilities are not my target audience”
Simon, Graphic Designer
“It’s easy to make your websites engaging and attractive when creating with web standards”
“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”
“If my website is built with the standards, it will be unexciting and I will lose customers”
Claudia, CEO
“If I respect the standards, it will infringe upon my creativity”
Sara, Artistic Director
“Designing with standards will simplify maintenance and your pages will have a longer life. So designing with web standards will cost you less”
“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
Adapted from “My website is standard! And yours?
Planning
Site structure
Writing for the web
Visual design
Production
Launch and beyond

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.
Planning
Site structure
Writing for the web
Visual design
Production
Launch and beyond

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
Planning
Site structure
Writing for the web
Visual design
Production
Launch and beyond

38. XHTML: provides meaning and structure markup to content
CSS (cascading style sheets): defines the presentation – colour, fonts and layout – of the content
Planning
Site structure
Writing for the web
Visual design
Production
Launch and beyond

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
Planning
Site structure
Writing for the web
Visual design
Production
Launch and beyond

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
Planning
Site structure
Writing for the web
Visual design
Production
Launch and beyond

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
Planning
Site structure
Writing for the web
Visual design
Production
Launch and beyond

42. Production: summary cathy.needham@gmail.com Planning Site structure
Writing for the web
Visual design
Production
Launch and beyond

43. Launch and beyond cathy.needham@gmail.com Planning Site structure
Writing for the web
Visual design
Production
Launch and beyond

44. What next? Celebrate! Announce the launch
Conduct a post-launch meeting
Develop a maintenance plan
Track your site’s success
Planning
Site structure
Writing for the web
Visual design
Production
Launch and beyond

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

46. Summary Do Organize your content so readers can find it
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 readers think