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
16. Tablet
● touch!
● vooral thuisgebruik
● groter scherm
● tablet heeft
gemiddeld meer
dan 1 gebruiker
● snel iets opzoeken
● maar ook relax
surfen
● printen is lastig
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
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
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
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
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