Dominio de la Web para dispositivos móviles: 25 consejos sobre diseño para dispositivos móviles

Hace poco leí que se espera que para el añoeste año haya más usuarios que accedan a Internet a través de dispositivos móviles que de computadoras de escritorio o portátiles. Es algo bastante sorprendente y significa que ahora más que nunca, nosotros, como diseñadores, deberíamos considerar diseñar y desarrollar para usuarios móviles. Se ha convertido en una necesidad que seguirá creciendo. Así que veamos algunos consejos sobre el diseño para dispositivos móviles.

¿Sitio web o aplicación?

Esa es la cuestión. Una aplicación tiene sus ventajas principalmente en la experiencia del usuario, el uso potencial sin conexión y la retención de clientes. Pero si consideramos un diseño y desarrollo más profundos para aplicaciones en plataformas móviles, este artículo se centrará en los sitios web móviles. Lo más probable es que desarrolle sitios web móviles para su base de clientes, a menos que tengan clientes muy comprometidos con su marca que probablemente justifiquen la descarga e instalación de una aplicación. Los sitios web móviles son más fáciles y rápidos de desarrollar e implementar. También son accesibles desde cualquier dispositivo con capacidad de navegación web.

Diseño para un tamaño de pantalla más pequeño

Al diseñar para pantallas de dispositivos móviles, debes tener en cuenta el tamaño más pequeño de la pantalla. Esto será difícil para aquellos de nosotros que estamos acostumbrados a diseñar para monitores HD grandes con capacidad para mostrar gráficos a 1920X1200 o más. El iPhone 4 actual tiene una resolución de 640 x 960, y el iPad un poco más alta, 1024 x 768. Pero esas resoluciones son altas en comparación con otros dispositivos. Algunos de los teléfonos Android y Blackberry tienen un tamaño de pantalla de 320x240. Eso es considerablemente más pequeño de lo que estamos acostumbrados a diseñar, pero es fundamental tenerlo en cuenta al diseñar tu sitio web para dispositivos móviles.

Considere la mala conectividad

Recuerda que hace unos años, antes de que hubiera Internet de banda ancha disponible en cada cafetería, los diseñadores web tenían que tener en cuenta la conexión de los usuarios al optimizar las imágenes y los vídeos para que se cargaran más rápido. Deberás hacer lo mismo al diseñar tu sitio para móviles. Los proveedores de servicios están ofreciendo velocidades más rápidas todo el tiempo, pero la cobertura sigue siendo irregular en el mejor de los casos en algunas zonas. Además, algunos usuarios, que no tienen planes de datos ilimitados, pagan por las descargas de datos. Por eso, como desarrolladores, debemos recordar aquellos primeros días de los módems. Deberás reducir el código y eliminar etiquetas y comentarios innecesarios. Mantén las imágenes pequeñas y comprimidas para que los tiempos de descarga sean más ligeros.

Elija una URL diferente para su sitio móvil

Si está creando un sitio completamente independiente para dispositivos móviles, considere elegir una URL para el nuevo sitio. Por ejemplo, http://www.yoursite.com/mobile o, si puede agregar subdominios personalizados a su dominio existente, pruebe algo como http://mobile.yoursite.com. Mantener una estructura simple como la anterior para su URL ayuda a que la experiencia del usuario sea más fácil de seguir y recordar.

Detectar y redirigir a los usuarios

Detectar si un usuario es móvil o no y enviarlo al sitio correcto es importante para mantener una experiencia fluida. Una buena forma de detectar un dispositivo es utilizar la base de datos WURFL . WURFL es una base de datos disponible en la web que recopila información sobre todos los dispositivos móviles que existen. El proyecto WURFL tiene API para varios lenguajes de programación. Yelitza Jaramillo ha escrito un excelente artículo sobre el uso del paquete API de PHP para WURFL . Si tienes tu propio método para la detección de dispositivos, no dudes en compartirlo en los comentarios a continuación.

Considere una estructura de página de 1 columna optimizada para dispositivos móviles

Cuando se carga una página en un teléfono, normalmente se amplía al máximo para que quepa en la pantalla. Las pantallas de la mayoría de los teléfonos son tan pequeñas que no se puede leer la página hasta que se amplía. Esto no es ideal porque genera más pasos para el usuario mientras lee el contenido. Por lo general, tendrán que desplazarse tanto vertical como horizontalmente mientras leen. En su lugar, intente implementar un diseño de una columna que se ajuste a la pantalla de un dispositivo móvil. Es probable que el usuario aún tenga que desplazarse, pero solo verticalmente.

Simplifique y optimice su contenido

Nuevamente, piense en algo simple y liviano. Mantenga una mentalidad de menos es más al organizar el contenido y la estructura de la página. Considere eliminar enlaces y contenido adicionales que no estén dentro del área de contenido principal. Los elementos que se encuentran típicamente en la barra lateral o el pie de página de los sitios tradicionales a menudo se pueden eliminar para que el enfoque se optimice y simplifique. Al eliminar este tipo de contenido, también está reduciendo el tamaño de la página y el tiempo de carga, lo cual es un aspecto importante del diseño de páginas para dispositivos móviles.

Reduzca la navegación y la entrada de usuarios

La entrada de datos por parte del usuario puede resultar difícil en algunos teléfonos. No es tan rápida como un teclado tradicional y los usuarios son más propensos a cometer errores. Teniendo en cuenta esto, podemos realizar algunos ajustes para reducir la cantidad de entrada necesaria por parte del usuario. Por ejemplo, se puede extraer información de la cuenta existente de un usuario durante un proceso de pago. La navegación se puede reducir a un menú desplegable. También podemos aprovechar la funcionalidad integrada de un teléfono, consulte más información sobre esto a continuación.

Evite los tamaños absolutos

Al diseñar para pantallas más pequeñas, evita definir dimensiones en píxeles absolutos. Por ejemplo, si defines un ancho deeste añopíxeles, es posible que esa sea la mayor parte de la pantalla en algunos teléfonos. Intenta usar tamaños relativos, como ems y porcentajes, para que el tamaño se ajuste automáticamente.

Evite desplazarse... ¿En serio?

En mi opinión, no se puede evitar el desplazamiento en la mayoría de los casos, dado el tamaño de pantalla más pequeño de los dispositivos móviles, pero se pueden realizar algunos ajustes para reducirlo. Lo ideal es crear un diseño de una columna como el mencionado anteriormente para mantener el desplazamiento vertical. Reducir la cantidad de imágenes y contenido adicional en la página es otra buena sugerencia. También se debe considerar el contenido adicional en el encabezado, como logotipos y navegación, ya que estos pueden empujar el contenido hacia abajo en la página y provocar un desplazamiento innecesario.

Diseño para pantalla táctil

Las pantallas táctiles de los teléfonos inteligentes ayudan a mejorar la experiencia del usuario, excepto cuando se trata de pulsar botones muy pequeños y enlaces de texto. Los dedos suelen ser demasiado anchos para pulsar con precisión un enlace de texto pequeño. Para enlaces y navegación importantes, considere utilizar botones grandes que abarquen todo el ancho de la pantalla.

Cómo elegir la fuente adecuada para su contenido

Con la posibilidad de incorporar fuentes en nuestras páginas web, es fundamental elegir una fuente que sea legible en una pantalla pequeña. Evite las fuentes manuscritas o de escritura a mano, incluso para títulos o textos que se pretende que sean más grandes. Incluso los textos más grandes se ven pequeños en un teléfono. Considere también la cantidad adecuada de espacio entre letras y líneas para que su contenido sea lo más legible posible.

Flash, Java, marcos y ventanas emergentes ya no están disponibles

La mayoría de los dispositivos móviles no son compatibles con Flash, Java Applets, frames y pop ups. Evite estas tecnologías al desarrollar su sitio móvil. Si está casado con Flash, ahora puede ser el momento de cortar el cable. Con el reciente anuncio de Adobe de que ha dejado de desarrollar Flash Player para navegadores en dispositivos móviles.

¿Más de un sitio móvil?

La capacidad de detectar los tipos de dispositivos plantea la cuestión de si conviene o no desarrollar más de un sitio móvil. Por ejemplo, es posible que desee crear un sitio para teléfonos inteligentes más modernos, como iPhone y Android, y un sitio aún más reducido para teléfonos más antiguos y menos potentes. Al hacerlo, ha creado una experiencia adaptada al dispositivo del usuario.

Utilice las funciones integradas de los teléfonos a su favor

Aquí es donde puedes aprovechar la posibilidad de ver tu sitio desde un teléfono móvil. Los teléfonos pueden hacer cosas que las PC no pueden, así que úsalos siempre que sea posible para mejorar la experiencia de tus usuarios. Por ejemplo: - Haz que los números de teléfono se puedan seleccionar para hacer una llamada. - Dale al usuario la posibilidad de encontrarte en un mapa, o encontrar el lugar más cercano para encontrar tu producto, etc. - Utiliza funciones especiales como el escaneo de códigos QR o de barras.

Una mirada al CSS móvil

A continuación, se ofrecen algunos consejos generales para tener en cuenta en CSS al diseñar para dispositivos móviles. - Establezca el ancho de los contenedores en porcentajes en lugar de anchos fijos para que su página se ajuste a varios tamaños de pantalla. - Establezca párrafos, encabezados y navegación para mostrar bloques que llenen la pantalla. - Safari para dispositivos móviles no es totalmente compatible con @font-face. - Eche un vistazo a las consultas de medios CSS3 para crear una versión móvil de su sitio. - Recuerde mantener las cosas simples y optimizadas.

Diseño para iPhone

El iPhone tiene una porción significativamente grande de la cuota de mercado en lo que respecta a dispositivos móviles. Al crear sitios específicamente para iPhone, deberá tener en cuenta el tamaño de la pantalla. El tamaño de la pantalla está configurado en 320 px por 480 px para iPhones más antiguos y 640 px por 960 px para iPhone 4 y iPhone 4S. Mediante consultas de medios CSS3, puede agregar estilos a la hoja de estilos principal de su sitio que solo afectarán al iPhone.

Tenga en cuenta la orientación del dispositivo

Con los iPhones y otros teléfonos inteligentes modernos, puedes cambiar la orientación de la pantalla de vertical a horizontal inclinando el teléfono hacia un lado. Esta es una razón más para mantener el diseño de tu sitio fluido, de modo que llene el espacio sin importar la orientación de las pantallas.

jQuery móvil

Si eres un desarrollador front-end, ya estás familiarizado con el poder de jQuery y su mentalidad de escribir menos y hacer más. Lo mismo ocurre con el nuevo jQuery Mobile . Un sistema de interfaz de usuario unificado basado en HTML5 para todas las plataformas de dispositivos móviles populares, construido sobre la sólida base de jQuery y jQuery UI. Su código liviano está construido con mejoras progresivas y tiene un diseño flexible y fácilmente personalizable. Vale la pena considerar seriamente este marco si planeas desarrollar una experiencia de usuario sólida dentro de tu sitio móvil.

Kits y iconos de interfaz de usuario para dispositivos móviles

Si su cerebro se inclina un poco más hacia el lado del desarrollo de las cosas en lugar del mundo del diseño, no tema. Hay muchos kits de interfaz de usuario de stock disponibles para la web móvil. Kit de íconos de aplicaciones para iPhone gratis Kit de interfaz de usuario móvil oscura Kit de interfaz de usuario para iPhone nuevo Kit de interfaz de usuario 3D brillante

Herramientas para el desarrollo móvil

PhoneGap Su plataforma permite construir fácilmente aplicaciones basadas en HTML5 como aplicaciones nativas en 6 plataformas diferentes. RhoMobile El eslogan ?una base de código, cada smartphone? prácticamente lo dice todo.

Edición móvil de WordPress para usuarios de WP

Si eres fanático de WordPress, existen varios complementos compatibles con dispositivos móviles. Uno en particular se destaca. WordPress Mobile Edition es un complemento que muestra una interfaz diseñada para dispositivos móviles cuando los visitantes ingresan a tu sitio desde un dispositivo móvil. Los navegadores móviles se detectan automáticamente y la lista de navegadores móviles se puede personalizar en la página de configuración.

Cómo probar su sitio web móvil

Realizar pruebas en dispositivos móviles puede ser una tarea enorme, especialmente porque es poco probable que tengas docenas de teléfonos móviles diferentes con los que realizar pruebas. En este caso, te presentamos Opera Mobile Emulator , que es compatible con unaseste añolataformas diferentes.

Ejemplos increíbles de sitios web móviles

¿Buscas inspiración? No busques más. A continuación, te mostramos algunos ejemplos increíbles de sitios web para dispositivos móviles.