The underlying principal of responsive design is that users want to view your website on more than just a desktop computer. Your site visitors want to view on their mobile device (4-6" screen), tablet device (7-13" screen), laptop (14-17" screen), desktop (15-32" screen) or television/projection system (27+" screen). With a design that is responsive your website will constantly take into account the properties and capabilities of the device and the browser which is consuming the content so that it displays how you want it to on the size of screen they are using.
A responsive web design is broken into a grid based system, which lets the developers of your website define how an experience will scale on each users device. The images on the website should also be responsive and not just the content so that the images show as one would expect when viewing on different device sizes. The biggest change isn't on your site visitor but on the developer of your website itself. Designing for more than one screen size requires the designer to step out of there comfort zone of one layout and done. He or she now needs to account for different sizes, on different devices, within different content browsers and get away from thinking of fixed and specific measurements.
By using relative and not definitive measurements for the elements within a page and the containers of the data, the basic design and usability of the page can be maintained as the page scales up or down. This makes the site a responsive site. As screen sizes get smaller people typically will need more specific information and not many pages of information.
A responsive design will help you in your search engine optimization (SEO) as well. The reason is that you will be serving the same information to all devices. When you choose to have specific pages for desktop, tablet and mobile you are serving different content possibly to each. To the search engines this is a bad practice and is something to steer away from. By hiding information utilizing CSS media queries you are hiding the information that doesn't apply on smaller screen sizes but overall serving the exact same content to the visitor no matter which device they chose to use.
You may be thinking that your business doesn't need a responsive design as the only people you want to provide information to are those that sit at a desk. Years ago the desktop was the majority of all web browsing traffic. According to Mobile Marketing Watch who does market analysis on mobile devices states that 28% of all website traffic in Q3 of 2013 is mobile traffic. This is a 67% increase from the previous year. (Source: http://www.mobilemarketingwatch.com/mobile-now-drives-28-percent-of-all-web-traffic-37410/)
As more websites are being accessed by people on different size devices and over cellular connections it becomes even more important that your responsive design also loads fast. This is one reason for the push by every mobile vendor toward a more traditional "flat" style as part of their responsive designs. By reducing the amount of chrome (the pretties on a website) they are providing a more responsive experience to their site visitors. The faster your website responds the longer you have to keep them engaged in your product or service. By utilizing the responsive web design techniques your website will use media queries that send the properties of the device a user is using; specifically the width of the browser window size. By processing the size the web server can serve up the proper Cascading Style Sheet (CSS) that has the appropriate styling rules for the users screen. This allows you to have less chrome on smaller sizes and more chrome as the sizes get larger if you want.
Whether your company is big or small having a responsive web design will help you engage more with your visitors. Responsive web design is something that should be at the forefront of every project you start on the web and for something that should be upgraded on your existing sites.
{{BLOGDETAILVIDEO}}