Responsive
webdesign
Denver Sessink
DTC Media
Inhoud
● Introductie
● Smartphone evolutie
● Use cases
● Mobile first
● Mobile web-techniques
● Dieper in de techniek
● RW...
Let’s go!
Smartphone
evolutie
Wat Steve Jobs ons aandeed
Smartphone evolutie
Steve Jobs changed the world
Steve Jobs changed the world twice
Evolutie van internet
Use cases
smartphone | tablet | laptop | desktop
Smartphone
Smartphone
3G verbinding
● on the go
● snel iets opzoeken
● kan langzaam zijn
● direct bellen
● niet printen
● payment nog...
Smartphone Surfin’
● Nieuws lezen
● Occasions zoeken
● Uitgebreid nieuwe modellen zoeken
● Werkplaatsafspraak maken
● Cont...
Tablet
Tablet
● touch!
● vooral thuisgebruik
● groter scherm
● tablet heeft
gemiddeld meer
dan 1 gebruiker
● snel iets opzoeken
●...
Tablet Surfin’
● Nieuws lezen
● Occasions zoeken
● Uitgebreid nieuwe modellen zoeken
● Werkplaatsafspraak maken
● Contacti...
Desktop
Desktop
● Muisbediening!
● Echt de tijd nemen
● Groot scherm (bijv. 1280x1024)
● Grote diversiteit browsers IE8 / Chome 34
Desktop Surfin’
● Nieuws lezen
● Occasions zoeken
● Uitgebreid nieuwe modellen zoeken
● Werkplaatsafspraak maken
● Contact...
Mobile first
nadenken over de essentie
Begin klein
Use cases
● Niet alleen de homepage
● Contactinformatie
● Werkplaatsafspraak maken
● Occasions zoeken
● Occasion bekijken
...
Mobile first in de praktijk
● Heel tijdrovend
● Per device(groep) een ander design
● Lastig met de klant te communiceren
●...
Mobile web-
techniques
adaptive, mobiele website,
responsive
Mobiele website
● m.domein.nl of domein.nl/m
● Volledig eigen content
● Design toegespitst op use case
● SEO lastig
● Extr...
Adaptive
webdesign
adaptief [adɑp'tif] aangepast voor een
bepaalde omstandigheid
Adaptive webdesign
● Specifiek device (bijv. alleen smartphone)
● Niet flexibel
● Sneller te ontwikkelen
Responsive Web
Design RWD
responsief [rɛspɔn'sif] wat een antwoord
bevat / responsieve communicatie (
Responsive webdesign
● [reactief] communicatie waarbij je ingaat op
iets dat je gesprekspartner net gezegd heeft
● Alle de...
Waarom responsive?
● Best mogelijke voorbereiding op toekomst
● Heel veel verschillende devices
● Ontwikkelingen gaan heel...
Nu wat
techniek
Viewport, Media Queries
Viewport
Veel complexer dan je denkt!
Viewport
“Some mobile browsers, notably Safari
iPhone, have a default layout viewport of
around 850 to 1000 pixels — much ...
Device viewport
● Het zichtbare deel van het scherm van het
device
● Wordt door fabrikanten soms anders
ingesteld
● Je móe...
Device viewport beinvloeden
● Device width leest actuele de schermbreedte
uit
● device-width != device viewport
● device v...
Kortom
Hou controle over de viewport door hem altijd
op device-width in te stellen!
Media queries
browser support, resoluties, voorbeelden
Browser support
● CSS3
● Internet Explorer 9+
● Firefox
● Chrome
● Safari
● Alle mobiele browsers (Chrome, Firefox, IE
Mob...
Apparaten en resoluties
Media query
@media
screen and
(min-width: 600px) and (max-
width: 900px) and (orientation:
landscape) {}
Media types
@media
screen and
(min-width: 600px) and (max-
width: 900px) and (orientation:
landscape) {}
Selectors
@media
screen and
(min-width: 600px) and (max-
width: 900px) and (orientation:
landscape) {}
Media query: Small screen
@media
screen and
(max-width: 640px) {}
Media query: Medium screen
@media
screen and
(min-width: 641px) and
(max-width: 1024px) {}
Media query: Large screen
@media
screen and
(min-width: 1025px) and
(max-width: 1440px) {}
Media query: XLarge screen
@media
screen and
(min-width: 1441px) {}
Pro tip!
Media query’s worden ondersteund in
een iframe. Een iframe kan dus ook
responsive inhoud tonen!
RWD in de
praktijk
nauw samenwerken
Grid systems
● Standaard CSS voor responsive weergave
van elementen (tabellen, kolommen,
afbeeldingen, formulieren, etc.)
...
ZURB Foundation
● 12 kolommen standaard (instelbaar)
● 30px gutter standaard (instelbaar)
Rijen en kolommen
Rijen en kolommen (mobiel)
● Het aantal
kolommen blijft
gelijk!
● Standaard
volledige breedte .
small-12
● Zes kolommen .
...
Rijen en kolommen (tablet)
● Het aantal
kolommen blijft
gelijk!
● Zes kolommen: .
medium-6
Er is nog véél meer...
● .show-for-small-only
● .show-for-medium-up
● .hide-for-small-only
● .hide-for-xlarge-up
● .show-f...
Praktisch
● Blijf voor desktop ontwerpen
● Responsive maken doet een front-end
developer
● De volgorde van de elementen in...
Einde verhaal
Vragen?
After party
SASS, Responsive Video, Polyfills
Responsive webdesign
Responsive webdesign
Responsive webdesign
Upcoming SlideShare
Loading in …5
×

Responsive webdesign

263
-1

Published on

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

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

No Downloads
Views
Total Views
263
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Responsive webdesign

  1. 1. Responsive webdesign Denver Sessink DTC Media
  2. 2. Inhoud ● Introductie ● Smartphone evolutie ● Use cases ● Mobile first ● Mobile web-techniques ● Dieper in de techniek ● RWD in de praktijk
  3. 3. Let’s go!
  4. 4. Smartphone evolutie Wat Steve Jobs ons aandeed
  5. 5. Smartphone evolutie
  6. 6. Steve Jobs changed the world
  7. 7. Steve Jobs changed the world twice
  8. 8. Evolutie van internet
  9. 9. Use cases smartphone | tablet | laptop | desktop
  10. 10. Smartphone
  11. 11. 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
  12. 12. Smartphone Surfin’ ● Nieuws lezen ● Occasions zoeken ● Uitgebreid nieuwe modellen zoeken ● Werkplaatsafspraak maken ● Contactinformatie opzoeken ● Bedrijfshistorie lezen ● Inruilwaarde berekenen & offerte aanvragen
  13. 13. Tablet
  14. 14. Tablet ● touch! ● vooral thuisgebruik ● groter scherm ● tablet heeft gemiddeld meer dan 1 gebruiker ● snel iets opzoeken ● maar ook relax surfen ● printen is lastig
  15. 15. Tablet Surfin’ ● Nieuws lezen ● Occasions zoeken ● Uitgebreid nieuwe modellen zoeken ● Werkplaatsafspraak maken ● Contactinformatie opzoeken ● Bedrijfshistorie lezen ● Inruilwaarde berekenen & offerte aanvragen
  16. 16. Desktop
  17. 17. Desktop ● Muisbediening! ● Echt de tijd nemen ● Groot scherm (bijv. 1280x1024) ● Grote diversiteit browsers IE8 / Chome 34
  18. 18. Desktop Surfin’ ● Nieuws lezen ● Occasions zoeken ● Uitgebreid nieuwe modellen zoeken ● Werkplaatsafspraak maken ● Contactinformatie opzoeken ● Bedrijfshistorie lezen ● Inruilwaarde berekenen & offerte aanvragen
  19. 19. Mobile first nadenken over de essentie
  20. 20. Begin klein
  21. 21. Use cases ● Niet alleen de homepage ● Contactinformatie ● Werkplaatsafspraak maken ● Occasions zoeken ● Occasion bekijken ● …
  22. 22. Mobile first in de praktijk ● Heel tijdrovend ● Per device(groep) een ander design ● Lastig met de klant te communiceren ● Wel in je achterhoofd houden
  23. 23. Mobile web- techniques adaptive, mobiele website, responsive
  24. 24. Mobiele website ● m.domein.nl of domein.nl/m ● Volledig eigen content ● Design toegespitst op use case ● SEO lastig ● Extra site om te onderhouden
  25. 25. Adaptive webdesign adaptief [adɑp'tif] aangepast voor een bepaalde omstandigheid
  26. 26. Adaptive webdesign ● Specifiek device (bijv. alleen smartphone) ● Niet flexibel ● Sneller te ontwikkelen
  27. 27. Responsive Web Design RWD responsief [rɛspɔn'sif] wat een antwoord bevat / responsieve communicatie (
  28. 28. Responsive webdesign ● [reactief] communicatie waarbij je ingaat op iets dat je gesprekspartner net gezegd heeft ● Alle devices ● Flexibel ● Veel ontwikkeldtijd
  29. 29. Waarom responsive? ● Best mogelijke voorbereiding op toekomst ● Heel veel verschillende devices ● Ontwikkelingen gaan heel snel door ● Opvulling tussen kleinste en desktop
  30. 30. Nu wat techniek Viewport, Media Queries
  31. 31. Viewport Veel complexer dan je denkt!
  32. 32. 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
  33. 33. 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
  34. 34. Device viewport beinvloeden ● Device width leest actuele de schermbreedte uit ● device-width != device viewport ● device viewport instellen: <meta name="viewport" content=" width=device-width">
  35. 35. Kortom Hou controle over de viewport door hem altijd op device-width in te stellen!
  36. 36. Media queries browser support, resoluties, voorbeelden
  37. 37. 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
  38. 38. Apparaten en resoluties
  39. 39. Media query @media screen and (min-width: 600px) and (max- width: 900px) and (orientation: landscape) {}
  40. 40. Media types @media screen and (min-width: 600px) and (max- width: 900px) and (orientation: landscape) {}
  41. 41. Selectors @media screen and (min-width: 600px) and (max- width: 900px) and (orientation: landscape) {}
  42. 42. Media query: Small screen @media screen and (max-width: 640px) {}
  43. 43. Media query: Medium screen @media screen and (min-width: 641px) and (max-width: 1024px) {}
  44. 44. Media query: Large screen @media screen and (min-width: 1025px) and (max-width: 1440px) {}
  45. 45. Media query: XLarge screen @media screen and (min-width: 1441px) {}
  46. 46. Pro tip! Media query’s worden ondersteund in een iframe. Een iframe kan dus ook responsive inhoud tonen!
  47. 47. RWD in de praktijk nauw samenwerken
  48. 48. 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
  49. 49. ZURB Foundation ● 12 kolommen standaard (instelbaar) ● 30px gutter standaard (instelbaar)
  50. 50. Rijen en kolommen
  51. 51. Rijen en kolommen (mobiel) ● Het aantal kolommen blijft gelijk! ● Standaard volledige breedte . small-12 ● Zes kolommen . small-6
  52. 52. Rijen en kolommen (tablet) ● Het aantal kolommen blijft gelijk! ● Zes kolommen: . medium-6
  53. 53. 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
  54. 54. 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
  55. 55. Einde verhaal Vragen?
  56. 56. After party SASS, Responsive Video, Polyfills

×