Desktop vs. Mobile: Three Key Website Design Differences

By now most of us know that the experience of browsing a website on mobile is very different from the experience of browsing a website on desktop. Screen orientations are different, we’re using thumbs instead of a mouse or trackpad, and certain tasks are a lot more difficult or cumbersome. That’s why designing a website experience to meet the needs of mobile users is so important. Here are three key components of your website that need to be distinct on mobile versus desktop.

1. Content organization

One of the most complex elements of designing for mobile is the question of how content should be organized. The needs of your mobile users might be distinct from those of your desktop users. Or their needs might be the same (or similar) but their browsing behaviors will change depending on which device they’re using. When designing for mobile, the first priority should be organizing website content to meet the needs of mobile users. Content should be stacked vertically to fit the narrow widths of mobile devices. Desktop devices have portrait orientations so content can stretch across a screen and often multiple messages or images can live comfortably in such a wide space. Mobile devices are usually used in portrait orientation (and the smaller screens mean that even in landscape mode, horizontal space is limited).

Glasses retailer, Warby Parker, rearranges content from horizontal alignment to vertical when viewing on a mobile device. Another thing to think about is what content to prioritize. Are the needs of your mobile users different? If so, it’s worth considering designing for mobile in a way that prioritizes the needs of those users, rather than simply duplicating from your desktop site, which was most likely designed with desktop users in mind.

In the early days of mobile web design, when our phones were less sophisticated and we were less comfortable using them to carry out more complex activities, it was common to strip out much or most of a website’s content and launch a mobile site with the barebones of what it seemed like a mobile user would want to know. In 2017 that approach is no longer acceptable. Today’s mobile users want to be able to access the same browsing experience on their phones as they are on their desktop computers. Furthermore, mobile is the sole or primary device for many people so a fully-operational mobile site may be the only way to reach a portion of users.

Cult cycling studio-chain, Soul Cycle, allows users to book a class on desktop or mobile. Content layout is vertically-aligned in the mobile version.

2. Form fills

As marketers we spend a lot of energy optimizing our web forms for maximum conversion. We know that a poorly designed form is guaranteed to be a conversion-killer. The same is true, of course, on mobile. And forms need to be designed specifically to make it easy for mobile users to fill them out.

Vertical alignment
Guess what? That whole vertical alignment thing? It applies to forms too. The principle is the same — it’s difficult and tedious for mobile users to scroll back and forth horizontally in order to complete a form. In order to make the form fill process as easy as possible for mobile browsers, make sure form fields align vertically.

Equinox rearranges form fields for easy completion on mobile.

Predictive text
Help your users out by providing predictive options for fields with many potential responses. Offering predictions allows users to move through the form quickly and reduces opportunities for typos, which are more common when typing with thumbs on a small screen.

Minimize fields
Because filling in forms on mobile is generally pretty onerous, you want to make it as easy as possible by reducing the number of fields. To accomplish this you should only ask the user for the information that is absolutely necessary to complete the transaction. Having additional information about the user might be convenient for your company, but it shouldn’t come at the expense of a conversion.

Whenever possible you should try to use a single field of entry. Again, the reasoning is that it’s annoying for mobile users to have to jump through a large number of fields. If you can condense multiple fields into one, it’s a good idea to do so.

3. Menus

Menu formatting is definitely a key area of difference between desktop and mobile. On desktop it’s common to have mega-menus with many categories and sub-categories. This type of setup works great for desktop users who have screens large enough that they can read the text in those menus and can easily click on text links.

It’s a different story on mobile, of course, because screens are small and thumbs are (relatively) large. Mobile menus should be designed with these things in mind. That means single-level menus with large text or buttons, and vertical alignment for menus with many options.

J.Crew’s desktop site has large mega-menus with tons of categories.

On mobile, menus collapse and then expand as a user narrows in on a category.

This is by no means a comprehensive list of all the features of a mobile website that need to be distinct from the desktop version, but we do think that these features are three of the most important ones. Remember to always consider the needs of your mobile user as well as the unique ways in which they browse and consume information. Hopefully the examples provided in this post serve as inspiration for improving the mobile on your site.