1. Web Design Practices Browsers and Displays

2. Key Concept Web browsers are HTML and CSS renders. How your page looks depends on which browser you use. How you page looks depends on your screens resolution.

3. Web Browsers that matter http://en.wikipedia.org/wiki/Usage_share_of_web_browsers December 2008 IE69.80% ▼ Firefox20.66% ▲ Safari 7.18% ▲ Chrome 0.87% ▲ Opera 0.72% ▲ Netscape 0.52% ▼ Mozilla 0.08% ▼ December 2005 IE91.35% Firefox 3.66% Netscape 2.09% Safari 1.50% Mozilla 0.80% Opera 0.51% 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 follow their own standards –they consider bugs to be features Should one private company set the standards for the WWW?

5. IE6 Issues IE6 is a nightmare –came out in 2001 (8 years ago) –still used (26% market share) –does NOT follow CSS standards –bugs never patched or fixed 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? –Built 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 page 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 uses all different screen resolutions Resolution: Number of pixels –Width X Height From 640 X 480 to 7680×4800 5 different aspect ratios

15. Resolution Evolution Until 2006, web designers built pages for specific screen resolutions. 800 X 600 most common 2000-2004. Then 1024 X 768 in 2005-2006 Today, resolutions vary so much that its hard to pick a good page width. Why do resolutions now vary?

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

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

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

19. 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… –Full monitor width on an 800 X 600 resolution –Half the monitor’s width on 1600 X 1200.

20. Standard Resolutions StandardResolutionRatioPixels VGA640×4804:3307,200 SVGA800×6004:3480,000 XGA1024×7684:3786,432 XGA+1152×8644:3995,328 SXGA+1400×10504:31,470,000 UXGA1600×12004:31,920,000 QXGA2048×15364:33,145,728 QUXGA3200×24004:37,680,000 HUXGA6400×48004:330,720,000 StandardResolutionRatioPixels WXGA WXGA 1 1280×80016:101,024,000 WSXGA1440×90016:101,296,000 WSXGA+1680×105016:101,764,000 WUXGA1920×120016:102,304,000 WQXGA2560×160016:104,096,000 WQUXGA3840×240016:109,216,000 WHUXGA7680×480016:1036,864,000 StandardResolutionRatioPixels SXGA1280×10245:41,310,720 QSXGA2560×20485:45,242,880 HSXGA5120×40965:420,971,520 Most Common 2004

21. Standard Resolutions StandardResolutionRatioPixels VGA640×4804:3307,200 SVGA800×6004:3480,000 XGA1024×7684:3786,432 XGA+1152×8644:3995,328 SXGA+1400×10504:31,470,000 UXGA1600×12004:31,920,000 QXGA2048×15364:33,145,728 QUXGA3200×24004:37,680,000 HUXGA6400×48004:330,720,000 StandardResolutionRatioPixels WXGA WXGA 1 1280×80016:101,024,000 WSXGA1440×90016:101,296,000 WSXGA+1680×105016:101,764,000 WUXGA1920×120016:102,304,000 WQXGA2560×160016:104,096,000 WQUXGA3840×240016:109,216,000 WHUXGA7680×480016:1036,864,000 StandardResolutionRatioPixels SXGA1280×10245:41,310,720 QSXGA2560×20485:45,242,880 HSXGA5120×40965:420,971,520 Most Common 2006

22. Standard Resolutions StandardResolutionRatioPixels VGA640×4804:3307,200 SVGA800×6004:3480,000 XGA1024×7684:3786,432 XGA+1152×8644:3995,328 SXGA+1400×10504:31,470,000 UXGA1600×12004:31,920,000 QXGA2048×15364:33,145,728 QUXGA3200×24004:37,680,000 HUXGA6400×48004:330,720,000 StandardResolutionRatioPixels WXGA WXGA 1 1280×80016:101,024,000 WSXGA1440×90016:101,296,000 WSXGA+1680×105016:101,764,000 WUXGA1920×120016:102,304,000 WQXGA2560×160016:104,096,000 WQUXGA3840×240016:109,216,000 WHUXGA7680×480016:1036,864,000 StandardResolutionRatioPixels SXGA1280×10245:41,310,720 QSXGA2560×20485:45,242,880 HSXGA5120×40965:420,971,520 Common for Standard Laptops and LCDs Common for Widescreen Laptops and LCDs Common for budget LCD Displays

23. Standard Resolutions StandardResolutionRatioPixels VGA640×4804:3307,200 SVGA800×6004:3480,000 XGA1024×7684:3786,432 XGA+1152×8644:3995,328 SXGA+1400×10504:31,470,000 UXGA1600×12004:31,920,000 QXGA2048×15364:33,145,728 QUXGA3200×24004:37,680,000 HUXGA6400×48004:330,720,000 StandardResolutionRatioPixels WXGA WXGA 1 1280×80016:101,024,000 WSXGA1440×90016:101,296,000 WSXGA+1680×105016:101,764,000 WUXGA1920×120016:102,304,000 WQXGA2560×160016:104,096,000 WQUXGA3840×240016:109,216,000 WHUXGA7680×480016:1036,864,000 StandardResolutionRatioPixels SXGA1280×10245:41,310,720 QSXGA2560×20485:45,242,880 HSXGA5120×40965:420,971,520 Common among large displays 24+”

24. Live Space Some of the space is taken up by the browser’s menus, scroll bars, and tool bars. If you are designing of a specific resolution, your page size should always be about 20 pixels smaller. Browser800 X 6001024 X 7681280 X 1024 Safari780 X 4291004 X 5971260 X 853 Firefox781 X 4211005 X 5791261 X 835 IE780 X 3781004 X 5461260 X 802

25. How wide is too wide? Most laptop and LCD monitors are still under 1600px wide People with 1600+ monitors like to put two pages side-by-side. 800-1000px wide seems to be the standard width range of the most popular websites.

26. 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. –Content re-sizes dynamically as the browser windows is resized. Examples: –Liquid: http://www.w3.org/http://www.w3.org/ –Fixed: www.cs.siena.edu/~ebreimer/www.cs.siena.edu/~ebreimer/

27. 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.

28. 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

29. Creating Fixed Pages Surprisingly, fixed width designs are the most prevalent, especially among commercial websites. HTML Tables: tags can be used to create fixed layouts CSS block element: tag is a better way to create fixed layouts.

30. 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 550 is a good target size for full- screen above the fold content.

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