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.
A continuación, ofrecemos unas pautas de trabajo que nos facilitarán mucho las tareas de desarrollo cuando trabajamos en un proyecto responsive:
- Creación del HTML
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?