Download - Device Agnostic Design - UCD2014, London 25 Oct 2014

Image courtesy of Shutterstock

Device Agnostic Design How to get your content to go anywhere

by Anna Dahlström | @annadahlstrom UCD London, 25 Oct 2014 #UCD14

http://www.annadahlsrom.com

www.flickr.com/photos/activeside/2192411612

Before 2007 we mostly thought about pages

That was when browsers were our biggest head ache

www.flickr.com/photos/jorgeq82/4732700819

Today it’s browers & a whole bunch of devices

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

http://www.independent.co.uk/life-style/gadgets-and-tech/news/there-are-officially-more-mobile-devices-than-people-in-the-world-9780518.html

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

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


We go onlineeverywhere and anywhere

www.flickr.com/photos/luigimengato/5963540855

http://www.flickr.com/photos/luigimengato/5963540855

…and theseare the game changers

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

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

“ Just a giant iPhone. ”

2010Ethan Marcotte, Responsive Web Design

Now…it’s Device Agnostic Design

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

“ 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. ”

- Combined wise words from @oneextrapixel & @trentwalton

!

!

!

!

!

!

What does work on “any device” mean?

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

- Sarita Harbour, WDD


Wherehas it come from?

An evolvement of responsive design


FULL WEBSITE

FULL WEBSITE

FULL WEBSITE

Responsive sites have the same url & is basically “one site”

http://desktopwallpaper-s.com/19-Computers/-/Future

DESKTOP FULL WEBSITE

BESPOKE CUT DOWN

WEBSITE

BESPOKE CUT DOWN

WEBSITE

Bespoke mobile sites have a separate url & means maintaining different sites



Brings us back to this…


Maintaining bespoke mobile sites is messy & costly

www.flickr.com/photos/ericconstantineau/5618576278

It means maintaining multiple technical solutions...

www.flickr.com/photos/nikio/3899114449

...and also maintaining multiple versions of your content

www.flickr.com/photos/financialaidpodcast/7598618978

Realistically that means making cuts & frustrating users

www.flickr.com/photos/bulldogsrule/187693681

Bad, bad, bad…

This is NOT what a mobile user looks like


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 Retailer’s

Website

17%

Visited a Store

7%

Called a Business

0RELOH�VHDUFKHV�DUH�VWURQJO\�WLHG�WR�VSHFLȴF�FRQWH[WV�

Shopping queries are 2x more likely to be in store

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

77% of mobile searches occur at home or work

17% of mobile searches occur on the go

Many of us own multiple devices

Morning Commute Work Lunch Meeting Dinner Movie

We switch between them throughout the day

www.flickr.com/photos/sixmilliondollardan/2493495506

A poor experience results in the same thing where ever it takes place

Users expect an equal & continuous experience across devices

www.flickr.com/photos/joachim_s_mueller/7110473339


BESPOKE CUT DOWN

WEBSITE

BESPOKE CUT DOWN

WEBSITE


Having separate sites does, for the most part, not make sense


BESPOKE CUT DOWN

WEBSITE

BESPOKE CUT DOWN

WEBSITE


Bespoke mobile sites: Different sites based on the device that’s used

FULL WEBSITE

FULL WEBSITE

FULL WEBSITE


Responsive sites: The same site irrespectively of the device

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

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

It’s all about the modules baby

http://desktopwallpaper-s.com/19-Computers/-/Future/

Define your content stacking strategy across devices & orientation.

www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/

Define your content stacking strategy across devices & orientation.

www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/

sizes


Breakpoints & Behaviour

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


Keep the core content the same but optimise the experience, display & interactions to the device


http://www.flickr.com/photos/theirmind/5001267661/

http://thenextweb.com/

So that it’s carefully considered, like this


From responsive to device agnostic design

Responsive design established the principle of the same content across devices

www.flickr.com/photos/joachim_s_mueller/7110473339

But it’s brought up other problems

www.flickr.com/photos/stankus/3718835245

http://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 connection is still not a given

http://gizmodo.com/a-map-of-every-device-in-the-world-thats-connected-to-t-1628171291

http://gizmodo.com/a-map-of-every-device-in-the-world-thats-connected-to-t-1628171291

Oh, and Internet actually sleeps…

http://www.wired.com/2014/10/internet-sleeps-night-really

…and not all connections are made equal

Screenshot from http://opensignal.com/coverage-maps/UK/

http://opensignal.com/coverage-maps/UK/

Adaptivedesign

Content layerrich semantic HTML markup

Presentation layerCSS and styling

Client-side scripting layer JavaScript or jQuery behaviors

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

http://www.thegrid.io

Context

Mobile context ≠ mobile use case The latter is about the task, the former about the total sum of the user’s mobile experience

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 there’s

more to devices than the size of their screens. ”

- Trent Walton, Device Agnostic

http://www.flickr.com/photos/jmsmith000/3169546564

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

http://www.flickr.com/photos/jmsmith000/3169546564

www.flickr.com/photos/66327170@N07/7296381856

!

!

!

!

!

!

‘ New rule: every desktop design has to go finger friendly ’

- Josh Clark

www.flickr.com/photos/intelfreepress/6837427202

www.flickr.com/photos/johnkarakatsanis/6902407334 www.flickr.com/photos/jorgeq82/4732700819

www.flickr.com/photos/janitors/9968676044


Impacts controls, placement & interactions

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

We need to consider precise v.s imprecise input means

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

Designing for multiple devices can become a bit of a minefield

www.flickr.com/photos/cayusa/534070358

We can’t always successfully tell what devices users are using


It’s about content. Not what device we’re using.


“ Get your content to go anywhere, because it’s going to

go everywhere. ” - Brad Frost


“ It is your mission to get your content out, on whichever platform, in whichever format

your audience wants to consume it. ”

- Karen McGrane

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


“ 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

device browser screen input method connection speed

Any

anytime anywhereUsed

How do we design something that can work on any device?

www.thegrid.io

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

- The Grid

http://www.thegrid.io

It all starts with content

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

Less about pages & more focus on the building blocks that make up those views

www.flickr.com/photos/boltofblue/4418442567

Gone is the big reveal of the beautiful page designs

www.flickr.com/photos/nataliejohnson/377344806

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

It’s about views that will look good, & work well, across different browsers, screen sizes, device types, connections & input methods

How to go about it

1. Understand content & content stacking strategy 2. Approach design as systems of modules3. Use content rather than device based breakpoints


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

http://www.crayola.co.uk/

www.flickr.com/photos/boltofblue/4418442567

The more you reuse, the less modules there will be to design, define & develop

www.flickr.com/photos/akrabat/9085299639

Essential for preventing ending up with too many pieces


An evolution of how we’ve always worked

Define views & key templates

Header& Nav

Products

Footer

Filter & search

Product listing Product pageCategoriesHomeHeader& Nav

Features

Footer

Featured products

Featured categories

Header& Nav

Footer

Categories

Header& Nav

GalleryDescrip-

tion

Footer

Additional info

Related products

Break down content further & explore layouts

1 Header& Nav2 Filter & search

Product listing

1 Header& Nav

2Gallery

2Descrip-

tion

8 Footer

3Additional info

Product page1 Header& Nav

2Category

3Category

4 Category

9Categ

7Categ

10 Footer

Categories

7Prod

6Categ

5Categ

1 Header& Nav

2Features

11 Footer

Home

3Category

4 Category

6 Categ

6 Categ

10Prod

9 Prod

8Prod

7Prod

8Categ

6Prod

5 Prod

4Prod

3Prod

10Prod

9 Prod

8Prod

7Prod

14Prod

13 Prod

12Prod

11Prod

18Prod

17 Prod

16Prod

15Prod

19 Footer

7Prod

6 Prod

5Prod

4Prod

Home - largeHeader& Nav

Features

Footer

Featured products

Featured categories

1 Header& Nav

2Features

11 Footer

3Category

4 Category

6 Categ

6 Categ

10Prod

9 Prod

8Prod

7Prod

1 Header& Nav

2Features

10 Footer

3 Category

4 Categ

5 Categ

6 Product

7 Product

8 Product

9 Product

Header& Nav

Features

Footer

Home - small

Featured categories

Featured products

Do the same across screen sizes

Break down each module into elements


Features

Footer

Featured products

Featured categories

1 Header& Nav

2Features

11 Footer

3Category

4 Category

6 Categ

6 Categ

10Prod

9 Prod

8Prod

7Prod

1 Header& Nav

2Features

10 Footer

3 Category

4 Categ

5 Categ

6 Product

7 Product

8 Product

9 Product

Header& Nav

Features

Footer

Home - small

Featured categories

Featured products

Views

Home - large Home - small

Start identifying your building blocks & variations

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



Iterate & refine across views & key templates

Header& Nav

Products

Footer

Filter & search


Features

Footer

Featured products

Featured categories

Header& Nav

Footer

Categories

Header& Nav

GalleryDescrip-

tion

Additional info

Related products

Footer


Header& Nav

Products

Footer

Filter & search


Features

Footer

Featured categories

Header& Nav

Footer

Categories

Header& Nav

GalleryDescrip-

tion

Additional info

Related products10

Prod9

Prod8

Prod7

Prod

Footer


Header& Nav

Products

Footer

Filter & search


Features

Footer

Featured categories

Header& Nav

Footer

Categories

Header& Nav

GalleryDescrip-

tion

Additional info

Related products

Footer


Header& Nav

Products

Footer

Filter & search


Features

Footer

Featured categories

Header& Nav

Footer

Categories

Header& Nav

GalleryDescrip-

tion

Additional info

7Prod

6 Prod

5Prod

4Prod

Footer


Header& Nav

Products

Footer

Filter & search


Features

Footer

Featured categories

Header& Nav

Footer

Categories

Header& Nav

GalleryDescrip-

tion

Additional info

Footer


Header& Nav

Footer

Filter & search


Features

Footer

Featured categories

Header& Nav

Footer

Categories

Header& Nav

GalleryDescrip-

tion

Additional info

Footer

6Prod

5 Prod

4Prod

3Prod

10Prod

9 Prod

8Prod

7Prod

14Prod

13 Prod

12Prod

11Prod

18Prod

17 Prod

16Prod

15Prod


Header& Nav

Footer

Filter & search


Features

Footer

Featured categories

Header& Nav

Footer

Categories

Header& Nav

GalleryDescrip-

tion

Additional info

Footer

6Prod

5 Prod

4Prod

10Prod

9 Prod

8Prod

7Prod

14Prod

13 Prod

12Prod

11Prod

18Prod

17 Prod

16Prod

15Prod


Header& Nav

Footer

Filter & search


Features

Footer

Featured categories

Header& Nav

Footer

Categories

Header& Nav

GalleryDescrip-

tion

Additional info

Footer

Gradually build your 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

www.slideshare.net/yiibu/pragmatic-responsive-design

Work with breakpoints & tweakpoints, focus on content layout & EMS instead of px



“ Building a content-aware grid is a simple matter of

choosing the layout patterns that you want, based on breakpoints that you set

according to page content. ”

- Thierry Koblentz, Device-Agnostic Approach To Responsive Web Design

Look at what’s suitable for your content & best practice for layout principles

www.flickr.com/photos/visualpunch/7351572896

Basing breakpoints on screen sizes is a temporary work around

www.flickr.com/photos/gozalewis/3249104929


It enforces the idea that (responsive) design is about devices. It’s not.

Opt for fluid as much possible



Work with your module library and templates


Features

Footer

Featured products

Featured categories

1 Header& Nav

2Features

11 Footer

3Category

4 Category

6 Categ

6 Categ

10Prod

9 Prod

8Prod

7Prod

1 Header& Nav

2Features

10 Footer

3 Category

4 Categ

5 Categ

6 Product

7 Product

8 Product

9 Product

Header& Nav

Features

Footer

Home - small

Featured categories

Featured products

A few final words...


“ Every responsive design project is also a content strategy project. ”

- Karen McGrane


http://www.juniperresearch.com/reports/mobile_payments_for_digital_&_physical_goods

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

How we approach it depends…

http://www.flickr.com/photos/dahlstroms/4411448782/

DetailedIA & UX deliverablesHigh level

Brand Info or taskAim of experience

LimitedExperience 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

We have to work together across disciplines, & with clients

www.flickr.com/photos/byte/8282578241

Device agnostic design means giving up some control to ensure it works for as many devices as possible

www.flickr.com/photos/stickkim/7491816206

Ensuring that we do what’s best for our clients, our users & us as a company

Test as early as possible& then continuously

device browser screen input method connection speed

Any

anytime anywhereUsed

Content + Context is the focus

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

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

https://moto360.motorola.com/

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

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 isn’t just a new screen but a brand-new platform. ”

- Source: Techcrunch

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


Thank you. Questions?@annadahlstrom | www.annadahlstrom.com

http://www.annadahlsrom.com

http://www.annadahlstrom.com