![\"touch-screen\"](\"https:\/\/thuer.com.ar\/wp-content\/uploads\/2013\/07\/touch-screen.jpg\")
\nDise\u00f1ar para dispositivos m\u00f3viles como smartphones y tablets supone repensar el modo en que hacemos muchas cosas: grillas e im\u00e1genes fluidas, optimizaci\u00f3n de los espacios e im\u00e1genes m\u00e1s definidas para pantallas de alta resoluci\u00f3n. Sin embargo, hay algunas t\u00e9cnicas bastante sencillas que pueden emplearse para mejorar un dise\u00f1o y hacer que navegar desde una tablet no sea una tortura:<\/p>\n
Cualquier sitio web se ve mejor en una tablet si el tama\u00f1o de la letra es un poquito superior a la media que usamos para ver en los equipos de escritorio. Si a ello le sumamos un interlineado m\u00e1s generoso, tendremos resuelta la visualizaci\u00f3n de una parte fundamental del contenido como es el texto.<\/p>\n
Sugerencia: Llevar de los p\u00e1rrafos a 16 p\u00edxeles e incrementar el interlineado a 1.5<\/p>\n
Otro elemento vital en la navegaci\u00f3n de un sitio web son los botones. En el caso de las tablets, el alto del bot\u00f3n no deber\u00eda ser inferior a la yema de los dedos para hacer que sea f\u00e1cil de pulsar. A mayor tama\u00f1o, menor probabilidad de hacer clic en el lugar incorrecto.<\/p>\n
En general, es mejor usar padding que margin para definir el espacio (ya s\u00ed ganar en el tama\u00f1o del \u00e1rea sensible). Sugerencia: el tama\u00f1o m\u00ednimo del bot\u00f3n debe ser de 44 p\u00edxeles de alto o ancho.<\/p>\n
El ingreso de datos en un formulario online probablemente sea una de las tareas m\u00e1s tediosas a realizar cuando se navega con una tableta. Una manera f\u00e1cil de ayudar al usuario es evitar que al ingresar a un formulario -particularmente si se trata de un campo para hacer login o iniciar sesi\u00f3n- es desactivar la autocorrecci\u00f3n de palabras y el poner en may\u00fascula la primera letra.<\/p>\n
Sugerencia:<\/p>\n
Seguimos con optimizaciones para el ingreso de datos \u00bfPor qu\u00e9 si tengo que ingresar una direcci\u00f3n de mail no me muestran directamente la arroba sin tener que buscarla accediendo al teclado de s\u00edmbolos? \u00bfSi tengo que ingresar una p\u00e1gina web por qu\u00e9 no me dan la opci\u00f3n de poner con una sola tecla .com?<\/p>\n Esto lo realizan los dispositivos autom\u00e1ticamente al detectar el tipo de campo sobre el cual se ingresan los datos. Para ello, simplemente hay que indicarle qu\u00e9 tipo de datos vamos solicitar y el sistema se encargar\u00e1 de escoger el teclado m\u00e1s apropiado para el usuario.<\/p>\n Sugerencias:<\/p>\n Teclado est\u00e1ndar:<\/strong> Teclado direcciones web<\/strong> Teclado email<\/strong> Teclado num\u00e9rico<\/strong> Cuando comenzaba con CSS una de las primeras cosas que aprend\u00ed a hacer fue manipular los enlaces para que el subrayado solo apareciera cuando el usuario colocar\u00e1 por encima el puntero del mouse. Lo que hace 15 a\u00f1os era novedoso, hoy es un error.<\/p>\n En las tablets el puntero no existe. Y, por ahora, las pantallas tampoco detectan cuando los dedos est\u00e1n encima pero no presionan la superficie. Por lo tanto, aplicar efectos que se activan al pasar el puntero no tiene ning\u00fan sentido. No solo para los enlaces, sino que muchos dise\u00f1os juegan con esa idea de cambiar la informaci\u00f3n al poner el mouse por encima. Muy bonito para un PC, pero informaci\u00f3n inaccesible para la tablet.<\/p>\n<input type=\"text\" autocapitalize=\"off\" autocorrect=\"off\"><\/code><\/p>\n4. Teclados contextuales<\/h3>\n
\n<input type=\"text\"><\/code><\/p>\n
\n<input type=\"url\"><\/code><\/p>\n
\n<input type=\"email\"><\/code><\/p>\n
\n<input type=\"text\" pattern=\"[0\u00ad9]*\"><\/code><\/p>\n5. El estado a:hover no existe<\/h3>\n