Esta sección y sus contenidos han sido contratados específicamente por la marca que se menciona Volver a Genbeta Dev.com

Adaptarte a la web táctil sin morir en el intento aprovechando la integración con Windows 8

0 comentarios

IE10 windows 8

Hablar de interfaces táctiles podía parecer muy futurista hace unos años, pero con la irrupción de Windows 8 y la gran cantidad de dispositivos móviles que hoy cargamos, el porcentaje de visitantes que llegan hasta nuestra web tocando una pantalla es altísimo. Y no va a dejar de crecer en los próximos años.

Es por ello que adaptar nuestros desarrollos a interfaces táctiles ya no es opción, sino una obligación con todas las de la ley. Al menos si no queremos quedar en el olvido. Naturalmente, el proyecto modern.IE tiene muy presente esta realidad, y como muestra ya vimos hace unos días lo útil que su escáner web puede resultar a la hora de adaptarnos a Windows 8.

Con la llegada de Internet Explorer 10, un navegador perfectamente adecuado a estas nuevas tendencias, así como a los estándares web más actuales como HTML5, esta tarea de puesta a punto se centraliza y se hace más digerible. Vamos a ahondar en los aspecto más importantes a tener en cuenta a la hora de trabajar sobre este entorno.

Adaptando tu web a Windows 8 gracias a Internet Explorer 10

Internet Explorer 10

Un aspecto muy importante a tener en cuenta a la hora de ponernos a trabajar con Internet Explorer 10, es que este navegador permite dos vías de exploración: la de escritorio clásico y la de interfaz adaptada a dispositivos táctiles. Ambas ofrecen la misma compatibilidad con CSS, pero hay ciertos aspectos que debemos tener en cuenta a partir de aquí:

  • Mejor optar por la detección de características: aunque los usuarios de Internet Explorer puedan utilizar dos interfaces diferentes, no es posible detectar cuál están empleando al acceder a nuestro sitio. Es por ello que, en lugar de detectar navegadores como ha sido costumbre para adaptar la página, resulta mucho más recomendable detectar características y actuar en función de ellas. Por ejemplo, disponemos de la siguiente propiedad para detectar si nuestro visitante emplea hardware multitáctil:
    if (navigator.msMaxTouchPoints > 1) {
    // Admite multitactil
    }
  • Adaptar la experiencia a las capacidades del dispositivo: navegar por una web con un ratón es muy diferente a hacerlo sobre una pantalla táctil, y por ello hay que reconsiderar cuestiones que hasta ahora dábamos por básicas. Por ejemplo, el comportamiento hover no tiene cabida en una pantalla táctil, así que es necesario recurrir a alternativas como el evento onclick o la propiedad aria-haspopup.

  • Prueba diferentes tamaños y métodos de entrada: diseñar una web lo más adaptativa posible implica tener en cuenta la máxima cantidad de detalles, lo cual incluye distintas combinaciones entre resoluciones de pantalla (desde pequeños móviles hasta grandes ordenadores) y métodos de entrada (teclado y ratón, táctil, lápiz). La siguiente matriz os puede servir de ayuda:

matriz

  • Ofrece cambiar de versión: puede que suene a perogrullo, pero algo tan fundamental muchas veces se queda en el camino. Si has preparado varias versiones de tu página web adaptadas a las distintas circunstancias, recuerda ofrecer la posibilidad de alternar entre ellas. Nunca se sabe cuando el visitante puede requerir el salto.

  • En caso de duda, prioridad a la experiencia táctil: si la experiencia de usuario de nuestra web para escritorio clásico y para tablet es similar, es mejor dar prioridad a la experiencia táctil por defecto. Eso sí, sin olvidar el punto anterior.

Naturalmente, hay muchos más aspectos a tener en cuenta a la hora de abordar este desafiante cambio de paradigma que presenta el desarrollo web, pero por suerte ayudas no faltan. Además de todo lo que ya hemos presentado hasta ahora como parte del proyecto modern.IE, recordad que también disponemos de grandes aliados como BrowserStack.

+ Deja tu comentario