📖 Responsive Web Design

Responsive Web Design is a preferred way to approach web design for mobile devices using flexible design to adapt to almost any screen. The conventional way is to create one desktop version sized to fit most desktop browsers and one mobile version. Sometimes the mobile version is located at another URL like m.mysite.com. Responsive design adapts to user's needs and device capabilities using flexibility and media queries.

Core Concepts

Three key technical features are the heart of responsive Web design.

  • A fluid layout that uses relative sizing - percentages or ems instead of px.
  • Flexible images and media, through dynamic resizing or CSS.
  • Media queries and media query listeners.

HTML for Responsive Design

W3 Schools has a good primer on responsive design to get you started. Just ignore the last part about frameworks. We'll get to that soon enough. You should look closely at the "Responsive Web Page - Full Example" layout sample provided.

When creating HTML for responsive sites, remember the following.

  • Follow web standards to ensure the page will display properly in most browsers.
  • Separate content from design.
  • Include the DOCTYPE.
  • Use HTML5 structural elements.
  • Include the charset meta tag <meta charset="utf-8">
  • Include the viewport meta tag.

Viewport Meta Tag

  • Controls the logical dimensions and scaling of the browser window.
  • Tells browser that the web page is optimized for mobile.
  • Instructs the browser to present your content in as large a context as possible for the device's screen.
  • Added to the <head> section of the page.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
width=device-width
sets the width of the device. You can set this to a specific number of pixels or device-width will set it to the width of the device.
initial-scale=1.0
sets the the initial scaling of the viewport. The 1.0 value displays unscaled web page (so you can control the display).
height
is the height of the viewport in pixels. Like the width it can get the device-height value to take the device’s height.
user-scalable
specifies whether the user can scale the web page (zoom in or zoom out). Can get the yes or no values.
maximum-scale
or

minimum-scale

sets the maximum or minimum scaling for the web page. Can get values between 0.25 to 10.0.

CSS for Responsive Design

It is generally best to separate the style sheet CSS design from the HTML structure. Start with a reset in your CSS stylesheet to remove browser defaults. The reason for this is all browsers have presentation defaults, but no browsers have the same defaults. This can affect your page rendering. CSS style resets will reset to nothing so you can build your own custom pages.

There are several CSS reset scripts available. A good one to start with: http://meyerweb.com/eric/tools/css/reset/ . At a minimum, you should probably set all margins and padding for all elements to 0.

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

When you are coding for responsive design, keep these things in mind.

  • Modify with your own defaults.
  • Consider inheritance - styles applied to a parent element will automatically apply to the children of that element unless overridden.
  • Consider the cascade (rule precedence).
    1. rules marked as important
    2. IDs
    3. classes
    4. elements
    5. inherited rules
    6. default values
    7. tiebreakers are specificity and order
  • Set all font-sizes in ems, not pixels, for sizing relative to the browser default.
  • Create or use a fluid design to layout your page. Define widths in % or ems.

Sizing Page Elements

Box-sizing may be used to change how the browser renders padding and borders. When using content-box (default), the width property applies to content only. Padding and border are outside the width. When using border-box, the width property applies to content + padding + border.

Adjusting Layout for Different Devices

Be sure to use media queries to adjust layout based on device width. Use min-width and max-width to constrain widths for very large or very small devices. For example, on a smaller screen, you may want your body to fill the entire width: 100%;. But on a 30" monitor it may be spread out too wide, so you can set a max-width: 1200px; to make sure it never gets wider than 1200 pixels.

Adjusting Images for Different Screen Sizes and Layouts

You may have an image you want to show at 50%, but on a mobile phone screen it may be too small to see, so you could set the min-width: 300px; so it would never be smaller than 300px. It is also a good idea to set max-width: 100%; on images to make sure they display the entire image on smaller screens. Images can be a little quirky. You may need to play around with them a bit to encourage them to behave.

Media Queries

Can be used when linking to an external style sheet to apply to the entire style sheet.

<link rel="stylesheet" media="media-query" href="cssfilename.css" />

Example

<link rel="stylesheet" media="only screen and min-width: 40em" href="widescreen.css" />

Can also be used within a style sheet (external or embedded) for individual rules or a set of rules.

@media media-query {
	css rules
}

The format for a media-query.

[logic] type [and (feature: value)]

logic
is [optional] and has a value of only or not
type
is the media type such as screen or print
feature: value
pair is [optional] but if present:
  • must be in parentheses and preceded by the word and
  • can be chained together with other features linked with and
  • can be used in a list separated by commas (works as an or)
  • feature can be one of the following: width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan or grid.
  • currently, most browsers only support the width property so it is pretty much the only feature used in responsive design today

Example that could be used for styles for most smartphones in portrait orientation.

@media only screen and ( max-width: 479px ) {
	img { max-width: 100%; }
	nav { width: 100%; float: none; }
	body { background-image: none; }
}

Commonly used viewport widths.

< 480 pixels
mobile phone in portrait orientation
480 pixels
mobile phone in landscape orientation
720-768 pixels
tablet in portrait orientation
960-1024 pixels
tablet in landscape orientation
> 1024 pixels
larger screens

Designing Responsively

You'll want to use a technique called progressive enhancement. This means to start basic and add on. Use this list to guide you in development but don't be alarmed if you find yourself going back to add or adjust.

  1. Content
  2. Semantic html
  3. CSS - Start with a simple layout for smallest screen - single column, then add additional layouts as needed/desired using media queries for larger screens.
  4. Behavior - Usually JavaScript and always optional, but can add a lot of personality through interactivity.

Breakpoints

  • Viewport widths at which the layout changes based on a media query.
  • Design ranges: range of viewport widths at which each variation is rendered.
  • Start at smallest screen width and work upward.
  • Try design on various devices and determine where the layout needs to change.

Grid Layouts

  • Gives order, continuity and harmony to the site.
  • 12 column grids commonly used for websites.
  • Each column has the same width with equal margins between them.
  • Layout widths are multiples of the grid columns. i.e. you could have one column that spans 3 grid columns, another that spans 4 grid columns, etc.