Responsive WebCincinnati WordPress

December 2015

OUTLINE• What is responsive?

• Why responsive?

• What to look for?

• How to test responsive sites?

• How to develop responsive sites?

WHAT IS RESPONSIVE?

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

WHAT IS RESPONSIVE?Responsive Adaptive

Basis for layout Smoothly resizing elements on a percentage basis

Page redistributes layout at predefined intervals

Example20% 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 ✓ ✓

WHY RESPONSIVE?

Source: KPCB Internet Trends Report 2014 via StatCounter Global Stats

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

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.“

WHAT TO LOOK FOR?

Where can I find responsive themes?

WHAT TO LOOK FOR?

WHAT TO LOOK FOR?

How do I know whether a theme is responsive?

HOW TO TEST RESPONSIVE?“Ye Olde” Screen Resize

HOW TO TEST RESPONSIVE?Browser Emulator

HOW TO TEST RESPONSIVE?Device Emulators

HOW TO TEST RESPONSIVE?Actual Device

HOW TO TEST RESPONSIVE?Google Mobile-Friendly Test

https://www.google.com/webmasters/tools/mobile-friendly/

HOW TO DEVELOP RESPONSIVE?Software Automation

WordPress 4.4 Responsive Images

HOW TO DEVELOP RESPONSIVE?Software Automation

Jetpack “Mobile Theme”

.content {width: 75%;

}

@media ( max-width: 768px ) {.content {width: 100%;

}}

HOW TO DEVELOP RESPONSIVE?Media Queries

.content {width: 100%;

}

@media ( min-width: 769px ) {.content {width: 75%;

}}

HOW TO DEVELOP RESPONSIVE?“Mobile First” Media Queries

function isTouchDevice() { try {document.createEvent( 'TouchEvent' );return true;

} catch ( error ) {return false;

}}

HOW TO DEVELOP RESPONSIVE?Touch Detection?

What about touch-screen laptops?

.container {display: flex;

}

.sidebar {flex: 1;

}

.content {flex: 2;

}

HOW TO DEVELOP RESPONSIVE?Flexbox