Slide 1Key ConceptWeb Browsers that matterInternet Explore (IE)IE6 IssuesIE7FirefoxFirefoxSafariGoogle’s ChromeGood news, bad newsProfessional PracticeProfessional PracticeDisplay ResolutionsDisplay ResolutionDisplay ResolutionDisplay ResolutionDisplay ResolutionStandard ResolutionsStandard ResolutionsStandard ResolutionsStandard ResolutionsLive SpaceToo WideFixed vs. Liquid LayoutsAdvantages of Liquid DesignsDisadvantages of Liquid DesignsCreating Fixed PagesDesigning Above the FoldDesigning Above the FoldHTML and XHTML overviewHTML CommandmentsHTML Elements (Tags)AttributesInfo Browsers IgnoreWeb Design PreliminariesImportant Practical Detailsand key Design ConceptsKey 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_browsersDecember 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 forwardFirefox•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 ratiosDisplay ResolutionHeight:15 pixelsWidth: 20 pixelsAspect Ratio:20/15 = 4:3Display 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 display1600 X 120019”800 X 60019”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 PixelsVGA 640×480 4:3 307,2 00SVGA 800×600 4:3 480,000XGA 1024 ×768 4:3 786,4 32XGA + 1152×864 4:3 995,3 28SXGA + 1400 ×1050 4:3 1,470,000UXG A 1600 ×1200 4:3 1,920,000QXG A 2048 ×1536 4:3 3,145,728QUX GA 3200×2400 4:3 7,680,000HUX GA 6400×4800 4:3 30,720 ,000Standard Resolution Ratio PixelsWXGA1128 0×800 16:10 1,024,000WSXGA 144 0×900 16:10 1,296,000WSXGA+ 168 0×1050 16:10 1,764,000WUXGA 192 0×1200 16:10 2,304,000WQXGA 256 0×1600 16:10 4,096,000WQUXGA 384 0×2400 16:10 9,216,000WHUXGA 768 0×4800 16:10 36,864,000Standard Resolution Ratio PixelsSXGA 1280×10 24 5:4 1,310,720QSXG A 2560×20 48 5:4 5,242,880HSXG A 5120×40 96 5:4 20,971,520Most Common2004Standard ResolutionsStandard Resolution Ratio PixelsVGA 640×480 4:3 307,2 00SVGA 800×600 4:3 480,000XGA 1024×768 4:3 786,432XGA + 1152×864 4:3 995,3 28SXGA + 1400 ×1050 4:3 1,470,000UXG A 1600 ×1200 4:3 1,920,000QXG A 2048 ×1536 4:3 3,145,728QUX GA 3200×2400 4:3 7,680,000HUX GA 6400×4800 4:3 30,720 ,000Standard Resolution Ratio PixelsWXGA1128 0×800 16:10 1,024,000WSXGA 144 0×900 16:10 1,296,000WSXGA+ 168 0×1050 16:10 1,764,000WUXGA 192 0×1200 16:10 2,304,000WQXGA 256 0×1600 16:10 4,096,000WQUXGA 384 0×2400 16:10 9,216,000WHUXGA 768 0×4800 16:10 36,864,000Standard Resolution Ratio PixelsSXGA 1280×10 24 5:4 1,310,720QSXG A 2560×20 48 5:4 5,242,880HSXG A 5120×40 96 5:4 20,971,520Most Common2006Standard ResolutionsStandard Resolution Ratio PixelsVGA 640×480 4:3 307,2 00SVGA 800×600 4:3 480,000XGA 1024×768 4:3 786,432XGA+ 1152×864 4:3 995,328SXGA+ 1400×1050 4:3 1,470,000UXGA 1600×1200 4:3 1,920,000QXG A 2048 ×1536 4:3 3,145,728QUX GA 3200×2400 4:3 7,680,000HUX GA 6400×4800 4:3 30,720 ,000Standard Resolution Ratio