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