Conception d’un site Web adaptatif (Responsive Web Design)
Rappel : Responsive Web Design = Technique de conception de sites Web permettant à ces sites de s’adapter automatiquement aux possibilités
d’affichage du terminal, en se basant en particulier sur la largeur de l’écran ou de la fenêtre d’affichage.
Vous ferez les tests suivants tout d’abord en local puis in fine vous transférerez les nouvelles pages Web sur votre site distant (hébergeur eohost).
Constatation initiale
Actuellement, le navigateur Web doit être dans une fenêtre en mode pleine écran. A partir de cela, passez en mode "fenêtre réduite" et modifiez la largeur de votre fenêtre de navigation.
Et naviguez dans le site Web...
Que constatez-vous ? La lecture de la page Web est-elle toujours aussi facile ?
Lorsque la fenêtre est réduite la page ne s'adapte pas et on n'arrive pas à tout lire
. . .
. . .
Faites le test sur votre smartphone.
Que constatez-vous ? La lecture de la page Web est-elle toujours aussi facile ?
Le résultat reste le même c'est à dire illisible
. . .
. . .
Changement de feuille de style
En fonction de votre choix initial de feuille de style (style1.css ou style2.css), modifiez tous les liens
pour utiliser maintenant la feuille de style adaptative (style1RWD.css ou style2RWD.css).
En local, modifiez la largeur de votre fenêtre de navigation. Et naviguez dans le site Web...
Que constatez-vous ? La lecture de la page Web est-elle plus facile ?
La lecture est bien plus facile maintenant.
. . .
. . .
Combien y a t-il de niveau d'adaptativité ?
Il y en a 2.
. . .
Publiez les nouvelles pages html sur votre site Web distant (eohost), modifiez la largeur de votre fenêtre de navigation. Et naviguez dans le site Web...
Que constatez-vous ? La lecture de la page Web est-elle plus facile ?
Oui la lecture est désormais plus facile en ligne.
. . .
. . .
Sur le PC, utilisez le site Web http://www.responsinator.com et/ou le site Web
http://apps-fr.orson.io/piresponsive pour tester le rendu de votre site Web adaptatif.
Commentez les résultats obtenus avec ce(s) site(s). Insérez une image illustrant l'adaptativité de votre site Web.
. . .
. . .
. . .
Enfin, sur votre smartphone et/ou tablette, visitez votre site web et changez l'orientation de l'équipement !
Commentez succinctement les résultats obtenus ?
Le site est agréable à voir
. . .
. . .
Analyse de la feuille de style
Editez avec Notepad++ le fichier de style adaptatif que vous avez utilisé et identifiez les éléments qui permettent l'adaptativité.
Reportez-en un, ici :
@media screen and (max-width: 780px)
{
Par quelle technique, les images dans la résolution d'écran la plus faible s'adaptent-elles automatiquement ?
.image-responsive
{
max-width: 100%;
height: auto;
. . .
Retour vers la validation HTML - CSS
Maintenant que le site Web est hébergé et fonctionnel, il faut proposer à l'internaute / mobinaute la posssibilté de vérifier la qualité du code.
Cliquez maintenant sur l'onglet Validation et réalisez la tâche Utilisation des badges de validation !
