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 la mayoría de las consultas de búsqueda en Google se realizan desde smartphones, por encima de los equipos de escritorio o tabletas.

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

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.

Así, 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 se encuentren utilizando en ese momento. 

Los sitios web móviles son muy distintos a las aplicaciones y a los sitios responsive. No son un programa descargable, ni cuentas 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, verás una versión distinta si entras desde tu PC o MAC que si lo haces desde tu teléfono. 

¿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. Cuando dispongas 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 23 empresas que lograron mejorar su experiencia web móvil.

23 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. Debido a 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 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 opciones se encuentran con fotos de gran tamaño que muestran los productos y las opciones de acción que te ofrece Shutterfly, facilitando así el proceso de búsqueda y compra.

Página de Shutterfly con productos de gran tamaño en su web móvil

2. 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

3. 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.

Página móvil de Etsy

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 y ver los detalles.

Ejemplo del sitio móvil de Etsy

4. 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.

Imágenes grandes de categorías en el sitio móvil de la tienda de Elf on the Shelf

5. 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.

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.

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

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.

Menú del sitio móvil de BuzzFeed

6. 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.

Sitio móvil de Evernote

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

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

7. 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, de modo 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 página de inicio. La sección de videos aparece primero en la sección para dispositivos móviles, esto es ideal para aquellos usuarios que echan un vistazo rápido a la información desde sus celulares.

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.

Menú del sitio móvil de Huffington Post

8. 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.

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, esta 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:

Express, sitio web móvil de ecommerce

Cambio de perspectiva en fotos de Express, sitio móvil de venta de ropa

9. 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 un seguro para autos y también puedes iniciar sesión o registrarte con una cuenta si eres un nuevo usuario en la página. 

Sitio web móvil de Nationwide Insurance

Además también encontrarás la manera de obtener un presupuesto de seguro automático de inmediato, o bien, puedes contactar a un agente al ingresar tu código postal para obtener más información sobre sus servicios.

Llamada a la acción en sitio móvil de Nationwide Insurance

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.

Llamadas a la acción en sitio móvil 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 mucho 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.

10. 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, atractivos, y fáciles de visualizar.

Página móvil 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.

Llamada a la acción para suscripción en sitio móvil de Squaredot

11. 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 sección superior del sitio móvil de Zappos

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

Sección inferior del sitio móvil de Zappos

12. 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.

Carruseles en el sitio móvil de la cadena ABC

13. 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 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ñados de grandes imágenes ilustrativas.

Llamada a la acción en sitio móvil de Lean Labs

14. 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.

Página móvil de SAP

15. 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: 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.

Módulo blanco en sitio web móvil de KISSmetrics

Módulo oscuro en sitio web móvil de KISSmetrics

16. 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. Sin embargo, 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 de idig Marketing

17. 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. 

Sitio web móvil de Spotify

Además, el sitio móvil te muestran iconos más grandes para las listas de reproducción a comparación del tamaño que tienen en la app, de modo que las puedes ver mejor mientras vas navegando. 

Listas de reproducción en el sitio web móvil de Spotify

18. 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. 

Sitio móvil de Starbucks

19. 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 la página web móvil de Macabro

20. 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 del sitio móvil 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. 

21. 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 cuenta con un diseño vibrante que te invita a quedarte por largo rato.

Ejemplo de la página web móvil de Conecta

22. 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. 

Sitio web móvil de H&M

23. 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 puede ofrecer 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.

Sitio móvil 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.

Inspiración Web

 diseño web

Publicado originalmente en agosto 20 2020, actualizado agosto 21 2020

Topics:

Diseño Web