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

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

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

We go onlineeverywhere and anywhere

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

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

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

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

Continued

Research

Shared Information

Made a Purchase

Visited a Retailer’s

Website

Visited a Store

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

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

Define your content stacking strategy across devices & orientation.

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

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

“ 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

Oh, and Internet actually sleeps…

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

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/

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

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

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

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

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

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/

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-

Footer

Additional info

Categories

6Categ

5Categ

1 Header& Nav

2Features

11 Footer

3Category

4 Category

6 Categ

10Prod

9 Prod

8Categ

5 Prod

10Prod

9 Prod

14Prod

13 Prod

12Prod

11Prod

18Prod

17 Prod

16Prod

15Prod

19 Footer

6 Prod

Home - largeHeader& Nav

Features

Footer

Featured products

Featured categories

1 Header& Nav

2Features

11 Footer

3Category

4 Category

6 Categ

10Prod

9 Prod

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

10Prod

9 Prod

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

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

Featured categories

Header& Nav

Footer

Categories

Header& Nav

GalleryDescrip-

Additional info

Categories

Header& Nav

GalleryDescrip-

Additional info

Related products10

Footer

Header& Nav

Products

Footer

Filter & search

Features

Footer

Featured categories

Header& Nav

Footer

Categories

Header& Nav

GalleryDescrip-

Additional info

Categories

Header& Nav

GalleryDescrip-

Additional info

6 Prod

Footer

Header& Nav

Products

Footer

Filter & search

Features

Footer

Featured categories

Header& Nav

Footer

Categories

Header& Nav

GalleryDescrip-

Additional info

Footer

Header& Nav

Footer

Filter & search

Features

Footer

Featured categories

Header& Nav

Footer

Categories

Header& Nav

GalleryDescrip-

Additional info

Footer

5 Prod

10Prod

9 Prod

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-

Additional info

Footer

5 Prod

10Prod

9 Prod

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-

Additional info

Footer

Gradually build your module library

Single product - large Single product- small

Also used for: • Module REL01 - Related products

Gradually build your module library

Single product - large Single product- small

Also used for: • Module REL01 - Related products

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

10Prod

9 Prod

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

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

How we approach it depends…

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

anytime anywhereUsed

Content + Context is the focus

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

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

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

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

Device Agnostic Design - UCD2014, London 25 Oct 2014

Design

Agnostic Continuous Delivery

Gnostic Ose Agnostic Os

Device agnostic research sex drugs politics

5 Oct 2009 REGULATION AND ISSUES OF MEDICAL DEVICE INNOVATIONS

Bulding Device Agnostic UX Systems - Generate London, 23 Sep 2016

Managing Mobile Devices in a Device-Agnostic World · 2014-09-03 · 2 SAP White Paper – Managing Mobile Devices in a Device-Agnostic World Table of Content 4 Mobile Device Management

Compiler-Agnostic Function Detection in Binaries · Compiler-Agnostic Function Detection in Binaries Dennis Andriessey, Asia Slowinska, Herbert Bosy ... Compiler-Agnostic Function

Padrino is agnostic

Complete Collaboration Solution · Solstice Conference Multi-participant content sharing from any device Agnostic support for all major conferencing services Easy, one-step start

How to become an agnostic. A platform agnostic

Presence and the Unified User Experience (B-07) David Schenkel Senior Technical Analyst ADTRAN The cost savings and multi-device, location-agnostic access

Building Device Agnostic UX systems - GeekGirl, London 28 Oct 2014

Framework Agnostic Discovery

Platform-Independent Device-Agnostic, Teaching … keeping pace with developments in technology. Technology is …

Medical Device ASIA (Sept-Oct'14)

Agnostic Atheism

A static, packer-agnostic filter to detect similar malware ... static, packer-agnostic... · Chi-square test between code signal ... packer-agnostic filter to detect similar malware

PeopleSoft eProcurement 9 - Astute Business … 9.2 eProcurement ... PeopleSoft eProcurement 9.2 Fluid Technology makes this module device agnostic

Device agnostic discovery using drupal and bibliocommons

UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere