El diseño adaptativo (responsive design)

El diseño adaptativo

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


3 comentarios, deja el tuyo

Deja tu comentario

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

*

*

  1. Responsable de los datos: Miguel Ángel Gatón
  2. Finalidad de los datos: Controlar el SPAM, gestión de comentarios.
  3. Legitimación: Tu consentimiento
  4. Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  5. Almacenamiento de los datos: Base de datos alojada en Occentus Networks (UE)
  6. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

  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.    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 ;)