Responsive Web Design - What

Responsive web design (RWD) is an approach to web design aimed at creating websites that provide an optimal viewing experience for the user; no matter what device they are using. Whether using a desktop, tablet, or smartphone, the website has the ability to automatically respond to your preferences to create the best experience for the user.  A responsively designed site adapts the layout to the viewing environment by using fluid, proportion-based grids, and flexible images.

This web design strategy has gained widespread adoption because of the enhancements to the content and navigations with a minimum of resizing, panning, and scrolling on mobile devices.  There are three component parts to responsive web design.

Flexible Grids.  This means that page elements sizes are in relative units of measurement like percentages rather than fixed units of measurement like pixels. 

Flexible Images. This follows closely with relative sizing of Flexible Grids in that image sizes are percentages rather than pixels so that the images do not spill beyond their grid containment.

Media Queries.  This allows the page to use different CSS style rules based on the aspect ratio of the device the viewer is using.

In it’s most simple definition, RWD creates a website that changes its format to correspond with the screen of the device in which it is accessed.  With so many device options available today, it’s no wonder why RWD has gained popularity and is here to stay.