We all know that the world now fits into our palm - through our mobile phones. From flip-phones to smartphones, to an expanding galaxy of connecting devices, we now have an easy access to the world’s information at the click or touch of our thumb. People now expect connectivity wherever they are and which ever device they choose - to keep pace with the changing times. To stay connected on go has become an impeccable part of our lives now, and for the foreseeable future.

We cannot deny the fact that, by now most of us have the experience of browsing a website on mobile, which is way different than that on a desktop. Undoubtedly, it’s increasingly important to design websites differently for mobile browsing as well as for desktop. This can mean anything from tweaking the regular site to fit into the specifications of an Android, iOS devices, to CSS media queries, responsive layouts and even separate websites for mobile users only.

How do you make a website work well on a mobile browser?

Let’s look at few key components of website designing that need to be distinct on mobile versus desktop.

Content organisation

The needs of a mobile user is distinct from that of a desktop user as their browsing behaviours change depending on the device they use. Most desktop displays have a landscape orientation, well, it’s the opposite in case of mobile devices i.e. a portrait orientation.

Let's start with one of the most obvious difference; mobile browser displays are smaller than their desktop counterparts.

Physically smaller: Typically, around 3-5 inches for a phone, although some larger phones are 6, 9 or 12 inches. This compares to a typical notebook screen size of 13-17 inches, and a desktop screen size of 20-30 inches.

A smaller display means that the user can see a lot less information at once and would have to scroll below the fold, longer. Most modern mobile browsers compensate for this by allowing the user to zoom in & out easily. So, for your site to work well on a mobile browser, it needs to have:

• Fewer columns of content (a single column is ideal) not leading to more scrolls.
• Easy-to-read font.
• Page layout needs to be simple & not heavy, yet looking appealing in a small browser.
• No overly-wide elements, like, large multi-column tables, extra wide images, slideshows, flash movies etc.
• Navigation along the top of the page rather than down.

Touch input

Earlier, when phones were less sophisticated and people were less comfortable using them to carry out more complex activities like filling up forms, it was common to strip out most of a website’s content and launch a mobile site with its’ primitive aspects, assuming that a mobile user would need just that. Well, in 2017, this approach is not acceptable any more.

Marketers design web forms for maximum conversions and it needs to be designed specifically to make it easy for mobile users to fill them.

• Vertical alignment In desktops, forms drop down in a landscape format which makes it easier for the user to fill it without a scroll, or with least numbered scroll. It’s not the same with mobile users as it demands for a vertical presentation. It’s difficult and tedious for mobile users to scroll back and forth horizontally in order to complete a form, hence the process has to be as easy as possible i.e. form fields have to be aligned vertically and have lesser fields to fill.

• Hover overs In desktops, you have a cursor to take you along the page & click on what you want to read, but in the case of mobiles, since there are no cursors, trick to compensate it is having a hover event when the user taps the element once and click event if they tap again.

• Predictive text Offering predictive options for fields with many potential responses, allows users to move through the form quickly and reduces opportunities for typo errors.

Menu options

On desktop it’s common to have mega menus’ with many categories and sub-categories. But, its not the same in mobile as screens are smaller and thumbs are either large or small. This calls for, single level menu strip with medium sized text & buttons, vertically aligned for menus’ with many options.

In mobiles, menus’ collapse and then expand as a user narrows in on a particular category.

Slower processors

Although they are catching up, mobiles generally have much less processing power than desktops due to various reasons. Therefore, mobile browsers take longer to render pages and Java script intensive pages run very slowly.

The only solution to these issues can be; to not have large graphics or embedded videos that ask for download, instead have a simple format for the mobile application of the same website on the desktop. By keeping it light weighted and with specific options only, it would lure the user to stay on the mobile site longer, creating a responsive site, leading to conversions as well.

---

Comments

---

Prev Back to blog page Next