Déterminer les points d'arrêt pour une conception réactive

Auteur: John Stephens

Date De Création: 23 Janvier 2021

Date De Mise À Jour: 19 Peut 2024

Déterminer les points d'arrêt pour une conception réactive - Créatif

Contenu

01. Suivez le contenu
02. Amélioration pour les écrans plus grands
03. Utilisation des ems pour des requêtes multimédias plus flexibles
Aimait ça? Lisez-les!

Connaissances nécessaires: CSS intermédiaire et familiarité avec la conception réactive
A besoin: Éditeur de texte et navigateur
Temps du projet: 30 minutes
Dossier de support

Ceci est un extrait édité du chapitre 3 de Mettre en œuvre un design réactif, publié par Peachpit Press, mis en vente la semaine dernière.

La méthode conventionnelle de détermination des points d'arrêt consiste à utiliser des largeurs assez standard: 320px (où l'iPhone et plusieurs autres appareils mobiles atterrissent sur le spectre), 768px (iPad) et 1024px. Cependant, il y a un problème avec l'utilisation de ces points d'arrêt "par défaut".

Lorsque vous commencez à définir des points d'arrêt entièrement par les résolutions des appareils courants, vous courez le risque de développer spécifiquement pour ces largeurs et d'ignorer l'entre-deux (par exemple, faites pivoter l'iPhone en paysage et vous venez d'introduire une largeur de 480px) . Ce n’est pas non plus une approche particulièrement favorable à l’avenir. Ce qui est populaire aujourd'hui peut ne pas l'être demain. Lorsque le prochain appareil chaud apparaîtra, vous serez obligé d'ajouter un autre point d'arrêt juste pour suivre le rythme. C’est une bataille perdue.

01. Suivez le contenu

Une meilleure approche consiste à laisser le contenu dicter l'emplacement de vos points d'arrêt et le nombre d'entre eux dont vous avez besoin. Commencez à redimensionner la fenêtre de votre navigateur et voyez où il y a place à amélioration.

En permettant au contenu de vous guider, vous dissociez davantage votre mise en page d'une résolution spécifique. Vous laissez le flux de la page dicter le moment où la mise en page doit être ajustée, ce qui est judicieux et favorable à l’avenir.

Pour identifier vos points d'arrêt, vous pouvez réduire la fenêtre de votre navigateur à environ 300 pixels (en supposant que votre navigateur vous permette d'aller aussi loin), puis augmenter lentement la taille de la fenêtre jusqu'à ce que les choses commencent à donner l'impression d'avoir besoin d'une retouche.

À environ 600 pixels, les images de la section «Plus dans le football» commencent à devenir un peu désagréables. Introduire ici une requête multimédia pour faire flotter ces histoires sur le côté, comme cela était le cas dans le chapitre 2, «Présentations fluides», a probablement du sens:

@media all et (largeur min: 600px) {
.slats li {
float: gauche;
marge droite: 2,5316456%; / * 24px / 948px * /
largeur: 31,6455696%; / * 300/948 * /
}
.slats li: dernier-enfant {
marge droite: 0;
}
}

Environ 860 pixels, tout le contenu de côté commence à se sentir espacé. La fenêtre est encore trop étroite pour la mettre de côté à droite, alors faites flotter les sections de côté pour qu'elles s'alignent en rangées de deux:

@media all et (largeur min: 860px) {
de côté{
bloc de visualisation;
marge inférieure: 1em;
rembourrage: 0 1%;
largeur: auto;
}
section de côté {
float: gauche;
marge droite: 2%;
largeur: 48%;
}
.article-tags {
clarifier les deux;
}
.un d{
text-align: centre;
rembourrage supérieur: 2,5em;
}
}

À ce point d'arrêt, il semble que les éléments de navigation pourraient être à nouveau flottants, au lieu d'être empilés les uns sur les autres (voir ci-dessous). Ces styles sont dans le CSS commenté, nous allons donc les saisir et les placer dans la requête multimédia. Nous supprimerons également la bordure des éléments de navigation:

@media all et (largeur min: 860px) {
...
nav [role = "navigation"] li {
float: gauche;
border-top: 0;
}
nav [role = "navigation"] a {
float: gauche;
}
pied de page [role = "contentinfo"] .top {
Flotter à droite;
}
}

Enfin, il semble que le côté puisse être ramené vers le haut et vers la droite autour de 940 pixels. Il faudra également dire aux sections sur le côté de ne pas flotter et de reprendre à nouveau toute la largeur:

@media all et (largeur min: 940px) {
.principale {
affichage: table-cellule;
rembourrage à droite: 2,5316456%; / * 24px / 948px * /
}
de côté {
affichage: table-cellule;
largeur: 300px;
}
de côté img {
largeur max: 100%;
}
section de côté {
float: aucun;
largeur: 100%;
}
}

À ce stade, la mise en page à 940 pixels ou plus ressemble beaucoup à ce qu'elle était à la fin du chapitre 2, «Présentations fluides».

02. Amélioration pour les écrans plus grands

L'élargissement de la fenêtre du navigateur révèle qu'il ne faut pas longtemps avant que la longueur de la ligne de l'article ne devienne difficile à lire. De nombreux sites implémentent ici une largeur maximale pour limiter à quel point la fenêtre du navigateur peut être redimensionnée, ou augmentent la taille de la police pour améliorer la longueur de la ligne.

Au lieu de limiter la largeur de la page pour l'instant, utilisons des mises en page multi-colonnes CSS3.

Le module de mise en page multi-colonnes vous permet d'indiquer au navigateur d'afficher le contenu dans plusieurs colonnes si nécessaire. L'assistance n'est pas trop mauvaise: Opera, Firefox, Internet Explorer 10 et WebKit la prennent toutes en charge. Assurez-vous simplement d'utiliser les préfixes corrects dans le cas de Firefox et WebKit. Aucun préfixe n'est nécessaire pour Opera ou Internet Explorer. Comme il s'agit d'une fonctionnalité intéressante à avoir, mais pas essentielle pour le site, nous pouvons progressivement améliorer l'expérience de ces navigateurs:

@media all et (largeur min: 1300px) {
.section principale {
-moz-column-count: 2; / * Firefox * /
-webkit-column-count: 2; / * Safari, Chrome * /
nombre de colonnes: 2;
-moz-column-gap: 1,5em; / * Firefox * /
-Webkit-column-gap: 1,5em; / * Safari, Chrome * /
écart de colonne: 1,5em;
-moz-column-rule: 1px pointillé #ccc; / * Firefox * /
-webkit-column-rule: 1px pointillé #ccc; / * Safari, Chrome * /
règle de colonne: 1px pointillé #ccc;
}
}

Les lignes 3 à 5 indiquent au navigateur le nombre de colonnes qu'il doit utiliser pour afficher l'article. Les lignes 6 à 7 indiquent au navigateur d'insérer un espace de 1,5 mm (24 pixels) entre les colonnes. Enfin, les lignes 9 à 11 indiquent au navigateur d'inclure une ligne pointillée gris clair de 1 px dans cet espace pour fournir un peu plus de séparation visuelle (voir l'image ci-dessous).

La longueur de la ligne est maintenant bien meilleure, mais la page pourrait encore bénéficier d'une certaine séparation entre l'article et les informations sur l'auteur. L'image pourrait également utiliser un peu plus de distance par rapport au contenu:

@media all et (largeur min: 1300px) {
.main section img {
marge inférieure: 1em;
bordure: solide 3px #dbdbdb;
}
.main .articleInfo {
bordure inférieure: 2px solide #dbdbdb;
}
...
}

Avec la bordure en place autour de l'image et au-dessus de la section, et l'ajout du rembourrage supplémentaire, le design est à nouveau assez net.

03. Utilisation des ems pour des requêtes multimédias plus flexibles

Les gens naviguent sur le Web avec leur navigateur réglé sur différents facteurs de zoom. Quelqu'un qui a des difficultés à voir peut trouver que la majorité des sites ont une taille de police difficile à lire, il peut donc définir ses préférences pour effectuer un zoom avant par défaut.

Lorsque les utilisateurs utilisent différents facteurs de zoom, la taille de la police augmente (ou diminue). Dans Firefox et Opera, ce n’est pas un problème; Les requêtes multimédias basées sur des pixels sont recalculées et appliquées en fonction du facteur de zoom. Sur d'autres navigateurs, cependant, nos points de rupture de pixels parfaitement placés nous échouent. Tout à coup, les choses commencent à flotter de manière maladroite et notre longueur de ligne idéale est impitoyablement jetée par la fenêtre. Ce même problème se pose lorsque, comme nous l'avons vu au chapitre 2, «Dispositions fluides», un périphérique utilise une taille de police par défaut différente. Par exemple, les polices de taille 26px du Kindle feront des ravages sur les requêtes multimédias basées sur des pixels. Nous pouvons lutter contre ces problèmes et rendre notre site encore plus flexible en convertissant les points d'arrêt en ems.

Comme nous l'avons également discuté dans le chapitre 2, convertir des mesures basées sur les pixels en ems est aussi simple que de diviser la cible (le point d'arrêt) par le contexte (dans ce cas, 16px, la taille de la police du corps):

/ * 600px / 16px = 37,5em * /
@media all et (largeur min: 37,5em) {
...
}
/ * 860px / 16px = 53.75em * /
@media all et (largeur min: 53.75em) {
...
}
/ * 940px / 16px = 58,75em * /
@media all et (largeur min: 58.75em) {
...
}
/ * 1300px / 16px = 81,25em * /
@media all et (largeur min: 81,25em) {
...
}

Les requêtes multimédias étant désormais définies à l'aide d'ems, même si le site est agrandi de quelques niveaux, les requêtes multimédias seront lancées, garantissant que la mise en page reste optimisée.

L'utilisation de requêtes multimédias basées sur des unités EM est une autre façon de profiter de la flexibilité et de l'imprévisibilité du Web. Cela permet à l'utilisateur de contrôler l'expérience et permet au contenu de dicter la mise en page.

Tim Kadlec est un développeur Web vivant dans le nord du Wisconsin. Son expérience diversifiée de travail avec de petites entreprises, de grands éditeurs et des sociétés industrielles lui a permis de voir comment l'application prudente des technologies Web peut avoir un impact sur les entreprises de toutes tailles. Il est co-fondateur de Breaking Development Conference, l'une des premières conférences dédiées à la conception et au développement d'appareils mobiles utilisant les technologies Web.