Responsive Design for Mobile Devices Web Liaisons Group September 2012

What is responsive design?

  An approach to mobile compatibility that suggests the

design should respond to user’s behavior and

environment based on screen size and platform and

orientation.

  http://www.thismanslife.co.uk/projects/lab/

responsiveillustration/

Advantages over mobile version

  You only have one version of the pages to maintain. The CSS does the

work for you.

  The number of devices and

screen sizes is constantly

changing, but this solution

can work across them all.

  Since users often don’t

maximize their browsers, this solution also optimizes for browser

resolution sizes.

How does it work?

  CSS media queries

  Javascript for older browsers (and internet explorer)

  Layouts built with percentages

  Flexible image sizes

  Showing or hiding content to optimize for mobile

Step by step

1. Plan layout changes

  For new layouts, it can be helpful to start with mobile first

  To revise a current layout think about how each element

could change or move.

  Think about content to hide or reveal.

  Create different menu options depending on screen size

  Hide content that could increase load times on mobile

Tablet Mobile

2. Convert to percentages where possible

#sidebar { width: 200px; padding: 20px; }

#content { width: 500px; padding: 20px; }

  Change to:

#sidebar { width: 22%; padding: 2%; }

#content { width: 70%; padding: 2%; }

3. Prevent auto resizing

  Add the following to the HEAD of the document to

prevent mobile devices from automatically resizing:

<meta name="viewport" content="width=device-width,

initial-scale=1.0" />

4. Make images responsive

  Remove the width and height attributes from image tags

  With CSS, set the image width to 100% and height to auto

  Add this snippet of code for compatibility in IE @media \0screen {

img { width: auto; /* for ie */ }

}

5. Customize styles with media queries

#sidebar { width: 22%; padding: 2%; float: left; }

#content { width: 70%; padding: 2%; }

  @media screen and (max-width: 320px) {

#sidebar { width: 96%; float: none; }

#content { width: 96%; }

}

6. Rinse and repeat

#sidebar { width: 22%; padding: 2%; float: left; }

  @media screen and (max-width: 550px) {

#sidebar { width: 46%; }

#main img { display: none; }

}

  @media screen and (max-width: 320px) {

#sidebar { width: 96%; float: none; }

}

6. Provide backwards compatibility

  Download the javascript file from this site:

http://code.google.com/p/css3-mediaqueries-js/

  Import the Javascript file in the HEAD of the document for

media query compatibility with old browsers (and our

good friend, Internet Explorer).

2. Test, test, test

  Test your layout on every device you can get your hands

on, and be sure to check landscape and portrait views.

Ask your friends to take a look.

Let’s try it!

Resources

  Smashing Magazine:

http://mobile.smashingmagazine.com/tag/responsive-

design/

  Treehouse:

http://blog.teamtreehouse.com/beginners-guide-to-

responsive-web-design

  A List Apart:

http://www.alistapart.com/articles/responsive-web-design/