Table of Contents
When you design a layout for website, one of the things you have to consider in-depth is testing it on various devices to see how the layout adapts to them. Your goal is to change the layout according to resolution in fluid way that will not disrupt user’s experience of browsing your website. To do this successfully, you have to test your website on wide range on devices. Is this possible? Can you bypass this somehow? Let’s take a look at some available options …
Browser
First option you can try is simple and cheap. Open your browser and re-size the width and height the window. Yeah, it sounds pretty silly and it looks like it too. Just imagine yourself moving border of the window pixel by pixel to see if layout is not breaking. This type of testing will also require more time and patience from you. What’s more, if you are perfectionist and want to create pixel-perfect layout, you will probably need to take a vacation to get it done. However, if you don’t have any other way to test your website, it is still better than not testing it at all.
Next important thing when it comes to in-browser testing is compatibility and feature support. To ensure your website works properly not only across various devices and resolutions, but also across different browsers. To be able to check this on your list, you need to view your website on these browsers – you have to install them or at least get portable version. Problems appear when you want to run different versions of the same browser. In that case, portable versions are probably the only way to deal with it.
Even if you get all versions of all browsers ever created (I doubt if it is possible), there are still gaps you cannot fill. These gaps represents modification made by user to their systems and browsers. For example, some user might block specific elements, urls or JavaScript. Don’t forget thousands of extensions and apps available for browsers. All of these scripts and addons can alter behavior of the browser in different ways.
Emulators
Middle way to go is to use some kind of emulator and hope it copies original behavior very well. Hope is important to mention in this subtopic because all these fancy programs and snippets created to simulate original device are working only into some degree. Interesting thing is that even two emulators of the same device can behave differently under specific conditions. This only increases the overall uncertainty. You can try to overcome it via working with a big amount of emulators and, again, hope you are getting the most realistic results.
However, in the end, it doesn’t matter how many emulators will you use because emulators are great at doing one thing – emulating real experience. Don’t forget that every device include hardware and software side. You can try to emulate all the features and properties you want, however, there will still be some unexpected glitches and quirks you might miss. If you want to know how will your website look and behave on real device, you have only choice – load your website on that particular device.
Real device
If you are lucky, there are few places called device labs where you have access to dozens of devices for free. This project is created on sponsorship and contribution through either financial gifts and help or material help – donating your device. Its philosophy is to help developers and designers do their best on this cluttered market of devices and operation systems.
Another way is to open your wallet and buy couple of new electronic toys, but this is not so sustainable. Also, if you consider the speed of development in technology and how little time it requires to create new device, you have almost no chance to keep up with that.
One more option remains. You can take a day off and visit some store with good amount of devices and try your website on them.
Summary
If you want to test your website in such a way that it will endure the real world, you only one option – test on real device. You can try to bypass it by in-browser testing or trying couple of emulators, but to get real experience you have to use real device. There is no shortcut to that.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
Good tips! There’s one more option, perhaps two:
1. Buy broken devices. Sounds crazy but stay with me here for a second. The world is full of cracked-screen iPhones, flat-battery Kindles, etc. Often these devices are no longer suitable for general-audience use. If the headphone jack on smartphone is broken, it becomes much less valuable for most people…but not for testers, at least not if your Website, E-book, or app doesn’t need audio. Such devices are very cheap on eBay. I bought a Nexus 4 tablet for $40, mostly because the built-in battery has gone stale and only lasts about an hour. But an hour is plenty for testing, and now I know how my E-books look on Nexus devices.
2. Make friends. Become friends with several developers in your community. Meet at a coffee shop, an office, a coworking space. Pool your old devices and you can all benefit from monthly “testing days.” It’s also just plain healthy and professional to get to know colleagues and peers; now you have a solid business excuse for doing so.