Responsive Design 2014 / Morgenbooster

PROFORM PERFORMANCE 1450 TREADMILL
23. APRIL 2014MORGENBOOSTER

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

1508.DK – ON THE MOVE

TILBAGE TIL FORTIDEN - ANNO 1993

30. APRIL 1993

11. NOVEMBER 1993

WEBDESIGN ANNO 1999

IWATCH

ALDRIG FØR HAR SÅ MANGE MENNESKER SURFET PÅ
NETTET PÅ SÅ MANGE FORSKELLIGE ENHEDER, OG
MED SÅ MANGE FORSKELLIGE OPLØSNINGER.
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
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
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
Mobile
55%
Desktop
45%
Time spent
COMSCORE, OKTOBER 2013

3 MÅNEDER PÅ 1508.DK
3 måneder på 1508.dk
68 FORSKELLIGE MOBILE ENHEDER

3 MÅNEDER PÅ 1508.DK
3 måneder på 1508.dk
Ca.. 4500 Browserstørrelser

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

SCHUH.EU
TAMMYEVERTS - HOW SLOW PAGES HURT THE ENTIRE USER EXPERIENCE
HTTP://WWW.WEBPERFORMANCETODAY.COM/2014/04/03/SLOW-PAGES-HURT-ENTIRE-USER-EXPERIENCE-SLIDES/

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

ALT DET VI IKKE VED - HVEM DE ER

ALT DET VI IKKE VED – HVAD DE LAVER

ALT DET VI IKKE VED – HVORDAN DE MØDER OS
TAK TIL BRAD FROST

HVOR, HVORNÅR OG HVORDAN
80% bruger mobil ved
diverse nedetid ...
76% bruger mobil mens de venter i kø
eller på en aftale ...

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

62% bruger mobil
mens de ser tv
69% bruger mobil på
salgsstedet mens de shopper

DEVICE CONTEXT VS.USER INTENT
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

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

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

RESPONSIVE DESIGN 101
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
HTML 5
CSS 3
JAVASCRIPT

NYE SKÆRMSTØRRELSER = NYE INPUT-STØRRELSER
22. OKTOBER 2013ARKITEKTSKOLEN AARHUS: PRÆSENTATION

NYE INTERAKTIONER

DEN NYE NAVIGATION

BUILD TO LAST
I LIKE AN ESCALATOR BECAUSE AN ESCALATOR
CAN NEVER BREAK, IT CAN ONLY BECOM STAIRS.
-MITCH HEDBERG

“ADAPTIVEWEBDESIGNISABOUTCREATINGINTERFACESTHATADAPTTO
THEUSER’SCAPABILITIES(INTERMSOFBOTHFORMANDFUNCTION).
TOME,ADAPTIVEWEBDESIGNISJUSTANOTHERTERMFORPROGRESSIVE
ENHANCEMENT…”
RESPONSIVE WEBDESIGN ER ET SUB-SET ADAPTIVE WEBDESIGN
ADAPTIVE WEB DESIGN
RESPONSIVE
Aaron Gustafson, Adaptive Web Design

ADAPTIVE WEB DESIGN
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

MOBILE FIRST = CONTENT FIRST
FROM SITE TO SERVICE (SITE)
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

FRAGMENTINGOURCONTENTACROSSDIFFERENT“DEVICE-
OPTIMIZED”EXPERIENCESISALOSINGPROPOSITION,ORAT
LEASTANUNSUSTAINABLEONE.
—ETHANMARCOTTERESPONSIVEWEBDESIGN

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

THE INTERNET OF THINGS

PEOPLE'S CAPACITY FOR
BULLSHIT IS RAPIDLY
DIMINISHING
BRAD FROST - For a Future-Friendly Web (Mobilism 2012)

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

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
VI ØNSKER ALLE ENKELHED
MEN VI BLIVER FRISTET AF
KOMPLEKSITET
23. APRIL 2014

HVAD ER ENKELT?

LOGARITHMIC SPIRAL – THE GOLDEN RECTANGLE

HVORDAN DET ER BYGGET

HVORDAN DET SER UD

HVORDAN DET BRUGES

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

MOBILE FIRST DESIGN!

I'M JUST GOING TO COME OUT AND SAY WHAT SOME
OF US HAVE BEEN THINKING ABOUT RESPONSIVE
DESIGN.
IT BREEDS BORING.
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

DESIGN I BROWSEREN IKKE PÅ LÆRRED
• Photoshop-filen ≠ Browser-renderingen
• Flade filer er ikke interaktive
• Generelt mindre tværfaglighed
• Dyrt og endegyldigt
• Svært at forventningsafstemme

THE COMP IS DEAD!
“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
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
Mark Boulton, on responsive workflow

PROCESSEN – V. 0

PROCESSEN – V. 1.0

PROCESSEN – V. 2.0
STRATEGIINDSIGT KONCEPT
DIGITAL
DESIGN
HTML
MOCKUP
SKETCH
WIREFRAME
INTERFACE
DESIGN
PROTOTYPETEST
BASERETPÅ Pon Kattera Senior Interaction Designer
LIVE
PROTOTYPE
INDHOLD

LEAN UX

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

RESPOSNIVE DESIGN IS
NOT A PANACEA
RATHER A GREAT STEP
IN THE RIGHT
DIRECTION
BRAD FROST

NÆSTE MORGENBOOSTER:
DIGITAL STRATEGI: EKSEKVER,
EKSEKVER, EKSEKVER.
DATO: 14. MAJ 2014

Responsive Design 2014 / Morgenbooster

More Related Content

More from 1508 A/S (20)

Recently uploaded (20)

Responsive Design 2014 / Morgenbooster