Internet > Création web > Responsive Web Design

Créer sa page web : Responsive Web Design

 

 

25/04/2015 : Résumé :

Pour rendre Aidewindows.net compatible avec les appareils mobiles à petit écran (640px et inférieur)

- j'ai dupliqué mon fichier styles.css
- je l'ai renommé : petite_resolution.css

Dans ce fichier
- j'ai mis toutes les largeurs de blocs à 100% (au lieu d'une taille en pixel)
- j'ai désactivé l'affichage de blocs incompatibles avec un petit écran
- j'ai supprimé les styles inutilisés

Exemple :

#content {width:100%;}
#bloc_droite {display:none;}

Voir aussi :
Alsacreation.com - Une feuille de styles de base pour le Web mobile
(notamment pour fixer la taille des images à 100% par rapport à l'affichage)

 

Dans la partie HEAD de mes pages :
- j'ai ajouté les lignes suivantes (balise viewport, et fichier css à la taille maximale (640px)

<meta name=viewport content="width=device-width, initial-scale=1">
<link rel="stylesheet" media="screen and (max-width: 640px)" href="petite_resolution.css" type="text/css" />

Il reste les menus à faire.
A suivre.

 

 

Google : PageSpeed Insights :

Pour évaluer la conformité de son site, on peut faire l'examen de ses pages avec PageSpeed Insights :

PageSpeed Insights
PageSpeed Insights

https://developers.google.com/speed/pagespeed/insights/

 

Trois points essentiels :

- Utiliser des tailles de police lisibles
Utilisez une taille de police de référence ("baseline") de 16 pixels CSS. Ajustez la taille en fonction des propriétés de la police utilisée...

- Dimensionner les éléments tactiles de manière appropriée
Vous devez veiller à ce que les éléments tactiles les plus importants de votre site, ceux que les internautes utiliseront le plus souvent, soient assez grands pour qu'il soit facile d'appuyer dessus. Ils doivent faire au moins 48 pixels CSS de hauteur et de largeur

- Configurer la fenêtre d'affichage (avec la balise viewport)
Il est conseillé d'inclure dans les pages optimisées pour les appareils mobiles une fenêtre d'affichage Meta dans l'en-tête du document spécifiant "width=device-width, initial-scale=1".

 

Une page pour tester l'affichage :
http://responsive.victorcoulon.fr/

 

 

Robot.txt : éviter les ressources bloquées :

Pour que Google puisse examiner et référencer un site correctement, il ne faut pas que des ressources soient inaccessibles avec le fichier robot.txt

Cela concerne particulièrement :
- les fichiers CSS
- les fichiers de script (JavaScript)
- les images

 

Pour vérifier l'accessibilité des ressources :

- aller dans Google - Outils pour les Webmasters

(nécessite d'être inscrit)

Dans la page de son site :
A gauche :
- aller dans Tableau de bord, Index Google, Ressources bloquées

 

Pour afficher les ressources bloquées,

Dans la page de son site :
A gauche :
- aller dans Tableau de bord, Exploration, Explorer comme Google
- rentrer le nom de la page à explorer

 

 

Le Responsive Web Design :

On distingue 3 façons de rendre son site compatible mobile :
- Responsive Web Design (méthode recommandée par Google)
- Dynamic Serving
- URL distinctes (consiste à créer des pages spécifiques pour l'affichage sur mobile. Plus compliqué)

 

06/04/2015 : Webrankinfo.com - Votre site doit être compatible mobile (selon Google) d'ici au 21 avril 2015, sinon votre SEO sur mobile chutera
"Google pose son ultimatum : le 21 avril 2015, un changement d'algorithme aura un impact fort sur les résultats mobiles : les sites compatibles mobiles seront officiellement favorisés et les applications indexées mises en avant"

 

Blog.soat.fr - Introduction au responsive design : comment rendre son site responsive sans trop d'efforts
"... 1 - Le responsive :
c'est l'application de CSS spécifiques à une page web, en fonction de la largeur de l'écran.
En général, on essaie de découper un site en 2 ou 3 CSS spécifiques : “desktop” (> 1024px de large), tablette (de 600px à 1000px de large) et mobile (< 600px de large).
...
- 'utiliser l'attribut CSS @media
- ajouter une balise viewport dans la partie HEAD

2 - Prioriser et réagencer les pages :
- changer la largeur du bloc conteneur pour qu'il ne soit plus “en dur”, mais de la largeur de l'écran :
#monBlocConteneur { width: 100%; }
- masquer les parties du site à ne pas afficher sur mobile en créant une classe CSS "not_mobile"
.not_mobile { display: none; }
et l'appliquer à tous ies objets qui doivent disparaître lorsque la largeur tombe en dessous de 976 ou 625 px.

3 - ajouter des contenus spécifiques au mobile :

 

 

La balise viewport :

C'est la balise à ajouter dans la partie HEAD de la page

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

Ou (déconseillé) :

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

Selon Google (voir)

évitez "minimum-scale", "maximum-scale", "user-scalable"
Bien qu'il soit possible de définir des valeurs de zoom minimale et maximale, ou même de désactiver le zoom manuel dans la fenêtre d'affichage, ces options nuisent à l'accessibilité et sont généralement déconseillées.

 

AlsaCreation.com - Comprendre le Viewport dans le Web mobile
"Le Viewport désigne schématiquement la surface de la fenêtre du navigateur. Cependant, la notion de viewport sur un appareil mobile est différente de celle sur un écran de bureau : sur mobile, le navigateur ne dispose pas de "fenêtre" réelle, ni de barres de défilement car tout est prévu pour naviguer de manière tactile.
Comprendre la notion de viewport est absolument indispensable dans un projet d'intégration de site web pour tablettes et smartphones, ou dans un esprit d'adaptation "Responsive Web Design"."

 

AlsaCreation.com - Une feuille de styles de base pour le Web mobile
"... Pour vous faciliter la tâche, voici ci-dessous une feuille de style dédiée au média mobile qui condense diverses bonnes pratiques et astuces.
Ces règles peuvent être externalisées dans un fichier CSS séparé, ou incluses directement au sein du document de styles global, déclarées à l'aide d'une règle media query de type @media (max-width: 640px) {...}..."

 

 

Les Media Queries :

CCS3
Les media queries fonctionnent sur tous les navigateurs à partir de Internet Explorer 9

 

Paulund.Developpez.com - Comprendre le méta tag viewport
"...
Le « responsive design » c'est lorsque le design de votre site s'adapte à la résolution de l'écran de votre visiteur. Ce concept se met en oeuvre avec l'utilisation des « media queries » CSS3.
Ces derniers vous permettent de modifier la largeur de vos éléments HTML en fonction de paramétrages que vous définissez dans vos feuilles de style. En ajoutant simplement width: 100 % en CSS sur vos éléments HTML peut suffire à les rendre « responsive » pour des appareils mobiles."

AlsaCreation.com - Les Media Queries CSS3

OpenClassRooms.com - Mise en page adaptative avec les Media Queries

mammouthland.net - CSS3 : les Media-Queries

 

 

Les menus CSS :

Pour une bonne lisibilité d'un site sur un appareil mobile, il faut utiliser un menu différent.

Les menus de Stu Nichols sont particulièrement adaptés :

cssplay.co.uk - A (second) responsive multi-level
et :
cssplay.co.uk - Responsive multi-level two

cssplay.co.uk - Responsive Droplist Menu

cssplay.co.uk - Responsive Droplist

cssplay.co.uk - A couple of responsive single level menus