John Kivit - Mobile Pioneers    Responsive design?
The world is changing                   Responsive design
Responsive design
Responsive design
Responsive design
Responsive design
Yes, size does matter!                  1.920 x 1.080                                                 1.600 x 1.200    1.2...
Charles Darwin                 “It is not the strongest of the                 species that survives, nor the             ...
Survival strategies                            Apps                      (ios, android, blackberry)             Device spe...
“ I want a design that looks good onall screens! ” (Ethan Marcotte, 2010)                              Responsive design
Cool...Show us!           Responsive design
Boston Globe               source: responsivedesign.ca                                             Responsive design
Barack Obama       Desktop   iPad                                 iPhone                        Responsive design
Sparkbox           source: mediaqueri.es                                   Responsive design
Sony       Responsive design
SNS Reaal Jaarverslag                   source: fabrique.nl                                         Responsive design
Lucky Day            source: fabrique.nl                                  Responsive design
For inspiration...                     Responsive design
Under the hood...      1.   Media queries     (Show different CSS template depending on browser width)      2.   Flexible ...
Like this...               source: quintagroup.com                                         Responsive design
Or like this!                source: testbeeld.nl                                       Responsive design
Responsive design roadmap        1. Is this the best strategy?           Check the facts (competitive advantage, timing)  ...
Is the timing right?                       Responsive design
source: forknightinteractive.comResponsive design
Responsive design
Responsive design
+ user friendly+ less maintenance+ budget friendly                                 - project complexity COPE = Code Once, ...
Thanks for inspiration  Articles  en.wikipedia.org/wiki/Responsive_Web_Design  www.alistapart.com/articles/responsive-web-...
John Kivit          06-55745256    johnkivit@shareforce.eu    www.linkedin.com/in/jkivit      www.shareforce.eu           ...
Upcoming SlideShare
Loading in …5
×

John Kivit - Shareforce - Responsive Design - Mobile Pioneers

3,557 views
3,461 views

Published on

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.

Published in: Business, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,557
On SlideShare
0
From Embeds
0
Number of Embeds
1,409
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \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
  • 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 onall 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.comResponsive 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?

    ×