De presentatie van Geoffrie over responsive webdesign tijdens de Concept7 bijpraatsessie mobiel op donderdag 7 juni 2012.

1. Responsive desgin
Geoffrie Hoiting
Concept7 mobile event, 7 juni 2012

2. Geoffrie Hoiting
2 jaar voor c7
front-end developer/designer
- inhoud
- dieper op responsive in
- relatief weinig inspanning
- betere experience voor bezoekers
2
geoffrie@concept7.nl

3. “You must constantly change and adapt to a
new environment”
Jong-yong Yun
CEO Samsung
3

4. “You must constantly adapt to a new screen
“You must constantly change and adapt to a
size”
new environment”
Jong-yong Yun
CEO Samsung
3

5. Verschil met mobiele site
- één code
Wat is responsive?
- alles wordt geladen
- visuele optimalisatie
per schermgrootte
Hetzelfde op een andere manier tonen
4

6. Hoe ziet het er uit?
5

7. Hoe ziet het er uit?
5

8. Hoe ziet het er uit?
5

9. Hoe doen we dat?
CSS
En een beetje Javascript...
6

10. Hoe wat waar?
7

11. Hoe wat waar?
7

12. Hoe wat waar?
7

13. Hoe werkt het?
Huidige situatie bij c7 websites
- 1024px treshhold
- Standaard breedte safe voor ipad landscape
- iPad/tablet portrait is scrollen/pinchen
- iPhone landscape + portrait.
- Andere merken devices ook naar gelang resolutie
8

14. Hoe werkt het?
Huidige situatie bij c7 websites
- 1024px treshhold
- Standaard breedte safe voor ipad landscape
- iPad/tablet portrait is scrollen/pinchen
- iPhone landscape + portrait.
- Andere merken devices ook naar gelang resolutie
8

15. Hoe werkt het?
Huidige situatie bij c7 websites
- 1024px treshhold
- Standaard breedte safe voor ipad landscape
- iPad/tablet portrait is scrollen/pinchen
- iPhone landscape + portrait.
- Andere merken devices ook naar gelang resolutie
8

16. Uitgangspunt responsive
Bezoekers een betere (lees)ervaring bieden,
geoptimaliseerd voor elke schermgrootte.
9

17. Vragen?
Stel ze gerust...
10