Réaliser un site web en responsive design

Publié le 2013-08-13 12:12:19 par Jonathan Fernandes

Dans cet article, je vais expliquer comment réaliser un site web en responsive design

Qu'est-ce que "responsive design" ?

Si on devait donner une traduction à "responsive design", ce serait: interface graphique adaptée.

Le concept consiste à avoir un site web unique qui s'adapte en fonction de la taille de l'écran.

Un tres bon exemple de site web responsive: Web & Dev ;)

Quels sont les avantages ?

Les avantages d'avoir un site web en responsive design:

Structure

En-tête HTML

Dans l'en-tête de votre fichier HTML, il faut placer le tag ayant pour nom viewport.

Viewport a été introduit par Apple puis a été utilisé par les autres concurrents. Il sert a définir la zone "visible" sur un écran de téléphone ou d'une tablette. Le viewport exclut la barre de recherche et les différents bouttons associés au système du téléphone ou de la tablette.

Grosso modo, lorsque vous affichez une page web, c'est uniquement cette zone qui fait partie du viewport.

Le fait d'introduire ce meta tag dans votre en-tête HTML, va permettre à votre feuille de style (CSS) de connaitre la résolution de votre écran ou plus précisément la résolution du viewport.

Dans cet article, nous utiliserons la valeur device-width qui est la largeur de l'appareil.

Bien sûr ce meta tag "viewport" peut accueillir différentes valeurs, tels que:

For example, if your mobile design is purposely laid out at 320px you can specify the viewport width:

Il est possible de combiner plusieurs de ces paramêtres en les séparants par des virgules.

Dans notre cas, on se limitera à avoir la taille de l'écran de l'appareil et du ratio initiale.

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        [...]
    </head>
    <body>
        [...]
    </body>
</html>

Fichier CSS

Viewport

Parce que Microsoft ne veut pas faire comme tout le monde, alors il faut ajouter la mention @-ms-viewport pour qu'il puisse comprendre le responsive design. Sans quoi, votre belle mise en page ne fonctionnera pas sous IE. Cette règle reprend les mêmes informations déclarées dans votre en-tête HTML. Dans notre exemple, on ne reprendra que device-width.

@-ms-viewport {
    width: device-width;
}

Media

Le tag @media permet d'appliquer la mise en page selon des paramêtres bien définis. Sans précision particulière, le tag s'applique a tous les médias (écran, imprimante, projecteur, etc. - Voir la suite)

Application de la mise en page pour tous les médias:

@media { /* style de la mise en page */ }

Variante:

@media all { /* style de la mise en page */ }

Application de la mise en page pour tous les écrans:

@media screen { /* style de la mise en page */ }

Application de la mise en page pour toutes les imprimantes:

@media print { /* style de la mise en page */ }

Application de la mise en page pour tous les écrans et imprimantes:

@media screen,print { /* style de la mise en page */ }

Il est possible de définir la largeur minimum et/ou maximum:

@media (max-width: 319px) {
    /* Votre mise en page adapte pour une resolution inferieure à 319px */
}

@media (min-width: 320px) and (max-width: 479px) {
    /* Votre mise en page adapte pour une resolution comprise entre 320px et 479px */
}

@media (min-width: 480px) and (max-width: 767px) {
    /* Votre mise en page adapte pour une resolution comprise entre 480px et 767px */
}

@media (min-width: 768px) and (max-width: 1023px) {
    /* Votre mise en page adapte pour une resolution comprise entre 768px et 1023px */
}

Enfin, il est possible de combiner type de média et largeur:

@media screen and (max-width: 319px) {
    /* Votre mise en page adapte pour une resolution inferieure a 319px */
}

@media screen and (min-width: 320px) and (max-width: 479px) {
    /* Votre mise en page adapte pour une resolution comprise entre 320px et 479px */
}

Afin de définir les bonnes dimensions selon vos besoins, je vous invite à consulter les différentes résolutions des appareils:

Exemple complet de responsive design

Dans cet exemple, créez deux fichiers (CSS et HTML) et amusez-vous à changer la largeur de votre navigateur pour constater les changements.

Fichier HTML: index.html

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="responsive.css" rel="stylesheet" type="text/css" >
    </head>
    <body>
        <h1>Bienvenu sur Web & Dev</h1>
    </body>
</html>

Fichier CSS: responsive.css

h1 { color: #F00; /* rouge */ }

@-ms-viewport {
    width: device-width;
}

@media (max-width: 319px) {
    h1 { color: #F0F; /* rose */ }
}

@media (min-width: 320px) and (max-width: 479px) {
    h1 { color: #FF0; /* jaune */ }
}

@media (min-width: 480px) and (max-width: 767px) {
    h1 { color: #00F; /* bleu */ }
}

@media (min-width: 768px) and (max-width: 1023px) {
    h1 { color: #0F0; /* vert */ }
}

Conseils

Largeur de votre mise en page

Lorsque je développe un site en responsive design, je me base sur la largeur minimum pour réaliser la mise en page. Je vais vous expliquer pourquoi.

Prenons par exemple une photo de largeur 10cm. Placez la dans un cadre 20cm de largeur. La photo est visible sans problème.

Prenons cette même photo et placez la dans un cadre de 5cm de largeur. La photo est alors coupée.

Si votre photo fait 5cm de largeur, elle sera visible aussi bien dans un cadre de 5cm de largeur que dans 20cm.

D'où le fait de se baser sur la largeur minimum plutôt que dans un interval.

Réalisation de la mise en page

Un des problèmes majeurs des téléphones intelligent est l'espace alloué par l'écran. En effet, c'est petit et étroit. Contrairement aux écrans où vous avez un espace immense.

Alors la meilleur solution pour réussir un site en responsive design est de toujours réaliser une mise en page à partir de l'écran le plus petit c'est-à-dire un écran de téléphone.

Extensions

Il existe une extension sous Chrome appellée Dimensions qui vous permettra de simuler un site web sur un téléphone intelligent, tablette ou écran. Soyez vigilent! Cela ne remplacera jamais un vrai appareil. Ici, il s'agit simplement de tester le comportement de votre site web en responsive design.

Téléchargez l'extension

comments powered by Disqus