You might have heard that your website needs responsive design to function effectively in our current mobile-based culture. But what does that really mean?
Responsive design is a way to make a single site that works across an array of devices, including desktops, tablets, laptops and smartphones; providing a smooth, visually appealing format for all sizes of screens. Have you ever gone to a website on your phone and had to zoom in and scroll around constantly in order to see anything? Responsive design is a smart way to deal with this issue without having to create a whole new website just for mobile devices.
For example, try visiting our website on your tablet or phone. You’ll notice that you don’t have that awful scrolling back and forth when trying to read a few lines of text. Everything is clean and easily legible. Even the pictures are sized proportionally. And you aren’t yelling at your phone when you accidentally press a link when trying to scroll or zoom. That’s always a plus.
Another way to visualize this feature is here. Notice how the layout changes slightly between the different screens? You can also use this tool on other websites. Here is ours. To try yours out, go to http://www.finecitizens.com/defineresponsive/#/WWW.YOURSITE.COM
Here are a few other sites out there incorporating responsive design:
Websites made employing the idea of responsive design must be designed and coded to respond to screen size from the beginning. This is because it’s designed on a fluid grid, meaning that instead of working with a fixed size, the elements are sized base on percentages or ems. This allows the site to ‘respond’ to the size of the screen it is being displayed on and change itself accordingly. This means all the designer’s hard work doesn’t go to waste as soon as someone tries to visit the site on their iPhone.
With so much web traffic coming from mobile devices, many websites are losing customers and readers who are frustrated by designs that are difficult to navigate from phones or tablets. This can mean the difference between a visitor finding the information they need on the way to a brick-and-mortar store, and choosing to go somewhere else because they got fed up with all the scrolling and zooming. Even if these are people who would normally be visiting your site on a desktop, there’s a good chance that they’re going to need to visit while out and about… or when they’re too lazy to get up off the couch and walk to a computer.