Responsive Web Design: 6 Tips For A Mobile First Approach

There’s a 51.92% chance you’re reading this article on a mobile site. If you happen to be on a smartphone (or even a tablet) at this time of reading, then it should take little to convince you that responsive web design is critical to the success or failure of any website.

There are 2.6 billion smartphone users in the world today—over a third of the entire human population.

Experts expect this figure to grow even more over the next five years as smartphones have become increasingly affordable and widespread. It’s no wonder search engines like Google are taking a mobile-first approach when indexing and ranking new content. Any developer or webmaster knows that this is a very big deal.

If you’re running a site and haven’t gotten around to mobile just yet, here are some responsive web design tips you might want to consider:

 

1. Practice Minimalism

 

The first thing people need to understand about mobile is limited real estate. Unlike desktops or laptops that provide 13 to 15 inches of screen space (sometimes even more), the majority of smartphones are barely larger than a regular-sized palm. For web designers and site managers, this poses a fundamental problem: how to create a complete, user-friendly website without compromising functionality.

The answer to this question is minimalism.

Minimalism is a design philosophy best described by the words of late-great French writer Antoine de Saint-Exupery: “Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away.”

When designing a mobile site, begin by taking away. Remove page elements one by one until there’s nothing left to remove.

If after this exercise there’s still space for more (which, to be frank, there usually isn’t), slowly add elements back in order of importance. Doing this ensures that whatever limited space you have is utilized to the fullest, thereby giving visitors everything they need without overcrowding their screens.

 

2. Content First

 

Designing content around mobile is a bit trickier. Apart from the limited space, there’s the added difficulty of screen rotation, device compatibility, zooming, and a myriad of other problems. All of these factors make it harder for your content to shine through.

Picking up from the first point, you need to prioritize. If there are extraneous elements that distract from your visitor’s content experience, remove them. Usually, these include tables, sidebars, hoverable elements, and the like. Don’t even think twice.
Focusing on content and content design before anything else makes for a better mobile experience and, more often than not, leads to higher conversions.

Ideally, when visitors are browsing your mobile content, everything else (e.g. navigation bars, home buttons, menus, etc.) should be out of the way.

 

3. Enlarge Important Touch Points

 

Remember the first iPhone? As great innovation as it was, typing on it was extremely frustrating, almost like threading a needle.

Smartphones and mobile websites have gone a long way since then. Today, typing on a phone is second nature—the keyboards are more accommodating, the buttons are larger, and the overall typing experience is much, much better.

Sadly, many websites are still lagging behind, with buttons and controls that belong in the pre-mobile era. All these make for a poor user experience that results in short website sessions, weak engagement, and a lot of bounce.

The easiest way to solve this is to make your buttons more clickable—i.e. large enough to accommodate the tip of your thumb, roughly 48 x 48 dp. Also, place the text inside your buttons for easy identification.

This may appear like a small, insignificant change, but it’s one that can increase the conversion rate dramatically.

If you’re having trouble configuring your site, you may want to contact a mobile design expert like Vardot.

 

4. Accelerated Mobile Pages

 

It's a well-known fact today that a slow page load means an increase bounce rate. According to Semrush, you could lose 90% of potential visitors if takes more than three-seconds to load a page. If you aren’t on AMP yet, you could be killing your SEO and losing out on a lot of potential customers.

What is Accelerated Mobile Pages (AMP)?

AMP is an open-source web programming language designed to deliver static content instantaneously to mobile devices like smartphones and tablets. It’s a lean, stripped down version of HTML built specifically for speeding up static (read: non-interactive) web pages on mobile devices.

With AMP, you get rapid delivery but sacrifice some functionality. Here are some of the disadvantages:

• JavaScript is limited apart from an off-the-shelf AMP library

• Images load when you scroll down to them (a.k.a. lazy load functionality)

• CSS needs to be streamlined

Disadvantages notwithstanding, AMP is a great way to improve your UX (user experience) and boost your SEO. It’s important to note that Google has gone lengths to identify and promote AMP pages.

5. App Your Game

 

Want to take mobile design one step further? Supplement your website with your very own mobile app.

Mobile apps provide far more flexibility than a mobile site. Plus, they’ve been shown to result in higher conversion, better speed, lower bounce rate, and increased savings.

Think of an app as your own little world—not only can you design it as you see fit, you can also engage/retarget your customers with notifications and alerts, customize and add more functions, and offer exclusive in-app promotions, among other things. There’s really no limit to the things you can do.

Just to clarify, this isn’t an either or thing. An app is actually a great supplement to a mobile site and vise versa. By leveraging both, you can generate more traffic, build multi-channel sales and conversion funnels, and cater to more people.

 

6. Socialize With Users

 

People nowadays practically live through their social accounts, and most of them access those accounts using mobile devices. Reports show that we spend almost two hours everyday on social media, and over 80% of all social media time is accessed on mobile.

Needless to say, if you aren’t optimizing for social media on your mobile site, you could be missing out on potential traffic and conversions.

Social media is a powerful tool for making personal connections. By allowing website visitors to reach you socially, you’ll be able to open up avenues for engagement and interaction that will hopefully foster brand loyalty and improve your bottom line.

Place social media buttons and widgets in prominent areas on your pages so users can like, share, comment, and otherwise engage with your content. Ideally, you’ll want to include the big ones like Facebook, Instagram, Twitter, Google+, and LinkedIn.

 

Test, Test, Test

 

A mobile first approach doesn’t stop at building your website or app. Oftentimes, you need to change, tweak, revise, review, analyze, and optimize on a regular basis.

...which brings us to testing.

What better way to improve what you already have than by testing it. Pull up your KPIs and analytics to see where you can improve—Is there a particular page that converts poorly? Are there elements that cause users to abandon your pages? Is your mobile website slow?

The best way to go about this is A/B testing (i.e. testing one element at a time while keeping all other factors constant). Points of comparison can be as innocuous as the color of a button or the text inside a CTA. You’ll be surprised at how simple changes can lead to powerful results.

Not sure how to go about this? There are hundreds of tools you can use to test elements from page speed to conversion to practically everything else. Read Top 7 Tools for Testing Your Mobile Website.

Here’s a more comprehensive piece on A/B testing if you’re interested. The whole thing is a long iterative process, but one that’s well worth the gains.

Conclusion

It’s clear as day that the future of the Internet is online. If you own a site or are running one, responsive web design is an absolute must—it’s an inevitable truth everyone on the Internet has to face.

Ready to grow your site mobile? Follow the tips above and you’ll be well on your way!

Need advice? Collaborate on mobile with a trusted web developer.