No Images? No CSS? No Problem

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
• ltstyle type"text/css"gt
• body background 666
• .vert background-image url(bg.gif)
  background-repeat repeat-y
• lt/stylegt

7
Tiled Image
8
Tiled image with Gray Text

• Tiled image assigned to an inner ltdivgt 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 ltdiv id"content"gt
• Side text wrapped in ltdiv id"sidebar"gt

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

• ltbody background"/img/tile.gif"gt
• 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)
• 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

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 lt/divgt)

22

• ?

23
Thank You!!