CSSdebutant.com

Découvrir le responsive design avec les media queries
Conseils SEO et application du CSS3 pour votre site !


bouton de manchette clavierA découvrir les boutons de manchette Geek :) - Des idées de cadeaux à petits prix :)

Un site mobile : incontournable désormais

Reponsive Avoir un site qui s'adape aux petits écrans des téléphones ou des tablettes devient incontournable mais un vrai casse tête !

Nous sommes passés par plusieurs stades : des sites sans version mobile puis le WAP sélectionnait automatiquement le texte des sites mais maintenant, une version mobile "dédiée" pour surtout les écrans de smartphones type iphone ou android est gros plus pour l'internaute

Les grandes choix possible pour avoir un site mobile

Deux grands types de développement sont possibles :
  1. Responsive design: Globalement la meilleur solution car c'est le CSS3 qui permet de varier les éléments à afficher ou pas.
  2. Les autres :-) :En gros, certain développe une version mobile et une version pour un écran d'ordinateur
Euh ? c'est à dire 2 versions ? 2 fois le même code : pour un mobile et un ordi ?!!
Oui ! cela donne le double de maintenance et les URLs ne sont pas les même ! Deux codes à modifier pour changer une taille d'image ou texte par exemple
m.francetvinfo.com et www.francetvinfo.com : c'est le même contenu pour l'internaute
OK : et le responsive design ?
Il existe aussi un choix technique qui consite à avoir les même URL mais afficher un contenu HTML et CSS différent selon que le user-agent est un ordinateur ou un appareil mobile.

d'accord, mais peux-tu développer ? : le responsive design consiste à ne pas toucher au code HTML. C'est le CSS3 qui permet d'adapter l'affichage de la page en fonction de la taille de l'écran.

Aller plus loin avec CSS3 et les Media Queries

Les Media Queries du langage CSS3 permettent une solution rapide : Définir les blocs à supprimer si l'écran est petit : en gros définir le style d'une page en fonction de plusieurs facteurs liés à la taille d'affichage : largeur, hauteur, l'orientation, résolution.
La plupart des navigateurs actuels comme Firefox, Internet Explorer, Chrome, Safari, iOS Safari, Android, Opera Mini, Opera Mobile et BlackBerry sont compatibles avec cette fonctionnalité.
En CSS, cela fonctionne avec les lignes qui factionne les cas de figure :
@media only screen and (max-width: 640px) {...}

On utilise le CSS3 et les Media Queries : @media :
@media (max-width: largeur) { } Largeur de la fenêtre inférieure à la largeur spécifiée
@media (max-device-width: largeur) { } Largeur du périphérique inférieure à la largeur spécifiée
@media (min-width: largeur1) and (max-width: largeur2) { } Largeur de la fenêtre comprise entre les deux largeurs spécifiées
@media (max-device-width: largeur) and (orientation: landscape) { } Largeur du périphérique inférieure à la largeur spécifiée, et écran tenu horizontalement

Et pour le référencement : le SEO ?

Et pour le SEO : Google détecte automatiquement ce type de configuration. (attention à ne pas bloquer dans le robots.txt l'accès au moteur) En gros, si mon écran est de tel taille, j'affiche tel bloc, faire varier les paddings, les espaces ou simplement masquer des blocs et/ou varier leurs positionements

Comment faire du responsive design simplement ?

La bonne nouvelle, c'est qu'un framework vous permet d'avoir un site en responsive design sans effort : Bootstrap de Twitter :
Euh ? framework ? Bootstrap ? Oui, un framework est une base qui permet ne pas partir de zéro. Bootstrap a été développé par Twitter et disons que c'est la base pour commencer un nouveau site.

Et cette base est donc nativement responsive design ! site officiel http://twitter.github.io/bootstrap/

Je vous invite à tester cet outil très utile ! les avantages sont nombreux :
C'est à dire ?
L'utilisation d'une seule URL pour vos pages permet aux internautes d'interagir facilement avec votre site, de le partager et d'y accéder en toute simplicité. De plus, cette solution est optimisé et recommendé par Google et donc positif pour votre référencement.
Ok, continue ?
Aucune redirection n'est nécessaire pour permettre aux internaute d'avoir un affichage parfait sur leur téléphone, ce qui réduit les temps de chargement. De plus, les redirections basées sur le "user-agent" est propice à erreur.

Voulez-vous laisser une note ou un commentaire ?

Donnez votre avis sur ce contenu :
Votes: 4.5 (100%) 36 votes