cincinnati wordpress - responsive web (december 2015)
TRANSCRIPT
![Page 1: Cincinnati WordPress - Responsive Web (December 2015)](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6cf3b67f8b9a1b428b4809/html5/thumbnails/1.jpg)
Responsive WebCincinnati WordPress
December 2015
![Page 2: Cincinnati WordPress - Responsive Web (December 2015)](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6cf3b67f8b9a1b428b4809/html5/thumbnails/2.jpg)
OUTLINE• What is responsive?
• Why responsive?
• What to look for?
• How to test responsive sites?
• How to develop responsive sites?
![Page 3: Cincinnati WordPress - Responsive Web (December 2015)](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6cf3b67f8b9a1b428b4809/html5/thumbnails/3.jpg)
WHAT IS RESPONSIVE?
![Page 4: Cincinnati WordPress - Responsive Web (December 2015)](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6cf3b67f8b9a1b428b4809/html5/thumbnails/4.jpg)
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
![Page 5: Cincinnati WordPress - Responsive Web (December 2015)](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6cf3b67f8b9a1b428b4809/html5/thumbnails/5.jpg)
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 ✓ ✓
![Page 6: Cincinnati WordPress - Responsive Web (December 2015)](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6cf3b67f8b9a1b428b4809/html5/thumbnails/6.jpg)
WHY RESPONSIVE?
Source: KPCB Internet Trends Report 2014 via StatCounter Global Stats
![Page 7: Cincinnati WordPress - Responsive Web (December 2015)](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6cf3b67f8b9a1b428b4809/html5/thumbnails/7.jpg)
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
![Page 8: Cincinnati WordPress - Responsive Web (December 2015)](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6cf3b67f8b9a1b428b4809/html5/thumbnails/8.jpg)
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.“
![Page 9: Cincinnati WordPress - Responsive Web (December 2015)](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6cf3b67f8b9a1b428b4809/html5/thumbnails/9.jpg)
WHAT TO LOOK FOR?
Where can I find responsive themes?
![Page 10: Cincinnati WordPress - Responsive Web (December 2015)](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6cf3b67f8b9a1b428b4809/html5/thumbnails/10.jpg)
WHAT TO LOOK FOR?
![Page 11: Cincinnati WordPress - Responsive Web (December 2015)](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6cf3b67f8b9a1b428b4809/html5/thumbnails/11.jpg)
WHAT TO LOOK FOR?
How do I know whether a theme is responsive?
![Page 12: Cincinnati WordPress - Responsive Web (December 2015)](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6cf3b67f8b9a1b428b4809/html5/thumbnails/12.jpg)
HOW TO TEST RESPONSIVE?“Ye Olde” Screen Resize
![Page 13: Cincinnati WordPress - Responsive Web (December 2015)](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6cf3b67f8b9a1b428b4809/html5/thumbnails/13.jpg)
HOW TO TEST RESPONSIVE?Browser Emulator
![Page 14: Cincinnati WordPress - Responsive Web (December 2015)](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6cf3b67f8b9a1b428b4809/html5/thumbnails/14.jpg)
HOW TO TEST RESPONSIVE?Device Emulators
![Page 15: Cincinnati WordPress - Responsive Web (December 2015)](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6cf3b67f8b9a1b428b4809/html5/thumbnails/15.jpg)
HOW TO TEST RESPONSIVE?Actual Device
![Page 16: Cincinnati WordPress - Responsive Web (December 2015)](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6cf3b67f8b9a1b428b4809/html5/thumbnails/16.jpg)
HOW TO TEST RESPONSIVE?Google Mobile-Friendly Test
https://www.google.com/webmasters/tools/mobile-friendly/
![Page 17: Cincinnati WordPress - Responsive Web (December 2015)](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6cf3b67f8b9a1b428b4809/html5/thumbnails/17.jpg)
HOW TO DEVELOP RESPONSIVE?Software Automation
WordPress 4.4 Responsive Images
![Page 18: Cincinnati WordPress - Responsive Web (December 2015)](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6cf3b67f8b9a1b428b4809/html5/thumbnails/18.jpg)
HOW TO DEVELOP RESPONSIVE?Software Automation
Jetpack “Mobile Theme”
![Page 19: Cincinnati WordPress - Responsive Web (December 2015)](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6cf3b67f8b9a1b428b4809/html5/thumbnails/19.jpg)
.content {width: 75%;
}
@media ( max-width: 768px ) {.content {width: 100%;
}}
HOW TO DEVELOP RESPONSIVE?Media Queries
![Page 20: Cincinnati WordPress - Responsive Web (December 2015)](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6cf3b67f8b9a1b428b4809/html5/thumbnails/20.jpg)
.content {width: 100%;
}
@media ( min-width: 769px ) {.content {width: 75%;
}}
HOW TO DEVELOP RESPONSIVE?“Mobile First” Media Queries
![Page 21: Cincinnati WordPress - Responsive Web (December 2015)](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6cf3b67f8b9a1b428b4809/html5/thumbnails/21.jpg)
function isTouchDevice() { try {document.createEvent( 'TouchEvent' );return true;
} catch ( error ) {return false;
}}
HOW TO DEVELOP RESPONSIVE?Touch Detection?
What about touch-screen laptops?
![Page 22: Cincinnati WordPress - Responsive Web (December 2015)](https://reader034.vdocument.in/reader034/viewer/2022052117/5a6cf3b67f8b9a1b428b4809/html5/thumbnails/22.jpg)
.container {display: flex;
}
.sidebar {flex: 1;
}
.content {flex: 2;
}
HOW TO DEVELOP RESPONSIVE?Flexbox