Diseñar para dispositivos móviles como smartphones y tablets supone repensar el modo en que hacemos muchas cosas: grillas e imágenes fluidas, optimización de los espacios e imágenes más definidas para pantallas de alta resolución. Sin embargo, hay algunas técnicas bastante sencillas que pueden emplearse para mejorar un diseño y hacer que navegar desde una tablet no sea una tortura:
1. Incrementar el tamaño de la tipografía y el interlineado
Cualquier sitio web se ve mejor en una tablet si el tamaño 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ás generoso, tendremos resuelta la visualización de una parte fundamental del contenido como es el texto.
Sugerencia: Llevar de los párrafos a 16 píxeles e incrementar el interlineado a 1.5
2. Incrementar el tamaño de los botones
Otro elemento vital en la navegación de un sitio web son los botones. En el caso de las tablets, el alto del botón no debería ser inferior a la yema de los dedos para hacer que sea fácil de pulsar. A mayor tamaño, menor probabilidad de hacer clic en el lugar incorrecto.
En general, es mejor usar padding que margin para definir el espacio (ya sí ganar en el tamaño del área sensible). Sugerencia: el tamaño mínimo del botón debe ser de 44 píxeles de alto o ancho.
3. Adiós a la autocorreción
El ingreso de datos en un formulario online probablemente sea una de las tareas más tediosas a realizar cuando se navega con una tableta. Una manera fácil 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ón- es desactivar la autocorrección de palabras y el poner en mayúscula la primera letra.
Sugerencia:
<input type="text" autocapitalize="off" autocorrect="off">
4. Teclados contextuales
Seguimos con optimizaciones para el ingreso de datos ¿Por qué si tengo que ingresar una dirección de mail no me muestran directamente la arroba sin tener que buscarla accediendo al teclado de símbolos? ¿Si tengo que ingresar una página web por qué no me dan la opción de poner con una sola tecla .com?
Esto lo realizan los dispositivos automáticamente al detectar el tipo de campo sobre el cual se ingresan los datos. Para ello, simplemente hay que indicarle qué tipo de datos vamos solicitar y el sistema se encargará de escoger el teclado más apropiado para el usuario.
Sugerencias:
Teclado estándar:
<input type="text">
Teclado direcciones web
<input type="url">
Teclado email
<input type="email">
Teclado numérico
<input type="text" pattern="[09]*">
5. El estado a:hover no existe
Cuando comenzaba con CSS una de las primeras cosas que aprendí a hacer fue manipular los enlaces para que el subrayado solo apareciera cuando el usuario colocará por encima el puntero del mouse. Lo que hace 15 años era novedoso, hoy es un error.
En las tablets el puntero no existe. Y, por ahora, las pantallas tampoco detectan cuando los dedos están encima pero no presionan la superficie. Por lo tanto, aplicar efectos que se activan al pasar el puntero no tiene ningún sentido. No solo para los enlaces, sino que muchos diseños juegan con esa idea de cambiar la información al poner el mouse por encima. Muy bonito para un PC, pero información inaccesible para la tablet.
Vía Mobify: 5 Easy Tablet Optimizations You Can Make on Your Website Right Now