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 funcionan las tablas, ahora el diseño ha cambiado.
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 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 dedicarle.
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.
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).
Puntos de ruptura
Punto a partir del cual cambia la disposición del diseño. Puede ser que en ordenador se muestran 3 columnas de contenido pero al pasar a un ancho más estrecho, estas se muestran una debajo de otra y no de lado.
Valor maximo y minimo
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.
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.
Móvil o escritorio primero
Es el conocido “mobile first” o “desktop first”. Sirve para indicar en qué pantalla te centraras primero para diseñar, ya que la colocación de los contenidos no será la misma.
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.
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.
