Retour d’expérience sur le responsive design

Au-delà de notre satisfaction d'avoir sorti un site dont nous sommes particulièrement fiers, nous avons voulu partager notre retour d'expérience sur la refonte de notre site en responsive design. Refondre son site web est toujours un défi pour une agence web. Notre précédent site fêtant son 3ème anniversaire, il n’était plus très en phase, ni avec notre discours, ni avec nos méthodologies et commençait à être technologiquement obsolète. Avec l’arrivée du HTML5, des CSS3 (media queries, @font-face, multi-columns, animations…) et l’expansion du javascript (à travers jQuery ou Mootools…), nous possédons désormais les outils nécessaires pour pouvoir mettre en ligne simplement des sites à la fois agréables, accessibles,rapides et portables.Avec cette refonte, nous avons voulu construire un site qui soit en phase avec notre image,nos méthodes de travail et notre vision du Web. Faire les bons choix Responsive Design, mais jusqu’à quel point ? Non les écrans HD d'abord !

Responsive Design en CSS3 : Responsive Web Design : exemple de code Voici un exemple de code. Ici, quatre <div> sont affichées. En fonction de la résolution du périphérique (max-devicewidth) ou de l'écran (min-width et max-width), l'une des <div> voit son arrière-plan coloré en rouge. Tools for Responsive Web Design Responsive web designs have become talk of the day and almost all the web designers are designing responsive website as such website can be browsed from all web devices. However, designing such a website is no easy you need to have a complete tool kit in order to design a Professional looking responsive web design. Common tools which you need for a smart responsive web design include responsive images, flexible layouts, responsive typography and much more. However, if you do not where to find all this, you need not to worry as you have landed at the right place. 1.Responsive web design sketch sheets 2.styletiles 3.Responsive design sketchbook 4.Responsivewireframes 5.Multi-Device Layout Patterns 6.Simple device diagram responsive design planning 7.Responsive Images 8.Adaptive images 9.Seamless responsive photo grid 10.fit text js 11.slab Text 12.retina images 13.Variable Grid System 14.The Responsive Calculator 15.grid pak 16.Golden Grid System 17.semantic 18.columnal 19.simple grid 20.css grid 21.Susy