10. Een manier van website-bouw die er op
gericht is om de website optimaal te tonen
op een grote verscheidenheid aan
schermen.
Responsive design
11. Voorbeeld. Drie keer dezelfde
website met dezelfde informatie
maar 3x anders ge-layout.
12.
13. Hoe werkt het?
Op basis van ‘device capabilities’: schermresolutie van je
device
Breakpoints: de breedtes waarop het design verandert
Fixed vs. Fluid grid
14. Voorbeeld van fixed grid: kolommen hebben een vaste breedte. Bij een kleiner scherm worden het er alleen minder.
15. Voorbeeld van fluid grid: kolommenworden zelf ook breder als dit kan. Hierdoor vul je altijd het gehele scherm.
16. Meer in detail: afbeeldingen
Vergroten/verkleinen
Afknippen
Schuiven of slideshow
Een goede front-end designer past
diverse technieken toe om een zo
goed mogelijk resultaat te krijgen.
17. Waar je rekening mee moet
houden
Ontwerp voor voorkomende schermformaten
Ontwerp voor touchscreen. Let op: geen mouse-over.
Ontwerp voor retina-schermen (dubbele
schermresolutie)
Gebruikerswensen kunnen verschillen per device
18. Adaptive design
Adaptive design heeft altijd een fixed grid.
Als de website zich aanpast aan device mogelijkheden is het
‘adaptive’.
Adaptive design is het weglaten van informatie op kleinere
schermen.
Bij adaptive design bepaalt de server ipv de browser hoe de
opmaak is.
Adaptive design is een
term die je ook veel hoort.
Hier is echter geen een-
duidige definitie van.
Hiernaast staan een paar
gangbare definities.
Wij bij Oberon gebruiken
hierom alleen de term
‘responsive design’.
20. Voordelen van een aparte mobiele
website
Goedkoper om te maken
Makkelijk naast bestaande website
Meer gespecialiseerd
21. Mooi voorbeeld: m.schiphol.nl.
Deze website toont op een mobiel
apparaat direct de informatie de
je waarschijnlijk het liefst wilt
weten namelijk: vluchttijden.
22. Voordelen van een responsive
website
Flexibele oplossing
Beter voor search engines
Beter te delen
Goedkoper in onderhoud (één CMS)
Altijd een perfecte fit
Beter om te delen: iedere pagina
heeft maar één url. Die kan je
delen in nieuwsbrieven of op
social media.
Als je een aparte mobiele website
hebt, is het niet duidelijk of je nou
de link naar de grote site moet
delen of die naar de mobiele site.
Je weet tenslotte niet met welk
device je bezoeker de link gaat
openen.
23. Wat zegt Google?
“Google recommends webmasters follow the industry
best practice of using responsive web design, namely
serving the same HTML for all devices and using only CSS
media queries to decide the rendering on each device”
Oftewel: Google zegt dat je moet
doen wat het beste is en het
mooiste is voor je bezoekers. In dit
geval is dat: één website.
Is ook logisch. Met één website
verdeel je je ‘Google juice’ niet
over twee delen.
25. 30% meer organisch bezoek
Pagina’s laden 20% sneller
Mobiel verkeer van 21% naar 34% van het totaal
Dit alles binnen één maand na launch
Behaalde resultaten
We hebben hierbij puur de
voorkant van de website
aangepast. Het CMS en de
content zijn hetzelfde gebleven.
27. Hoe verhoudt dit zich
tot apps?
05
Veel oranisaties investeren liever in een app dan in een mobiele
of responsive website. Daar kunnen heel goede redenen voor
zijn.
28. Android en iOS
Even een slide
tussendoor.
Marktaandelen van het
web-bezoek van de
diverse mobiele
platformen in Nederland
het afgelopen jaar.
Android en iOS
domineren de markt.
