How to Make Your Blog Mobile Friendly

 

How important is responsive design when it comes to what your blog looks like?

Many blog owners shy away from responsive design because they think it involves a lot of coding. 

While you can certainly use CSS to create a mobile-friendly site (it’s not as hard as you think!), there are other ways that even a beginner can implement to ensure that their blog looks and works beautifully on a smaller screen.

 

In this article, I’m going to go over some ways that you can make your site more mobile-friendly.

But first, let’s look at why you should think about the responsiveness of your site and how to check to see if your site measures up, literally, on smaller screens.

Let’s go!

Why Should Your Site Be Mobile Friendly?

With most of the world’s population using mobile phones, and the vast majority using smartphones, it’s important to optimize your site for mobile devices. A mobile-friendly website can contribute to your blog’s success in a variety of ways:

Higher page views and lower bounce rates. If your website displays beautifully on small screens without the need to zoom and also has convenient navigation, visitors will be encouraged to stay longer and move from page to page.

Reader loyalty. When visitors are satisfied with their interaction with your blog, they’ll want to keep coming back. Alternatively, a bad mobile experience means that visitors are less likely to become loyal followers.

Search engine optimization. Search engines such as Google show different results for mobile searches and desktop searches. If your blog isn’t mobile-friendly, it becomes more difficult for mobile users to find it.

Increase social shares. Satisfied visitors are more likely to share your content on social media which will lead to an increase in site traffic.

Faster loading. A responsive site will load faster on smaller screens, which is beneficial in attracting users as well as ranking higher in search engine results.

I use to fall into the trap of designing my websites on a desktop and ignoring their responsiveness on smaller screens. When I started looking at my sites on my smartphone, they looked like crap.

User experience is a huge part of boosting traffic to your site and turning visitors into loyal followers. Having a mobile-friendly website drastically helps in this!

Testing Your Site’s Mobile Friendliness

Not sure how your site measures up on smaller screens? There are ways to test your site’s mobile-friendliness!

Obviously, you can grab your own smartphone or tablet and load up your site to see how it looks. This is probably the most accurate way of checking how your blog translates to smaller screens.

However, to save you the hassle, you can also use some super helpful online tools to see if your site is responsive. One I like is called Responsinator.

To use Responsinator, simply plug in your website’s URL in the top search bar and click “Go”. Your site will load up in mockups of different screen sizes!

You can also check out Google’s Mobile-Friendly Test, which doesn’t necessarily help you spot issues when it comes to user experience, but it will run tests to see if your blog “passes” or “fails” as a mobile-friendly site.

It will even give you tips on problem areas and page elements that could use some improvement!

How to Make Your Site Mobile Friendly:

1. Use a Responsive Theme

No longer do you have to code your site to be responsive on mobile devices! Many amazing (and free) themes are already designed to accommodate smaller screens.

Just look for a theme described as “responsive,” and you’ll know it’ll look great on a smartphone or small device.

Some of my personal favorites that I have used in the past (before I delved into Divi) include Astra by ATheme and Elara by LyraThemes – and they’re both free!

2. Stick to Simple Designs

While there are lots of free templates out there that look amazingly fantastic on a desktop computer, sometimes those intricate designs don’t translate well to smaller screens.

Because a mobile screen doesn’t give you a lot of room to play with when it comes to layout and design, it’s best to stick to a template that is simple, easy on the eyes, and quick to load.

With a simple mobile design, you can keep your reader’s attention on the content you want them to see instead of the fluff that surrounds it.

Mobile users have a very short attention span, and you want to keep their attention instead of having them swipe away from your content.

3. Optimize Image Sizes

When you use an image on your website, it’s going to load in much bigger for a larger screen, such as a laptop.

However, you want that image to load as quickly as possible as well as scale down to a smaller size for mobile screens.

This means getting that image to have the smallest possible file size while still retaining its quality and crispness. Shrinking file sizes uses less data on mobile phones and reduces loading time (remember, mobile users have short attention spans!).

Optimizing your image sizes is as simple as installing a plugin. I would recommend Smush – not only because it sounds delightfully silly, but it’s easy to use and gets the job done!

4. Use Standard Fonts

I remember when fonts used to be very basic, and anyone with a website naturally had to use Comic Sans. We’ve evolved since then, but just because we have access to fancier fonts through sites like Google Fonts, it doesn’t mean we should go crazy with fancy fonts.

Creative fonts may look really cool, but there are two problems when it comes to viewing them on a smartphone:

Your reader may be prompted to download the new font in order to view it.

Fancy fonts are harder to read on smaller screens.

You want to encourage your readers to stick around on your blog and not jump ship because reading your content is a hassle. Stick to basic fonts that are widely available on mobile devices and easy to read on smaller screens.

 5. Ditch Popups

While you certainly want to build up an email subscriber list or pitch your latest product, popups on any screen are just annoying.

On desktops, they aren’t so bad because you can tuck them away at the bottom corner of the screen, but on mobile devices, they can potentially block the entire page.

Nothing prompts a reader to skedaddle like a popup blocking their view!

Plus, finding that little “X” to close the popup can be nearly impossible on a mobile screen. So when you’re thinking about responsive design, ditch the popups.

Or, at the very least, disable them for mobile users or set them to the bottom of the page.

6. Up Your Website’s Speed

A huge part of mobile design is how fast your blog will load on a mobile device. Long gone are the days of dial-up internet where you had to leave Napster running overnight to download half a Will Smith song – now everyone is accustomed to faster internet speeds and not accustomed to waiting.

If your website loads slowly on a smartphone, your audience likely won’t stick around.

Most websites take over five seconds to fully load on mobile devices, which is far longer than what visitors are willing to wait before they peace out.

You can improve your site speed by compressing your images and CSS, upgrading your web hosting plan (if you’ve outgrown it), and using a framework called AMP (Accelerated Mobile Pages).

7. Use Media Queries

So far, I’ve been able to give you tips for creating mobile-friendly designs that haven’t involved CSS. Now I’m going to talk about mobile-friendly design that involves CSS.

Please don’t run away screaming.

Media queries are a coding technique you can use to tailor your stylesheets to different devices. They tell the site to ask a device what size it is and then direct the browser to display the site according to the CSS rules that you have set.

Even if you don’t have much knowledge or experience with CSS, you can always play around with media queries! Just make sure you always back up your stylesheet before you make any changes.

Here is an example of a media query code:

@media screen and (max-device-width: 640px)

body {

background-color: red;

}

 

Basically, this is going to tell any screen that has a maximum pixel width of 640 to display the background as red. Otherwise, on all other devices that don’t meet this criterion, the background will remain the same.

Want to learn more? Check out this beginner’s guide to media queries

8. Use Divi to Design Your Site

I can’t get enough of Divi! This point-and-click theme allows you to make a responsive website that looks amazing on smartphones without touching a lick of code!

When you use the Divi page builder, you can use the preview function to see what your site will look like on smartphones, tablets, and desktops. You can also disable certain sections for each screen, giving you ultimate control over how your blog appears on each device.

Hopefully, you have a better idea now of why your site should be responsive and how to make it more mobile-friendly!

 

If you have any questions at all about mobile responsiveness, don’t hesitate to get in touch!

Now it’s your turn – How do you make sure your site is mobile-friendly? Drop your tips in the comments below!