La web responsive es la web de hoy. No obstante, requiere de nuevas maneras de pensar y de desarrollar, que son más fáciles de poner en marcha si sigues algunos de los consejos que explicamos en este post. «Responsive» es una corriente de diseño enfocada en el desarrollo y creación de sitios web que son capaces de adaptarse a las condiciones del ordenador o dispositivo donde se visualizan. Los diseñadores profesionales, gracias a tecnologías como CSS, son capaces de crear páginas web que se ven perfectamente tanto en teléfonos móviles, tablets o en las grandes pantallas de ordenadores personales y smart TV.
Piensa en móvil primero
Cuando diseñes, comienza primero por adaptarte al tamaño reducido de la pantalla de un móvil, para luego ir acoplando el contenido a las pantallas de dimensiones mayores. El paso contrario sería comenzar a diseñar pensando en una pantalla grande e ir adaptando el contenido para que se vea bien en pequeño.
El motivo se encuentra en que, al diseñar con un teléfono móvil en la mente, somos más objetivos con el contenido que se debe presentar en la página, quedándonos con lo que realmente es importante.
No optimices para un móvil o tablet determinados
Uno de los principales errores de todo diseñador que comienza con «responsive web design» es preguntarse cuáles son las características de los móviles sobre los que se desea optimizar una web. Nunca debemos diseñar para un dispositivo concreto, sino para nuestro diseño. Cada diseño tiene una serie de necesidades, se comporta de un modo en concreto y tiene unos objetivos definidos por la estrategia de la empresa o marca. Ésos son los criterios sobre los cuales adaptar un diseño y no las especificaciones técnicas de un dispositivo concreto.
Piensa que hay cerca de 20.000 modelos distintos de pantalla, solo en dispositivos Android ¿Serás capaz de optimizar para todos ellos? ¿y para los que vengan en el futuro?
Sigue los estándares y buenas prácticas
Más que nunca, con «Responsive Web Design» debemos preocuparnos por los estándares y el uso correcto de los estándares. También debemos seguir unas buenas prácticas recomendables para todo diseño web.
No uses estilos CSS definidos en el propio documento, dentro de las etiquetas HTML. Esos estilos mandan sobre otros que puedas definir en tus CSS externos y no serán posibles de editar mediante media queries para distintos tamaños de pantalla. Por el mismo motivo, mucho menos recomendable es usar atributos de HTML para aplicar formato en un contenido.
No uses Javascript para maquetar o para aplicar formato a tu web. Aunque muchas veces puedas estar bajo la tentación de usar plugins que modifican los tamaños de elementos, fuentes tipográficas o posición de las capas, Javascript debe ser usado para la interacción con el usuario, no para aplicar formato o estilo al contenido.
Evita ser esclavo del píxel
No es necesario maquetar una web pensando en el píxel. Di no al «pixel perfect«. La web adaptable puede tener diferencias en cada sitio donde va a ser consumida y, de hecho, las tiene. Los elementos caen en la posición donde les corresponde atendiendo a la fluidez de los contenedores y las dimensiones.
Allí donde observes que no se ve como te gustaría, simplemente arregla la disposición de los elementos con uno o varios media queries.
Mejora el posicionamiento de tu sitio web
Los buscadores tienen en cuenta el dispositivo desde el que se realizan las búsquedas y muestran los resultados en consecuencia. Cada vez se realizan más búsquedas desde dispositivos móviles y, para salir en esas búsquedas tu web debe estar adaptada al móvil, bien porque es una web responsive o bien porque tienes una web exclusiva para los móviles.
Si no tienes una y no quieres tener que rehacer tu web de desde cero, existen opciones como Mobileweb, con las que puedes generar una página web adaptada a móviles a partir de tu web. Esta aplicación utiliza utiliza los contenidos (imágenes, estructura, textos) de tu página web original para crear una versión móvil de tu web de forma rápida.
Si quieres más información sobre diseño responsive, te pueden resultar útiles los siguientes artículos ¿Responsive design o una web móvil independiente?, 10 recomendaciones para mejorar nuestra página web móvil (más allá del diseño responsive) y Las webs adaptadas a móviles destacan ahora en las búsquedas desde el smartphone.