web design practices browsers and displays. key concept web browsers are html and css renders. how...
TRANSCRIPT
Web Design Practices
Browsers and Displays
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.
Web Browsers that matterhttp://en.wikipedia.org/wiki/Usage_share_of_web_browsers
December 2008IE 69.80% ▼ Firefox 20.66% ▲ Safari 7.18% ▲ Chrome 0.87% ▲Opera 0.72% ▲ Netscape 0.52%
▼Mozilla 0.08% ▼
December 2005
IE 91.35%
Firefox 3.66%
Netscape 2.09%
Safari 1.50%
Mozilla 0.80%
Opera 0.51%
97.64%
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?
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.
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
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.
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.
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.
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.
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.
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.
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.
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
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?
Display Resolution
Height:
15 pixels
Width: 20 pixels
Aspect Ratio:
20/15 =
4:3
Display Resolution
• A 17” Monitor and a 30” Monitor can have the same resolution.
• The pixels are simply enlarged.
17”30”
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”
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.
Standard ResolutionsStandard Resolution Ratio Pixels
VGA 640×480 4:3 307,200
SVGA 800×600 4:3 480,000
XGA 1024×768 4:3 786,432
XGA+ 1152×864 4:3 995,328
SXGA+ 1400×1050 4:3 1,470,000
UXGA 1600×1200 4:3 1,920,000
QXGA 2048×1536 4:3 3,145,728
QUXGA 3200×2400 4:3 7,680,000
HUXGA 6400×4800 4:3 30,720,000
Standard Resolution Ratio Pixels
WXGA1 1280×800 16:10 1,024,000
WSXGA 1440×900 16:10 1,296,000
WSXGA+ 1680×1050 16:10 1,764,000
WUXGA 1920×1200 16:10 2,304,000
WQXGA 2560×1600 16:10 4,096,000
WQUXGA 3840×2400 16:10 9,216,000
WHUXGA 7680×4800 16:10 36,864,000
Standard Resolution Ratio Pixels
SXGA 1280×1024 5:4 1,310,720
QSXGA 2560×2048 5:4 5,242,880
HSXGA 5120×4096 5:4 20,971,520
Most Common2004
Standard ResolutionsStandard Resolution Ratio Pixels
VGA 640×480 4:3 307,200
SVGA 800×600 4:3 480,000
XGA 1024×768 4:3 786,432
XGA+ 1152×864 4:3 995,328
SXGA+ 1400×1050 4:3 1,470,000
UXGA 1600×1200 4:3 1,920,000
QXGA 2048×1536 4:3 3,145,728
QUXGA 3200×2400 4:3 7,680,000
HUXGA 6400×4800 4:3 30,720,000
Standard Resolution Ratio Pixels
WXGA1 1280×800 16:10 1,024,000
WSXGA 1440×900 16:10 1,296,000
WSXGA+ 1680×1050 16:10 1,764,000
WUXGA 1920×1200 16:10 2,304,000
WQXGA 2560×1600 16:10 4,096,000
WQUXGA 3840×2400 16:10 9,216,000
WHUXGA 7680×4800 16:10 36,864,000
Standard Resolution Ratio Pixels
SXGA 1280×1024 5:4 1,310,720
QSXGA 2560×2048 5:4 5,242,880
HSXGA 5120×4096 5:4 20,971,520
Most Common2006
Standard ResolutionsStandard Resolution Ratio Pixels
VGA 640×480 4:3 307,200
SVGA 800×600 4:3 480,000
XGA 1024×768 4:3 786,432
XGA+ 1152×864 4:3 995,328
SXGA+ 1400×1050 4:3 1,470,000
UXGA 1600×1200 4:3 1,920,000
QXGA 2048×1536 4:3 3,145,728
QUXGA 3200×2400 4:3 7,680,000
HUXGA 6400×4800 4:3 30,720,000
Standard Resolution Ratio Pixels
WXGA1 1280×800 16:10 1,024,000
WSXGA 1440×900 16:10 1,296,000
WSXGA+ 1680×1050 16:10 1,764,000
WUXGA 1920×1200 16:10 2,304,000
WQXGA 2560×1600 16:10 4,096,000
WQUXGA 3840×2400 16:10 9,216,000
WHUXGA 7680×4800 16:10 36,864,000
Standard Resolution Ratio Pixels
SXGA 1280×1024 5:4 1,310,720
QSXGA 2560×2048 5:4 5,242,880
HSXGA 5120×4096 5:4 20,971,520
Common for Standard Laptops and LCDs
Common for Widescreen Laptops
and LCDs
Common for budget LCD Displays
Standard ResolutionsStandard Resolution Ratio Pixels
VGA 640×480 4:3 307,200
SVGA 800×600 4:3 480,000
XGA 1024×768 4:3 786,432
XGA+ 1152×864 4:3 995,328
SXGA+ 1400×1050 4:3 1,470,000
UXGA 1600×1200 4:3 1,920,000
QXGA 2048×1536 4:3 3,145,728
QUXGA 3200×2400 4:3 7,680,000
HUXGA 6400×4800 4:3 30,720,000
Standard Resolution Ratio Pixels
WXGA1 1280×800 16:10 1,024,000
WSXGA 1440×900 16:10 1,296,000
WSXGA+ 1680×1050 16:10 1,764,000
WUXGA 1920×1200 16:10 2,304,000
WQXGA 2560×1600 16:10 4,096,000
WQUXGA 3840×2400 16:10 9,216,000
WHUXGA 7680×4800 16:10 36,864,000
Standard Resolution Ratio Pixels
SXGA 1280×1024 5:4 1,310,720
QSXGA 2560×2048 5:4 5,242,880
HSXGA 5120×4096 5:4 20,971,520
Common among large
displays24+”
Common among large
displays24+”
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.
Browser 800 X 600 1024 X 768 1280 X 1024
Safari 780 X 429 1004 X 597 1260 X 853
Firefox 781 X 421 1005 X 579 1261 X 835
IE 780 X 378 1004 X 546 1260 X 802
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.
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/– Fixed: www.cs.siena.edu/~ebreimer/
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.
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
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.
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.
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)