Today, i gave my second talk in a week, which is a very unusual talk frequency for me!
The purpose here was double:
- using the momentum on Responsive Web Design, and the blurriness of the buzzwordiness, to kill some myths and put proper accurate definitions back on words.
- explaining why the design process can get very messy, and offering a few ideas to start from; also, since this is still very experimental to date, interesting people to try to find their ways to make that process better, and share them as well.
There are some original ideas in the slides, that were never shown before, and directly come from the innovation work we’ve been doing at Clever Age. For instance:
- an idea for the lazy-loading of useless CSS parts (which no browsers implement, but i can’t see a reason why they shouldn’t in a near future)
- a way to express the morphing between keyframe-prototypes, with colors on the wireframes!
- a solution to the fact that you need a proper technical-savvy responsive designer, and you don’t have any at hand.
- and a few smaller things…
Since i don’t expect the slides to be fully self-explanatory, i’m annotating them little by little (i must be about 25% done, you need to get to the Slideshare website to see them); but for now, two days of unusual encounters and fascinating talks half-killed me, and i must reunite with my bed.
(well, my hotel bed, but you get my drift)
This annotation work should be completed during next week.
And now, some slides. Please get back to me if you want to improve any idea i’m coming up with in there, i am seriously interested in talking with you about it:
(EDIT: those slides made it to Slideshare’s homepage for a bit! w00t!) 
Slide 61 – Some browsers respect the mediaqueries and do not download images which are outside of the target screen size. Webkit has a bug being fixed.
Wow, i didn’t know that, but actually, it makes a lot of sense!
So it means: they lazy-load those too-big-for-this-screen images, and only if the CSS says they should be displayed (or else, they just don’t load); am i right?![]()
tag?
But how does the browser know of the image size before even downloading it? Is it if the “height” and “width” attributes are being used on the
A few months ago, Anthony Ricaud had told me there will never be a future when some image downloading will be blocked by CSS rendering; but if the image is suspiciously large, then i guess it’s suspicion enough for the browser to decide to download it later.
Now, this doesn’t solve the case where an image isn’t too big to be displayed, but is “display:none-ed” anyway; but i guess it already solves a lot of the cases out there already.
Nice, thanks!
What is happening
you define for each screen size the background-images that will be called so you have multiple images. When the CSS is downloaded only the properties for the specific screen size are interpreted and then triggering downloads.
This unfortunately doesn’t solve at all the img element case, which is still on discussions.
Ow ok, i see!
Yep, i thought you were talking about![]()
‘s.
Still a good tip about CSS backgrounds though, so thank you!