Test Your Web

How to Test Your Web Design

These days one of the biggest challenges for web designers and SEOs is making sure that sites load well on the full range of different devices. If you have a website that doesn’t load correctly on iPhones or on Galaxy Notes, then you will be losing a large portion of your potential market, you will be damaging your reputation and you will be affecting your SEO as well (Google penalises sites that don’t display correctly on all screen sizes and resolutions).

This is why ‘adaptive design’ is so popular. What this essentially means, is designing a site that uses smart design to adapt dynamically to the device it is begin viewed on. By using ‘100%’ for the background width for instance you can make sure that your background will fill the screen regardless of the size of the device. Likewise, by using IF/THEN statements in PHP and Javascript you can also change the image that gets loaded to ensure that users aren’t forced to load unnecessarily large images over their cellular networks.

This is one of the smartest ways to design a website these days and to get around a serious issue facing the industry. However it’s also a trying process and one that can get very fiddly over time. And what doesn’t help is that you probably won’t be able to test it on every single device yourself. So what do you do?

At Home

One option is to try and approximate various different mobile devices and computers to test on. You can do this for instance by taking your own computer and zooming in and out of the image in the browser while at the same time altering your resolution.

Of course most people will also have a number of different devices of their own which they can test with. If you have a mobile or two, then this will let you test on at least those different screen sizes (and you can again try changing the resolutions on those devices). Another option is to test your website on virtual machines which you can access in a number of ways – for instance by using the Android emulator that comes with Android’s SDK and running virtual Android machines with different screen sizes.

Ways to Access More Screen Sizes

This will still only get you so far, so you might want to go farther afield to complete your comprehensive testing. One of the best places then to test your website’s look is from a computer/hardware shop. Head to somewhere like Curries or PC World and there will be plenty of machines there that will let you browse the web on different display sizes. Visit your site on a few of these and you should get a fairly broad picture.

Another option of course is to ask friends and family to try for you. Initially you can do this with an e-mail, but subsequently you can ask when visiting other people’s homes. Make a habit of testing your site each time you have access to a new computer, even when you’ve settled on your design, so that you never miss a problem.

Finally of course there’s always the option of crowdsourcing the process. Before your site goes live you can give access to a ‘beta version’ by password protecting your work and this can be a great way to get some feedback. People will usually be happy to do this for free as that way they’ll get to be a part of something, and it’s actually great marketing too that can help you to build anticipation.

A Useful Tip

A useful tip to bear in mind is that you want to design particularly for devices that are going to be often viewing your website. If you are doing a redesign, then use Webmaster Tools to look up the stats of your most common traffic and then make this the ‘target’ to aim for with your design.