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 …
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.
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.
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.
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 🙂