Responsive Design 2014 / Morgenbooster

Post on 01-Nov-2014

810 views 2 download

Tags:

description

2013 var året hvor Responsive web design for alvor slog i igennem på alverdens platforme. På denne Morgenbooster fortalte vi om vores kunders erfaringer med responsive designog forsøgte samtidig at give et bud på, hvor responsive design er på vej hen i 2014.

transcript

23. APRIL 2014 MORGENBOOSTER

23. APRIL 2014 MORGENBOOSTER

23. APRIL 2014 MORGENBOOSTER

PROFORM PERFORMANCE 1450 TREADMILL

23. APRIL 2014 MORGENBOOSTER

10" FULL-COLOR TOUCHSCREEN

DELUXE EXPERIENCE

NOW YOU CAN GET ONLINE WHILE YOU WORK OUT. CONNECT TO YOUR HOME'S WIRELESS NETWORK TO CHECK THE NEWS, READ EMAIL, WATCH SPORTS HIGHLIGHTS, SOCIALIZE ON FACEBOOK, AND MORE WITH THIS 10-INCH TOUCH SCREEN WITH BROWSER POWERED BY ANDROID™.

23. APRIL 2014 MORGENBOOSTER

1508.DK – ON THE MOVE

23. APRIL 2014 MORGENBOOSTER

TILBAGE TIL FORTIDEN - ANNO 1993

23. APRIL 2014 MORGENBOOSTER

23. APRIL 2014 MORGENBOOSTER

30. APRIL 1993

11. NOVEMBER 1993

23. APRIL 2014 MORGENBOOSTER

23. APRIL 2014 MORGENBOOSTER

WEBDESIGN ANNO 1999

23. APRIL 2014 MORGENBOOSTER

23. APRIL 2014 MORGENBOOSTER

23. APRIL 2014 MORGENBOOSTER

23. APRIL 2014 MORGENBOOSTER

23. APRIL 2014 MORGENBOOSTER

23. APRIL 2014 MORGENBOOSTER

23. APRIL 2014 MORGENBOOSTER

IWATCH

23. APRIL 2014 MORGENBOOSTER

ALDRIG FØR HAR SÅ MANGE MENNESKER SURFET PÅ NETTET PÅ SÅ MANGE FORSKELLIGE ENHEDER, OG MED SÅ MANGE FORSKELLIGE OPLØSNINGER.

23. APRIL 2014 MORGENBOOSTER

Disruption will only accelerate. The quantity and diversity of connected

devices—many of which we haven’t imagined yet—will explode, as will the

quantity and diversity of the people around the world who use them.

FUTURE FRIENDLY

http://futurefriend.ly/

MOBILE VS. DESKTOP BROWSING

23. APRIL 2014 MORGENBOOSTER

I 2014 VIL ADGANG TIL INTERNETTET VIA MOBILE ENHEDER OVERGÅ DESKTOP-ADGANG

http://tag.microsoft.com/community/blog/t/the_growth_of_mobile_marketing_and_tagging.aspx

MOBILENHEDER SOM PRIMÆR INTERNETADGANGSPUNKT

23. APRIL 2014 MORGENBOOSTER

D: 42%

UK: 42% USA: 67%

F: 40%

Q4: HOW DO YOU TYPICALLY GO ONLINE TO SURF THE WEB?

HTTP://ONDEVICERESEARCH.COM/BLOG/POST-PC-ERA-IN-THE-US-#STHASH.OASIRZ7D.DPBS

55% AF AL TID BRUGT PÅ DETAILHANDELSSTEDER FOREGÅR PÅ EN MOBIL ENHED

23. APRIL 2014 MORGENBOOSTER

Mobile

55%

Desktop

45%

Time spent

COMSCORE, OKTOBER 2013

3 MÅNEDER PÅ 1508.DK

3 måneder på 1508.dk

23. APRIL 2014 MORGENBOOSTER

68 FORSKELLIGE MOBILE ENHEDER

3 MÅNEDER PÅ 1508.DK

3 måneder på 1508.dk

23. APRIL 2014 MORGENBOOSTER

Ca.. 4500 Browserstørrelser

23. APRIL 2014 MORGENBOOSTER

ZOOM LEVEL X 3

FONT-SIZE X 3

ORIENTATION X 2

SIZE = 30

90% AF WEB-BRUGERE, DER BÅDE HAR MOBIL- OG STATIONÆR-ADGANG, SKIFTER MELLEM ENHEDER

23. APRIL 2014 MORGENBOOSTER

DET ER IKKE LÆNGERE ET SPØRGSMÅL OM, HVORVIDT BRUGEREN VIL FÅ VIST WEBSTEDET I EN TILSTAND ELLER EN ANDEN. BRUGEREN VIL SANDSYNLIGVIS BESØGE WEBSTEDET I FLERE TILSTANDE PÅ FORSKELLIGE ENHEDER.

http://ssl.gstatic.com/think/docs/multi-screen-world-infographic_infographics.pdf

YOU SNOOZE YOU LOSE

23. APRIL 2014 MORGENBOOSTER

SCHUH.EU

23. APRIL 2014 MORGENBOOSTER

TAMMY EVERTS - HOW SLOW PAGES HURT THE ENTIRE USER EXPERIENCE

HTTP://WWW.WEBPERFORMANCETODAY.COM/2014/04/03/SLOW-PAGES-HURT-ENTIRE-USER-EXPERIENCE-SLIDES/

23. APRIL 2014 MORGENBOOSTER

TAMMY EVERTS - HOW SLOW PAGES HURT THE ENTIRE USER EXPERIENCE

HTTP://WWW.WEBPERFORMANCETODAY.COM/2014/04/03/SLOW-PAGES-HURT-ENTIRE-USER-EXPERIENCE-SLIDES/

ALDRIG FØR ER SÅ MEGET DATA INDSAMLET OM VORES BRUGERE, MEN VI VED STADIG IKKE RET MEGET OM DEM, FØR DET ER FOR SENT

23. APRIL 2014 MORGENBOOSTER

23. APRIL 2014 MORGENBOOSTER

ALT DET VI IKKE VED - HVEM DE ER

23. APRIL 2014 MORGENBOOSTER

ALT DET VI IKKE VED – HVAD DE LAVER

23. APRIL 2014 MORGENBOOSTER

ALT DET VI IKKE VED – HVORDAN DE MØDER OS

TAK TIL BRAD FROST

HVOR, HVORNÅR OG HVORDAN

23. APRIL 2014 MORGENBOOSTER

80% bruger mobil ved

diverse nedetid ...

76% bruger mobil mens de venter i kø

eller på en aftale ...

23. APRIL 2014 MORGENBOOSTER

HTTPS://TWITTER.COM/TOMCOATES/STATUS/51734242991947778

Just been picked up at the airport by a limo

driver who looked me up on the Internet so

he'd recognize me and have stuff to talk

about!!!

23. APRIL 2014 MORGENBOOSTER

62% bruger mobil

mens de ser tv

69% bruger mobil på

salgsstedet mens de shopper

DEVICE CONTEXT VS.USER INTENT

23. APRIL 2014 MORGENBOOSTER

MOBILE ISN'T JUST 'MOBILE'. IT'S ALSO THE COUCH, THE KITCHEN, THE THREE-HOUR LAYOVER, ALL

PLACES WHERE WE HAVE TIME AND ATTENTION TO SPARE. 42 PER CENT OF MOBILE USERS SAY

THEY USE IT FOR ENTERTAINMENT WHEN THEY'RE BORED. THOSE AREN'T 10-SECOND SESSIONS.

THAT MEANS WE SHOULDN'T DESIGN ONLY FOR STUNTED SESSIONS OR LIMITED USE CASES.

JOSH CLARK: WHY JAKOB NIELSEN IS WRONG ON MOBILE

http://www.creativebloq.com/josh-clark-why-jakob-nielsen-wrong-mobile-4124168

23. APRIL 2014 MORGENBOOSTER

CONTEXT SPECIFIC BROWSING

MANGE AF DE FORDOMME, VI HAVDE OM

KONTEKST SPECIFIK BROWSING HOLDER IKKE.

38 million Americans 'shop online on the toilet

82% of smartphone users check and send email with their device.

Google – “The Mobile Movement” (April 2011)

I’m definitely moving, I’m definitely in a car. I’m

going to look at your website. This doesn’t

mean my intent is to find an address, or quickly

use a news site...

CASE: HUSET MARKEDSFØRING

23. APRIL 2014 MORGENBOOSTER

23. APRIL 2014 MORGENBOOSTER

CASE: HUSET MARKEDSFØRING

CASE: HUSET MARKEDSFØRING

23. APRIL 2014 MORGENBOOSTER

RESPONSIVE DESIGN ER IKKE LÆNGERE EN MULIGHED, SOM VI KAN VÆLGE AT IGNORERE

23. APRIL 2014 MORGENBOOSTER

RESPONSIVE DESIGN 101

23. APRIL 2014 MORGENBOOSTER

25. MAJ 2010 – A LIST APART

1. A flexible, grid based layout

2. Flexible images and media, and

3. Media Queries

Ethan Marcotte, Responsive Web Design

TOOLS OF THE TRADE

23. APRIL 2014 MORGENBOOSTER

HTML 5

CSS 3

JAVASCRIPT

23. APRIL 2014 MORGENBOOSTER

23. APRIL 2014 MORGENBOOSTER

NYE SKÆRMSTØRRELSER = NYE INPUT-STØRRELSER

22. OKTOBER 2013 ARKITEKTSKOLEN AARHUS: PRÆSENTATION

NYE INTERAKTIONER

22. OKTOBER 2013 ARKITEKTSKOLEN AARHUS: PRÆSENTATION

DEN NYE NAVIGATION

22. OKTOBER 2013 ARKITEKTSKOLEN AARHUS: PRÆSENTATION

23. APRIL 2014 MORGENBOOSTER

BUILD TO LAST

23. APRIL 2014 MORGENBOOSTER

I LIKE AN ESCALATOR BECAUSE AN ESCALATOR

CAN NEVER BREAK, IT CAN ONLY BECOM STAIRS.

-MITCH HEDBERG

“ADAPTIVE WEB DESIGN IS ABOUT CREATING INTERFACES THAT ADAPT TO

THE USER’S CAPABILITIES (IN TERMS OF BOTH FORM AND FUNCTION).

TO ME, ADAPTIVE WEB DESIGN IS JUST ANOTHER TERM FOR PROGRESSIVE

ENHANCEMENT…”

RESPONSIVE WEBDESIGN ER ET SUB-SET ADAPTIVE WEBDESIGN

23. APRIL 2014 MORGENBOOSTER

ADAPTIVE WEB DESIGN

RESPONSIVE

Aaron Gustafson, Adaptive Web Design

ADAPTIVE WEB DESIGN

23. APRIL 2014 MORGENBOOSTER

FEATURE DETECTION

DEVICE APIS

PERFORMANCE

CONDITIONAL LOADING

CONTENT STRATEGY

HTML5

TOUCH

ERGONOMICS

RWD

RESPONSIVE WEBDESIGN ER MEGET MERE END TEKNIK

ET ÅR EFTER VERSION 1.0

23. APRIL 2014 MORGENBOOSTER

MOBILE FIRST = CONTENT FIRST

FROM SITE TO SERVICE (SITE)

23. APRIL 2014 MORGENBOOSTER

http://www.flickr.com/photos/teromakotero/8705861207

RESPONSIVE WEB DESIGN HANDLER IKKE OM AT LAVE SMARTERE BEHOLDERE, MEN OM AT LAVE SMARTERE INDHOLD TIL BEHOLDERNE

INDHOLD I FOKUS

23. APRIL 2014 MORGENBOOSTER

FRAGMENTING OUR CONTENT ACROSS DIFFERENT “DEVICE-

OPTIMIZED” EXPERIENCES IS A LOSING PROPOSITION, OR AT

LEAST AN UNSUSTAINABLE ONE.

—ETHAN MARCOTTE RESPONSIVE WEB DESIGN

23. APRIL 2014 MORGENBOOSTER

23. APRIL 2014 MORGENBOOSTER

The device landscape is constantly

changing. Capabilities are constantly

changing. Properly structured content is

portable to future platforms.

Stephen Hay

COPE: CREATE ONCE PUBLISH EVERYWHERE

23. APRIL 2014 MORGENBOOSTER

23. APRIL 2014 MORGENBOOSTER

THE INTERNET OF THINGS

23. APRIL 2014 MORGENBOOSTER

PEOPLE'S CAPACITY FOR BULLSHIT IS RAPIDLY DIMINISHING

23. APRIL 2014 MORGENBOOSTER

BRAD FROST - For a Future-Friendly Web (Mobilism 2012)

CONTENT STRATEGY

23. APRIL 2014 MORGENBOOSTER

Kristina Halvorson, Content Strategy for the Web

“Generally speaking, your web content is useless

unless it does one or both of the following:

- Supports a key business objective

- Supports a user (or customer) in completing a task”

SIMPLICITY IS THE KEY TO A BETTER LIFE

“ESSENTIALLY WHAT IS THE MESSAGE

THAT NEEDS TO BE COMMUNICATED

IF I WAS ONLY ABLE TO PROVIDE

THE USER WITH UNSTYLED HTML?”

— BRYAN RIEGER

23. APRIL 2014 MORGENBOOSTER

HVOR OFTE ØNSKER DU AT DIT LIV VAR MERE KOMPLEKST?

MORGENBOOSTER 23. APRIL 2014

HVORNÅR BAD DU SIDST OM EN MERE KOMPLEKS BRUGERGRÆNSEFLADE?

MORGENBOOSTER 23. APRIL 2014

MORGENBOOSTER

VI ØNSKER ALLE ENKELHED

MEN VI BLIVER FRISTET AF

KOMPLEKSITET

23. APRIL 2014

HVAD ER ENKELT?

MORGENBOOSTER 23. APRIL 2014

LOGARITHMIC SPIRAL – THE GOLDEN RECTANGLE

MORGENBOOSTER 23. APRIL 2014

HVORDAN DET ER BYGGET

MORGENBOOSTER 23. APRIL 2014

HVORDAN DET SER UD

MORGENBOOSTER 23. APRIL 2014

HVORDAN DET BRUGES

MORGENBOOSTER 23. APRIL 2014

ENKELTHED ER OPLEVELSE

MORGENBOOSTER

STÆRK

SVAG

HVORDAN DET FØLES AT BRUGER DET

HVORDAN DET ER BYGGET

HVORDAN DET SER UD

23. APRIL 2014

DKS: RESPONSIVE AND BEYOND

Expert

Fokus på detaljer

Perfektion

Præcis styring

Principper

Tag det fra hinanden

Detaljeret mental model

Invester tid i at lære

Mainstreamer

Fokus på mål

Afslutning?

Nem kontrol

Eksempler, fortællinger?

Bange for at ødelægge

Løs mental model

Hvad betyder SLDM?

OCTOBER 3RD 2013

CONTENT AND FORM ARE LOVERS, THEIR LOVE-CHILD IS DESIGN

23. APRIL 2014 MORGENBOOSTER

MOBILE FIRST DESIGN!

23. APRIL 2014 MORGENBOOSTER

I'M JUST GOING TO COME OUT AND SAY WHAT SOME OF US HAVE BEEN THINKING ABOUT RESPONSIVE DESIGN. IT BREEDS BORING.

23. APRIL 2014 MORGENBOOSTER

Jonathan Longnecker

http://www.netmagazine.com/opinions/responsive-web-design-boring

GENERALLY SPEAKING, A COMP IS A COMPREHENSIVE, HIGH FIDELITY, PHOTOSHOPPED LAYOUT OF A WEBSITE—OR RATHER, WHAT APPEARS TO BE A WEBSITE.

BUILDING A BETTER USER EXPERIENCE BY DESIGNING IN THE BROWSER

23. APRIL 2014 MORGENBOOSTER

DESIGN I BROWSEREN IKKE PÅ LÆRRED

22. OKTOBER 2013 ARKITEKTSKOLEN AARHUS: PRÆSENTATION

• Photoshop-filen ≠ Browser-renderingen

• Flade filer er ikke interaktive

• Generelt mindre tværfaglighed

• Dyrt og endegyldigt

• Svært at forventningsafstemme

THE COMP IS DEAD!

23. APRIL 2014 MORGENBOOSTER

“I don’t think we’re in post-PSD era,

but I do think we’re movin towards

post-‘full-comp’ era.”

DAN MALL - RESPONSIVE DESIGN IS HARD/EASY! BE AFRAID/DON'T WORRY!

LONG LIVE THE STYLETIL.ES

23. APRIL 2014 MORGENBOOSTER

Style Tiles are a design deliverable consisting of fonts,

colors and interface elements that communicate the

essence of a visual brand for the web.

MORGENBOOSTER

No matter how cool

your user interface...

...it would be better if there

were less of it

Alan Cooper Father of Visual Basic,

23. APRIL 2014

“RWD COMES UNDER CRITICISM FOR NOT BEING COMMERCIALLY VIABLE. IT’S BECAUSE IT’S TRYING TO BE SHOE-HORNED INTO AN EXISTING, FIXED-CANVAS, INFLEXIBLE PROCESS.”

DEN PERFEKTE PROCES

23. APRIL 2014 MORGENBOOSTER

Mark Boulton, on responsive workflow

PROCESSEN – V. 0

23. APRIL 2014 MORGENBOOSTER

23. APRIL 2014 MORGENBOOSTER

PROCESSEN – V. 1.0

23. APRIL 2014 MORGENBOOSTER

PROCESSEN – V. 1.0

23. APRIL 2014 MORGENBOOSTER

PROCESSEN – V. 1.0

23. APRIL 2014 MORGENBOOSTER

23. APRIL 2014 MORGENBOOSTER

PROCESSEN – V. 2.0

STRATEGI INDSIGT KONCEPT

DIGITAL DESIGN

HTML

MOCKUP

SKETCH

WIREFRAME

INTERFACE

DESIGN

PROTOTYPE TEST

BASERET PÅ Pon Kattera Senior Interaction Designer

LIVE

PROTOTYPE

INDHOLD

LEAN UX

23. APRIL 2014 MORGENBOOSTER

LEAN UX

23. APRIL 2014 MORGENBOOSTER

LEAN UX

23. APRIL 2014 MORGENBOOSTER

DESPITE RESPONSIVE DESIGN ALREADY HAVING BEEN AROUND MORE THAN TWO YEARS, IT’S STILL IN MANY WAYS A FLEDGLING METHODOLOGY. DESIGNERS ARE FACED WITH AN EVER-CHANGING LANDSCAPE OF DEVICES, CODE FRAMEWORKS AND SCRIPTS – AND, OF COURSE, THE NEED TO WORK IN A NEW WAY WITH CLIENTS TO MANAGE THE PROCESS OF CREATING RESPONSIVE WEBSITES.

RESPONSIVE WEBDESIGN – UDFORDRINGER OG LØSNINGER

23. APRIL 2014 MORGENBOOSTER

James Young –

http://www.netmagazine.com/features/top-responsive-web-design-problems-and-how-avoid-them

DE MEST ALMINDELIGE PROBLEMER MED RESPONSIVE WEBDESIGN

1. EXPLAINING RWD TO CLIENTS

2. THE LACK OF A STATIC DESIGN PHASE

3. NAVIGATION

4. IMAGES

5. TABLES

6. CONVERTING OLD FIXED-WIDTH SITES

7. WHAT TO SERVE USERS OF OLD VERSIONS OF IE

8. TESTING TIME AND COST

23. APRIL 2014 MORGENBOOSTER

RESPOSNIVE DESIGN IS NOT A PANACEA

RATHER A GREAT STEP IN THE RIGHT DIRECTION

23. APRIL 2014 MORGENBOOSTER

BRAD FROST

NÆSTE MORGENBOOSTER:

DIGITAL STRATEGI: EKSEKVER,

EKSEKVER, EKSEKVER.

DATO: 14. MAJ 2014

23. APRIL 2014 MORGENBOOSTER

Blank slide

TAK

@PSOLOW

1508.DK