Responsive Design - WordUp Edinburgh 2011
1 like881 views
The document discusses the concepts of responsive and adaptive design, highlighting their differences in viewport handling and content fluidity. It emphasizes mobile-first approaches and progressive enhancement, providing examples and references to relevant resources, including articles and case studies. The inclusion of CSS frameworks and practical design tips, especially for WordPress, is also noted.
Responsive Design - WordUp Edinburgh 2011
- 1. Responsive Design Ian Mackay / @maniacyak WordUp Edinburgh 2011
- 3. Responsive or Adaptive? Fills viewport Fixed width + margin Fluid content Defined blocks percent & em pixels Less predictable More predictable More compatible Less compatible
- 4. Examples
- 5. context ( not screen size )
- 7. The Secret Sauce @media only screen and (min-width: 479px) and (device-orientation: landscape) { /* your CSS here */ }
- 8. Mobile First & Progressive Enhancement
- 9. #leaf { float: left; } http://www.flickr.com/photos/45325473@N04/5457714789/
- 10. <meta name="viewport" - width="device-width" /> http://www.flickr.com/photos/oldpatterns/5939149758/
- 11. CSS Frameworks
- 13. Header Logo Navigation Wid– Image get Content Sidebar Wid– get Widget Footer Widget
- 15. Navigation
- 17. Navigation Images img { max-width: 100%; }
- 18. Navigation Images img { max-width: 100%; } Plugins & Widgets
- 19. Further Reading Ethan 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?933 An excellent responsive design case study by Yiibu: www.slideshare.net/yiibu/pragmatic-responsive-design Peter-Paul Koch’s extensive articles on mobile browsers: www.quirksmode.org/mobile/ A showcase of sites using responsive design: mediaqueri.es
Editor's Notes
- #2: Context & examples\nHow to be responsive\nWordPress\n
- #3: Why responsive?\n
- #4: \n
- #5: \n
- #6: WP-Touch and OnSwipe\nNot always appropriate, e.g. restaurant vs cinema\n\nHow to make sites responsive?\n
- #7: CSS2 media support\n
- #8: Media queries are well-supported\n
- #9: 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
- #10: Floats are great but can be confusing\n
- #11: iPhone introduced- default 978px\nContent zooming\n
- #12: Include a variety of things to help you:\n&#x2013; grid systems\n- preset content sizes\n- helper scripts like Modernizr and respond.js for compatibility\n
- #13: \n
- #14: Missing ubiquitous jQuery content slider\nHow should this look on mobile?\nWhat should be dynamically loaded?\n
- #15: 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
- #16: 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
- #17: 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
- #18: 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
- #19: \n