Lista de comprobación de la compatibilidad de su sitio web con el iPad

¿Ha consultado últimamente los análisis de su sitio web? Es posible que haya notado que el iPad de Apple, así como otras tabletas, están empezando a aparecer como una parte no tan insignificante del tráfico que visita su sitio.

Mientras que una aplicación para iPad o incluso una versión específica para tabletas de su sitio puede estar en una futura hoja de ruta, hay algunos cambios que puede hacer ahora mismo que le ayudarán a asegurar que la experiencia sea buena para alguien que visite su sitio desde una tableta sin que vaya en detrimento de los usuarios que acceden a su sitio con dispositivos más convencionales.

Prueba de olfateo

Si ya tienes una versión web móvil de tu sitio web creada para sistemas operativos portátiles, como iOS o Android, lo más probable es que no quieras que esta sea la versión del sitio que muestres a los usuarios en una tableta. En términos de tamaño de pantalla y relación de aspecto, una tableta como el iPad es mucho más parecida a la pantalla de un portátil que a la de un móvil.

Pruebe su sitio para asegurarse de que sus redirecciones automáticas no agrupan las tabletas con los dispositivos portátiles y hacen que un navegador de tableta sea redirigido a su sitio web.

Orientación

La experiencia con tabletas permite a los usuarios cambiar entre modo vertical y horizontal rápida y fácilmente para ajustarse al formato óptimo para el contenido que están viendo. Por ello, es importante probar su sitio web en los distintos dispositivos de tableta que desee utilizar, para asegurarse de que no hay problemas de visualización al cambiar de orientación.

Flash

los iPads no son compatibles con la tecnología Flash. Si tu sitio se basa en contenido de vídeo de manera significativa, tendrás que explorar otras opciones para servir estos vídeos (como HTML5). Sin embargo, si alojas tus vídeos en un sitio de terceros (como YouTube o Vimeo) y simplemente los incrustas en la página, no tendrás problemas. Estos vídeos incrustados tienen tecnología integrada para adaptarse a los dispositivos no compatibles con Flash.

Tamaño de destino y “clicabilidad”

Usar un dedo en un dispositivo de pantalla táctil requiere un objetivo ligeramente más grande que usar el cursor de un ratón. No hay nada más frustrante para los usuarios que intentar tocar un elemento en el que se puede hacer clic y no encontrarlo o, peor aún, hacer clic accidentalmente en algo adyacente a lo que se pretendía. Revise su sitio web y asegúrese de que los elementos en los que se puede hacer clic tienen aspecto de serlo, son lo suficientemente grandes (sobre todo los enlaces de texto) y tienen suficiente espacio para que un usuario de tableta pueda activarlos fácilmente con el dedo. El gurú de los productos digitales y la interfaz de usuario, Luke W, ofrece algunas recomendaciones sobre tamaños mínimos en su artículo “Touch Target Sizes”.

Zoom de página

Los usuarios de la mayoría de los dispositivos táctiles están acostumbrados a “tocar dos veces” una sección de una página web para ampliarla específicamente. Aunque se trata de una herramienta potente, es importante comprobar que la estructura html de su sitio está construida de tal manera que el navegador Safari puede adivinar correctamente los bordes izquierdo y derecho de un módulo, como el cuerpo principal del texto de un artículo. En algunos casos, la estructura HTML del sitio puede haber sido construida de una manera que confunde al navegador y provoca un zoom incorrecto.

Pruebe las secciones clave de cada página tocándolas dos veces y verifique que se redimensionan con los márgenes correctos para una experiencia de visualización óptima.

Hover

A diferencia de la navegación convencional con el ratón, en un entorno táctil no existe el concepto de hover-state. Por ello, los dispositivos táctiles no pueden manejar los estados :hover de CSS ni las funciones OnMouseOver de Javascript. Esto puede ser importante en sitios que contienen menús desplegables para la navegación de nivel superior. Si la navegación superior contiene menús desplegables que sólo aparecen cuando se pasa el ratón por encima de ellos, habrá que tener consideración especial para que sean compatibles con los dispositivos táctiles a través de un toque.

Formularios

Introducir información en dispositivos móviles puede ser una tarea algo engorrosa. Una forma de hacerla algo menos dolorosa para el usuario es presentarle un teclado virtual optimizado para la información que va a introducir. Con la gran cantidad de nuevos tipos de entrada disponibles en HTML5, esta tarea se ha vuelto algo más sencilla. (Para más información, véase el artículo de Roger Johansson “HTML5 input types”)

Así que ahí lo tienes, unos cuantos elementos con los que puedes probar tu sitio existente para ayudar a garantizar una experiencia óptima para cualquiera que lo visite desde un iPad u otro dispositivo de tableta. A medida que la web sigue creciendo, también lo hace el número de dispositivos utilizados para acceder a ella. Aunque estos nuevos dispositivos presentan más retos, también crean más oportunidades para que todos podamos estar conectados en cualquier momento y lugar.