<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1577323492557160&amp;ev=PageView&amp;noscript=1">

18 Ejemplos de las mejores páginas web para dispositivos móviles

diseno pagina web mobil

diseno pagina web mobil

Hoy más que nunca, las empresas centran su interés en crear experiencias placenteras en sus sitios web móviles.

Después de todo, Google ha estado favoreciendo en gran medida a los sitios web optimizados para dispositivos móviles desde las actualizaciones del algoritmo en abril de 2015 y nuevamente en abril de 2017. Se trata de algo fundamental si tenemos en cuenta que se han hecho más consultas de búsqueda en Google en teléfonos inteligentes que en equipos de escritorio y tabletas durante más de un año.

<< Descarga la guía gratis para generar ventas a través de mobile marketing >>

En adelante, Google solo continuará elevando el nivel de lo que considera compatible con dispositivos móviles (incluido el tiempo de carga de las páginas) y reflejará eso en las actualizaciones de su algoritmo. Por eso, si aún no te has centrado en mejorar tu experiencia en dispositivos móviles, es mejor que comiences ya mismo; de lo contrario, podrías poner en riesgo tu clasificación. 

Para ofrecerte la inspiración que necesitas para realizar un cambio en el diseño de tu sitio web móvil, te presentamos una lista de 18 empresas que lograron mejorar su experiencia web móvil.

18 de los mejores ejemplos de diseño de sitios web móviles

1) Shutterfly

Shutterfly es un servicio en línea que permite a los usuarios crear álbumes de fotos, tarjetas y papeles personalizados, y mucho más. Dado que cada vez más usuarios toman fotos y luego acceden a ellas desde sus teléfonos inteligentes, Shutterfly reconoció la necesidad de crear una gran experiencia móvil para sus clientes, y lo hizo.

Shutterfly cumple dos objetivos clave en su sitio web móvil:

  • Es fácil para los usuarios encontrar información sobre sus ofertas.
  • Promociona esa información por medio de imágenes hermosas.

Al acceder al sitio móvil, verás que los elementos del menú han sido mejorados y aparecen en la mitad inferior de la pantalla en forma de botones grandes. Esto hace que sea fácil para los usuarios seleccionar rápidamente la opción que les interesa conocer más.

sitio-móvil-shutterfly-1.png

Cuando los usuarios hacen clic en una de estas opciones, se encuentran con fotos de gran tamaño que muestran lo que puedes hacer con Shutterfly para ofrecer una búsqueda sencilla.

sitio-móvil-shutterfly-2.png

2) Google Maps

Todos tenemos una aplicación de mapas o indicaciones favorita. La mía es Google Maps, y la uso cuando camino, conduzco, pedaleo o viajo en transporte público. Lo especial de su sitio web móvil es que es prácticamente igual a la app móvil descargable.

Las capturas de pantalla a continuación fueron tomadas del sitio web móvil, pero si estás familiarizado con la aplicación, notarás que se muestran exactamente iguales. No solo su apariencia es idéntica, sino que además el sitio web móvil tiene la velocidad y la funcionalidad de la aplicación.

sitio-móvil-google-maps-1.png

sitio-móvil-google-maps-2.png

3) Typeform

Typeform es una empresa de tecnología con sede en Barcelona que tiene una misión simple: “elaborar formularios asombrosos”. Su sitio web para equipos de escritorio tiene un hermoso diseño con texto conciso, videos en alta definición, animaciones relevantes y otros componentes de diseño más complejos.

Sin embargo, para los usuarios móviles, reconocieron que los componentes de diseño complejos como los videos y las animaciones podrían afectar significativamente el tiempo de carga de la página, entre otras cosas. Por ese motivo, eliminaron varios de ellos, con lo cual el sitio se muestra más organizado y se simplificó la experiencia móvil general. El sitio web móvil es una versión más simple del sitio web de escritorio pero sigue teniendo un hermoso diseño.

sitio-móvil-typeform-1.png

Observa el tamaño de los botones en los menús; son ideales para tocar con el dedo en una pantalla móvil.

sitio-móvil-typeform-2.png

4) Etsy

Etsy es un sitio web de comercio electrónico en el que los usuarios pueden comprar y vender productos clásicos o fabricados a mano. La mayoría de los compradores que visitan el sitio web de Etsy hacen una de dos cosas: buscan un producto específico o miran productos en categorías que les interesan.

El sitio web móvil satisface a ambos tipos de visitantes desde el comienzo. Cuando visitas su sitio web móvil por primera vez, encuentras una opción que te permite buscar productos específicos, tiendas o categorías.

sitio-móvil-etsy-1.png

Inmediatamente debajo de la barra de búsqueda, hay imágenes en miniatura de elementos que son tendencia que muestran los artículos más populares que puedes comprar en Etsy. Los usuarios móviles pueden ver estos elementos en un formato de collage, y las imágenes son lo suficientemente grandes como para tocarlas fácilmente.

sitio-móvil-etsy-2.png

5) Adrian Zumbrunnen

Este es el sitio web personal de Adrian Zumbrunnen, un diseñador de experiencia del usuario, escritor y orador. Cuando visites su sitio web, notarás al instante algo único: es un sitio web conversacional.

Se muestra prácticamente como una conversación por mensaje de texto que normalmente tendrías en tu teléfono, incluidos los puntos suspensivos que muestran que el autor está “escribiendo”. Los usuarios tienen dos opciones de respuestas al final de cada intercambio, por lo que es una experiencia del tipo “elige tu propia aventura”.

Si bien las experiencias móvil y de escritorio son muy similares, el sitio web de escritorio parece haber sido diseñado principalmente para dispositivos móviles, algo que es probable que ocurra en el futuro.

adrian-zumbrunnen.gif

Si prefieres no involucrarte en esta especie de conversación, puedes simplemente desplazarte hacia abajo para ver más información.

sitio-móvil-zumbrunnen.jpg

6) Elf on the Shelf

En términos relativos, Elf on the Shelf es una tradición navideña reciente basada en un libro para niños. Por si no sabes de qué se trata, esta es la premisa básica: el libro cuenta la historia de los duendes exploradores de Santa Claus, que son enviados por Santa a las casas de los niños en todo el mundo para vigilar su conducta y luego informarla a Santa.

Además del libro, los padres pueden comprar un muñeco de duende, que colocarán secretamente en una parte de la casa donde los niños puedan verlo. Todas las noches hasta el día de Navidad, los padres mueven el duende a un lugar diferente de la casa para “demostrar” a sus hijos que los duendes son reales y siempre los están vigilando.

Cuando entras por primera vez en el sitio web de Elf on the Shelf, ves que hay muchos tipos de productos que puedes comprar. Pero en lugar de obligar a los usuarios a desplazarse por una larga lista de texto, los diseñadores web habilitaron una opción para los usuarios simplemente desplacen la pantalla hacia la izquierda o la derecha para ver todas las opciones, ideal para los visitantes que buscan productos en el sitio web.

sitio-móvil-elf-on-shelf.png

7) BuzzFeed

BuzzFeed es una empresa de noticias conocida por su contenido viral y sus cuestionarios populares. También es una de mis fuentes de entretenimiento preferidas cuando viajo hacia y desde el trabajo.

¿Y cómo crees que accedo a BuzzFeed mientras viajo? ¡Adivinaste! En mi teléfono. BuzzFeed sabe que muchos de sus visitantes acceden al sitio desde un dispositivo móvil, por lo que se ha dedicado a crear una experiencia fluida para sus lectores itinerantes.

Cuando accedes al sitio web móvil de BuzzFeed, lo primero que ves son algunos de sus artículos más populares en un formato simple, similar a un collage, con imágenes grandes y fáciles de tocar.

sitio-móvil-buzzfeed-1.png

Para los usuarios interesados en categorías específicas, hay un menú en la esquina superior izquierda de la pantalla en el que se enumeran las distintas categorías de publicaciones.

sitio-móvil-buzzfeed-2.png

8) Evernote

Evernote es una aplicación que te permite almacenar notas, imágenes y artículos web, y luego acceder a ellos desde todos tus dispositivos. Dado que los usuarios suelen descargar la aplicación o acceder al sitio web en múltiples dispositivos, incluidos equipos de escritorio, teléfonos inteligentes y tabletas, es esencial que Evernote brinde una experiencia móvil eficaz.

Si observas la página de inicio de Evernote en tu equipo de escritorio, verás que su diseño es muy organizado. Las declaraciones de valores son breves y concisas, y las imágenes contribuyen al posicionamiento, pero no desorganizan la página. Cuando observas su sitio web móvil, ves que han mantenido intacto este diseño y estilo. Su sitio web móvil es prolijo, simple y no desvía la atención del valor de la aplicación.

sitio-móvil-evernote-1.png

Además, tiene botones de llamada a la acción, que son geniales para los usuarios móviles.

sitio-móvil-evernote-2.png

9) Huffington Post

Huffington Post es una conocida fuente de noticias que informa acerca de todo, desde política hasta eventos actuales, entretenimiento y tecnología. Lo que hace que su sitio web móvil destaque es que en realidad altera levemente los títulos para los usuarios móviles, de modo que su contenido pueda leerse más fácilmente.

Si comparas los sitios web móvil y de escritorio, verás que el sitio web móvil tiene un menor número de palabras en su página de inicio. Los títulos son más cortos y mucho más fáciles de leer, ideal para aquellos usuarios que echan un vistazo rápido o leen en una pantalla pequeña.

sitio-móvil-huffington-post-1.png

Al igual que en BuzzFeed, encontrarás un menú en la esquina superior izquierda de la pantalla con todas las categorías de publicación en las que puedes hacer clic.

sitio-móvil-huffington-post-2.png

10) Express

Express es una tienda de ropa para mujeres y hombres jóvenes. Dado que su público a menudo accede al sitio web para buscar prendas, es importante que este incluya imágenes grandes y claras, especialmente en los dispositivos móviles, donde los usuarios deberán tocar los artículos en la pantalla y hacer clic para obtener la información de compra.

Express lleva la experiencia móvil un paso más allá que la mayoría de los sitios de venta minorista en línea. Si deslizas la pantalla de izquierda a derecha sobre la imagen de una prenda, dicha imagen cambiará para que puedas ver la prenda desde una perspectiva distinta. En otras palabras, los usuarios no tienen que cargar otra página para ver múltiples imágenes del mismo artículo.

Observa la ilustración de la derecha en las siguientes dos imágenes para ver cómo cambia cuando te deslizas hacia un lado:

sitio-móvil-express-1.png

sitio-móvil-express-2.png

11) Nationwide Insurance

Nationwide Insurance brinda servicios financieros y de seguros. Probablemente pienses que una empresa financiera tendrá un sitio web complicado; sin embargo, en dispositivos móviles, Nationwide Insurance se identifica con la experiencia de usuario simple.

Cuando accedes a su sitio móvil, puedes obtener un presupuesto de seguro automático de inmediato ingresando tu código postal; o bien, puedes “Encontrar a un agente” para obtener más información sobre sus servicios. Además de iniciar sesión o registrar una cuenta, eso es todo lo que ofrece la página de inicio.

Si bien esto hace que los usuarios tengan opciones limitadas, contribuye a una experiencia mucho más sencilla para los visitantes que usan pantallas pequeñas. Se trata de una excelente técnica para conducir a los clientes potenciales en la dirección correcta.

sitio-móvil-nationwide.png

12) Squaredot

Squaredot es una agencia partner de HubSpot que ayuda a los profesionales del marketing a crear estrategias de inbound marketing. Su sitio web móvil es colorido, simple y de fácil navegación. Sin embargo, lo que más llama la atención es cómo adaptaron su blog para los usuarios móviles. Observa la captura de pantalla a continuación, que muestra un artículo de una lista numerosa. Cada artículo ocupa todo el ancho de la pantalla, por lo que las imágenes y los textos son grandes y atractivos, y fáciles de visualizar.

sitio-móvil-squaredot-1.png

También nos gusta cómo optimizaron sus formularios en línea para dispositivos móviles. Observa el tamaño del texto y los campos del formulario en la siguiente llamada a la acción (CTA) de suscripción; esto hace que sea más fácil para los usuarios completarlo en sus dispositivos móviles en lugar de tener que pellizcar y agrandar la pantalla.

sitio-móvil-squaredot-2.png

13) Zappos

Zappos es un proveedor en línea de ropa y calzado conocido por su maravilloso servicio al cliente. Su prioridad en los dispositivos móviles es ayudar a los usuarios a encontrar fácilmente los artículos que buscan en su sitio web; por eso, colocaron una gran barra de búsqueda en las partes superior e inferior del sitio web móvil para facilitar esta tarea.

Así se muestra la parte superior del sitio móvil:

sitio-móvil-zappos-1.png

Y así se muestra la parte inferior de la página (que cuenta con un grato cierre):

sitio-móvil-zappos-2-1.png

14) ABC

ABC es una empresa de televisión conocida por programas populares como “The Bachelorette”, “BattleBots” y “General Hospital”. Los usuarios que visitan el sitio web de escritorio de ABC se encuentran con muchísimas opciones: ver la programación televisiva, conocer a los ganadores del Oscar, ver algunos de sus programas de televisión favoritos o incluso consultar noticias de entretenimiento relacionadas con dichos programas.

Pero ABC sabe que la experiencia móvil debe estar simplificada. Cuando visitas el sitio web de ABC en un dispositivo móvil, no encuentras tantas opciones desde el principio. En cambio, tienes una sola opción: desplazarte por imágenes grandes de todos sus programas televisivos. Los usuarios pueden echar un vistazo a estas opciones y hacer clic en el programa que quieran.

sitio-móvil-abc.jpg

15) Lean Labs

Lean Labs es una agencia partner de HubSpot que crea soluciones web atractivas, adaptables y de alta conversión. También aparecieron en la exitosa serie de TV de ABC Shark Tank. Sus creadores hacen un excelente trabajo a la hora de proporcionar una experiencia fluida para sus usuarios móviles, especialmente en relación con sus técnicas de diseño y el énfasis que ponen en sus valores principales, que los visitantes pueden notar en segundos una vez que acceden a su sitio móvil.

Observa cómo su sitio web móvil usa la escala y el color para distinguir ciertos elementos de su página:

sitio-móvil-lean-labs-1.png

Y, como ya mencioné, sus valores principales (estrategias de crecimiento, diseño web adaptable e inbound marketing) son claramente visibles para los usuarios móviles que se desplazan por la página de inicio y se encuentran con íconos relevantes.

sitio-móvil-lean-labs-2.png

16) SAP

SAP es una empresa de software empresarial que gestiona operaciones comerciales y relaciones con clientes. Mejora la experiencia móvil al condensar la información.

Más específicamente, combina algunas de sus llamadas a la acción en diapositivas, mientras que el sitio web de escritorio tiene estas CTA en posición horizontal. Esto simplifica la interfaz para que los usuarios móviles no se saturen de información de una vez, y también garantiza que ninguna de las CTA sea demasiado pequeña para leer.

sitio-móvil-SAP.jpg

17) KISSmetrics

KISSmetrics proporciona software de análisis para empresas. En su página de inicio, hay una gran cantidad de información sobre el software junto con un testimonio.

Pero el sitio móvil es diferente: en los dispositivos móviles, la información en el sitio se muestra en una lista con módulos alternativos oscuros y claros. Esto hace que sea fácil para los usuarios echar un vistazo a la página sin perderse en el texto.

sitio-móvil-kissmetrics-2.png

Además, el texto y los campos en sus formularios son grandes y fáciles de leer:

kissmetrics

18) idig Marketing

idig Marketing es un proveedor de desarrollo y comunicaciones. Su sitio web móvil tiene un diseño similar al del sitio web de escritorio, pero llama la atención particularmente cómo incorporaron los símbolos de corazones interactivos en sus publicaciones de blogs para que los usuarios pudieran dar a “me gusta” en sus publicaciones.

Esto imita el símbolo de corazón en Instagram y Twitter, que los usuarios móviles familiarizados con esas plataformas reconocen fácilmente.

sitio-móvil-idig-marketing-2.jpg

Estos son algunos de nuestros favoritos. ¿Qué otros sitios web móviles han llamado tu atención? ¡Cuéntanos en los comentarios!

Nota del editor: este artículo se publicó originalmente en marzo de 2015 y se actualizó con fines de precisión y exhaustividad.

Asesoría Inbound gratis

Enjoy this article? Don't forget to share.