What is Responsive?
Websites could look right on your computer, but very wrong on your mobile phone. Words or pictures could be clipped, out of view, or covering some other content. Most of us cannot go without a website, but how do you know if it’ll work on all screens, mobiles or desktops?
Responsive web design (RWD) is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes.
With responsive web design, websites can work on different screen sizes and devices, including mobiles, desktops, even TVs. Responsive websites are sometimes called mobile-friendly sites, or mobile-ready sites.
Does that mean that I need to get my hands on all these devices to see if the website is responsive?
For a comprehensive test, it is best to test on the actual devices with various browsers. But for a simple test, all you need is a computer and Internet.
How to Test for Responsiveness in a Website
If you are not already on a computer, open up your favourite browser on your computer.
Avoid Internet Explorer as it does not support most modern web technologies.
Next, you can use this blog you are reading or open a tab to go to the website you wanna test.
Now, go to the top right of your browser window and restore your window if the window is already maximised.
Then, go to the bottom right of your browser window until you see the window resize cursor with double arrows.
Click and drag the window slowly towards a smaller window until it is about the life size of the smallest smartphone. Watch the contents on the website as the window shrinks.
If it is responsive, the contents on the website should continuously and instantly rearrange and resize itself in such a way that nothing is clipped, no extraneous scroll bars appear and nothing looks strangely out of place.
Next, do the opposite. Click and drag the window slowly towards a larger window until it looks like it was before.
Don’t forget the landscape view in mobile devices! Do the same as above but make sure the window is always wider than tall to see if the website is truly responsive.
Websites may look different on different devices and browsers. For example, a website can look like this on a Chrome on a Windows, but different on a Chrome on a Mac. Similarly, a website that looks like this on a Chrome on a Windows, but different on a Firefox on the same Windows.
To get an idea of how a working responsive website should behave like, you can try this simple test on our website or any of our premade websites. We also have a device viewer for you to imagine what the premade website looks like if you view it with a particular device.
Pickedthis websites is powered by Pickedthis technology, a system built 100% from scratch, designed, developed and maintained by Pickedthis alone. With more than 10 years of experience in technology, we know machines like we know the back of our hand.