Entrada: Como crear una web que se adapte a cualquier dispositivo

Como crear una web que se adapte a cualquier dispositivo

Como bien sabemos, la informática es un ecosistema en constante evolución. Una evolución que mejora nuestra calidad de vida desarrollando nuevos dispositivos y mejorando los ya existentes.

Tal vez el mejor ejemplo de ello sean los llamados “Smartphones” o “Teléfonos inteligentes”, los cuales ejecutan prácticamente cualquier tarea que realice un PC común, junto con las “Tablets”, que reducen considerablemente el tamaño de un PC pero incorporan una pantalla de más amplia resolución que la de un Smartphone.dispositivosEsta poderosa revolución tecnológica obliga a los programadores a crear nuevos lenguajes y mejoras de los ya existentes que permitan explotar las posibilidades que los dispositivos de nuevas generaciones nos brindan.

Hoy en día una gran cantidad de visitantes web usan su Smartphone o Tablet para acceder a nuestra web, lo que hasta hace poco podía suponernos un problema: la web se veía en una pantalla de baja resolución pero en su tamaño original, por lo que las barras de desplazamiento (en caso de aparecer) se extendían de forma que hacían que la navegación por internet fuese prácticamente inviable. Puesto que ya no nos bastaba con la maquetación líquida, la solución propuesta fue desarrollar varios sitios web de tal manera que se visualizaría un sitio diferente en función del dispositivo desde el que se accediese.

Como una alternativa más sencilla nació el Diseño Web Adaptativo, también conocido como “Responsive Web Design” (o simplemente Responsive Design). Consiste básicamente en un conjunto de reglas que permiten adaptar la visualización de una web al dispositivo en la que se muestre mediante el uso de las nuevas reglas y propiedades de CSS 3, entre ellas las llamadas “media-queries” y los “micro formatos”. Fue el diseñador y desarrollador web norteamericano Ethan Marcotte el autor de este trabajo.

Esta técnica ofrece multitud de ventajas, entre ellas que desaparecen las preocupaciones por las redirecciones y las URL (ya que todo queda en una misma pantalla), lo que hace que se puedan añadir multitud de efectos visuales que hagan más cómoda la navegación desde un Smartphone, y en consecuencia vendamos mejor nuestro producto, ampliemos nuestra cartera de clientes y reforcemos la relación con los que ya forman parte de ella.

Por otro lado, los nuevos algoritmos de posicionamiento son amigos del Diseño Adaptativo y están actualizados con respecto a las nuevas técnicas de programación. Uno de los principales motivos  que lo impulsa es el desarrollo de una estructura web ordenada y accesible, y no una caja negra (como es el caso de Flash).seoEl único inconveniente al que podemos referirnos es que el tiempo de carga puede aumentar en ciertos casos, dado que las imágenes son cargadas y posteriormente redimensionadas, lo que obliga a descargarlas a tamaño real.

4 Comentarios

  1. Paz

    ¡Muy interesante y bien escrito, no dejas de sorprenderme!

  2. Valen85

    Muy bien! Claro y detallado!

  3. julioma

    me puedes mandar un ejemplo

    • MedusaPro

      Buenas Julioma,
      si te refieres a un ejemplo de diseño adaptativo esta misma web es un buen ejemplo. Si eres ya diseñador web sabrás que puedes ver la hoja de estilos y el código generado desde cualquier navegador (clic derecho, ver código fuente). En caso contrario te recomiendo que comiences por algo un poco más sencillo como HTML y CSS básicos.
      Saludos

Deja un comentario

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