No Images? No CSS? No Problem Chandresh Karira CSE 686 Internet Programming Summer ‘06
Intent To ensure that text content is still visible and readable in the absence of CSS and Images
Cases Content will not be readable in the following cases: CSS is unsupported or unavailable Images are slow to load, or turned off via a user preference
In Internet Explorer
In Mozilla
Tiled Image In “head” tag: <style type="text/css"> body { background: #666; } .vert {background-image: url(bg.gif); background-repeat: repeat-y;} </style>
…Tiled Image
Tiled image with Gray Text Tiled image assigned to an inner <div> that contains pages’ gray text content
Images Disabled – Not Bulletproof
Bulletproof Approach #1 To provide background color equivalents of the image In CSS: #content { background: #fff; } #sidebar { background: #eee; } Text content wrapped in: <div id="content"> Side text wrapped in: <div id="sidebar">
With Background Color
Why is it Bulletproof? Bulletproof means being prepared for whatever is thrown at your design Users who turn off images to save bandwidth should be able to read the content Providing an alternative way so that the design does not break down if viewed without images
Lack of CSS Support What will pages look like without CSS? Assess your design without CSS to check readability and usability Previous designers built pages using tables and presentational markup to run in any browser But design was inflexible and highly hard-coded
Example #1 <body background="/img/tile.gif"> If inessential graphics is tied in markup, and CSS support is unavailable, causes serious visibility problems
Example #1
Bulletproof Approach #2 McAfee.com/us has thoughtful organization and easy-to-read content Emphasis is given on markup which will work well regardless of CSS support.
McAfee website
McAfee website without CSS
..McAfee website without CSS
Bulletproof Tools FAVELETS (Accessify.com) WEB DEVELOPER EXTENSION Favelets are tiny applications, stored as favorites, written in JavaScript that dynamically trigger events on a Web page WEB DEVELOPER EXTENSION Toolbar browser add-in, written by Chris Pedrick (www.chrispederick.com/work/firefox/webdeveloper/) VALIDATION AS A TOOL (http://validator.w3.org/) validator is an application that parses the document and checks for errors against the W3C specification
Summary Specify Background color equivalents to compensate for lack of images Assess webpage design to test visibility and readability for browsers not supporting CSS Use FAVLETS or toolbars to make process quicker and easier Use validation tools to eliminate head-scratching errors due to stupid mistakes (ex. Missed closing div tag </div>)
?
Thank You!!