Responsive Web Design

Responsive Web Design is another one of those ideas that has taken the web community by storm. Responsive Web Design, a.k.a.RWD, is a set of techniques that allows a web site to present content well to all are almost all users nor matter what sort of device they use. There has long been a problem associated with making a website that is usable by both a desktop computer with a high resolution monitor and a smart phone with a very smallscreen.

Web Frustrations of a Designer

Web Frustrations of a Designer (Photo credit: dailyinvention)

Perhaps you recall the days when sites had a disclaimer on the that went like: ‘This site is best viewed with X browser‘ and how annoying it was if you used some other browser. There was a time when 80% of website visits came from one or two browsers. That is not the case now and has not been for some time. Today, it is unacceptable to NOT support the most common browsers, even though it can be expensive and time consuming to test a website design across a large cross section of browsers.

There are many common browsers today operating on a lot of different devices. According to Yahoo’s Graded Browser Support pages, “There are over 10,000 browser brands, versions, and configurations and that number is growing.” Savy large scale web operation test their sites to insure that they support the most common browsers, but I haven’t heard of anyone who tries to support an exhaustive list of all or even nearly all browser.

InfoGraphic about widths of various displays

There are more problems to solve than just screen size. CSS is used in web designs to control decorations like fonts or placement of items on the screen and javascript is used to handle dynamic features of the user interface, like popup windows or folding menus. There are also proprietary or ‘3rd party’ capabilities that may not be present in a browser, such as flash or rendering of non-html/xhtml documents.

Some browsers, such search engines, do not support javascript or CSS and are really only in search of the content. There are also ‘accessibility’ browsers such as those that provide an audio interface. In some security conscious environments, javascript may be turned off completely, but CSS is left on. For this the notion of Progressive Enhancement has become popular among web designers. The idea is that the content will be available to any browser that understands html and those that understand CSS will have styles applied to make the experience better and those that use Javascript can have the full blown user experience. There is no switching the user from one site to another according to the browser that is detected.

A responsive web design page can be resized on the fly. The text will reformat itself and the images will grow or shrink according to the screen size. If CSS, Javascript of both are not available on the browser, the content will still be accessible.

Progressive Enhancement (PE) involves a particular sequence of design. First the basic markup, geared to the lowest common denominators of browsers, is applied to the content, then ehnhancements available in common, widely used browsers, are externally linked into the page. The external linkage means that enhancements that are not used on a page are not downloaded and that makes the page load quicker.

I’ve been experimenting with the Skeleton WordPress theme in order to implement RWD on this site.

This entry was posted in Articles, Technology. Bookmark the permalink.