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

  1. 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.
  2. 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.
  3. 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:

    <style>

    @import url (tiny.css) (min-width:300px);

    @import url (small.css) (min-width:600px);

    @import url (big.css) (min-width:900px);

    </style>

  4. Las resoluciones más usadas320px / 480px / 720px / 768px / 900px / 1024px
  5. 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%
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.

Más información – Las revistas digitales

Fuente – Splio, 960.gs, columnal

¿Necesitas contratar un hosting para tu web?
En SiteGround tienes disponible una amplia oferta de hostings para todo tipo de bolsillos y necesidades. Encuentra el hosting que estás buscando al mejor precio, con las últimas tecnologías en velocidad y seguridad web y soporte en español 24h:
HostingHosting WordPress

Categorías

Diseño Web, Trucos

Lúa Louro

"Si hoy en día se habla de nativos digitales para referirse a aquellos que desde la infancia tienen contacto y aprenden a controlar dispositivos... Ver perfil ›

5 comentarios

  1.   Dídac Rios dijo

    Hay cosas que no estoy muy de acuerdo.
    En el punto 5 … como que 200px = 15,38% y las siguientes … no se puede hacer esta comparativa de referencia sin ninguna medida padre el tamaño por pixéls no es una medida relativa como los porcentages!

    Especificar las imagenes con width: 100% mal, no creo que deba ser una recomendacion. las imagenes mejor definirlas con su width i height, asi el servidor tarda menos en procesar la informacion (no tiene que calcular cual es si tamaño) y mejoramos la velocidad de carga de la pagina (cosa muy importante en el diseño web adaptativo o responsive).

    Yo incluiria ya, aun que es una tocada de narices … las imagenes para pantallas retina. Si queremos hacer diseño web responsive, es obligatorio hacer uso de imagenes para retina display, ya que un alto % de las vistias de mobile y tablet, usan estas pantallas. Por lo que no tiene sentido poner los esfuerzos en un diseño para ellos a medio gas.

    Bien por el resto

    1.    Lúa Louro dijo

      ¡Hola Dídac! Antes de nada, gracias por leer el artículo y dar tu opinión sobre el mismo.

      — En cuanto al punto 5: lo entendemos como una guía orientativa, un valor de referencia. Si tienes un elemento en tu pantalla de 200px, puedes trasladar este valor como porcentaje asignándole un 15’38% de la pantalla. Estos datos no los hemos inventado nosotros, sino que los hemos sacado de la fuente que indicamos (http://www.splio.com/responsive).

      — Lo de las imágenes, más de lo mismo. Es una recomendación de la fuente que te he comentado anteriormente. Si especificamos widht y height, lo tendremos que ajustar para cada tipo de pantalla en un css independiente para cada uno (para móviles, tablets y ordenadores, por ejemplo). La vía que nosotros comentamos es otra alternativa a la que tú recomiendas.

      — Lo que comentas de imágenes para pantallas retina: muchas gracias por la puntualización.

      Lo dicho, gracias por leernos y aportar tu granito de arena ;)

      1.    Dídac Rios dijo

        En lo del punto 5, ellos te ponen en contexto y te hablan de un layout total de 1300px de 3 columnas, una de 200, 300 y 1000.

        Si lo pasas a porcentajes, en su caso son como dices, 15,38% ((200 * 100) / 1300) (decimal debajo, sistema internacional :P)

        Pero si hablamos de un layout de 500px y tenemos 3 columnas, una de 200, otra de 200 y otra de 100px, los porcenatjes ya no son los mismos, en este caso 200px = 40% ((200 * 100) / 500)

        Serian: 200px = 40% y 100px = 10%

        Vamos, como comentaba no son una referencia lo que indicais, son solo una referencia sobre un layout de 1300px.

        saludos

        1.    Lúa Louro dijo

          Vaya fallo, ¡tienes toda la razón del mundo! Gracias de nuevo ;)

  2.   Gabriel dijo

    Hola! Si buscan hacer su sitio web movil rapido y bueno les recomiendo este sitio http://www.gamnet.net

    Espero les sirva.
    Saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *