Responsive webdesign

Responsive
webdesign
Denver Sessink
DTC Media

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

Smartphone
evolutie
Wat Steve Jobs ons aandeed

Steve Jobs changed the world twice

Use cases
smartphone | tablet | laptop | desktop

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

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

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

Tablet Surfin’
● Nieuws lezen

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

Desktop Surfin’
● Nieuws lezen

Mobile first
nadenken over de essentie

Use cases
● Niet alleen de homepage
● Contactinformatie
● Occasion bekijken
● …

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

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
● Extra site om te onderhouden

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 devices
● Flexibel
● Veel ontwikkeldtijd

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

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 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

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

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

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
Mobile, Android Browser, iOS Safari)
● Zie http://caniuse.com/css-mediaqueries

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

Media types
@media
screen and
landscape) {}

Selectors
@media
screen and
landscape) {}

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

Media query: Medium screen
@media
screen and
(min-width: 641px) and

Media query: Large screen
@media
screen and
(min-width: 1025px) and

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.)
● Twee bekende:
○ Twitter bootstrap
○ ZURB Foundation
● Twitter bootstrap heel gebruiksvriendelijk
● ZURB Foundation meer geavanceerd

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

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

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-for-landscape
● .show-for-portrait
● .show-for-touch

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

After party
SASS, Responsive Video, Polyfills

Responsive webdesign

More Related Content

Similar to Responsive webdesign (20)

Responsive webdesign