Dictionnaire materiel-informatique.be: Les définitions classées par thématique: Electricité, analogique | Electronique numérique | Ordinateur - Unité centrale | Périphériques | Sauvegarde | Sécurité | Réseau | Logiciel | Internet | Multimedia | Sites | Acronyme

Définitions classées par ordre alphabétique:

A - B - C - D E - F - G - H I - J - K - L M - N - O - P Q - R - S - T U - V - W X - Y - Z Toutes

Le fonctionnement d'Internet

Site Internet HTML HTTP Référencement Serveur DNS Saas Email Google

Créer un site Responsive Design

Le Responsive Design est une méthode de codage d'un site Internet pour que la résolution s'adapte aux équipements du visiteur, principalement en fonction de la taille de l'écran. Cette méthode est particulièrement utilisée pour ceux qui naviguent sur Internet avec des Smartphones et petites tablettes tactiles: l'affichage est différent pour ces appareils par rapport à celui sur un PC. Vous l'avez peut-être compris, le contenu est identique: seul la présentation est différente.

• En utilisant les media Queries, c'est la feuille de style (CSS) qui est différente (à partir de HTML 5).
• En Javascript permet de détecter la résolution de l'écran et de rediriger vers la pages adaptée "mobile". Seul problème, Javascipt va interroger le navigateur du visiteur avant de renvoyer la commande, ce qui ralentit le chargement. En plus, tous les navigateurs n'acceptent pas ce ce langage.
• Il n'y a pas de fonction en PHP pour récupérer la résolution de l'écran. Par contre, en récupérant l'user_agent par la fonction HTTP_USER_AGENT(), vous pouvez détecter les appareils mobiles comme Android, iphone, Ipod, blackberry, ...) et rediriger vers une autre page via la commande header ('Location: http://m.materiel-informatique.be/'); (c'est un exemple).
• Par .htaccess, c'est également possible en redirigeant de nouveau suivant le navigateur avec une règle RewriteCond {HTTP_USER_AGENT}

Dans la méthode media Queries, une seule page est utilisée. Si vous utilisez adsense, la taille des publicités est généralement fixée. Petit truc, vous pouvez utiliser une taille adaptable et là gros problème: pour les larges écrans, la largeur de la publicité va vite devenir monstrueuse. Plusieurs solution sont possibles pour adapter la taille des publicités par la feuille de style.

Exemple à intégrer dans la feuille de style: 

.bloc-rwd { width: 200px; height: 200x; }
@media (min-width:200px) { .bloc-rwd { width: 200px; height: 200px; } }
@media (min-width:480px) { .bloc-rwd { width: 234px; height: 60px; } }
@media (min-width:720px) { .bloc-rwd { width: 468px; height: 60px; } }
@media (min-width:1000px) { .bloc-rwd { width: 728px; height: 90px; } }

avec le code HTML de pub

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- votre critère -->
<ins class="adsbygoogle bloc-rwd"
style="display:block"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXXXXXXXXX"
data-ad-format="auto"></ins>
script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Dans les autres méthodes, on crée deux ou plus versions du site, la deuxième version pour smartphone est souvent mise dans un sous-domaine. La première solution est finalement simple à mettre en place tant que le site utilise une base de donnée pour le contenu des pages (en pratique, tous les CMS utilisent cette méthode): suppression de navigation (en fait display=none). mais a un (gros) défaut), le même contenu est accessible sur deux pages d'adresses différentes (en référencement, on parle de contenu dupliqué), ce qu'on peut bloquer par link rel="canonical" href="http://www.materiel-informatique.be/page"> (du moins pour Google. En plus (ceux qui utilisent adsense sur leur s.ite savent que les formats de publicités sont différents), vous devrez créer un format d'annonce pour chaque résolution (généralement 1 pour smartphone et 1 pour les ordinateurs).

Le webmaster utilise son smartphone, tablette, ordinateur, ...(ou même la tablette magique utilisée par les enfants ... Euh, elle se connecte pas sur Internet): OK et dans les outils de vérification Google pour mobile, la page n'est pas détectée comme correcte??? Manque quelque chose: une meta à insérer en HTML entre <head> et </head>:  <meta name="viewport" content="width=device-width, initial-scale=1.0"> et comme par miracle, votre page devient aussi compatible mobile pour Google.

C'est une petite ébauche des théories pour passer un site en responsive design ... (je vais faire comme Wikipediatre), reste encore à récupérer l'orientation, les farceurs (bot) qui utilisent cette méthode pour entrer dans les sites plus ou moins anonymement, sans oublier les robots des principaux moteurs de recherches qui utilisent des versions spécifiques pour mobiles. On prépare une version mobile du site pour décembre 2027 (je blague, le site est complètement reprogrammé depuis début juillet 2015).

Liens annexe: le fichier Htaccess, une feuille CSS, le langage Javascript

Lien externe: Introduction aux sites mobiles

Dernière mise à jour, le 26/01/2021