Conseils et astuces

Publié le 28 février 2014

Améliorez l'expérience utilisateur de votre application grâce aux conseils suivants.

Clignotement lors du chargement de l'application

Avez-vous déjà remarqué un flash en noir et blanc lorsqu'une application se charge avec une WebView ? Cela peut être dû au chargement de la couleur d'arrière-plan de la fenêtre de l'application, qui est généralement définie dans le thème, suivi du flash blanc de l'arrière-plan de WebView. Cela se produit avant que WebView ne charge du contenu, y compris le CSS.

Pour supprimer le flash blanc, définissez la couleur d'arrière-plan de la WebView. Le seul retard d'affichage de cette couleur se trouve dans l'application mobile pour dessiner la WebView.

mWebView.setBackgroundColor(Color.parseColor("#3498db"));

Sur Android, il est recommandé de définir les valeurs de couleur dans un fichier res/values/colors.xml, comme décrit dans le guide des ressources d'application Android. Si vous choisissez une couleur définie dans les ressources de l'application, le code peut se présenter comme suit:

mWebView.setBackgroundColor(getResources().getColor(R.color.my_color_name));

Retour tactile

Une différence entre les applications mobiles et Web est l'absence de retour tactile dans de nombreuses applications Web.

Pour résoudre ce problème, utilisez la pseudo-classe :active.

Par exemple, si vous disposez d'un bouton avec le style suivant:

.btn {
  display: inline-block;
  position: relative;
  background-color: #f39c12;
  padding: 14px;

  border-radius: 5px;
  border-bottom-style: solid;
  border-width: 4px;
  border-color: #DA8300;
}

L'état de pression peut se présenter comme suit:

.btn:active {
  background-color: #E68F05;
  border-color: #CD7600;
  border-width: 2px;
  top: 2px;
}

Cela assombrit légèrement la couleur de l'arrière-plan et de la bordure, et réduit la taille de la bordure pour donner l'impression que le bouton s'enfonce dans la page. La propriété top ajuste la position pour équilibrer la bordure plus petite.

Si vous utilisez Sass, vous pouvez utiliser les mixins darken et lighten pour modifier les couleurs des éléments sans avoir à connaître la valeur hexadécimale exacte. Vous pouvez également utiliser des outils en ligne tels que hexcolortool.com.

Points forts du système

De nombreux user-agents ajoutent une forme de retour tactile aux éléments, ce qui évite de définir des styles spécifiques. Dans la WebView, vous pouvez remarquer une couleur orange sur les éléments ou un anneau orange autour des liens et des éléments.

Si vous ajoutez des commentaires tactiles et de mise au point personnalisés, vous pouvez remplacer les valeurs par défaut par les propriétés CSS suivantes:

-webkit-tap-highlight-color: rgba(0,0,0, 0.0);
outline: none;

Définissez vos propres couleurs:

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;
}

Cela modifie la couleur du bouton en fonction de l'état, y compris un état par défaut, de mise au point et actif (ou "en appuyant").

En plus des boutons, envisagez de définir ces propriétés sur les champs de saisie et les balises d'ancrage.