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 18.104.22.168 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
- 22.214.171.124 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.
- 126.96.36.199 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.
|Total HTTP Requests:||31|
|Total Size:||135060 bytes|
Object Size Totals
|Object type||Size (bytes)|
|Total HTML Images:||18|
|Total CSS Images:||9|
|Total CSS imports:||2|
[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.