Client-Side and Server-Side Techniques for Responsive Design
Responsive web design started as a client-side solution using media query, where the work of determining the appearance and functionality for the website falls to the web-enabled application displaying it. Media queries can be added using two distinctive techniques known as client-side and server-side techniques.
Client-Side Techniques: Using Media Queries
Responsive web design started as a client-side solution using media query, where the work of determining the appearance and functionality for the website falls to the web-enabled application displaying it. Media queries can be added in two distinctive manners:
- Top Down: Media queries are used to load individual style sheets—default styles and one for each of the major breakpoints (small, medium, and large)—tailoring the design to the individual environment. Links to these style sheets are generally placed in the <head> tag of the HTML document.
- Bottom Up: Media queries are placed in a single style sheet, either as a group at the bottom for each breakpoint and/or with individual selectors to tailor the styles for the different breakpoints. This technique is not recommended for general use, however, since it will not allow styles to be delivered for older browsers, especially older versions of Internet Explorer.
Server-Side Techniques (RESS)
Although the power of responsive web design still resides primarily in the client-side techniques, some components will need to work server-side, especially where functionality and content size (as with images) are concerned. This new technique, referred to as Responsive Design + Server Side Components (RESS), requires that the server be programmed to detect the device and use server calls to deliver different content depending on the environment. This is especially helpful in minimizing the download of large images or for tailoring navigation to the specific user context.
- HTML5Shiv: The HTML5Shiv script provides greater backwards compatibility for older versions of Internet Explorer. This simple bit of JavaScript code "teaches" these browsers how to use basic HTML5 structural tags.
- Modernizr: If you are worried about providing consistent functionality across all browsers, especially older versions of Internet Explorer, include the Modernizr script. Modernizr provides easy-to-use browser feature detection that can be used to tailor the experience to the browsers' capabilities using progressive enhancement.
For more details on implementing RESS, start with Luke Wroblwski’s seminal article "RESS: Responsive Design + Server Side Components."