Hoy en día el 40% del tráfico de internet es generado desde dispositivos móviles, de ahí la importancia de que nuestro sitio web se vea bien, sin necesidad de hacer zoom, en cualquier pantalla.
Porque no hay nada tan molesto como intentar leer una noticia con tu móvil, que la letra se vea demasiado pequeña, y al ampliar se descuadre todo, teniendo que desplazar la pantalla horizontalmente para seguir leyendo una línea. Para evitar esto hay dos soluciones: Hacer dos páginas web, una que se cargue cuando el usuario entre a través de un ordenador de mesa o portátil y otra versión de la misma página diseñada para cuando el usuario se conecte desde una tablet o smartphone. O bien hacer una sola pagina web con diseño responsive o adaptativo.
En Mitzi Web hemos apostado desde el principio por el diseño responsive o adaptable, convirtiéndonos en unos expertos en esta materia. Ya sea una página web en html, un blog o una tienda online, nuestro objetivo es que el usuario disfrute de la navegación en nuestra página y conseguir la mejor experiencia de navegación posible.
¿Qué es el diseño adaptativo o responsive?
El diseño adaptable de un diseño fluido que a medida que se reduce el tamaño de la pantalla el contenido se va reordenado para encajar en la nueva pantalla. A veces el contenido cambia de tamaño, a veces el contenido cambia de sitio, y a veces se muestra un contenido distinto dependiendo del dispositivo con el que se navegue.
Modificar el tamaño de los elementos:
Los elementos, imágenes, videos, secciones, párrafos, etc., no tienen un tamaño fijo en pixeles sino que tienen un tamaño proporcional al tamaño de la pantalla, un porcentaje del total del espacio. También es recomendable asignarles un tamaño máximo sino que queremos que en pantallas muy grandes se vean demasiado grandes. Por ejemplo una foto debería tener un tamaño máximo sino queremos que sobrepase el tamaño de la imagen original y pierda calidad.
Cambiar de sitio el contenido:
Los elementos deben ser flotantes y cuando la pantalla es demasiado pequeña para que no quepan en una línea, donde ya hay otros elementos, deben pasar a la siguiente línea. Eso se consigue configurado la propiedad de flotación de los elementos de la página web a la izquierda.
Mostrar u ocultar elementos dependiendo del tamaño de pantalla:
Lo más común es que la página web tenga un menú para ordenadores de sobremesa y tablets y otro distinto para móviles. Para ocultar el menú original en móviles y mostrar el menú de movil nos podemos ayudar de programación en Javascript o bien con la adición en la hoja de estilos de elementos tipo @media screen donde especificando un tamaño en pixeles podemos incluir reglas de estilos que sólo se aplicarán en los casos en que la pantalla sea menor que los pixeles indicados en la regla.
Google, SEO y diseño web adaptativo.
¿Y que dice google sobre el diseño adaptativo? A google le gusta el diseño responsive o adaptativo y lo recomienda para la creación de páginas web, podéis ver sus razones aqui: developers.google.com/webmasters/smartphone-sites/details
A grandes rasgos dice que es beneficioso porque:
- La misma url se mostrará en todos los dispositivos, mejorando la interactuación con las redes sociales. Tanto móviles como sobremesas enviarán me gustas a la misma url.
- No hay redirecciones de página, esto mejora el tiempo de carga y tanto para los usuarios como para las arañas de google la rapidez de una página es fundamental.
- Reduce el consumo de recursos tanto en nuestro servidor como en google. Al rastrear la página con un sólo user agent, google no tiene que enviar sus arañitas( user-agent) especializadas en dispositivos móviles para rastrear tu página una segunda vez.
Como vemos a google le gusta mucho el diseño adaptativo, y si le gusta a google quiere decir que es bueno para el SEO de tu página. Las arañas de google son limitadas y pasan cada cierto tiempo por tu página para rastrearla, si tu página es lenta utilizando redirecciones o bien tiene contenido duplicado, utilizando web para ordenador y web para móviles, google deberá pasar más tiempo rastreándola y no le gustará demasiado.
El diseño adaptativo es el futuro
Como hemos visto con el diseño adaptativo todo son ventajas, y te preguntarás ¿cuáles son las desventajas del diseño adaptativo? para ti, ¡ninguna!, la única desventaja es que requiere más trabajo de diseño y programación pero para ti, usuario o cliente final, esos inconvenientes son invisibles porque nosotros nos encargamos de todo. Aplicamos el diseño responsive en todo tipo de páginas web: html5, tiendas virtuales, wordpress, joomla y prestashop.
Hola, favor necesito saber como reconozco que una pagina no esta en html 5 responsive adaptativo?.
Hola Lorena,
Diferenciar una página web es muy fácil. Si cuando navegas por tu sitio, desde un teléfono, ves las líneas de texto, imágenes, y otros elementos web, sobresalen por el lado derecho o izquierdo, no es adaptativa. Tampoco no es adaptativa si al visitar tu sitio desde un teléfono lo ves pequeño y tienes que hacer zoom para ampliarlo, saliendo los elementos por los laterales.
Las características básicas de un sitio responsive o adaptativo son que al navegar por él desde un teléfono o tablet, todos los elementos se visualizan correctamente sin necesidad de zoom, ni sobresaliendo por izquierda ni derecha.