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

Ahora más que nunca, las empresas se están centrando en crear experiencias agradables en sitios web móviles.

Google ha favorecido en gran medida los sitios web optimizados para dispositivos móviles desde 2015 cuando actualizó su algoritmo de clasificación, luego comenzó a indexar sitios móviles en marzo de 2018 y ha realizado la indexación de dispositivos móviles primero desde 2019. Esto es crucial, ya que ha habido más consultas de búsqueda en dispositivos móviles. dispositivos que en el escritorio desde hace varios años.

En el futuro, Google solo continuará elevando el listón de lo que considera compatible con dispositivos móviles (incluido el tiempo de carga de la página) en sus actualizaciones de algoritmos. Por lo tanto, si no se ha centrado en mejorar su experiencia móvil, debe comenzar ahora o verá caer su clasificación de búsqueda.

Para ayudar a inspirar cualquier cambio de diseño de sitios web móviles que realice, aquí hay una lista de 21 empresas que realmente lograron su experiencia web móvil.

1. Shutterfly

Por qué funciona: El sitio web móvil de Shutterfly es fácilmente navegable, muy visual e intuitivo para nuevos visitantes y clientes experimentados.

Shutterfly es un servicio en línea que permite a los usuarios crear álbumes de fotos, tarjetas personalizadas, material de oficina y otros productos similares. Debido a que cada vez más personas toman fotos y luego acceden a ellas usando sus teléfonos inteligentes, Shutterfly reconoció la necesidad de crear una excelente experiencia móvil para sus clientes.

Shutterfly logra dos objetivos clave en su sitio web móvil. Primero, es fácil para los usuarios encontrar información sobre sus ofertas. En segundo lugar, esta información se complementa con bellas imágenes.

Cuando llegue al sitio móvil, verá la última promoción de Shutterfly al frente y al centro, así como un menú de navegación superior del tamaño de un dedo, ninguno de los cuales domina la experiencia del usuario.

Desplácese hacia abajo y verá botones grandes que facilitan a los usuarios seleccionar rápidamente en qué tipo de producto están interesados. Una vez que los usuarios hacen clic en una de esas opciones, son recibidos con fotos grandes que muestran lo que Shutterfly es capaz. de para navegar fácilmente.

2. Google Maps

Por qué funciona: El sitio web móvil de Google Maps ofrece la misma funcionalidad, imágenes y rendimiento que su contraparte de la aplicación móvil.

Todo el mundo tiene su aplicación de mapas o direcciones favorita. El mío es Google Maps, que utilizo tanto si estoy caminando, conduciendo, en bicicleta o tomando el transporte público. Lo que tiene de especial su sitio web móvil es que es prácticamente indistinguible de su aplicación móvil descargable.

Estas capturas de pantalla a continuación están tomadas de su sitio web móvil, pero si está familiarizado con la aplicación, notará que se ven exactamente lo mismo. No solo la apariencia es idéntica, sino que el sitio web móvil tiene la velocidad y la funcionalidad de la aplicación.

3. Typeform

Por qué funciona: Type form simplifica su sitio web móvil para mejorar los tiempos de carga y ofrecer una experiencia de usuario más sencilla.

Typeform es una empresa de tecnología con sede en Barcelona con una misión simple: «hacer que las formas sean increíbles». Su sitio web de escritorio está bellamente diseñado, saludando a los visitantes con una copia sucinta, animaciones relevantes y otros componentes de diseño complejos.

Pero para los usuarios de dispositivos móviles, Typeform reconoció que este diseño complejo podría afectar significativamente el tiempo de carga de la página, entre otras dificultades. Es por eso que en realidad eliminaron muchos de ellos, ordenando el sitio y simplificando la experiencia móvil general. El sitio móvil es una versión más simple del sitio web para computadoras de escritorio, y aún está bellamente diseñado.

Tome nota de los botones grandes en su página de menú, perfectos para tocar con el dedo en una pantalla móvil.

4. Etsy

Por qué funciona: Este sitio móvil incluye sus funciones más importantes (búsqueda en el sitio, categorías de artículos y productos de moda) en la página de inicio y, al mismo tiempo, evita el desorden.

Etsy es un sitio web de comercio electrónico donde las personas pueden comprar y vender artículos antiguos o hechos a mano. La mayoría de los compradores que visitan el sitio web de Etsy están allí para hacer una de estas dos cosas: o están buscando un artículo específico o están explorando artículos en categorías que les interesan.

El sitio web móvil atiende a ambos tipos de visitantes desde el principio. Cuando ingresa por primera vez a su sitio web móvil, se le brinda la opción de buscar artículos, tiendas o categorías específicas.

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

5. Adrian Zumbrunnen

Por qué funciona: Adrian Zumbrunnen adopta un enfoque único para el sitio web personal, creando una experiencia totalmente personalizada para los usuarios de dispositivos móviles.

Este es el sitio web personal de Adrian Zumbrunnen, diseñador, escritor y orador de UX. Cuando visite su sitio web, notará de inmediato que hay algo muy especial en él: es un conversacional sitio web.

Casi parece una conversación de mensaje de texto que normalmente tendría en su teléfono, incluida la elipsis para mostrar que está «escribiendo». Los usuarios tienen dos opciones de respuesta al final de cada intercambio, por lo que es similar a una experiencia de «elige tu propia aventura».

Si bien las experiencias móviles y de escritorio son similares, el sitio web de escritorio se siente como si estuviera hecho principalmente para dispositivos móviles, que podría ser la dirección en la que irán los sitios en el futuro.

Y si prefiere no participar en el intercambio similar a una conversación, simplemente puede desplazarse hacia abajo para obtener más detalles.

6. Elf on the Shelf

Por qué funciona: El sitio móvil Elf on the Shelf hace que su amplia selección de productos sea visible desde el principio y utiliza exhibiciones de productos emocionales y altamente visuales para conquistar a los visitantes.

Elf on the Shelf es, en términos relativos, una tradición navideña bastante nueva basada en un libro para niños. Si no está familiarizado, la premisa básica es la siguiente: el libro cuenta la historia de los elfos exploradores de Papá Noel, que son enviados por Papá Noel para vigilar a los niños en sus hogares en todo el mundo e informar a Papá Noel.

Los padres pueden comprar una figura de elfo, que colocarán sutilmente en algún lugar de su casa donde sus hijos puedan verla. Cada noche antes de Navidad, los padres trasladan al elfo a un lugar diferente alrededor de su casa para «demostrar» que los elfos exploradores son reales y siempre los vigilan.

Cuando llegue a Elf en el sitio web de Shelf, verá que en realidad hay numerosos productos que puede comprar. Pero en lugar de obligar a los usuarios a desplazarse por cada producto individualmente, los diseñadores web empaquetan cada producto en un mosaico grande y atractivo que describe el objetivo del viaje de cada comprador, con el artículo destacado en el frente.

No estás comprando tu propio elfo o cachorro, estás adoptando eso. Es una experiencia verdaderamente enriquecedora en una pantalla tan pequeña.

7. BuzzFeed

Por qué funciona: BuzzFeed atiende a sus usuarios móviles con un sitio web que los dirige a sus temas de interés.

BuzzFeed es conocido por su contenido viral y sus populares cuestionarios. También resulta ser una de mis fuentes de entretenimiento favoritas durante mi viaje al trabajo y viceversa.

¿Y dónde crees que estoy revisando BuzzFeed durante mi viaje? Lo adivinaste: mi teléfono. BuzzFeed sabe que muchos de sus visitantes visitan su sitio en dispositivos móviles, por lo que han tenido mucho cuidado de crear una experiencia fluida para sus lectores en movimiento.

Cuando llegue al sitio web móvil de BuzzFeed, lo primero que verá son algunas de sus piezas de contenido más populares que se muestran en un formato simple, similar a un collage, con imágenes grandes que son fáciles de tocar.

Para los usuarios interesados ​​en categorías específicas, hay un menú en la parte superior de la pantalla que enumera todas las categorías de publicaciones. Cada categoría tiene su propia página de directorio con filtros en los que se puede hacer clic en la parte superior.

8. Evernote

Por qué funciona: Con una ruta de conversión clara y un diseño limpio transferido desde el escritorio, el sitio móvil de Evernote deja en claro lo que hace y cómo puede unirse.

Evernote es una aplicación que te permite almacenar notas, imágenes y artículos web y luego acceder a ellos en todos tus dispositivos. Debido a que los usuarios tienden a descargar la aplicación o acceder al sitio web en múltiples dispositivos, incluidas computadoras de escritorio, teléfonos inteligentes y tabletas, es esencial que Evernote obtenga la experiencia móvil correcta.

Si miras la página de inicio de Evernote en tu computadora de escritorio, notarás lo limpio que es el diseño. Las declaraciones de valor son breves y van al grano, y los gráficos se suman al posicionamiento de la marca, pero no abarrotan la página.

Cuando miras el sitio web móvil de Evernote, puedes ver que han mantenido intactos su paleta de colores y el estilo general de la marca. El sitio web móvil de la compañía es limpio, simple y no resta valor en absoluto al valor de la aplicación. La ruta de conversión de Evernote es obvia a partir del llamado a la acción centrado: «Regístrese gratis».

9. Pixelgrade

Por qué funciona: Los temas de WordPress de Pixelgrade son optimizados para dispositivos móviles, mínimos y elegantes. Específicamente, el tema Pile es perfecto para los sitios web de portafolios de WordPress.

El tema Pile de Pixelgrade le permite mostrar adecuadamente sus servicios y trabajos anteriores y no sacrifica el diseño móvil. El tema está optimizado para dispositivos móviles y, al mismo tiempo, ofrece el mensaje y la estética previstos de su contenido.

10. Huffington Post

Por qué funciona: La conocida publicación condensa su contenido para adaptarse mejor a las dimensiones de la pantalla del móvil y servir a los lectores en movimiento.

The Huffington Post es un medio de noticias que informa de todo, desde política y eventos actuales hasta entretenimiento y tecnología. Lo que hace que su sitio web móvil sea único es que en realidad modifican ligeramente sus titulares para los usuarios de dispositivos móviles para que su contenido sea más fácil de escanear.

Si compara los sitios web para computadoras de escritorio con los móviles, notará que el sitio web para dispositivos móviles tiene menos palabras en la página de inicio. Los titulares son más cortos y mucho más digeribles, perfectos para alguien que hojea o lee en una pantalla pequeña.

También hay un menú en el que se puede hacer clic en la esquina superior izquierda de la pantalla que enumera todas las categorías de publicaciones.

11. Expreso

Por qué funciona: Express utiliza inteligentemente las imágenes para crear una experiencia de visualización de productos más realista: los usuarios simplemente deslizan el dedo para ver los productos desde diferentes ángulos antes de comprometerse con una compra.

Express es una tienda de ropa que atiende a hombres y mujeres jóvenes. Debido a que su audiencia a menudo visita su sitio web para buscar ropa, es importante que su sitio web incluya imágenes grandes y claras de su ropa, especialmente en dispositivos móviles, cuando los usuarios necesitarán tocar artículos en la pantalla con los dedos para hacer clic para comprar. información.

Express lleva su experiencia móvil un paso más allá que la mayoría de los sitios minoristas en línea. Si desliza el dedo de izquierda a derecha por una imagen que muestra una prenda de vestir, la imagen cambiará para que pueda ver la ropa en una vista diferente. En otras palabras, los usuarios no tienen que cargar otra página para ver varias imágenes de la misma prenda de vestir.

Mire la imagen en la parte superior derecha en las siguientes dos imágenes para ver cómo cambia cuando se desliza hacia un lado:

12. Seguro nacional

Por qué funciona: Este sitio móvil atiende a dos tipos diferentes de clientes y divide su sitio web móvil en consecuencia. Ya sea que sea un particular o un cliente, está claro a dónde debe ir.

Nationwide Insurance ofrece seguros y servicios financieros. Podría pensar que una empresa financiera tendría un sitio web complicado, pero en los dispositivos móviles, Nationwide Insurance logra una experiencia de usuario simple.

Cuando llegues al sitio móvil de Nationwide, verás dos pestañas en la parte superior que te permitirán identificarte como uno de los dos tipos de usuarios de inmediato para personalizar tu experiencia: personal o comercial. O, alternativamente, puede «Buscar un agente» o «Buscar un asesor financiero» para obtener más información sobre sus servicios.

Aunque limitar la experiencia a estas dos opciones excluye las funciones más detalladas de Nationwide, hace que la experiencia sea mucho más fácil para los visitantes que usan pantallas pequeñas. Esta es una gran técnica para guiar a los clientes potenciales en la dirección correcta si aún no son titulares de una cuenta y están visitando el sitio web por primera vez.

13. Squaredot

Por qué funciona: Este sitio móvil incluye la paleta de colores, las opciones de fuentes y los elementos interactivos de la página de inicio. Es simple, atractivo y divertido.

Squaredot es una agencia con sede en Dublín, Irlanda, que ayuda a los especialistas en marketing a desarrollar sus estrategias de inbound marketing. Su sitio web móvil es colorido, simple y facilita la navegación.

Lo que más me llama la atención son las combinaciones de colores agradables a la vista, así como el gran menú en el que se puede hacer clic que se expande para revelar cada uno de los servicios de la organización.

Más abajo en la página, hay regiones completamente deslizables. El que se muestra a continuación presenta historias de éxito de clientes y agrega otra dimensión al sitio móvil.

14. Zappos

Por qué funciona: El sitio web móvil de Zappos es muy fácil de buscar, lo cual es fundamental dado su enorme inventario. Las últimas ofertas también son claras en la carga de la primera página.

Zappos es un proveedor en línea de zapatos y ropa conocido por su excelente servicio al cliente. Su principal prioridad en los dispositivos móviles es ayudar a los usuarios a buscar fácilmente los elementos que buscan en su sitio web, por lo que han puesto una gran barra de búsqueda en la parte superior e inferior de su sitio web móvil para que sea muy fácil para ellos.

Así es como se ve la parte superior de su sitio móvil:

15. ABC

Por qué funciona: El tema oscuro de este sitio móvil contrasta con muchos otros sitios móviles populares, lo que le da una sensación de teatro a la experiencia. Las páginas altamente navegables ayudan a los espectadores a encontrar el contenido que prefieren o simplemente a navegar.

ABC es una empresa de transmisión de televisión conocida por programas populares como El bachillerato, El novato, y Hospital General. Los usuarios que visitan el sitio web de escritorio de ABC son recibidos con estas opciones y más. Vea el programa de televisión de la cadena, vea los ganadores de los premios Emmy más recientes, vea algunos de sus programas de televisión favoritos o incluso mire las noticias de entretenimiento relacionadas con esos programas.

Pero debido a que casi todos los hogares de hoy son hogares con múltiples pantallas, ABC sabe que su experiencia en un dispositivo móvil debe ser simple y lista para su visualización.

Cuando visite el sitio web de ABC en un dispositivo móvil, verá un fondo oscuro para una experiencia de cine con mosaicos para cada programa que desee transmitir. Los usuarios pueden escanear estas opciones y hacer clic en cualquier programa que deseen según el género, el orden alfabético, lo que es popular y categorías similares que también encontrará en la plataforma de transmisión de su televisor.

16. Lean Labs

Por qué funciona: Lean Labs utiliza animaciones fly-in y distintas secciones de contenido para contar una historia a medida que los usuarios se desplazan hacia abajo.

Lean Labs es una agencia de marketing que crea soluciones web atractivas, receptivas y de alta conversión. (También aparecieron en la exitosa serie de televisión Tanque de tiburones.) La gente de allí hace un gran trabajo al brindar una experiencia fluida a los usuarios de dispositivos móviles, especialmente en lo que respecta a sus técnicas de diseño.

Observe cómo el sitio web móvil de Lean Labs utiliza la escala, el contraste y el tipo de letra para distinguir ciertos elementos de su página. Incluso incorpora animaciones de vuelo para sus imágenes para mejorar la experiencia de desplazamiento.

17. SAP

Por qué funciona: A pesar de su gran cantidad de ofertas, SAP lo domina en su sitio web móvil y simplifica sus CTA y menús.

SAP es una empresa de software empresarial que gestiona las operaciones comerciales y las relaciones con los clientes. El negocio mejora su experiencia móvil al condensar información y combinar algunas de sus llamadas a la acción en controles deslizantes, mientras que su sitio web para computadoras de escritorio tiene estas llamadas a la acción dispuestas horizontalmente.

Esto ayuda a simplificar las cosas para que los usuarios de dispositivos móviles no se sientan abrumados con mucha información a la vez, y también garantiza que ninguna de las llamadas a la acción sea demasiado pequeña para leer.

18. KISSmetrics

Por qué funciona: KISSmetrics usa el color para separar las secciones de contenido entre sí y para crear CTA prominentes que se destacan, incluso en pantallas móviles más pequeñas.

KISSmetrics proporciona software de análisis para empresas. En su página de inicio, hay mucha información que explica lo que hace el software junto con un testimonio.

Pero su sitio móvil se muestra un poco diferente: en un dispositivo móvil, la información de su sitio se muestra en una lista con módulos alternativos de luz y oscuridad. Esto facilita a los usuarios hojear la página sin perderse en el texto.

También han hecho que el texto y los campos de sus formularios sean grandes y fáciles de leer:

19. IDIG Marketing

Por qué funciona: idig prioriza la accesibilidad en su sitio web, presentando un menú de accesibilidad fijo donde los usuarios pueden ajustar varias opciones de visualización.

idig Marketing es un proveedor de desarrollo y comunicaciones. Su sitio web móvil está diseñado de manera similar a su sitio web de escritorio, pero me gustó especialmente el menú de opciones de accesibilidad disponible en el lado derecho de la pantalla.

Al tocar este ícono azul, se muestra un menú donde los usuarios pueden ajustar configuraciones como imágenes mejoradas.

20. IndiaMART

Por qué funciona: El sitio web móvil de esta empresa se puede navegar y buscar cómodamente, según lo que los visitantes estén buscando hacer en el sitio. También muestra los elementos de tendencia de forma destacada.

IndiaMART es el mercado B2B en línea más grande de la India, y su simple tienda móvil basada en categorías lo convierte en uno de los mejores sitios web móviles que hemos visto en la industria del comercio electrónico.

La página de inicio móvil de la empresa coloca la barra de búsqueda en la parte superior para que siempre pueda volver a una búsqueda personalizada si navegar ya no es suficiente para encontrar el elemento que está buscando.

Sin embargo, IndiaMART facilita la exploración de sus pasillos digitales clasificando cada artículo por tipo de artículo, y luego subtipos dentro de cada tipo de elemento: un movimiento de diseño inteligente para alentar a los usuarios a explorar más su sitio. En «Ropa y prendas», por ejemplo, tiene mosaicos en los que se puede hacer clic fácilmente para ver categorías de ropa más específicas, como ropa de hombre, vestidos de mujer e incluso trajes, saris y prendas similares originarias de la India.

Debajo de los mosaicos de navegación de IndiaMART, la empresa tiene su propio sección de tendencias específicamente para la mercancía a la que la gente está prestando mayor atención, similar a una lista de tendencias de noticias en una plataforma de redes sociales. Cada categoría de tendencia tiene un botón de llamada a la acción compatible con dispositivos móviles que permite a los usuarios obtener cotizaciones de precios para el producto que les interesa.

21. Pipsnacks

Por qué funciona: Finalmente, el sitio web móvil de Pipsnacks no sacrifica sus imágenes por pantallas más pequeñas. Incluso en su teléfono inteligente, está inmerso en la marca alegre de la compañía de bocadillos.

Para cerrar nuestra lista, Pipsnacks trae los colores y texturas vibrantes de su sitio de escritorio a la pantalla del móvil. Los productos se enumeran como imágenes grandes en las que se puede hacer clic que lo llevan a sus respectivas páginas de productos, y el sitio móvil se mejora con animaciones mínimas pero efectivas que se suman a las experiencias sin dañar el tiempo de carga.

Sitios web móviles para inspirar el suyo

En estos días, tener un sitio web móvil efectivo no es solo una buena ventaja, es una necesidad, al menos si desea clasificar en los resultados de búsqueda y ser encontrado. Si descuida su sitio móvil, eso podría desanimar a la mitad de su audiencia.

Afortunadamente, los creadores de sitios web y las plataformas de hoy permiten que cualquiera cree un sitio que esté listo para escritorio y para dispositivos móviles. Pero son los pequeños detalles que agrega en la parte superior los que harán que el suyo sea verdaderamente excepcional.

¿Quiere más información sobre cómo optimizar su negocio con un diseño web móvil creativo? Descargue el kit gratuito sobre marketing móvil a continuación.

Nota del editor: esta publicación se publicó originalmente en octubre de 2018 y se ha actualizado para que sea más completa.