Responsive Web
Cincinnati WordPress
December 2015
OUTLINE
• What is responsive?
• Why responsive?
• What to look for?
• How to test responsive sites?
• How to develop respo...
WHAT IS RESPONSIVE?
WHAT IS RESPONSIVE?
A responsive design is composed of three distinct
parts:

1. A flexible grid.
2. Flexible images.
3. Me...
WHAT IS RESPONSIVE?
Responsive Adaptive
Basis for layout
Smoothly resizing elements on
a percentage basis
Page redistribut...
WHY RESPONSIVE?
Source: KPCB InternetTrends Report 2014 via StatCounter Global Stats
WHY RESPONSIVE?
Continued growth of mobile traffic
• Affordability -Tablets can be
purchased for less than $50
• Convenienc...
WHY RESPONSIVE?
SEO Implications
Google cares about responsiveness!
https://developers.google.com/webmasters/mobile-sites/...
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-FriendlyTest
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 “MobileTheme”
.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 Firs...
function isTouchDevice() {
try {
document.createEvent( 'TouchEvent' );
return true;
} catch ( error ) {
return false;
}
}
...
.container {
display: flex;
}
.sidebar {
flex: 1;
}
.content {
flex: 2;
}
HOW TO DEVELOP RESPONSIVE?
Flexbox
Upcoming SlideShare
Loading in …5
×

Cincinnati WordPress - Responsive Web (December 2015)

607 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
607
On SlideShare
0
From Embeds
0
Number of Embeds
267
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Cincinnati WordPress - Responsive Web (December 2015)

  1. 1. Responsive Web Cincinnati WordPress December 2015
  2. 2. OUTLINE • What is responsive? • Why responsive? • What to look for? • How to test responsive sites? • How to develop responsive sites?
  3. 3. WHAT IS RESPONSIVE?
  4. 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. 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. 6. WHY RESPONSIVE? Source: KPCB InternetTrends Report 2014 via StatCounter Global Stats
  7. 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. 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. 9. WHAT TO LOOK FOR? Where can I find responsive themes?
  10. 10. WHAT TO LOOK FOR?
  11. 11. WHAT TO LOOK FOR? How do I know whether a theme is responsive?
  12. 12. HOW TO TEST RESPONSIVE? “Ye Olde” Screen Resize
  13. 13. HOW TO TEST RESPONSIVE? Browser Emulator
  14. 14. HOW TO TEST RESPONSIVE? Device Emulators
  15. 15. HOW TO TEST RESPONSIVE? Actual Device
  16. 16. HOW TO TEST RESPONSIVE? Google Mobile-FriendlyTest https://www.google.com/webmasters/tools/mobile-friendly/
  17. 17. HOW TO DEVELOP RESPONSIVE? Software Automation WordPress 4.4 Responsive Images
  18. 18. HOW TO DEVELOP RESPONSIVE? Software Automation Jetpack “MobileTheme”
  19. 19. .content { width: 75%; } @media ( max-width: 768px ) { .content { width: 100%; } } HOW TO DEVELOP RESPONSIVE? Media Queries
  20. 20. .content { width: 100%; } @media ( min-width: 769px ) { .content { width: 75%; } } HOW TO DEVELOP RESPONSIVE? “Mobile First” Media Queries
  21. 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. 22. .container { display: flex; } .sidebar { flex: 1; } .content { flex: 2; } HOW TO DEVELOP RESPONSIVE? Flexbox

×