125
Image courtesy of Shutterstock Device Agntic Design How to get your content to go anywhere by Anna Dahlström | @annadahlstrom UCD London, 25 Oct 2014 #UCD14

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

Embed Size (px)

DESCRIPTION

Anna Dahlstrom - Device Agnostic Design: How to get your content to go anywhere There was a time when we did glossy page designs and when those designs were pretty much what we saw in our desktop browsers. With the introduction and rise of smartphones, tablets, phablets there isn't one view of our designs anymore. Instead, what we create needs to be able to adapt in a way that is suitable for the device as well as where and how it’s being used. With responsive design we've learnt the basics of how to adapt content, interactions and layouts so that it works across devices. But with further developments in technology and screens, our content is going to go anywhere. As a result we need to move away from designing for specific devices to solutions that are device agnostic. For us as UX designers this means means letting content rather than devices guide layouts, and also increasingly moving away from designing and wireframing pages to focusing on the modules that those views are made up of. But there are other aspects to consider in device agnostic design. In this talk Anna will walk through why device agnostic design matters, what it means and how we go about it.

Citation preview

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

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

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

www.flickr.com/photos/activeside/2192411612

Before 2007 we mostly thought about pages

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

That was when browsers were our biggest head ache

www.flickr.com/photos/jorgeq82/4732700819

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

Today it’s browers & a whole bunch of devices

www.flickr.com/photos/adactio/12674602864

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

“ 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

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

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

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

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

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

We go onlineeverywhere and anywhere

www.flickr.com/photos/luigimengato/5963540855

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

…and theseare the game changers

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

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

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

“ Just a giant iPhone. ”

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

2010Ethan Marcotte, Responsive Web Design

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

Now…it’s Device Agnostic Design

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

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

!

!

!

!

!

!

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

What does work on “any device” mean?

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

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

- Sarita Harbour, WDD

Image courtesy of Shutterstock

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

Wherehas it come from?

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

An evolvement of responsive design

www.flickr.com/photos/adactio/5818096043

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

FULL WEBSITE

FULL WEBSITE

FULL WEBSITE

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

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

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

DESKTOP FULL WEBSITE

BESPOKE CUT DOWN

WEBSITE

BESPOKE CUT DOWN

WEBSITE

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

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

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

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

Brings us back to this…

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

Maintaining bespoke mobile sites is messy & costly

www.flickr.com/photos/ericconstantineau/5618576278

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

It means maintaining multiple technical solutions...

www.flickr.com/photos/nikio/3899114449

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

...and also maintaining multiple versions of your content

www.flickr.com/photos/financialaidpodcast/7598618978

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

Realistically that means making cuts & frustrating users

www.flickr.com/photos/bulldogsrule/187693681

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

Bad, bad, bad…

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

This is NOT what a mobile user looks like

Image courtesy of Shutterstock

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

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

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

Many of us own multiple devices

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

Morning Commute Work Lunch Meeting Dinner Movie

We switch between them throughout the day

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

www.flickr.com/photos/sixmilliondollardan/2493495506

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

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

Users expect an equal & continuous experience across devices

www.flickr.com/photos/joachim_s_mueller/7110473339

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

DESKTOP FULL WEBSITE

BESPOKE CUT DOWN

WEBSITE

BESPOKE CUT DOWN

WEBSITE

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

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

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

DESKTOP FULL WEBSITE

BESPOKE CUT DOWN

WEBSITE

BESPOKE CUT DOWN

WEBSITE

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

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

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

FULL WEBSITE

FULL WEBSITE

FULL WEBSITE

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

Responsive sites: The same site irrespectively of the device

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

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

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

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

It’s all about the modules baby

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

Define your content stacking strategy across devices & orientation.

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

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

Define your content stacking strategy across devices & orientation.

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

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

Define your content stacking strategy across devices & orientation.

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

sizes

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

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

Breakpoints & Behaviour

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

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

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

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

Image courtesy of Shutterstock

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

http://thenextweb.com/

So that it’s carefully considered, like this

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

From responsive to device agnostic design

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

Responsive design established the principle of the same content across devices

www.flickr.com/photos/joachim_s_mueller/7110473339

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

But it’s brought up other problems

www.flickr.com/photos/stankus/3718835245

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

“ Smartphones accounted for 57.6% of total sales in fourth quarter of 2013 ” *

- Source: Gartner

www.flickr.com/photos/aforgrave/6168689222

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

Internet connection is still not a given

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

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

Oh, and Internet actually sleeps…

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

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

Oh, and Internet actually sleeps…

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

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

…and not all connections are made equal

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

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

Adaptivedesign

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

Content layerrich semantic HTML markup

Presentation layerCSS and styling

Client-side scripting layer JavaScript or jQuery behaviors

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

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

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

Context

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

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

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

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

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

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

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

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

!

!

!

!

!

!

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

- Josh Clark

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

www.flickr.com/photos/intelfreepress/6837427202

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

www.flickr.com/photos/janitors/9968676044

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

Impacts controls, placement & interactions

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

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

We need to consider precise v.s imprecise input means

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

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

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

Designing for multiple devices can become a bit of a minefield

www.flickr.com/photos/cayusa/534070358

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

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

www.flickr.com/photos/adactio/6153481666

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

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

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

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

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

go everywhere. ” - Brad Frost

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

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

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

your audience wants to consume it. ”

- Karen McGrane

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

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

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

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

“ 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

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

device browser screen input method connection speed

Any

anytime anywhereUsed

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

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

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

www.thegrid.io

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

- The Grid

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

It all starts with content

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

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

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

www.flickr.com/photos/boltofblue/4418442567

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

Gone is the big reveal of the beautiful page designs

www.flickr.com/photos/nataliejohnson/377344806

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

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

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

How to go about it

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

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

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

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

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

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

www.flickr.com/photos/boltofblue/4418442567

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

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

www.flickr.com/photos/akrabat/9085299639

Essential for preventing ending up with too many pieces

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

An evolution of how we’ve always worked

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

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

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

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

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

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

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

Break down each module into elements

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

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

Views

Home - large Home - small

Start identifying your building blocks & variations

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

Views

Home - large Home - small

Start identifying your building blocks & variations

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

Feature - large Feature - small

Views Modules

Home - large Home - small

Start identifying your building blocks & variations

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

Feature - large Feature - small

Views Modules

Home - large Home - small

Start identifying your building blocks & variations

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

Feature - large Feature - small

Featured products - large Featured products - small

Views Modules

Home - large Home - small

Start identifying your building blocks & variations

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

Feature - large Feature - small

Featured products - large Featured products - small

Views Modules

Home - large Home - small

Start identifying your building blocks & variations

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

Feature - large Feature - small

Featured products - large

Single product - large

Featured products - small

Single product- small

Views Modules

Home - large Home - small

Start identifying your building blocks & variations

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

Iterate & refine across 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

Additional info

Related products

Footer

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

Iterate & refine across views & key templates

Header& Nav

Products

Footer

Filter & search

Product listing Product pageCategoriesHomeHeader& Nav

Features

Footer

Featured categories

Header& Nav

Footer

Categories

Header& Nav

GalleryDescrip-

tion

Additional info

Related products10

Prod9

Prod8

Prod7

Prod

Footer

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

Iterate & refine across views & key templates

Header& Nav

Products

Footer

Filter & search

Product listing Product pageCategoriesHomeHeader& Nav

Features

Footer

Featured categories

Header& Nav

Footer

Categories

Header& Nav

GalleryDescrip-

tion

Additional info

Related products

Footer

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

Iterate & refine across views & key templates

Header& Nav

Products

Footer

Filter & search

Product listing Product pageCategoriesHomeHeader& Nav

Features

Footer

Featured categories

Header& Nav

Footer

Categories

Header& Nav

GalleryDescrip-

tion

Additional info

7Prod

6 Prod

5Prod

4Prod

Footer

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

Iterate & refine across views & key templates

Header& Nav

Products

Footer

Filter & search

Product listing Product pageCategoriesHomeHeader& Nav

Features

Footer

Featured categories

Header& Nav

Footer

Categories

Header& Nav

GalleryDescrip-

tion

Additional info

Footer

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

Iterate & refine across views & key templates

Header& Nav

Footer

Filter & search

Product listing Product pageCategoriesHomeHeader& Nav

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

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

Iterate & refine across views & key templates

Header& Nav

Footer

Filter & search

Product listing Product pageCategoriesHomeHeader& Nav

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

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

Iterate & refine across views & key templates

Header& Nav

Footer

Filter & search

Product listing Product pageCategoriesHomeHeader& Nav

Features

Footer

Featured categories

Header& Nav

Footer

Categories

Header& Nav

GalleryDescrip-

tion

Additional info

Footer

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

Gradually build your module library

Feature - large Feature - small

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

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

Gradually build your module library

Feature - large Feature - small

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

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

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

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

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

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

“ 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

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

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

www.flickr.com/photos/visualpunch/7351572896

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

Basing breakpoints on screen sizes is a temporary work around

www.flickr.com/photos/gozalewis/3249104929

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

www.flickr.com/photos/adactio/6153481666

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

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

Opt for fluid as much possible

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

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

Work with your module library and templates

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

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

A few final words...

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

Image courtesy of Shutterstock

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

- Karen McGrane

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

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

How we approach it depends…

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

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

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

We have to work together across disciplines, & with clients

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

www.flickr.com/photos/byte/8282578241

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

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

www.flickr.com/photos/stickkim/7491816206

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

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

Test as early as possible& then continuously

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

device browser screen input method connection speed

Any

anytime anywhereUsed

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

Content + Context is the focus

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

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

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

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

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

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

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

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

Image courtesy of Shutterstock

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