Over the last few years, website viewing has rapidly expanding beyond the traditional desktop. Where you used to have to sit down behind a screen and a keyboard, you can now view all the same content on your smartphone, your gaming devices, your specialty TV — or can you?
Actually, most websites aren’t designed so that they can be viewed just as well on any device. They’re still optimized for desktop/laptop computers, but use of other devices is rapidly becoming more and more common, and if you don’t keep up, you’ll fall behind. Here’s why.
Screen Size and Resolution
There’s obviously a huge difference between the TV screen mounted on your wall and the smartphone sitting in the palm of your hand. A layout that works well on a large screen can be awkward when you try to look at it on something much smaller. Sure, you can zoom out and out until you can see the whole picture, but you might as well try to read a street map from an airplane, and even if you can decipher which link you want, what are the chances you can actually hit it with your finger when it’d be tricky enough to target something that tiny with the point of a cursor? Your other option: zoom in until you can read everything. But then you’re stuck panning up and down and all around in search of the content you want, and if you’re not familiar with the website, that just makes it all the more difficult. You might as well go west and pan for gold.
So what’s your option? Design a layout specifically for different screens? When new devices with different screen sizes are coming out every day, when you need your layout to reorient itself from portrait to landscape in an instant as your users turn their devices to one side or the other? That would be impractical, if not hopeless, time-consuming and, worst of all, expensive.
Fortunately, all hope isn’t lost. There’s a way to make sure your visitors don’t get frustrated and take their business elsewhere or give up and play some Angry Birds instead, and that way is responsive web design. Responsive web design lets us design websites that can automatically adjust themselves to different sized screens ensuring that the content all remains accessible and nothing gets cut off, so that your size doesn’t look like you awkwardly tried to fit a large-size pizza into a small-size box.
While it may be easy for users to find their way around your site from their desktops, the same navigation methods might not be so easy on a smaller screen. Responsive web design helps with this problem as well. It allows your site to make changes to its layout to suit the environment, like making it easier for users to hide content on a mobile device and keep things from getting too cluttered. It also lets elements be resized and rearranged in different ways depending on screen size so that users can quickly find what they’re looking for no matter what device they’re using.
Huge, high-resolution images are prettier than small and grainy ones. Everyone knows this. When viewing web-sites on smaller devices, however, huge high-res images can take up too much space, and worse, slow everything down. Speed is an even more important consideration than ever on mobile devices. No one wants to sit around waiting for a page to load, especially when the image isn’t even the most important part of the page. Responsive web design addresses this kind of issue as well, allowing images to be made smaller and cutting down on wasteful use of memory and processing power. Similar techniques can also make sure your logo still looks good on any screen without getting any part of an especially long company name cut off!
So what have we learned? There’s a time and a place for a treasure hunt, and it isn’t sitting on a bus trying to find an important article on your smartphone. The rapid growth and constant changing of technology can seem intimidating, but responsive web design can help keep your site current and make you look just as attractive to your users no matter what device they’re using.