Being a Marketer for a long time, I was not unfamiliar with the jargon “Responsive Design” or what is the importance of using responsive design on your website! But yes, I had no idea about how it works till I learned it!
What is responsive design? Have you ever noticed any website looks differently on desktop and smartphone or tablet? Though it may looks beautiful and functions impressively on all devices but just dress differently according to different screen sizes. That’s the magic of Responsive Design!
Wikipedia says “Responsive web design (RWD) is an approach to web design aimed at allowing desktop web pages to be viewed in response to the size of the screen or web browser one is viewing with. In addition, it’s important to understand that Responsive Web Design tasks include offering the same support to a variety of devices for a single website. As mentioned by the Nielsen Norman Group: content, design and performance are necessary across all devices to ensure usability and satisfaction.”
Doesn’t it sound really impressive? How does it work? Well, once you write complete HTML code for your website or a web page, you just need to write few Media Queries in CSS to let it show you it’s magic. Now you may be thinking, what is Media Query?
Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone screen vs. computer screen). You can give different looks to your website according to screen sizes without completely writing different HTML codes for all the devices.
The @media CSS at-rule allows you to specify a set of styles that are applied only to certain media types. For ex, if you would like to decrease the width of the content of your web page when the viewport is 950px or smaller, you can write below media query!
Well, the most important question is why anyone would like to do it? Why is responsive design so much important?
According to a recent study by [PEW Reserch](http://www.pewresearch.org/fact-tank/2017/01/12/evolution-of-technology/), roughly three-quarters of Americans (77%) now own a smartphone. Half the public now owns a tablet. And almost 73% Americans have broadband at home. That means, they either have desktop or laptop. I am sure, you may like to catch all of the prospect consumers irrespective of which device they are using and that makes it a necessity to be sure that your website looks great on all different screen sizes.
As [Arthur C Clarke](https://en.wikiquote.org/wiki/Arthur_C._Clarke), one of the “Big Three” of Science Fiction, said, “Any sufficiently advanced technology is indistinguishable from magic”. I agree with that. In nutshell, we can say that Responsive Design is a magical combination of a simple HTML, flexible grids, flexible images and CSS media queries!
Want to see a live example? Visit http://himachitalia.com/ on your desktop. Now gradually shrink the window (resize) down to the size of a smartphone. While doing this observe all the elements adjusting to accommodate the screen size.
In next blog post, I will surely cover more details about making of [my website](http://himachitalia.com/). Until that time, please fill free to let me know your experience with media queries and what do you think about it!
Originally posted on http://himachitalia.com/2017/03/27/the_magic_of_responsive_design/