Skip to content Skip to navigation

Responsive Design

Did you know? Current Stanford Modern HTML templates and this Stanford Modern Drupal website show responsive design in action.

Basic responsive design

When you design responsive web pages, you use CSS style sheets to respond to your users’ needs. You can also use JavaScript. This page lists some common solutions for optimizing your site content for different device screens.

Fluid grids

Instead of setting a fixed-pixel width for your content sections, use a percentage of the browser screen width. Your site content will respond and adjust accordingly to the window size of the browser. Some web developers use a fixed-grid layout in the desktop style sheet and a fluid-grid layout in the mobile style sheet. Below is an example of CSS styles for a fluid-grid layout.

Viewport

The viewport is the area that determines how content is laid out and where text wraps on the web page. It can be larger or smaller than the visible area. These are the mobile browser default viewport widths:

Browsers OS Default viewport width (pixels)
Mobile Safari iOS 980
Android browser Android 800
Opera Mobile iOS, Android 850
IE mobile browser Windows Phone 7 320

For reference, the Configuring the Viewport section of the "Safari Web Content Guide" discusses how the viewport setting affects the content display in iOS devices. To set the viewport to the width of the device and allow user scaling, add this to your HTML file:

CSS media queries

CSS media queries enable specific style sheets to load for different media types and features. These include screen, print, handheld, device width, height, orientation, aspect-ratio, color, and resolution. To learn more about the pros and cons of media queries, read Ethan Marcotte's article Responsive Web Design and Jason Grigsby's article CSS Media Query for Mobile is Fool's Gold. Below is a list of the screen resolutions of popular mobile devices on campus.

Mobile Devices Type OS Screen resolution (pixels)
Apple iPhone 3GS Smartphone iOS 4.3.3 320 x 480
Apple iPhone 4 Smartphone iOS 4.3.3 640 x 960
Motorola Atrix 4G Smartphone Android 2.2.2 540 x 960
Samsung Focus Smartphone Windows Phone 7 480 x 800
Blackberry Bold Smartphone BlackBerry OS v5.0, upgradable to v6.0 480 x 360
Apple iPad Tablet iOS 4.3.3 768 x 1024
Samsung Galaxy Tablet Tablet Android 2.2 600 x 1024

To display a mobile style sheet for screen widths less than 640 pixels, add this to your HTML file:

For a list of all available media features, see W3C Recommendation for Media Queries.

JavaScript

You can also use JavaScript's User-Agent function for browser detection. To display a style sheet for an iPhone or iPod in portrait or landscape orientations, add this to your HTML file:

Internet Explorer conditional statements

Unfortunately the Internet Explorer browser in Windows Phone 7 does not properly observe CSS media queries. However, you can use IE conditional statements to display the mobile style sheet for the mobile IE browser.

Disable page zoom when switching from portrait to landscape mode in Mobile Safari

Use the initial scale viewport attribute.

Add web-kit browser specific style to your mobile CSS.

Hide Address Bar Automatically on Page Load

Add the following code to your HTML file:

window.pageYOffset < 1 is used to check if the user has already started scrolling and not jump to the top of the page if so.

Last modified August 11, 2014