MCN 2014 - The truly responsive web - Cristiano Bianchi - Keepthinking
-
Upload
keepthinking -
Category
Presentations & Public Speaking
-
view
288 -
download
0
description
Transcript of MCN 2014 - The truly responsive web - Cristiano Bianchi - Keepthinking
![Page 1: MCN 2014 - The truly responsive web - Cristiano Bianchi - Keepthinking](https://reader033.fdocuments.in/reader033/viewer/2022052910/559c55a31a28ab9e1c8b4714/html5/thumbnails/1.jpg)
Keepthinking
The truly responsive web
20th November 2014
A few ideas
@keepthinking_uk
![Page 2: MCN 2014 - The truly responsive web - Cristiano Bianchi - Keepthinking](https://reader033.fdocuments.in/reader033/viewer/2022052910/559c55a31a28ab9e1c8b4714/html5/thumbnails/2.jpg)
2
![Page 3: MCN 2014 - The truly responsive web - Cristiano Bianchi - Keepthinking](https://reader033.fdocuments.in/reader033/viewer/2022052910/559c55a31a28ab9e1c8b4714/html5/thumbnails/3.jpg)
3
Keepthinking - award winning design and software for museums and culture.
![Page 4: MCN 2014 - The truly responsive web - Cristiano Bianchi - Keepthinking](https://reader033.fdocuments.in/reader033/viewer/2022052910/559c55a31a28ab9e1c8b4714/html5/thumbnails/4.jpg)
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
![Page 5: MCN 2014 - The truly responsive web - Cristiano Bianchi - Keepthinking](https://reader033.fdocuments.in/reader033/viewer/2022052910/559c55a31a28ab9e1c8b4714/html5/thumbnails/5.jpg)
About Keepthinking5
Who we work with
![Page 6: MCN 2014 - The truly responsive web - Cristiano Bianchi - Keepthinking](https://reader033.fdocuments.in/reader033/viewer/2022052910/559c55a31a28ab9e1c8b4714/html5/thumbnails/6.jpg)
Software
›❯ Qi - Universal Content and Collection Management for Museums, Galleries, Archives and Libraries.
6
Qi Museum Management System
![Page 7: MCN 2014 - The truly responsive web - Cristiano Bianchi - Keepthinking](https://reader033.fdocuments.in/reader033/viewer/2022052910/559c55a31a28ab9e1c8b4714/html5/thumbnails/7.jpg)
The truly responsive web
›❯ Questions
›❯ Common assumptions
›❯ Missing factors
›❯ Three strands to take home
›❯ Conclusions
7
Summary
![Page 8: MCN 2014 - The truly responsive web - Cristiano Bianchi - Keepthinking](https://reader033.fdocuments.in/reader033/viewer/2022052910/559c55a31a28ab9e1c8b4714/html5/thumbnails/8.jpg)
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
![Page 9: MCN 2014 - The truly responsive web - Cristiano Bianchi - Keepthinking](https://reader033.fdocuments.in/reader033/viewer/2022052910/559c55a31a28ab9e1c8b4714/html5/thumbnails/9.jpg)
Common assumptions9
What is the web
Source: http://bradfrost.com/blog/web/responsive-web-design-missing-the-point/
![Page 10: MCN 2014 - The truly responsive web - Cristiano Bianchi - Keepthinking](https://reader033.fdocuments.in/reader033/viewer/2022052910/559c55a31a28ab9e1c8b4714/html5/thumbnails/10.jpg)
Common assumptions10
What is the web
Source: http://bradfrost.com/blog/web/responsive-web-design-missing-the-point/
![Page 11: MCN 2014 - The truly responsive web - Cristiano Bianchi - Keepthinking](https://reader033.fdocuments.in/reader033/viewer/2022052910/559c55a31a28ab9e1c8b4714/html5/thumbnails/11.jpg)
Common assumptions11
What is the web
Source: http://bradfrost.com/blog/web/responsive-web-design-missing-the-point/
![Page 12: MCN 2014 - The truly responsive web - Cristiano Bianchi - Keepthinking](https://reader033.fdocuments.in/reader033/viewer/2022052910/559c55a31a28ab9e1c8b4714/html5/thumbnails/12.jpg)
12
“The Web is an inherently unstable medium.” Ethan Maracotte
![Page 13: MCN 2014 - The truly responsive web - Cristiano Bianchi - Keepthinking](https://reader033.fdocuments.in/reader033/viewer/2022052910/559c55a31a28ab9e1c8b4714/html5/thumbnails/13.jpg)
13
“Mobile is a user state, not a device” Cennydd Bowles
![Page 14: MCN 2014 - The truly responsive web - Cristiano Bianchi - Keepthinking](https://reader033.fdocuments.in/reader033/viewer/2022052910/559c55a31a28ab9e1c8b4714/html5/thumbnails/14.jpg)
14
“The mobile = less mentality is wrong and damaging. Don't confuse context with intent” Josh Clark
![Page 15: MCN 2014 - The truly responsive web - Cristiano Bianchi - Keepthinking](https://reader033.fdocuments.in/reader033/viewer/2022052910/559c55a31a28ab9e1c8b4714/html5/thumbnails/15.jpg)
15
“Context is emergent: that is, the activity itself generates and sustains context” Paul Dourish
![Page 16: MCN 2014 - The truly responsive web - Cristiano Bianchi - Keepthinking](https://reader033.fdocuments.in/reader033/viewer/2022052910/559c55a31a28ab9e1c8b4714/html5/thumbnails/16.jpg)
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
![Page 17: MCN 2014 - The truly responsive web - Cristiano Bianchi - Keepthinking](https://reader033.fdocuments.in/reader033/viewer/2022052910/559c55a31a28ab9e1c8b4714/html5/thumbnails/17.jpg)
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)
![Page 18: MCN 2014 - The truly responsive web - Cristiano Bianchi - Keepthinking](https://reader033.fdocuments.in/reader033/viewer/2022052910/559c55a31a28ab9e1c8b4714/html5/thumbnails/18.jpg)
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
![Page 19: MCN 2014 - The truly responsive web - Cristiano Bianchi - Keepthinking](https://reader033.fdocuments.in/reader033/viewer/2022052910/559c55a31a28ab9e1c8b4714/html5/thumbnails/19.jpg)
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
![Page 20: MCN 2014 - The truly responsive web - Cristiano Bianchi - Keepthinking](https://reader033.fdocuments.in/reader033/viewer/2022052910/559c55a31a28ab9e1c8b4714/html5/thumbnails/20.jpg)
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
![Page 21: MCN 2014 - The truly responsive web - Cristiano Bianchi - Keepthinking](https://reader033.fdocuments.in/reader033/viewer/2022052910/559c55a31a28ab9e1c8b4714/html5/thumbnails/21.jpg)
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
![Page 22: MCN 2014 - The truly responsive web - Cristiano Bianchi - Keepthinking](https://reader033.fdocuments.in/reader033/viewer/2022052910/559c55a31a28ab9e1c8b4714/html5/thumbnails/22.jpg)
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
![Page 23: MCN 2014 - The truly responsive web - Cristiano Bianchi - Keepthinking](https://reader033.fdocuments.in/reader033/viewer/2022052910/559c55a31a28ab9e1c8b4714/html5/thumbnails/23.jpg)
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
![Page 24: MCN 2014 - The truly responsive web - Cristiano Bianchi - Keepthinking](https://reader033.fdocuments.in/reader033/viewer/2022052910/559c55a31a28ab9e1c8b4714/html5/thumbnails/24.jpg)
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
![Page 25: MCN 2014 - The truly responsive web - Cristiano Bianchi - Keepthinking](https://reader033.fdocuments.in/reader033/viewer/2022052910/559c55a31a28ab9e1c8b4714/html5/thumbnails/25.jpg)
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
![Page 26: MCN 2014 - The truly responsive web - Cristiano Bianchi - Keepthinking](https://reader033.fdocuments.in/reader033/viewer/2022052910/559c55a31a28ab9e1c8b4714/html5/thumbnails/26.jpg)
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
![Page 27: MCN 2014 - The truly responsive web - Cristiano Bianchi - Keepthinking](https://reader033.fdocuments.in/reader033/viewer/2022052910/559c55a31a28ab9e1c8b4714/html5/thumbnails/27.jpg)
3. Context specific
›❯ Indoor/outdoor conditions
›❯ Adapt to different weather/temperatures
›❯ Should the content and interaction change with seasons?
27
Environment
![Page 28: MCN 2014 - The truly responsive web - Cristiano Bianchi - Keepthinking](https://reader033.fdocuments.in/reader033/viewer/2022052910/559c55a31a28ab9e1c8b4714/html5/thumbnails/28.jpg)
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
![Page 29: MCN 2014 - The truly responsive web - Cristiano Bianchi - Keepthinking](https://reader033.fdocuments.in/reader033/viewer/2022052910/559c55a31a28ab9e1c8b4714/html5/thumbnails/29.jpg)
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
![Page 30: MCN 2014 - The truly responsive web - Cristiano Bianchi - Keepthinking](https://reader033.fdocuments.in/reader033/viewer/2022052910/559c55a31a28ab9e1c8b4714/html5/thumbnails/30.jpg)
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
![Page 31: MCN 2014 - The truly responsive web - Cristiano Bianchi - Keepthinking](https://reader033.fdocuments.in/reader033/viewer/2022052910/559c55a31a28ab9e1c8b4714/html5/thumbnails/31.jpg)
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
![Page 32: MCN 2014 - The truly responsive web - Cristiano Bianchi - Keepthinking](https://reader033.fdocuments.in/reader033/viewer/2022052910/559c55a31a28ab9e1c8b4714/html5/thumbnails/32.jpg)
3. Context specific
›❯ Content sharing
›❯ Device sharing
›❯ Persistent login
32
Social patterns
![Page 33: MCN 2014 - The truly responsive web - Cristiano Bianchi - Keepthinking](https://reader033.fdocuments.in/reader033/viewer/2022052910/559c55a31a28ab9e1c8b4714/html5/thumbnails/33.jpg)
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
![Page 34: MCN 2014 - The truly responsive web - Cristiano Bianchi - Keepthinking](https://reader033.fdocuments.in/reader033/viewer/2022052910/559c55a31a28ab9e1c8b4714/html5/thumbnails/34.jpg)
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