10 ejemplos de diseño web responsive

Ahora más que nunca las empresas necesitan tener páginas web que ofrezcan una buena experiencia a los usuarios móviles.

Desde que Google actualizó su algoritmo en abril de 2015, y de nuevo en marzo de 2016, ha favorecido en gran medida a los sitios webs optimizados para dispositivos móviles. Y no debes pasar este dato por alto, ya que las búsquedas desde smartphones y tablets han superado ya a las de los equipos de escritorio, por lo que si no cuentas con un diseño web responsive estarás perdiendo una gran cantidad de potenciales clientes.

Se espera que de cara al futuro Google siga actualizando su algoritmo para favorecer a las webs que se consideren mobile-friendly con una posición más alta en su ranking de búsqueda. Así que si no te has centrado todavía en la mejora de la experiencia móvil de tu web, ahora es un buen momento para crear un diseño web responsive.

Para ayudarte con esta tarea te presentamos 10 ejemplos de diseño web para móviles que hemos encontrado en el blog de Hubspot.

10 ejemplos de diseño web responsive

1. Shutterfly

Shutterfly es un servicio online que permite a los usuarios crear álbumes de fotos, tarjetas personalizadas, artículos de papelería, etc. Debido a que cada vez más gente utiliza únicamente la cámara de su teléfono móvil, Shutterfly no tuvo más remedio que rediseñar su web par ofrecer una buena experiencia móvil a sus clientes.

El menú principal de esta web cuenta con grandes botones para que los usuarios puedan seleccionar rápidamente la opción que más les interesa. Una vez que hacen clic en alguna de las opciones, pueden ver una galería de imágenes de ejemplos con todas las cosas que pueden crear en la web.

2. Google Maps

Puedes utilizar Google Maps mientras caminas, mientras conduces, mientras andas en bicicleta o vas en transporte público. Lo que hace especial a esta web para móviles es que es prácticamente idéntica a su App móvil. Y no sólo se trata de la apariencia y el diseño, sino que cuentan con la misma velocidad de carga y funcionalidades.

3. Typeform

Typeform es una empresa con una simple misión: “crear formularios impresionantes.” Su sitio web de escritorio está muy bien diseñado, ofrece vídeos de alta definición, animaciones y otros componentes de diseño complejos.

Pero para los usuarios móviles los vídeo y animaciones podrían afectar significativamente el tiempo de carga de la página, entre otras dificultades. Es por eso que han hecho una versión móvil de la web mucho más simple, pero igual de bien diseñada.

4. Etsy

Etsy es un sitio web de comercio electrónico donde la gente puede comprar y vender artículos hechos a mano. La mayoría de los visitantes de esta web buscan un artículo específico o quieren navegar por las diferentes categorías de productos. La página web optimizada para móviles de Etsy permite la búsqueda por elementos específicos, tiendas, o categorías.

Debajo de la barra de búsqueda se presentan imágenes en miniatura de los artículos más populares que se pueden comprar en esta página web. Los usuarios móviles pueden ver estos artículos de moda en formato collage, con imágenes lo suficientemente grandes para poder clickar en ellos con el dedo.

5. BuzzFeed

BuzzFeed es una empresa de noticias conocida por su contenido viral. BuzzFeed sabe que muchos de sus visitantes acceden a su web a través de su smartphone, por lo que han creado una experiencia de usuario agradable para este tipo de lectores.

Cuando llegas al sitio web móvil de BuzzFeed, lo primero que ves es que algunas de sus piezas de contenido más populares se muestran en un formato simple con imágenes de gran tamaño para que puedas seleccionarlos fácilmente con el dedo.

Para los usuarios interesados en categorías específicas hay un menú en la esquina superior izquierda de la pantalla que muestra todas las categorías de los artículos.

6. Evernote

Evernote es una aplicación que te permite almacenar notas, imágenes y artículos para luego acceder a ellos a través de todos tus dispositivos. Dado que los usuarios tienden a descargarse la aplicación o a abrir la página web desde múltiples dispositivos, es esencial que Evernote ofrezca una buena experiencia a los usuarios móviles.

La página web para ordenadores de sobremesa de Evernote tiene un diseño muy limpio y cuidado que ha seguido manteniendo en su sitio web para móviles. Además cuenta con grandes botones para crear una experiencia de usuario sencilla.

7. Huffington Post

El Huffington Post es un medio de comunicación muy conocido que informa sobre política, eventos, tecnología, negocios, etc. Lo que hace único a su sitio web responsive es que altera ligeramente los titulares para que el contenido pueda ser analizado con más facilidad.

Si se compara la web de escritorio frente a la móvil, se puede observar que en la segunda los titulares son más cortos y directos, perfectos para captar la atención de los lectores en la pequeña pantalla.

Al igual que BuzzFeed, cuenta con un menú en la esquina superior izquierda de la pantalla para filtrar los artículos por categorías.

8. Express

Express es una tienda de ropa online para hombres y mujeres jóvenes. Debido a que su público a menudo visita su web desde un dispositivo móvil, han incluido grandes imágenes de sus artículos para ofrecer una experiencia de compra mucho más cómoda.

Express llevan su experiencia móvil un paso más allá que la mayoría de las tiendas online. Si deslizas el dedo de izquierda a derecha en una imagen que muestra una pieza de ropa, la imagen cambiará para ver la prenda desde un ángulo diferente. En otras palabras, los usuarios no tienen que cargar otra página para ver múltiples imágenes de la misma prenda de vestir.

9. Zappos

Zappos es una tienda online de ropa y zapatos conocida por su buen servicio de atención al cliente. Su principal prioridad en su sitio web diseñado para móviles es ayudar a que los usuarios puedan encontrar los artículos que desean comprar, por lo que han puesto una gran barra de búsqueda en la parte superior e inferior de la pantalla.

10. ABC

ABC es una empresa de radio y televisión conocida por espectáculos populares como “The Bachelorette”, “BattleBots,” y “General Hospital”. Los usuarios que visitan su sitio web de escritorio pueden navegar por un montón de opciones: consultar el horario de la televisión, echar un vistazo a los ganadores de los Oscar, o ver algunos de sus programas de televisión favoritos.

Pero ABC sabe que la experiencia móvil debe simplificarse. En su web optimizada para dispositivos móviles sólo ofrece una opción: desplazarse por las imágenes de gran tamaño que representan a los programas de televisión de la cadena.

–

¿Quieres una web responsive optimizada para todo tipo de dispositivos?

¡Publica tu proyecto ahora y hazlo realidad!

Designed by Freepik