Un petit tour des techniques pour réaliser un site responsive

Pour faire suite à l'article expliquant ce que veut dire responsive, je vous propose ici la partie technique, pour les créateurs de sites, pour travailler en mode responsive.

A une époque, faute de technologies permettant de faire du responsive webdesign, on faisait des sites "statiques" avec beaucoup de dimensions "fixes", en pixels. Il y a eu une période également où il était courant de proposer un site web et un site mobile qui étaient indépendants en termes de développement / design / contenu / gestion... Ça se fait toujours, MAIS...

Désormais nous avons la technologie CSS3 media queries qui permet de travailler sur un seul site et de rendre celui-ci adaptable et responsive.

Il n'y a pas qu'une seule méthode pour obtenir un site responsive, mais je vais essayer de résumer ici les méthodes que j'utilise personnellement.

Au sommaire :

• Le viewport en une balise
• Moins de px, plus de %
• Les max-width
• Les media queries
• Traitement des images
• Un peu de jQuery / javascript
• On peut aussi optimiser avec du PHP

Lire la suite...