Fecha de publicación: 28 de febrero de 2014
Mejora la experiencia del usuario de tu aplicación con las siguientes sugerencias.
Se produce un parpadeo cuando se carga la aplicación.
¿Alguna vez notaste un destello en blanco y negro cuando se carga una aplicación con un WebView? Esto puede deberse a la carga del color de fondo de la ventana de la app, que suele establecerse en el tema, seguido del flash blanco del fondo de WebView. Esto ocurre antes de que WebView cargue cualquier contenido, incluido el CSS.
Para quitar el flash blanco, configura el color de fondo de WebView. El único retraso en la visualización de este color es en la app para dispositivos móviles para dibujar el WebView.
mWebView.setBackgroundColor(Color.parseColor("#3498db"));
En Android, se recomienda definir los valores de color en un archivo res/values/colors.xml, como se describe en la Guía de recursos de apps para Android.
Si eliges un color definido en los recursos de la aplicación, el código podría verse de la siguiente manera:
mWebView.setBackgroundColor(getResources().getColor(R.color.my_color_name));
Respuesta táctil
Una diferencia entre las aplicaciones web y para dispositivos móviles es la falta de comentarios táctiles en muchas apps web.
Para resolver este problema, usa la pseudoclase :active.
Por ejemplo, si tienes un botón con el siguiente diseño:
.btn {
display: inline-block;
position: relative;
background-color: #f39c12;
padding: 14px;
border-radius: 5px;
border-bottom-style: solid;
border-width: 4px;
border-color: #DA8300;
}
El estado presionado puede verse de la siguiente manera:
.btn:active {
background-color: #E68F05;
border-color: #CD7600;
border-width: 2px;
top: 2px;
}
Esto oscurece ligeramente el color de fondo y el color del borde, y disminuye el tamaño del borde para que parezca que el botón se está hundiendo en la página. La propiedad top ajusta la posición para equilibrar el borde más pequeño.
Si usas Sass, puedes usar las mixins darken y lighten para alterar los colores de los elementos sin necesidad de conocer el valor hexadecimal exacto. También puedes usar herramientas en línea, como hexcolortool.com.
Aspectos destacados del sistema
Muchos usuarios-agentes agregan algún tipo de comentarios táctiles a los elementos, lo que evita la necesidad de definir estilos específicos. En WebView, es posible que notes un color naranja en los elementos o un anillo naranja alrededor de los vínculos y los elementos.
Si agregas comentarios táctiles y de enfoque personalizados, puedes anular los valores predeterminados con las siguientes propiedades CSS:
-webkit-tap-highlight-color: rgba(0,0,0, 0.0);
outline: none;
Además, puedes establecer tus propios colores:
button {
outline: 0;
-webkit-tap-highlight-color: rgba(0,0,0, 0.0);
}
button:focus {
background-color: #E68F05;
border-color: #DA8300;
}
button:active {
background-color: #FFA91F;
border-color: #E68F05;
}
Esto cambia el color del botón según el estado, incluido un estado predeterminado, enfocado y activo (o "presionado").
Además de los botones, considera configurar estas propiedades en los campos de entrada y las etiquetas de ancla.