responsive webdesign

Responsive webdesignDenver SessinkDTC Media

Inhoud

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

Let’s go!

Smartphone evolutieWat Steve Jobs ons aandeed

Smartphone evolutie

Steve Jobs changed the world

Steve Jobs changed the world twice

Evolutie van internet

Use casessmartphone | tablet | laptop | desktop

Smartphone

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

Smartphone Surfin’

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

Tablet

Tablet

● touch!● vooral thuisgebruik● groter scherm● tablet heeft

gemiddeld meer dan 1 gebruiker

● snel iets opzoeken● maar ook relax

surfen● printen is lastig

Tablet Surfin’

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

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● Contactinformatie opzoeken● Bedrijfshistorie lezen● Inruilwaarde berekenen & offerte aanvragen

Mobile firstnadenken 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● Wel in je achterhoofd houden

Mobile web-techniquesadaptive, 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 techniekViewport, Media Queries

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

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

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

Einde verhaalVragen?

After partySASS, Responsive Video, Polyfills