Share
Je me souviens de mon voyage inaugural dans la conception Web réactive; J'avais utilisé une grille classique, lutté avec une mise en page flexible et répondu aux requêtes des médias pour la première fois. L'agrandissement et la réduction de la fenêtre du navigateur ont permis à ma conception de répondre de manière satisfaisante à son environnement. Ensuite, je l'ai testé sur un mobile. Cela n'a pas fonctionné - je cherchais une version réduite du design plein écran. En fin de compte, la solution était simple…
Remarque: Ce didacticiel a été publié pour la première fois en février 2012, mais il est souvent utilisé comme référence dans d’autres didacticiels (et les choses ont changé). J’ai donc pensé que cela méritait une mise à jour..
Ce tutoriel vous apprendra à utiliser vous-même la balise méta de viewport, mais si vous avez besoin d’aide pour créer un site Web réactif, de nombreux concepteurs sont à votre disposition sur Envato Studio. Voici certaines des meilleures options:
Ce fournisseur du Royaume-Uni créera une conception et un développement Web personnalisés en fonction de votre marque, des couleurs, des exigences fonctionnelles et des meilleures pratiques en matière d’utilisation. Votre site Web sera unique pour votre entreprise et mis en place pour une conversion maximale..
Tu auras:
Si vous pouvez gérer le développement vous-même et que vous voulez juste un design, vous pouvez choisir cette option, qui vous donnera un site Web conçu de manière professionnelle. Voici ce que vous obtiendrez:
Ce fournisseur est un concepteur web indépendant travaillant à temps plein, avec plus de 12 ans d'expérience professionnelle dans les domaines de la conception Web, de la conception graphique et de la conception d'interfaces utilisateur UI / UX..
Vous aurez un site Web élégant d'une page conçu avec un comportement réactif à l'esprit.
Si aucune de ces options ne vous convient ou si vous préférez apprendre à le faire vous-même, lisez la suite..
Si vous ne lisez rien d’autre dans cet article, prenez un conseil: si vous concevez de manière flexible, utilisez la balise méta viewport dans votre . Dans sa forme de base, il vous permettra de garder l'esprit tranquille dans la mise en page de plusieurs appareils:
Utilisons un exemple de mise en page que j'ai fouetté ensemble. Regarde; vous le verrez rétrécir et grandir à mesure que vous modifiez la taille de votre navigateur. Il existe également une requête multimédia unique qui agrandit le texte et donne à l'en-tête un aspect brillant. # ff333e couleur sur des écrans plus larges. Charmant.
Voici à quoi cela ressemble dans OSX Chrome:
Et voici comment il apparaît lorsque la fenêtre du navigateur s’écroule:
Voyons maintenant à quoi cela ressemble sur un smartphone (dans ce cas, iOS Safari sur un iPhone 4):
La première chose que vous remarquerez est le titre rouge; un cadeau mort que nous ne regardons pas la disposition étroite que nous pourrions attendre. Nous sommes en train de regarder une version zoomée.
iOS Safari suppose qu'une page Web mesure 980 pixels de large et que vous effectuez un zoom arrière afin que tout le contenu du disque se trouve dans les 320px disponibles (iPhone 4). Le contenu est alors beaucoup moins lisible, à moins que vous ne zoomiez.
Comme ils le disent, l'hypothèse est la mère de tous… quelque chose, mais c'est exactement ce que les navigateurs mobiles doivent faire si vous ne leur donnez pas d'instructions spécifiques. Lorsque vous visitez un site Web via un navigateur mobile, vous supposez que vous visualisez une grande expérience de bureau et que vous souhaitez tout voir, pas seulement le coin supérieur gauche. Il définira donc la largeur de la fenêtre d'affichage (dans le cas d'iOS Safari) à 980 pixels, chaussant tout dans son petit écran.
Entrez la balise méta de la fenêtre d'affichage, introduite par Apple, puis adoptée et développée par d'autres.
Cela ressemble à ceci:
Dans le content = "" vous pouvez entrer une charge de valeurs délimitées par des virgules, mais nous allons nous concentrer sur les valeurs fondamentales pour l'instant.
Par exemple, si votre conception mobile est délibérément aménagée à 320 pixels, vous pouvez spécifier la largeur de la fenêtre d'affichage:
Pour des mises en page flexibles, il est plus pratique de baser la largeur de la fenêtre de visualisation sur le périphérique en question. Vous devez donc faire correspondre la largeur de votre mise en page à la largeur de périphérique que vous entrez:
Pour être plus sûr que votre mise en page sera affichée comme vous le souhaitiez, vous pouvez également définir le niveau de zoom. Ceci, par exemple:
… Veillera à ce que, lors de l'ouverture, votre mise en page s'affiche correctement à l'échelle 1: 1. Aucun zoom ne sera appliqué. Vous pouvez même aller plus loin et empêcher tout zoom de l'utilisateur:
Remarque: Avant d'appliquer le paramètre d'échelle maximale, demandez-vous si vous devriez vraiment empêcher vos utilisateurs d'effectuer un zoom avant. Peuvent-ils tout lire aussi bien que possible??
L'utilisation incorrecte de la balise méta de la fenêtre d'affichage peut gêner les utilisateurs rencontrant des problèmes visuels d'accès à votre site Web.
- Le projet d'accessibilité
Ensemble, ces valeurs nous donnent un excellent travail par défaut:
Voyons comment cela affecte notre exemple
Comme vous pouvez le constater, tout reste à la bonne échelle. Le texte enveloppe au lieu de rétrécir et notre assistant visuel (l'en-tête rouge) a disparu.
Chapeau à Jason pour l'avoir souligné dans les commentaires. En indiquant que la largeur de votre mise en page est égale à la largeur du périphérique, vous rencontrerez des problèmes lorsqu'un périphérique est utilisé en mode paysage. Découvrez comment un iPhone 4 gère notre démo en mode paysage:
Le navigateur se sent obligé de faire un zoom avant, afin de correspondre à la largeur de la page.
Pour résoudre ce problème, nous pourrions, comme le souligne Jason, utiliser JavaScript pour choisir de manière conditionnelle les attributs de métabalises à utiliser, mais la solution la plus simple semble tout simplement être d'ignorer les attributs. largeur tout à fait. En fixant seulement le échelle initiale la largeur est inférée. Voici comment notre nouvelle démo simplifiée apparaît en mode paysage:
La métabalise de la fenêtre d'affichage était la solution d'Apple au problème. Il a été adopté rapidement par d'autres plateformes, mais il n'a jamais été mis en avant par le W3C. Microsoft a mis cela en lumière lorsqu'il a choisi pour IE10 d'ignorer la métabalise de la fenêtre d'affichage dans certaines circonstances. Au lieu de cela, ils ont choisi d'utiliser CSS Device Adaptation, qui est ce sur quoi le W3C s'appuie.
En bref, des propriétés de fenêtre similaires sont définies dans CSS à l’aide de la règle @viewport, plutôt que dans HTML..
@viewport zoom: 1.0; width: device-width;
Ou, conformément à notre plus récent ne pas spécifier la largeur du périphérique approche, nous pourrions définir ce qui suit:
@viewport zoom: 1.0; width: extension-to-zoom;
Etant donné qu’il s’agit d’un travail en cours, IE10 nécessite la version préfixée de la proposition, qui ressemble à ceci:
@ -ms-viewport width: extend-to-zoom; zoom: 1,0;
C'est une solution beaucoup plus élégante que la métabalise, mais elle est loin d'être totalement prise en charge. Insérez-le maintenant dans votre CSS pour vous assurer que votre conception réactive se comporte bien dans le "mode d'accrochage" d'IE10 et gardez un œil sur ses progrès à l'avenir. C’est là que le contrôle de la fenêtre est dirigé.
Vous pouvez en savoir plus à ce sujet dans l'article de Tim Kadlec IE10 Snap Mode et Responsive Design.
La conception Web réactive ne s'adresse pas uniquement aux personnes qui aiment regarder leur navigateur se développer et se réduire, il s'agit également de prendre en charge le plus grand nombre possible de périphériques, d'écrans et de résolutions différents! Jetez la balise méta viewport dans votre , plus la règle @viewport dans votre CSS lorsque vous créez des dispositions flexibles et que vous êtes prêt à partir.
Vous pouvez également trouver des milliers de thèmes et de modèles responsive de haute qualité sur ThemeForest, ainsi qu'une vaste gamme de scripts, de plug-ins et de modules complémentaires dans la catégorie "responsive" sur CodeCanyon..
Accentsconagua