Before one can delve into the complexities of responsive web design, one has to understand the concept thoroughly. The idea behind responsive web design is not limited to web pages with elements that realign themselves to changes in the size of the viewing device or program. In fact, responsiveness of a web page is a collective term used to indicate the overall experience of viewing a webpage. This may range from determining the optimum position of the elements in a web page to reducing the need for scrolling up or down to view other parts of the web page.
Responsive web design truly creates the need for a web page “designer” rather than a “programmer” who is adept in various web technologies. The web page designer should have an excellent eye for detail and feel comfortable with his own work when it is finished. He has to feel at home with his design and view it as a visitor visiting the website for the first time would view. Usability and ergonomics play a major role in determining the effectiveness of a responsive web page. As we mentioned before, responsive web design is much more than is evident to the eye. It is about viewing a web page being constructed on a grid based design. The grid plays a major part in positioning elements on the page and the tool of choice for programmers to construct this grid could be a powerful image processor and editor such as Adobe Photoshop. A good designer will try to construct a mockup of the web page before implementing in code.
The first step to responsive web design would be to declare or rather, define elements and their sizes relative to the size of the viewing port. It simply means that element sizes are defined in percentage values and the sizes are adjusted as the size of the screen changes. So, no matter whether you are viewing the page on a mobile or on your computer screen, the size of the elements are always perfect for the size of the screen. There are various workaround strategies which are used when the device on which the page will be viewed is not defined well. In fact, jQuery is used sometimes to detect the device before actually displaying the page on the screen. The results of the query are returned to the server which optimizes the web page accordingly.