Responsive Web Design Guide Since last few years the responsive web design has modified completely. It is a method that lets a particular website with a particular them to provide all types of various devices with distinct screen resolutions. It adjusts the design to the viewing background via the use of flexible images, fluid grid layouts and CSS media queries in order to re flow page aspects at low resolutions. With users moving from their laptops to iPads, the websites too should own the technology that should switch to adjust for image size, resolution and scripting capabilities automatically. Few businesses are unaware about the requirement of responsive web design and what value it offers. Given below is the responsive web design guide!
Responsive Front-End Frameworks: The front-end frameworks such as Foundation and Bootstrap have turned to responsive frameworks that have been famous for some time. It signifies that their grids from the start possess responsive design. These responsive grids when they are incorporated with modish front-end framework functions quickly as they’re very strong. It’s a right idea to start by selecting a front-end framework.
Responsive Images: Nowadays the web designers should have additional test of several pixel densities. The laptops, tablets, phones and few desktops might be having 2x or 3x pixels; but the better method to tackle high DPI displays is to utilize a SVG approach that can level to any resolution with file sizes too small.
If you want a JPEG image or photograph (for example, parent size container is 400 pixels wide), then you can make them twice (the inside image should be 800 pixels wide). This same thing applies for background images when background-size property is positioned to 50% or less than that. If for many number of images you require something more strongly, then it’s valuable in exploring the latest responsive image solutions.
Mobile First: Mobile first is the proposal of firstly designing smart phones and after that working upwards to tablets, desktops and many more. Thus when you’re crafting a mobile experience at first, it may give advantage to the desktop layouts also, as the user experience will obviously be put extra focus.
Display or Hide Content: It isn’t the best reply of creating all the pieces of contents from a big screen accessible on a small screen or any mobile device. Therefore for the best application for mobile environment, the navigation should be simple; with more better
and focused contents; and rows/lists, rather than numerous columns. The CSS lets you to display or hide contents on the website with simplicity. 
Amending Screen Resolution: New kinds of devices are being expanded with new screen sizes daily, and each such device may tackle distinctions in functions, size and also color. Few are in portrait size, few in square size, and others are in landscape. With the huge demand of iPad, iPhone and progressive smart phones, many types of new gadgets can change from portrait to landscape at the user’s urge. It is possible that hundreds of distinct screen sizes can be grouped into main categories, craft designs for each, and then create each type of designs quite flexible.
Source : http://infotechsolwin.blog.com/2015/07/07/guide-to-responsive-web-design/ --------------------------------------------