Click here to load reader

Cincinnati WordPress - Responsive Web (December 2015)

  • View
    1.491

  • Download
    0

Embed Size (px)

Text of 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 exible 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 predened 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 trafc 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 nd 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

Search related