[Skip to the Main Content]

Mobile Web Best Practices and CSS Image Replacement

For the past several months, I have been revisiting my methodology for website construction wherein I will be amending my existing practices with future proofing: incorporating HTML5 “Embedded content” and “Significant text” requirements; and, those requirements of W3C Mobile Web Best Practices 1.0 of which I have been remiss excepting Subsection which states that CSS image replacement should not be used. I disagree.

W3C Mobile Web Best Practices 1.0, 5.4.5 Non-Text Items states,

[NON-TEXT_ALTERNATIVES] Provide a text equivalent for every non-text element What it means
Downloading images to a mobile device adds to the time to display an image and the cost of displaying the page. Making the page readable in text-only mode can help the user assess its usefulness before images arrive. How to do it
Avoid things like CSS image replacement and pictures of words.

“Avoid pictures of words” should be in one’s accessibility practices (regardless of handheld-mobile or screen). And, whereas, “Avoid things like CSS image replacement” may be interpretive, I’ll disagree —Still.

I would rather style text and use CSS image replacement for monitors afterwhich I can set-up a handheld style sheet by removing unnecessary image replacement styles rather than tweak HTML.

Let’s say that someday when this site is Technorati Top Favorited Blog No. 18, I’ll restructure this site’s presentation for handheld devices.

Web Page Analyzer results for the main index page of this site.


Global Statistics

Total HTTP Requests:31
Total Size:135060 bytes

Object Size Totals

Object typeSize (bytes)
HTML Images:69884
CSS Images:20849
Total Images:90733

External Objects

External ObjectQTY
Total HTML:1
Total HTML Images:18
Total CSS Images:9
Total Images:27
Total Scripts:1
Total CSS imports:2
Total Frames:0
Total Iframes:0

[Note: Elementary emphasis in red.]

Server HTTP requests is moderate for monitors but not handheld devices. Total HTTP requests is 31 of which 27 are images.

Page [Cache] Size Limitations is made larger by the images. Total file size is 135060 bytes of which 90733 are images.

Mobile Web Best Practices 1.0, 3.7 Default Delivery Context

Maximum Total Page Weight
20 kilobytes.

I’ve exceeded that.

Images would be my first consideration for page weight reduction. And, by using the exisiting CSS image replacement on the large screen site, it would ease any future restructuring and presentation. Simple deletion.

However, if “Avoid things like CSS image replacement and pictures of words.” were amended with “when designing for mobiles”, I’d agree. And, <display: none> cannot be used: the images would need to be cached by the mobile device before they are not displayed.

I’ll be rewriting the image styles to backgrounds or replacement and tweak the font styles of the replaced text in case I go mobile.

Sean Fraser posted this on January 15, 2007 09:36 AM.

  • Technorati: http://www.elementary-group-standards.com/css/mobile-web-css-image-replacement.html
  • de.licio.us: http://www.elementary-group-standards.com/css/mobile-web-css-image-replacement.html
  • furl: http://www.elementary-group-standards.com/css/mobile-web-css-image-replacement.html
  • reddit: http://www.elementary-group-standards.com/css/mobile-web-css-image-replacement.html


Comment Here

Reply guidelines: Basic HTML (a href, p, code, blockquote, dl, dt, dd, ul, ol, li, cite and q) are allowed. Line breaks and paragraphs are automated. A rel=“nofollow”, too.

Inappropriate, unwarranted or self-aggrandizemented comments may suffer redaction. Or, deletion.

[Note: A gravatar, or globally recognized avatar, is that small image in the comments. Gravatar sets-up them.]

The Elementary Standards: A Compendium of Web Standards, CSS, Linguistics and Search Engine Optimization methodology Copyright ©2005-2007 Sean Fraser. All work is published under a Creative Commons License. All Rights Reserved.

Palm trees on a grassy field in Hawai’i

Main Content Returns thus