Download presentation
Presentation is loading. Please wait.
1
No Images? No CSS? No Problem
Chandresh Karira CSE 686 Internet Programming Summer ‘06
2
Intent To ensure that text content is still visible and readable in the absence of CSS and Images
3
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
4
In Internet Explorer
5
In Mozilla
6
Tiled Image In “head” tag: <style type="text/css">
body { background: #666; } .vert {background-image: url(bg.gif); background-repeat: repeat-y;} </style>
7
…Tiled Image
8
Tiled image with Gray Text
Tiled image assigned to an inner <div> that contains pages’ gray text content
9
Images Disabled – Not Bulletproof
10
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">
11
With Background Color
12
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
13
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
14
Example #1 <body background="/img/tile.gif">
If inessential graphics is tied in markup, and CSS support is unavailable, causes serious visibility problems
15
Example #1
16
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.
17
McAfee website
18
McAfee website without CSS
19
..McAfee website without CSS
20
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 ( VALIDATION AS A TOOL ( validator is an application that parses the document and checks for errors against the W3C specification
21
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>)
22
?
23
Thank You!!
Similar presentations
