9 points clés du design web réactif

La

Conception Web réactive est une excellente solution au problème du multi-écran, mais elle est un peu difficile du point de vue de l'impression. Il n'y a pas de taille de page fixe, pas de millimètres ou de pouces, pas de limitations physiques, pas de moyen de commencer. L’utilisation exclusive de méthodes de conception de pixels pour les ordinateurs de bureau et les mobiles appartient également au passé, car de plus en plus d’appareils peuvent ouvrir des sites Web. Par conséquent, nous devons clarifier certains principes de base de la conception Web réactive et adopter des pages Web fluides au lieu de lutter contre elles.

1. Conception Web réactive ou adaptative

Ils peuvent sembler identiques, mais ce n'est pas le cas. Ces deux méthodes se complètent. On ne sait pas laquelle est correcte et laquelle a tort. Le contenu détermine tout.

2. Flux de contenu

À mesure que la taille de l'écran devient plus petite, le contenu occupera plus d'espace vertical et le contenu en dessous sera poussé vers le bas. Cela peut être un peu délicat si vous concevez avec des pixels et des points, mais une fois que vous vous y serez habitué, cela aura du sens.

3. Unité relative

La taille de la toile peut être celle d'un ordinateur de bureau, d'un mobile ou de n'importe quelle taille entre elles. La densité des pixels peut également varier, nous avons donc besoin d’unités flexibles pouvant être utilisées sur une variété d’écrans. C’est là que les unités relatives comme les pourcentages s’avèrent utiles. Ainsi, définir une largeur de 50 % signifie qu'elle occupera la moitié de l'écran (ou view, qui est la taille de la fenêtre ouverte du navigateur).

4. Points d'arrêt

Les points d'arrêt permettent de modifier la disposition à des points prédéfinis. Par exemple : il y a 3 colonnes sur l’écran du bureau, mais il n’y a qu’une seule colonne sur l’écran du mobile. La plupart des propriétés CSS peuvent être modifiées en fonction des points d'arrêt. En règle générale, vous définissez des points d'arrêt en fonction d'un contenu spécifique. Si une phrase dépasse la longueur de l'écran, vous souhaiterez peut-être ajouter un point d'arrêt. Mais utilisez les points d'arrêt avec prudence : cela peut rapidement prêter à confusion lorsqu'il est difficile de comprendre ce qui affecte quoi.

5. Valeurs maximales et minimales

Parfois, il est bon que le contenu occupe toute la largeur de l'écran, comme sur les appareils mobiles. Mais si c'est sur un écran de télévision et que le même contenu occupe toute la largeur de votre écran, cela n'a généralement pas beaucoup de sens. C'est là que les valeurs Min/Max entrent en jeu. Par exemple, si vous définissez width sur 100 %, puis max-width sur 1000px, alors le contenu remplira l'écran, mais ne dépassera pas 1000px.

6. Objets imbriqués

Vous vous souvenez de la position relative ? Il est difficile de contrôler le positionnement de nombreux éléments en fonction du positionnement d'autres éléments, donc utiliser des conteneurs pour envelopper les éléments peut les rendre plus faciles à comprendre et plus ordonnés. C'est là que les unités statiques (comme les pixels) entrent en jeu. Ils sont utiles pour le contenu que vous ne souhaitez pas être modulaire (comme un logo ou un bouton).

7. Priorité Mobile ou Bureau

Techniquement, si un projet démarre avec un écran plus petit, devient un écran plus grand (mobile d'abord), ou vice versa (Le bureau a priorité), il n'y a pas beaucoup de différence. Cependant, cela ajoute des restrictions supplémentaires qui peuvent vous aider à décider si vous souhaitez commencer par le mobile en premier. Habituellement, tout le monde écrit les deux extrémités ensemble au début, il est donc préférable de voir laquelle fonctionne le mieux.

8. Polices Web vs polices système

Vous souhaiteriez avoir une police Futura ou Didot sympa sur votre site Web ? Les polices Web sont disponibles ! Bien qu’elles soient superbes, n’oubliez pas que plus vous insérez de polices, plus votre page mettra du temps à se charger. D'un autre côté, le chargement des polices système est ultra-rapide, mais lorsque l'utilisateur ne dispose pas du jeu de polices localement, il revient à la police par défaut.

9. Bitmap vs

Vecteur

Avez-vous déjà pensé à ajouter beaucoup de détails et d'effets fantaisistes à vos icônes ? Si vous y réfléchissez, l’utilisation de bitmaps est plus appropriée. Sinon, envisagez d'utiliser des graphiques vectoriels. Pour les bitmaps, utilisez des images au format jpg, png ou gif, tandis que pour les vecteurs, votre meilleur choix est les polices SVG ou icônes. Chacun a des avantages et des inconvénients correspondants. Mais la taille de l'

image doit également être prise en compte : les images de la page Web doivent être optimisées. D’un autre côté, les images vectorielles sont généralement plus petites, mais certains navigateurs plus anciens ne les prennent pas en charge. En outre, il peut être plus lourd qu'un bitmap s'il comporte beaucoup de courbes. Alors, choisissez avec soin.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!