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.

<< Descarga gratis 77 ejemplos de páginas principales, blogs y páginas de  destino excepcionales >>

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. 

Mejores páginas web móviles: MadyFit

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. 

Ejemplo de página web de Sopitas

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. 

Ejemplo de página web de Uber Eats

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. 

Ejemplo de página web de AQuest

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. 

Ejemplo de página web de Penarosa

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.

Ejemplo de página web de Momiji

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. 

Descripción de producto de página web de Momiji

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. 

Ejemplo de página web de Simply Chocolate

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. 

Ejemplo de página web de Simply Chocolate

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.

Ejemplos de página web de Museo Frans Hals

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. 

Ejemplo de página web de Museo Frans Hals

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. 

Ejemplo de página web de TWKS

Como puedes comprobar, cuenta con grandes imágenes y textos en fuentes enormes que llaman la atención al instante. 

Ejemplo de páginas web de TWKS

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.

Shutterfly, ejemplo de página web móvil

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.

Shutterfly, ejemplo de página web móvil

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 igualesNo 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 web móvil de Google Maps

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.

Ejemplo de página web móvil de Etsy

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.

Ejemplo del sitio móvil de Elf on the shelf

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.

Página de inicio del sitio móvil de BuzzFeed

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.

Ejemplo de botón de llamada a la ación en el sitio móvil de Evernote

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

Ejemplo de página web de Evernote

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.

Ejemplo del sitio móvil de Huffington Post

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.

Ejemplo del menú web de Huffpost

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.

Ejemplo de página web móvil de Express

Ejemplo de página web de Express

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.

Ejemplo de página web de Nationwide

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.

Ejemplos de página web de Nationwide

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.

Ejemplos de página web de Nationwide

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.

Ejemplo de página web de Squaredot

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.

Ejemplo de página web de Squaredot

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:

Ejemplo de página web de Zappos

Y así se muestra la parte inferior de la página de inicio en su sitio móvil:

Ejemplo de menú móvil de Zappos

Imágenes de Zappos

21. ABC

ABC es una empresa de televisión conocida por programas populares como The BacheloretteBattleBots 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.

Ejemplo de página web móvil de ABC

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:

Ejemplo de página web móvil de Lean Labs

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.

Ejemplo de página web móvil de Lean Labs

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.

Ejemplo de página web móvil de SAP

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.

Ejemplo de página web móvil de Kissmetrics

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.

Ejemplo de página web móvil de IDIG

Sus diferentes servicios están divididos por módulos simples en los que puedes elegir la opción que requieras. 

Ejemplo de página web móvil de agencia digital

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. 

Ejemplo de página web móvil de Spotify

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. 

Ejemplo de página web móvil de Spotify

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. 

Ejemplo de página web móvil de Starbucks

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.

Ejemplo de página web móvil de Macabro

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. 

Ejemplo de página web móvil de Kichink

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.

Ejemplo de página web móvil de Conecta

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. 

Ejemplo de página web móvil de H&M

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.

Ejemplo de página web móvil de Facebook

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. 

Cómo diseñar páginas principales, blogs y páginas de destino excepcionales

 diseño web

Publicado originalmente el Jun 8, 2021 7:30:00 AM, actualizado el 18 de abril de 2022

Topics:

Diseño Web