Responsive webdesign

2,613 views

Published on

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

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,613
On SlideShare
0
From Embeds
0
Number of Embeds
1,845
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Responsive webdesign

    1. 1. Responsive desginGeoffrie HoitingConcept7 mobile event, 7 juni 2012
    2. 2. Geoffrie Hoiting 2 jaar voor c7 front-end developer/designer - inhoud - dieper op responsive in - relatief weinig inspanning - betere experience voor bezoekers 2geoffrie@concept7.nl
    3. 3. “You must constantly change and adapt to a new environment”Jong-yong YunCEO Samsung 3
    4. 4. “You must constantly adapt to a new screen“You must constantly change and adapt to a size” new environment”Jong-yong YunCEO Samsung 3
    5. 5. Verschil met mobiele site- één code Wat is responsive?- alles wordt geladen- visuele optimalisatieper schermgrootte Hetzelfde op een andere manier tonen 4
    6. 6. Hoe ziet het er uit? 5
    7. 7. Hoe ziet het er uit? 5
    8. 8. Hoe ziet het er uit? 5
    9. 9. Hoe doen we dat? CSSEn een beetje Javascript... 6
    10. 10. Hoe wat waar? 7
    11. 11. Hoe wat waar? 7
    12. 12. Hoe wat waar? 7
    13. 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. 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. 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. 16. Uitgangspunt responsiveBezoekers een betere (lees)ervaring bieden,geoptimaliseerd voor elke schermgrootte. 9
    17. 17. Vragen?Stel ze gerust... 10

    ×