Considerando que los iíndices de utilización de móvil están aumentando, se hace crucial que tu página web esté lista para aceptar visitantes que vengan de teléfonos, tabletas y ordenadores. Tu web adaptada a diversos tamaños, eso es todo.
Aquí es donde el diseño multipantalla o responsivo entra en acción , pues al tener optimizada nuestra página podemos incrementar el tráfico y las conversiones. Sin embargo, con el diseño responsivo, como con todos los detalles de tu página o tienda online, debes de estar seguro de seguir algunas prácticas que serán cruciales si quieres que el diseño funcione bien y provea de mucha flexibilidad como debe ser.
Los usuarios de móvil merecen la misma calidad y experiencia que los que entran por el ordenador
Uno de los principios a tener en cuenta cuando creamos un diseño multipantalla es que el browser y la experiencia misma sea igual o parecida para tabletas, ordenadores y móviles. Esto quiere decir que la apariencia y estructura visual (y contenido) no se pierda. Un usuario visitando tu página desde el ordenador debe de tener la misma experiencia que alguien que la ve desde una tableta.
La página de Euro Merchand, uno de nuestros clientes vista desde un ordenador y una tableta. La experiencia es la misma.
Esto implica flexibilizar todo y requiere que tus contenidos, imágenes y márgenes sean totalmente adaptables a varios tamaños. El resultado debe ser el de un sitio que convierta de manera natural.
Diseña tu sitio con la palabra multipantalla en mente
Cuando estés diseñando tu sitio con los layouts y códigos debes de entender que existen tamaños predeterminados para el diseño responsivo y otros que no. Se deben de tomar en cuenta los guidelines HTML5 y doctype. Debes de evitar cosas como divs complejos, elementos de Javascript o Flash que pueden complicar el diseño multipantalla.
Pon atención a la resolución
La resolución puede ser definida en breakingpoints, pero existen tamaños en los que debes centrarte. Estos son:
480px. Este es el tamaño de las pantallas más pequeñas de móviles antiguos.
768px. Es la medida ideal para smartphones y tabletas pequeñas.
Más de 768px. Esto aplica a todo lo que sean tabletas y ordenadores portátiles.
1024px. La resolución de las pantallas de ordenadores de escritorio.
Haz tu imagen flexible y manejable
Con un diseño simple puedes hacer tu imagen flexible en cuanto a pixeles y ángulos. Esto se puede lograr con una herramienta llamada Adaptive Images. Con esta herramienta logramos tener en cuenta siempre el tamaño promedio de las pantallas de móviles, y puede ser una buena apuesta para una página responsiva con tiempos de carga decentes.
Tira el contenido que no sea básico
Para lograr que tu sitio sea totalmente amigable debes de tener en cuenta que existen elementos que no fueron diseñados para pantallas pequeñas y que nunca funcionaran en un sitio responsivo. Elementos flash, cuadros que tardan en cargar, imágenes muy pesadas, etc. Si tienes alguno de estos elementos te sugerimos que te deshagas de ellos para mejorar la experiencia.
