1. WDEV118
Media Queries for Standard Devices
about.me/babon

2. Smartphones (portrait & landscape)
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
/* Styles */
}
about.me/babon

3. Smartphones (landscape)
@media only screen
and (min-width: 321px) {
/* Styles */
}
about.me/babon

4. Smartphones (portrait)
@media only screen
and (max-width: 320px) {
/* Styles */
}
about.me/babon

5. iPads (portrait and landscape)
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
/* Styles */
}
about.me/babon

6. iPads (landscape)
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation : landscape) {
/* Styles */
}
about.me/babon

7. iPads (portrait)
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation : portrait) {
/* Styles */
}
about.me/babon

8. Desktops and Laptops
@media only screen
and (min-width: 1224px) {
/* Styles */
}
about.me/babon

9. Large Screens
@media only screen
and (min-width: 1824px) {
/* Styles */
}
about.me/babon

10. iPhone 4
@media
only screen and (-webkit-min-device-pixel-ratio
: 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
about.me/babon

11. Supplemental
Source: CSS Tricks
Download Template
about.me/babon

12. Progressive Enhancement
Progressive enhancement is a strategy for web
design that emphasizes the following:
● accessibility
● semantic HTML markup
● external stylesheet
● external scripting technologies
about.me/babon

13. Progressive Enhancement
Progressive enhancement uses web
technologies in a layered fashion:
● allows everyone to access the basic content
and functionality of a web page, using any
browser or Internet connection ...
● while also providing an enhanced version of
the page to those with more advanced
browser software or greater bandwidth.
about.me/babon

14. Progressive Enhancement
Core principles:
● basic content should be accessible to all
web browsers
● basic functionality should be accessible to all
web browsers
● sparse, semantic markup contains all
content
about.me/babon

15. Progressive Enhancement
Core principles:
● enhanced layout is provided by externally
linked CSS
● enhanced behavior is provided by
unobtrusive, externally linked JavaScript
● end-user web browser preferences are
respected
about.me/babon

16. Progressive Enhancement
A mobile first approach follows progressive
enhancement principles.
Understanding progressive enhancement
techniques in web design
about.me/babon

17. HTML5 Boilerplate
"The web’s most popular front-end template."
html5boilerplate.com
Download and incorporate in your next project.
about.me/babon

18. HTML5 Boilerplate
Transform your website with HTML5 Boilerplate
Probably the single most beneficial factor in
making a decision to use the HTML5
Boilerplate is its built-in IE conditional
comments that resolve specific IE legacy
issues.
about.me/babon

19. The Responsinator
responsinator.com
A mobile device simulator
20 Examples of Successful Responsive Web
Designs
about.me/babon