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 favorece en gran medida a los sitios web optimizados para dispositivos móviles desde las primeras actualizaciones significativas del algoritmo. Se trata de algo fundamental si tenemos en cuenta que el 60 % de las búsquedas de Google se realizan a través de dispositivos móviles, por encima de los equipos de escritorio o tabletas.
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 encargado de mejorar tu experiencia en dispositivos móviles, es mejor que comiences ahora; de lo contrario, podrías poner en riesgo tu posicionamiento.
Aquí te mostraremos varios ejemplos que te inspirarán para mejorar tu propio sitio web, así como varios puntos básicos acerca del diseño móvil.
Un ejemplo de aplicación es Evernote o Nike Run Club. Algunas apps permiten su uso sin conexión a internet, pero lo más importante es que guardan tus datos y sus usos son especializados, tal como guardar tus notas y documentos o acompañarte en tu caminata matutina.
Un sitio de diseño adaptativo o responsive es visible desde cualquier dispositivo, gracias a su código dinámico que se adapta tanto a los equipos de escritorio como a las tabletas y a los teléfonos inteligentes.
¿Qué es un sitio web móvil?
Un sitio web móvil hace referencia a un sitio en el que los usuarios pueden acceder a cualquier tipo de información desde cualquier lugar, independientemente del dispositivo que estén utilizando en ese momento.
Los sitios web móviles son muy distintos de las aplicaciones y de los sitios responsive. No son un programa descargable ni cuentan con una sola versión flexible, sino que, literalmente, tienen una versión especializada para dispositivos móviles, es decir, creada para ellos expresamente.
Así, cuando visitas un sitio web móvil por medio de una URL como www.miurlfavorita.com, tendrás una versión distinta si entras desde tu PC o MAC, o si lo haces desde en tu teléfono.
Las diferencias entre un sitio web móvil, una aplicación móvil y un sitio web responsive
Un sitio web móvil es un sitio modificado para su uso en dispositivos móviles y un sitio web responsive es aquel que, a través de una sola versión, se adapta a cualquier dispositivo. Se accede a ambos por medio de un navegador. En cambio, la aplicación móvil debe descargarse y ejecuta funciones específicas.
¿Cuándo conviene tener un sitio web móvil?
Tener dos versiones de tu sitio web implica una inversión de tiempo y dinero mayor a la que representa un diseño web responsive, donde tienes miles de plantillas listas para usar. Sin embargo, un sitio web dedicado para móviles será tu mejor opción si tus contenidos requieren alguna función de los smartphones o si es un medio por el cual te contacta el mayor porcentaje de tus visitantes. Además, es útil si tienes una estrategia de marketing especializada en móviles.
Cómo adaptar tu sitio web para móvil
Si quieres tener un sitio web móvil, puedes optar por estas opciones:
- Crear dos sitios distintos en una misma URL: en ese caso, la URL para tu sitio quedaría exactamente igual, pero con una programación diferente, dependiendo del dispositivo desde el cual lo visiten.
- Usar redirecciones: tendrías una URL para el sitio en escritorio, mientras que una variante para el sitio en dispositivos móviles. Es una opción solo para sitios muy sencillos, pues redireccionar muchas páginas representa un problema de gestión importante.
En cualquier caso, la ayuda de un desarrollador web será invaluable. Si dispones de recursos más limitados lo mejor será que optes por una plantilla responsive.
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 32 empresas que lograron mejorar su experiencia web móvil.
32 de los mejores ejemplos de diseño de sitios web móviles
1. MadyFit
Si buscas una web realmente inspiradora en temas fitness, el sitio de MadyFit te encantará. Dentro de la navegación podrás encontrar información tanto en el blog como en los videos muy fácil de consultar.
Además, visitar y comprar en la tienda es muy intuitivo. Es un aspecto que se agradece bastante a la hora de querer transacciones seguras y confiables.
Imagen de MadyFit
2. Sopitas
Si un sitio debe ser obligatoriamente fácil de navegar y comprender, es uno de noticias. Esto es algo que el medio de comunicación Sopitas comprende a la perfección y ha hecho de su sitio algo muy atractivo con un menú dividido por categorías simples.
Imagen de Sopitas
3. Uber Eats
Estar tan cerca de ese antojo que tienes nunca fue tan fácil. Si bien Uber Eats cuenta con su propia app para ordenar comida a domicilio, también tiene presencia web y es igual de sencillo buscar, ordenar, pagar y rastrear tu pedido.
Imagen de Uber Eats
Además, dentro de la misma página podrás encontrar información interesante si deseas registrar tu restaurante o crear una cuenta de negocios.
4. AQuest
La agencia creativa italiana tiene una de las web más grandiosas. No exageramos, su diseño es simplemente novedoso y es toda una experiencia inigualable tanto en su versión de escritorio como en dispositivos móviles.
Imagen de AQuest
Tan solo explóralo y compruébalo por ti mismo. Seguro saldrás muy inspirado para tu próxima idea web.
5. Penarosa
La marca de relojes italianos Penarosa es un claro ejemplo de cómo llevar el comercio electrónico a otro nivel. Dentro de su sitio web, además de encontrar elegantes fotografías de los productos, también tendrás una gran experiencia a la hora de querer personalizar tu próxima compra.
Imagen de Penarosa
Su opción web para dispositivos móviles ofrece la misma calidad que su versión de escritorio y te da la oportunidad de tener una navegación rápida y satisfactoria.
6. Momiji Beauty
Este sitio dedicado a la venta de productos para el cuidado de la piel cuenta con grandes imágenes, en las que puedes apreciar sin problemas las cualidades de cada producto.
Si requieres hacer un búsqueda, la respuesta es rápida y puedes navegar con facilidad entre los artículos; te informan claramente sus descripciones, beneficios e instrucciones de uso.
Imágenes de Momiji Beauty
7. Simply Chocolate
Te recomendamos que si eres fanático o fanática del chocolate no entres a este sitio; de lo contrario, lo primero que querrás hacer es salir corriendo a comprar uno. Y es que esta web es tan deliciosa... perdón, tan novedosa, que puedes visitarla por el simple gusto de explorarla y jugar con sus dinamismos.
En su versión para dispositivos móviles también podrás gozar abrir tu propio empaque de chocolate y conocer un poco más de cada producto.
Imágenes de Simply Chocolate
8. Museo Frans Hals
¿Quién dice que los museos no se pueden disfrutar a distancia? Hoy son una realidad y gracias a una experiencia móvil de calidad, es posible.
Tan solo explora el increíble sitio web de este museo, en donde podrás desde ver algunas de las próximas obras a exhibir hasta adquirir tus boletos de entrada de una forma rápida y fácil.
Imágenes de Museo Frans Hals
9. TWKS
Esta agencia dedicada a la creación digital conoce a la perfección lo que significa funcionalidad y la plasma perfectamente en su sitio web para dispositivos móviles. Es simplemente una joya que no querrás dejar de explorar.
Como puedes comprobar, cuenta con grandes imágenes y textos en fuentes enormes que llaman la atención al instante.
Imágenes de TWKS
10. 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. Debido a que cada vez más usuarios toman fotos y luego acceden a ellas desde sus teléfonos inteligentes, Shutterfly vislumbró 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 las categorías han sido mejoradas y aparecen en la parte superior de la pantalla en forma de botones. Esto hace que sea fácil para los usuarios seleccionar rápidamente la opción que les interesa conocer más.
Cuando los usuarios hacen clic en una de estas alternativas, se encuentran con fotos de gran tamaño que muestran los productos y las opciones de acción que ofrece Shutterfly, facilitando así el proceso de búsqueda y compra.
Imágenes de Shutterfly
11. Google Maps
Todos tenemos una aplicación de mapas favorita. Para muchos es Google Maps. 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.
Imágenes de Google Maps
12. 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 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.
Inmediatamente debajo de la barra de búsqueda, hay imágenes en miniatura de elementos que son tendencia y 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 y ver los detalles.
Imagen de Etsy
13. Elf on the shelf
Cuando entras por primera vez en el sitio web de la tienda de Elf on the Shelf, verás 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 que los usuarios simplemente desplacen la pantalla hacia abajo para ver todas las categorías con imágenes grandes; es ideal para los visitantes que buscan productos en el sitio web.
Imagen de Elf on the shelf
14. BuzzFeed
BuzzFeed es una empresa de noticias conocida por su contenido viral y sus cuestionarios populares.
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 entras 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.
Para los usuarios interesados en categorías específicas hay un menú en la esquina superior izquierda de la pantalla. En él se enumeran las distintas categorías de publicaciones.
Imagen de BuzzFeed
15. 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. Debido a 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 causan desorganización. En su sitio web móvil han mantenido intacto este diseño y estilo. Su sitio web móvil es simple y no desvía la atención del valor de la aplicación.
Además, tiene botones de llamada a la acción, que son geniales para los usuarios móviles.
Imágenes de Evernote
16. 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 presenta una imagen grande que acompaña al título de sus artículos, para que su contenido pueda consumirse más fácilmente.
Si comparas los sitios web móvil y de escritorio verás que el sitio web móvil tiene un orden diferente de las secciones en la página de inicio. La sección de videos aparece primero en la versión para dispositivos móviles; esto es ideal para aquellos usuarios que echan un vistazo rápido a la información desde sus celulares.
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, al igual que en BuzzFeed.
Imágenes de Huffington Post
17. Express
Express es una tienda de ropa para mujeres y hombres jóvenes. Debido a 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.
Imagen de Express
18. 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 distingue por tener una experiencia de usuario sencilla.
Cuando accedes a su sitio móvil podrás ver varios recursos útiles referentes a seguros, comenzando con uno para autos y también puedes iniciar sesión o registrarte con una cuenta si eres un nuevo usuario.
Además también encontrarás la manera de obtener un presupuesto de seguro de inmediato, o bien, puedes contactar a un agente al ingresar tu código postal para obtener más información sobre sus servicios.
Si sigues bajando en la página encontrarás varias secciones con llamadas a la acción para obtener distintos tipos de seguros que, sin duda, son de utilidad para quienes están en esta búsqueda.
Imágenes de Nationwide Insurance
Como puedes ver, la organización de su sitio y los diferentes elementos que forman parte de él contribuyen a una experiencia más agradable para los visitantes que acceden desde pantallas pequeñas. Se trata de una excelente técnica que puedes utilizar para conducir a los clientes potenciales en la dirección correcta.
19. Squaredot
Squaredot es una agencia partner de HubSpot que ayuda a los profesionales de 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, atractivos y fáciles de visualizar.
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 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 agrandar la pantalla.
Imágenes de Squaredot
20. 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, añadieron 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:
Y así se muestra la parte inferior de la página de inicio en su sitio móvil:
Imágenes de Zappos
21. 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 muchas opciones desde el principio. De hecho, entre las primeras opciones que aparecen en su sitio web móvil verás que hay dos carruseles por los que podrás desplazarte por imágenes grandes con capítulos y sus programas televisivos más populares. Los usuarios pueden echar un vistazo a estas opciones y hacer clic en el contenido que quieran.
Imagen de ABC
22. 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 o palabras clave de su página:
Y, como ya mencionamos, 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 llamadas a la acción relevantes acompañadas de grandes imágenes ilustrativas.
Imágenes de Lean Labs
23. 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 con productos que presentan en carrusel justo debajo. Actualmente su sitio web de escritorio adoptó la misma interfaz móvil, probablemente porque esta presentación simplifica la interacción con los visitantes. Además contribuye a que los usuarios no se saturen de información de una sola vez y también garantiza que ninguna de las CTA sea demasiado pequeña para leer.
Imagen de SAP
24. 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.
Pero el sitio móvil es diferente: la información 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.
Imagen de KISSmetrics
25. idig Marketing
idig Marketing es un proveedor de desarrollo y comunicaciones. Su sitio web móvil cuenta con grandes imágenes de excelente calidad, acompañadas de texto y CTA claras que permiten una navegación y lectura fácil y agradable.
Sus diferentes servicios están divididos por módulos simples en los que puedes elegir la opción que requieras.
Imágenes de idig Marketing
26. Spotify
Spotify es una de las apps favoritas de muchos. Una de sus bondades es la función que te dirige al sitio con base en la región geográfica en que te encuentras. Esto quiere decir que te va a dirigir al sitio en español en lugar de al que está en inglés.
Además, el sitio móvil te muestran iconos más grandes para las listas de reproducción en comparación con los que tienen en la app, de modo que puedes ver mejor las listas mientras vas navegando.
Imágenes de Spotify
27. Starbucks
La cadena de la sirena tiene uno de los sitios móviles más bonitos de esta lista. Y es que la versión móvil es todavía más cómoda de leer que el sitio en escritorio (o en PC), ya que puedes hacer clic en las flechas de la derecha para encontrar los accesos rápidos, como si fuera Twitter.
Imagen de Starbucks
28. Macabro
El festival de cine de terror Macabro tiene un sitio para móviles donde podrás consultar cortometrajes. La experiencia en sus páginas te permite disfrutar de los contenidos y todos sus menús están completamente adaptados.
Imagen de Macabro
29. Kichink
El sitio web de esta startup es un favorito, ya que gracias al hecho de que está optimizado para móviles puedes pasar horas viendo los productos de cientos de tiendas, comprar de forma rápida y hacer el seguimiento de tu pedido sin salir del sitio.
Imagen de Kichink
Aparte del hecho de que puedes ver las colecciones como mejor te convenga, tienes una plataforma amigable para vender lo que quieras en tu tienda en línea.
30. Conecta
La iniciativa Conecta, que impulsa la creación documental en Chile, cuenta con un sitio web que no solo es perfecto para navegar y hacer búsquedas, sino que su diseño vibrante te invita a quedarte por largo rato.
Imagen de Conecta
31. H&M
La empresa sueca tiene un sitio web especialmente diseñado para las consultas móviles, que no necesariamente tiene los mismos elementos que la versión de escritorio. Por ejemplo, cuando haces clic en el enlace verás que tiene una letra «m» antes del dominio. Eso quiere decir que es una versión exclusiva del sitio web para dispositivos móviles.
Imagen de H&M
32. Facebook
Sí, la compañía de Mark Zuckerberg tiene presencia móvil, app y versión de escritorio para que no te pierdas de todo lo que ofrece la red social. Así como H&M, el sitio móvil de Facebook tiene ciertas limitaciones como el hecho de que no puedes editar ciertos contenidos. Además reorganiza los botones que puedes encontrar en la app, pero todo esto lo hacen los desarrolladores para mejorar la experiencia de navegación en el entorno móvil.
Imagen de Facebook
Estos son algunos de nuestros ejemplos favoritos. Replica sus bondades y logra crear un entorno amigable para los visitantes de tu sitio web móvil. Si requieres una herramienta que te ayude a lograrlo, a través del CMS de HubSpot es posible personalizar cómo aparece tu página en un dispositivo móvil.
Con sus funciones puedes elegir entre ocultar módulos específicos o agregar rellenos, espaciados u otros elementos personalizados hasta conseguir el efecto y diseño deseado. Todo sin poner en riesgo la calidad de tu sitio y el nivel de experiencia móvil de los usuarios.
