Responsive Web DesignIntroduction:  In today’s world, where there has been a rapid increase in technology, the usage of mobile devices and their features have also been on the rising side. Mobile Devices can now display web browsers with an equal level on par with that of the browsers on desktops or laptops. This has led to people using browsers more on mobile devices. Convenience also being an additional factor to it, the number of mobile users will definitely grow in the future. According to a report, the number of mobile users is expected to cross 5 billion by the end of 2019. But, such events always have a consequence coming along. The designs of websites should be suitable to these mobile devices too so that the web pages are same for every user. The static grid will no longer be useful because the sizes of mobiles devices are too varied. This situation led Ethan Marcotte, in 2010, to coin a new answer called Responsive Web Design(RWD). RWD has later become popular for its ability to deliver web pages in different viewport sizes. Basic RWD:  In simple words, Responsive Web Design(RWD) makes the website look good and is adaptive to all the devices such as smartphones, tablets, laptops etc. The look and feel of the website is not lost with the help of RWD. The website responds or adapts to a different viewport size without having to set a specific domain/subdomain to for mobile devices or tablets. The viewport meta tag and CSS3 media queries make this possible. Viewport Meta Tag and CSS3 Media Queries:  There are two primary components to build a responsive web design. The first one being Viewport Meta Tag. This tag is used to control the scale of the web page and is place inside the . By adding a viewport meta tag, the browser gets instructions on how to control the page’s dimensions and scaling. Also, the width of the page is allowed to follow the width of the device. The initial zoom level of the page is loaded when the browser is opened first. Example:     In general, users are used to scroll websites vertically but not horizontally, therefore, if a user is allowed to zoom out or scroll horizontally, it leads to a poor experience. In order to control such situations, a few rules need to be followed. i) Large fixed width elements should not be used. ii) The content should not rely on a particular width to go well. iii) The usage of CSS media queries for applying style to different sizes is a must.   The second component being CSS3 media queries. It specifies the size for particular viewport sizes. Images can be hid between any viewport sizes of our choice. A lot of websites today illustrate how responsive web design can be executed. The ‘Search’ button in a lot of websites becomes ‘Go’ in smaller viewport sizes. Also, the colour can be determined. For example, if the browser window is is 500px or smaller, the background colour will be light blue. For this, it is written as follows, @media only screen and (max-width : 500px) {Body{     Background colour: Light Blue;}}Limitations:  Although RWD is very useful, there are a few limitations and several issues need to be resolved. One of the things is to make the image responsive. The present practice to make the image responsive is to make it fit the viewport size with maximum width. But, there is no practice when an image is not needed. The main problem with this approach or practice is that it only alters the image presentation on the surface while the actual image is not affected on the HTML document. Irrespective of the device and the viewport size, the problem being that the image resolution and size will not change. In simple terms, a user who downloads an image on a mobile phone and a desktop has the same resolution whereas there needs to be a reduction in the resolution on a mobile phone or tablet. Responsive Image with a picture element:  An element called has been proposed to address the above mentioned situation. This element enables the delivery of a proper image size and also, the resolution based on different situations i.e., devices. Although, this proposed element is still in the testing phase, it will make a huge impact once it is live and accepted by the browser vendors. The following example will throw more light on this, In the above example, the big.jpg image file is delivered with high resolution and a wider width only when the viewport is at minimum of 768px, while the medium.jpg is delivered when the viewport is at 320px with much lesser resolution and width. Then, when these conditions are not met, a smaller image small.jpg will be delivered. Additionally, we have an element named at the bottom, which is used as a backup element for browsers that do not support the element. Frameworks:  Frameworks are very useful to create responsive web designs. They are generally used as they have many advantages. They are a good option for the following reasons, Time Saver : Frameworks save a lot of time. They have predefined styles and rules, grid width, font size, button styles, CSS reset etc., for building a website. Therefore, by simply following the instructions, we can proceed with building the website. Community and Extension : The framework functionality is extended by having an active community. jQuery UI Bootstrap, Skeleton are good examples and have been extended to the WordPress theme. Cross Browser Compatibility : With frameworks, we can minimize the task of assuring how a web page is displayed in different browsers. Since many developers have worked on this before, releasing a framework publicly makes it easier. Documentation : Documentation is really helpful and it comes with a good framework. It’ll be really handy while working with a team and to get them on the same pitch and also, for the standard code writing convention to be followed.   There are actually many frameworks but the most popular ones are Skeleton, Bootstrap and Foundation. In addition to the advantages, there are also a few problems associated with frameworks, Excessive Codes : As a framework is likely to be used widely, it should cover every design scenario and there a lot of extra styles that one might not need for the website. It is definite that we can sort out the styles and remove/keep them as per the need, but this can become a very lengthy and painful task. Learning Curve : Learning on how to work with frameworks takes a lot of time as we need to examine the CSS classes, the ID, the names and the HTML structuring. This can happen only in the first try and the next time would be a much better one. Less Flexibility : A framework comes with its own set up and follows the standards of its developers. If we wish to change anything as per our need, it would take a lot of time and if not done properly, then the whole structure is ruined. Tools required to build responsive web designs :  There are many tools to build websites and to build a responsive website, web browsers, code editors and responsive bookmarklets are needed. Web Browsers : A web browser is needed to develop and view the result of the responsive websites. There are many web browsers such as Firefox, Chrome, Internet Explorer, Opera etc., and any one of them can be used to test the websites. Code Editors : A code editor is undetachable tool for developing a website. Any code editor can be used as long as it highlights the code properly. Depending upon the operating system, different code editors can be used. Notepad++, WebMatrix, and TextPad for Windows, TextWrangler, MacVim and Brackets for OS X and Gedit, Geany and BlueFish for Linux, are the popular and majorly used ones. Responsive Bookmarklets : It is suggested to test responsive websites on actual mobile devices such as iPhones, Android, Windows and Nokia Phones. Incase, these are not available, a tool called responsive bookmarklets is available. This tool resizes the dimension of the viewable areas in the browsers. RWD Demonstration, Screenqueri.es, Responsinator, ResponsivePX, Resizer, Screen Fly and Adobe Edge Inspect are the most popular and widely used responsive bookmarklets. Working : The basic principle of working of a responsive website is the use of fluid grids. Instead of pixels, the elements of a page are sized by proportion. We would not give a command on the distance between each column but rather give a command on how far each column should be in relation to the other columns. Images are also resized in a similar manner. They can stay within the specified column and their size resizes with the column size or with the relative design element.  Issues related to Responsive Web Designing : Mouse vs Touch : The web designer needs to consider the ‘touch’ feature in mobile phones. What seems to be easy to select with a mouse can be harder to select by touching it on the screen with the fingers. Graphics and Download Speed : It is wise to adjust the graphics accordingly and make it compatible for mobile phones. If not, it would take a long time for the website to respond on a mobile phone. Applications and Mobile Versions : With so many applications coming up, one might also want to create an application for their website but with so many operating versions it is difficult to create an application and maintain it in so many operating systems. Instead, it is better to create a responsive website but the advantage an application has cannot be ruled out.