RESPONSIVE WEB DESIGN Une approche pour concevoir des sites Web adaptatifs et une occasion d'inciter les étudiants à consulter des cours responsives Ivan MADJAROV Arnaud FÉVRIER
Comment consulte-t-on le Web? 2
Une multitude de supports L'écran d un ordinateur de bureau Affiche des contenus complexes, sur plusieurs colonnes Affiche des images en haute résolution Affiche des éléments complexes sur une page L'écran d'une tablette Affiche beaucoup moins d informations Affiche des images plus petites La taille d'écran des Smartphones varient suivant le modèle Affichage compliqué avec de petites images peu visibles L'affichage du contenu se limite à quelques lignes L'affichage avec changement de zoom provoque certain inconfort et modifie les habitudes de navigation. 3
Solutions envisagées La solution est dans l'adaptation du contenu Web aux caractéristiques des supports La solution doit prendre en compte: Les résolutions et tailles d'écrans L'orientation portrait ou paysage Deux approches d'adaptation de contenu: Multiplier les versions du site web pour satisfaire les supports La solution demande plus de ressources et de temps Pratiquer une technique auto adaptable pour la conception des sites web. Une seule version du site est développée 4
Responsive Web Design (RWD) Le RWD ou encore site Web adaptatif est la technique qui correspondàl adaptationdecontenuetimageenfonction de la résolution, la taille et le mode de l'écran. Pour être efficace la technique RWD se base sur la version HTML5 et les feuilles de style CSS3 avec les Media Queries. L'approche peut s appliquer à d autres applications Web telles que les cours pédagogiques adaptatifs. 5
Intérêt pour le sujet L'intérêt est inspiré par deux facteurs: Le PPN 2013 des départements R&T Le module M1106 "Initiation au développement Web" implémente la compétence pour la mise en œuvre du RWD Le module M2105 "Web dynamique" associe cette compétence pour réaliser des pages Web responsives générées côté serveur La politique de notre université en matière de pédagogie prévoit le passage à 20% des cours en ligne. Accès distant aux ressources pédagogiques Assurer l'adaptation de contenu pédagogique pour un accès "mobile". 6
HTML 5.0: une évolution sémantique Syntaxe simplifiée Nouvelles balises Structuration du contenu Séparation du fond et de la forme L en tête <head> fournit des renseignements sur le document La partie corps du document <body> formate la présentation du contenu avec des feuilles de style 7
Les balises HTML5 Pour la structuration du contenu dans la partie <body> des balises sémantiques sont appliquées: <header>, <footer>, <nav>, <aside>, <section>, <article> Pour présenter le contenu dans cette structure les balises HTML5 de base sont utilisées: paragraphes <p>...</p>, titres <h1>...</h1>, listes ordonnées <ol><li>...</li></ol> ou non ordonnées <ul><li>...</li></ul>, tableaux <table><tr><td>...</td></tr> </table>, différents types de médias, formes et animation : <img>, <video>, <audio>, <canvas>, contrôles de formulaires <form>...</form>, liens hypertextes <a href="url">...</a> 8
CSS3 contrôle la mise en page Une déclaration CSS (feuilles de style) contient un sélecteur pour cibler les balises concernés, suivi d un bloc encadré d'accolades regroupant les propriétés à appliquer pour: Définir la couleur et la taille d'une police (color, font size) Définir le positionnement d'un objet (margin, padding) Préciser l'espacement entre paragraphes ou caractères Définir des points de rupture ou de transition p { text align:justify; /* texte justifié */ font style:italic; /* style du texte */ color:blue; /* couleur du texte */ font family:times; /* type de police */ font size:1.5em; /* taille des caractères */ } 9
Le site Web adaptatif Pour rendre responsive un site Web quelques points clés sont à prendre en considération Une grille d'affichage flexible qui ne dépend pas de la résolution du support; Des médias flexibles (images, vidéos) qui ne débordent pas du cadre de la grille d'affichage; Des règles d'affichage en fonction du média basées sur les Media Queries du CSS3 (requêtes média). Avec les Media Queries on peut définir des conditions pour appliquer des propriétés de feuilles de style. 10
RWD: grille d'affichage Une grille d'affichage flexible évite les mesures fixes exprimées en px (pixels) ou pt (points) pour: la taille des polices les mesures pour les éléments HTML Pour un affichage flexible les mesures sont exprimées: en pourcentage (%), en mesure "em" (où 1em = 100%) L'unité "em" se rapporte à la taille de la police ("M") L'unité est utilisable et pour des propriétés de longueur. L'approche permet d'avoir une valeur proportionnelle des mesures utilisées dans la page en fonction du type média 11
RWD: média flexible Il est désagréable de voir une image déborder l'écran, trop petite ou invisible au changement de média. Pour un site Web adaptatif le problème peut être résolu avec la propriété CSS "max width". Spécifier la largeur maximum de l'élément sur le média img, object, canvas, video, audio { max width: 100%; height: auto; } La propriété "height:auto" conserve les proportions de l'élément. L'approche favorise la mise à l'échelle de l'image Redimensionnement en fonction de la taille de l'écran. 12
RWD: media queries Le site adapte l'affichage en fonction de: la résolution le type de média (screen, print, tv ) le ratio l'orientation (portrait ou paysage) La détection du profil média avec Media Queries autorise l'application de points de rupture pour appliquer le style (CSS) adapté un point de rupture s'identifie avec la taille de l'écran à laquelle les règles changent, et les éléments de la mise en page sont dynamiquement redimensionnées et réajustées. 13
RWD: media queries Les tests ont démontré l'efficacité de trois points de rupture @media only screen and (max width:480px) { /* propriétés pour une largeur de la fenêtre (viewport) jusqu'à 480px */ } @media only screen and (max width:1024px) and (minwidth:480px) { /* propriétés pour une largeur de la fenêtre (viewport) de 480px à 1024px */ } @media only screen and (min width:1024px) { /* propriétés pour une largeur de la fenêtre (viewport) à partir de 1024px */ } 14
RWD: viewport et pixel-ratio Comparer à l'écran d'un ordinateur classique le nombre de pixels par unité de surface est plus élevé sur un smartphone Pour un affichage équivalent la différence se traduit en plus petit sur le smartphone Pour zoomer la page de façon optimale il faut modifier le pixel ratio du navigateur mobile ("initial scale") Le viewport doit correspondre à la taille réelle utilisée par le navigateur mobile ("device width") <meta name="viewport" content="width=device width, initial scale=1.0, user scalable=yes" /> L'utilisation de cette balise suffit à rendre un site plus lisible sur les petits écrans 15
Le site Web adaptatif Exemple avec deux résolution: >1024px et <480px 16
Exemples en ligne: 3 ème WPR&T à St Pierre de la Réunion, Le site Web adaptatif http://ivmad.free.fr/pi/tp/neticiens.html http://ivmad.free.fr/pi/tp/neticiens.htm 17
Le cours adaptatif: Responsive e-learning Le Responsive e Learning Design (ReD) est une approche qui s'inspire des principes du Responsive Web Design L'e Learning adapté propose une version unique du cours sous la forme de site Web ou application Web. Le cours est basé sur une sémantique appropriée pour une structuration du contenu proche de la pédagogie inspirée par le PPN et les moyens de Responsive Web Design. 18
Le site Web adaptatif: conclusion En 2014 12% du trafic Internet mondial se fait via les smartphones ou les tablettes. Il devient incontournable d adapter les sites aux mobiles. Le RWD apporte une solution adaptée aux nouvelles méthodes de développement Web L'approche adaptative peut être généralisée cours adaptatifs, applications mobiles adaptatives applications Cloud responsives 19