Tecnología y Coaching para Emprendedores

Mejores Prácticas para Crear un Diseño Web Responsive

diseno-web-responsive

En mi curso de diseño web responsive surgen muchas preguntas relacionadas con las mejores prácticas para crear un diseño web orientado a dispositivos móviles, desde si es mejor empezar con el diseño móvil o con el grid de 960px a en qué medidas deberíamos hacer los saltos en el diseño con los media queries de CSS3. Así que he pensado que qué mejor manera que responder a todas estas dudas que haciendo un post con las mejores prácticas a la hora de crear un diseño web responsive.


Mejores prácticas para diseño web responsive

Veamos a continuación algunas de las mejores prácticas a la hora de crear un diseño web responsive.

Planifica los puntos de salto en el diseño

El diseño web responsive utiliza los media queries de CSS3 para decidir cómo se va a ver la web para distintos anchos de pantalla. Los saltos pueden ser de hasta 480px, de 481px a 767px, de 768px a 1024px, etc. Y en cada uno de estos saltos podemos especificar unas reglas de CSS distintas.

La pregunta del millón de dólares es: ¿dónde hago los saltos y por qué? Si usamos como referencia el framework Bootstrap tenemos:

  • Hasta 480px
  • De 481px a 767px
  • De 768px a 979px
  • De 980px a 1199px
  • Igual o más de 1200px

¿Son estos saltos óptimos? La respuesta es depende del proyecto. Son muy acertados como norma general, excepto para pantallas de alta resolución como el iMac de 27 pulgadas o las televisiones multimedia. En mi opinión está muy bien dar prioridad a los dispositivos móviles, pero no debemos de olvidar las grandes pantallas, porque cada vez van a haber más.


Respeta los espacios en blanco

El diseño está cambiando hacia una tendencia mucho más minimalista que respete los espacios en blanco. Los diseños que no respiran terminan por ahogar y asfixiar y. como consecuencia, la gente se marcha. Si, además, estamos en un dispositivo móvil, lo último que queremos es ver nuestras pantallas sobrecargadas o el texto super pergado, pues nos va a dificultar mucho el consumo de los contenidos.

Aquí se trata de encontrar el equilibrio entre contenido y espacio en blanco. El interlineado es importante que tenga en cuenta las resoluciones de pantalla, para que no se vea un pegote en un smartphone o cosas por el estilo. Un buen diseño necesita respirar y no estar sobrecargado aprovechando hasta el último espacio en blanco. Buscar el equilibrio es clave en todo diseño.


Utiliza ems para la tipografía

Te recomiendo en la medida de lo posible utilizar ems en lugar de píxeles para la tipografía. Los ems son una unidad que toma como referencia el valor preestablecido por el navegador. Así, si mi navegador vine por defecto con un tamaño de fuente de 15px, 1 em equivaldrá a estos 15px. Pero pongamos ahora que tengo problemas visuales y he cambiado el tamaño preestablecido de fuente en el navegador a 20px. Entonces 1em equivaldrá a esos 20px, siendo así una unidad flexible.

El problema con los ems es que pueden romperte el diseño. Así, es posible que para alguna zona de la web prefieras utilizar píxeles para evitar que esto suceda, pero para los textos deberías implementar ems y no píxeles, pues sólo así podrás garantizar la mejor experiencia de usuario, además de evitar problemas de accesibilidad web.


Ten en cuenta el tiempo de carga

Ya Matt Cutts de Google dijo que uno de los criterios que va a tener en cuenta Google a la hora de posicionar una página es el tiempo de carga. Cada vez son más los usuarios que navegan desde dispositivos móviles con conexiones a Internet lentas, por lo que si a eso le sumas que la web tarda en cargar, pues como que le puede salir barba hasta que acceda a ver tu contenido si tu web va lenta.

Es importante tener siempre al usuario en mente a la hora de crear un diseño web, pues no sólo se trata del visual y el contenido, sino también del tiempo necesario para que todo cargue y esté a la vista. Asegúrate de que tus páginas web carguen rápido con herramientas como Google PageSpeed Insights.


Las imágenes en móvil y gran pantalla

En diseño web responsive hay un problema llamado art direction o dirección de arte. Significa que en una vista una imagen determinada puede quedar fantástica, pero en otra se puede ver como los pitufos en miniautura: nada o menos. Un ejemplo:

cueva

La cueva de la imagen se ve muy bien en pantallas grandes, pero en el móvil pierde toda su gracia. En estos casos se habría de jugar con imágenes distintas para cada vista, tal y como vemos en este otro ejemplo:

diseno web responsive


Mejor un diseño fluido que fijo

La ventaja del diseño responsive fijo es que es mucho más fácil de implementar, al usar píxeles y no haber de preocuparse de que todo se vea bien en todos y cada uno de los anchos de pantalla. El problema es exactamente el mismo, que puede ser que para una determinada resolución de pantalla quede mucho espacio en blanco en los laterales perdiendo la gracia del diseño.

Lo importante es que escojas la opción que escojas, tengas en cuenta todos los pros y contras para valorar cuál te sale más a cuenta.


Conclusión

En este post hemos visto algunos de los aspectos clave a la hora de crear un diseño web responsive. 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.

Si te ha sido útil el artículo o si añadirías algo más, te animo a dejar un comentario así como a compartir este post en las redes sociales.

Un abrazo!


Comentarios

  • Jesús Pernas

    Me ha gustado mucho el artículo.

    En cuanto a los puntos de salto, una vez le escuche a Wakkos (que es alguien al que siempre hay que escuchar :-) ) que la mejor manera para definir los puntos de salto era “ir haciendo esa freakada” que hacemos algunos de reducir la ventana del navegador y, cuando se vea como el … (<-me vas a permitir que lo escriba así, pues pongo el comentario en horario infantil) pues es ahí donde debe haber un punto de salto.

    En cuanto a las imágenes ya hace tiempo que uso Picturefill, que por ahora me sigue pareciendo una buena opción (aunque reconozco que hace ya tiempo que no reviso a ver si hay mejores opciones).

    • eSandra

      jajaja, Jesús, @wakkos tiene salidas de lo más simpáticas.. y con buena parte de razón. Eso yo lo he hecho en proyectos reales, lo que claro, no se pueden considerar buenas prácticas, de aquí que en este post no lo dijera, jajaja.. pero muy buena :-)

      Lo malo de Picturefill es todo el código extra que genera, y que es difícil de aplicar en sitios que generan mucho contenido de manera regular, pero es una buena opción para sitios pequeños o para imágenes puntuales.

      un abrazo!
      Sandra

  • Marcelo

    Excelentes tips Sandra! Saludos!

  • Matías

    Muy buen artículo Sandra, muy claro y completo. Enhorabuena. Aplicaré muchos de los consejos en mis próximos proyectos con responsive design. Saludos.

    • eSandra

      Hola Matías!

      gracias a ti por comentar, me alegro te haya servido :-)

      un abrazo!
      Sandra

  • Ricardo

    Muy buen articulo Sandra, yo estoy iniciándome en diseño responsive que me recomiendas :)

  • Demian

    Hola Sandra! Muy buenas las consideraciones de buenas prácticas, hace poco estoy incursionando con Bootstrap y la verdad tú has sido una de las que mejor ha explicado los puntos a considerar al momento de realizar un diseño web responsivo… Lo interesante de los proyectos actuales, es como en mi caso, estando en una organización del Estado, no todos los equipos poseen Hard & Soft actualizado… lo que hace que un diseño esté en el límite de las tecnologías actuales…

    Muchas gracias por tu aporte… Saludos =)

    (Mnes.AR)

    • eSandra

      De nada, Demian, justo ahora estoy preparando un curso de Bootstrap :-)

  • Mauricio Ardila

    Cordial Saludo, muy buen artículo, consejos muy puntuales e interesantes.
    Sandra tengo una duda para ti. Las media query de css3 se basan en la resolución de la pantalla del dispositivo al cual van dirigidos nuestros estilos, pero últimamente los smartphones tienen resoluciones muy altas, sobre los 1200px, asi que el responsive no se nota, sólo se ve la misma página pero más pequeña, la pregunta es, habrá forma de lidiar con esto? gracias por tus interesantes aportes. un abrazo

    • Sandra

      Hola Mauricio, justo esto lo explico en el curso de diseño web responsive, y es que el diseño web responsive no sólo debería dar soporte a pantallas móviles, sino también a pantallas de gran resolución, como la del iMac de 27′ o las televisiones multimedia. El por qué muchos sitios no lo hacen es debido a que es un trabajo extra al haberse de crear una vista adicional. Un saludo! Sandra

    • Iván Saes

      Este me parece un tema interesante. Últimamente veo webs que tienen distinta apariencia en escritorio y móvil con la misma resolución. Por ej. en hornig.at veo la versión escritorio con ancho de 1280px y es diferente a la versión móvil (Note 2) con el mismo ancho. Es decir, no sólo depende de resoluciones. Depende de resoluciones y dispositivos.
      Un saludo.

      • eSandra

        Sí, esto lo explico en mi curso. No es lo mismo resoluciones que anchos de ventanas de navegador. Y cada dispositivo tiene una resolución. Un abrazo.

  • Iván Saes

    Se pueden mezclar dentro de una web responsive elementos fijos y elementos fluidos? Me refiero a si por ej. en resolución 1200px se pueden tener elementos fijos y en alguna de las rupturas pueden pasar algunos (sólo algunos) elementos a anchos fluidos.
    Un saludo.

    • eSandra

      Hola Iván,

      sí que se puede hacer. Incluso se puede hacer que para determinados media queries sea todo fluido y a partir de un ancho de ventana de navegador pase a ser fijo. Todo esto lo explico en mi curso de diseño web responsive:

      http://www.esandra.com/responsive/

      un abrazo!

  • Roberto

    Sandra,que es mejor para crear un diseño responsive: flexbox,Skeleon u otro?

    gracias

    Roberto.