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...
![Page 1: Responsive Design for Mobile Devices€¦ · What is responsive design? An approach to mobile compatibility that suggests the design should respond to user’s behavior and environment](https://reader033.fdocuments.us/reader033/viewer/2022042208/5eabfe7486ce123e03430fce/html5/thumbnails/1.jpg)
Responsive Design for Mobile Devices Web Liaisons Group September 2012
![Page 2: Responsive Design for Mobile Devices€¦ · What is responsive design? An approach to mobile compatibility that suggests the design should respond to user’s behavior and environment](https://reader033.fdocuments.us/reader033/viewer/2022042208/5eabfe7486ce123e03430fce/html5/thumbnails/2.jpg)
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/
![Page 3: Responsive Design for Mobile Devices€¦ · What is responsive design? An approach to mobile compatibility that suggests the design should respond to user’s behavior and environment](https://reader033.fdocuments.us/reader033/viewer/2022042208/5eabfe7486ce123e03430fce/html5/thumbnails/3.jpg)
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.
![Page 4: Responsive Design for Mobile Devices€¦ · What is responsive design? An approach to mobile compatibility that suggests the design should respond to user’s behavior and environment](https://reader033.fdocuments.us/reader033/viewer/2022042208/5eabfe7486ce123e03430fce/html5/thumbnails/4.jpg)
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
![Page 5: Responsive Design for Mobile Devices€¦ · What is responsive design? An approach to mobile compatibility that suggests the design should respond to user’s behavior and environment](https://reader033.fdocuments.us/reader033/viewer/2022042208/5eabfe7486ce123e03430fce/html5/thumbnails/5.jpg)
Step by step
![Page 6: Responsive Design for Mobile Devices€¦ · What is responsive design? An approach to mobile compatibility that suggests the design should respond to user’s behavior and environment](https://reader033.fdocuments.us/reader033/viewer/2022042208/5eabfe7486ce123e03430fce/html5/thumbnails/6.jpg)
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
![Page 7: Responsive Design for Mobile Devices€¦ · What is responsive design? An approach to mobile compatibility that suggests the design should respond to user’s behavior and environment](https://reader033.fdocuments.us/reader033/viewer/2022042208/5eabfe7486ce123e03430fce/html5/thumbnails/7.jpg)
![Page 8: Responsive Design for Mobile Devices€¦ · What is responsive design? An approach to mobile compatibility that suggests the design should respond to user’s behavior and environment](https://reader033.fdocuments.us/reader033/viewer/2022042208/5eabfe7486ce123e03430fce/html5/thumbnails/8.jpg)
Tablet Mobile
![Page 9: Responsive Design for Mobile Devices€¦ · What is responsive design? An approach to mobile compatibility that suggests the design should respond to user’s behavior and environment](https://reader033.fdocuments.us/reader033/viewer/2022042208/5eabfe7486ce123e03430fce/html5/thumbnails/9.jpg)
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%; }
![Page 10: Responsive Design for Mobile Devices€¦ · What is responsive design? An approach to mobile compatibility that suggests the design should respond to user’s behavior and environment](https://reader033.fdocuments.us/reader033/viewer/2022042208/5eabfe7486ce123e03430fce/html5/thumbnails/10.jpg)
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" />
![Page 11: Responsive Design for Mobile Devices€¦ · What is responsive design? An approach to mobile compatibility that suggests the design should respond to user’s behavior and environment](https://reader033.fdocuments.us/reader033/viewer/2022042208/5eabfe7486ce123e03430fce/html5/thumbnails/11.jpg)
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 */ }
}
![Page 12: Responsive Design for Mobile Devices€¦ · What is responsive design? An approach to mobile compatibility that suggests the design should respond to user’s behavior and environment](https://reader033.fdocuments.us/reader033/viewer/2022042208/5eabfe7486ce123e03430fce/html5/thumbnails/12.jpg)
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%; }
}
![Page 13: Responsive Design for Mobile Devices€¦ · What is responsive design? An approach to mobile compatibility that suggests the design should respond to user’s behavior and environment](https://reader033.fdocuments.us/reader033/viewer/2022042208/5eabfe7486ce123e03430fce/html5/thumbnails/13.jpg)
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; }
}
![Page 14: Responsive Design for Mobile Devices€¦ · What is responsive design? An approach to mobile compatibility that suggests the design should respond to user’s behavior and environment](https://reader033.fdocuments.us/reader033/viewer/2022042208/5eabfe7486ce123e03430fce/html5/thumbnails/14.jpg)
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).
![Page 15: Responsive Design for Mobile Devices€¦ · What is responsive design? An approach to mobile compatibility that suggests the design should respond to user’s behavior and environment](https://reader033.fdocuments.us/reader033/viewer/2022042208/5eabfe7486ce123e03430fce/html5/thumbnails/15.jpg)
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.
![Page 16: Responsive Design for Mobile Devices€¦ · What is responsive design? An approach to mobile compatibility that suggests the design should respond to user’s behavior and environment](https://reader033.fdocuments.us/reader033/viewer/2022042208/5eabfe7486ce123e03430fce/html5/thumbnails/16.jpg)
Let’s try it!
![Page 17: Responsive Design for Mobile Devices€¦ · What is responsive design? An approach to mobile compatibility that suggests the design should respond to user’s behavior and environment](https://reader033.fdocuments.us/reader033/viewer/2022042208/5eabfe7486ce123e03430fce/html5/thumbnails/17.jpg)
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/