Designing for multiple devicesDUBLIN WEB SUMMIT & GENERAL ASSEMBLYby Anna Dahlström | @annadahlstrom

www.flickr.com/photos/pagedooley/2121472112

&e world we design for has become more complex

www.flickr.com/photos/jorgeq82/4732700819

We used to only have to deal with different browsers, and the fold

www.flickr.com/photos/adactio/6153481666

Today it’s browsers AND endless numbers of devices & screen sizes

www.flickr.com/photos/nasamarshall/6289116940

In 2009 1% of global internet traffic came from mobiles. By the end of 2012 it had risen to 13% and by2015 it’s .pected to be above 50%.** Source: www.forbes.com/sites/parmyolson/2012/12/04/5-eye-opening-stats-that-show-the-world-is-going-mobile

www.flickr.com/photos/raincitystudios/95234968

As of Q3 2012 we passed 1 billion smartphones in use

www.flickr.com/photos/helga/3952984450/

I have a job that is unknown to many I’m a freelance IA & UX designer

www.flickr.com/photos/hlkljgk/5764422581

For every human that enters the world, five mobile devices are created.** Source: http://blogs.windows.com/ie/b/ie/archive/2013/07/17/the-companion-web-the-internet-and-how-we-use-it-is-evolving.aspx

www.flickr.com/photos/jayfresh/3388253576

41% of emails are now opened on mobile devices ** Source: http://econsultancy.com/uk/blog/62268-41-of-email-is-now-opened-on-mobile-devices

www.flickr.com/photos/miuenski/3127285991

By the end of 2013, mobile phones will overtake PCs as the most common web access device worldwide*Source: www.gartner.com/newsroom/id/2429815

www.flickr.com/photos/jorgeq82/4732700819

The average person looks at their phone 150 times a day.** Source: www.textually.org/textually/archives/2012/02/030229.htm

www.flickr.com/photos/exlibris/2552107635

40% of people use their phone in the bathroom. ** Source: http://www.lukew.com/ff/entry.asp?1500

www.flickr.com/photos/lencioni/5580154551

We go onlineeverywhere and anywhere

www.flickr.com/photos/chicitoloco/8468592748/in/photostream

&e old myth that mobile users are rushed & on the go doesn’t hold true

www.flickr.com/photos/edduddiee/4307943164

A large proportion of our usage happens when we have time to kill

www.flickr.com/photos/eyesore9/3206408088

&is has implicationsfor UX & design thinking.

www.flickr.com/photos/frantaylor/4296536332

Before the first iPhone the mobile use case was limited

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

DESKTOP FULL WEBSITE

BESPOKE CUT

DOWN WEBSITE

BESPOKE CUT

DOWN WEBSITE

We built separate sites for mobile & desktop

www.flickr.com/photos/demandaj/7287174776

In fact, we still do but we’re noticing something

www.flickr.com/photos/joachim_s_mueller/7110473339

Users .pect an equal & continuous experience across devices

www.flickr.com/photos/pandiyan/4550066009

“ 7 out of 10 smartphone and tablet users expect the same quality of experience on all devices. ” ** Source: www.vibrantmedia.co.uk/press/press.asp?section=press_releases&id=256

www.flickr.com/photos/martinteschner/4569495912

&ere are a number of reasons for this

www.flickr.com/photos/philippe/2462550872

People carry out the same tasks on mobiles as they do on desktops

www.flickr.com/photos/joeybones/6791201819

Devices & services are getting more advanced & optimised for complex tasks

www.flickr.com/photos/soyproject/6066959891

We no longer own just one device but multiple & use them interchangeably

www.flickr.com/photos/visualpunch/7351572896

We want to find what we’re looking for irrespectively of the device we use

www.flickr.com/photos/icedsoul/2486885051

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

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

DESKTOP FULL WEBSITE

BESPOKE CUT

DOWN WEBSITE

BESPOKE CUT

DOWN WEBSITE

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

www.flickr.com/photos/tomitapio/4053123799/in/photostream

So, what should we do?

Today we’ll look at...1. Defining your mobile strategy

2. App design

3. Responsive design

4. Input, orientation & touch screens across devices

5. Practice

6. Q & A

www.flickr.com/photos/martinteschner/4569495912

Our main options are bespoke mobile sites, responsive sites and apps

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

FULL WEBSITE

FULL WEBSITE

FULL WEBSITE

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

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

www.flickr.com/photos/paul-r/217948368

Apps, well we all know they come from app stores

www.flickr.com/photos/tomitapio/4053123799/in/photostream

How do we know when to do what?

www.flickr.com/photos/edenandjosh/2892956576

Bespoke mobile sitesshould be avoided, if we can

www.flickr.com/photos/st3f4n/3476036180

Two main .ceptions:technical limitations to the CMS, or if required for the audience

www.flickr.com/photos/ericconstantineau/5618576278

&e alternative is messy & costly: means maintaining multiple technical solutions & content

www.flickr.com/photos/nikio/3899114449

It means maintaining multiple technical solutions...

www.flickr.com/photos/sharynmorrow/127184319

...and also maintaining multiple versions of your content

www.flickr.com/photos/bulldogsrule/187693681

Realistically that means making cuts & frustrating users

For the first time smartphones and tablets made up more than one-third of total clicks on Google in Q3** Source: http://econsultancy.com/uk/blog/63605-us-mobile-paid-search-spend-up-66-year-on-year-stats

www.flickr.com/photos/antoniolas/4367543346

www.flickr.com/photos/sixmilliondollardan/2493495506

Poor mobile experiences result in the same thing - drop offs

www.flickr.com/photos/jmtimages/2883279193

What we should do is keep the core content the same & optimise the experience, display & interactions to the device

Meet responsive design

www.flickr.com/photos/taytom/5277657429

www.flickr.com/photos/tomitapio/4053123799/in/photostream

But...what about apps?

www.flickr.com/photos/martinteschner/4569495912

Whether to do an app or not comes down to...

www.flickr.com/photos/31878512@N06/4704140020

User & business objectives...

If you need to utilise device specific capabilities...

www.flickr.com/photos/cindyli/3784225848

www.flickr.com/photos/arjencito/6531640463

If offline reading is required...

www.flickr.com/photos/68751915@N05/6869762317

And of course budget

www.flickr.com/photos/andwhynot/2946734025

Analytics of entry points can also provide some guidance

www.flickr.com/photos/haagsuitburo/5349040355

Mainly direct traffic: could be an argument for an app

www.flickr.com/photos/soundslogical/4255801733

Mainly shared links: ensure your site is optimised for mobile

2. App design

www.flickr.com/photos/jdhancock/4354438814

Apps are focused & personal

www.flickr.com/photos/nrkbeta/3906687294/in/photostream

Not as easy as just doing an app for e.g. iOS or Android

www.flickr.com/photos/aforgrave/6168689222

Need to consider fragmentation across different versions & backwards compatibility

Source: http://developer.android.com/about/dashboards/index.html

Relative number of active Android devices across different versions

www.flickr.com/photos/blakespot/4773693893

www.flickr.com/photos/blakespot/4773693893

Comparison of adoption rate of iOS7, iOS6 and iOS5

Source: www.fiksu.com/iOS-7-iPhone-5s-5c-Usage-Tracker

www.flickr.com/photos/gadl/3570118243

Every platform has their own ui guidelines that their users are used to

iPhone resources help & inspiration well documented

Android resources help & inspiration a little less well documented for earlier versions

www.flickr.com/photos/saucef/7184615025

Start by sketching screenflows, navigation & content

www.flickr.com/photos/lindzgraham/5605911999

Avoid using the home screen as a stepping point. Instead deliver value from first view

Testing apps flow, navigation, interactions, transitions

From testing sketches as paper prototypes or as clickable prototypes...

www.flickr.com/photos/grinblo/8659685975 www.flickr.com/photos/waagsociety/8888907062

...to iterations of wireframes & designs

www.flickr.com/photos/fluent_methods/6961802861

3. 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

www.flickr.com/photos/adactio/5818096043

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

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

&e backbone is your grid & breakpoints

Columns & gutters can be fluid or fixed, or a combination.

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

www.flickr.com/photos/donsolo/2136923757

&e grid helps with defining modules for pages & views

“ Content needs to be choreographed to ensure the intended message is preserved on any

device and at any width “- Trent Walton

www.flickr.com/photos/theaftershock/2811382400

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

Define your content stacking strategy across devices & orientation.

http://thenextweb.com/

So that it’s care8lly considered, like this

Mobile or desktop first, the key is considering the content & how it will work across devices

www.flickr.com/photos/melodramababs/2766765248

“ Mobile navigation should be like a good friend: there when you need them but cool enough to give you your space. “* Source: http://bradfrostweb.com/blog/web/responsive-nav-patterns

Brad Fr9t has written 2 excellent posts on Responsive navigation patterns

xxxhttp://bradfrostweb.com/blog/web/responsive-nav-patterns

http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design

www.flickr.com/photos/inpivic/5205918163/

Consider your project: assess the depth needed as well as pros & cons of approaches

http://palantir.net/blog/scalable-navigation-patterns-responsive-web-design

Define & work with t:es of navigation: primary, secondary, tertiary, footer & contextual

Test as early as possible& then continuously

In the browser by resizing the browser window & checking the display of content

http://thenextweb.com

www.flickr.com/photos/jorgeq82/4732700819

In the browser by designing in the browser & creating a working HTML prototype

http://responsive.is/typecast.com

Using tools that help you style & test your typography before implementing it

www.responsinator.com/

http://quirktools.com/screenfly/

http://screenqueri.es/

Using emulators that allow you to view your site across devices & orientations

http://mattkersley.com/responsive/

www.flickr.com/photos/arne/5835855777/in/photostream

On actual devices, though expensive there are ways around it

4. Input, orientation,touch screens across devices

www.flickr.com/photos/patdavid/9391602153

“ Touch has landed on the desktop. “- J9h Clark

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

‘New rule: every desktop design has to go finger-friendly’** Source: http://globalmoxie.com/blog/desktop-touch-design.shtml

As always... ...it depends

“ Touch screen laptop sales have jumped 52% in the last quarter. 5 years from now you will you not be able to buy a Windows computer without a touch screen. ”** Source: http://www.lukew.com/ff/entry.asp?1750

Screenshot from www.currys.co.uk

www.flickr.com/photos/adactio/6153481666

We should consider touch across all devices & screen sizes. Not just smartphones & tablets

www.flickr.com/photos/intelfreepress/6837427202

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

&e way we use touch screens differ based on device, but also across the same device

www.flickr.com/photos/janitors/9968676044

www.flickr.com/photos/jorgeq82/4732700819

49% of users hold their phone in one hand, but how they hold it differs

ONE HAND (R: 66% L: 33%)

CRADLING (L: 79% R: 21%)

TWO HANDS

72% 28%

90% 10%

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

Other variationsbased on 1,333 observations during 2 months

Holding our devices is not a static stage. It changes

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

Reading Watching Typing

Certain orientations are betterfor certain tasks

&ere are three main approaches for adapting to orientation

RE-POSITION REVEAL/ HIDESCALE

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

We need to consider precise (e.g. mouse) v.s imprecise (e.g. fingers) input means

5. ;me to practice

www.flickr.com/photos/pinkpurse/5355919491

A major dating site has asked you to create a campaign for Valentines day 2014 focused on "unexpected moments". The purpose is to facilitate encounters & dates between people in Dublin looking to find that special someone.

The site/app should support finding people nearby and location should be a key way for both discovering people & suggestions for date activities. The following should also be included:

&eBRIEF

• About page• Search (people, activities)• Activity suggestions• Notifications

• Login & registration• Data visualisations (active users, dates

organised etc)

www.flickr.com/photos/pinkpurse/5355919491

01

HOW WOULD MOST PEOPLE ACCESS IT?• Direct traffic vs. shared links?

WHAT DO YOU NEED IT TO DO?• Device specific capabilities needed?• Is offline reading/ usage required?

WHAT ARE THE OBJECTIVES & PRACTICALITIES?• The budget• The current technical platform• Could an app be re-used later• The marketing value of an app

BESPOKE MOBILE SITE VS. RESPONSIVE VS. AN APP

The client has come to you with their idea and are asking for your advice on what they should be doing and considering.

What would you recommend in terms of mobile presence & why? A bespoke mobile site, responsive design, an app or a combination?

Consider:

www.flickr.com/photos/pinkpurse/5355919491

02 CONTENT STACKING STRATEGY

Together the client and you have decided to go with a responsive site, which can also form the basis for their app presence. Now it’s time to get to work.

For the home page only, work through (sketching) how the content should be displayed and prioritised (content stacking)Consider desktop, mobile, smartphone

The site should support finding people nearby and location should be a key way for both discovering people & suggestions for date activities. The following should also be included:• About page• Search (people, activities)• Activity suggestions• Notifications

• Login & registration• Data visualisations (active users, dates

organised etc)

Start by identifying the main module types & common

elements between pages

Define your content stacking strategy across devices & orientations

Desktop/ tablet Mobile

3 Nav

7Related products

2 Header

4Bath

section intro

6Types of baths

9 Tools

10Footer

8 Store locator

1 Logo

5Ad3

Nav

7Related products

2Header

4Bath section intro

6Types of baths

9 Tools

10Footer

8 Store locator

1Logo

5Ad

www.flickr.com/photos/garrettc/6260768486/

Don’t just work with columns but think of the narrative of the views

Desktop/ Tablet Mobile

3 Nav

7Related products

2Header

4Bath section intro

6Types of baths

9 Tools

10Footer

8 Store locator

1Logo

5Ad

3 Nav

7Related products

2 Header

9 Tools

10Footer

8 Store locator

1 Logo

5Ad

4Bath

section intro

6Types of baths

Define display variations as well as the elements they are made up of

Desktop/ tablet Mobile

Desktop/ Tablet Mobile

3 Nav

7Related products

2Header

4Bath section intro

6Types of baths

9 Tools

10Footer

8 Store locator

1Logo

5Ad

3 Nav

7Related products

2 Header

9 Tools

10Footer

8 Store locator

1 Logo

5Ad

4Bath

section intro

6Types of baths

Isolate elements that need to be able to break out to meet your content stacking strategy

Desktop/ tablet Mobile

www.flickr.com/photos/katherinekenny

Adapt to the device & screen in question; both order & priority as well as interactions, how much to show & how

Desktop/ Tablet Mobile

3 Nav

7Related products

2Header

4Bath section intro

6Types of baths

9 Tools

10Footer

8 Store locator

1Logo

5Ad

3 Nav

7Related products

2 Header

9 Tools

10Footer

8 Store locator

1 Logo

5Ad

4Bath

section intro

6Types of baths

Desktop/ tablet Mobile

Little by little you build up a module library of defined components for your views, across devices & orientations

www.flickr.com/photos/pinkpurse/5355919491

02 CONTENT STACKING STRATEGY

Together the client and you have decided to go with a responsive site, which can also form the basis for their app presence. Now it’s time to get to work.

For the home page only, work through (sketching) how the content should be displayed and prioritised (content stacking)Consider desktop, mobile, smartphone

The site should support finding people nearby and location should be a key way for both discovering people & suggestions for date activities. The following should also be included:• About page• Search (people, activities)• Activity suggestions• Notifications

• Login & registration• Data visualisations (active users, dates

organised etc)

www.flickr.com/photos/martinteschner/4569495912

A few final words

www.flickr.com/photos/byte/8282578241

Aim to make it more future proof by moving away from specific devices

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

&is brings us back to the importance of modularity in responsive design

www.flickr.com/photos/boltofblue/4418442567

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

www.flickr.com/photos/miuenski/3127285991

No more is it about beautiful page designs...

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

...but about views that will look different across browsers, screen sizes & devices

www.flickr.com/photos/boltofblue/4418442567

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

www.flickr.com/photos/gozalewis/3249104929

Basing breakpoints on screen sizes isn’t wrong, but it is a temporary work around

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

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

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

How we approach it depends on your project, budget and time frame & if it’s being built externally

www.flickr.com/photos/bingisser/154452815

What we cannot do is take a waterfall approach with responsive design where we hand over from to the other

We have to work together across disciplines

www.flickr.com/photos/martinteschner/4569495912

&is includes clients both in terms of what they can expect & what will be expected of them

www.flickr.com/photos/byte/8282578241xxx

Responsive 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

www.flickr.com/photos/matterphotography/2739799786

“ Every time you redesign God kills a kitten “- Louis R9enfeld

&ank you!@annadahlstrom | anna.dahlstrom@gmail.comwww.annadahlstrom.com