It used to be that the web site designer fretted over which browser a user would be using when they visited the web site. Each browser had a different way of handling certain directives in HTML which the page designer had to consider. Sometimes certain directives were only understood by some browsers. So a page designer had to determine which browser a user had and try to accommodate it as best as could be done. This often led to lots of extra page programming, page testing, and, nevertheless, some odd looking pages.

With better adherence to standards, today’s browsers are more consistently handling page directives. That has greatly simplified things in this regard for the page designer.

Complicating the designer’s world, however, is the growing number of device types that users have for browsing web pages. Handheld smartphones, tablets, laptop screens, and HD devices have greatly increased the screen sizes that a web page might appear on. The screen’s real estate may also be modified by the user either with settings from the operating system or even by simply rotating the device ninety degrees. So things get a little complicated for the designer who wants content on the web page to render well.

Responsive web design is a relatively new approach to enable content to be served up in a way that is aware of and sensitive to the device and screen resolution of the user. From a technical standpoint this is accommodated in a variety of ways. By packaging these technical tools (including stylesheets, CSS3 templates, Javascript and jQuery libraries) into well-documented “frameworks” the web designer has a toolkit that enables him to design pages that adapt themselves to the user’s device without adding lots of extra work for the designer. These frameworks leverage the latest web technology standards, HTML5 and CSS3.

The designer constrains the design of the web page to fit within a predefined columnar format. Usually the starting point is a full sized HD display as “default” with gracefull alternative design rules that kick in when a device cannot render needed resolution. Keep in mind that the “default” may also be a smartphone display which can be rendered differently, and more appropriately, when the page is viewed on devices with larger screens.

There are a variety of frameworks available for making it easier for a designer to render web sites with a responsive design. Two that have been well received are the “bootstrap” and “Foundation” frameworks.