Your SlideShare is downloading. ×
Responsive Design - WordUp Edinburgh 2011
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Responsive Design - WordUp Edinburgh 2011

1,045
views

Published on

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

Published in: Technology, Business

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • 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
  • 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