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

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

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

En el futuro, Google solo continuará elevando el nivel 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 ranking de búsqueda.

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

1. obturador

Por qué funciona: El sitio web móvil de Shutterfly es fácilmente navegable, altamente 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, papelería 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. En primer lugar, 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 qué tipo de producto les interesa. 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 facilitar la navegación.

2. mapas de Google

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

Todo el mundo tiene su mapa favorito o aplicación de direcciones. El mío es Google Maps, que uso ya sea que camino, conduzca, ande en bicicleta o tome el transporte público. Lo especial de 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 se tomaron 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. tipo de letra

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

Typeform es una empresa de tecnología con sede en Barcelona con una misión simple: «hacer que los formularios sean impresionantes». Su sitio web de escritorio está bellamente diseñado y recibe 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, despejando el sitio y simplificando la experiencia móvil en general. El sitio móvil es una versión más simple del sitio web de escritorio y sigue teniendo un diseño hermoso.

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 destaca 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 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 dos cosas: están buscando un artículo específico o están buscando artículos en categorías que les interesen.

El sitio web móvil atiende a ambos tipos de visitantes desde el principio. Cuando accede por primera vez a su sitio web móvil, aparece una opción para buscar artículos, tiendas o categorías específicas.

Inmediatamente debajo hay imágenes en miniatura de artículos de moda 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. Adrián Zumbrunnen

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

Este es el sitio web personal de Adrian Zumbrunnen, diseñador de UX, escritor y orador. Cuando visite su sitio web, notará de inmediato que tiene algo único: es un conversacional sitio web.

Casi parece una conversación de mensajes de texto que normalmente tendrías en tu teléfono, incluidos los puntos suspensivos 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, lo que podría ser la dirección que seguirá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. Elfo en el estante

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

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

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

Cuando llegue al sitio web de Elf on the 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 elemento destacado que se muestra en el frente.

No estás comprando tu propio duende 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 cuestionarios populares. También resulta ser una de mis fuentes favoritas de entretenimiento durante mi viaje hacia y desde el trabajo.

¿Y dónde crees que estoy revisando BuzzFeed durante mi viaje? Lo has adivinado: mi teléfono. BuzzFeed sabe que muchos de sus visitantes visitan su sitio desde 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á es 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 seleccionables en la parte superior.

8. Evernote

Por qué funciona: Con una ruta de conversión clara y un diseño limpio trasladado 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 le permite almacenar notas, imágenes y artículos web y luego acceder a ellos en todos sus dispositivos. Debido a que los usuarios tienden a descargar la aplicación o acceder al sitio web en varios dispositivos, incluidas computadoras de escritorio, teléfonos inteligentes y tabletas, es esencial que Evernote obtenga la experiencia móvil correcta.

Si observa la página de inicio de Evernote en su computadora de escritorio, notará lo limpio que es el diseño. Las declaraciones de valor son breves y directas, y los gráficos se suman al posicionamiento de la marca pero no saturan la página.

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

9. Grado de píxel

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

de pixelgrade tema de pila le permite exhibir 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, transmite el mensaje y la estética previstos para su contenido.

10 Correo Huffington

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, de modo que su contenido sea más fácil de escanear.

Si compara los sitios web de escritorio con los móviles, notará que el sitio web móvil 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 Rápido

Por qué funciona: Express utiliza hábilmente las imágenes para crear una experiencia de visualización de productos más realista: los usuarios simplemente deslizan para ver los productos…