Tecnología y Coaching para Emprendedores

Diseño Web Responsive: ¿Por Dónde Empiezo? Aquí la Clave

responsive design

Quien más quien menos, muchos hemos empezado ya nuestros primeros pasos en el diseño web responsive. Y seguro que todos nos hemos hecho la pregunta del millón de dólares: ¿por dónde empiezo? Sí, está claro que vale la pena utilizar un framework para diseño responsive, y que hemos de utilizar tanto un diseño fluido como media queries de CSS3. Y si además queremos rizar el rizo, podemos utilizar un preprocesador de textos como LESS. Y entonces es cuando uno empieza a arrancarse los pelos..

El problema es que queremos empezar la casa por el tejado. Recordemos que el código viene después de muchos otros pasos necesarios en el diseño web. Así que lo primero que haremos es pensar en el objetivo del site y los contenidos que queremos publicar. Y si se trata de un rediseño a responsive, entonces podemos directamente empezar con papel y lápiz y plasmar las ideas.

Primero el diseño móvil

Uno de los errores más comunes cuando empezamos en el mundo del diseño web responsive es hacer lo de toda la vida: empezar con el layout para 960px y después adaptar este a pantallas más pequeñas (..y grandes!). Lo primero que debemos hacer antes de nada es cambiar el chip y empezar con el diseño móvil. Y a partir de aquí lo vamos haciendo grande y adaptando a diferentes resoluciones de pantalla.

Mobile first es una filosofía desarrollada por Luke Wroblewski que señala la necesidad de priorizar el entorno móvil a la hora de desarrollar experiencias de usuario. Las razones principales para empezar con el diseño web móvil son las siguientes:

  • Permite llegar a más gente . A nivel mundial el 77% de la población utiliza un móvil, con un 85% de usuarios móviles que tienen navegador en su dispositivo.
  • Obliga al diseñador web a centrarse en los contenidos y funcionalidades principales. ¿Qué haces cuando pierdes un 80% de la pantalla?
  • Permite al diseñador web sacar provecho de las tecnologías móviles, como geolocalización, touch events, etc.

Adaptándonos al grid, boilerplate o framework

Si vamos a utilizar un grid, boilerplate o framework, como por ejemplo el grid semántico, entonces lo primero que debemos hacer antes de nada es mirar para que anchos de ventana está configurado el grid o framework seleccionado. En mi caso concreto, para la nueva web de eSandra voy a utilizar el 320 and up, porque es el que viene por defecto con Bones, un tema básico en HTML5 para desarrolladores de temas en WordPress. Uses el que uses da igual, lo importante es que tengas en cuenta las medidas.

En mi caso concreto hay 5 incrementos: 480, 600, 768, 992 y 1382px. ¿Qué significan estas cifras? Significa que vamos a desarrollar una web teniendo en cuenta estas resoluciones de pantalla:

  • De 320px a 479px
  • De 480px a 599px
  • De 600px a 767px
  • De 768px a 991px
  • De 992px a 1382px

Y aquí viene cuando uno se asusta y dice: “Dios mío, he de hacer 5 diseños???”. Pues no, puedes relajarte, es más sencillo de lo que parece a simple vista, porque si hay que hacer tantos diseños y con los super precios que pagan en España por una web, yo casi que me paso a dependienta del McDonalds, jeje.. Y entonces, dirás, ¿cómo adaptamos el diseño a tantas resoluciones de pantalla? Y aquí entra en juego el diseño web fluido. Resumiendo mucho, el diseño web fluido es el que indica el tamaño de los elementos utilizando porcentajes en lugar de píxeles, con lo que se hace más grande o más pequeño en función del ancho de ventana. Esto y los media queries de CSS3 es todo lo que necesitarás después, porque con los media queries podrás cambiar la posición de los elementos en función de la resolución de pantalla.

Un ejemplo práctco

Ya dicen que vale más una imagen que mil palabras, veamos el prototipo del nuevo header de CreativaSfera. No te asustes, esto es sólo un prototipo creado con una herramienta de wireframing.

Prototipo del futuro header de CreativaSfera

Prototipo del futuro header de CreativaSfera

Vale la pena utilizar una herramienta de wireframing, porque te va a facilitar mucho el crear estructuras web. Esta imagen está hecha con Axure, una herramienta premium para crear prototipos web. Fíjate en que las cosas no están perfectamente en su sitio, es sólo para darme una idea de cómo se va a ver en cada resolución de pantalla.

Aquí vemos cómo he creado el prototipo del nuevo header de eSandra en base a los cinco incrementos de resolución del boilerplate que voy a utilizar. Y si te fijas, aquí sólo hay dos diseños, el móvil y el desktop. Los otros tamaños lo único que hacen es cambiar el tamaño y/o la posición de los diferentes elementos en función del ancho de ventana.

Y a partir de aquí, ¿qué hago?

A partir de aquí, haces lo mismo con el footer, porque el header y el footer son comunes a todas las páginas del sitio web. Y una vez tenemos el header y el footer, nos vamos ya a las zonas centrales de las diferentes páginas que conforman el sitio web. Nos puede ser útil esta herramienta que nos permite ver diferentes layouts y cómo cambian la posición de los elementos en el diseño móvil y el diseño desktop.

layouts

Así vemos que no es tan complejo como a primera vista pueda parecer, porque con el diseño web fluido vamos a jugar con el tamaño de los elementos y con los media queries de CSS3 con la posición de los elementos.

Conclusión

Hemos visto como empezar a crear sitios web responsive sin rompernos los cuernos. A partir de aquí, debemos pensar que tampoco es todo tan simple y sencillo, porque cuando queramos crear menús de navegación desplegables con submenús que se vean bien en todos los dispositivos y cosas por el estilo, entonces empezaremos a sudar la gota gorda, pero lo que sí que es sencillo es la idea central de por dónde empezar con el diseño web responsive, pues con lo que aquí hemos explicado vamos a poder ya crear sitios web adaptados a dispositivos móviles. Si entonces queremos dar funcionalidades avanzadas deberemos dedicarle más horas, pero el concepto en sí es más fácil de implementar de lo que a primera vista parece.

Si quieres aprender diseño web, te recomiendo el curso de diseño web desde cero con HTML5 y CSS3 así como el curso de diseño web responsive, con los que vas a aprender todo lo que necesitas saber sobre diseño web a nivel profesional.

Te animo a compartir el artículo y a dejar un comentario.

Un abrazo!


Comentarios

  • Alonso

    Hola, primero que nada te felicito por tu exelente blog, lo he seguido practicamente desde su inicio para consultas y actualizaciones… Te platico una problematica que me inquieta. Quisiera empezar a implementar webs responsivas para mis desarrollos y ahorita en lo particular requiero construir uno que gestione catalogos(alta, baja, cambios y consulta).

    Mi quebradero de cabeza viene para presentar una consulta que bien pudiera ser de 300 registros… no he visto grids que contemplen este uso. tienes alguna idea o lo has visto funcionar en algun lugar?

  • Diseño web

    Que buen articulo, me ha enseñado mucho, actualmente estoy iniciandome en el diseño web adaptativo con el uso de DW cs6. Lo dificil que me ha resultado es adaptar una web ya hecha. Me ha resultado mas facil empezarla de cero.

  • Chris

    Hola. Genial el artículo, acabo de leerlo puesto que lo guardé en favoritos hace unas semanas y hasta ahora que cancelé mi contrato web, no lo había consultado.
    Mi web ya era responsive. Una duda que a lo mejor puedes contestarme.

    Cuando cambiaba manualmente el tamaño del navegador para ver cómo se ajustaban los distintos elementos que la formaban, los cambios eran algo bruscos, secos, no sé cómo explicarlo. Se reubicaban de manera muy “tosca”…no se entiende, verdad? Es posible que me lo esté inventado pero me pareció ver cómo esa reubicación de los elementos se hacía con una transición rápida pero suave. ¿sabes a lo que me refiero? Cómo se consigue ese efecto o más bien, con qué? tiene nombre? jeje. Saludos.

  • virgilio

    gracias por el pequeño tutorial.

    Una cosa los enlaces “related posts” no funcionan ninguno :(