mcn 2014 - the truly responsive web - cristiano bianchi - keepthinking

Keepthinking

The truly responsive web

20th November 2014

A few ideas

@keepthinking_uk

2

3

Keepthinking - award winning design and software for museums and culture.

About Keepthinking

›❯ Strategy consulting and audience engagement

›❯ Cultural websites

›❯ Exhibition design (combine physical + digital)

›❯ Mobile/web apps

›❯ Integrated Content Management

›❯ Branding

›❯ Social Media Integration

›❯ Everything an organisation needs in one company

4

What we do

About Keepthinking5

Who we work with

Software

›❯ Qi - Universal Content and Collection Management for Museums, Galleries, Archives and Libraries.

6

Qi Museum Management System

The truly responsive web

›❯ Questions

›❯ Common assumptions

›❯ Missing factors

›❯ Three strands to take home

›❯ Conclusions

7

Summary

The truly responsive web

›❯ What does it mean to be responsive?

›❯ Is responsive truly a question of screen size?

›❯ Can responsive design be independent of screen size (and why)?

›❯ What are the factors to consider?

8

Questions

Common assumptions9

What is the web

Source: http://bradfrost.com/blog/web/responsive-web-design-missing-the-point/

Common assumptions10

What is the web

Source: http://bradfrost.com/blog/web/responsive-web-design-missing-the-point/

Common assumptions11

What is the web

Source: http://bradfrost.com/blog/web/responsive-web-design-missing-the-point/

12

“The Web is an inherently unstable medium.” Ethan Maracotte

13

“Mobile is a user state, not a device” Cennydd Bowles

14

“The mobile = less mentality is wrong and damaging. Don't confuse context with intent” Josh Clark

15

“Context is emergent: that is, the activity itself generates and sustains context” Paul Dourish

Common assumptions16

Current practice

›❯ A responsive website is one that adapts to screen size / resolution

›❯ Designers use a bottom-up (mobile first) or top-down (desktop first) approach

›❯ Mobile is typically a scaled down version of desktop

Missing factors 17

From responsive design to responsive philosophy

›❯ Graphical User Interface vs. Natural User Interface

›❯ Lean forward / Lean back

›❯ Content priorities

›❯ Contextual conditions (DETAIL)

Missing factors

›❯ Different ways of interacting with content

›❯ Pinch, swipe, tap, hold

›❯ No hover statuses

›❯ Mobile web still stuck with point and click metaphors

›❯ From Graphical User Interface

18

Natural User Interface

Missing factors

›❯ Kindle/iPad changed how people consume long content

›❯ Desktop: fact finding

›❯ Tablet: leisure/engagement

›❯ Reproduce the ritual of reading printed content

›❯ Ability to consume more - instead of less

›❯ Unique features

›❯ Social sharing

›❯ Higher engagement

19

Lean forward / Lean back

Missing factors

›❯ Responsive to content priorities (template limitations)

›❯ Learn from printed newspaper design

›❯ Not static - combine with Context

20

Content priorities

Source: http://www.codeandtheory.com/things-we-make/responsive-philosophy

Missing factors

›❯ Desktop context.

›❯ Proper computer, comfortable settings

›❯ Tasks that require prolonged concentration

›❯ Mobile context

›❯ Unfamiliar settings, in motion

›❯ Small morsels of information is require

21

Context stereotypes

Truly responsive

›❯ Responsive as design and technology

›❯ Responsive as content that is device specific

›❯ Responsive that is context specific

22

Three strands to take home

1. Design and technology

›❯ Not the only criteria

›❯ Must be combined with other factors

›❯ NTT Docomo estimates that 60% of mobile devices are used indoors

23

Size does matter

2. Content specific

›❯ Lean forward vs. lean back attitude

›❯ Work & relaxation differences

›❯ Challenge that mobile/tablet means ‘less’ as it may mean ‘more’

24

Different attitudes towards content

3. Context specific

›❯ Seven factors to consider

›❯ Device (already mentioned)

›❯ Environment

›❯ Time of the day / day of the week

›❯ Activity/Task

›❯ Individual/Preference

›❯ Location

›❯ Social

›❯ Becoming less device dependent

25

Responsive as an evolving strategy

3. Context specific

›❯ Adapt to device size and capabilities

›❯ Target specific device features (Natural interface design)

›❯ Avoid carrying out the same type of interaction across multiple devices

26

Device

3. Context specific

›❯ Indoor/outdoor conditions

›❯ Adapt to different weather/temperatures

›❯ Should the content and interaction change with seasons?

27

Environment

3. Context specific

›❯ Different expectations at different times

›❯ Different activities

›❯ Working day

›❯ Weekends

›❯ Holiday seasons

›❯ Different devices

28

Time of the day / day of the week / period

3. Context specific

›❯ What will people want to do on different devices?

›❯ Lean forward/back attitudes

›❯ Different types of interaction patterns

›❯ Relationships with physical activities

29

Activity/Task

3. Context specific

›❯ Track what people consume and browse

›❯ Use (gently) to suggest more content (no invasion)

›❯ Analyse individual usage patterns instead of static “See also”

›❯ Allow visitors to express preferences

›❯ Balance implicit / explicit patterns

›❯ First time / repeat visitors

30

Individual/Preference

3. Context specific

›❯ People that are close to you / away from you

›❯ Different degrees of separation (nearby / same city / far away)

›❯ Combine with frequency of visits

31

Location / frequency awareness

3. Context specific

›❯ Content sharing

›❯ Device sharing

›❯ Persistent login

32

Social patterns

Conclusions

›❯ Responsive web is not (just) about screen and device sizes

›❯ Need to evaluate the relationship between content and context

›❯ Re-think the entire content and publication strategy

›❯ Ingest

›❯ Analyse

›❯ Act

›❯ Do less - do it better

33

Towards a visitor ontology

Acknowledgements

›❯ http://www.codeandtheory.com/things-we-make/responsive-philosophy

›❯ http://bradfrost.com/blog/web/responsive-web-design-missing-the-point/

›❯ http://alistapart.com/article/responsive-web-design

›❯ http://www.cennydd.com/blog/designing-with-context

›❯ http://www.economistgroup.com/leanback/collaborators/the-economist-groups-digital-strategy/

34

Sources

35

Thank you.

http://www.keepthinking.it