Asterix en Obelix nemen je mee op reis door het Responsive Webdesign landschap

1. Responsive
webdesign
Denver Sessink
DTC Media

2. Inhoud
● Introductie
● Smartphone evolutie
● Use cases
● Mobile first
● Mobile web-techniques
● Dieper in de techniek
● RWD in de praktijk

3. Let’s go!

4. Smartphone
evolutie
Wat Steve Jobs ons aandeed

5. Smartphone evolutie

6. Steve Jobs changed the world

7. Steve Jobs changed the world twice

10. Evolutie van internet

11. Use cases
smartphone | tablet | laptop | desktop

12. Smartphone

13. Smartphone
3G verbinding
● on the go
● snel iets opzoeken
● kan langzaam zijn
● direct bellen
● niet printen
● payment nog lastig
WIFI verbinding
● thuis, werk
● snel iets opzoeken
● veelal snel internet
● printen is lastig
● payment nog lastig

14. Smartphone Surfin’
● Nieuws lezen
● Occasions zoeken
● Uitgebreid nieuwe modellen zoeken
● Werkplaatsafspraak maken
● Contactinformatie opzoeken
● Bedrijfshistorie lezen
● Inruilwaarde berekenen & offerte aanvragen

15. Tablet

16. Tablet
● touch!
● vooral thuisgebruik
● groter scherm
● tablet heeft
gemiddeld meer
dan 1 gebruiker
● snel iets opzoeken
● maar ook relax
surfen
● printen is lastig

17. Tablet Surfin’
● Nieuws lezen
● Occasions zoeken
● Uitgebreid nieuwe modellen zoeken
● Werkplaatsafspraak maken
● Contactinformatie opzoeken
● Bedrijfshistorie lezen
● Inruilwaarde berekenen & offerte aanvragen

18. Desktop

19. Desktop
● Muisbediening!
● Echt de tijd nemen
● Groot scherm (bijv. 1280x1024)
● Grote diversiteit browsers IE8 / Chome 34

20. Desktop Surfin’
● Nieuws lezen
● Occasions zoeken
● Uitgebreid nieuwe modellen zoeken
● Werkplaatsafspraak maken
● Contactinformatie opzoeken
● Bedrijfshistorie lezen
● Inruilwaarde berekenen & offerte aanvragen

21. Mobile first
nadenken over de essentie

22. Begin klein

23. Use cases
● Niet alleen de homepage
● Contactinformatie
● Werkplaatsafspraak maken
● Occasions zoeken
● Occasion bekijken
● …

24. Mobile first in de praktijk
● Heel tijdrovend
● Per device(groep) een ander design
● Lastig met de klant te communiceren
● Wel in je achterhoofd houden

25. Mobile web-
techniques
adaptive, mobiele website,
responsive

26. Mobiele website
● m.domein.nl of domein.nl/m
● Volledig eigen content
● Design toegespitst op use case
● SEO lastig
● Extra site om te onderhouden

27. Adaptive
webdesign
adaptief [adɑp'tif] aangepast voor een
bepaalde omstandigheid

28. Adaptive webdesign
● Specifiek device (bijv. alleen smartphone)
● Niet flexibel
● Sneller te ontwikkelen

29. Responsive Web
Design RWD
responsief [rɛspɔn'sif] wat een antwoord
bevat / responsieve communicatie (

30. Responsive webdesign
● [reactief] communicatie waarbij je ingaat op
iets dat je gesprekspartner net gezegd heeft
● Alle devices
● Flexibel
● Veel ontwikkeldtijd

31. Waarom responsive?
● Best mogelijke voorbereiding op toekomst
● Heel veel verschillende devices
● Ontwikkelingen gaan heel snel door
● Opvulling tussen kleinste en desktop

32. Nu wat
techniek
Viewport, Media Queries

33. Viewport
Veel complexer dan je denkt!

34. Viewport
“Some mobile browsers, notably Safari
iPhone, have a default layout viewport of
around 850 to 1000 pixels — much larger
than the device width. (Why? In order to
accomodate desktop sites whose developers
did not test on mobile. Such sites usually
stretch to roughly that width.)” - PPK

35. Device viewport
● Het zichtbare deel van het scherm van het
device
● Wordt door fabrikanten soms anders
ingesteld
● Je móet iets doen om controle te houden
● Media query pakt device viewport

36. Device viewport beinvloeden
● Device width leest actuele de schermbreedte
uit
● device-width != device viewport
● device viewport instellen:
<meta name="viewport" content="
width=device-width">

37. Kortom
Hou controle over de viewport door hem altijd
op device-width in te stellen!

38. Media queries
browser support, resoluties, voorbeelden

39. Browser support
● CSS3
● Internet Explorer 9+
● Firefox
● Chrome
● Safari
● Alle mobiele browsers (Chrome, Firefox, IE
Mobile, Android Browser, iOS Safari)
● Zie http://caniuse.com/css-mediaqueries

40. Apparaten en resoluties

41. Media query
@media
screen and
(min-width: 600px) and (max-
width: 900px) and (orientation:
landscape) {}

42. Media types
@media
screen and
(min-width: 600px) and (max-
width: 900px) and (orientation:
landscape) {}

43. Selectors
@media
screen and
(min-width: 600px) and (max-
width: 900px) and (orientation:
landscape) {}

44. Media query: Small screen
@media
screen and
(max-width: 640px) {}

45. Media query: Medium screen
@media
screen and
(min-width: 641px) and
(max-width: 1024px) {}

46. Media query: Large screen
@media
screen and
(min-width: 1025px) and
(max-width: 1440px) {}

47. Media query: XLarge screen
@media
screen and
(min-width: 1441px) {}

48. Pro tip!
Media query’s worden ondersteund in
een iframe. Een iframe kan dus ook
responsive inhoud tonen!

49. RWD in de
praktijk
nauw samenwerken

50. Grid systems
● Standaard CSS voor responsive weergave
van elementen (tabellen, kolommen,
afbeeldingen, formulieren, etc.)
● Twee bekende:
○ Twitter bootstrap
○ ZURB Foundation
● Twitter bootstrap heel gebruiksvriendelijk
● ZURB Foundation meer geavanceerd

51. ZURB Foundation
● 12 kolommen standaard (instelbaar)
● 30px gutter standaard (instelbaar)

52. Rijen en kolommen

53. Rijen en kolommen (mobiel)
● Het aantal
kolommen blijft
gelijk!
● Standaard
volledige breedte .
small-12
● Zes kolommen .
small-6

54. Rijen en kolommen (tablet)
● Het aantal
kolommen blijft
gelijk!
● Zes kolommen: .
medium-6

55. Er is nog véél meer...
● .show-for-small-only
● .show-for-medium-up
● .hide-for-small-only
● .hide-for-xlarge-up
● .show-for-landscape
● .show-for-portrait
● .show-for-touch

56. Praktisch
● Blijf voor desktop ontwerpen
● Responsive maken doet een front-end
developer
● De volgorde van de elementen in het design
blijft voor desktop, tablet en smartphone gelijk
● Uitzonderingen zijn mogelijk maar hebben
direct effect op bijv. snelheid en SEO

57. Einde verhaal
Vragen?

59. After party
SASS, Responsive Video, Polyfills