CRIS BUSQUETS/>

BRANDING & DIGITAL DESIGN

9 principios del diseño web responsive

9 principios responsive web design

Desde 1989 hasta que aparecieron los primeros teléfonos inteligentes la vida para un diseñador y desarrollador web era muy sencilla. Bastaba con dominar CSS, Javascript y Flash en ocasiones y entender de qué manera funcionaban las tablas.

Todo esto pasó a la historia en 2007, cuando Apple lanzó el primer iPhone y los usuarios empezaron a conectarse a internet y visitar páginas web desde un móvil: la pantalla era infinitamente más pequeña que la del ordenador, la conexión más lenta, los pixeles empezaron a convertirse en porcentajes y aparecieron muchas más palabras inglesas en la jerga.

Los 9 principios del RWD

El RWD (responsive web design) trae muchas ventajas pero a la vez, mucha confusión. A través Froont nos llegan estos 9 términos que cualquiera que diseñe o programe para ordenadores y móviles debe conocer.

Responsive vs diseño web adaptativo

Puede parecer lo mismo pero no lo es. “Responsive” significa que aquello tiene la capacidad de reaccionar automáticamente frente a lo que le rodea, dando una respuesta ajustada a la situación y “adaptativo”, que el servidor detecta el dispositivo y envía un contenido adaptado al mismo.

El primero permite tener un único diseño para todo el sitio, mientras que el segundo requerirá un diseño extra para cada dispositivo, hecho que encarece el desarrollo y el tiempo que hay que dedidcarle.

Responsive vs adaptativo

El flujo

Cuando el tamaño de la pantalla es más pequeño, hace que todo ocupe más espacio vertical que horizontal (piensa en una pantalla de ordenador y tu móvil), hecho que hace que el contenido sea empujado hacia abajo.

Flujo

Unidades relativas

El lienzo ya no es una pantalla de ordenador de más de 1000 pixeles. Ahora estamos hablando de diseñar una web que funcione bien en cualquier tamaño de pantalla: cada teléfono que se lanza tiene su propia resolución y tamaño de pantalla. Continuar programando con pixeles empieza a sonar absurdo, ya que habría que crear un CSS para cada dispositivo (lo cual es un suicidio).

Los pixeles (unidades estáticas) se convierten en porcentajes (unidades relativas). Mira aquí la diferencia:

Unidades relativas

Puntos de ruptura (breakpoints)

Punto a partir del cual cambia la disposición del diseño. Puede ser que en ordenador se muestren 3 columnas de contenido pero al pasar a un ancho más estrecho, estas se muestren una debajo de otra y no de lado.

Puntos de ruptura

Valor máximo y mínimo

El tamaño máximo y mínimo que puede ocupar ese elemento dentro de la pantalla. Es especialmente útil en ordenadores, dado que en las pantallas grandes, si no hay un límite, el diseño se extendería demasiado y quedaría desvirtuado. Sirven también para controlar los márgenes y paddings.

Valor mínimo y valor máximo

Objetos anidados

Si programamos teniendo en cuenta divs que engloben más contenidos conseguiremos que la apariencia se muestre siempre igual, por mucho que cambie el tamaño de la pantalla. Los convertimos en una especie de “paquete” que garantiza que no se nos muevan:

Objetos anidados

Móvil o escritorio primero

Es el conocido “mobile first” o “desktop first”. Sirve para indicar en qué pantalla te centrarás primero para diseñar, ya que la colocación de los contenidos no será la misma.

Movil o escritorio primero

Fuentes del sistema o fuentes web

Para diseñar puedes usar las fuentes que ya estén en cada ordenador (Verdana, Arial, Trebuchet, Courier y pocas más) o aventurarte a usar una Futura, Helvetica, etc. Piensa que cada tipografía diferente a las cuatro primeras significa que harás que el servidor tenga que cargar un archivo más, hecho que ralentiza el proceso de carga de la web.

Fuentes del sistema o fuentes web

Mapa de bits o vectores

Los mapas de bits (bitmaps), como el propio nombre indica, están hechos con bits. Estoy significa que si se incrementa mucho el tamaño del archivo, se verá pixelado. Los vectores evitan este problema, ya que son capaces de adaptarse a cualquier tamaño. Para un mapa de bits usa un jpg, png o gif; para los vectores, SVG.

Bitmap vs vector

 

Conclusión

Es importante conocer qué significa cada uno de los términos y la diferencia entre ellos, pero lo es todavía más ser capaz de diseñar correctamente para teléfonos móviles: es muy posible que la primera experiencia del cliente con tu marca suceda a través de ese dispositivo, así que una mala experiencia arruinará cualquier opción que pudieras tener de que te tomara en consideración.

Share Button

¿Algo que decir?

Recuerda que los campos marcados con un asterisco (*) son obligatorios:

Nombre*

E-mail*

Web

Comentario*