Noch ein weitere coole Möglichkeit responsive Designs zu testen.


Adam D Bradley:

Foresight.js gives webpages the ability to tell if the user’s device is capable of viewing high-resolution images (such as the 3rd generation iPad) before the image is requested from the server. Additionally, it judges if the user’s device currently has a fast enough network connection for high-resolution images. Depending on device display and network connectivity, foresight.js will request the appropriate image for the webpage.

Das klingt verdammt spannend und passt perfekt zum Thema „bandwith media queries“, über das ich mich kürzlich mit Florian austauschte.

RE: Bandwidth Media Queries

Florian Eckerstorfer:

First of all, JavaScript is not really a solution for serving different image sizes. Any solution that I currently know of needs at to download at least the smallest version in addition to the appropriate image. A very clever solution which nearly worked is described by Mat Marquis.

As far as I know „Adaptive Images“ serves only one image and is therefore the best solution at the moment. I will try it myself in the near future but couldn’t get around to it, yet.

My problem with bandwidth detection is that it will never be really accurate. In its simplest case the browser would just send the speed of the network the user is currently on. However, I can be on 3G but since I am also currently updating a dozen of iPhone Apps, I don’t really can surf using 3G speed. If the browser wants to detect the real bandwidth I currently have, it would need to download some Megabytes and measure how long it takes.

I would be perfectly happy if I could easily detect if the user is on a mobile network or on wifi. The point for me is not so much to serve a small image if the user has little bandwith left for browsing. I want to serve small images to mobile devices if they are not on wifi so my site doesn’t mess with their data limit.
So I could show a small image on an iPad 3 which is on LTE, but a big double sized image on an iPad which is on wifi.

But I can not see how this is ever going to happen. There is now way a browser can detect it. The solution in my opinion has to be on the other side. The device should send some information which the browser then could detect. Or something like that.

All that could be solved if we had super duper fast internet connection everywhere we go. So no one had to worry. Maybe out grand children can have this luxury.

Bandwidth Media Queries

Chris Coyier:

That issue is: bandwidth. If I’m in a place / on a device that has super slow internet, I’d love to be served a very light web page so browsing is still acceptably fast. If I’m in a place / on a device that has super fast internet, by all means ratchet it up and deliver me more.

Chris Coyier wishes for media queries which could detect the bandwidth of the internet connection. This would be to cool to be true.
But even a picture tag, which could deliver different files for different screen sizes would be a step forward. Yes, there are Javascript solutions for that, but it is not perfect and it would be better if there was a simple HTML solution.

When can I use?

Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.

Niemand kann sich merken welcher Browser in welcher Version welches Feature unterstützt. Zum Glück muss man das auch gar nicht und kann einfach bei nachschauen. Eine hervorragende Seite, dessen Macher ich unendlich dankbar bin. Ein Segen für jeden Frontend-Webentwickler.

How will serve retina images to new iPads

Jason Grigsby:

Perhaps most importantly, Apple isn’t sitting on some secret technique to make retina images work well. Maybe they will provide better solutions in iOS 6. The way they handle images—downloading both sizes plus an additional HEAD request—may be the least efficient way to support retina displays. But for Apple, it likely doesn’t matter as much as it will for your site.

Passend zu den Gedanken von Christoph erklärt dieser Artikel wie entscheidet wann Retina-Bilder auszuliefern sind und wie sie es anstellen. Apple kommt dabei eher schlecht weg.

Enter the url to your site – local or online: both work – and use the controls to adjust the width and height of your viewport to find exact breakpoint widths in pixels.

Sieht nach einem sehr hilfreichen Tool in der Entwicklung von responsive Designs aus. Ich habe schon oft den Browser kleiner geschoben und dann abgemessen, weil ich genaue Daten für meine media queries brauchte – das würde mir dieses Tool deutlich einfacher machen.
Danke für den Tipp, Malte.


CSS3-Liebe! Wer genug von Bildern für einfache und leicht komplexere Formen hat und nur für moderne Browser optimiert, kann sich schon jetzt an diesen CSS-Formen bedienen. Allesamt bestehend aus nur einem HTML-Element.