It’s no secret that more and more people are consuming the web from their mobile devices. Whether it be from a smartphone or tablet, a considerable amount of traffic on the web’s most popular sites is coming from people surfing on the go.
So web designers needed to respond.
Designers realized the need for a website to look sleek and provide top-notch usability across millions of screens. But designing and developing separate sites for each device just isn’t practical. And while it is important to develop apps, that doesn’t solve everything. Many people don’t want to download an app for every single site they visit. It’s time consuming and at times, it’s just easier to visit through the web browser. Not to mention, each operating system requires the development of a separate app that caters to that platform’s specific guidelines.
Web designers and developers could create a mobile version of the site, but then again they are stuck with developing for multiple platforms and resolutions. And this just isn’t practical.
We know what you’re thinking. It’s just too bad you can’t create one site that recognizes the resolution of each device and adjusts accordingly. Well it just so happens that responsive design aims to do just that.
Media queries allow the site to recognize the resolution of the screen the website is being viewed from. And as you shrink the browser window, you’ll see the images resize and the site automatically reconfigures itself to create a seamless experience for visitors. It’s all due to the fluid and flexible architecture of the design and development.
It’s no surprise that Starbucks was one of the first companies to adopt this technique. Here is what the site looks like in a full web browser:
And then we shrink the screen, the site reorganizes itself because of the fluid and flexible grid and you’re left viewing this:
The menu, video, photos and content is all still viewable in the tiny window. No aspect of the site gets lost. And that’s the beauty of responsive design.
Want to see it in action? Navigate yourself on over to foodsense.is and once you’re there, adjust your browser size and see the beauty of the fluid design firsthand. As you adjust you’ll notice that the images are resized and reorganized so that no matter how small the window, you see all of the content on the page. Have a smartphone handy? Check out the site from that platform and you’ll see how responsive design enhances the browsing experience on smaller screen mobile devices.
What are your favorite sites using responsive design?