Los campos marcados con * son obligatorios

×

Regenerar mi contraseña

Escribe el email con el que te registraste en LanceTalent y te enviaremos una nueva contraseña:

×

Tu registro se ha efectuado correctamente.

Hemos registrado tus datos correctamente.
Ahora recibirás un email de confirmación en tu cuenta de correo. Por favor, sigue las instrucciones para finalizar el proceso.

×
Publica tu proyecto ahora, es gratis! / ¿Que necesitas para lanzar tu negocio online?
Top
63317-OANQVG-591

10 ejemplos de diseño web responsive

Ahora más que nunca las empresas necesitan tener páginas web que ofrezcan una buena experiencia a los usuarios móviles.

Desde que Google actualizó su algoritmo en abril de 2015, y de nuevo en marzo de 2016, ha favorecido en gran medida a los sitios webs optimizados para dispositivos móviles. Y no debes pasar este dato por alto, ya que las búsquedas desde smartphones y tablets han superado ya a las de los equipos de escritorio, por lo que si no cuentas con un diseño web responsive estarás perdiendo una gran cantidad de potenciales clientes.

Se espera que de cara al futuro Google siga actualizando su algoritmo para favorecer a las webs que se consideren mobile-friendly con una posición más alta en su ranking de búsquedaAsí que si no te has centrado todavía en la mejora de la experiencia móvil de tu web, ahora es un buen momento para crear un diseño web responsive.

Para ayudarte con esta tarea te presentamos 10 ejemplos de diseño web para móviles que hemos encontrado en el blog de Hubspot.

728_90_ES

10 ejemplos de diseño web responsive

1. Shutterfly

Shutterfly es un servicio online que permite a los usuarios crear álbumes de fotos, tarjetas personalizadas, artículos de papelería, etc. Debido a que cada vez más gente utiliza únicamente la cámara de su teléfono móvil, Shutterfly no tuvo más remedio que rediseñar su web par ofrecer una buena experiencia móvil a sus clientes.

El menú principal de esta web cuenta con grandes botones para que los usuarios puedan seleccionar rápidamente la opción que más les interesa. Una vez que hacen clic en alguna de las opciones, pueden ver una galería de imágenes de ejemplos con todas las cosas que pueden crear en la web.

Captura de pantalla 2016-08-02 a las 14.05.22

Captura de pantalla 2016-08-02 a las 14.05.37

2. Google Maps

Puedes utilizar Google Maps mientras caminas, mientras conduces, mientras andas en bicicleta o vas en transporte público. Lo que hace especial a esta web para móviles es que es prácticamente idéntica a su App móvil. Y no sólo se trata de la apariencia y el diseño, sino que cuentan con la misma velocidad de carga y funcionalidades.

Captura de pantalla 2016-08-02 a las 14.10.42

Captura de pantalla 2016-08-02 a las 14.10.49

3. Typeform

Typeform es una empresa con una simple misión: “crear formularios impresionantes.” Su sitio web de escritorio está muy bien diseñado, ofrece vídeos de alta definición, animaciones y otros componentes de diseño complejos.

Pero para los usuarios móviles los vídeo y animaciones podrían afectar significativamente el tiempo de carga de la página, entre otras dificultades. Es por eso que han hecho una versión móvil de la web mucho más simple, pero igual de bien diseñada.

Captura de pantalla 2016-08-02 a las 14.14.40

Captura de pantalla 2016-08-02 a las 14.14.49

4. Etsy

Etsy es un sitio web de comercio electrónico donde la gente puede comprar y vender artículos hechos a mano. La mayoría de los visitantes de esta web buscan un artículo específico o quieren navegar por las diferentes categorías de productos. La página web optimizada para móviles de Etsy permite la búsqueda por elementos específicos, tiendas, o categorías.

Debajo de la barra de búsqueda se presentan imágenes en miniatura de los artículos más populares que se pueden comprar en esta página web. Los usuarios móviles pueden ver estos artículos de moda en formato collage, con imágenes lo suficientemente grandes para poder clickar en ellos con el dedo.

Captura de pantalla 2016-08-03 a las 8.47.32

Captura de pantalla 2016-08-03 a las 8.47.41

5. BuzzFeed

BuzzFeed es una empresa de noticias conocida por su contenido viral. BuzzFeed sabe que muchos de sus visitantes acceden a su web a través de su smartphone, por lo que han creado una experiencia de usuario agradable para este tipo de lectores.

Cuando llegas al sitio web móvil de BuzzFeed, lo primero que ves es que algunas de sus piezas de contenido más populares se muestran en un formato simple con imágenes de gran tamaño para que puedas seleccionarlos fácilmente con el dedo.

Para los usuarios interesados en categorías específicas hay un menú en la esquina superior izquierda de la pantalla que muestra todas las categorías de los artículos.

Captura de pantalla 2016-08-03 a las 8.53.50Captura de pantalla 2016-08-03 a las 8.54.07

6. Evernote

Evernote es una aplicación que te permite almacenar notas, imágenes y artículos para luego acceder a ellos a través de todos tus dispositivos. Dado que los usuarios tienden a descargarse la aplicación o a abrir la página web desde múltiples dispositivos, es esencial que Evernote ofrezca una buena experiencia a los usuarios móviles.

La página web para ordenadores de sobremesa de Evernote tiene un diseño muy limpio y cuidado que ha seguido manteniendo en su sitio web para móviles. Además cuenta con grandes botones para crear una experiencia de usuario sencilla.

Captura de pantalla 2016-08-03 a las 9.04.25

Captura de pantalla 2016-08-03 a las 9.04.33

7. Huffington Post

El Huffington Post es un medio de comunicación muy conocido que informa sobre política, eventos, tecnología, negocios, etc. Lo que hace único a su sitio web responsive es que altera ligeramente los titulares para que el contenido pueda ser analizado con más facilidad.

Si se compara la web de escritorio frente a la móvil, se puede observar que en la segunda los titulares son más cortos y directos, perfectos para captar la atención de los lectores en la pequeña pantalla.

Al igual que BuzzFeed, cuenta con un menú en la esquina superior izquierda de la pantalla para filtrar los artículos por categorías.

Captura de pantalla 2016-08-03 a las 9.09.27

Captura de pantalla 2016-08-03 a las 9.09.35

8. Express

Express es una tienda de ropa online para hombres y mujeres jóvenes. Debido a que su público a menudo visita su web desde un dispositivo móvil, han incluido grandes imágenes de sus artículos para ofrecer una experiencia de compra mucho más cómoda.

Express llevan su experiencia móvil un paso más allá que la mayoría de las tiendas online. Si deslizas el dedo de izquierda a derecha en una imagen que muestra una pieza de ropa, la imagen cambiará para ver la prenda desde un ángulo diferente. En otras palabras, los usuarios no tienen que cargar otra página para ver múltiples imágenes de la misma prenda de vestir.

Captura de pantalla 2016-08-03 a las 9.15.59

 

Captura de pantalla 2016-08-03 a las 9.16.09

9. Zappos

Zappos es una tienda online de ropa y zapatos conocida por su buen servicio de atención al cliente. Su principal prioridad en su sitio web diseñado para móviles es ayudar a que los usuarios puedan encontrar los artículos que desean comprar, por lo que han puesto una gran barra de búsqueda en la parte superior e inferior de la pantalla.

Captura de pantalla 2016-08-03 a las 9.22.40

Captura de pantalla 2016-08-03 a las 9.22.48

10. ABC

ABC es una empresa de radio y televisión conocida por espectáculos populares como “The Bachelorette”, “BattleBots,” y “General Hospital”. Los usuarios que visitan su sitio web de escritorio pueden navegar por un montón de opciones: consultar el horario de la televisión, echar un vistazo a los ganadores de los Oscar, o ver algunos de sus programas de televisión favoritos.

Pero ABC sabe que la experiencia móvil debe simplificarse. En su web optimizada para dispositivos móviles sólo ofrece una opción: desplazarse por las imágenes de gran tamaño que representan a los programas de televisión de la cadena.

Captura de pantalla 2016-08-03 a las 9.32.47

¿Quieres una web responsive optimizada para todo tipo de dispositivos?

¡Publica tu proyecto ahora y hazlo realidad!

Designed by Freepik


Talento freelance para lanzar tu negocio online. LanceTalent es un "freelance marketplace” donde emprendedores, autónomos, startups y pymes ejecutan sus proyectos online con los mejores profesionales freelance.

1 Comentario
  • posicionamiento sem tarragona
    octubre 17, 2016 a las 3:47 pm

    Me gusta leer y visitar blogs, aprecio mucho el contenido, el trabajo y el tiempo que ponéis en vuestros post. Buscando en en la red he encontrado tu web. Ya he disfrutado de varios post, pero este es muy interesante, es unos de mis temas predilectos, y por su calidad he disfrutado mucho. He puesto tu blog en mis favoritos pues creo que todos tus publicaciones son interesantes y seguro que voy a pasar muy buenos momentos leyendolos.

Publicar un Comentario