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