Web Design Preliminaries

Important Practical Detailsand key Design Concepts

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.

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 2005IE 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 don’t follow the standards strictly– they consider bugs to be features

• Should one private company set the standards for the WWW?

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.

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?– 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.

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 used all different screen resolutions

• Resolution: Number of pixels– Width X Height

• From 640 X 480 to 7680×4800• 5 different aspect ratios

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…– 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.

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

Common for Widescreen LCD

and Laptop

Common for standard 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

These might be the most common by

2008

These might be the most common by

2008

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

Browser 800 X 600 1024 X 768 1280 X 1024IE6 780 X 429 1004 X 597 1260 X 853

Firefox 1.0 781 X 421 1005 X 579 1261 X 835

Netscape 7 785 X 378 1009 X 546 1265 X 802

Too Wide

• For large resolutions 1600 X ?• You may not want your website to be

1580px wide.• Why?

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/

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

Designing Above the Fold

Things to put above the fold1. Name of website2. Primary marketing message3. “about” content, e.g.,

– “shopping happens here”4. Primary navigation5. Crucial contact information6. Banner ads (if you want to make money that

way)

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

HTML Commandments

1. Write standards-complaint documents• Use a validator

2. Use Semantic Markup• Use tags that describe the element, not the

elements appearance3. Structure Documents Logically

• The HTML source should be in a logical order; Style sheets can reposition items for presentation

4. Separate Presentation from Structure

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>

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)

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.