Weekly Recap

Hello everybody! It’s sunday again and this means it’s time for some link tips for you guys. A lot of good stuff this week. Let’s do this:

Devs ponder iPhone 5 web design impact

Sebastian Green:

„It just goes to show, even the big companies will change things we all rely on. Responsive designs should not be dependent on certain screen dimensions. It is just more proof that designs need to be fluid in between their media query breakpoints so that they will work on any size of screen.“

Exactly. And that’s why I try to do as much as possible without setting too much breakpoints and just making a website fluid. And if I need to set a breakpoint it will follow my design and not any specific device. So my media query at QUOTE.fm for mobile devices doesn’t exactly match the iPhone’s screen size but is written to effect a wider range of devices.

Media queries now a W3C Recommendation

Tanya Combrinck:

We’ve all been using them for some time, but now Media Queries have the fully fledged stamp of approval from the W3C.

Media Queries are now officially recommended by the W3C. That’s good news for the future of responsive Webdesign.

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.

visuelleGedanken ist jetzt flexibel

Ich habe den heutigen Abend damit verbracht etwas zu machen wozu ich schon lange Lust hatte, aber mir nie wirklich die Zeit dafür nahm: Ich habe visuelleGedanken für kleinere Browserfenster, iPad und iPhone angepasst. Alles passiert dynamisch über media queries. Ihr könnt es auch ohne eines der gerade genannten Geräte testen und einfach mal dieses Fenster hier kleiner ziehen. It’s like magic!

Generell versuche ich hier im Moment Stück für Stück diverse Dinge zu optimieren. Das betrifft Kleinigkeiten am Design[1. Der eine oder andere aufmerksame Leser hat vielleicht schon gemerkt, dass der Header seit kurzem leicht erneuert ist.], aber auch Optimierung des Codes und der Geschwindigkeit des Blogs.

Haltet die Augen offen. Ich werde sie jetzt gleich aber erst mal schliessen. Gute Nacht!