Responsivt - Inte bara för mobilen + Webbdagarna Växjö, 04 Dec 2014

Responsivt - inte bara för mobilen
Anna Dahlström | @annadahlstrom
Webbdagarna Växjö, 04 december 2014 #webbdagarna
Image courtesy of Shutterstock

Innan 2007 handlade
det mest om det här
www.flickr.com/photos/activeside/2192411612

Det var när webbläsare
var vårt största huvudbry
www.flickr.com/photos/jorgeq82/4732700819

Idag är det webbläsare
& ett oändligt antal enheter
www.flickr.com/photos/adactio/12674602864

“ For the first time ever
there are more gadgets in the
world than there are people. ”
- Source: Independent
http://www.businessinsider.com/vatican-square-2005-and-2013-2013-3

Android fragmentation, Screenshot from OpenSignal http://opensignal.com/reports/2014/android-fragmentation/

“ We have seen 18,769 distinct devices
download our app in the past few months.
In our report last year we saw 11,868. ”
- Source: Open Signal

www.flickr.com/photos/exlibris/2552107635
!
!
“ A third of all smartphone users in the U.K.—or 11 million adults
—check their phone within five minutes of waking. ”
- Source: WSJ

Var som helst & När som helst

Det är tack vare
de här bovarna
https://www.flickr.com/photos/jfingas/10104822523

https://www.flickr.com/photos/bfishadow/4604166391
“ Just a giant iPhone. ”

2010 Ethan Marcotte, Responsive Web Design

Nu… Device Agnostic Design
(enhetsoberoende design)

“ Today’s popular devices aren’t tomorrow's so
building something which works on any device is better than
building something which works on today’s devices. ”
https://www.flickr.com/photos/jfingas/10104822523
- Combined wise words from @oneextrapixel & @trentwalton
!
!
!
!
!
!

“Any device” Vad innebär det?

“ The site you build is not dependent on
knowing what device it is being displayed on. ”
- Sarita Harbour, WDD

En vidareutveckling av
responsive design
www.flickr.com/photos/adactio/5818096043

FULL WEBSITE
FULL
WEBSITE
FULL
WEBSITE
Responsiva webblösningar har samma url
& är i princip “en webbplats”
http://desktopwallpaper-s.com/19-Computers/-/Future

DESKTOP
FULL WEBSITE
BESPOKE
CUT DOWN
WEBSITE
BESPOKE
CUT DOWN
WEBSITE
Separata mobila webblösningar har en
egen url & innebär olika webbplatser

Tar oss tillbaka
till det här…

Att underhålla separata mobila
webblösningar är kostsamt
www.flickr.com/photos/ericconstantineau/5618576278

Olika kodbaser & tekniska
lösningar ska uppdateras…
www.flickr.com/photos/nikio/3899114449

…för att inte tala om
allt innehåll
www.flickr.com/photos/financialaidpodcast/7598618978

…samt optimering
för sökmotorer
www.flickr.com/photos/financialaidpodcast/7598618978

Realistiskt sett innebär det kompromisser
& frustrerade användare
www.flickr.com/photos/bulldogsrule/187693681

Men… olika innehåll är väl ok, eller?

Det bygger på en myt om
att mobilanvändare beter sig så här

Mobile Search MoMentS
UnderStanding how Mobile driveS converSionS
Mobile search is always on, happening
on the go, at home and at work
of mobile searches
occur at home or
work; 17% on the go 77%
0RELOHVHDUFKHVDUHVWURQJOWLHGWRVSHFLȴFFRQWH[WV
Shopping queries are 2x more likely to be in store
Mobile searches drive valuable
outcomes for businesses
3 of 4 mobile searches
trigger follow-up actions
Actions triggered by mobile search
also happen very quickly
of conversions (store visit,
phone call or purchase)
happening within an hour 55%
On average, each mobile search triggers
nearly 2 follow-up actions
Product shopping searches have a
higher number of outcomes
Number of follow-up actions per mobile search
3.56 2.52 2.08
2.20 2.07
Beauty Auto Travel Food Tech
36%
Continued
Research
18%
Shared Information
17%
Made a Purchase
25%
Visited a Retailer’s
Website
17%
Visited a Store
7%
Called a Business
77% av mobilsökningar
sker i hemmet eller på jobbet
17% av mobilsökningar
sker “on the go”
Source: http://www.thinkwithgoogle.com/infographics/creating-moments-that-matter-infographic.html

“ Det ökande mobil-användandet
slår igenom i ökad
internettid i hemmet och i skolan
eftersom en stor del av
mobilanvändandet sker i hemmet
och skolan via trådlösa nätverk. ”
http://www.soi2014.se/internets-spridning-har-inte-helt-stannat-upp/allt-mer-anvandning-av-mobil-teknik-smarta-telefoner-och-surfplattor/

Många av oss äger
fler än en enhet

73% har en smart mobil
53% har en surfplatta
http://www.soi2014.se/internets-spridning-har-inte-helt-stannat-upp/allt-mer-anvandning-av-mobil-teknik-smarta-telefoner-och-surfplattor/

Vi växlar mellan
dem under dagen
Morgon Pendling Jobb Lunch Möte AW Film

“ 90% of users start a task on one device and then complete it on another. ”
Sequential usage
Morning Commute
Work
- Source: Google
Simultaneous usage
+
Multi-tasking
OR

Sequential usage
Morning Commute
Work
- Source: Google
Simultaneous usage
+
Multi-tasking
+
Extending
OR

Sequential usage
Morning Commute
Work
- Source: Google
Simultaneous usage
+
Multi-tasking
+
Extending
OR
+
Complementing

En dålig upplevelse leder till
samma resultat, oavsett var den sker
www.flickr.com/photos/sixmilliondollardan/2493495506

“ Not having a mobile-friendly site helps your competitors. ”
www.flickr.com/photos/sixmilliondollardan/2493495506
- Google

“ Starting today, to make it
easier for people to find the
information that they’re looking
for, we’re adding a “mobile-friendly”
label to our mobile
search results. ”
- Google, 18 Nov 2014
http://googlewebmastercentral.blogspot.co.uk/2014/11/helping-users-find-mobile-friendly-pages.html

https://www.google.com/
webmasters/tools/mobile-friendly/

Andvändare förväntar en enhetlig
kontinuerlig upplevelse oberoende av enhet
www.flickr.com/photos/joachim_s_mueller/7110473339

Separata mobila webblösningar
ger generellt inte mening
DESKTOP
FULL WEBSITE
BESPOKE
CUT DOWN
WEBSITE
BESPOKE
CUT DOWN
WEBSITE

Huvudinnehållet bör vara det samma, fast
optimera upplevelsen, layouten interaktioner

http://foundation.zurb.com/docs/layout.php
“ Design development
should respond to the user’s
behaviour environment based
on screen size, platform
orientation. [It’s]...a mix of
flexible grids layouts, images
an intelligent use of media
queries. ”
- Smashing Magazine

Responsiv design
bygger på moduler…
www.flickr.com/photos/donsolo/2136923757/

…och att definera hur de ska anpassas
Home - stor
1 Header Nav
2
Hero
3
Category
4 Category
6
Categ
11 Footer
6
Categ
10
Prod
9
Prod
8
Prod
7
Prod
Home - liten
1 Header Nav
2
Hero
3 Category
4
Categ
5
Categ
6
Product
7
Product
8
Product
9
Product
10 Footer

www.flickr.com/photos/theaftershock/2811382400
!
!
!
!
!
“ Content needs to be choreographed
to ensure the intended message is preserved
on any device and at any width “
- Trent Walton

Responsiv design etablerade principen om
samma innehåll oberoende av enhet
www.flickr.com/photos/joachim_s_mueller/7110473339

Men… Sen 2010 har den genomsnittliga
page weighten nästan dubblats
www.flickr.com/photos/stankus/3718835245

“ Smartphones accounted for 57.6% of total sales
in fourth quarter of 2013 ” *
- Source: Gartner
www.flickr.com/photos/aforgrave/6168689222

Internet uppkoppling
är inte alla förunnat
http://gizmodo.com/a-map-of-every-device-in-the-world-thats-connected-to-t-1628171291

Visste du… Internet
sover faktiskt…
http://www.wired.com/2014/10/internet-sleeps-night-really

…och alla uppkopplingar
är inte lika
Screenshot from http://opensignal.com/coverage-maps/UK/

Source: http://www.prnewswire.com/news-releases/strategy-analytics-android-captures-record-85-percent-share-of-global-smartphone-shipments-in-q2-2014-269301171.html

Content layer
rich semantic HTML markup
Presentation layer
CSS styling
Client-side scripting layer
JavaScript eller jQuery

www.thegrid.io
“ To get response times to a
minimum, we’ve had to develop a
system that loads in just the
essential components of the page
at the right times.
Mobile-sized images download first,
then when the page’s Javascript
detects the browser’s capabilities,
higher-resolution images get
‘loaded in dynamically.’ ”
- Andrew Pipe, BBC iWonder

Mobile context mobile use case
likställs ofta, men det är inte det samma
www.flickr.com/photos/icedsoul/2486885051

“ I used to think it merely dealt with basing responsive
breakpoints on content rather than particular devices, but there’s
more to devices than the size of their screens. ”
Image courtesy of Shutterstockwww.flickr.com/photos/jmsmith000/3169546564
- Trent Walton, Device Agnostic

“ A device-agnostic approach also takes
into account infinite combinations of screen resolution, input
method, browser capability, and connection speed. ”
www.flickr.com/photos/lokan/88w4w34w6.f4li8ck5r2.com/photos/jmsmith000/3169546564
- Trent Walton, Device Agnostic

www.flickr.com/photos/66327170@N07/7296381856
!
!
!
!
!
!
‘ New rule: every desktop design has to go finger friendly ’
- Josh Clark

Source images from UX Matters - www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php

www.flickr.com/photos/intelfreepress/6837427202
www.flickr.com/photos/janitors/9968676044
www.flickr.com/photos/johnkarakatsanis/6902407334 www.flickr.com/photos/jorgeq82/4732700819

www.flickr.com/photos/vincentsl/3543888150
“ Designing for touch means designing
for fingers, yes, but to be more specific,
you’re really designing for thumbs. ”
- Josh Clark

Har konsekvenser för funktionalitet, placering interaktion

Mycket träffsäkert vs. Mindre träffsäkert
www.flickr.com/photos/ljrmike/7675757042 www.flickr.com/photos/jmtimages/2883279193

“ Get your content to go
anywhere, because it’s going to
go everywhere. ”
- Brad Frost

“ Your users get to decide
how, when, and where they
want to read your content.
It is your challenge and your
responsibility to deliver a good
experience to them. ”
- Karen McGrane

enhet
webbläsare
skärm
input metod
uppkoppling
Vilken som helst
när som helst
Används var som helst

Hur gör vi för att designa enhetsoberoende?

www.thegrid.io
“ The design adjusts to look
good on every browser and
every device. Automatically.”
- The Grid

Det handlar om innehållet.
Inte vilken enhet vi använder.

“ It is your mission to get
your content out, on whichever
platform, in whichever format
your audience wants to
consume it. ”
- Karen McGrane

Mindre fokus på sidor
istället mer fokus på modulerna som utgör dem
www.flickr.com/photos/boltofblue/4418442567

Rätt likt lego
www.flickr.com/photos/toomuchdew/5243719740

Ju mer vi återanvänder,
desto bättre

Vi ska helst
undvika det här:
www.flickr.com/photos/akrabat/9085299639

Börja med att identificera byggnadsblocken
Views
Home - large Home - small

Views Modules
Feature - large Feature - small

Views Modules
Featured products - large Featured products - small

Featured products - large
Single product - large
Featured products - small
Single product- small
Views Modules

Bygg gradvis upp ditt module library
1
3
4
Featured products - large Featured products - small
Also used for:
• Module REL01 - Related products
Single product - large Single product- small
1
2
3
1
2
1
2
3
4
2
3
1
2
3
1
2
1
1

“ With thousands and
thousands of pages on the
Crayola site, it wasn’t efficient to
wireframe every single page and
state.
We created a system of
components that could be
assembled in different
configurations to accommodate
the unique content needed for
each type of page. ”
- Daniel Mall
Screenshot: www.crayola.co.uk/

Webbläsare Enheter
www.flickr.com/photos/jorgeq82/4732700819 www.flickr.com/photos/adactio/6153481666

Ännu en orsak till varför vi
bör undvika “The big reveal”
www.flickr.com/photos/nataliejohnson/377344806

En anpassning av hur vi redan tar oss an design

Hur…ja, det
beror på…
www.flickr.com/photos/75905404@N00/7126146307

Brand Aim of experience Info or task
High level IA UX deliverables Detailed
Less formal UX deliverables but
more creatively led
UX led with more formal
extensive IA UX deliverables
Extensive Experience in visual design team Limited
Source: Mark Bell, Dare

Blir bäst om vi jobbar ihop, över jobbtitlar samt med kunden

Det handlar om att göra vad som är bäst
för användarna, kunden oss
www.flickr.com/photos/stickkim/7491816206

Testa så tidigit som möjligt
sen ofta kontinuerligt

enhet
webbläsare
skärm
input metod
uppkoppling
Vilken som helst
när som helst
Använd var som helst

Content =
www.flickr.com/photos/grimsanto/751075283/photos/carlosfpardo/6791950592

Content + Context =
www.flickr.com/photos/grimsanto/751075283/photos/carlosfpardo/6791950592

Screenshot: https://moto360.motorola.com/

Screenshot: Screenshot: http://www.apple.com/uk/

Screenshot: Screenshot: http://www.apple.com/uk/
“
A
n
d
ju
s
t a
s
the first wave of desktop apps ported to
mobile were underwhelming and replaced by mobile-first
applications, so will companies quickly realize that it isn’t
just a new screen but a brand-new platform. ”
- Source: Techcrunch

Responsiv design har lärt oss anpassa
layouts interaktioner

´
Men varje enhet är olika.
Använd deras fulla potential

´
Browse
Research
Buy Pay
Get notified

´
Browse
Research
Buy Pay
Get notified
✓ ✓ ✓

´
Browse
Research
Buy Pay
Get notified
✓ ✓ ✓
✓ ✓ ✓

´
Browse
Research
Buy Pay
Get notified
✓ ✓ ✓
✓ ✓ ✓
✓ ✓ ✓

´
Browse
Research
Buy Pay
Get notified
✓ ✓ ✓
✓ ✓ ✓
✓ ✓ ✓
✓

´
Browse
Research
Buy Pay
Get notified
✓ ✓ ✓
✓ ✓ ✓
✓ ✓ ✓
✓ ✓

´
Browse
Research
Buy Pay
Get notified
✓ ✓ ✓
✓ ✓ ✓
✓ ✓ ✓
✓
✓ ✓

Egentligen så är det
inte så annorlunda
www.flickr.com/photos/visualpunch/7351572896

1. Varje responsivt design projek är ett content strategy projekt
2. Designa ett system av moduler isället för fokusera på sidor
3. Sätt innehållsbaserade breakpoints istället för enhetesbaserade
4. Enhetsoberoende design bör vara utgångspunkten
5. …men anpassa upplevelsen efter enhetens roll ändamål

Tack. Frågor?
@annadahlstrom | www.annadahlstrom.com

Responsivt - Inte bara för mobilen + Webbdagarna Växjö, 04 Dec 2014

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (18)

Similar to Responsivt - Inte bara för mobilen + Webbdagarna Växjö, 04 Dec 2014

Similar to Responsivt - Inte bara för mobilen + Webbdagarna Växjö, 04 Dec 2014 (20)

More from Anna Dahlström

More from Anna Dahlström (20)

Responsivt - Inte bara för mobilen + Webbdagarna Växjö, 04 Dec 2014