Validación de sitios para móviles

Los dispositivos móviles, y en particular los smartphones, están dominando la web. Hoy más que nunca es muy importante asegurarnos que nuestros sitios web sean compatibles con estos dispositivos.

En los últimos años hemos visto un cambios importante en las preferencias de navegación de los usuarios de la web, donde se nota una tendencia de migración clara de los equipos de escritorio –workstations, laptops, etc.– hace los equipos móviles, y no parece que vaya a cambiar pronto.

En el estudio de AMIPCI en 2015 sobre hábitos de usuarios en México, el único segmento que registró crecimiento en su uso fue precisamente el de los smartphones, y creció a costillas de los dispositivos de escritorio para colocarse en un 58% de preferencia de los mexicanos al navegar la web:

AMICPI dispositivos de conexion
A nivel mundial también es notable la preferencia de compra de los usuarios finales de dispositivos móviles (smartphones y tabletas) contra los equipos de escritorio, en una razón de casi 3 a 1:

PCs vs smartphones

Desde la perspectiva de experiencia de usuario, es importante revisar que nuestros sitios web estén construidos de forma que puedan verse y navegarse desde dispositivos móviles de manera sencilla y natural. Debemos tener en cuenta que el ecosistema móvil es mucho más diverso que el de las PCs al hablar de tamaño y resolución de pantalla, ancho de banda, capacidad de procesamiento, navegadores web y muchos otros factores.Les comparto algunas herramientas que les pueden servir para validar sus sitios móviles, al menos para comenzar a revisarlos:

Validador para sitios móviles de W3C

W3C Mobile Validator
W3C Mobile Validator

El Worldwide Web Consourtium o W3C es el organismo mundial que crea y mantiene los estándares técnicos de la web. Para ayudar a las personas que crean sitios web creó este validador de páginas web basado en la recomendación de MobileOk que revisa la estructura del código de una página y entrega un reporte donde indica el grado de cumplimiento de estándares en su codificación, el impacto de cada error y guías sobre cómo arreglarlo.

Lo encuentras en: http://validator.w3.org/mobile

Mobile friendly de Google Webmasters

Google Mobile Friendly Tool
Google Mobile Friendly Tool

En abril de 2015 Google anunció que el hecho de que un sitio web no se vea correctamente en dispositivos móviles comenzará a afectar su posicionamiento en los resultados orgánicos (no pagados) de su buscador, en caso que necesitaramos una razón de peso para optimizar y actualizar nuestros sitios web.

Para ayudar a los webmasters, Google agregó una herramienta de validación más cualitativa que la de W3C, que conecta la página validada con una granja de render de móviles de Google para entregar un resultado más enfocado en cómo ve la página el buscador y cómo la vería un usuario en su móvil. También tiene mucha documentación sobre cómo optimizar sitios web para móviles.

Lo encuentras en: https://www.google.com/webmasters/tools/mobile-friendly/

Responsinator

Responsinator
Responsinator

Esta herramienta sirve para simular cómo se vería una página web en diferentes dispositivos con diferentes tamaños, resoluciones y orientaciones. Aunque no es una manera definitiva de revisar el diseño de una página web, es una forma simple y sencilla de probar como se ajusta el diseño de un sitio a móviles si no tienes un teléfono de cada modelo a la mano para probar.

Lo encuentras en: http://www.responsinator.com

Test de velocidad de Rackspace

Prueba de velocidad de carga de Rackspace
Prueba de velocidad de carga de Rackspace

La velocidad cuenta mucho al navegar en un móvil. De acuerdo a Rackspace, actualmente un usuario tiene un rango de tolerancia entre 3 y 5 segundos para que un sitio móvil se visualice en su dispositivo antes de abandonarlo. La velocidad de carga de un sitio tiene que ver con muchos factores que van desde el ancho de banda en el servidor, la latencia de carga, el tiempo de renderizado y la carga del servidor, entre otros.

Rackspace creó una prueba de velocidad para sitios web en el que analiza varios componentes que afectan el tiempo de carga de un sitio y recomendaciones para mejorarla.

La encuentras en: http://www.rackspace.co.uk/ecommerce-hosting/page-speed-checker

* * *

Por supuesto, estas herramientas solo cubren una parte del análisis que se debe hacer a un sitio móvil y están enfocadas a la implementación técnica, no a la perspectiva del usuario, pero nos dan un punto de partida para poder analizar y mejorar de manera cuantitativa varios aspectos que sí afectan la experiencia de navegación de un usuario final.

Consultor en experiencia de usuario, developer, conferencista, escritor y emprendedor. Trabaja en Tesseract Space, es Google Expert en UX/UI, Microsoft Regional Director y co-fundador de UX Nights.

Accesibilidad para sitios web

La accesibilidad en aplicaciones web para usuarios invidentes no es difícil de implementar, si se conocen las especificaciones que le dan soporte, como WAI ARIA.

De acuerdo con el último censo de INEGI en el año 2010, en México había entonces cerca de 1,292,201 personas con discapacidad visual, esto es poco más del 1% de la población del país. Si sumamos a las personas que no son completamente invidentes pero tienen algún problema visual el número sube a 48,575,560 personas, o al 43.24% de la población, de los que la tercera parte son niños en edad escolar.

En México la segunda discapacidad más común es la visual, y es la más temida por la población en general. No es sorpresa si consideramos que de toda la información que una persona recibe en su vida, el 80% de ella ingresa por los ojos. Esto es particularmente cierto cuando hablamos de la web y de los medios digitales.

Muchas personas que trabajan diseñando o desarrollando sitios web creen que para hacer sus sitios accesibles es necesario una tecnología adicional a lo que ya utilizan. En realidad no se necesita nada adicional, sino tener en consideración algunas guías para que su trabajo sea accesible a todas las personas, incluyendo a las que tienen problemas visuales.

La W3C ha creado una especificación técnica para la implementación de accesibilidad para sitios web llamada WAI ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications), enfocada especialmente a aplicaciones web que utilizan Javascript y AJAX, ya que estos patrones de desarrollo cambian dinámicamente el contenido de una página web, haciéndola poco accesible para personas que utilizan lectores digitales u otras tecnologías para usuarios con discapacidades.

WAI-ARIA describe cómo añadir contenido semántico y metadatos al contenido HTML para hacer los controles de la UI y el contenido dinámico más accesible. Por ejemplo, con WAI-ARIA es posible identificar enlaces en el menú de navegación incluso si éste se encuentra colapsado.

La especificación WAI-ARIA está basada en tres diferentes atributos: roles, estados y propiedades. Estos atributos tienen las siguientes funciones:

  • Roles (roles): describen algunos de los elementos y widgets comunes en la UI web pero que no están disponibles en HTML, como sliders, pestañas, etc., contruidos con HTML, CSS y JavaScript. También se utilizan para describir la estructura de la página incluyendo encabezados, tablas y otros elementos.
  • Propiedades (properties): describen los estados de los widgets. Por ejemplo, cuando un elemento en la página es “arrastrable”, tiene un elemento popup asociado con él.
  • Estados (states): describen si un elemento es interactivo o no, es decir, los ‘estados’ informan a los lectores digitales si el estado de un elemento en la página es ‘ocupado’, ‘deshabilitado’, ‘seleccionado’ u ‘oculto’.

Revisemos este código web sencillo para una navegación de pestañas:

<!-- ¿Cómo sabrías que este es un widget de pestañas solo viendo el código? -->

<ol>
    <li id="chapter1Tab">
        <a href="#chapter1Panel">Capítulo 1</a> 
    </li>
    <li id="chapter2Tab">
        <a href="#chapter2Panel">Capítulo 2</a>
    </li>
    <li id="quizTab">
        <a href="#quizPanel">Examen</a>
    </li>
</ol>

<div>
    <div id="chapter1Panel">Contenido del capítulo 1</div>
    <div id="chapter2Panel">Contenido del capítulo 2</div>
    <div id="quizPanel">Contenido del examen</div>
</div>

Ahora el mismo código, pero con WAI ARIA:

<!-- He añadido atributos de roles para describir cada pestaña y su contenido asociado -->

<ol role="tablist">
    <li id="chapter1Tab" role="tab">
        <a href="#chapter1Panel">Capítulo 1</a> 
    </li>
    <li id="chapter2Tab" role="tab">
        <a href="#chapter2Panel">Capítulo 2</a>
    </li>
    <li id="quizTab" role="tab">
        <a href="#quizPanel">Examen</a>
    </li>
</ol>

<div>
    <div id="chapter1Panel" role="tabpanel" aria-labelledby="chapter1Tab">
        Contenido del capítulo 1
</div>
    <div id="chapter2Panel" role="tabpanel" aria-labelledby="chapter2Tab">
        Contenido del capítulo 2
</div>
    <div id="quizPanel" role="tabpanel" aria-labelledby="quizTab">
        Contenido del examen
    </div>
</div>

Al añadir los atributos de WAI-ARIA al etiquetado HTML, las tecnologías de apoyo a personas discapacitadas pueden interactuar también con controles creados con JavaScript. De hecho, la implementación de WAI-ARIA está pensada para hacer accesibles sitios en navegadores viejos sin soporte a las etiquetas semánticas de HTML5.

El grupo de trabajo de WAI ARIA en el W3C ya está trabajando en una nueva versión de la especificación para integrarla con HTML5 y otros lenguajes como SVG. También han creado una herramienta llamada “Generador de reportes de evaluación de accesibilidad de sitios web” para revisar la integración de WAI ARIA y otras especificaciones de accesibilidad en sitios web existentes.

Consultor en experiencia de usuario, developer, conferencista, escritor y emprendedor. Trabaja en Tesseract Space, es Google Expert en UX/UI, Microsoft Regional Director y co-fundador de UX Nights.