Un site internet responsive
Rendez votre site internet responsive et accessible sur tous les appareils et pour tous les formats d'écran.
Les fonctionnalités
Un site internet responsive propose un contenu qui s’adapte en fonction du type de support de consultation utilisé (ordinateur de bureau, tablettes, mobiles). La structure du site change et s’ajuste en fonction de votre appareil :
- taille des images
- dispositions des blocs de contenu
- taille de la typographie
- etc.
Le design et les grilles
Pour garantir l’intégrité du webdesign que ce soit en version desktop ou mobile ils existent différentes méthodes. Plusieurs Frameworks permettent de gérer la disposition des blocs dans une grille en fonction de la taille de l’écran de l’appareil : BootStrap, Foundation, Bulma… Ces outils fournissent également d’autres fonctionnalités comme des composants et des utilitaires. On peut également développer un site responsive sans Framework et sur-mesure en HTML et CSS.
Pour un site responsive réussi il faut se concentrer sur la navigation et la mise en page.
L’optimisation mobile
Sur les versions mobiles, il faut proposer l’essentiel du contenu afin de réduire le temps de chargement. Par exemple, un carrousel d’images n’est pas forcément indispensable et augmente drastiquement le temps de chargement d’une page. Il faut également faire attention au poids des médias disponibles et les optimiser. Le choix de l’hébergement est également déterminant afin d’assurer une vitesse optimale du chargement des pages de votre site internet.
- Création et optimisation du CSS pour le Responsive Web Design
- Affichage les éléments essentiels
- Affichage des blocs en ligne
- Adaptation des typographies
- Gestion des espaces et marges entre les boutons d’actions
L’ergonomie Mobile
L’ergonomie mobile est très importante dans le référencement de votre site (SEO). En effet, Google se base maintenant sur la version mobile alors qu’il n’y a pas si longtemps, c’était la version desktop qui servait de référence.
Certaines points doivent donc être respectés. par exemple :
- Sur les plus petits écrans les boutons d’actions doivent être assez grands pour que le doigt de l’utilisateur ne vienne pas déclencher d’autres boutons ou liens qui seraient situés à côté.
- On utilisera également les gestes du mobile pour, par exemple, faire défiler les photos d’une galerie.
- On adapte la taille de la typographie.
Je prends en compte ces spécificités techniques et ergonomiques pour que votre site soit bien référencé et accessible. Google propose des outils pour tester votre site.
En bref, la méthode :
- Création du CSS pour le Responsive Web Design
- Affichage les éléments essentiels
- Affichage des blocs en ligne
- Adaptation des typographies
- Gestion des espaces et marges entre les boutons d’actions
