• Save
Responsive Design - WordUp Edinburgh 2011
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Responsive Design - WordUp Edinburgh 2011

on

  • 1,403 views

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

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

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

Statistics

Views

Total Views
1,403
Views on SlideShare
1,329
Embed Views
74

Actions

Likes
1
Downloads
0
Comments
0

2 Embeds 74

http://wordup.wpscotland.org 73
http://paper.li 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Context & 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– 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 Presentation Transcript

  • 1. Responsive Design Ian Mackay / @maniacyak WordUp Edinburgh 2011
  • 2. Responsive or Adaptive?Fills viewport Fixed width + marginFluid content Defined blockspercent & em pixelsLess predictable More predictableMore compatible Less compatible
  • 3. Examples
  • 4. context( not screen size )
  • 5. @media all {http://www.flickr.com/photos/chrismrichards/1566459108/
  • 6. The Secret Sauce@media only screen and (min-width: 479px) and (device-orientation: landscape) { /* your CSS here */}
  • 7. Mobile First & ProgressiveEnhancement
  • 8. #leaf { float: left; }http://www.flickr.com/photos/45325473@N04/5457714789/
  • 9. <meta name="viewport" - width="device-width" /> http://www.flickr.com/photos/oldpatterns/5939149758/
  • 10. CSS Frameworks
  • 11. What aboutWordpress?
  • 12. HeaderLogo Navigation Wid–Image get Content Sidebar Wid– getWidget Footer Widget
  • 13. Navigation
  • 14. Navigation Images
  • 15. Navigation Imagesimg { max-width: 100%; }
  • 16. Navigation Imagesimg { max-width: 100%; }Plugins & Widgets
  • 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