Web Design Preliminaries

1. Web Design Preliminaries Important Practical Detailsand key Design Concepts

2. Key Concept • Web browsers are HTML and CSS renders. • How your page looks depends on which browser you use. • You should always test your pages on multiple browsers.

3. Web Browsers that matter http://en.wikipedia.org/wiki/Usage_share_of_web_browsers December 2005 IE 91.35% Firefox 3.66% Netscape 2.09% Safari 1.50% Mozilla 0.80% Opera 0.51% December 2008 IE 69.80% ▼ Firefox 20.66% ▲ Safari 7.18% ▲ Chrome 0.87% ▲ Opera 0.72% ▲ Netscape 0.52% ▼ Mozilla 0.08% ▼ 97.64%

4. Internet Explore (IE) • Microsoft has thrived on creating proprietary software. • Large market share so • they feel they should set the standards. • thus, they don’t follow the standards strictly • they consider bugs to be features • Should one private company set the standards for the WWW?

5. IE6 Issues • IE6 is a nightmare • still uses (26% market share) • came out in 2001 (8 years ago) • does NOT follow CSS standards • bugs never patched or fixed • Completely standard web pages do not render correctly in IE6.

6. IE7 • Historically, web designers had to design around IE6’s quirks • It was part of the business • NOT Anymore. If a page doesn’t look good in IE6 then solution is to switch to IE7 • IE7 is supposed be 100% standards compliant • Still has minor bugs • But, it’s a major step forward

7. Firefox • Until 2005, nothing could stop IE6 (90% market share) • Its seemed that Microsoft (one private corporation) could say “screw the standards.” • Then, Firefox emerged. • Still growing in popularity, especially among those who are technologically savvy.

8. Firefox • Why switch to Firefox? • Build by the people who pioneered the WWW • Initially it was very light-weight (not anymore) • Better security (viruses and spyware) • First to do tabbed browsing properly • Better document search features.

9. Safari • Apple’s Standard Web Browser • More and more people are switching from PCs to Macs • Similar to Firefox in terms of compliance and features.

10. Google’s Chrome • Designed to work better with Google Applications • Google Docs • Spreadsheets • Picasa • Maps • May be the wave of the future. • In the future, almost all applications may follow Google’s model, i.e., web-based.

11. Good news, bad news • It is possible to create a visually appealing website that looks good in all the major browsers • Note the word “possible,” which is very different than the word “easy.” • It is impossible to create a website that looks identical in all the major browsers. • Note the word “impossible,” which can lead to infinite development time.

12. Professional Practice • Test your web page on 3 browsers. • IE7, Firefox, Safari • Don’t concern yourself with IE6 • The world needs to move on… • Also test on a Mac! The MacOS handles font sizes differently.

13. Professional Practice • Browser bugs exist. • Sometimes you cannot get a page to look the same in all browsers. • Many web design experts, including the author of the Weasel book, say • Standards-complaint browser #1 priority • Most popular browser #2 priority • This was a big issue when IE6 was the most popular browser.

14. Display Resolutions • Designing for browser differences is challenging enough, but there is another big problem. • The world used all different screen resolutions • Resolution: Number of pixels • Width X Height • From 640 X 480 to 7680×4800 • 5 different aspect ratios

15. Display Resolution Aspect Ratio: 20/15 = 4:3 Width: 20 pixels Height: 15 pixels

16. Display Resolution • A 17” Monitor and a 30” Monitor can have the same resolution. • The pixels are simply enlarged. 30” 17”

17. Display Resolution • Two monitors can be the same size, but have different resolutions. • Same image will appear smaller on the larger resolution display 19” 19” 1600 X 1200 800 X 600

18. Display Resolution • The resolution not the monitor size determines how much space is available to display a web page. • If you design a web page to be 800 pixels wide… • It’ll take up the whole screen width on an 800 X 600 resolution • But, it’ll only take half the width on 1600 X 1200.

19. Standard Resolutions Most Common 2004

20. Standard Resolutions Most Common 2006

21. Standard Resolutions Common for Standard Laptops Common for Widescreen LCD and Laptop Common for standard LCD Displays

22. Standard Resolutions These might be the most common by 2008 These might be the most common by 2008

23. Live Space • Some of the space is taken up by the browser’s menus, scroll bars, and tool bars. • Thus, 780, 1000, and 1250 are target widths

24. Too Wide • For large resolutions 1600 X ? • You may not want your website to be 1580px wide. • Why?

25. Fixed vs. Liquid Layouts • Interestingly, HTML was originally meant to support only liquid layouts. • A liquid web page… • Fills the entire width of the browser window. • Re-sizes dynamically as the browser windows is resized. • Examples: • Liquid: www.breimer.net • Fixed: www.cs.siena.edu/~ebreimer/

26. Advantages of Liquid Designs • Don’t need to worry about target widths • No awkward empty space • Keeps with the original spirit of HTML; let the user decide.

27. Disadvantages of Liquid Designs • On large resolutions, e.g. 1600 X…The lines of text get too long to read comfortably • BTW CSS 2.1 has a property called max-width that can fix the problem above • Elements float around to different positions depending on the browser size • Inconsistent appearance, unpredictable behavior; users will have varying experience on your page • Consistency is the golden rule of interface design

28. Creating Fixed Pages • Surprisingly, fixed width designs are the most prevalent, especially among commercial websites. • HTML Tables: <table> <tr> <td> tags can be used to create fixed layouts • CSS block element: <div> tag is a better way to create fixed layouts.

29. Designing Above the Fold • Newspaper always put the most important stuff above the fold, so you can see it in the rack. • If you have to scroll down to read content, than the content is below the fold. • 1000 X 500 is a good target size for full-screen above the fold content.

30. Designing Above the Fold Things to put above the fold • Name of website • Primary marketing message • “about” content, e.g., • “shopping happens here” • Primary navigation • Crucial contact information • Banner ads (if you want to make money that way)

31. HTML and XHTML overview • First, XHTML is a reformulation of HTML according to XML standards. • Interestingly, there is only two signficant differences • They added an XML header • Single takes must end with />, instead of just > • Current standard (again) • HTML 4.01 (1999) • XHTML 1.0 (2000)  This the most recent standard, so follow it

32. HTML Commandments • Write standards-complaint documents • Use a validator • Use Semantic Markup • Use tags that describe the element, not the elements appearance • Structure Documents Logically • The HTML source should be in a logical order; Style sheets can reposition items for presentation • Separate Presentation from Structure

33. HTML Elements (Tags) <elementname> Content content </elementname> • In XHTML all element names must be lower case. • In HTML case does not matter (follow XHTML so case should matter to you). • In XHTML all element must have a closing tag • Most non-standard rendering engines are forgiving about closing tags, which makes it possible to forget about them • Example <p>Here is paragraph with no ending tag<p>Here is another paragraph</p>

34. Attributes <element attribute=“value”> content </element> XHTML requires that all attribute values be enclosed in quotes. Examples: <img src=tiger.jpg> Forgiving browsers don’t care about the quotes (Follow XHTML; quotes matter to us)

35. Info Browsers Ignore • An XHTML document is an ASCII Text document. • XHTML ignores, tabs, spaces and line breaks • This allows a web designer to format the actual XHTML document without having an effect on its presentation • Tabs, spaces, and line breaks can all be implemented with tags and style sheets.