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