le Web Design responsivo es una gran solución para nuestro problema de pantallas múltiples, pero es difícil acceder a él desde la perspectiva de la impresión. Sin tamaño de página fijo, sin milímetros ni pulgadas, sin restricciones físicas contra las que luchar. Diseñar en píxeles solo para computadoras de escritorio y dispositivos móviles también est le passé, ya que cada vez más dispositivos pueden abrir un sitio la toile. Por lo tanto, aclaremos algunos principios básicos del diseño web responsivo.
Conception Web réactive vs. adaptatif
Cela peut sembler la même chose, mais ce n'est pas le cas. Les deux approches se complètent, il n'y a donc pas de bonne ou de mauvaise façon de le faire. Laissez le contenu décider.
Le flux
A medida que los tamaños de pantalla se hacen más pequeños, el Contenu comienza a ocupar más espacio vertical y todo lo que está debajo se empujará hacia abajo, se llama flujo. Puede ser difícil de entender si está acostumbrado a diseñar con píxeles y puntos, pero tiene mucho sentido cuando se acostumbra.
Unités relatives
El lienzo puede ser un escritorio, una pantalla móvil o cualquier cosa intermedia. La densidad de píxeles también puede variar, por lo que necesitamos unidades que sean flexibles y funcionen en todas partes. Ahí es donde las unidades relativas como porcentajes son útiles. Entonces, hacer algo con un ancho del 50% significa que siempre ocupará la mitad de la pantalla (o ventana gráfica, que es el tamaño de la ventana abierta del le navigateur).
Points de coupure
Los puntos de interrupción permiten que el diseño cambie en puntos predefinidos, es decir, tener 3 columnas en un escritorio, pero solo 1 columna en un dispositivo móvil. La mayoría de las propiedades CSS se pueden cambiar de un punto de interrupción a otro. Por lo general, donde pones uno depende del contenido. Si se rompe una oración, es posible que deba agregar un punto de interrupción. Mais attention: cela peut rapidement devenir compliqué quand il est difficile de comprendre ce qui influence quoi.
Valeurs maximales et minimales
Parfois, c'est bien que le contenu couvre toute la largeur d'un écran, comme sur un appareil mobile, mais avoir le même contenu sur toute la largeur de votre écran de télévision a souvent moins de sens. C'est pourquoi les valeurs Min / Max sont utiles. Par exemple, avoir une largeur de 100% et une largeur maximale de 1000px signifierait que le contenu remplira l'écran, mais il ne dépasse pas 1000px.
Objets imbriqués
Vous souvenez-vous de la position relative? Le fait d'avoir de nombreux articles dépendant les uns des autres serait difficile à contrôler, par conséquent, les emballer dans un conteneur le rend beaucoup plus compréhensible, net et bien rangé. C'est là que les unités statiques comme les pixels peuvent aider. Ils sont utiles pour le contenu que vous ne souhaitez pas mettre à l'échelle, comme les logos et les boutons.
Mobile ou bureau d'abord
Techniquement, cela ne fait pas beaucoup de différence si un projet démarre d'un écran plus petit à un plus grand (mobile d'abord) ou vice versa (bureau d'abord). Cependant, l'avenir, ce sont les appareils mobiles. Les gens commencent souvent par les deux extrémités en même temps, vous devez donc vraiment voir ce qui fonctionne le mieux pour vous.
Webfonts vs polices système
Voulez-vous avoir un Futur ou Didot de aspecto genial en tu sitio web? ¡Usa webfonts! Aunque se verán impresionantes, recordemos que cada uno se descargará y cuantas más tengas en tu web, más tardará en cargar la página. Las fuentes del sistema, por otro lado, son muy rápidas, excepto cuando el Nom d'utilisateur no lo tiene localmente, recurrirá a una fuente predeterminada.
Bitmap vs images vectorielles
Votre icône a-t-elle beaucoup de détails et des effets fantaisistes appliqués? Si oui, utilisez un bitmap. Sinon, pensez à utiliser une image vectorielle. Pour les bitmaps, utilisez un jpg, png ou gif, pour les vecteurs, le meilleur choix serait une police SVG ou icône. Chacun a des avantages et des inconvénients. Cependant, considérons la taille: aucune image ne doit être en ligne sans optimisation. Une page avec des photos très lourdes en plus d'aggraver l'expérience utilisateur, vous pourriez aussi voir votre positionnement organique afectado. Los vectores, por otro lado, a menudo son pequeños, pero algunos navigateurs más antiguos no lo admiten. Además, si tiene muchas curvas, puede ser más pesado que un mapa de bits, así que elija con prudencia.
