Tag : diseño adaptativo

Image Post

5 buenas prácticas dentro del Diseño Multipantalla (o responsivo)

marzo 17, 2014

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.

Screen Shot 2014-05-04 at 12.41.02

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.

 

Image Post

Mobile First Design. Pensemos de pantalla Smartphone a PC y no al revés

octubre 11, 2013

Hace ya tiempo que estamos en la era digital… cualquier ser humano que se precie en la actualidad posee un implante, esa extensión sin la cual no podemos vivir, no existimos.

Gracias a esa extensión de nuestro cuerpo, nos podemos comunicar, socializar, nos guía cuando estamos perdidos y hace memoria con tan solo apretar un botón….sin ese implante no somos nadie… efectivamente, estamos hablando del móvil.
Con esta verdad absoluta, como profesionales de la web que somos, si queremos llegar a ser alguien en ese universo de posibilidades empresariales que es internet, no podemos hacer otra cosa que tener en primerísima posición el móvil.

No nos vale que nuestro site, en el que hemos, estamos y vamos a invertir muchísimo tiempo y dinero, se visualice perfectamente a través de la pantalla de un portátil, ni mucho menos que se vea en ordenadores de sobremesa (esa reliquias desde la primera década del siglo XXI ya casi nadie las usa), ahora hay que programar con la táctica “Mobile First Design”.

Todo debe ser “responsive”, apoyarnos en el  diseño adaptativo, con estructuras e imágenes fluidas, valiéndonos de HTML5, Jquery  y las ya perpetuas hojas de estilo CSS,  que consigue adaptar el sitio web al entorno del usuario.
Nuestro primer error es, por deformación profesional, pensar en un 1024×768 (resolución media de una pantalla de portátil, aunque ya estaríamos hablando de 1280… pero en fin), y a partir de ahí intentar meter con calzador los contenidos en los diferentes dispositivos por pequeños que sean…. error.

Hay que diseñar la web primero para que sea perfectamente funcional, usable y atractiva en un Smartphone de 4 o 5 pulgadas y a partir de ahí ampliar el espacio y reubicar los elementos funcionales y de diseño para poderse ver en ámbitos más grandes como tablets (en segundo e importante lugar), portátiles y monitores.

Estrategia de diseño Mobile First frente a Mobile Last, deformación profesional.

Estrategia de diseño Mobile First frente a Mobile Last, deformación profesional.

Los beneficios de este diseño web adaptativo son brutales:

- Con una sola versión en HTML y CSS se cubren todas las resoluciones de pantalla, PCs, tabletas, teléfonos móviles y esto hace que el impacto en el usuario sea mucho mayor y de mejor calidad.

- Se reducen los costes brutalmente, nada de realizar mantenimientos especializados o versiones diferentes.

- La usabilidad es infinitamente mayor, si desde cualquier teléfono puedo USAR tu web, tendré muchísimas más posibilidades de ser usuario y tú muchas más posibilidades de que convierta.

- En cuanto a la optimización de motores de búsqueda, también se ve notoriamente  mejorada con tan sólo una URL en los resultados de búsqueda, sin redirecciones que a veces fallan etc.