() translation by (you can also view the original English article)
Hoy voy a recapitular algunas consideraciones concretas que debes hacer para asegurarte de que tu diseño web esté optimizado para su uso en una tableta táctil.
En marzo, escribí un artículo titulado Cómo el iPad (y las tabletas) están impulsando una nueva era del diseño web. En ese artículo, miré el iPad, una plataforma que había estado usando a diario durante unos diez meses, y cómo había cambiado las consideraciones del diseñador web moderno. Con el auge de las tabletas (o, mejor dicho, el auge del iPad), las entradas táctiles se están utilizando con mucha más frecuencia al navegar por la web. Es una historia diferente a la de los teléfonos inteligentes, que a menudo tienen un sitio táctil especializado.
En ese artículo, analicé los conceptos de diseño para tabletas, como el diseño para nuevas resoluciones. Si bien es muy similar, en este artículo hablaremos sobre las consideraciones que debes tener en cuenta en cuanto a los dispositivos táctiles.
1. Diseña teniendo en cuenta el dedo
Tal vez una de las mayores consideraciones es recordar que el dedo humano no es en absoluto tan preciso como un cursor controlado por un ratón o trackpad. Toma tu dedo y sosténlo hacia la pantalla junto al cursor. Está bastante claro que el tipo de acción precisa que se puede lograr con un mouse simplemente no es posible cuando se usan entradas táctiles.
Por esta razón, muchas aplicaciones web ahora tienen contrapartes nativas de iPad que se adaptan mejor a la precisión de un dedo. Por supuesto, no es necesario que desarrolles una aplicación; de hecho, obligar a tus usuarios a usar una aplicación podría rechazarlas. La conclusión de este punto es simplemente asegurarse de que las áreas clave como tu navegación no necesiten ser ampliadas para que los usuarios accedan a ellas en una interfaz táctil.
Para lograr una buena usabilidad tanto en el mouse como en el tacto, los diseñadores deben comprometerse en el "término medio"; todo debe poder tocarse con el dedo humano, pero no debe verse excesivamente grande cuando se ve con un mouse y una configuración de PC más tradicionales.
Después de lanzar ambos sitios en un iPad, es obvio que el sitio de Apple tiene la mejor navegación. Si bien ambos funcionan bien con un mouse, el menú de Apple es claramente el más fácil de tocar, mientras que el de la BBC requiere mucha más precisión.1a. Evita hacer una versión específica del iPad
Cuando escribí mi artículo en marzo sobre el diseño web de iPad, escribí esta línea: "lo que significa que los diseñadores deben llegar a ese "término medio"... o tener un sitio separado dedicado para tabletas que use una hoja de estilo diferente (e incluso un diseño diferente) por completo". Retiro lo dicho.
A menos que tu diseño web necesite expresamente una versión personalizada para interfaces táctiles, generalmente no es una buena práctica segmentar a tus visitantes con diferentes versiones de un sitio. Si tienes varias versiones para diferentes plataformas, probablemente será más difícil de mantener, pero, lo que es más importante, romperá la conexión que los usuarios hacen entre navegar por tu sitio en un escritorio y hacerlo en una tableta. Si se ve diferente, tienen que aprender una segunda forma de navegación lo cual no ayuda a nadie.
Si debes crear una versión específica para iPad, proporciona siempre una ruta de retorno para que los usuarios opten por ver el sitio completo.
2. Cumple con los estándares, evita Flash
Revisa tu diseño y piensa en lo que lo convierte en lo que es. Sin duda has usado HTML y CSS, pero ¿has usado Flash o alguna otra tecnología? La mejor manera de tener en cuenta la gama más amplia de plataformas es apegarse a HTML y CSS que cumplen con los estándares, y especialmente evitar el uso de tecnologías que requieran plugins de navegador o software adicional.
Afortunadamente, HTML5 proporciona un gran conjunto de herramientas para crear elementos interactivos y multimedia que funcionarán a la perfección en una tableta y en los principales navegadores de escritorio de la generación actual. Podría provocar controversia al sugerir esto, pero (en lo que respecta al diseño web) tratar de evitar Flash a toda costa. No solo tiene muchos problemas en el escritorio, el iPad de uso mayoritario no lo admite, y tampoco lo harán aquellos que ejecutan la interfaz de usuario Metro de Windows 8.
Hay una serie de razones por las que debes usar HTML5 en general, aparte del hecho de que es más probable que funcione instantáneamente en una tableta. Los medios como el audio y el video funcionan muy bien con HTML5 y funcionan en varias plataformas. Me sorprendieron algunas de las cosas de HTML5 que vi cuando estaba investigando un resumen reciente, ya que proporcionaba efectos similares a Flash pero sin ninguna de las molestias y la exclusión de iOS.
Naturalmente, debes asegurarte de que todo tu código esté escrito de acuerdo con los estándares, como cualquier sitio web, orientado a iPad o de otro tipo.
Muchos servicios populares, incluido YouTube, ofrecen automáticamente reproductores de video con tecnología HTML5 tanto en su propio sitio como cuando están integrados en otros. En este caso, este video está integrado en un blog y se reproduce sin problemas en un iPad.3. Ten como objetivo 1000 píxeles o diseña de forma adaptativa
Por supuesto, habrá excepciones a esto, pero en general, deberías buscar diseñar para resoluciones alrededor de 1024px para que se ajusten a una tableta de forma nativa. La mayoría de los sistemas de cuadrícula de sitios web tienen un ancho de alrededor de 960 px de todos modos, por lo que esto no debería ser un problema masivo para implementar. Si optas por ignorar este consejo, tu sitio web probablemente terminará reduciéndose para adaptarse al ancho de un navegador de tableta, lo que resultará en el requisito de que el usuario se acerque. Esto deja mucho más acercamiento y alejamiento y deslizamiento para encontrar cosas, lo que no ayuda a nadie.
La solución al problema viene en forma de CSS adaptable, que puede cambiar de estilo según la plataforma, el navegador y la resolución. Ya he explicado que realmente no me gusta la idea de crear una versión única de un sitio web para iPad, pero modificar solo algunos estilos para los usuarios de iPad no debería ser un problema. Desafortunadamente, deja mucho más trabajo, pero a veces puede ser un paso simple que hace mejoras importantes.
Si estás buscando diseñar simultáneamente para múltiples resoluciones o simplemente modificar estilos triviales entre plataformas (como cambiar el reconocimiento de enlaces en un iPad frente a un escritorio), hay varios servicios que te pueden ayudar, incluido Adapt.js. También asegúrate de consultar el increíble artículo sobre diseños adaptables de Smashing Magazine.
4. Incorpora mejoras de Safari móvil
iOS tiene esta forma increíble de marcar un sitio web en tu página de inicio, por lo que parece un enlace para abrir una aplicación. La forma más básica de esto es agregar un pequeño icono para poner en la pantalla de inicio cuando un usuario lo guarde allí. Esto se logra con una sola línea de código:
1 |
<link rel="apple-touch-icon" href="img/icon.png" /> |
Nota: Este fragmento agregará automáticamente el brillo estilo Apple a tu icono. Cambia apple-touch-icon por apple-touch-icon-precomposed para eliminar ese brillo.
Hay algunas otras metaetiquetas que normalmente no se utilizan y que se pueden aplicar a tu diseño para mejorarlo cuando se guarda en la pantalla de inicio de un iPad. Por ejemplo, la siguiente línea ocultará la barra de direcciones y marcadores y solo mostrará la página web en pantalla completa.
1 |
<meta name="apple-mobile-web-app-capable" content="yes" /> |
Estos son solo dos de los fragmentos disponibles, y definitivamente deberías revisar el tutorial de MobileTuts+ sobre este tema. Estos hacen poca diferencia en tu sitio en plataformas que no son iOS, pero podrían mejorar la experiencia de ellos en un iPad, en caso de que tu aplicación se adapte a ellos.
5. Recuerda las múltiples orientaciones
Con el uso cada vez mayor de tabletas, la mayoría de las cuales tienen un acelerómetro incorporado, se está introduciendo un nuevo tipo de pliegue. Si bien escribimos sobre la desaparición del pliegue, hay uno nuevo que se está introduciendo con el aumento en el uso de tabletas.
Cuando una tableta cambia de orientación, la vista completa de una página web puede distorsionarse. Al igual que con la adaptación de múltiples resoluciones de navegador, también hay que asegurarse de que su sitio web represente las múltiples resoluciones que puede admitir una sola tableta, la de sus orientaciones vertical y horizontal.
El elemento de la lista de verificación aquí es para asegurarse de que tu información clave sea visible sin deslizar el dedo cuando la veas en horizontal y vertical. Estos pueden proporcionar instantáneas radicalmente diferentes de tu sitio, así que intenta probarlas en ambas orientaciones para asegurarte de que todos los usuarios de una tableta específica puedan ver la mejor representación del diseño de tu sitio y su contenido.
Sitio web de CNN en orientación vertical y horizontal en Mobile Safari.6. Realmente prueba tu sitio
Un paso importante para garantizar que tu sitio funcione en un iPad es probar realmente tu sitio en una interfaz táctil y tener en cuenta: ¿qué tan simple es? Si es necesario, visita una tienda Apple, haz a un lado a uno de los niños en Facebook y carga tu diseño.
Si no tienes un iPad, ni tienes acceso a una tienda con uno en exhibición, pero tienes una Mac, descarga Xcode, abre el simulador de iPad y dale una vuelta para probar cosas como la resolución y la orientación.
Xcode es una descarga gratuita para los usuarios de OS X Lion y ofrece simuladores de iPhone y iPad que te permiten ver cómo aparece tu sitio en diferentes resoluciones.Conclusión
Las tabletas definitivamente han cambiado el diseño web, posiblemente para mejor y cada vez es más importante adaptarlas cuando diseñamos nuevos sitios. Un usuario que visita tu diseño en su iPad primero, solo para descubrir que no funciona, que requiere mucho desplazamiento o alguna otra frustración, podría ser rechazado de por vida debido a la impresión que le da.
Ciertamente he visitado muchos sitios web en mi iPad en los 16 meses que he tenido uno, y he experimentado un poco trabajando con un diseño específico para iPad (como en el consejo #4). Sigue estos seis consejos y deberías estar listo para usar un diseño compatible en iPad. Siempre que funcione técnicamente, no requiera un montón de zoom y/o desplazamiento y se pueda usar con un dedo, estás en camino de adaptarte a un nicho valioso del mercado de navegación.
