Mobile Design – 5 Tools to Make Sure Your Site is Responsive

Mobile Design

When the web design industry started years ago, mobile design wasn’t something that designers even had to consider. They knew that anyone who was looking at their website was looking at it on a desktop computer. Designing was simpler, because the only thing that had to consider was someone scaling their browser smaller.

Then, laptops were introduced and computers started changing, and designers had to start considering varying screen sizes. Today, there is a new phone, tablet, or device released almost every week that makes it possible for people to browse your website on the go. There are too many different screen sizes to count, and beyond that, people can turn their device on its side and view your site in a new screen size once again.

Mobile Design

For designers, this means things are now a little more complicated than they used to be. Though most people design for desktop, it’s important to make sure that your site looks good in different sizes and orientations, to ensure that everyone can see your site at its best (no matter what device they are using). This is even more important today, as people start to browse on mobile more and more. Some sites now even have the majority of their readers visiting them through mobile. It’s important to know your audience, know how their looking at your site, and then optimize to meet their needs. Below are a few tools that I use to help me do this in all my site designs.

Google Analytics

The first thing to consider is how people are viewing your site. You might hear numbers floating around out there like ‘60% of all traffic is mobile’, and though that might be true in general, it’s important to understand your own unique numbers and how your audience is interacting with your site.

If you have Google Analytics set up on your site (and you should) then you already have this information waiting for you. Go to Google Analytics and log in to your account. Go under the site you are concerned about, and click on ‘All Website Data’. In the sidebar click on ‘Audience’ and it will expand down to give you more options. Underneath ‘Audience’, click on ‘Mobile’ and then ‘Overview’. This will bring you up a chart with all the sessions in the past month (you can change the timeframe as you wish).

In the chart you will have listings for Desktop, Mobile, and Tablet, with percentages of how many people visit your site using the various forms. Interestingly enough, though my site is responsive, I have almost 69% of my users viewing my site using their Desktop computers. This isn’t bad – and doesn’t mean that my audience is having trouble viewing my site on mobile – it just means that I am reaching a different segment of people than the ‘typical’ mobile user.

Google Analytics Mobile

Once you see what percentage of your readers are viewing via mobile or desktop, you can delve even further. Click on Mobile>Devices to get a list of different devices people are using (my top device is the Apple iPhone) of click on Technology>Browser&OS to get a list of the different browsers people are using on their computer (my top browser is Chrome).

**That’s super interesting for me because I have NEVER used Chrome in my life. I design using Safari, and test my site using Safari, but almost 4 times as many people view my site in Chrome as they do in Safari. This tells me that I should take a glance at Chrome and consider making it my default browser as well.

Google Mobile Friendly Test

This website is a simple one set up by Google where you can enter your URL to see how responsive it is. You just paste your URL into the bar, and hit Analyze, and Google will tell you how mobile friendly your site is. You’re hoping for a green response with ‘Your site is mobile friendly’ displayed, but if you get red and your site is not mobile friendly, they will give you some suggestions on how to improve.

My site got a green rating, but I wanted to see what kind of suggestions would be made, so I found a non-mobile friendly site, and test it as well. Can you believe that the BBC website isn’t mobile friendly?! Of course, this is because they recommend people use their app to browse on mobile, and the site is very large and complicated so it would be hard to make responsive overnight. They’re likely (hopefully?) in the process of making the site more mobile friendly.

Google Mobile Friendly Test Google Mobile Friendly Test

Testing Responsive Design

There are tonnes of sites out there that let you see your sites as it appears in different forms, sizes, and media, but this one is one of my favourites, and the one I use to design my own sites. It lets you scale the window within the window (you’ll have to see it to know what I mean) which is super helpful – plus you can see the site on many different devices.

Testing Responsiveness

Creative Little Respondr

Okya, I have to say that I’m a little in love with this one. It lets you see your site as it appears on a number of different devices at once. On most of these sites you can just see iPhone 4 on its own, then you have to switch to iPhone 5, etc. to see all the variations. This site lets you see them all at once, side by side. It’s super handy for designing because it saves a lot of time, and makes it much easier to see how your design changes affect different platforms.

Creative Little Respondr

Resize my Browser

This one is a really interesting little tool. It’s just a list of different screen sizes, and the corresponding devices that use that size. When you click on a screen size, it opens a new window in that exact size, so that you can see your url in the specific size you are looking for.

Resize my browser

What’s my browser?

I like this tool because it’s very simple and clean looking. When I’m designing a website, I like to keep this tool open in a different tab. Then, whenever I am scaling my browser, if there is a glitch somewhere along the way, I can stop and see exactly what the size of the browser is when the problem appears, and then I can fix it. This is a great tool to use because it’s so simple and can help you troubleshoot minor responsive issues.

what's my browser size

Starting in April of this year, Google implemented a new search algorithm that favours mobile friendly sites. This means that sites that are mobile friendly will show up in search results above sites that are not. So, not only does a mobile friendly site make it easier for users to navigate and interact with your content, but it makes it easier for them to find it in the first place! Having a mobile responsive site is vital to the survival and success of your online blog or business!

How did you ensure that your website was mobile friendly? Tell me in the comments below!

3 thoughts on “Mobile Design – 5 Tools to Make Sure Your Site is Responsive”

    1. Thanks Emilie! I definitely will – it’s on my list of things to do. I actually downloaded it the other day but I haven’t gotten around to trying it out yet.

Leave a Reply

Your email address will not be published. Required fields are marked *