INFOS & ACTUALITÉS

Projets en cours, réalisations, actualités webdesign, communication, référencement ou mes petites news... Bienvenue sur le blog

Responsive (part II) : Les techniques pour réaliser un site responsive

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 :

Sans rentrer dans les détails, la balise viewport permet de correctement interprêter le niveau de zoom en prenant en compte la surface réelle de l'écran, sa résolution, la largeur de l'écran, bref, indispensable pour que ça fonctionne bien, à insérer dans la partie HTML head de vos fichiers du site :

 <meta name="viewport" 
content="width=device-width, initial-scale=1.0">

 

Moins de px, plus de % :

Côté HTML on va privilégier les éléments de type block  div  et éviter, là où c'est possible, l'utilisation de  table 

Pour pouvoir poursuivre avec un exemple concret, voici un exemple en HTML / CSS pour créer 4 colonnes que je vais détailler ensuite : exemple.html

Côté CSS, on va dimensionner nos éléments en utilisant essentiellement des pourcentages et le moins possible (voir pas du tout) de largeurs fixes en pixels. Par exemple, si on veut afficher 4 colonnes côte à côte, de même largeur, on va mettre la width à 25%.

Dans l'exemple j'enlève 14px pour palier aux espaces blancs d'1px qui se forment à cause des espaces entre les div en html et 10px pour la marge interne "padding" de 5px de chaque côté à l'intérieur des div. D'autres solutions pour le problème des espaces blancs ICI.

.container div {  
    display: inline-block;
    padding: 5px;
    width: calc(25% - 14px);
    }

Et aussi...

Les polices seront exprimées en em (exit les px !), cette unité permet aux polices d'écritures de s'adapter en fonction de l'élément parent.

 

Les max-width :

J'utilise les max-width, car avec les tailles exprimées en pourcentage, on peut aussi avoir des éléments ou des pages beaucoup trop larges si on est sur de grands écrans. En définissant par exemple le conteneur de ma page avec  width : 100%; max-width : 1400px , je m'assure que mon conteneur ne sera jamais plus grand que 1400px. Et si c'est en-dessous de 1400px, ça prendra toute la largeur (100%) de la page.

Astuce pour centrer les éléments qui ne prennent pas toute la largeur ou qui ont une max-width, en css :  margin : 0 auto; 

 

Les media queries :

Avec ces premiers règlagles vous avez déjà sur votre site des éléments "liquides", mais l'adaptation va être possible jusqu'à un certain point.

Si l'écran est petit, les 4 colonnes à 25% vont être si fines qu'elles ne pourront pas afficher un contenu lisible.

Alors on va tester en modifiant la taille de la fenêtre de notre navigateur et déterminer là où ça commence à coincer : on va donc définir les breakpoints (points de rupture) dont on a besoin.

Il y a une liste de breakpoints communs, qui permettent surtout de savoir à quel type d'écran on a à faire. A nous de voir ensuite, à partir de quel breakpoint il faut donner de nouvelles règles CSS pour que tout soit toujours lisible.

Vous trouverez une liste des breakpoints les plus courants ici

Avec mon exemple des 4 colonnes, en fonction de leur contenu, si on voit qu'à partir de 1024px (= écran de tablette) ça devient un peu trop petit, on va indiquer au css que l'on préfère que les boites  div  fassent 50% de largeur et ainsi s'affichent sur 2 rangées, à partir du breakpoint screen 1024px :

@media screen and (max-width:1024px) {
    .container div {  
        width: calc(50% - 14px);
        }
}

Et si on voit que sur mobile, ça coince à nouveau, on mettra nos 4 boites les unes en-dessous des autres, en fixant leur largeur à 100% :

@media screen and (max-width:640px) {
    .container div {  
        width: calc(100% - 14px);
        }
}

Si vous reprenez mon fichier exemple.html vous pouvez jouer sur la taille de la fenêtre pour voir que les boites s'adaptent à 2 niveaux de breakpoint, grâce aux codes ci-dessus.

Toujours en utilisant les media queries...

Il y a peut-être des éléments du site dans sa version "desktop" qui ne sont pas indispensables, voir même qui polluent un peu la clarté, lorsque l'on passe sur tablette ou mobile. On va pouvoir choisir de ne pas afficher certains éléments. Tout simplement avec du  display:none;  sur les éléments, à l'intérieur de la media query souhaitée.

De la même manière on peut choisir d'afficher des éléments qui ne sont pas présents dans la version desktop. Le menu de navigation en est un bon exemple. Pour ma part je fais souvent 2 menus (un mobile et un desktop), l'un qui est en  display:none  et l'autre en  display:block  et inversement à partir du breakpoint souhaité.

 

Traitement des images :

Un  petit code qui va bien :

img {max-width: 100%;
    height: auto;}

Avec ça, les images ne pourront pas dépasser leur conteneur et ne dépasseront pas leur taille disponible (elles ne tenteront pas de s'afficher plus grandes qu'elles ne le sont dans l'absolu).

Ensuite dans leur élément les images peuvent avoir un taille exprimée en pourcentage, 100% de leur conteneur ou 80% ou peu importe ce qu'il vous faut. On va éviter les tailles exprimées en pixels, parce que ça pourrait ne plus coller en fonction de la taille d'écran et par conséquent sortir du conteneur, voir de la page.

Après, le traitement des images reste un peu complexe, entre qualité d'image (haute résolution) et temps de chargement (résolution optimisée, réduite), à vous de choisir les solutions qui correspondent le mieux aux besoins de votre site.

Vous pouvez par exemple utiliser les média queries pour donner des largeurs fixes à vos images, voir même prévoir plusieurs images avec des tailles différentes qui seront appelées à chaque breakpoint, mais attention, il faudra gérer l'appel des images en CSS, c'est plus facile à faire avec des "background-image" qu'avec des "img src" qui est du HTML.

 

Un peu de jQuery / javascript

Pour terminer d'optimiser on peut ajouter éventuellement des adaptations conditionnelles en JavaScript ou jQuery.

Le menu est encore un bon exemple, le menu mobile souvent est "caché", on a juste le bouton pour l'ouvrir et cette ouverture va se faire grâce à du jQuery.

On peut appliquer cette idée sur d'autres éléments qui prennent trop de place sur l'écran mobile, mais pour lesquels on veut pouvoir laisser la possibilté d'ouvrir, fermer (hide / show ou slideDown / slideUp)...

Ce code est en jQuery, à mettre donc dans un fichier .js ou entre des balises script :

$("#open-menu-mob").click(function(){
  $(".menu-mob-opened").slideDown(500);
 });
$("#close-menu-mob").click(function(){
  $(".menu-mob-opened").slideUp(500);
});

 

On peut aussi optimiser avec du PHP

On peut également inclure un script qui va pas mal et qui permet, si vous avez vraiment trop de changements à faire entre la version mobile et desktop (mais normalement ce n'est pas le but), de détecter l'appareil de l'utilisateur et ainsi inclure ou non certains éléments ou effets, en PHP. 

Il s'agit de mobiledetect

Ce script peut notamment vous permettre de gérer les images insérées en HTML avec img src, puisque celles-ci ne seront pas gérables en CSS (voir la partie Traitement des images).

 

Parlons de la philosophie "Mobile First"

Je n'ai pas encore totalement pris cette habitude, mais il est devient très intéressant de concevoir pour le web en pensant "mobile first" et "enrichissement progressif".

On va d'abord produire un site pour mobile (dans mon article précédent sur le responsive webdesign on peut voir que le mobile est de plus en plus utilisé) et on viendra seulement après ajouter des éléments ou adapter les éléments pour les écrans plus grands. Ceci dans le but de faciliter l'accessibilité, la compatibilité et de rester dans une performance des pages optimisée.

 

Pour teminer...

Evidemment c'est difficile de rentrer dans les détails en un seul article, n'hésitez pas à me contacter si vous avez des questions ou besoin d'un éclairage sur certains points. Je vous propose également en téléchargement 2 fichiers html et css pour débuter et mieux comprendre mon exemple avec les 4 colonnes responsives.

Le fichier HTML est ici : exemple.php

(Pour voir le code source HTML vous pouvez faire un clic-droit, afficher le code source.)

Et le fichier CSS ici : exemple.css

 

Publié le 04 Avr 2022
Dans Blog > Développement

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 :

Sans rentrer dans les détails, la balise viewport permet de correctement interprêter le niveau de zoom en prenant en compte la surface réelle de l'écran, sa résolution, la largeur de l'écran, bref, indispensable pour que ça fonctionne bien, à insérer dans la partie HTML head de vos fichiers du site :

 <meta name="viewport" 
content="width=device-width, initial-scale=1.0">

 

Moins de px, plus de % :

Côté HTML on va privilégier les éléments de type block  div  et éviter, là où c'est possible, l'utilisation de  table 

Pour pouvoir poursuivre avec un exemple concret, voici un exemple en HTML / CSS pour créer 4 colonnes que je vais détailler ensuite : exemple.html

Côté CSS, on va dimensionner nos éléments en utilisant essentiellement des pourcentages et le moins possible (voir pas du tout) de largeurs fixes en pixels. Par exemple, si on veut afficher 4 colonnes côte à côte, de même largeur, on va mettre la width à 25%.

Dans l'exemple j'enlève 14px pour palier aux espaces blancs d'1px qui se forment à cause des espaces entre les div en html et 10px pour la marge interne "padding" de 5px de chaque côté à l'intérieur des div. D'autres solutions pour le problème des espaces blancs ICI.

.container div {  
    display: inline-block;
    padding: 5px;
    width: calc(25% - 14px);
    }

Et aussi...

Les polices seront exprimées en em (exit les px !), cette unité permet aux polices d'écritures de s'adapter en fonction de l'élément parent.

 

Les max-width :

J'utilise les max-width, car avec les tailles exprimées en pourcentage, on peut aussi avoir des éléments ou des pages beaucoup trop larges si on est sur de grands écrans. En définissant par exemple le conteneur de ma page avec  width : 100%; max-width : 1400px , je m'assure que mon conteneur ne sera jamais plus grand que 1400px. Et si c'est en-dessous de 1400px, ça prendra toute la largeur (100%) de la page.

Astuce pour centrer les éléments qui ne prennent pas toute la largeur ou qui ont une max-width, en css :  margin : 0 auto; 

 

Les media queries :

Avec ces premiers règlagles vous avez déjà sur votre site des éléments "liquides", mais l'adaptation va être possible jusqu'à un certain point.

Si l'écran est petit, les 4 colonnes à 25% vont être si fines qu'elles ne pourront pas afficher un contenu lisible.

Alors on va tester en modifiant la taille de la fenêtre de notre navigateur et déterminer là où ça commence à coincer : on va donc définir les breakpoints (points de rupture) dont on a besoin.

Il y a une liste de breakpoints communs, qui permettent surtout de savoir à quel type d'écran on a à faire. A nous de voir ensuite, à partir de quel breakpoint il faut donner de nouvelles règles CSS pour que tout soit toujours lisible.

Vous trouverez une liste des breakpoints les plus courants ici

Avec mon exemple des 4 colonnes, en fonction de leur contenu, si on voit qu'à partir de 1024px (= écran de tablette) ça devient un peu trop petit, on va indiquer au css que l'on préfère que les boites  div  fassent 50% de largeur et ainsi s'affichent sur 2 rangées, à partir du breakpoint screen 1024px :

@media screen and (max-width:1024px) {
    .container div {  
        width: calc(50% - 14px);
        }
}

Et si on voit que sur mobile, ça coince à nouveau, on mettra nos 4 boites les unes en-dessous des autres, en fixant leur largeur à 100% :

@media screen and (max-width:640px) {
    .container div {  
        width: calc(100% - 14px);
        }
}

Si vous reprenez mon fichier exemple.html vous pouvez jouer sur la taille de la fenêtre pour voir que les boites s'adaptent à 2 niveaux de breakpoint, grâce aux codes ci-dessus.

Toujours en utilisant les media queries...

Il y a peut-être des éléments du site dans sa version "desktop" qui ne sont pas indispensables, voir même qui polluent un peu la clarté, lorsque l'on passe sur tablette ou mobile. On va pouvoir choisir de ne pas afficher certains éléments. Tout simplement avec du  display:none;  sur les éléments, à l'intérieur de la media query souhaitée.

De la même manière on peut choisir d'afficher des éléments qui ne sont pas présents dans la version desktop. Le menu de navigation en est un bon exemple. Pour ma part je fais souvent 2 menus (un mobile et un desktop), l'un qui est en  display:none  et l'autre en  display:block  et inversement à partir du breakpoint souhaité.

 

Traitement des images :

Un  petit code qui va bien :

img {max-width: 100%;
    height: auto;}

Avec ça, les images ne pourront pas dépasser leur conteneur et ne dépasseront pas leur taille disponible (elles ne tenteront pas de s'afficher plus grandes qu'elles ne le sont dans l'absolu).

Ensuite dans leur élément les images peuvent avoir un taille exprimée en pourcentage, 100% de leur conteneur ou 80% ou peu importe ce qu'il vous faut. On va éviter les tailles exprimées en pixels, parce que ça pourrait ne plus coller en fonction de la taille d'écran et par conséquent sortir du conteneur, voir de la page.

Après, le traitement des images reste un peu complexe, entre qualité d'image (haute résolution) et temps de chargement (résolution optimisée, réduite), à vous de choisir les solutions qui correspondent le mieux aux besoins de votre site.

Vous pouvez par exemple utiliser les média queries pour donner des largeurs fixes à vos images, voir même prévoir plusieurs images avec des tailles différentes qui seront appelées à chaque breakpoint, mais attention, il faudra gérer l'appel des images en CSS, c'est plus facile à faire avec des "background-image" qu'avec des "img src" qui est du HTML.

 

Un peu de jQuery / javascript

Pour terminer d'optimiser on peut ajouter éventuellement des adaptations conditionnelles en JavaScript ou jQuery.

Le menu est encore un bon exemple, le menu mobile souvent est "caché", on a juste le bouton pour l'ouvrir et cette ouverture va se faire grâce à du jQuery.

On peut appliquer cette idée sur d'autres éléments qui prennent trop de place sur l'écran mobile, mais pour lesquels on veut pouvoir laisser la possibilté d'ouvrir, fermer (hide / show ou slideDown / slideUp)...

Ce code est en jQuery, à mettre donc dans un fichier .js ou entre des balises script :

$("#open-menu-mob").click(function(){
  $(".menu-mob-opened").slideDown(500);
 });
$("#close-menu-mob").click(function(){
  $(".menu-mob-opened").slideUp(500);
});

 

On peut aussi optimiser avec du PHP

On peut également inclure un script qui va pas mal et qui permet, si vous avez vraiment trop de changements à faire entre la version mobile et desktop (mais normalement ce n'est pas le but), de détecter l'appareil de l'utilisateur et ainsi inclure ou non certains éléments ou effets, en PHP. 

Il s'agit de mobiledetect

Ce script peut notamment vous permettre de gérer les images insérées en HTML avec img src, puisque celles-ci ne seront pas gérables en CSS (voir la partie Traitement des images).

 

Parlons de la philosophie "Mobile First"

Je n'ai pas encore totalement pris cette habitude, mais il est devient très intéressant de concevoir pour le web en pensant "mobile first" et "enrichissement progressif".

On va d'abord produire un site pour mobile (dans mon article précédent sur le responsive webdesign on peut voir que le mobile est de plus en plus utilisé) et on viendra seulement après ajouter des éléments ou adapter les éléments pour les écrans plus grands. Ceci dans le but de faciliter l'accessibilité, la compatibilité et de rester dans une performance des pages optimisée.

 

Pour teminer...

Evidemment c'est difficile de rentrer dans les détails en un seul article, n'hésitez pas à me contacter si vous avez des questions ou besoin d'un éclairage sur certains points. Je vous propose également en téléchargement 2 fichiers html et css pour débuter et mieux comprendre mon exemple avec les 4 colonnes responsives.

Le fichier HTML est ici : exemple.php

(Pour voir le code source HTML vous pouvez faire un clic-droit, afficher le code source.)

Et le fichier CSS ici : exemple.css

 

Publié le 04 Avr 2022
Dans Blog > Développement

Dans la même rubrique...

04
Avr
2022
Un petit tour des techniques pour réaliser un site responsive
Lire l'article
04
Mars
2021
NOUVEAU ! Je propose désormais la réalisation d'applications mobile !
Lire l'article
08
Jan
2021
Sens du détail mais aussi utiles pour votre référencement et votre communication web.
Lire l'article
29
Sept
2020
C'est en ligne depuis hier, le nouvel espace gestion des adhérents du SLA !
Lire l'article

VOIR TOUTES LES ACTUS

clarisse-b.net © 2022 - mentions légales