Responsive web design is a practical way to ensure your website is easy to use and looks good on phones, tablets, laptops and large displays. Before responsive web design, an entirely separate mobile website was needed for pages to display on a phone where the text size was large enough to read without having to zoom in.
Want to see responsive web design in action ? Just shrink your browser window horizontally to see how things on this site shift and change to accommodate a smaller screen width without the test getting any smaller or horizontal scrollbars appearing.
Traditional websites Vs Responsive Websites
Traditional websites are often designed with a fixed width of about 990 pixels. This number became un official standard around 2007 when the most common screen resolution was bumped to 1024 x 768 pixels. A website that's 990 pixels wide fits neatly inside of a screen that size. While computer screens resolution have steadily increased through the years, the standard width of 990 pixel has persisted for two reasons.
First, new and smaller devices like notebooks and Tablets have gained popularity.
Second, a significant portion of those who have large displays don't browse the web with their browser window at full screen.
Thanks to the decline in older browsers like Internet Explorer 6 & 7, as well as continued development of CSS (the language used to style website), responsive web design has been allowed to take off in last couple of years.
Instead of having a desktop and a mobile version of your website, responsive websites make use of newer CSS3 coding techniques to apply different rules to the elements on a web page based on the width of the browser. This method allows for the resizing and shifting of content so that everything always fits and without causing left and right scrollbars to appear.
