Tips para hacer un diseño responsive en CSS

Tips para hacer un diseño responsive en CSS

En plena era de los terminales móviles un buen diseño web es muy importante, y no sólo que sea bonito, también que se visualice correctamente sin importar el dispositivo objetivo. Este concepto es el que persigue el diseño adabtable, o conocido como “responsive”. Un diseño que no distingue entre tamaños de pantalla ni dispositivos y que, como dato importante, ayuda a que vuestra web se indexe mucho mejor en las búsquedas de Google.

¿Cómo abordar el diseño responsive en CSS?

Seguidamente vamos a ver unas cuantas ideas que nos pueden ser muy útiles si queremos iniciarnos en esta clase de diseño web.

  1. Planificar. Antes de nada debemos pensar bien en las proporciones de la pantalla. No es lo mismo un ordenador que una tableta o un teléfono. Hay que pensar en la verticalidad y horizontalidad. Como siempre recomiendo, coger papel y lápiz y empezar a dibujar las ideas es el método más fácil (y barato) para plasmar lo que tenemos en mente.
  2. Usar una herramienta de prototipado. Esta clase de programas nos pueden ser muy útiles para ver de manera clara los tamaños de los objetos que queremos mostrar. A nivel personal recomiendo Pencil, una herramienta sencilla e intuitiva que cumple con su cometido, no sólo para web, también para todo tipo de actividades relacionadas con poner sobre la mesa las ideas conceptuales que tengamos.
  3. Controlar los tamaños de imagen, una vez tengamos un buen diseño conceptual. Para ello se recomienda usar algún programa de diseño de imagen, como GIMP, un programa gratuito muy útil y completo. Como hemos mencionado anteriormente, es importante que planteéis (y dibujéis) el diseño tanto para pantallas de escritorio como móviles. Esto se consigue haciendo las imágenes para ambas plataformas.
  4. Hacer distintas imágenes para cada plataforma. Una vez tengamos las imágenes pensadas y con sus distintos tamaños, hay que optimizarlas para las distintas distribuciones a las que queremos apuntar.
  5. La plataforma móvil como primer objetivo. Normalmente cuando se quiere hacer una actualización del diseño a responsive, ya contamos con una base, y nos interesa este cambio por las tabletas y los smartphones, por lo que usaremos estas plataformas como objetivos iniciales.

diseño responsive css 

Parecen pasos complicados, pero para empezar a introducirse en el diseño responsive en CSS son buenos puntos con los que partir. Todo esto requiere también un buen trabajo de estilos detrás, por lo que se recomienda estudiar de manera profunda los lenguajes html y css. Os preguntaréis si necesitáis javascript. El responsive design no es un programa ni tampoco un script, es un comportamiento de los estilos ante distintas situaciones.

Aspecto a tener en cuenta en el diseño responsive: el tipo de navegador

Una vez tenemos claro todo lo anterior, vamos a tratar otros aspectos a tener en cuenta. Algo que sucede muy a menudo con CSS es que nuestros diseños no se visualizan como deseamos en todos los navegadores, por lo que recomiendo encarecidamente que os descarguéis tantos como podáis, aparte de los más famosos: Chrome, Firefox, Opera, Safari y, sobre todo, Internet Explorer. ¿Por qué remarco el de Microsoft? Os sorprenderá la de veces que vuestro diseño se muestra sin problemas en los anteriores y en Explorer se os mueven los objetos. Un detalle a tener en cuenta sin duda. Una vez sabido esto, pensemos en lo siguiente:

  1. Usar ancho(witdh) o alto (height) automático, esto os será muy útil para que vuestras imágenes no se distorsionen cuando se adapten. Pero os puede preocupar cuánto de grande o pequeñas se puedan hacer, y es por eso que os presento el siguiente punto.
  2. Min-height/max-height, min-width/max-width. Cuando sepáis los tamaños máximos y mínimos de las imágenes, podéis usar estos tags para limitar su comportamiento a vuestras necesidades. Un baner, por ejemplo, puede ser muy cómodo tenerlo siempre al 100% de anchura, pero si la pantalla es muy pequeña os interesará más quitarlo y sustituirlo por un menú.

<div class="contenedor">

<img src="imagenes/mi_img.jpg" class="max-min" />

</div>

. contenedor { width: 600px; } .max-min { max-width: 150px; min-width: 75px; }

Finalmente recomiendo usar overflow: hidden, de modo que si el texto u otros elementos se superponen, simplemente quedarán oculto, algo mucho más elegante que usar un div adicional para quitar de la vista del usuario algún objeto. En el siguiente enlace podéis probar los distintos tipos de overflow.

Con todo esto ya tenéis una pequeña introducción a esta clase de diseño, muy importante en los tiempos que nos ocupa internet hoy en día, con el extenso uso de las tabletas y los smartphones. Y sobre todo no olvidéis lo mencionado al principio: un buen diseño responsive hace que Google os indexe mucho mejor vuestra web, por lo que, por temas de visibilidad en la red, os interesa mucho implementarlo en vuestras páginas.

Para terminar, un ejempo del comportamiento de la web del Boston Globe en dos tamaños distintos. Fijaos como cambia la página y veréis más claro para que sirve esta clase de diseño. Sin duda muy útil e interesante.

¿Que te ha parecido este artículo? No olvides dejar tus comentarios