What is responsive web design, and why should you care? As a developer or when otherwise modifying an existing theme, how do you go about making elements on a page responsive? At December's meeting, we'll seek to answer these questions and others. Some items that we'll expect to cover include: • Motivations behind responsive web design • Tools for testing your a theme or page in a variety of contexts • Building your site to work on all types of displays, be it desktop, phone, tablet, or other

1. Responsive Web
Cincinnati WordPress
December 2015

2. OUTLINE
• What is responsive?
• Why responsive?
• What to look for?
• How to test responsive sites?
• How to develop responsive sites?

3. WHAT IS RESPONSIVE?

4. WHAT IS RESPONSIVE?
A responsive design is composed of three distinct
parts:
1. A flexible grid.
2. Flexible images.
3. Media queries.
“
http://unstoppablerobotninja.com/entry/on-being-responsive/
— Ethan Marcotte

5. WHAT IS RESPONSIVE?
Responsive Adaptive
Basis for layout
Smoothly resizing elements on
a percentage basis
Page redistributes layout at
predefined intervals
Example
20% sidebar, 75% content area,
each resizing to 100% at small
display
200 pixel sidebar, 600 pixel
main area, resizing to 300
pixels each at small display
Media Queries ✓ ✓

6. WHY RESPONSIVE?
Source: KPCB InternetTrends Report 2014 via StatCounter Global Stats

7. WHY RESPONSIVE?
Continued growth of mobile traffic
• Affordability -Tablets can be
purchased for less than $50
• Convenience - Portable devices
are easier to carry and use

8. WHY RESPONSIVE?
SEO Implications
Google cares about responsiveness!
https://developers.google.com/webmasters/mobile-sites/
If you haven't made your website mobile-friendly,
you should. Majority of the users coming to your
site are likely to be using a mobile device.
“

9. WHAT TO LOOK FOR?
Where can I find
responsive themes?

10. WHAT TO LOOK FOR?

11. WHAT TO LOOK FOR?
How do I know whether a
theme is responsive?

12. HOW TO TEST RESPONSIVE?
“Ye Olde” Screen Resize

13. HOW TO TEST RESPONSIVE?
Browser Emulator

14. HOW TO TEST RESPONSIVE?
Device Emulators

15. HOW TO TEST RESPONSIVE?
Actual Device

16. HOW TO TEST RESPONSIVE?
Google Mobile-FriendlyTest
https://www.google.com/webmasters/tools/mobile-friendly/

17. HOW TO DEVELOP RESPONSIVE?
Software Automation
WordPress 4.4 Responsive Images

18. HOW TO DEVELOP RESPONSIVE?
Software Automation
Jetpack “MobileTheme”

19. .content {
width: 75%;
}
@media ( max-width: 768px ) {
.content {
width: 100%;
}
}
HOW TO DEVELOP RESPONSIVE?
Media Queries

20. .content {
width: 100%;
}
@media ( min-width: 769px ) {
.content {
width: 75%;
}
}
HOW TO DEVELOP RESPONSIVE?
“Mobile First” Media Queries

21. function isTouchDevice() {
try {
document.createEvent( 'TouchEvent' );
return true;
} catch ( error ) {
return false;
}
}
HOW TO DEVELOP RESPONSIVE?
Touch Detection?
What about touch-screen laptops?

22. .container {
display: flex;
}
.sidebar {
flex: 1;
}
.content {
flex: 2;
}
HOW TO DEVELOP RESPONSIVE?
Flexbox