http://www.w3.org/2012/Talks/0322_phila_openMIC/
Phil Archer <phila@w3.org>
Use server side techniques to adapt the content for mobile.
Use client side techniques to adapt the style for mobile
You never have to zoom in or out of a mobile-friendly site
Should be adapted server side and not on the client using CSS.
There's no easy way to do this … yet
<picture alt="Alt tag should accurately describe the image represented by all sources, though cropping and zooming may differ."> <source src="mobile.jpg" /> <!-- Matches by default. --> <source src="high-res.jpg" media="min-width: 800px" /> <!-- Overrides the previous source over 800px before any assets are fetched, resulting in a single request. --> <img src="mobile.jpg" /> <!-- Fallback content, in the event the <picture> tag is completely unsupported by the user’s browser. --> </picture>
You can join the Responsive Images Community Group.
You need a mobile/desktop detector script, such as the one we use on the course developed by Francecs de Waal and Alex Pot of smartscripts.nl.
Use the GD Library, probably installed on your server already.
Create a function that uses GD to reduce the size of any image to within a preset limit if the user is on mobile.
Write <img… /> and <figure… /> elements dynamically into your HTML with something like:
<?php writeFigure('/diary/2011/atheistchristmas/Santa_Claus.jpg', 'Jonathan G. Meath portraying Santa Claus. <a href="http://en.wikipedia.org/wiki/File:Jonathan_G_Meath_portrays_Santa_Claus.jpg" >Source: Wikipedia</a>', 1, 'right'); ?>
<figure style="width:202px" class="right"> <img src="/inc/showImage.php?src=/diary/2011/atheistchristmas/Santa_Claus.jpg&float=1&w=200&h=280" width="200" height="280" alt="" /> <figcaption>Jonathan G. Meath portraying Santa Claus. <a href="http://en.wikipedia.org/wiki/File:Jonathan_G_Meath_portrays_Santa_Claus.jpg">Source: Wikipedia</a> </figcaption> </figure>
<figure style="width:122px" class="right"> <img src="/inc/showImage.php?src=/diary/2011/atheistchristmas/Santa_Claus.jpg&float=1&w=120&h=168" width="120" height="168" alt="" />…
Details and all code at http://philarcher.org/diary/2011/phpimageadaptation/.
You are likely to have seen things like this:
background: url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6…
This is good because it saves an HTTP round trip.
This is bad because it takes more bytes to do this than the image it replaces.
So there's little if any gain.
<svg xmlns="http://www.w3.org/2000/svg"> <linearGradient id="r" gradientTransform="rotate(90,.5,.5)" > <stop offset="0" stop-color="#235EA4"/> <stop offset="1" stop-color="white"/> </linearGradient> <rect x="0" y="0" width="100%" height="100%" fill="url(#r)" /> </svg>
<svg xmlns="http://www.w3.org/2000/svg"> <linearGradient id="r" gradientTransform="rotate(90,.5,.5)" > <stop offset="0" stop-color="red" /> <stop offset=".5" stop-color="orange" /> <stop offset="1" stop-color="green"/> </linearGradient> <rect x="0" y="0" width="100%" height="100%" fill="url(#r)" /> <line x1="95%" y1="100%" stroke="red" stroke-width="5" x2="100%" y2="0" /> <line x1="94%" y1="100%" stroke="green" stroke-width="5" x2="99%" y2="0" /> <line x1="93%" y1="100%" stroke="black" stroke-width="5" x2="98%" y2="0" /> <circle cx="80%" cy="40%" r="60" fill="none" stroke="#579" stroke-width="30" stroke-dasharray="3,5,8,13" /> </svg>
style="background: red url(headgrad.svg) no-repeat 0 0;"
data:image/svg+xml,
%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%0A%3ClinearGradient%20id%3D%22r%22%20gradientTransform%3D%22rotate(90%2C.5%2C.5)%22%20%3E%0D%0A%20%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22red%22%20%2F%3E%0D%0A%20%20%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22orange%22%20%2F%3E%0D%0A%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22green%22%2F%3E%0D%0A%3C%2FlinearGradient%3E%0D%0A%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23r)%22%20%2F%3E%0D%0A%3Cline%20x1%3D%2295%25%22%20y1%3D%22100%25%22%20stroke%3D%22red%22%20stroke-width%3D%225%22%20x2%3D%22100%25%22%20y2%3D%220%22%20%2F%3E%0D%0A%3Cline%20x1%3D%2294%25%22%20y1%3D%22100%25%22%20stroke%3D%22green%22%20stroke-width%3D%225%22%20x2%3D%2299%25%22%20y2%3D%220%22%20%2F%3E%0D%0A%3Cline%20x1%3D%2293%25%22%20y1%3D%22100%25%22%20stroke%3D%22black%22%20stroke-width%3D%225%22%20x2%3D%2298%25%22%20y2%3D%220%22%20%2F%3E%0D%0A%3Ccircle%20cx%3D%2280%25%22%20cy%3D%2240%25%22%20r%3D%2260%22%20fill%3D%22none%22%20stroke%3D%22%23579%22%20stroke-width%3D%2230%22%20stroke-dasharray%3D%223%2C5%2C8%2C13%22%20%2F%3E%0D%0A%3C%2Fsvg%3E
Created an SVG image and then created a base64 and URL-encoded data URI version of each (source).
Intuitively, we can hope that the URL encoded version will be smaller after compression despite a bigger original size. We can have this intuition because the compression of full text is usually more efficient than the compression of non textual data.
Base 64 | URL Encoded | |
---|---|---|
Original file | 5556 bytes (base64) | 6815 bytes (url-encoded) |
Compressed file | 2048 bytes (base64.gz) | 1282 bytes (url-encoded.gz) |
The intuition is validated, we reduce the size by 37% using URL encoding instead of base64 for SVG images !
So… for more complex backgrounds:
Next Intro to Mobile Web BP with Frances de Waal and me (Mobile Web 1) begins 30 April.
The How to Write Great Mobile Web Applications (Mobile Web 2) course with Robin Berjon & Marcos Caceres will run again later this year.
To the 700+ 'students' who have taken the course to date:
Thank you — I've learned a lot from you.
http://www.w3.org/2012/Talks/0322_phila_openMIC/
Phil Archer <phila@w3.org>