Responsive Design  Ian Mackay / @maniacyak  WordUp Edinburgh 2011
Responsive or Adaptive?Fills viewport     Fixed width + marginFluid content      Defined blockspercent & em       pixelsLes...
Examples
context( not screen size )
@media all {http://www.flickr.com/photos/chrismrichards/1566459108/
The Secret Sauce@media only screen and (min-width: 479px) and (device-orientation: landscape) {    /* your CSS here */}
Mobile First     & ProgressiveEnhancement
#leaf { float: left; }http://www.flickr.com/photos/45325473@N04/5457714789/
<meta name="viewport"   -  width="device-width" />      http://www.flickr.com/photos/oldpatterns/5939149758/
CSS Frameworks
What aboutWordpress?
HeaderLogo                   Navigation                                 Wid–Image                                 get     ...
Navigation
Navigation Images
Navigation       Imagesimg { max-width: 100%; }
Navigation       Imagesimg { max-width: 100%; }Plugins & Widgets
Further ReadingEthan Marcotte’s original article and subsequent book:  www.alistapart.com/articles/responsive-web-design/ ...
Responsive Design - WordUp Edinburgh 2011
Responsive Design - WordUp Edinburgh 2011
Upcoming SlideShare
Loading in...5
×

Responsive Design - WordUp Edinburgh 2011

1,110

Published on

A video recording of this presentation is now available on YouTube:

http://www.youtube.com/watch?v=pe0BEhngbb4

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,110
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Context &amp; examples\nHow to be responsive\nWordPress\n
  • Why responsive?\n
  • \n
  • \n
  • WP-Touch and OnSwipe\nNot always appropriate, e.g. restaurant vs cinema\n\nHow to make sites responsive?\n
  • CSS2 media support\n
  • Media queries are well-supported\n
  • Older desktop and mobile browsers may not support well - your defaults should be sensible\nTEST ON DEVICES\nrespond.js for IE\nCSS is not alchemy - JavaScript is.\n\n
  • Floats are great but can be confusing\n
  • iPhone introduced- default 978px\nContent zooming\n
  • Include a variety of things to help you:\n&amp;#x2013; grid systems\n- preset content sizes\n- helper scripts like Modernizr and respond.js for compatibility\n
  • \n
  • Missing ubiquitous jQuery content slider\nHow should this look on mobile?\nWhat should be dynamically loaded?\n
  • Navigation may need to be moved or change format. Is it finger-friendly? 18mm / 44px\nNot just images - any content that typically has fixed width\nPlugins and widgets may make assumptions - check carefully!\n\n
  • Navigation may need to be moved or change format. Is it finger-friendly? 18mm / 44px\nNot just images - any content that typically has fixed width\nPlugins and widgets may make assumptions - check carefully!\n\n
  • Navigation may need to be moved or change format. Is it finger-friendly? 18mm / 44px\nNot just images - any content that typically has fixed width\nPlugins and widgets may make assumptions - check carefully!\n\n
  • Navigation may need to be moved or change format. Is it finger-friendly? 18mm / 44px\nNot just images - any content that typically has fixed width\nPlugins and widgets may make assumptions - check carefully!\n\n
  • \n
  • Responsive Design - WordUp Edinburgh 2011

    1. 1. Responsive Design Ian Mackay / @maniacyak WordUp Edinburgh 2011
    2. 2. Responsive or Adaptive?Fills viewport Fixed width + marginFluid content Defined blockspercent & em pixelsLess predictable More predictableMore compatible Less compatible
    3. 3. Examples
    4. 4. context( not screen size )
    5. 5. @media all {http://www.flickr.com/photos/chrismrichards/1566459108/
    6. 6. The Secret Sauce@media only screen and (min-width: 479px) and (device-orientation: landscape) { /* your CSS here */}
    7. 7. Mobile First & ProgressiveEnhancement
    8. 8. #leaf { float: left; }http://www.flickr.com/photos/45325473@N04/5457714789/
    9. 9. <meta name="viewport" - width="device-width" /> http://www.flickr.com/photos/oldpatterns/5939149758/
    10. 10. CSS Frameworks
    11. 11. What aboutWordpress?
    12. 12. HeaderLogo Navigation Wid–Image get Content Sidebar Wid– getWidget Footer Widget
    13. 13. Navigation
    14. 14. Navigation Images
    15. 15. Navigation Imagesimg { max-width: 100%; }
    16. 16. Navigation Imagesimg { max-width: 100%; }Plugins & Widgets
    17. 17. Further ReadingEthan Marcotte’s original article and subsequent book: www.alistapart.com/articles/responsive-web-design/ www.bookapart.com/products/responsive-web-design/Mobile First by Luke Wroblewski: www.lukew.com/ff/entry.asp?933An excellent responsive design case study by Yiibu: www.slideshare.net/yiibu/pragmatic-responsive-designPeter-Paul Koch’s extensive articles on mobile browsers: www.quirksmode.org/mobile/A showcase of sites using responsive design: mediaqueri.es

    ×