Ejemplos de diseño mobile-first
“El móvil se está convirtiendo no sólo en el nuevo centro digital, sino también en el puente con el mundo físico”, afirma Thomas Husson, vicepresidente y analista principal de Forrester Research. “Por eso el móvil afectará a algo más que a sus operaciones digitales: transformará todo su negocio”.
Pero, ¿qué es un sitio web apto para móviles? En este artículo, aprenderá todo sobre los sitios web adaptados a los dispositivos móviles y verá nueve de los mejores ejemplos de diseño de sitios web para móviles. Además, aprenderá a averiguar si su sitio web es apto para móviles.
En la imagen siguiente, puedes ver que el sitio web de escritorio tiene mucho espacio, los elementos de la página están dispuestos uno al lado del otro en algunos lugares, y el texto es relativamente pequeño en comparación con el tamaño de la pantalla.
En cambio, cuando se ve el sitio web en el móvil, los elementos de la página están apilados unos encima de otros en una larga columna, y hay menos espacio alrededor de cada elemento. Además, los botones son más grandes para facilitar su pulsación, y el texto es más grande en relación con el tamaño de la página para facilitar su lectura.
Sitios web móviles impresionantes
Todo empezó en 2013 con el auge de Snapchat, que ahora es una de las plataformas de redes sociales más populares del mundo. Snapchat creó una función única de “historias” que todo el mundo podía ver, pero solo durante un breve periodo de tiempo: la publicación desaparecía al cabo de 24 horas. Se convirtió en un gran éxito y los usuarios empezaron a interactuar con Snapchat incluso más que antes.
Las redes sociales se han convertido en una de las herramientas más eficaces para comercializar su negocio. Evidentemente, son muy poderosas y han demostrado ser útiles y baratas cuando se utilizan de forma orgánica. Sin embargo, el uso de las redes sociales puede resultar muy abrumador para las nuevas empresas, sobre todo si no saben cómo atraer seguidores y clientes.
Los mejores sitios web para móviles
Los motivos son, entre otros, los retos que plantean los costes y retrasos de la red, las limitaciones de la memoria y la CPU, y las diferencias de los teclados y dispositivos señaladores. Pero lo más importante es que cuentan con un conjunto de ventajas cada vez mayor gracias a su naturaleza personal y siempre disponible, y a sus capacidades cada vez más conscientes del contexto.
Varias de las barreras a las que se enfrentan los usuarios de móviles son similares a las que experimentan las personas con discapacidad. Estas similitudes hacen natural el objetivo de desarrollar sitios web que sean accesibles tanto para personas con discapacidad como para dispositivos móviles. Los dos documentos de referencia en este ámbito, las Pautas de Accesibilidad al Contenido en la Web (WCAG) y las Prácticas Recomendadas para la Web Móvil tienen, por tanto, una serie de vínculos y similitudes.
Inspiración para sitios web móviles
Shutterfly es un servicio online que permite a los usuarios crear álbumes de fotos, tarjetas personalizadas, artículos de papelería y otros productos similares. Debido a que cada vez más personas hacen fotos y acceden a ellas con sus smartphones, Shutterfly reconoció la necesidad de crear una gran experiencia móvil para sus clientes.
Shutterfly logra dos objetivos clave en su sitio web para móviles. 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.
Desplácese hacia abajo y verá botones grandes que facilitan a los usuarios la selección rápida del tipo de producto que les interesa. Una vez que los usuarios hacen clic en una de esas opciones, son recibidos con grandes fotos que muestran lo que Shutterfly es capaz de hacer para facilitar la navegación.
Estas capturas de pantalla están tomadas de su sitio web para móviles, pero si estás familiarizado con la aplicación, te darás cuenta de que son exactamente iguales. No sólo la apariencia es idéntica, sino que el sitio web para móviles tiene la velocidad y la funcionalidad de la aplicación.