Responsive Web Design

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.

Some people suggest that HTML5 and CSS3 are the web technologies that should be used to build a responsive web page. This is partly correct in the sense, there are a number of mobile operating systems and mobile browsers which do not support Javascript or eliminate it completely for a faster browsing experience. Sometimes CSS3 media queries are also avoided by mobile browsers which forces the programmer to stick to the tried and tested methods of web page design using solely HTML5 and basic CSS3 directives. Having said that, Javascript and CSS3 media queries, if incorporated in a web page code adds new life to the overall design. The page elements can be handled in a much better and easier manner than would be possible with plain CSS3. In fact, interactivity with the web page is enhanced with Javascript support and it creates a sense of a web application in use. The viewer is lead into the experience completely and feels at home with an application that resides online, rather a web page which behaves like an application residing on a server.

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.