El diseño adaptativo (responsive design)

Aumentan los usuarios que acceden a Internet a través de tablets y teléfonos móviles. Esto, como ya sabéis, hace que ya no sólo baste con diseñar una buena página web que se vea bien en nuestro ordenador: también se tiene que ver en cada dispositivo móvil. ¿El problema? Diferentes tamaños de pantalla y resoluciones. Por eso es tan complicado hacer un diseño que se adapte correctamente a todos los medios (el famoso responsive design, traducido como diseño adaptativo).

A continuación te damos unos consejos a tener en cuenta a la hora de realizar un diseño de estas características. ¡Presta atención!

Consejos para un diseño adaptativo
Haz una plantilla simpleCon simple no me refiero a sosa. Estoy hablando de la estructura HTML de tu sitio web: cuanto más clara sea, mejor. Ten en cuenta que en una pantalla de ordenador te pueden caber tres columnas verticales; en la pantalla de un móvil, sólo te cabrá una. Piensa en ello y en cómo recolocarás los elementos.

Elimina todo lo innecesarioEvita los efectos jQuery, animaciones en Flash y cualquier otro código que ralentice la carga de tu página. Cuanto menos contenido de este tipo tengas, más rápida será la carga de la web.

Define un estilo css por cada “tamaño”Crea un tiny.css, small.css y big.css (por ejemplo) que se ejecute en función del dispositivo sobre el que se vea. Por ejemplo:

Las resoluciones más usadas320px / 480px / 720px / 768px / 900px / 1024px
Haz tu plantilla FLEXIBLESiempre que puedas, trabaja con porcentajes en lugar de cantidades fijas. A continuación unas equivalencias de referencia: 200px = 15’38% / 300px = 23’07% / 800px = 61’5384615384%

La tipografía es más importante que nuncaEn ocasiones, la pantalla del dispositivo puede ser tan pequeña que lo único que se vea en ella sea texto. Por eso tenemos que seleccionar con muchísimo cuidado las mejores tipografías de nuestro sitio, para que al verse reducido su tamaño no pierdan legibilidad. Además, tenemos que saber combinar fuentes más neutras con otras con personalidad que le den el carácter necesario a la web. Por lo tanto, el primer consejo es que le dediques tiempo a seleccionar las tipografías que vas a usar.

Usa imágenes de alta calidadAl reducirse el espacio, las imágenes lo acompañarán. Selecciona aquellas que no pierdan calidad al verse reducidas, y que funcionen igual al escalarlas. Una imagen de baja calidad dará un pésimo aspecto a tu sitio web.

Que tus imágenes se vean siempre al completoEvita que se te corten las fotografías añadiendo el código img (width:100%;) en tu css. De esta forma le estás indicando al dispositivo que recalcule la altura que debe darle a la imagen para que se vea su ancho al cien por cien.

Todo bajo una misma URLOlvídate de los subdominios del tipo www.misitio.com/movil, ya que un mismo archivo index.html en la carpeta raíz servirá para todos los dispositivos (si haces correctamente el diseño adaptativo). Ya conoces la ventaja: cuantos menos subdominios, más rápida será la carga de la página.

Aprovecha los soportes: sé imaginativoNo es lo mismo acceder a una web desde un ordenador de mesa que desde un iPad o un teléfono móvil. Con el primero, navegarás de forma reposada y calmada. Con los últimos, lo harás en horas muertas y cerrarás la ventana tan pronto te aburras. Aprovecha estas condiciones para entretener al usuario y hacer que se divierta en esos pocos minutos que te va a dedicar. Tal vez cuando llegue a casa decida volver a visitarte de forma más relajada.

Inspírate en las publicaciones digitalesTe preguntarás el por qué de este consejo. Muy fácil: las revistas digitales (buenas) saben aprovechar el soporte y su diseño es muy inteligente. Inspírate en ellas y haz un sitio web del que sea difícil irse.