Qué debes hacer para que tu web sea responsive
Si hay una característica que asociamos a nuestra página web últimamente es que tiene que ser responsive, ya que una de las cosas que tenemos que tener en cuenta es la multitud de dispositivos diferentes que se conectan a una página web. Es fundamental que el diseño de nuestra web esté adaptado a toda esa variedad con el fin de ofrecerles a nuestros usuarios una experiencia óptima, accedan a visitarnos desde dónde sea.
Presentamos una serie de pautas esenciales que facilitarán las tareas de desarrollo en proyectos responsive, optimizando el flujo de trabajo y garantizando una mejor adaptabilidad en diferentes dispositivos.
Creación del HTML optimizado para un diseño responsive
La mejor opción es partir de un mismo HTML para todos los dispositivos, dejando que el lenguaje CSS se encargue de aplicar el formato y las reglas que permitan la adaptación del diseño a los diferentes tipos de sistemas donde se consumirá el contenido. Al tener bastantes componentes semánticos, si utilizamos HTML5 podremos organizar jerárquicamente la información y ser más exactos. Si tienes dudas sobre la idoneidad de un contenido, es mejor no ponerlo. Y si es un contenido que se va a mostrar en resoluciones de escritorio, tampoco. Lo primero es encajar todo en pantallas pequeñas (Mobile First, por favor).
Aplicación del CSS para tu diseño responsive
Aquí es donde está la parte más compleja del diseño, porque con el CSS aplicaremos el formato a la página, tanto en la disposición de los elementos como en su aspecto final. Los navegadores entienden un conjunto de reglas de estilos y las que no soporta, las ignora. Por encima de la estética, tenemos que intentar resolver los problemas de layout derivados de las diferencias de navegadores y su soporte con CSS.
Principalmente, nos enfrentaremos a dos tipos de problemas:
a) Estéticos. Son los que menos deben preocuparnos, ya que sirven para mejorar la estética de nuestro sitio (tipografías, cajas con esquinas redondeadas, sombras en textos o cajas, etc.) y no requieren una especial adaptabilidad porque no van a afectar a la accesibilidad de un contenido, aunque sí a su visualización. b) De layout. Son los estilos encargados de mostrar la información con una estructura definida, por columnas, cabecera, pie, etc. Nos permite jerarquizar la información, desplegarla para una mejor compresión y así apreciar la importancia de cada cosa. Por ejemplo, si una web tiene una barra lateral donde hay banners y otras cosas con menor importancia (lo que conocemos como aside) en todos los sistemas, deberíamos poder remarcar la menor importancia de ese contenido. Si algún navegador no puede situar bien esa barra, deberemos hacer que no aparezca en lugar de otro contenido que sea más importante.
Podemos llegar a pasar por alto algunos problemas estéticos, como que no se muestre exactamente igual en todos los navegadores. Sin embargo, si hay diferencias de layout podría provocar que el contenido no sea accesible, o entendible, y eso sí sería un problema mayor.
Esperamos que os parezcan útiles estas sugerencias y que, si no habéis dado el paso ya, os animéis a adentraros en el mundo web responsive. Hagamos una pequeña reflexión sobre nuestro comportamiento como usuario a su vez. ¿Cuál es el dispositivo que utilizan tienen tus usuarios para acceder a tu página web?
Prioriza el enfoque «Mobile First» en el diseño responsive
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?
La importancia de seguir estándares en el diseño responsive
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.
Adapta el contenido sin obsesionarte con el «pixel perfect»
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.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.