Bidaya, votre site Web adaptatif et optimisé - Deuxième partie : RESS en PHP, HTML et CSS adaptatifs

 A. Bennouna  187759 vues  0 commentaire
 tutoriel, responsive, RWD, mobile, Web, CSS, HTML, PHP, RESS

Dans ce deuxième post, notre approche RESS codée en PHP, ainsi que le markup et les styles adaptatifs Mobile-First de notre site monopage : Bidaya. A la fin de la série, vous aurez appris à réaliser des sites optimisés et performants pour navigateurs Web et mobiles !

Rappel sur le billet précédent de la série

Dans le premier post précédent de la série Bidaya, nous avons présenté comment concevoir notre site adaptatif monopage sur ordinateur et tablette, et multi-écrans sur mobiles.

RESS : optimisation des contenus envoyés sur mobiles

Nous commençons ce billet par une étape fondamentale dans notre site Bidaya, à savoir l’envoi, quand c’est nécessaire, des contenus spécifiquement adaptés pour notre disposition sur mobile.

Afin d’optimiser les éléments envoyés aux mobiles, nous allons retenir une approche compatible avec le Responsive Design + Server Side Components présentée par Luke Wroblewski.

Par exemple, si nous savons explicitement qu’une image ou un contenu marginal ne sont pas nécessaires pour notre template pour smartphones, nous ne les incluons pas à partir du serveur. Ceci est plus optimal que d’envoyer exactement les mêmes contenus, puis de cacher ces contenus par CSS ou JavaScript.

Nous avons ainsi choisi de servir du contenu spécifique selon l’agent de l’utilisateur et nous allons utiliser le code de détection des user agents élaboré par DetectMobileBrowsers.com. D’autres solutions existent via des API ou du code propriétaire.

Nous plaçons notre code de détection (en PHP) au tout début de notre fichier index.php. Ce code PHP génère une variable logique $isMobile nous informant si nous sommes sur un mobile ou non :

Il est à noter que les récents smartphones, surtout ceux à grand écran, savent simuler, en plus de leur mode natif mobile, les navigateurs bureau en mode Web. Dans ce cas, le user agent lu par le serveur reflètera correctement le réglage utilisateur, et pourra considérer ces smartphones comme mobiles ou au contraire, comme ordinateurs ou tablettes.

Il faut préciser que dans le cas où le visiteur est sur tablette ou ordinateur (ou mobile en mode Web), le site s’affichera de façon adaptative même si la largeur de la fenêtre du navigateur est rétrécie au maximum, mais il restera en monopage.

Markup : balisage HTML de notre site monopage Bidaya

Juste après le code de détection de l’agent de l’utilisateur, nous écrivons notre structure HTML correspondant aux wireframes et mockups présentés en première partie du tutoriel, d’abord sans aucun style.

Grâce à la variable PHP $isMobile, nous incluons certains tags d’en-tête nécessaires à une visualisation adaptée de la page sur les petits écrans des mobiles, ce qui permet aux mobinautes de lire le texte plus confortablement. Pour plus d’informations, vous pouvez vous référer au Mobile ★ Boilerplate.

Toujours grâce à la même variable $isMobile, nous ne chargeons l’image de la section principale que dans le cas des navigateurs Web.

Vous remarquerez aussi que le lien pour dérouler le menu escamotable sur mobile est présent dans tous les cas. En effet, nous en aurons besoin dans notre site monopage en version Web quand la largeur de la fenêtre du navigateur devient insuffisante.

Vous pouvez déjà tester cette page sans aucun style sur votre navigateur mobile et Web.

Mise en place des styles Mobile-First

Nous allons utiliser les Media Queries pour séparer les styles selon la largeur de l’écran. Pour simplifier, nous allons utiliser les pixels comme unité de mesure, bien que l’utilisation des em comme unité de mesure de Media Queries relatives soit plus logique.

Vous pouvez maintenant tester la page adaptative sur vos navigateurs mobile et Web. Nous avons pris soin d’inclure la feuille de style regroupant les différents blocs ci-dessous dans le fichier de démonstration précédent, dont vous pouvez consulter la mise à jour sur Github.

Réinitialisation des styles

Styles communs à toutes les dispositions

Styles pour largeurs d’écran inférieures à 480 px

Styles communs pour largeurs d’écran supérieures à 480 px

Styles pour largeurs d’écran comprises entre 480 px et 768 px

Styles pour largeurs d’écran supérieures à 768 px

Etape suivante : JavaScript

Dans la troisième partie de cette série, nous verrons comment transformer notre site monopage en multi-écrans sur mobile grâce à du JavaScript, mais aussi comment gérer le menu escamotable, et l’affichage progressif des paragraphes de texte.

Licence d’utilisation : CC-BY-SA 3.0

Tous les éléments de ce billet de blog, y compris les images, peuvent être utilisés et adaptés dans toute autre œuvre, même commerciale, en gardant la même licence, et à condition que l’origine des éléments soit attribuée à tellibus. Pour plus de détails, veuillez vous référer au texte complet de la licence d’utilisation CC-BY-SA 3.0.