Responsive webdesign : adapter un site à toutes les résolutions. Le Responsive webdesign (conception adaptative ou réactive en français) représente un ensemble de méthodes et techniques permettant d’universaliser un site Web. Qu’il soit consulté sur ordinateur, tablette, e-reader ou mobile, le site ainsi conçu s’adapte automatiquement à la taille de l’écran. Cette évolution très séduisante du Web pose néanmoins certaines questions d’ergonomie et oblige à repenser la conception des sites. Nous abordons dans cet article les objectifs du responsive design, les critères qui doivent décider à le mettre en œuvre, les recommandations de conception et les considérations techniques.
Objectifs du responsive webdesign Pour commencer, rien de tel qu’une démonstration. Entrons dans le vif du sujet. Les sites Web sont aujourd’hui consultés sur une multitude d’appareils ayant des résolutions différentes Proposer une seule version du site Web censée s’adapter à tous ces terminaux est utopique. Le site ifttt n’est pas adaptable. Responsive ou versions séparées ? Sender 11: Mobile screen size trends. Over at mBricks my colleagues have put a lot of work into the device database (we work with WURFL data and contribute back as well as we can). I took the opportunity to take a closer look at screen size trends. The data I have covers about 400 different device models sold from 2005 to today. This shows the the most significant screen sizes, from the smallest to the largest. I have added a couple of upcoming phones as well, they are the ones with the dotted lines. Over the years the relative screen size difference has increased.
You can see that the smaller screens have a portrait orientation and the large screens have a landscape orientation. Resolution I did a rough dpi (ppi to be exact) calculation for some popular phone models. There is an upper limit to what dpi is meaningful. Unfortunately, for LCD screens, increased pixel density doesn't give us more brightness. Yes, a grand total of 26 different screen sizes. It is obvious that 240 x 320 (also called QVGA) is on a roll. Future. How to Turn Any Site Into a Responsive Site. I remember the time when our biggest worry was about making stuff work in IE6. And sometimes I think that it was far easier then. Now we have not only to worry about IE crazy stuff (though now it’s much better) but also with a lot of new browsers /OS combinations and also a lot of screen sizes.
We can’t deny the power of mobile design. Actually, research shows that in a few years mobile will overtake desktop browsing. But also, you can’t live in the future and need results now. Like, right now. Here we’ll see a few ways to take your current site and turn it into a mobile friendly one, with little effort. So, let’s rock! What is this responsive thing, and why should I care? Photo By: Yutaka Tsutano Responsive design is when your site automatically fits in the user’s device. But why should I do all of this? First of all, it’s far easier than you’d ever imagine. With so many tools out there, all you’ve got to do is to know the basics to create great mobile versions of sites. Keypoints Isotope.