Back to Website Launch Checklist

How to make sure your website is responsive and looks good on mobile devices

How to make sure your website is responsive and looks good on mobile devices

As more and more devices of all shapes and sizes get an internet connection, it's more important than ever to ensure that your websites work well and look good on as many of these as possible. Read on to find out what devices you should be targeting and how best to do it.


What devices and sizes should I target?

Naturally you want as many people as possible to be able to use your website, so you should ideally try to make sure it looks good on anything. That being said, it's unlikely that a large, complex, data-driven application is going to be used on someone's Apple Watch so there is something to be said for considering likely use-cases.

For the most part, somewhere in the region of 3 CSS breakpoints is likely to work well - I personally like to have these around 1100px, 800px and 500px, however this can (and should) vary depending on the specifics of the page you're building. If you don't know what any of this means, make sure you learn about CSS media queries as soon as possible, they're absolutely critical in modern responsive web design.


How to test responsive websites

Actual mobile devices

There really is no comparison to the real thing. Especially when it comes to devices, no amount of emulation on your desktop PC will give you the constraints and considerations of real world testing. Try and beg, borrow and steal your way to testing your website on as many different brands and models of smartphone and tablet as you possibly can. You're sure to find some serious usability issues which you never even thought of.

Google Mobile-Friendly Test

This isn't particularly comprehensive, but it's an important one to check off the list. Google's Mobile-Friendly Test quickly asseses any URL and lets you know what they consider any of the issues to be. You want to make sure you nail this one as Google do use this as a search ranking consideration.

Browserstack

For a quick "at a glance" look at several different renderings of your site, Browserstack can take any URL and generate a series of screenshots on multiple different devices and operating systems. This is useful for aesthetic considerations, but is unlikely to help you uncover any usability issues.


Hopefully this article has helped you get to grips with the importance of testing your responsive websites, and the best tools with which to do it. Remember, there really is no comparison to the real thing so get your hands on as many devices as possible!

  Back to Website Launch Checklist