“What is the best way to make a website mobile friendly?"

There are 3 reasons why I’ve been asked this question:

You’re just starting out in web development, and you know that mobile is a huge thing.
Your current website is not mobile friendly, maybe even customers have complained about it.
You’ve been a web developer for a while, and you’re trying to broaden your horizons and build marketable skills.

In any of these cases, you’re under a lot of pressure. There’s a lot to learn about mobile web design, and almost everyone has Opinions™ about it. All this makes it extremely hard to get started without an overwhelming fear of doing the wrong thing.

Instead of worrying about all that, I’m going to help you make your existing site mobile friendly within minutes. These quick changes will put you miles ahead of most of the competition, and you can tweak it from there.

But brace yourselves, because I’m gonna say something that sounds like blasphemy:

Making a special mobile website website isn’t critical-

Wait, wait! Put down the pitchforks!

*ahem*. Reduce page weight before you make a special mobile site.

The mobile web is crucial, but page weight is the universal bottleneck. So if you’re short on time, resources, or have too many other things to learn, focus on making your pages smaller. Everyone benefits from a fast-loading, low-bandwidth site. Kissmetrics wrote a two part blog series about how page load time affects conversions and the bottom line. The gist is that if your site takes more than a couple of seconds to load, users will leave. It would be foolish to prioritize a “mobile-ready” site over a fast-loading one, and since you don’t have much time, focus on making a fast-loading site.

Page weight?

Page weight is the total bandwidth and memory your site takes up once it’s fully loaded. Every image, stylesheet, and JS file you include adds to the page weight.

This is slightly different than page load speed, which is how long it takes for your page to load. They go hand in hand, but I find page weight is the more important metric to focus on at first. If your page is heavy, it will take longer to load. And even if you have a tiny page load speed, your site could be loading assets in the background, eating up a user’s bandwidth and decreasing overall performance.

Life finds a way

Think about the challenges the original iPhone faced. The idea of a “mobile website” was an anomaly, mainly reserved for Japanese sites (where a mobile phone revolution was already underway). For the mobile web to take off, Safari had to adapt, so from the start it’s included a ton of gestures and extra UI to make normal websites usable on a tiny screen. And it paid off; people learned how to browse the web on their phone and the mobile web was born!

But…the truth is that plenty of sites are not designed for mobile. So those gestures still exist in Safari and users can still browse the web.

Is it ideal? Not really. But users would much rather deal with a fast, non-mobile site than a slow “mobile-ready” site. Remember: if it takes more than a few seconds to load, users are gonna give up.

“Mobile-ready” horror stories

If I think the mobile web is crucial, why would I suggest ignoring it when you’re just starting out? So that you can focus on the user’s priorities.

Users have data caps, limited battery, and don’t want to stare at a screen forever whole your page loads. Reducing page load fixes all of these problems. Show them you care by saving them time and money.

I’ve seen horror story 50MB “responsive” sites that are “mobile friendly”, but 50MB on a cellular data network is pure hell. LG G Watch, I’m looking at you

You can always take an existing site and tweak it to become responsive. Building a fancy but bloated “responsive” site and having to gut it all at the end is a huge waste.

Make a site faster in 15 minutes (seriously!)

Images are the largest contributor to page size, so start there. Use imageoptim on your images before you publish them. It’s dead simple: open the app, drop your files in, wait until it’s finished! Viola! If you’re using SVGs, definitely optimize them using SVGOMG. Upload your SVG, fiddle with the settings, and download your optimized SVG!
Make sure you’re only loading the JS and CSS you need. Why do you need to use 3 different JS frameworks on the same site? Do you need Bootstrap just to style a few buttons and add some whitespace?
Reduce the number of ad trackers your site has (if any), it’s a huge hot-button issue right now.

What’s the magic number you’re looking for? Around 1 MB:

In a survey […] of 60 popular responsively designed pages, only 20% of the pages loaded within an acceptable amount of time. The one thing all the faster pages had in common: they were are under 1 MB in size.

You can check your page weight by running Pingdom’s Full Page Test tool or opening the developer tools in your browser.

If you’ve tried all of these steps and need to optimize even further, you can minify your JS and CSS to reduce its byte count. This is more of an intermediate process, so I wouldn’t worry about this right now (or if you’re out of options).

Okay, but how do I make it look nice on Mobile?

Congrats, you’ve already make huge progress by making your site fast! high five! Anything’s better than a white screen and a loading bar.

Now, start fiddling around with media queries and retrofitting your existing site for mobile. Rachel Andrew’s tutorial is a no-nonsense, actionable guide on this. Bookmark it and use it often

Hi, I'm Thomas Cannon!