Tech and Media Labs
This site uses cookies to improve the user experience.




Actionable Web Design

Jakob Jenkov
Last update: 2014-06-15

When you design websites or web apps for use on small devices you have to make sure that the website or app is actionable on a small device. By "actionable" I mean that you can get to the most commonly used actions easily. Let me give you an example:

If you have a website that looks like this on a desktop computer monitor:

A website as displayed on a desktop computer monitor

Then it is not very good if the user has to scroll around the website to find the top and left navigation on a mobile device. Here is an illustration of that (the dashed area represents the viewport of a mobile device).

A website as displayed on a mobile device without any adaptation to the device screen size

Of course, the horizontal scrolling should be eliminated by a responsive design that adapts the width of the website to the device. The website would then look like this:

A website as displayed on a mobile device with adaptation to the device screen size

But notice how long the website becomes. This happens when you stack content blocks under each other on a mobile device, which were displayed next to each other horizontally on a desktop device. In order to get to the top menu the user has to scroll a lot vertically, as illustrated here:

A website as displayed on a mobile device with adaptation to the device screen size, showing the viewport of the mobile device.

Therefore you should consider keeping the most used menus or menu items in a menu that is always visible on a mobile device. That way the user can easily get to the top menu, no matter where on the page he or she is. Here is a diagram illustrating that:

A website as displayed on a mobile device screen, with the top menu always visible.

In general the principle that applies is that all actions that are commonly used in the website or app should be easily available from anywhere on the website or app. Not just on the pages somewhere, but from the viewport of the mobile device too.

Jakob Jenkov




Copyright  Jenkov Aps
Close TOC