Responsive design: impact & aanpak | CMS Congres 2013

32
Responsive design: impact & aanpak CMS CONGRES 2013 Floor van Riet | Creatief directeur Sabel Online | @floorvanriet | linkedin.com/in/floorvanriet

description

Presentatie "Responsive design: impact & aanpak" op het CMS Congres 2013. Door Floor van Riet, creatief directeur Sabel Online.

Transcript of Responsive design: impact & aanpak | CMS Congres 2013

Page 1: Responsive design: impact & aanpak | CMS Congres 2013

Responsive design: impact & aanpakCMS CONGRES 2013

Floor van Riet | Creatief directeur Sabel Online | @floorvanriet | linkedin.com/in/floorvanriet

Page 2: Responsive design: impact & aanpak | CMS Congres 2013
Page 3: Responsive design: impact & aanpak | CMS Congres 2013

bradfrostweb.com

Page 4: Responsive design: impact & aanpak | CMS Congres 2013

bradfrostweb.com

Page 5: Responsive design: impact & aanpak | CMS Congres 2013

bradfrostweb.com

Page 6: Responsive design: impact & aanpak | CMS Congres 2013
Page 7: Responsive design: impact & aanpak | CMS Congres 2013
Page 8: Responsive design: impact & aanpak | CMS Congres 2013
Page 9: Responsive design: impact & aanpak | CMS Congres 2013

bradfrostweb.com

Page 10: Responsive design: impact & aanpak | CMS Congres 2013

On the go?

Page 11: Responsive design: impact & aanpak | CMS Congres 2013

CONTEXT

SchermresolutieKenmerken apparaat

SnelheidInputmogelijkheden

BehoeftenOmgevingAandachtsniveauVaardigheden

Page 12: Responsive design: impact & aanpak | CMS Congres 2013

Adaptive Responsive

Desktop

Mobile Tablet

Site

Page 13: Responsive design: impact & aanpak | CMS Congres 2013

Media queries

Fluid grids

Flexible images

Page 14: Responsive design: impact & aanpak | CMS Congres 2013

ami.responsivedesign.is

Page 16: Responsive design: impact & aanpak | CMS Congres 2013

bra

dfro

stweb.co

m

Page 17: Responsive design: impact & aanpak | CMS Congres 2013
Page 18: Responsive design: impact & aanpak | CMS Congres 2013
Page 19: Responsive design: impact & aanpak | CMS Congres 2013

Waterval

Page 20: Responsive design: impact & aanpak | CMS Congres 2013

Waterval

Page 21: Responsive design: impact & aanpak | CMS Congres 2013
Page 22: Responsive design: impact & aanpak | CMS Congres 2013
Page 23: Responsive design: impact & aanpak | CMS Congres 2013

Content?

Page 24: Responsive design: impact & aanpak | CMS Congres 2013

Content?

Page 25: Responsive design: impact & aanpak | CMS Congres 2013

Content?

Page 26: Responsive design: impact & aanpak | CMS Congres 2013

Content?

Page 27: Responsive design: impact & aanpak | CMS Congres 2013

Contentchoreografie

Page 28: Responsive design: impact & aanpak | CMS Congres 2013

“We moeten dichter bij de content zelf blijven, een framework creëren om slimme keuzes te maken over de structuur ervan.”— Sara Wachter-Boettcher

Page 29: Responsive design: impact & aanpak | CMS Congres 2013

“De toekomst van adaptieve content is een gestructureerde, flexibele en herbruikbare set platform-onafhankelijke content.”— Karen McGrane

Page 30: Responsive design: impact & aanpak | CMS Congres 2013

Research

Interaction design

Interaction design

Web design

Art direction

Content outlines

Functional specs

Composite design

Content strategy

Web design

Front end dev.

Back end dev.

Content require-ments

Online strategy

IA

Database design

Content creation

Content creation

Strategy

Sprints

Structure

Skeleton

Scope

Gebaseerd op 5 ‘planes’ van Jesse

James Garrett

Page 31: Responsive design: impact & aanpak | CMS Congres 2013

Zo gaat het web werkelijk over content, over betekenis, over boodschap en relaties met echte mensen.

Page 32: Responsive design: impact & aanpak | CMS Congres 2013

CMS CONGRES [email protected]

Floor van Riet | Creatief directeur Sabel Online | @floorvanriet | linkedin.com/in/floorvanriet