Aller au contenu

Découvrez le Doctype à utiliser sur mobiles avec HTML5

Le doctype ou type de document est une instruction obligatoire au début des documents HTML.

Choisissez le bon doctype à utiliser dans votre site Web pour que celui-ci soit compatible avec les mobiles.

Tout est dans la vidéo ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Découvrez le Doctype à utiliser sur mobiles avec HTML5

Bonjour à tous et bienvenu sur développement facile.

On continu ensemble la série de cours vidéo dédiés au développement sur les Smartphones, les tablettes, si vous travaillez avec HTML 5, ce que je vous conseille, il y a un doctype bien particulier à utiliser et c’est ce que vous allez découvrir dans cette vidéo.

Ecrire le doctype pour un site mobile

Vous avez le doctype XHTML pour mobile, qui s’affiche sur votre écran là juste ici, ou sinon le doctype HTML 5, celui que je vous conseille d’utiliser d’ailleurs il est beaucoup plus simple, beaucoup plus concis, et le doctype HTML 5, ça permet d’afficher une page correcte sur un appareil mobile et l’avantage c’est que cette page s’affiche également correcte sur un navigateur classique, type les ordinateurs de bureau, les ordinateurs portables.

Une page HTML 5 sait s’adapter sans problème aux différents formats des appareils mobiles, aux différentes résolutions des écrans, qu’il y ait un écran plus petit comme les Smartphones, ou un peu plus grands comme les tablettes. Et donc grâce à HTML 5, sans avoir besoin de code spécifique pour l’un ou l’autre périphérique, vous allez obtenir un site cohérent et conforme quel que soit le périphérique, utilisez vraiment le doctype HTML 5, en plus il est très simple à insérer dans une page, ça va vous permettre de créer des pages qui s’adaptent automatiquement en fonction de la taille des écrans des appareils mobiles et vous allez pouvoir créer des mises en page avec des tailles beaucoup plus grandes et utiliser tout l’espace disponible sur l’écran du périphérique et vous pourrez créer également une page normale en indiquant au navigateur de prendre la taille de l’écran que vous avez défini et non la valeur par défaut. Vous allez pouvoir définir dans une balise méta, en fonction de la taille de l’écran, la largeur de la page à utiliser, c’est très pratique cette fonctionnalité HTML 5.

La taille de la fenêtre d’affichage

C’est ce que l’on voit ici, vous avez la balise méta name viewport donc c’est la balise qui va nous intéresser avec différentes options,

user scale no ça interdit le zoom par l’utilisateur, à vous de le définir,

initial scale ça affiche la page sans zoom, très pratique et

width device width ça indique au navigateur la taille de la page à afficher et soit vous prenez la même taille que la taille de l’appareil ou alors pouvez donner une valeur différente en pixel. Ça c’est à vous de voir en fonction du résultat que vous souhaitez sur le périphérique auquel le site est destiné.

Ecrire le doctype pour un site mobile

Vous pouvez également définir la fenêtre d’affichage dans la feuille de style en utilisant la balise@viewport, height, c’est la même chose que width sauf que c’est pour la hauteur, minimum scale c’est le zoom minimum possible sur la page par l’utilisateur, le zoom il y a minimum scale, maximum scale, zoom, dezoom, minimum, maximum possible sur la page par l’utilisateur, en principe sur un iPhone c’est ce système de pincée en glisser/déposer, target density ça fonctionne exactement comme width et height, ça définit la densité de l’écran, vous pouvez mettre une valeur réelle ou définir votre propre valeur. Les valeurs par défaut de scale minimum et maximum sont 0,25 et 1,6 et la valeur initiale doit se situer entre ces deux valeurs, c’est le zoom utilisé par défaut sur la page.

Votre plan d’actions !

Commencez par utiliser, moi je vous conseille d’utiliser le doctype HTML 5 sur vos pages, sur vos sites à destination des mobiles, si vous avez des questions vous pouvez comme d’habitude les poser directement sous ce cours vidéo. Je vous invite dès maintenant, là il y a une image cliquez ici pour lancer la deuxième vidéo, c’est-à-dire dans la deuxième vidéo vous allez apprendre à utiliser des Framework pour créer vos sites Web beaucoup plus rapidement avec HTML 5, avec CSS 3 et en plus vos sites seront compatibles quel que soit le périphérique sur une tablette, sur un Smartphone, sur un ordinateur de bureau ils vont s’afficher très bien donc vous allez apprendre à utiliser des outils qui vous simplifient la vie, donc tout est dans la tout est expliqué dans la deuxième vidéo cliquez sur cette image, sur ce lien pour lancer la deuxième vidéo. Je vous retrouve tout de suite dans la deuxième vidéo pour tout vous expliquer à tout de suite.

[/ppmtoggle][/ppmaccordion]

 

Quel doctype utilisez vous ?

Utilisez la zone commentaire pour poser vos questions sur ce cours.

EXCLUSIF : Les 7 Secrets Révélés de JavaScript pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : La formation « JavaScript Facile » OFFERTE pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : Créez VOS Applications JavaScript — en moins de 7 jours grâce à notre formation OFFERTE « JavaScript Facile »

Que diriez-vous de Concevoir des Applications Mobiles Magnifiques — d’ici les 7 prochains jours ?

TÉLÉCHARGEZ : Les codes sources du livre « HTML5 / CSS3 » pour Créer VOS Applications Mobiles — d’ici les 7 prochains jours !

Cliquez ici pour tout recevoir >>