John Kivit - Shareforce - Responsive Design - Mobile Pioneers
•
2 j'aime•5,037 vues
Veel organisaties zien op tegen de hoge investeringen om op meerdere platformen aanwezig te zijn. Responsive design is een mogelijke oplossing voor dit dilemma. Build once, show many! Shareforce directeur John Kivit vertelt over het hoe en wat van deze nieuwe aanpak.
Recommandé
Contenu connexe
Similaire à John Kivit - Shareforce - Responsive Design - Mobile Pioneers
Similaire à John Kivit - Shareforce - Responsive Design - Mobile Pioneers (20)
Plus de Shareforce
Plus de Shareforce (20)
Dernier
Dernier (20)
John Kivit - Shareforce - Responsive Design - Mobile Pioneers
- 1. John Kivit - Mobile Pioneers Responsive design ?
- 2. The world is changing Responsive design
- 7. Yes, size does matter! 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 want a 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 timing right? Responsive design
- 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 ?
Notes de l'éditeur
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n