Desarrollo web móvil: ¿Qué significa que un sitio web esté “optimizado para iPad” (u otras tabletas)?

Gran pregunta! Hay dos consideraciones al optimizar para iPad y otras tabletas. El primero es la experiencia del usuario , y el segundo es el rendimiento . Necesitará ambos para cumplir con los objetivos de su sitio web.

Experiencia de usuario

Con la optimización de la tableta, puede abordar las deficiencias del sitio central que hacen que un sitio sea difícil o inutilizable en dispositivos de tableta. Muchos sitios no necesitan ir más allá de esto, solo necesitan algunos ajustes.

El enfoque alternativo para la optimización es una experiencia de tableta inmersiva. Adoptar un enfoque inmersivo muestra su sitio web y su marca de una manera única y lo diferencia de otros sitios web que los visitantes de tabletas ven en su navegación diaria. Una experiencia inmersiva bien diseñada dará sus frutos en el aumento de visitas, mayores conversiones de objetivos y una disminución de la tasa de rebote.

Estas son algunas optimizaciones específicas de la experiencia del usuario:

Piense en cómo se usa una tableta
Considere cómo su visitante sostiene la tableta. Las áreas de objetivo táctil más accesibles de su sitio se encuentran en las esquinas inferior izquierda e inferior derecha a las que pueden acceder los pulgares de los usuarios cuando el dispositivo se sostiene con las dos manos. Las interacciones cerca de la parte superior de la pantalla requieren que un visitante sostenga el dispositivo con una mano, alcance y toque. Esto no significa que no deba colocar objetivos fuera de las regiones accesibles del pulgar, pero es algo a tener en cuenta. Las experiencias de tableta inmersiva aprovecharán estas regiones táctiles ideales.

Eliminar el desplazamiento horizontal
Es posible que no haya diseñado su sitio web con un sistema de cuadrícula de 960 píxeles en mente. Esto dará como resultado una ventana de visualización que sea más grande que el píxel del dispositivo, llamada desbordamiento horizontal. Esto puede estar bien pero no es óptimo. El impacto que esto tenga en su sitio depende de cuánto desplazamiento se requiera y qué información se haya eliminado de la pantalla. Para una experiencia inmersiva, debe diseñar el texto de manera que no requiera ninguna acción de pellizco / desplazamiento horizontal / zoom del usuario y elimine el desplazamiento horizontal.

Minimiza el desplazamiento vertical
El desplazamiento vertical debe minimizarse. Las experiencias inmersivas tendrán un uso juicioso de elementos de acordeón para ocultar la funcionalidad menos visitada en páginas complejas. Recuerde que ocultar información o construir jerarquías de información profunda es algo que debe hacerse con precaución. Puede ayudar u obstaculizar dependiendo de qué tan bien se haya pensado.

Probar diseños de retratos y paisajes
Su visitante puede estar sosteniendo el dispositivo en orientación vertical u horizontal. ¡Nunca obligue a los visitantes a mantenerlo de una forma u otra para visitar su sitio! Las experiencias inmersivas pueden ofrecer una funcionalidad adecuada para una u otra orientación.

Texto del documento
En muchos casos, querrá que su texto tenga una fuente un poco más grande que en el sitio de escritorio. No desea que sus usuarios entreciernen en una tableta de 7 “y preferiblemente no deberían necesitar hacer zoom. Una experiencia inmersiva puede incluir un widget que guarda una cookie persistente para permitir a los visitantes ajustar el tamaño de fuente sin hacer zoom, ya que esto le da control sobre el experiencia del usuario, lo que está en pantalla y fuera de la pantalla, y permite a los visitantes que regresan ver el sitio con sus preferencias configuradas.

Amplíe los objetivos táctiles, incluidos los enlaces y los campos de entrada (botones de opción, casillas de verificación, botones regulares y otros elementos interactivos)
Estos deben ser fáciles de tocar para el usuario y difíciles de tocar accidentalmente en la cosa incorrecta.
Evita que tus enlaces estén demasiado juntos. Idealmente, más allá del ancho de un pulgar. Una experiencia inmersiva curará exhaustivamente cómo se distribuyen los enlaces.

Problemas clave de diseño
Algunos sitios tienen elementos superpuestos y otros problemas de diseño en tabletas. Estos deben manejarse caso por caso.
Elementos posicionados incorrectamente, generalmente debido al envoltorio. Puede deberse a un mayor tamaño de fuente para la tableta.
Una experiencia inmersiva también volverá a visitar la arquitectura de la información del sitio, teniendo en cuenta los casos de uso de un usuario típico de una tableta en relación con el propósito del sitio web. La única filosofía web es hacer que todo el contenido esté disponible en todas las plataformas, pero siempre hay compensaciones y un excelente sitio web facilitará la realización de las actividades más comunes.

Posicionar elementos fijos
Posicionar elementos fijos puede no funcionar como está diseñado en el escritorio Requiere pruebas y una buena comprensión de los dispositivos de destino, preferiblemente guiados por análisis y predicciones en las tendencias de Internet.

Arreglar menús contextuales basados ​​en vuelo y desplazamiento
Los menús desplegables con muchos elementos son frágiles y a menudo difíciles de usar incluso en el escritorio, especialmente si usan el evento de desplazamiento.
Recuerde que no existe un evento flotante en dispositivos con pantalla táctil. Esto afecta la estructura de navegación de muchos sitios web. Sus menús deben cambiarse para responder a un evento táctil.
Debe ampliar los objetivos táctiles en sus menús.
Una experiencia inmersiva considerará el espacio disponible en la pantalla de la tableta para asegurarse de que los elementos del menú presentados se ajustan dentro de la página y no requieren desplazamiento vertical u horizontal para acceder.

Funcionalidad de gestos táctiles
Los sitios inmersivos introducirán la funcionalidad de gestos táctiles. El más utilizado es deslizar para carruseles de imágenes. Entre los comportamientos adicionales que se pueden introducir se incluyen el toque y arrastre, los toques múltiples (targetTouches) donde el usuario tiene varios dedos en la pantalla.

Funcionalidad del sensor
HTML5 nos ha dado acceso a una variedad de datos de sensores, incluyendo ubicación, sacudidas del dispositivo, aceleración, rotación, etc. La disponibilidad de la funcionalidad del sensor varía según el sistema operativo y el dispositivo. El uso de esta funcionalidad es a menudo un componente de un sitio inmersivo.

Imágenes
Detecta pantallas de alta definición (HD) y sirve imágenes de alta calidad cuando sea apropiado. Las imágenes de baja calidad disminuirán la calidad percibida de un sitio web en dispositivos con pantallas HD. Los sitios inmersivos tendrán imágenes de alta calidad a lo largo de la experiencia.

Actuación

Las tabletas con Wi-Fi son más populares que los modelos 3G. ¡Esto no significa que estés fuera de peligro por el rendimiento! Tenga en cuenta que los visitantes de la tableta pueden no estar en casa o cerca de sus puntos de acceso wi-fi. Su visitante puede estar en un hotel, resort, cafetería, en un avión o en su patio trasero al borde de su rango de wi-fi. En cualquiera de estos casos, pueden tener un ancho de banda inferior al ideal. La potencia computacional (CPU) disponible para las tabletas también es sustancialmente menor que en el escritorio. Un sitio web lento se convertirá mal y dejará a los visitantes con una mala impresión. Esto es especialmente cierto en tabletas que a menudo se usan durante intervalos de tiempo limitados (“Tengo cinco minutos para esperar mi tren, navegaré por la web en mi tableta”).

Las experiencias inmersivas se ajustarán cuidadosamente para proporcionar el equilibrio óptimo entre la funcionalidad y el rendimiento. Mantenga sus páginas lo más pequeñas posible. Implemente las mejores prácticas de rendimiento, como minimizar el número de solicitudes de recursos, scripts, imágenes. Minifica tu CSS y JavaScript. Solo incluya lo que sea absolutamente necesario. Los servicios de optimización de scripts en la nube pueden hacer esto por usted de forma automatizada. Recuerde que el subproceso de búsqueda previa del navegador en sitios receptivos obtendrá incluso recursos que están ocultos en la mayoría de los navegadores de tabletas de hoy, incluido el iPad. Utilice servicios de optimización de imagen inteligente que proporcionen imágenes con una resolución adecuada para la resolución de pantalla (HD o SD) y comprimidas para la velocidad de conexión del visitante.

Recuerde que sus visitantes están en un dispositivo que usa baterías. Los sitios inmersivos serán amables con la duración de la batería de un visitante y minimizarán las secuencias de comandos en ejecución para aquellos absolutamente necesarios y evitarán prácticas de codificación deficientes como la espera ocupada.

Teniendo en cuenta los principios de diseño adaptativo (o receptivo ) para garantizar que el contenido de la página se ajuste al tamaño de la pantalla. Esto se hace, típicamente, con consultas @media en su CSS. Y, posiblemente, con parámetros de viewport en su HTML. Esencialmente, para que los usuarios no tengan que desplazarse / hacer zoom para asimilar el contenido de la página. También es una buena idea asegurarse de que todos los botones y elementos de navegación tengan al menos 30 × 30 píxeles (para que su dedo pueda golpearlo sin sentirse incómodo).

Además, puede utilizar algunas de las sugerencias de Apple al diseñar contenido web para dispositivos móviles https://developer.apple.com/libr … para utilizar Apple Touch Badges (iconos de la pantalla de inicio), imágenes de inicio, ocultar la interfaz de usuario de Safari, etc.

¿Qué es el diseño receptivo?
¿Cuál es la diferencia entre diseño receptivo y diseño adaptativo?
¿Cuáles son algunos ejemplos de sitios web optimizados para tabletas?

La optimización de un sitio para tabletas probablemente implicará un diseño receptivo, pero el diseño en sí puede no cambiar debido al tamaño y la resolución de la pantalla.

En mi opinión, la optimización de un sitio para tabletas tiene más que ver con la mejora de la interfaz, en particular con respecto a la ‘capacidad de pulsación’ de enlaces / botones, etc., que pueden ser más grandes, y también con respecto al uso de gestos táctiles, como deslizar . Sin embargo, el tamaño de los enlaces es el mínimo absoluto.

More Interesting

¿Qué espera la gente de una aplicación de chat? ¿Cuáles son las necesidades de las personas para la aplicación de chat?

¿Qué servicio de back-end debo usar para mi aplicación iónica?

¿Se puede codificar una aplicación iOS y Android de forma nativa en C ++?

¿Hay alguna evidencia de que el espaciado simple después de un período es mejor que el espaciado doble para la usabilidad del sitio web o la aplicación móvil?

Cómo comenzar como principiante en la aplicación web

¿Cómo se ve el panel de administración / backend para un sitio como classpass?

¿Existe un servicio que ofrezca la funcionalidad "enviar al teléfono" (por mensaje de texto o correo electrónico) para aplicaciones móviles?

¿Quiénes son las compañías de desarrollo web y móviles de restaurantes en el sudeste asiático?

¿Por qué una aplicación nativa es mejor que una aplicación web?

¿Mis conversaciones web de WhatsApp están almacenadas en mi computadora?

¿Cuál es el mejor lenguaje de codificación para crear sitios web y aplicaciones de Android, si requiero cambios frecuentes en el diseño del sitio web y la aplicación?

¿Cuánto tiempo llevaría convertirse en un programador suficientemente bueno para crear un prototipo funcional de una aplicación móvil o web?

Desarrollo de aplicaciones móviles: Tengo la idea de crear una aplicación similar a Shazam con algunas características adicionales. ¿Cómo empiezo?

¿Cuánto costará hacer una aplicación como Snapdeal?

Desarrollo de aplicaciones web, ¿cuál es el mejor lenguaje para php o python backend web móvil?