JAVAJAN S.L.

Manlleu

facebook
Català
Castellano
English

Guía web

Metódo de implementación de webs responsive

Actualmente es casi necesario desarrollar webs que estén totalmente adaptadas a su uso desde múltiples dispositivos (tablet, móviles, portátiles, PCs...). Este apartado pretende orientar al diseñador gráfico, que hasta ahora creaba los diseños web dentro unos amplios estándares, sobre qué tiene que tener en cuenta a la hora de plantear los diseños web responsive (adaptables) y la diversidad de posibilidades que ofrecen las librerías JQuery (plugins que implementan diferentes funciones en una web: formas de desplegar menús, carrousels de imágenes, dinámicas de usabilidad, etc).

Javajan implementa BOOTSTRAP, uno de los principales frameworks de desarrollo de entornos web responsive. Es esencialmente una colección de hojas de estilo y funciones Javascript auxiliares que nos permiten construir muy eficazmente la maquetación base de todas las páginas del website y garantiza una correcta adaptación de los elementos a cualquier dispositivo.

http://getbootstrap.com/examples/theme/ Página de referencia de la implementación responsive; si variamos la anchura de la ventana del navegador, podremos observar com se comportan los distintos elementos, haciendo especial atención al menú principal, pues se transforma totalmente para adaptar la correcta usabilidad en dispositivos móviles.

Ejemplo de estructura de bloques según guía Bootstrap de 12 columnas:

Ejemplo de comportamiento de bloques según el ancho del dispositivo de visualización:

Conceptos básicos en web responsive

Principalmente hay que tener en cuenta que:

  • En una web responsive no se trabaja con píxels (en general) sinó en %, donde 100% es el ancho total del dispositivo en el cual visualizaremos la web.
  • Los elementos que se colocan uno al lado del otro, a medida que se reduce el ancho de la pantalla pasan a debajo: por ejemplo, si tenemos una fila de 6 columnas, podemos hacer que pasen a 2 filas de 3 columnas y finalmente (o directamente) a 6 filas de una columna. También se puede hacer que nunca se recoloquen, es decir, que por más que se reduce la página, nunca se recoloque en una sola fila. Ejemplos en http://getbootstrap.com/examples/grid/.

  • El número de columnas siempre tiene que sumar 12, teniendo en cuenta que 12 es el 100% del ancho total de la página: por ejemplo, col_8 + col_2 + col_2, siempre teniendo en cuenta que el total 8+2+2 tiene que sumar 12. Lo más correcto al plantear un diseño responsive es dividir el espacio de trabajo en 12 partes iguales mediante guías y columnas y trabajar siguiendo la estructura propuesta.
  • El comportamiento de las columnas en móvil hace que se recoloquen unas debajo las otras, idealmente en el mismo orden en el que aparecen. Si es necesario, en móvil también podemos esconder algunos contenidos (si hay demasiada información o queremos simplificarlo), al mismo tiempo que potenciamos otros (imágenes por ejemplo).
  • El espacio entre columnas que nos define el Bootstrap es de 30px (15px por cada lado). Se puede variar en toda la web o para una parte en concreto.
  • Respecto a la resta de elementos, tener en cuenta que tenemos muchísimas herramientas aquí: http://bootsnipp.com/ que nos pueden ayudar a la hora de pensar en la usabilidad de un diseño (elementos desplegables, menús o pies fijos en la página, formularios, etc). Sólo hay que escribir en el buscador la palabra clave para encontrar diferentes ejemplos sobre un mismo componente web.
web responsive

Si quieres mantenerte al día de las últimas novedades y tendencias en diseño web:

Subscríbete a nuestro informativo de noticias