The 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 is the past, ya que cada vez más dispositivos pueden abrir un sitio Web. Por lo tanto, aclaremos algunos principios básicos del diseño web responsivo.
Responsive web design vs. adaptive
It may seem the same but it is not. Both approaches complement each other, so there is no right or wrong way to do it. Let the content decide.
The flow
A medida que los tamaños de pantalla se hacen más pequeños, el contents 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.
Relative units
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 browser).
Cut points
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. But beware: it can get messy quickly when it's hard to understand what's influencing what.
Maximum and minimum values
Sometimes it's great that content spans the entire width of a screen, like on a mobile device, but having the same content spanning the entire width of your TV screen often makes less sense. That is why the Min / Max values help. For example, having a width of 100% and a maximum width of 1000 px would mean that the content will fill the screen, but not exceed 1000 px.
Nested objects
Do you remember the relative position? Having many items depending on each other would be difficult to control, therefore wrapping the items in a container makes it much more understandable, neat and tidy. This is where static units like pixels can help. They are useful for content that you don't want to scale, such as logos and buttons.
Mobile or desktop first
Technically, it doesn't make much difference whether a project starts from a smaller screen to a larger one (mobile first) or vice versa (desktop first). However, the future is mobile devices. People often start at both ends at the same time, so you really have to see what works best for you.
Webfonts vs system fonts
Do you want to have a Future or 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 Username no lo tiene localmente, recurrirá a una fuente predeterminada.
Bitmap vs vector images
Does your icon have a lot of details and some fancy effects applied? If yes, use a bitmap. If not, consider using a vector image. For bitmaps use a jpg, png or gif, for vectors the best choice would be an SVG or icon font. Each has some benefits and some drawbacks. However, let's consider the size: no image should be online without optimization. A page with very heavy photos in addition to worsening the user experience, you could also see your organic positioning afectado. Los vectores, por otro lado, a menudo son pequeños, pero algunos browsers 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.
