Responsive Design for Mobile Devices€¦ · What is responsive design? An approach to mobile...
Transcript of Responsive Design for Mobile Devices€¦ · What is responsive design? An approach to mobile...
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/