So what is 'Responsive Web Design'. Modern websites now need to support and happily display themselves on all varieties of desktop, laptop, tablet and mobile devices no matter what their screen size or orientation. One wrong approach would be to create a different webpage layout for each situation - a now outdated design concept called 'adaptive web design'. Instead, we mix a collection of flexible grids, layouts, and image sizing controls so that all pages sense the display requirements and automatically reformat their layout accordingly.
For example, if you have a webpage with two sections side by side in a normal width situation, when that page is displayed in a narrow page situation like on a mobile device, the first section will stack on top of the second section. This allows both areas to retain readable sized text fonts and images. You just need to scroll down to see more - which most people are very used to by now. Each section reformats itself to its allotted display space by changing font size (size of the text), or image sizes in a seamless, fluid, and flexible way. As the width of a display area shrinks, first the space between text and images shrinks as well. But this can only happen for so long until both the font and image size must also be reduced. Another flexible technique is to completely hide areas that are deemed less necessary in order to allow more important content to remain readable.
An additional dynamic area that often changes with screen width can be the sidebar menu. Many websites have their primary navigation links located in a vertical list in a sidebar - a vertical area on the side of a webpage. A common technique used when screen width shrinks to below a readable threshold, is to have the sidebar menu 'collapse' to be represented by a now standard and recognizable icon showing three horizontal bars representing the list of menu items.
Clicking on the icon overlays the menu on the page, then after a navigation link is clicked - the menu again collapses to the menu icon. This allows both the content and the menu to be readable - albeit at different times of focus.
Besides the obvious benefit of having a website appear on all devices as more readable, at least Google and now Bing have announced that they will now reward responsive websites with improved rankings. Still, most web sites are not mobile compliant and are failing to adapt to the demand for a responsive environment and are therefore at a disadvantage. Websites that are mobile responsive will ordinarily load faster, resulting in a more positive user experience as well as possibly boosting search ranking. With mobile web browsing now overtaking desktop, responsive design is no longer an innovation. Instead, it has become a standard component of any SEO plan, regardless of industry.
You can use this webpage as a demo to show how responsive web design actually works. Simply 'grab' the left or right edge of your browser (hover mouse over edge, click and hold down mouse button) and pull toward the center. As the page width diminishes, you can see fonts and images get smaller, and after passing preset 'breakpoints' you'll see the entire display rearrange itself
We are now designing all of our websites using responsive web design. This provides improved user experience, faster page speed, decreased bounce rate, less duplicated content (e.g. from adaptive web design approaches with duplicate content which lowers rankings) and boosted social sharing from being mobile, all of which, through better SEO (Search Engine Optimization) translates to better search rankings and to use now almost ancient concept: 'eyeballs' on your website.