StatCounter Mobile OS Stats

Diseño web móvil: consejos y mejores prácticas

El año pasado, más de 63 millones de personas en los Estados Unidos accedió a Internet desde un dispositivo móvil. Es pronóstico que para 2013 habrá más de 1.700 millones de usuarios de Internet móvil en todo el mundo. Con ese tipo de números, es imperativo que los diseñadores y desarrolladores web aprendan prácticas óptimas de desarrollo y diseño para dispositivos móviles. En su mayor parte, no necesitará aprender nada nuevo tecnologías para el diseño de sitios móviles. Pero deberá ver el diseño del sitio de una manera nueva, que es decididamente más restrictiva que el diseño para navegadores estándar. Para solucionar los problemas que presenta el diseño del sitio móvil y obtener un resultado que sea tan fácil de usar y útil como su sitio estándar, se requieren algunas habilidades creativas para resolver problemas. También puede consultar el siguiente artículo relacionado:

Familiarícese con el hardware y el software disponibles

Las plataformas de teléfonos celulares y dispositivos móviles varían mucho en lo que respecta al sistema operativo, el tamaño de la pantalla, la resolución y la interfaz de usuario. Para poder decidir para qué plataforma(s) desea optimizar su sitio, sería útil familiarizarse con las diferentes opciones disponibles. Los sistemas operativos más comunes en uso son Windows Mobile, la plataforma iPhone, Palm OS, Mobile Linux, Symbian OS, la plataforma BlackBerry y Android (que está a punto de crecer mucho más gracias a un acuerdo reciente entre Verizon y Google). Hay otros sistemas patentados específicos para teléfonos particulares, como los que se encuentran en algunos teléfonos de Verizon y marcas específicas de teléfonos. Puede estimar, en función del tipo de audiencia a la que se dirige su sitio, qué sistemas operativos es más probable que utilicen sus usuarios. Si sus visitantes son en su mayoría usuarios comerciales, deberá optimizar su sitio para dispositivos Windows Mobile y BlackBerry. Si sus usuarios son más jóvenes, más modernos o más expertos en tecnología, querrá que su sitio esté optimizado para dispositivos iPhone y Android. En cualquier caso, asegúrese de que su sitio sea al menos utilizable en la mayoría de las plataformas móviles.

Estadísticas globales de StatCounter: los 8 principales sistemas operativos móviles

Los navegadores móviles son otro factor a considerar. Algunos de los navegadores más comunes incluyen Safari para iPhone, navegador Android, Opera Mobile, navegador WebOS (en dispositivos Palm), navegador BlackBerry e Internet Explorer Mobile (en dispositivos Windows Mobile). Hay navegadores adicionales en uso en Nokia y en otras marcas de teléfonos. Algunos de estos navegadores se basan en código propietario, mientras que otros se basan en WebKit (Android, Safari), Gecko (Fennec, un navegador de Mozilla) u otras plataformas comunes.

Estadísticas globales de StatCounter: los 9 principales navegadores móviles

Estadísticas del navegador móvil StatCounter

Finalmente, debe considerar el tamaño y la resolución de pantalla más comunes de los visitantes de su sitio. Su sitio debe funcionar en la gama más amplia de dispositivos móviles que puedan estar utilizando sus visitantes. Las resoluciones comunes para teléfonos celulares estándar incluyen 101×80 píxeles (muchos teléfonos Sony Ericsson), 128×128 píxeles (algunos teléfonos Samsung) y 120×160 píxeles (muchos teléfonos Motorola). Para los teléfonos inteligentes, hay mucho más con lo que trabajar. El iPhone tiene una pantalla de 320×480 píxeles; el HTC Touch Pro tiene una pantalla de 480×640 píxeles; la Palm Pre tiene una pantalla de 320×480 píxeles; el BlackBerry Storm tiene una pantalla de 360×480 píxeles; y el HTC Venus tiene una enorme pantalla de 800×480 píxeles. Muchas de estas pantallas pueden mostrar cómodamente un sitio web estándar.

¡Simplificar!

Su sitio móvil, en la mayoría de los casos, debería ser más simple que su sitio estándar. La única excepción a esto es si su sitio estándar ya es muy minimalista. La eliminación de elementos gráficos de su sitio suele ser una forma eficaz de optimizar su visualización en un dispositivo móvil. Busque formas de simplificar tanto el diseño como la funcionalidad de su sitio. Esto podría significar rehacer sus menús, eliminar imágenes, dividir el texto en varias páginas o volver a trabajar en el diseño y la funcionalidad de su sitio.

Ejemplos

Una lista aparte móvil

Una lista aparte

La cebolla

La cebolla

amazon.com

Tienda Amazon Kindle

Usar marcado válido

Teniendo en cuenta la variedad de posibles sistemas operativos y navegadores desde los que las personas pueden acceder a su sitio, los estándares web se vuelven aún más vitales. Los navegadores estándar son, en su mayor parte, muy indulgentes con el código incorrecto, pero con un navegador móvil a menudo no tendrá ese tipo de margen de maniobra. Asegúrese de que su código validado sea lo más limpio y minimalista posible.

Ofrezca a los usuarios la opción de visitar el sitio estándar

Según el tipo de dispositivo que utilicen sus visitantes, es posible que solo deseen utilizar su sitio web estándar. Esto es particularmente cierto con muchos de los mejores teléfonos inteligentes y el iPhone, el último de los cuales hace un excelente trabajo al mostrar sitios web estándar sin problemas. Ofrezca a sus visitantes móviles la opción de visitar el sitio estándar, incluso si es solo a través de un enlace en el pie de página (donde la mayoría de nosotros ya estamos predispuestos a buscar). Además, podría darles la opción de volver al sitio móvil sin tener que usar el botón Atrás.

Ejemplos

Geek clan

Geek clan

Julián Andrade

Julián Andrade
Clima subterráneo

Clima subterráneo

Use un tema móvil separado

Si bien optimizar su sitio principal para uso móvil a veces tiene sentido, a menudo es más fácil usar un tema móvil separado, lo que se puede hacer en la mayoría de los CMS cambiando el CSS para dispositivos móviles. Un tema móvil dedicado significa que realmente puede tener en cuenta cómo sus visitantes verán su sitio y optimizarlo específicamente para ellos. Algunos sitios tienen un diseño optimizado para dispositivos móviles normales y otro para usuarios de iPhone.

Ejemplos

Punto de juego

Punto de juego

mermelada en pan tostado

mermelada en pan tostado

vigilantes

Vigilantes Reino Unido

Limite el desplazamiento a una dirección

Es realmente molesto tener que desplazarse en varias direcciones en una página web cuando se usa un navegador estándar. Eso no cambia cuando estás visitando desde un dispositivo móvil; de hecho, es peor. Es muy fácil desplazarse accidentalmente de manera incorrecta (horizontalmente en lugar de verticalmente o viceversa) cuando se usa un teléfono con pantalla táctil. Si su sitio solo se desplaza en una dirección, elimina la posibilidad de tal molestia.

Ejemplos

Disney

Disney

Taltopía

Taltopía

Mogreet

Mogreet

No use ventanas emergentes ni abra nuevas ventanas

Dependiendo de la plataforma en particular, las ventanas emergentes y nuevas pueden interferir con la experiencia de navegación, así que no las use. Si necesita absolutamente algo para abrir en una nueva ventana, asegúrese de alertar a sus visitantes móviles de que lo hará.

Minimice el uso de imágenes

Use solo las imágenes que necesita para transmitir su mensaje. Un logotipo está bien, al igual que la mayoría de los iconos. Las imágenes que son parte integral del contenido de su sitio también están bien. Pero elimina las imágenes que no sirven para nada más que verse bonitas. Por lo general, no se verán bonitos en un dispositivo móvil de todos modos, entonces, ¿por qué molestarse? Y a veces solo hacen que su sitio se vea peor, o causan problemas extraños de desplazamiento o diseño si la resolución es diferente a la que esperaba.

Ejemplos

radio paraíso

radio paraíso

Información de Raleigh

Información de Raleigh

Topix

Topix

Optimice su navegación

Muchos dispositivos móviles tienen interfaces de pantalla táctil, así que trate de diseñar con eso en mente. Eso significa hacer que el área en la que se puede hacer clic alrededor de sus enlaces sea un poco más grande, hacer que los botones sean más grandes y poner más espacio entre los enlaces. Tratar de hacer clic en enlaces diminutos y apenas visibles es una verdadera molestia, y tener que hacer zoom cada vez que quieres hacer clic en algo no lo hace mucho mejor. Para mejorar estos problemas de navegación, muchos sitios utilizan un diseño de navegación móvil completamente independiente, optimizado para pantallas táctiles o dispositivos de entrada sin mouse.

Ejemplos

Seguro moderno americano

Seguro moderno americano

1M creativo

1M creativo

Horóscopo diario

Horóscopo diario

No confíe en Flash o JavaScript

No todos los teléfonos y dispositivos móviles admiten Flash o JavaScript. Incluso si lo hacen, no hay garantía de que sea la versión más reciente. Y olvídate de Flash si tus visitantes usan un iPhone. Asegúrese de que toda la información y las funciones importantes de su sitio móvil estén en (X)HTML/CSS sin formato. De lo contrario, corre el riesgo de que una gran parte de sus visitantes no puedan acceder a contenido importante.

Incluya tanto contenido de su sitio estándar como sea práctico

¿Cuántas veces ha ido a un sitio web favorito desde su teléfono y luego se ha dado cuenta de que no puede llegar a la parte que quería visitar? Pasa todo el tiempo. Incluya tanto contenido del sitio original como sea posible en su sitio móvil. Además de ponerlo a disposición, asegúrese de que la ruta de navegación para llegar a él también permanezca relativamente sin cambios.

Ejemplos

La línea de die

La línea de die

yahoo! Móvil

yahoo!  Móvil

Volkswagen

Volkswagen

Asegúrese de que las redirecciones funcionen correctamente

No solo envíe a los usuarios móviles a su página de inicio. No hay nada más molesto que hacer clic en un enlace, ya sea en los resultados del motor de búsqueda o desde otro sitio web, y que lo redirija a la página de inicio si está en un dispositivo móvil. Si su sitio detecta automáticamente si un visitante proviene de un navegador móvil, asegúrese de que esté configurado para enviar a ese visitante al enlace que estaba tratando de visitar, de lo contrario, es probable que se vaya y nunca regrese.

Más recursos

#Diseño #web #móvil #consejos #mejores #prácticas

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada.