Responsive Design - WordUp Edinburgh 2011
•
1 gostou•881 visualizações
A video recording of this presentation is now available on YouTube: http://www.youtube.com/watch?v=pe0BEhngbb4
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Semelhante a Responsive Design - WordUp Edinburgh 2011
Semelhante a Responsive Design - WordUp Edinburgh 2011 (20)
Último
Último (20)
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
Notas do Editor
- 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&#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