tl;dr

Touch screen optimization:

To enable :active CSS state:

document.ontouchstart = function(){};

To remove the grey overlay when tapping in iOS webview.

.button {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

Viewport setting:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">

Web app mode:

<meta name="apple-mobile-web-app-capable" content="yes">

Several buttons examples:

1. Normal button in flat design
2. Normal button with shadows
3. Fully expanded button
4. List view with groups

Several usage of list view:

1. Basic list view
2. List view with next page indicator
3. List view with with checkbox
4. List view with image
5. List view with numeric indicator

Inertia scroll with -webkit-overflow-scrolling: touch.

Button effects

Button is one of the most important component in the interface. Button needs to be identified to be clickable. When Apple moves to flat design in iOS 7, they removed the background color of buttons. In iOS 6, every button has heavy gradient and shadows. Aesthetically you may argue they may not looks good, but they are easily identifiable. User knows where to tap on the screen.

iOS 7

In iOS 7, Apple failed to make most buttons identifiable after removing the background color. The button looks exactly the same as normal text label on screen. It took Apple an year to fix this mistake on iOS 8 release, which introduced other UI issue. The UI is in heavy fine tuned until recent releases of iOS 10 and iOS 11.

Image credit:

Sense of Depth

By the way, Apple never used the word “flat” in anywhere. In contrast, they claim the design to be multi-layers with sense of depth. (That’s also how they promoted the gyroscope motion interface and 3D Touch later)

Flat or Skeuomorphism?

The raise of material design from google and design changes in iOS 7 marks the era change from skeuomorphism to flat design.

In recent years, however, Google is adding more shadows and grain textures (noisy inner shadow) to their flat interface. We learnt the lessons that we still need some kind of skeuomorphism to indicate which part we can interact on the screen. A flat design with shadow is one of the solutions.

Metaphors

As Apple said in the human interface guidelines,

People learn more quickly when an app’s virtual objects and actions are metaphors for familiar experiences—whether rooted in the real or digital world. Metaphors work well in iOS because people physically interact with the screen. They move views out of the way to expose content beneath. They drag and swipe content. They toggle switches, move sliders, and scroll through picker values. They even flick through pages of books and magazines.

How <a> link behaves in mobile web view

By default, mobile browser won’t enable the :active style. We need to tell the browser that we have been considered the touch screen in our CSS.

document.ontouchstart = function(){};

The code doesn’t need any code inside the function. It is to register an empty function into the touch event so browser knows we handle touch screen in our code.

We may also apply the FastClick library which uses touched to trigger the click event.

Disabling pinch-to-zoom

We can also make the viewport non-scalable by setting the following viewport.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">

Note that the scale locking won’t work in mobile safari for the accessibility reason. It still works in web view when building natively through Xcode. It also works when using the apple-mobile-web-app-capable meta tag.

<meta name="apple-mobile-web-app-capable" content="yes">

Demo

Demo of setting maximum-scale=1, minimum-scale=1 in both Mobile Safari and web app mode:

Code Example for Buttons

Fully expanded button

Demo

Fully expanded button is 100% width, with or without padding on both sides. They are easy to tap and are usually used as main button in the interface.

.button {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  display: block;
  background: lightsteelblue;
  padding: 1em;
  text-decoration: none;
  color: darkblue;
  text-align: center;
  border-radius: 5px;
}
.button:active {
  background: steelblue;
  color: white;
}

Full code example

Note: Different brands uses different design approaches.

Windows phone has square and rectangle interface.

Android has full-width and straight line interface.

iOS has border radius and padding on both sides.

Button with inner shadow

Demo

The following code is very similar to the previous example. The only difference is that the addition of linear gradient and inner box shadow.

.button {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  display: block;
  background: lightsteelblue;
  padding: 1em;
  text-decoration: none;
  color: darkblue;
  text-align: center;
  border-radius: 5px;
  box-shadow: inset 0 -2px 1px rgba(0,0,50,.3);
}
.button:active {
  background: steelblue;
  color: white;
  box-shadow: inset 0 3px 8px rgba(0,0,0,.3);
}

Full code example

List View

List view as buttons

Thanks to the full-width and easy-to-tap characteristic in list view, we often use list view as button. Especially when we need a group of buttons.

We can have different groups of list put together. A group contains similar options, e.g. several social network log in/out buttons. Different groups has a margin to separate them.

For example, a setting view might have 3 groups:

1. a group of account information buttons
2. a group of social network buttons
3. a group of terms of condition & support buttons

List view

A list view is an UI pattern that list information and options from top to bottom. It is one of the mostly used component in mobile interface design.

Indicator

Besides the content, a list view can also contain indicator on the right, and may be images on the left.

The arrow > tells the user that by tapping this option, the application will shows detail on this option.

The checkmark ✓ tells the user that this option is enabled. This options might be used as checkbox or radio buttons.

An information i indicator tells the user that tapping on it shows extra information.

List view with information indicator

The i indicator itself is a button. This button links to a different view than tapping on the rest of the list item.

This is usually used in one-to-many relationship of records. For example, a project that contains multiple tasks.

Tapping the list item will goes to view that list those tasks under the project.

Tapping the i button will goes to the project setting itself, for example, renaming the projects.

List view with arrow indicator

The arrow > tells the user that by tapping this option, the application will shows detail on this option.

The > itself doesn’t contain extra functionality.

List view with checkmark indicator

The check mark may be used like radio groups or checkbox.

We can actually use <input type=radio> for the radio purpose.

The benefit is browser does the mutual exclusive characteristics for us. All we need to to style the radio inputs to be mobile touch friendly.

Scroll view

The mobile screen is too small that we often need to clip content into scroll view. In web, a scroll view usually means an element (most likely <div> or <ul>) with overflow: scroll.

Inertia scroll

Demo
Source Code

In iOS, the default scroll view doesn’t feel like the iOS’ native one.

We need -webkit-overflow-scrolling: touch to make the scrolling feel nature in iOS.

Conclusion

What we have learned today:

1. Touch optimizing of CSS for mobile touch screen.
2. Viewport configuration.
3. Button and examples.
4. List view.
5. CSS that enables inertia scroll in iOS.

What’s next? VueJS

We will move on to using VueJS library to build our view structure and handle the interaction.

End of lecture 4.

Feel free to contact me for any questions:

@Makzan.