1. Sea receptivo. “Utilice un marco tecnológico receptivo”, dice Copley Broer, CEO de LandlordStation, que desarrolla software de administración de propiedades. “Hay varios de estos disponibles (utilizamos Bootstrap).
Estos marcos son básicamente formas simples de diseñar elementos en una cuadrícula y luego cambiar esa cuadrícula en función de diferentes tamaños de pantalla, de modo que los elementos en un monitor grande estén espaciados tan bien como lo estarían en un iPad [o teléfono inteligente], “Broer dice: “Los marcos como Bootstrap son de código abierto (gratis), bien documentados y muy fáciles de implementar”.
“Responsive es un enfoque más unificado para el desarrollo web que le permite crear una experiencia similar para el usuario, independientemente de cómo acceda al sitio (computadora de escritorio, tableta o teléfono inteligente)”, agrega Kevin Janosz, COO, RITTA, un departamento de marketing y publicidad. agencia.
- Cómo usar los artículos de otro sitio web para mi propio
- ¿Cuál es el mejor sitio web para tener como página de inicio?
- Deseo crear sitios web inmersivos, ¿cómo puedo proceder para hacerlo?
- ¿Cómo puedo clasificar mi sitio?
- ¿Qué sitio web tiene el peor diseño?
“Además de ser una mejor experiencia de usuario en todos los dispositivos, consolida su sitio web para que no necesite una URL móvil separada, tiene beneficios de SEO y también es mucho más fácil de administrar”, dice Janosz.
2. Piensa con tu pulgar (o dedo índice). “Asegúrese de que su sitio sea completamente navegable con un pulgar y no requiera pellizcos para usarlo”, dice Marc Weisinger, director de Marketing, Elite SEM, una empresa de marketing de motores de búsqueda.
“Este es uno de los consejos más importantes para cualquier sitio móvil, ya que desea que los usuarios puedan navegar por su sitio con su ‘mano de teléfono’ sin el uso de una segunda mano. Además, si tiene que pellizcar para hacer zoom, su contenido es probablemente demasiado pequeño o no esté perfectamente optimizado para ese dispositivo de navegación “, dice Weisinger
“La mayoría de los usuarios que visitan un sitio web móvil usarán un dispositivo con pantalla táctil, así que asegúrese de que los botones y la navegación del menú sean lo suficientemente grandes incluso para los dedos gordos”, dice Dean Hume, CTO, Hire Space, un sitio web de reserva de lugares. “Con demasiada frecuencia, un sitio web amigable para dispositivos móviles simplemente cambiará el tamaño de la pantalla usando CSS (consultas de medios) y no tendrá en cuenta que los dedos pueden causar clics fuera de lugar”.
Del mismo modo, “cuando diseñe para interfaces móviles, debe hacer que sus objetivos sean lo suficientemente grandes como para ser fácilmente seleccionables”, dice Mark Rattin, director creativo ejecutivo de Lyons Consulting Group. “El dedo índice promedio para la mayoría de los adultos es de 15 a 20 mm, lo que se traduce en 45 a 57 píxeles. Nuestra ‘regla práctica’ (juego de palabras) es dar a los botones o elementos de al menos 45 píxeles de espacio para las áreas de selección”. él dice. “Esto permite que los objetivos en pantalla puedan seleccionarse fácilmente y elimina muchos de los toques accidentales de la experiencia del usuario”.
3. Mantenga el diseño simple. “Un diseño limpio y una copia enfocada pueden ser muy útiles”, señala Michael LaVista, fundador y CEO de Caxy Interactive, una compañía de diseño y desarrollo de aplicaciones. “Recuerde que solo tiene unos segundos para transmitir quién es como empresa. Esto es cierto para cualquier diseño de sitio web, pero es particularmente importante cuando está diseñando para dispositivos más pequeños”.
Demasiadas campanas y silbatos (es decir, gráficos, copias, videos) pueden obstaculizar la capacidad del sitio para cargar rápidamente y distraer su mensaje. Si planea usar imágenes, “intente y sirva imágenes que son más pequeñas en tamaño de byte, ya que esto reducirá la cantidad de tiempo que los usuarios pasan esperando que se cargue la página”, aconseja Hume.
4. Mantenga el contenido breve y dulce. “La gente a veces se enamora de su contenido [del sitio web] y hace que el sitio móvil esté demasiado abarrotado”, dice Broer. Así que “descubra cómo contar su historia con menos palabras”.
“Tenga cuidado con el texto”, aconseja Yaniv Masjedi, vicepresidente de marketing de Nextiva, un proveedor de servicios telefónicos. “La pantalla de un teléfono inteligente es mucho más pequeña que la de una computadora de escritorio, así que trate de minimizar la cantidad de texto en su sitio web móvil. Los usuarios móviles están interesados en desplazarse rápidamente, por lo que deben incluir solo copias esenciales para mantener la atención del lector”.
5. Recuerde, un ícono vale más que mil (o, bueno, una docena) palabras. “Para evitar que su sitio se vea desordenado, use [iconos] móviles convencionales, en lugar de palabras para tocar, llamar, conectarse socialmente o encontrar el menú”, sugiere James Ramsey, CEO, Fiddlefly, una agencia creativa digital. “El uso de estos símbolos ayuda a los espectadores a saber que el sitio está optimizado para dispositivos móviles”.
6. Hazlo rápido: sirve imágenes optimizadas para dispositivos móviles. “La Web móvil es considerablemente más lenta que su FiOS y sus primos alimentados por cable”, señala Jay Melone, CEO, New Haircut, una agencia de diseño web. “Los EE. UU. En particular ocuparon el segundo lugar desde abajo para nuestras velocidades LTE, con promedios que rondan los 6,5 Mbps”, dice.
“Así que asegúrese de eliminar los archivos multimedia pesados que existen en su sitio de escritorio, como los videos”, dice Melone. “Utilice las consultas de medios para reutilizar las imágenes listas para la retina de su sitio de escritorio en versiones de menor resolución. Y considere reemplazar las voluminosas bibliotecas de JavaScript como jQuery Mobile con JavaScript independiente”.
“Las resoluciones de dispositivos móviles y las relaciones de aspecto están muy fragmentadas, [van desde 240 x 320 a 2560 x 1440 y más”, dice Itai Lahan, CEO, Cloudinary, una solución de gestión de imágenes para aplicaciones web y móviles.
“Considere también que los dispositivos móviles que operan bajo una red 3G todavía están considerablemente rezagados en las velocidades de descarga y que muchos usuarios móviles pagan por el uso del ancho de banda. Tener en cuenta todo esto significa que es crucial cambiar el tamaño, recortar y optimizar las imágenes para mejor ajusta la resolución específica del dispositivo y la relación de aspecto “, dice Lahan. “Esto puede ahorrar una gran cantidad de ancho de banda, reduciendo drásticamente los tiempos de carga de páginas web móviles y mejorando en gran medida la experiencia de navegación de los visitantes”.
7. No te excedas con Java. “Evite el JavaScript excesivo en sus sitios web móviles cuando sea posible, porque se ejecuta de manera diferente en diferentes navegadores y dispositivos”, dice Hume. “Incluso los diferentes modelos del mismo teléfono a menudo pueden comportarse de manera bastante diferente cuando se trata de JavaScript”, dice. “Esto no quiere decir que no deba usar JavaScript, sino que sea inteligente al respecto y tenga en cuenta que podría afectar el rendimiento de su sitio optimizado para dispositivos móviles”.
8. Facilite encontrar su número de teléfono, ubicación e información de contacto. “Tenga en cuenta el contexto en el que su sitio se utilizará en dispositivos móviles”, dice Anthony Overkamp, director creativo de Engage, una firma de diseño y desarrollo de servicio completo.
“A menudo, los usuarios buscan horas de la tienda, un número de contacto o de reserva o tal vez la ubicación más cercana de la empresa. Cuanto más fácil sea para los usuarios acceder y tomar medidas sobre esta información, mejor será la experiencia del usuario”, dice Overkamp.
9. Considere el video, pero agréguelo sabiamente. “El video es absolutamente imprescindible para cualquier sitio móvil”, argumenta Russ Somers, vicepresidente de marketing de Invodo, un proveedor de contenido y estrategia de video. “Eso se debe a que los consumidores que usan dispositivos móviles tienen tres veces más probabilidades de ver videos que los usuarios de computadoras portátiles / de escritorio”, dice.
Dicho esto, “use una tecnología de video que brinde una experiencia móvil impecable. Su reproductor de video móvil debe ejecutar HTML5 para garantizar que pueda reproducirse en la mayoría de los dispositivos móviles”, aconseja Somers. “Además, use un reproductor de video que sea liviano (no consume recursos de procesamiento y ancho de banda valiosos) para que pueda mejorar significativamente el tiempo de carga de la página y proporcionar una mejor experiencia general”.
10. Asegúrese de que los formularios estén diseñados para dispositivos móviles. “Solicite la cantidad mínima de información que necesita para ponerse en contacto con un cliente potencial”, sugiere Zubin Mowlavi, CEO, Lucid Fusion, una empresa de diseño web y marca.
“Minimice la cantidad y el tamaño de los campos de formulario tanto como sea posible y aproveche la tecnología integrada en los dispositivos móviles para optimizar la usabilidad”, dice Mowlavi. “Por ejemplo, generalmente se puede acceder al GPS. Así que no le pidas a alguien que ingrese su ciudad, estado y código postal si puedes rellenarlo”.
11. Considere la geolocalización. “Aproveche las capacidades móviles como la geolocalización”, dice Michael Read, socio fundador y CEO, The Level, una agencia de diseño y desarrollo web. “Las empresas pueden usar la geolocalización para dar instrucciones, permitir a los visitantes verificar la disponibilidad en la tienda en la tienda más cercana, ofrecer promociones específicas, ofrecer precios a los compradores en línea en su moneda local y conectarse con comunidades sociales como Yelp”.
12. Realice una prueba para asegurarse de que su contenido se pueda ver correctamente en diferentes dispositivos, plataformas y sistemas operativos. “Recuerde probar la experiencia del usuario móvil por sistema operativo para mejorar la experiencia general del sitio con las pruebas de usabilidad”, dice Debbie Carkner, vicepresidenta de Ecommerce Strategy, SMITH, una agencia de experiencia digital.
