responsive webdesign

59
Responsive webdesign Denver Sessink DTC Media

Upload: denver-sessink

Post on 30-Jun-2015

206 views

Category:

Internet


0 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Responsive webdesign

Responsive webdesignDenver SessinkDTC Media

Page 2: Responsive webdesign

Inhoud

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

Page 3: Responsive webdesign

Let’s go!

Page 4: Responsive webdesign

Smartphone evolutieWat Steve Jobs ons aandeed

Page 5: Responsive webdesign

Smartphone evolutie

Page 6: Responsive webdesign

Steve Jobs changed the world

Page 7: Responsive webdesign

Steve Jobs changed the world twice

Page 8: Responsive webdesign
Page 9: Responsive webdesign
Page 11: Responsive webdesign

Use casessmartphone | tablet | laptop | desktop

Page 12: Responsive webdesign

Smartphone

Page 13: Responsive webdesign

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

Page 14: Responsive webdesign

Smartphone Surfin’

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

Page 15: Responsive webdesign

Tablet

Page 16: Responsive webdesign

Tablet

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

gemiddeld meer dan 1 gebruiker

● snel iets opzoeken● maar ook relax

surfen● printen is lastig

Page 17: Responsive webdesign

Tablet Surfin’

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

Page 18: Responsive webdesign

Desktop

Page 19: Responsive webdesign

Desktop

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

Page 20: Responsive webdesign

Desktop Surfin’

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

Page 21: Responsive webdesign

Mobile firstnadenken over de essentie

Page 22: Responsive webdesign

Begin klein

Page 23: Responsive webdesign

Use cases

● Niet alleen de homepage● Contactinformatie● Werkplaatsafspraak maken● Occasions zoeken● Occasion bekijken● …

Page 24: Responsive webdesign

Mobile first in de praktijk

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

Page 25: Responsive webdesign

Mobile web-techniquesadaptive, mobiele website, responsive

Page 26: Responsive webdesign

Mobiele website

● m.domein.nl of domein.nl/m● Volledig eigen content● Design toegespitst op use case● SEO lastig● Extra site om te onderhouden

Page 27: Responsive webdesign

Adaptive webdesign

adaptief [adɑp'tif] aangepast voor een bepaalde omstandigheid

Page 28: Responsive webdesign

Adaptive webdesign

● Specifiek device (bijv. alleen smartphone)● Niet flexibel● Sneller te ontwikkelen

Page 29: Responsive webdesign

Responsive Web Design RWD

responsief [rɛspɔn'sif] wat een antwoord bevat / responsieve communicatie (

Page 30: Responsive webdesign

Responsive webdesign

● [reactief] communicatie waarbij je ingaat op iets dat je gesprekspartner net gezegd heeft

● Alle devices● Flexibel● Veel ontwikkeldtijd

Page 31: Responsive webdesign

Waarom responsive?

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

Page 32: Responsive webdesign

Nu wat techniekViewport, Media Queries

Page 33: Responsive webdesign

ViewportVeel complexer dan je denkt!

Page 34: Responsive webdesign

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

Page 35: Responsive webdesign

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

Page 36: Responsive webdesign

Device viewport beinvloeden

● Device width leest actuele de schermbreedte uit

● device-width != device viewport● device viewport instellen:

<meta name="viewport" content="width=device-width">

Page 37: Responsive webdesign

Kortom

Hou controle over de viewport door hem altijd op device-width in te stellen!

Page 38: Responsive webdesign

Media queriesbrowser support, resoluties, voorbeelden

Page 39: Responsive webdesign

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

Page 40: Responsive webdesign

Apparaten en resoluties

Page 41: Responsive webdesign

Media query

@media

screen and

(min-width: 600px) and (max-width: 900px) and (orientation:landscape) {}

Page 42: Responsive webdesign

Media types

@media

screen and

(min-width: 600px) and (max-width: 900px) and (orientation:landscape) {}

Page 43: Responsive webdesign

Selectors

@media

screen and

(min-width: 600px) and (max-width: 900px) and (orientation:landscape) {}

Page 44: Responsive webdesign

Media query: Small screen

@media

screen and

(max-width: 640px) {}

Page 45: Responsive webdesign

Media query: Medium screen

@media

screen and

(min-width: 641px) and

(max-width: 1024px) {}

Page 46: Responsive webdesign

Media query: Large screen

@media

screen and

(min-width: 1025px) and

(max-width: 1440px) {}

Page 47: Responsive webdesign

Media query: XLarge screen

@media

screen and

(min-width: 1441px) {}

Page 48: Responsive webdesign

Pro tip!

Media query’s worden ondersteund in een iframe. Een iframe kan dus ook responsive inhoud tonen!

Page 49: Responsive webdesign

RWD in de praktijknauw samenwerken

Page 50: Responsive webdesign

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

Page 51: Responsive webdesign

ZURB Foundation

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

Page 52: Responsive webdesign

Rijen en kolommen

Page 53: Responsive webdesign

Rijen en kolommen (mobiel)

● Het aantal kolommen blijft gelijk!

● Standaard volledige breedte .small-12

● Zes kolommen .small-6

Page 54: Responsive webdesign

Rijen en kolommen (tablet)

● Het aantal kolommen blijft gelijk!

● Zes kolommen: .medium-6

Page 55: Responsive webdesign

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

Page 56: Responsive webdesign

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

Page 57: Responsive webdesign

Einde verhaalVragen?

Page 58: Responsive webdesign
Page 59: Responsive webdesign

After partySASS, Responsive Video, Polyfills