Successfully reported this slideshow.
Your SlideShare is downloading. ×

John Kivit - Shareforce - Responsive Design - Mobile Pioneers

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 29 Ad

John Kivit - Shareforce - Responsive Design - Mobile Pioneers

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.

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.

Advertisement
Advertisement

More Related Content

More from Shareforce (20)

Advertisement
Advertisement

John Kivit - Shareforce - Responsive Design - Mobile Pioneers

  1. 1. John Kivit - Mobile Pioneers Responsive design ?
  2. 2. The world is changing Responsive design
  3. 3. Responsive design
  4. 4. Responsive design
  5. 5. Responsive design
  6. 6. Responsive design
  7. 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. 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. 9. Survival strategies Apps (ios, android, blackberry) Device specific design (m.site.nl) Responsive design Responsive design
  10. 10. “ I want a design that looks good on all screens! ” (Ethan Marcotte, 2010) Responsive design
  11. 11. Cool... Show us! Responsive design
  12. 12. Boston Globe source: responsivedesign.ca Responsive design
  13. 13. Barack Obama Desktop iPad iPhone Responsive design
  14. 14. Sparkbox source: mediaqueri.es Responsive design
  15. 15. Sony Responsive design
  16. 16. SNS Reaal Jaarverslag source: fabrique.nl Responsive design
  17. 17. Lucky Day source: fabrique.nl Responsive design
  18. 18. For inspiration... Responsive design
  19. 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. 20. Like this... source: quintagroup.com Responsive design
  21. 21. Or like this! source: testbeeld.nl Responsive design
  22. 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. 23. Is the timing right? Responsive design
  24. 24. source: forknightinteractive.com Responsive design
  25. 25. Responsive design
  26. 26. Responsive design
  27. 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. 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. 29. John Kivit 06-55745256 johnkivit@shareforce.eu www.linkedin.com/in/jkivit www.shareforce.eu @jkivit Contact ?

Editor's Notes

  • \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

×