Download - Web Design Preliminaries
![Page 1: Web Design Preliminaries](https://reader035.vdocument.in/reader035/viewer/2022062323/56816857550346895dde7f5f/html5/thumbnails/1.jpg)
Web Design Preliminaries
Important Practical Detailsand key Design Concepts
![Page 2: Web Design Preliminaries](https://reader035.vdocument.in/reader035/viewer/2022062323/56816857550346895dde7f5f/html5/thumbnails/2.jpg)
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.
![Page 3: Web Design Preliminaries](https://reader035.vdocument.in/reader035/viewer/2022062323/56816857550346895dde7f5f/html5/thumbnails/3.jpg)
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%
![Page 4: Web Design Preliminaries](https://reader035.vdocument.in/reader035/viewer/2022062323/56816857550346895dde7f5f/html5/thumbnails/4.jpg)
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?
![Page 5: Web Design Preliminaries](https://reader035.vdocument.in/reader035/viewer/2022062323/56816857550346895dde7f5f/html5/thumbnails/5.jpg)
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.
![Page 6: Web Design Preliminaries](https://reader035.vdocument.in/reader035/viewer/2022062323/56816857550346895dde7f5f/html5/thumbnails/6.jpg)
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
![Page 7: Web Design Preliminaries](https://reader035.vdocument.in/reader035/viewer/2022062323/56816857550346895dde7f5f/html5/thumbnails/7.jpg)
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.
![Page 8: Web Design Preliminaries](https://reader035.vdocument.in/reader035/viewer/2022062323/56816857550346895dde7f5f/html5/thumbnails/8.jpg)
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.
![Page 9: Web Design Preliminaries](https://reader035.vdocument.in/reader035/viewer/2022062323/56816857550346895dde7f5f/html5/thumbnails/9.jpg)
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.
![Page 10: Web Design Preliminaries](https://reader035.vdocument.in/reader035/viewer/2022062323/56816857550346895dde7f5f/html5/thumbnails/10.jpg)
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.
![Page 11: Web Design Preliminaries](https://reader035.vdocument.in/reader035/viewer/2022062323/56816857550346895dde7f5f/html5/thumbnails/11.jpg)
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.
![Page 12: Web Design Preliminaries](https://reader035.vdocument.in/reader035/viewer/2022062323/56816857550346895dde7f5f/html5/thumbnails/12.jpg)
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.
![Page 13: Web Design Preliminaries](https://reader035.vdocument.in/reader035/viewer/2022062323/56816857550346895dde7f5f/html5/thumbnails/13.jpg)
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.
![Page 14: Web Design Preliminaries](https://reader035.vdocument.in/reader035/viewer/2022062323/56816857550346895dde7f5f/html5/thumbnails/14.jpg)
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
![Page 15: Web Design Preliminaries](https://reader035.vdocument.in/reader035/viewer/2022062323/56816857550346895dde7f5f/html5/thumbnails/15.jpg)
Display Resolution
Height:
15 pixels
Width: 20 pixels
Aspect Ratio:
20/15 =
4:3
![Page 16: Web Design Preliminaries](https://reader035.vdocument.in/reader035/viewer/2022062323/56816857550346895dde7f5f/html5/thumbnails/16.jpg)
Display Resolution
• A 17” Monitor and a 30” Monitor can have the same resolution.
• The pixels are simply enlarged.
17”30”
![Page 17: Web Design Preliminaries](https://reader035.vdocument.in/reader035/viewer/2022062323/56816857550346895dde7f5f/html5/thumbnails/17.jpg)
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”
![Page 18: Web Design Preliminaries](https://reader035.vdocument.in/reader035/viewer/2022062323/56816857550346895dde7f5f/html5/thumbnails/18.jpg)
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.
![Page 19: Web Design Preliminaries](https://reader035.vdocument.in/reader035/viewer/2022062323/56816857550346895dde7f5f/html5/thumbnails/19.jpg)
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
![Page 20: Web Design Preliminaries](https://reader035.vdocument.in/reader035/viewer/2022062323/56816857550346895dde7f5f/html5/thumbnails/20.jpg)
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
![Page 21: Web Design Preliminaries](https://reader035.vdocument.in/reader035/viewer/2022062323/56816857550346895dde7f5f/html5/thumbnails/21.jpg)
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
![Page 22: Web Design Preliminaries](https://reader035.vdocument.in/reader035/viewer/2022062323/56816857550346895dde7f5f/html5/thumbnails/22.jpg)
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
![Page 23: Web Design Preliminaries](https://reader035.vdocument.in/reader035/viewer/2022062323/56816857550346895dde7f5f/html5/thumbnails/23.jpg)
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
![Page 24: Web Design Preliminaries](https://reader035.vdocument.in/reader035/viewer/2022062323/56816857550346895dde7f5f/html5/thumbnails/24.jpg)
Too Wide
• For large resolutions 1600 X ?• You may not want your website to be
1580px wide.• Why?
![Page 25: Web Design Preliminaries](https://reader035.vdocument.in/reader035/viewer/2022062323/56816857550346895dde7f5f/html5/thumbnails/25.jpg)
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/
![Page 26: Web Design Preliminaries](https://reader035.vdocument.in/reader035/viewer/2022062323/56816857550346895dde7f5f/html5/thumbnails/26.jpg)
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.
![Page 27: Web Design Preliminaries](https://reader035.vdocument.in/reader035/viewer/2022062323/56816857550346895dde7f5f/html5/thumbnails/27.jpg)
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
![Page 28: Web Design Preliminaries](https://reader035.vdocument.in/reader035/viewer/2022062323/56816857550346895dde7f5f/html5/thumbnails/28.jpg)
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.
![Page 29: Web Design Preliminaries](https://reader035.vdocument.in/reader035/viewer/2022062323/56816857550346895dde7f5f/html5/thumbnails/29.jpg)
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.
![Page 30: Web Design Preliminaries](https://reader035.vdocument.in/reader035/viewer/2022062323/56816857550346895dde7f5f/html5/thumbnails/30.jpg)
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)
![Page 31: Web Design Preliminaries](https://reader035.vdocument.in/reader035/viewer/2022062323/56816857550346895dde7f5f/html5/thumbnails/31.jpg)
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
![Page 32: Web Design Preliminaries](https://reader035.vdocument.in/reader035/viewer/2022062323/56816857550346895dde7f5f/html5/thumbnails/32.jpg)
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
![Page 33: Web Design Preliminaries](https://reader035.vdocument.in/reader035/viewer/2022062323/56816857550346895dde7f5f/html5/thumbnails/33.jpg)
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>
![Page 34: Web Design Preliminaries](https://reader035.vdocument.in/reader035/viewer/2022062323/56816857550346895dde7f5f/html5/thumbnails/34.jpg)
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)
![Page 35: Web Design Preliminaries](https://reader035.vdocument.in/reader035/viewer/2022062323/56816857550346895dde7f5f/html5/thumbnails/35.jpg)
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.