Tips and tricks

Published: February 28, 2014

Enhance your application's user experience with the following tips.

Flicker when the application loads

Ever noticed a flash of black and white when an application loads up with a WebView? This may be caused by the loading of the window background color of the app, which is usually set in the theme, followed by the white flash of the WebView background. This occurs before WebView loads any content, including the CSS.

To remove the white flash, set the background color of the WebView. The only delay in displaying this color is in the mobile app to draw the WebView.

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

On Android, it's good practice to define color values in a res/values/colors.xml file, as described in the Android App Resource guide. If you choose a color defined in the application's resources, the code may look as follows:

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

Touch feedback

One difference between mobile and web applications is the lack of touch feedback in many web apps.

To solve this problem, use the :active pseudo class.

For example, if you have a button with the following styling:

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

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

The pressed state may look like:

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

This darkens the background color and border color slightly, and decreases the border size so it looks like the button is sinking into the page. The top property adjusts the position to balance the smaller border.

If you use Sass you can use the darken and lighten mixins to alter the colors of elements without needing to know the exact hex value. Or you can make use of online tools such as hexcolortool.com.

System highlights

Many user agents add some form of touch feedback to elements, which prevents the need to define specific styles. In the WebView you may notice an orange color on elements or an orange ring around links and elements.

If you add custom touch and focus feedback, you can override the defaults with the following CSS properties:

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

And set your own colors:

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

This changes the button color based on state, including a default, focus, and active (or "pressed") state.

In addition to buttons, consider setting these properties on input fields and anchor tags.