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)