Mark Eschbach

Software Developer && System Analyst

Responsive Web Design

Responsive Web Design is a set of web design techniques attempting to provide the best user expierence for the user's device based on the view port size. In practical implementations Responsive Web Design targets a specific set of devices, such as a desktop@1920x1080, desktop@1024x768, Android@xhdpi (landscape, and portrait), and iPhone 5. Several techniques may be utilized in the implementation, however the most popular is CSS media queries.

Responsive Web Design versus Mobile Web

The basic premise of Mobile Web is a purpose built site for a specific set of handheld devices, such as an iPhone 4 and Nexus 4. The Mobile Web techiniques generally forego compatability with larger display devices and will not adapt to changing view ports, requiring an additional website with similar content formatted for larger displays. Responsive Web Design (RWD) fills the gap by dynamically adapting to users' view ports. A Responsive Website would be able to show a single column on a Nexus 4, portriat view of a Nexus 10, a webbrowser smaller than 800px wide. The same Repsonsive Website would be able to show two or more columns on a Nexus 10 in landscape, or a web browser with a resolution greater than or equal to 800pxs.

Implementation Technique: CSS Media Queries

Media Types were originally added in HTML4 and commonly used on the link's to stylesheets to differentiate between the styles used in displaying the document versus printing. Several other media types were defined, such as tty and aural, however these media types required special browsers to viist the page.

W3C has defined several new versions of Media Types since the HTML4 days, with Level 4 defining a new approach allowing the specificatino of the target device to apply a style sheet to. TODO: Finish.