What is Responsive Web Design?

When users started browsing web sites (originally designed for a standard computer monitor) on mobile phones and tablets, some funny things happened. In short, they didn’t work. Sites built using Flash animation became invisible and sites with larger images were hardly useful at all. And while some web sites could be “pinched” and zoomed, that approach can be less than ideal.

Web site owners quickly scrambled to create special mobile versions of their sites. Programming code could detect a user’s browser type and send them to the appropriate version of the site. And while that approach is a good one, it can leave web site owners with multiple versions of the site to maintain.

Enter the idea of responsive web design. Responsive web design is a method for building sites which makes the same site functional in a variety of screen sizes and browsers. The site automatically ‘responds’ to size of the browser by adjusting its size and attributes accordingly. And since all “versions” have the same baseline code, making content changes to one site automatically updates the information for desktop, mobile, and tablet users.

We can demonstrate the effect visually by dragging a Web browser window in different directions to see how the site responds. The screen shots below simulate the appearance of the WebSolvers web site in desktop (PC or Mac), tablet (iPad or Android tablet) and smartphone environments (iPhone or Android mobile phone), respectively:

The WebSolvers Web site shown in desktop mode.

The WebSolvers Web site shown in tablet mode.

The WebSolvers Web site shown in smartphone mode.

If you are interested in seeing more examples of responsive web design, take a look at the Media Queries web site, a collection of examples, including that of William & Mary as seen below:

William & Mary’s use of the responsive Web design technique.