What is Responsive Web Design?

Responsive Web Design means a kind of web page design/layout which is able to modify itself according to a device’s screen size and resolution. Mobile phones and mobile devices with access to internet are outnumbering desktop computers. That is true, that using mobile phone it is possible to see and use all navigation elements available on most web pages. However, on the other side, web developers are aware that usage of only one or few layouts designed for high resolution screens means bad user experience for people using small mobile phones.

Usually responsive web design is based on CSS media query or JavaScript screen resolution test, to check first what is a device’s screen size and resolution. After this check suitable CSS layout files come into action changing both size and navigation of a web page – sometimes changing three-column layout into one-column layout. The point is, that with lower screen sizes user experience can be considerably different, especially for e-commerce web pages and/or pages with mixed content, like images and text. For instance, clicking a small text link can be more difficult, so font size should be changed for bigger version, and target area around link should be bigger too. The changes are sometimes so serious, that totally new navigation mechanics is loaded.

Auto-modification of initial web page design is aimed to comply with Fitts’s law (proposed by Paul Fitts in 1954) which models human act of pointing, for computer devices too. The easier is to point elements on a web page, the better is user experience. And better user experience on an e-commerce web site means higher conversion rate.