Catégorie: ‘Responsive design’

Livre: Responsive Web Design

Écrit par Ethan Marcotte ce livre est un incontournable pour quiconque débute en responsive web design. Ça explique bien les bases et les étapes du développement d’un site web « responsive ». Pour ceux qui ne le sauraient pas, Ethan Marcotte est celui qui est à l’origine du terme « responsive web design » alors il sait de quoi il parle.

Achetez-le sur Amazon au coût de 20,16$.

Table des matières :

  • Principes du responsive design
    • Attachez vos ceintures
    • Responsive architecture
    • La voie à suivre
  • La grille flexible
    • Composition flexible
    • Créer une grille flexible
    • Marges et espacement flexibles
  • Les images flexibles
    • Retour aux (codes) sources
    • Images fluides
    • Mosaïque d’arrière-plan flexible
    • Apprenez à aimer overflow
    • Négociez votre contenu
    • Images et grilles flexibles, tenez-vous bien
  • Les media queries
    • Cicatrisation douloureuse
    • Le problème en question
    • Traînasser vers plus de réactivité
    • Un robot plus « responsive »
    • Les media queries en action
    • Au sujet de la compatibilité
    • Pourquoi la flexibilité ?
  • Passer au responsive, design
    • Une question de contexte
    • Mobile first
    • Vers un responsive workflow
    • Être « responsive » et responsable
    • L’amélioration progressive revisitée
    • Va et sois « responsive »
  • Ressources

Le King a lu ce livre et il le recommande vivement.

Responsive Design: Différents points de rupture

Qu’on se le dise: le responsive web design, ça torche!

La première étape du processus consiste à étudier les différents appareils pour lesquels le design sera conçu. À partir des résultats, on compile une liste de points de rupture : les largeurs que notre design réactif devra satisfaire. Ce tableau propose un exemple de liste de ce type.

Cela ne signifie pas que les résolutions inférieures ou supérieures à un seuil seront ignorées, ou que notre design ne s’adaptera pas aux appareils dont la résolution n’est pas listée. Mais construire une liste de ce genre aide à définir l’étendue des travaux, nous permet d’identifier les appareils les plus fréquemment utilisés par notre public et d’utiliser leurs résolutions respectives comme critères de référence.

Extrait tiré du livre « Responsive Web Design » de Ethan Marcotte.

320 pixels
Appareils à petit écran, comme les téléphones en mode portrait.

480 pixels
Appareils à êtot écran, comme les téléphones en mode paysage.

600 pixels
Petites tablettes, comme le Kindle d’Amazon (600×800) et le Nook de Barnes & Noble (600×1024) en mode portrait.

768 pixels
Tablettes de dix pouces comme l’iPad (768×1024) en mode portrait.

1024 pixels
Tablettes comme l’iPad (1024×768) en mode paysage, ainsi que certains ordinateurs portables, netbooks et ordinateurs de bureau.

1200 pixels
Écran large, principalement les ordinateurs portables et de bureau.