supports pédagogiques complémentaires

Dominique Bard
Consultant

Comment rendre mon site "Mobile Friendly"

En utilisant le "Responsive Design"

Formation site internet>Supports pédagogiques>"Mobile Friendly" et "Responsive Design" >

Comment savoir si mon site est Mobile Friendly ? Comment le rendre Mobile Friendly en utilisant le Responsive Design ? Qu'est-ce que le Responsive Design ?

Création site Web Formation site Web Livre site Web

Mobile Friendly

Un site est "Mobile Friendly" tout simplement s'il est facile à consulter sur un téléphone portable. Pour cela son désign doit être souple afin de s'adapter à toutes les tailles d'écran et les zones tactiles doivent être suffisamment espacées.

Responsive Design

Plusieurs méthodes permettent de rendre un site "Mobile Friendly". Il est possible de développer intégralement une version spécifique. Mais cette solution est difficile à maintenir, toutes les url seront nécessairement dupliquées, elle ne nous semble donc pas satisfaisante.

En réalité seule l'apparence du site et donc la feuille CSS est à différencier. L'idéal étant que le contenu présenté à tous les visiteurs soit le même. Il nous apparait préférable de créer deux pages de présentations (CSS) pour une même page de contenu (HTML). C'est ce que propose le "Responsive Design".

Test de compatibilité Google

Afin de savoir si un site est "Mobile Friendly", Google propose un test de compatibilité mobile.

Ce n'est pas le site qui sera testé mais chaque page du site. Il suffit d'indiquer l'url de la page pour savoir si le site est ou non "Mobile Friendly" selon les critères retenus par Google.

Un design proportionnel

Préalablement à toute modificcation de votre code HLML ou CSS il convient de vous assurer que tout votre design est bien proportionnel. Les tailles des blocs (Width et éventuellement Height), les marges (padding et Margin) et les tailles des polices doivent être exprimées en %. Faites les calculs avec précision, n'hésitez pas à indiquer 2 chiffres après la virgule.

HTML 5

Pour passer en HTML 5 il faudra le déclarer. Concrêtement cela passe par la modification de 3 balises.

La balise DOCTYPE qui devient :

<!DOCTYPE html>

La balise HTML qui précise la langue de la manière suivante :

<html lang="fr">

La balise meta charset qui devient :

<meta  charset="iso-8859-1"/>

Ensuite vous devrez ajouter la balise meta viewport :

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

Et enfin proposer une alternative à la page CSS. Pour cela vous remplacerez cette ligne :

<link rel="stylesheet" media="screen" type="text/CSS" href="style.css" >

Où "style.css" était votre ancienne feuille de style.

par celles-ci :

<link rel="stylesheet" media="screen" type="text/CSS" href="styled.css" >
<link rel="stylesheet" media="(max-width: 480px)" type="text/CSS" href="stylem.css" >

Où "styled.css" est votre nouvelle feuille de style pour les ordinateurs de bureau et tablettes et "stylem.css" est la nouvelle feuille de style pour les téléphones portables.

CSS 3

En CSS 2, il n'était pas possible de définir des largeurs d'images proportionnelles, ou plus généralement des largeurs d'objets proportionnelles. Le CSS 3 va nous permettre de le faire, il suffira d'ajouter la ligne suivante :

img, iframe, table, object, embed, video 
{
	max-width:100%;
}

Lorsque vous aurez fait ces premiers changements, votre page devrait déjà se présenter beaucoup mieux sur les écrans de téléphones portables et Google devrait vous renvoyer un test positif. Si ce ne devait pas être le cas, il vous suggèrera des modifications appropriées.

Cet article vous a intéressé ?
Twitter Google +
Partagez-le !

Glossaire livre site Web Formation site Web Mentions légales Contact