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

Image courtesy of Shutterstock

Responsivt - inte bara fr mobilenAnna Dahlstrm | @annadahlstrom Webbdagarna Vxj, 04 december 2014 #webbdagarna

www.flickr.com/photos/activeside/2192411612

Innan 2007 handlade det mest om det hr

Det var nr webblsare var vrt strsta huvudbry

www.flickr.com/photos/jorgeq82/4732700819

Idag r det webblsare & ett ondligt 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 adultscheck their phone within five minutes of waking.

- Source: WSJ

Var som helst & Nr som helst

Det r tack varede hr bovarna

https://www.flickr.com/photos/jfingas/10104822523

https://www.flickr.com/photos/bfishadow/4604166391

Just a giant iPhone.

2010Ethan Marcotte, Responsive Web Design

NuDevice Agnostic Design

(enhetsoberoende design)

https://www.flickr.com/photos/jfingas/10104822523

Todays popular devices arent tomorrow's so building something which works on any device is better than

building something which works on todays devices. - Combined wise words from @oneextrapixel & @trentwalton

!

!

!

!

!

!

Any deviceVad innebr det?

The site you build is not dependent on knowing what device it is being displayed on.

- Sarita Harbour, WDD


Varkommer det ifrn?

En vidareutveckling av responsive design

www.flickr.com/photos/adactio/5818096043

FULL WEBSITE

FULL WEBSITE

FULL WEBSITE

Responsiva webblsningar 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 webblsningar har en egen url & innebr olika webbplatser



Tar oss tillbaka till det hr

Att underhlla separata mobila webblsningar r kostsamt

www.flickr.com/photos/ericconstantineau/5618576278

Olika kodbaser & tekniska lsningar ska uppdateras

www.flickr.com/photos/nikio/3899114449

fr att inte tala om allt innehll

www.flickr.com/photos/financialaidpodcast/7598618978

samt optimering fr skmotorer

www.flickr.com/photos/financialaidpodcast/7598618978

Realistiskt sett innebr det kompromisser & frustrerade anvndare

www.flickr.com/photos/bulldogsrule/187693681

Menolika innehll r vl ok, eller?

Det bygger p en myt om att mobilanvndare beter sig s hr


Mobile Search MoMentSUnderStanding how Mobile driveS converSionS

3 of 4 mobile searches trigger follow-up actions

Mobile searches drive valuable outcomes for businesses

Actions triggered by mobile search also happen very quickly

of conversions (store visit, phone call or purchase) happening within an hour55%

On average, each mobile search triggers nearly 2 follow-up actions

Product & shopping searches have a higher number of outcomesNumber of follow-up actions per mobile search

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

2.082.523.56

Travel FoodAutoBeauty Tech

2.072.20

36%

Continued Research

18%

Shared Information

17%

Made a Purchase

25%

Visited a Retailers Website

17%

Visited a Store

7%

Called a Business

0RELOHVHDUFKHVDUHVWURQJO\WLHGWRVSHFLFFRQWH[WVShopping queries are 2x more likely to be in store

Source: http://www.thinkwithgoogle.com/infographics/creating-moments-that-matter-infographic.html

77% av mobilskningar sker i hemmet eller p jobbet

17% av mobilskningarsker on the go

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

Det kande mobil-anvndandet slr igenom i kad internettid i hemmet och i skolan eftersom en stor del av mobilanvndandet sker i hemmet och skolan via trdlsa ntverk.

Mnga av oss ger fler n en enhet

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

53% har en surfplatta

73% har en smart mobil

Morgon Pendling Jobb Lunch Mte AW Film

Vi vxlar mellan dem under dagen

Commute

Sequential usage

Morning Work

90% of users start a task on one device and then complete it on another. - Source: Google

Simultaneous usage

+

Multi-taskingOR

Commute

Sequential usage

Morning Work


Simultaneous usage

+

Multi-tasking

+

Extending

OR

Commute

Sequential usage

Morning Work


Simultaneous usage

+

Multi-tasking

+

Extending

+

Complementing

OR

www.flickr.com/photos/sixmilliondollardan/2493495506

En dlig upplevelse leder till samma resultat, oavsett var den sker

www.flickr.com/photos/sixmilliondollardan/2493495506

Not having a mobile-friendly site helps your competitors. - Google

Starting today, to make it easier for people to find the information that theyre looking for, were 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/

Andvndare frvntar en enhetlig & kontinuerlig upplevelse oberoende av enhet

www.flickr.com/photos/joachim_s_mueller/7110473339

DESKTOP

FULL WEBSITE

BESPOKE CUT DOWN

WEBSITE

BESPOKE CUT DOWN

WEBSITE


Separata mobila webblsningar ger generellt inte mening

Huvudinnehllet br vara det samma, fast optimera upplevelsen, layouten & interaktioner


http://foundation.zurb.com/docs/layout.php

Design & development should respond to the users behaviour & environment based on screen size, platform & orientation. [Its]...a mix of flexible grids & layouts, images & an intelligent use of media queries.

- Smashing Magazine

www.flickr.com/photos/donsolo/2136923757/

Responsiv design bygger p moduler

och att definera hur de ska anpassas

Home - stor1 Header& Nav

2Hero

11 Footer

3Category

4 Category

6 Categ

6 Categ

10Prod

9 Prod

8Prod

7Prod

1 Header& Nav

2Hero

10 Footer

3 Category

4 Categ

5 Categ

6 Product

7 Product

8 Product

9 Product

Home - liten

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

http://thenextweb.com/

NuDevice Agnostic Design

(enhetsoberoende design)

Responsiv design etablerade principen om samma innehll oberoende av enhet

www.flickr.com/photos/joachim_s_mueller/7110473339

Men Sen 2010 har den genomsnittliga page weighten nstan 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 uppkopplingr inte alla frunnat

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

Adaptivedesign

Content layerrich semantic HTML markup

Presentation layerCSS & styling

Client-side scripting layer JavaScript eller jQuery

www.thegrid.io

To get response times to a minimum, weve 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 pages Javascript detects the browsers capabilities, higher-resolution images get loaded in dynamically. - Andrew Pipe, BBC iWonder

Context

Mobile context & mobile use case likstlls ofta, men det r inte det samma

www.flickr.com/photos/icedsoul/2486885051

Image courtesy of Shutterstockwww.flickr.com/photos/jmsmith000/3169546564

I used to think it merely dealt with basing responsive breakpoints on content rather than particular devices, but theres

more to devices than the size of their screens. - Trent Walton, Device Agnostic

www.flickr.com/photos/lokan/8843464852www.flickr.com/photos/jmsmith000/3169546564

A device-agnostic approach also takes into account infinite combinations of screen resolution, input

method, browser capability, and connection speed. - 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/johnkarakatsanis/6902407334 www.flickr.com/photos/jorgeq82/4732700819

www.flickr.com/photos/janitors/9968676044

www.flickr.com/photos/vincentsl/3543888150

Designing for touch means designing for fingers, yes, but to be more specific, youre really designing for thumbs.

- Josh Clark

Har konsekvenser fr funktionalitet, placering & interaktion

www.flickr.com/photos/jmtimages/2883279193www.flickr.com/photos/ljrmike/7675757042

Mycket trskert vs. Mindre trskert

The site you build is not dependent on knowing what device it is being displayed on.

- Sarita Harbour, WDD



Get your content to go anywhere, because its 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 webblsare skrm input metod uppkoppling

Vilken som helst

nr som helst var som helstAnvnds

Hur gr vi fr att designa enhetsoberoende?

www.thegrid.io

The design adjusts to look good on every browser and every device. Automatically.

- The Grid

Det handlar om innehllet. Inte vilken enhet vi anvnder.


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 & istllet mer fokus p modulerna som utgr dem

www.flickr.com/photos/boltofblue/4418442567

Rtt likt lego

www.flickr.com/photos/toomuchdew/5243719740


Ju mer vi teranvnder,desto bttre

www.flickr.com/photos/akrabat/9085299639

Vi ska helst undvika det hr:

Views

Home - large Home - small

Brja med att identificera byggnadsblocken

Feature - large Feature - small

Views Modules




Featured products - large Featured products - small

Views Modules




Featured products - large

Single product - large

Featured products - small

Single product- small

Views Modules



Bygg gradvis upp ditt module library


Featured products - large Featured products - small

Single product - large Single product- small

Also used for: Module REL01 - Related products

1

3

4

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 wasnt 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 MallScreenshot: www.crayola.co.uk/

www.flickr.com/photos/jorgeq82/4732700819 www.flickr.com/photos/adactio/6153481666

Webblsare & Enheter

nnu en orsak till varfr vi br undvika The big reveal

www.flickr.com/photos/nataliejohnson/377344806

En anpassning av hur vi redan tar oss an design

www.flickr.com/photos/75905404@N00/7126146307

Hurja, det beror p

DetailedIA & UX deliverablesHigh level

Brand Info or taskAim of experience

Limited Experience in visual design teamExtensive

Less formal UX deliverables but more creatively led

UX led with more formal & extensive IA & UX deliverables

Source: Mark Bell, Dare

Blir bst om vi jobbar ihop, ver jobbtitlar samt med kunden

www.flickr.com/photos/stickkim/7491816206

Det handlar om att gra vad som r bst fr anvndarna, kunden & oss

Testa s tidigit som mjligt

sen ofta & kontinuerligt

enhet webblsare skrm input metod uppkoppling

Vilken som helst

nr som helst var som helstAnvnd

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/

And just as the first wave of desktop apps ported to mobile were underwhelming and replaced by mobile-first applications, so will companies quickly realize that it isnt just a new screen but a brand-new platform.

- Source: Techcrunch

Responsiv design har lrt oss anpassa layouts & interaktioner

Men varje enhet r olika.Anvnd deras fulla potential

Browse

Research

Buy & Pay

Get notified

Men varje enhet r olika.Anvnd deras fulla potential

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 isllet fr fokusera p sidor 3. Stt innehllsbaserade breakpoints istllet fr enhetesbaserade4. Enhetsoberoende design br vara utgngspunkten 5. men anpassa upplevelsen efter enhetens roll & ndaml


Tack. Frgor?@annadahlstrom | www.annadahlstrom.com