Enfin, une mise en place simple du Responsive Design !
Pour faire suite à notre article du 27/12/2012 sur le Responsive Web Design : "Sites pour mobiles : 10 exemples de Responsive Design", voici un tour d'horizon des tutos permettant de mettre en place cette technique.
Le Responsive Web Design est une technique d’intégration et de développement pour le web qui a pour objectif d'adapter automatiquement un site internet aux différentes résolutions d’écrans des navigateurs, smartphones, tablettes tactiles, etc…
| Exemple fourni par : Ergonomie-interface.com | ||
Pourquoi faire évoluer votre site vers cette technique ?
Car, à l'avenir, de plus en plus d'internautes visiteront votre site via leur mobile ou leur tablette :
Source : Axome
Cliquez sur l'infographie pour zoomer
Déjà le 12/12/2012, nous vous proposions une infographie présentant une introduction à cette technique : "10 choses à savoir sur le responsive design".
Mais, ici, nous allons détailler ces techniques via un certain nombre d'articles :
Et, comme une bonne vidéo est plus claire qu'un long texte :
| Source : Grafikart | ||
Nous vous conseillons aussi le nouvel et très complet article de Lije-creative.com sur :
- Les grilles CSS (CSS Grid) ou maquettes flexibles : Foundation, Skeleton, Twitter Bootstrap, Wirefy…
- L'adaptation des images et textes
- La Meta Viewport
- Les menus, du clic au tactile : exemples de solutions ici.
- Les Media Queries
- Mais aussi des cas pratiques et exemples : ici
L'article de Ergonomie-interface.com aborde la problématique du choix, Responsive ou versions séparées ? Mais aussi, propose des solutions techniques et recommandations (très complet)
L'article de Designspartan.com, propose techniquement les grandes lignes, mais aussi les limites du responsive design
D'autres articles sur :
et aussi en anglais : L’ultime compilation d'articles sur le Responsive Design