Uploaded byShareforce
John Kivit - Shareforce - Responsive Design - Mobile Pioneers
The document discusses the importance and strategies of responsive design in web development, emphasizing adaptability to different screen sizes and devices. It outlines various techniques such as media queries, flexible grids, and dynamic content to enhance user experience across platforms. The roadmap for implementing responsive design includes prioritizing content, choosing breakpoints, and testing on multiple devices.
More Related Content
Similar to John Kivit - Shareforce - Responsive Design - Mobile Pioneers
John Kivit - Shareforce - Responsive Design - Mobile Pioneers
- 1. John Kivit -Mobile Pioneers Responsive design ?
- 2. The world ischanging Responsive design
- 3.
- 4.
- 5.
- 6.
- 7. Yes, size doesmatter! 1.920 x 1.080 1.600 x 1.200 1.280 x 800 1.024 x 768 320 x 480 Responsive design
- 8. Charles Darwin “It is not the strongest of the species that survives, nor the most intelligent that survives. It is the one that is the most adaptable to change”. Responsive design
- 9. Survival strategies Apps (ios, android, blackberry) Device specific design (m.site.nl) Responsive design Responsive design
- 10. “ I wanta design that looks good on all screens! ” (Ethan Marcotte, 2010) Responsive design
- 11. Cool... Show us! Responsive design
- 12. Boston Globe source: responsivedesign.ca Responsive design
- 13. Barack Obama Desktop iPad iPhone Responsive design
- 14. Sparkbox source: mediaqueri.es Responsive design
- 15. Sony Responsive design
- 16. SNS Reaal Jaarverslag source: fabrique.nl Responsive design
- 17. Lucky Day source: fabrique.nl Responsive design
- 18. For inspiration... Responsive design
- 19. Under the hood... 1. Media queries (Show different CSS template depending on browser width) 2. Flexible grid (Scale & position page elements inside browser window) 3. Dynamic content (Text, images & video scaling ‘inside the box’) Responsive design
- 20. Like this... source: quintagroup.com Responsive design
- 21. Or like this! source: testbeeld.nl Responsive design
- 22. Responsive design roadmap 1. Is this the best strategy? Check the facts (competitive advantage, timing) 2. Put mobile first Helps deciding whats most important 3. Prioritize content Rank everything 4. Choose your breakpoints Design for popular devices / resolutions 5. Decide on design patterns Keep it simple 6. Do wireframes & designs Yes, this is a lot of work 7. Choose your tools Framework, tools for responsive images, text & video (bit.ly/responsivetools) 8. Start coding 9. Test on devices 10. Launch! Responsive design
- 23. Is the timingright? Responsive design
- 24.
- 25.
- 26.
- 27. + user friendly +less maintenance + budget friendly - project complexity COPE = Code Once, Publish Everywhere - page load time (*) - connection needed (*) can be fixed Responsive design
- 28. Thanks for inspiration Articles en.wikipedia.org/wiki/Responsive_Web_Design www.alistapart.com/articles/responsive-web-design/ www.frankwatching.com/archive/2011/11/28/responsive-webdesign-op-basis-van-context-en-behoeften/ Cases www.fabrique.nl/case/responsivedesign/ www.mediaqueri.es www.webdesignermagazine.nl/inspiratie/15-nederlandse-voorbeelden-van-responsive-webdesign/3907/ www.webdesigndev.com/web-development/10-incredible-examples-of-responsive-web-design Presentations www.slideshare.net/bytte/responsive-web-design-10389263 www.slideshare.net/livefront/responsive-design-7877412 www.slideshare.net/pkattera/design-process-for-responsive-web-design www.slideshare.net/stephenhay/responsive-design-workflow Tools mattkersley.com/responsive/ www.netmagazine.com/features/50-fantastic-tools-responsive-web-design www.responsinator.com/ resizemybrowser.com/ www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop Responsive design
- 29. John Kivit 06-55745256 johnkivit@shareforce.eu www.linkedin.com/in/jkivit www.shareforce.eu @jkivit Contact ?