Diseño de páginas web responsive o adaptativo

El diseño de páginas web responsive, adaptable o adaptativo es el método más eficaz para asegurarte de que tu página va a verse en todos los dispositivos sin necesidad de hacer zoom. Funciona en todo tipo de pantallas y tu página web se verá perfecta desde en una smart TV hasta en un smart phone.

Este método de creación de páginas web juega con la posición y el tamaño de los diferentes elementos de la página para adaptarlos a la resolución de pantalla del usuario. Combinando técnicas de HTML 5 los elementos se muestran en distintos sitios o de distinta manera dependiendo de la resolución de la pantalla del usuario.

En Mitzi Web Almería estamos altamente comprometidos con la experiencia final de los usuarios que visualizan nuestras páginas por eso hemos adoptado este método para alguna de nuestras páginas.

Ejemplos de diseño web adaptativo o responsive desing.

Veamos por ejemplo como se ve nuestra página en diferentes dispositivos.

  • Vista en ordenador de sobremesa con monitor de 24 pulgadas

    Vista ordenador de sobremesa

    El tamaño de la imagen de fondo, background, se adapta a al tamaño de la pantalla.

  • Vista en ordenador portátil de 17 pulgadas

    Vista portátil

    El tamaño del contenido no se ha modificado pero si el tamaño de la fonto de fondo.

  • Vista en iPad en modo horizontal

    Vista iPad en modo horizontal

    El contenido se ha modificado, el menú se ha estrechado, para caber perfectamente en una pantalla de ipad

  • Vista en iPad en modo vertical

    Vista  iPad en modo vertical

    El menú ha cambiado su forma y el contenido se ha movido de lugar para adaptarse a la vista en tablet vertical.

  • Vista en iPhone 5 en modo horizontal

    Vista  iPhone 5 en modo horizontal

    Se han estrechado los márgenes para que el contenido sea más fácil de leer en un iphone o smart phone en modo horizontal.

  • Vista en iPhone 5 en modo vertical

    Vista iPhone 5 en modo vertical

    En un iphone o smart phone en modo vertical el manú cambia a menú para móviles.

  • Vista teléfono Blackberry

    Vista  teléfono Blackberry

    Vista en un teléfono con pantalla muy pequeña.

Como se puede apreciar la pantalla que se muestra al usuario es siempre distinta dependiendo de su dispositivo, facilitando la navegación y la lectura del contenido de la página.

Ventajas del diseño web adaptativo o responsive desing.

  • Con una sola versión de la página se cubren todas las resoluciones de pantalla, no es necesario crear subdominios o carpetas del tipo www.miweb.com/movil/ o www.miweb.mobi.

  • De esta forma se reducen los costes de creación y mantenimiento, pues se evita tener que desarrollar aplicaciones específicas para versiones móviles, por ejemplo, una aplicación específica para iPhone, otra para móviles Android, etc.

  • Desde el punto de vista SEO es más eficiente, el motor de búsqueda sólo almacena una página web y no hay conflicto de duplicidad de contenido. En las redes sociales pasa lo mismo, si un usuario de móvil le da al Me gusta de Facebook de tu página se guardara la misma página que si lo hiciera un usuario de pc.

Deja un comentario

Kit digital