• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
John Kivit - Shareforce - Responsive Design - Mobile Pioneers
 

John Kivit - Shareforce - Responsive Design - Mobile Pioneers

on

  • 2,482 views

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 ...

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.

Statistics

Views

Total Views
2,482
Views on SlideShare
1,621
Embed Views
861

Actions

Likes
0
Downloads
0
Comments
0

12 Embeds 861

http://www.shareforce.eu 681
http://shareforce.ionut 66
http://website.shareforce.me 60
http://shareforce.eu 26
http://website2.shareforce.me 7
http://test.shareforce.eu 6
http://shareforce.ionut.me 4
http://www.linkedin.com 4
http://shareforce.nl 3
http://staging.shareforce.eu 2
http://shareforce.andrei.me 1
https://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 John Kivit - Shareforce - Responsive Design - Mobile Pioneers Presentation Transcript

  • 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.280 x 800 1.024 x 768 320 x 480 Responsive design
  • 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
  • Survival strategies Apps (ios, android, blackberry) Device specific design (m.site.nl) Responsive design Responsive design
  • “ 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 grid (Scale & position page elements inside browser window) 3. Dynamic content (Text, images & video scaling ‘inside the box’) Responsive design
  • 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) 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
  • 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, Publish Everywhere - page load time (*) - connection needed (*) can be fixed Responsive design
  • 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
  • John Kivit 06-55745256 johnkivit@shareforce.eu www.linkedin.com/in/jkivit www.shareforce.eu @jkivit Contact?