Guymon

Responsive Images

Responsive Images ist ein Ansatz der filamentgroup Bilder passend zum Context zuladen. Im Kern ist das ein “Mobile-First” Ansatz in dem die Desktop Bilder via JavaScript nachgeladen werden.

The goal of this technique is to deliver optimized, contextual image sizes in responsive layouts that utilize dramatically different image sizes at different resolutions. Ideally, this could enable developers to start with mobile-optimized images in their HTML and specify a larger size to be used for users with larger screen resolutions — without requesting both image sizes, and without UA sniffing.

Im Quellcode sieht das so aus: <img src="small.jpg?full=large.jpg" >

Ganz spannend was sich im Bereich Responsive Webdesign gerade so tut.

@media queries

Philip Tellis beleuchtet einige Probleme beim Einsatz von @media queries für Mobile-Browser:

Now this works reasonably well when you resize desktop browsers, but not so much for mobile browsers. The problem is that mobile browsers (iPhone/Safari, Android/Chrome and Fennec) assume that the page were designed for a wide screen, and shrink it to fit into the smaller screen. This means that even though users could have had a good customised experience for their smaller devices, they won’t because the device doesn’t know about this. The trick is to use Apple’s viewport meta tag in your document’s head in conjunction with @media queries.

Mobile Compatible Websites

Peter-Paul Koch beleuchtet die Mobile Browser Landschaft.

Users expect websites to work on their mobile phones. In two to three years, mobile support will become standard for any site. Web developers must add mobile web development to their skill set or risk losing clients.

In diesem Zusammenhang ist auch die Übersicht der Test auf Smartphones von PPK sehr spannend.

Mobile Web testing

Mobile Drupal stellt verschiedene Simulatoren für das Testen mobiler Webseiten vor.

When you are developing mobile websites, it is very important to have a rich Toolset that helps you in evaluating your mobile creations. This is not only for yourself, but also to reassure the client that you have the development under completely under control.

Screensizes and browser capabilities can change the look and feel of your site drastically… So better prepare!

Since it is impossible to have all devices, or even a small subset of current popular devices by hand, you will have to rely on simulators of the different mobile platforms.

Reformat Graphics for Mobile Devices

Hm, tinySrc klingt nett, wenn es keine Möglichkeit auf dem eigenen Server gibt Bilder für Mobile Devices zu optimieren.

If you’re working with mobile browsers tinySrc will dynamically scale your images down to the right size on the server side:

http://i.tinysrc.mobi/http://mysite.com/myimage.png

To use, you simply prefix the URL to your image with a pointer to tinysrc.