Responsive Web Design – One Site for Every Screen

With the growth of smartphones and other mobile devices, websites that were precisely designed for desktop or laptop screen resolutions do not seem alluring anymore. To overcome this hurdle, web designers came up with the concept of Responsive Web Designing. Responsive web design allows the basic principles of web designing to remain the same while to have one site with elements that respond differently when viewed on devices of different sizes.

Responsive Web Designing can be mainly broken down into the following principles:

• Fluid Grids: Traditional websites were defined in terms of pixels whereas responsive websites are built with units like percentage. For instance, if your website wrapper (target) is 960 pixels and the exact browser window (context) on the screen is 1920 pixels, divide the target by the context to get a percentage value. This is a simple math formula that helps you in this transition from pixels to percentage. The child elements are as well nested inside the wrapper element.

• Fluid Images: The idea behind fluid images is to shrink images with the constraints of fluid grids. The dimensions of the image will be calculated automatically and will maintain the original aspect ratio.

• Media Queries: Media queries are a simple and effective way to serve different content to a range of devices. If a design is too large or too small, a media query can be used to detect the site width and appropriately rearranges the site’s content.

Here are few advantages of having a responsive web design for your website:

• Flexibility: Responsive websites can be adjusted to screen resolution of any devices, therefore it is flexible.
• User friendly: No scrolling or resizing is needed for any user to access your website from any device.
• Cost effective & easy to manage.
• You have one website to maintain and one set of code.