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 go up and minimize your browser window, drag the edge of the window in and out and you will see this page adjust to the size of the browser. Watch this website shift and change to accommodate a smaller screen width without the text getting any smaller or horizontal scroll bars appearing.
Traditional websites vs. Responsive websites
Traditional websites are often designed with a fixed width of about 990 pixels. This number became an unofficial standard around 2007 when the most common screen resolution was bumped up to 1024×768 pixels. A website that’s 990 pixels wide fits neatly inside of a screen that size. While computer screen resolutions have steadily increased through the years, the standard width of 990 pixels has persisted for two reasons. First, new and smaller devices like netbooks and tablets have gained in 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 use of older browsers like Internet Explorer 6 and 7, as well as continued development of CSS (the language used to style websites), responsive web design has been allowed to take off in the 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.