8 Things to Keep in Mind When Designing Websites for Mobile Devices

Mobile browsing traffic surpassed desktop users way back in 2016. More and more people are primarily using their tablet/smartphone to access websites than their laptops or desktop computers.

What’s the impact of all this increase – mobile user experience can no longer be kept second priority and a mobile-first approach must be follows. Optimizing websites for mobile devices should be the crux of your development efforts for every single website project you do, no matter how big or small a website project might be.

The explosion in mobile traffic has fundamentally altered how we browse the web. And there are notable differences in how people browse on mobile devices and tablets. It’s crucial that you keep this in mind when building website.

To put you on track, here are 8 mobile/tablet design best practices that’ll help you modernize the visitor’s user experience.

8 Absolute Essentials for Designing Websites for Mobiles & Tablets

Let’s see how to make an awesome impact on any screen size.

Navigation for Mobile Standards

Mobile navigation impacts three crucial elements that make or break your user’s mobile experience – UX, relevance and content. The links and the menu all come together for a holistic device-specific experience. Classic navigation doesn’t work well on mobile screens as it looks cluttered on the small screen. Here’s what you can do:

• Limit the number of menu items between four to eight.
• For ecommerce websites design multi-level navigation with adequate drop down functionality.
• Employ serial position effect – list important pages of menu as per priority and common anticipated actions.
• Sticky navigation can be used to help increase visitor retention by making menu accessible at all times.
• Navigation language and fonts can be tested through A/B testing to select the most potent combination.
• Intuitive navigation, including Hamburger menus, help save space.
• Put all the less important navigation links to footer.

I go for designs that prioritize the navigation options. In case a user has to make more than three clicks to reach a page, I would shelve such design. Hiding vital elements from users makes it complex and difficult to access. If design allows suitable space, you can link the logo back tot he home page as conventionally suggested.

Designing for Thumbs

Designing responsive websites becomes easy when you understand how users physically interact with websites on various devices. Devices operated with thumb taps or swipes are perceived fundamentally different than those which employ mouse clicks.

• Call to actions and menus should be bottom central or within easy reach
• Keep it cards friendly so users can spend more time
• Gestures and movements must be performed naturally
• Provide adequate tapping space and allow smooth swipes
• Keep button size consistent throughout the page
• Spacing between buttons, text and links should be uniform across various text blocks

Use a tab bar or tabs to display high priority navigation options. In a desktop environment, navigation is prominently displayed on top left hand corner where it is clearly visible. On mobiles, however, the reach of thumbs has to be viably navigational as per the location of menu bar. It’s vital that important elements are within reach because majority mobile users, approximately 80%, use one of the thumbs to operate the screen. Thus, the content should be laid down keeping this usage psych if you want users to browse easily.

Optimize Forms for Mobile

While browsing on mobiles, we all have had some frustrating experience while filling the forms as they are quite long and involve lots of typing. This experience can get even more frustrating on smaller clumsy phones. With the advancement in mobile software updates, the typing experience has improved with features such as auto-correct; but still typing is a big deal.

Whether it is a contact form, newsletter sign up, registration/login form, order submission, lead generation or others, you should always make the experience swift. To reduce the typing strain on mobiles, developers should design forms with only mandatory ones.

Minimal fields and quick submission must be key to mobile forms. For example have a look at the get quote form we have on our homepage. You’ll find that we’ve kept it short and to the point.

Use auto-suggest and dropdowns wherever possible so that user has to type less to help fill the forms quickly.

Keep Different Mobile Screen Dimensions in Mind

So, which screen should you be designing for? In-depth research is the right answer here. Mobile resolutions can be tricky nowadays with varying aspect ratios. Try at least three different layouts to create a comprehensive design for the website. For e.g. under 480px, 480 to 768 px and over 768px for bigger screens.

Go for popular mobile and tablet devices and their screen sizes so that you can have most users covered. This will also cover key responsive breakpoints. At this junction, designers should also cover both portrait and landscape orientation scenarios.

Use Less Content

Or to put it simply, hide and prioritize content appropriately. Sometimes, removing content means compromising on the mobile experience. Situation demands that content display is absolutely pertinent. So, how can you display whole content without making it look drab and super lengthy. Simple – you hide and prioritize! When we are minimizing cognitive load, content should be counted.

The absolutely vital content must be displayed up top so it can be digested easily. Next, you can create tappable areas to hide content appropriately. For example, you can display just the title (add an introductory paragraph), along with a clickable link to open up further content. The user can click on link to view full content body, if he so wishes.

Proper Font Sizes

Screen size and resolutions are getting increasingly complex. In order to make the text legible on various screens, you must ensure proper font size is employed. CSS file contains the font size details. In case, there is no custom font size, browser itself assigns a default font size (normally 16px). Fonts are measured in various other units such as Em’s (em), points (pt), and percent (%).

Here are some general recommendations relative to font size:

• Follow the most common 16px font size. You may vary the font size as per font properties.
• Typographic scale can be varied as per the base font size.
• There has to be vertical space between text characters. Default browser line height is 1.2em. Adapt the line height accordingly.
• Don’t use too many fonts and varying typographic scales. It throws the users off balance.
• Kerning – The space between two letters, called Kerning, can be adjusted to achieve aesthetically perfect results and enhance readability.

You can use Type-scale.com which provides pretty nice tool to find out the exact typography options for your website.

Body font sizes and headings must be balanced as per the screen size of the device. Typography can be defining factor in content heavy websites. Thus, tread with caution here.

Use Collapsible Sections/Accordions

A block of long text and lengthy paragraphs will not be perceived positively on a mobile screen. This makes it difficult for the user to find the information they are looking for. An ideal solution is to use accordions, or collapsible content sections. These are ‘containers’ filled up with content, which expand when the user taps. This way, visitors can scan your page, read headings, and tap on a heading to expand.

It’s primary benefit is that you can put a ton of content on a page. Simply create appealing headings and users will tap on the ones they would love to read further. However, designing perfect accordions is an art! Employ the right mix of icons, content and headings to make every accordion worth clicking.

Fluid Vs. Responsive

Lastly, we come to the most important debate – fluid or responsive! Well, both come handy when you need certain features. First you have to know the differences. Fluid layouts (or Liquid Layouts) ensures proportional layout of elements occupying equivalent space in percentage terms on various screen sizes. On the other hand, responsive design employs CSS Media Queries to create various layouts depending on the screen used.

The intent of the fluid design is to present all the elements with the same spatial weightage. Responsive design aims to present a device specific layout that ensures each device gets custom layout. I recommend using responsive design as fluid won’t work well in most modern website designs.

Wrapping Things Up

This is just tip of the iceberg. Designing mobile websites is getting trickier everyday. There are many technicalities, responsive design updates and mobile market trends. These points, however, cover, the crux of this genre. Implementing these will surely give you a head start and ensure your website fits well on most modern devices.

And once you’ve designed the website in tools like Adobe XD, Sketch or Figma, feel free to reach out to us and we’ll help you with conversion of those designs to WordPress website code.

Want more tips on mobile redesign or wish to share your inputs? Get in touch with me and I’ll be happy to take things forward.