beyond the mobile web...               http://www.flickr.com/photos/puuikibeach/3991552331
Part 1: Massive Change    http://www.flickr.com/photos/chadmagiera/265752353
“The most profound technologies are thosethat disappear. They weave themselvesinto the fabric of everyday life until they ...
There used to be a certain (old fashioned)logic to the way we interacted withpeople, places, and things.                  ...
You wanted knowledge,  you went to a library      http://www.flickr.com/photos/ccacnorthlib/3554627364        http://www.fli...
You wanted to be social,you went to a club or cafe           http://www.flickr.com/photos/lordcolus/3271042499
You wanted to consume,    you went to a shop         http://www.flickr.com/photos/herry/3005310002
These behaviours were imposed on us by culture, society, and plain old physics and geography.                             ...
Then internet came along...and things got a lot closer.                                          http://www.flickr.com/phot...
but until recently, using theinternet was still “an activity”...             http://www.flickr.com/photos/whatcouldgowrong/...
envir                 onme                     nt                              focused user                               ...
this context has beenturned on its head...      http://www.flickr.com/photos/anap/2878165366
<historical interlude>                  http://www.flickr.com/photos/dumbledad/3262185149
“One of the interesting estimates is that there areabout 35 billion devices connected to theInternet. Soon, there will be ...
6.8 billion*2010 estimates put the population over 6.8 billion inhabitants...
77%          number of people with mobile devicesor 5.3 billion at the end of 2010 – U.N. Telecommunications Agency, http:...
free platforms+ low cost components= a perfect storm                    http://www.flickr.com/photos/deks/697297227
and a lot of disruption...          http://www.flickr.com/photos/oskay/3300199882
a free operating system (Android)  dual core ARM 9 @ 416MHz2G GSM/EDGE  2.8” QVGA resistive touch screen  2MP camera  GPS+...
the feature phone of today isthe smartphone of two years ago...                     http://www.flickr.com/photos/tanj/44323...
yet again                                                 things may change...                     Do Not Anger the Alpha ...
...which brings us to the present</historical interlude>         even beer         than cake...                          ...
http://www.flickr.com/photos/misbehave/2352753067             Were in a world of one line of connectivity. Thats us.       ...
the internet is nowan intricate part of our lives           http://www.flickr.com/photos/marksurman/3933656879
chatting with friends in Boston...                                       scheduling a meeting in Melbourne...             ...
“For kids like my 13 year-old, theboundaries between the internet andlife are so porous as to be meaningless.“Comment on t...
...people reach for the internet using whatever      device makes sense to them at that time                              ...
“   ...[the Kindle browser] is somewhat slow but    it definitely works, in fact my teen daughter    uses hers constantly.....
“   ...discovering that I can get on mobile.twitter.com    in China from my Kindle over Edge. Yay!    Jeremy Keith on Twit...
“http://www.flickr.com/photos/jcfrog/4692750598                                                ...the mobile internet is mo...
this is having a dramatic impact onour behaviour and our expectations...                 http://www.flickr.com/photos/willi...
the traditional ‘short-activity-or-distraction’         mobile context is still valid...
80% use mobile during                                                        miscellaneous downtime...Source: Compete quar...
80% use mobile while waiting                                                         in line or for an appointment...Sourc...
“Just been picked upat the airport by alimo driver wholooked me up onthe Internet so hedrecognize me andhave stuff to talka...
but mobile is increasingly beingcombined with other activities...
62% use mobile                                                        while watching TVSource: Compete quarterly smartphon...
69% use mobile for                                                        point of sale research                          ...
mobile is also used                          to time-shift59%            ...and follow upsometimes      on the PCvisit a s...
34%visit a site on                  and follow-up                   on mobilethe PC                   Source: Yahoo mobile...
Research on smartphone,67%   then buy in store.                                 and so on...      Research on smartphone,2...
...facilitating completion                                                        of larger tasks“The most expensive item ...
“The largest purchase on the M&S mobileweb site last Christmas was two sofascosting over £3000 ($5000)“ src: Marketing Wee...
1.3 billionalready use the mobile internet
...and for many, mobile is                                                                                               t...
“           With current growth rates, Web access by people              on the move—via laptops and smart mobile devices—...
public space                                                               distractions                          limited a...
environment                             reliable                                          network  focused user           ...
focused                                     user                  1hr train ride                                          ...
comfy                                       chair                             privacy                           one handre...
iPad 2 magnets are                                                                                               apparentl...
these new behaviourscreate a bit of a problem...           http://www.flickr.com/photos/barkbud/4914492619
cues and guidelines that were important logical just a few years months ago are still useful...but no longer reliable
“   Context is King: circumstances or conditions that surround    a person, place or thing. Content is of little value if ...
“   Google (2007) breaks down mobile users    into three behaviour groups:    A. "Repetitive now"    B. "Bored now"    C. ...
“   Mobile user: typically on the go in an unpredictable    environment, interested in quick glanceable    information, fo...
now statements such as these are  becoming far more common
“             i love it! nice and clean look, easy to navigate                           and easy to read. well done! but....
“             There should be a text only version of the                              (desktop) site for those of us who d...
“             ...mobile users want to see our menu, hours,                            and delivery number...(but)...deskto...
“            I’m definitely moving, I’m in a car. I’m going to look at your website.                This doesn’t mean my in...
the problem spaceHow do we go about creating the next generationof content-rich, meaningful, usable, andinteresting web si...
Part 2: Beyond the mobile web             http://www.flickr.com/photos/adactio/932798536
...a few ideasfrom the yiibus
Idea 1: Loosen up  http://www.flickr.com/photos/seo2/94216483
control is now an illusion...          http://www.flickr.com/photos/dominicspics/3385403397
there is too much diversity...
data wants to move around...http://www.flickr.com/photos/anniemole/5354202837
we’ve already set much of our content free...      http://www.flickr.com/photos/scobleizer/3044172251/
...we neverreally know    where itwill end up
dspot the bran                                                                             brand presence                 ...
the conversation isn’t even                             on our site any more......companies are increasingly questioning t...
...so why are we stillobsessed with controllingeach pixel on our web site?PS - the Ubuntu style guidelines are actually qu...
“I can’t see it on my BlackBerry...“                              often at the- user comment regarding the new Threadless ...
“If I can’t see your awesomeweb site...it’s not really thatawesome is it?”                                         and the...
you can’t plan for every contingency...                      http://www.flickr.com/photos/mackarus/4289960218
and will never know how your  site looks on every device...              http://www.flickr.com/photos/hendry/5491251497/
create nimble experiences       – not perfect ones...        http://www.flickr.com/photos/92523880@N00/5047216186
Idea 2: Let them tweak     http://www.flickr.com/photos/jaybergesen/198091718
progressive enhancementis more important than ever            http://www.flickr.com/photos/clagnut/315554083
why not let users participate?            http://www.flickr.com/photos/nasa_goddard/4733847144
choose the enhancementsare most meaningful to them...            http://www.flickr.com/photos/29301264@N06/3844309716
set a user experience baseline                                      for *all* web experiences...thematically              ...
...then providemeaningful choices    http://www.flickr.com/photos/lamantin/5143354304
idea 1: adjusting                                                         data consumption               user agent says i...
provide a choice of size or                                                                                quality for key...
and                     media...    choice of qualityoption to choose high or low quality(with default basedof device you’...
Look, it’s a Galaxy Tab...she must bein a ‘contemplative reading mode’...                                        idea 2: t...
pinching or double-tapping to zoom is good fun but has           zero continuity...
let users set persistentreading preferences...            Source: Craigmod.com
or even tweak thewhole experience...     algorithm can create     40,000 logo shapes in     12 different color     combinat...
...if you don’t ...they’ll probably do it themselves
Idea 3: Content firstingredients makeall the difference                      http://www.flickr.com/photos/wwworks/822821227
designing mobile firstcan help us to focus...  http://www.flickr.com/photos/hussain_quantum/2087578696
find a happy medium                                                      mobile   portable   desktop                       ...
but I think we need     to go further... http://www.flickr.com/photos/basheertome/5557362895
“   No matter how cool your interface is, it    would be nice if there were less of it.    - Alan Cooper                  ...
...on smaller screens, contentnaturally ends up front and centre
include definition(s)                    so we need to actually                                            design the conte...
semantic structures can beinclude definition(s)       used to create incredibly rich                              and respo...
yet we mostly apply thisrichness to the interface...
this is due in part to the way         we currently build web sites...              essentially Word in a browser...?put y...
most sites are built as giant(often all-purpose) data containers...                   http://www.flickr.com/photos/lisasand...
...with different areas to                            accommodate different data structures                 services        ...
this makes senseif you have big data...      http://www.flickr.com/photos/dalbera/3151369718
...or primarily user    generated data
namecover                            cost              rating                                        ...or inherently     ...
but can be pretty painful if youneed to produce content like this...
or this...
...and especially this!http://www.nytimes.com/interactive/2007/10/01/science/20071002_ARCTIC_GRAPHIC.html
The rabbit-hole went straight on like a tunnel for some way, and then dipped suddenly down, so suddenly that Alice had not...
The rabbit-hole went straight on like a tunnel for some way, and then dipped suddenly down, so suddenly that Alice had not...
so although the web sitelayout may be responsive...
desktop                   the content itself is often                            only barely so...          tabletmobile
what if content wasdesigned more like an app?                       data         logic                              render...
http://www.nytimes.com/interactive/2010/05/01/us/20100501-oil-spill-tracker.html
http://www.visualnews.com/interactive_infographic/Korea_interactive_main/
http://www.apple.com/ipad/smart-cover/
and              what if?http://www.focus.com/images/view/11905/  http://www.apple.com/ipad/smart-cover/
Idea 4: Build distributed experiences                   http://www.flickr.com/photos/wwarby/5106781173
maybe theseno longer meet our needs...           http://www.flickr.com/photos/mikebaird/3898801499
perhaps a couple of these    would do just fine...      http://www.flickr.com/photos/56705607@N00/3555678336
PRsupport                   we’ve already decoupled                           our communications...               web site...
PRsupport                        our product marketing...                    web site                                     ...
PRsupport                        our human resources...                    web site                                       ...
PR                                                     yet still united by asupport                                       ...
think of it as an ecosystem oftouchpoints, utilities & conversations...                      http://www.flickr.com/photos/7...
ads                      we see                         examples of                         this already                 m...
cloud                      not just a site,                      but an ecosystembooks   marketplace          music
opportunistic?      may not last long                       own hardware with           cloud                        highl...
core audience                                                 merchandise              and create the best                ...
“ [In the future] brands will no longer be placesyou visit, but people you meet along the road.                           ...
Upcoming SlideShare
Loading in...5
×

Beyond the mobile web by yiibu

108,885

Published on

Presented by Stephanie Rieger at Breaking Development in Dallas, April 11 2011 and Mobilism in Amsterdam, May 12, 2011.

Context is often cited as the single most important factor in design for the mobile medium. Mobile devices are of course 'mobile', but they are also small, always on, always with us, and can instantly connect us to the people we love. Mobile services must therefore be simple, social, and well-focussed--enabling us to quickly get things done on even the smallest screens.

This is all well and good, but mobile devices have changed. They may be mobile, but many have already stopped being 'phones'—nor do they resemble what we traditionally think of as computers. This presentation will explore how our use, and perception of mobile devices is changing, and how these changes may impact how we should design for them going forward.

Published in: Technology, Business
29 Comments
499 Likes
Statistics
Notes
No Downloads
Views
Total Views
108,885
On Slideshare
0
From Embeds
0
Number of Embeds
90
Actions
Shares
0
Downloads
4,666
Comments
29
Likes
499
Embeds 0
No embeds

No notes for slide

Beyond the mobile web by yiibu

  1. 1. beyond the mobile web... http://www.flickr.com/photos/puuikibeach/3991552331
  2. 2. Part 1: Massive Change http://www.flickr.com/photos/chadmagiera/265752353
  3. 3. “The most profound technologies are thosethat disappear. They weave themselvesinto the fabric of everyday life until they areindistinguishable from it….- Mark Weiser (1991) http://www.flickr.com/photos/armaggeusa/3176297283
  4. 4. There used to be a certain (old fashioned)logic to the way we interacted withpeople, places, and things. http://www.flickr.com/photos/mcgraths/5332476357
  5. 5. You wanted knowledge, you went to a library http://www.flickr.com/photos/ccacnorthlib/3554627364 http://www.flickr.com/photos/scobleizer/3026517429
  6. 6. You wanted to be social,you went to a club or cafe http://www.flickr.com/photos/lordcolus/3271042499
  7. 7. You wanted to consume, you went to a shop http://www.flickr.com/photos/herry/3005310002
  8. 8. These behaviours were imposed on us by culture, society, and plain old physics and geography. http://www.flickr.com/photos/robertsharp59/3749693084
  9. 9. Then internet came along...and things got a lot closer. http://www.flickr.com/photos/dahlstroms/3444838707
  10. 10. but until recently, using theinternet was still “an activity”... http://www.flickr.com/photos/whatcouldgowrong/5320553588
  11. 11. envir onme nt focused user privacyreliablenetworkunlimited with a fairly specific context data comfy chair full-sized keyboard work surface reliable power source http://www.flickr.com/photos/fuzzcat/22019163
  12. 12. this context has beenturned on its head... http://www.flickr.com/photos/anap/2878165366
  13. 13. <historical interlude> http://www.flickr.com/photos/dumbledad/3262185149
  14. 14. “One of the interesting estimates is that there areabout 35 billion devices connected to theInternet. Soon, there will be so many that we’llstop counting. - Eric Schmidt, Google http://www.flickr.com/photos/webtreatsetc/4860505549/
  15. 15. 6.8 billion*2010 estimates put the population over 6.8 billion inhabitants...
  16. 16. 77% number of people with mobile devicesor 5.3 billion at the end of 2010 – U.N. Telecommunications Agency, http://www.itu.int
  17. 17. free platforms+ low cost components= a perfect storm http://www.flickr.com/photos/deks/697297227
  18. 18. and a lot of disruption... http://www.flickr.com/photos/oskay/3300199882
  19. 19. a free operating system (Android) dual core ARM 9 @ 416MHz2G GSM/EDGE 2.8” QVGA resistive touch screen 2MP camera GPS+ WIFI and BlueTooth silicon= <$90 components + plastic case Actions-Semi, MTK, TongXinDa , Rockchip... ~4 weeks to market! http://casium.fr/component/kashyap/bc_detail/109 http://www.visionmobile.com/blog/2010/09/waking-the-dragon-the-rise-of-android-in-china-2/ http://www.flickr.com/photos/oskay/3300199882
  20. 20. the feature phone of today isthe smartphone of two years ago... http://www.flickr.com/photos/tanj/4432327487
  21. 21. yet again things may change... Do Not Anger the Alpha Androidhttp://www.businessweek.com/magazine/content/11_15/b4223041200216.htm http://www.flickr.com/photos/aturkus/255736909
  22. 22. ...which brings us to the present</historical interlude> even beer than cake... they spent about an hour staring like this...
  23. 23. http://www.flickr.com/photos/misbehave/2352753067 Were in a world of one line of connectivity. Thats us. You see...we dont have to "go" to the internet any more. Mitch Joel, TedX Montreal
  24. 24. the internet is nowan intricate part of our lives http://www.flickr.com/photos/marksurman/3933656879
  25. 25. chatting with friends in Boston... scheduling a meeting in Melbourne... re-charging in Hong Kong... it’s now trivial (and commonplace) for people to be in many places at once
  26. 26. “For kids like my 13 year-old, theboundaries between the internet andlife are so porous as to be meaningless.“Comment on the Guardian web site http://www.flickr.com/photos/tocaboca/5523598823
  27. 27. ...people reach for the internet using whatever device makes sense to them at that time http://www.flickr.com/photos/ghewgill/5046616680
  28. 28. “ ...[the Kindle browser] is somewhat slow but it definitely works, in fact my teen daughter uses hers constantly...among other things she uses it to keep in touch with her friends. People discussing the Kindle browser on a message board http://www.flickr.com/photos/ghewgill/5046616680
  29. 29. “ ...discovering that I can get on mobile.twitter.com in China from my Kindle over Edge. Yay! Jeremy Keith on Twitter last month in Shanghai http://www.flickr.com/photos/ghewgill/5046616680
  30. 30. “http://www.flickr.com/photos/jcfrog/4692750598 ...the mobile internet is more convenient than my home connection... say 30% of respondents - Yahoo/Nielsen Mobile Shopping PDF
  31. 31. this is having a dramatic impact onour behaviour and our expectations... http://www.flickr.com/photos/williambrawley/4522648456
  32. 32. the traditional ‘short-activity-or-distraction’ mobile context is still valid...
  33. 33. 80% use mobile during miscellaneous downtime...Source: Compete quarterly smartphone report, Jan 2010 http://www.flickr.com/photos/missmeng/5327470961
  34. 34. 80% use mobile while waiting in line or for an appointment...Source: Compete quarterly smartphone report, Jan 2010 http://www.flickr.com/photos/wonderdawg777/662293238
  35. 35. “Just been picked upat the airport by alimo driver wholooked me up onthe Internet so hedrecognize me andhave stuff to talkabout. !!!http://twitter.com/tomcoates/status/51734242991947778 http://www.flickr.com/photos/joi/2663605178
  36. 36. but mobile is increasingly beingcombined with other activities...
  37. 37. 62% use mobile while watching TVSource: Compete quarterly smartphone report, Jan 2010 http://www.flickr.com/photos/bcmom/375125992
  38. 38. 69% use mobile for point of sale research while shoppingSource: Compete quarterly smartphone report, Jan 2010 http://www.flickr.com/photos/lollaping/3327541574
  39. 39. mobile is also used to time-shift59% ...and follow upsometimes on the PCvisit a siteon mobile Source: Yahoo mobile shopping framework study
  40. 40. 34%visit a site on and follow-up on mobilethe PC Source: Yahoo mobile shopping framework study
  41. 41. Research on smartphone,67% then buy in store. and so on... Research on smartphone,23% then visit store to check product out, then buy on PC. Research on smartphone,16% then visit store to check product out, then buy on smartphone. Visit store, then buy9% on smartphone. Source: The mobile movement study, Google
  42. 42. ...facilitating completion of larger tasks“The most expensive item sold via eBay’smobile app was a 1985 Piper PA-46-310PMalibu airplane for $265,000.“ src: Mashable http://en.wikipedia.org/wiki/Piper_PA-46
  43. 43. “The largest purchase on the M&S mobileweb site last Christmas was two sofascosting over £3000 ($5000)“ src: Marketing Week and important life decisions... http://www.flickr.com/photos/plagevinilosyadhesivosdecorativos/5549366513
  44. 44. 1.3 billionalready use the mobile internet
  45. 45. ...and for many, mobile is the only access point Russia 19% UK 22% China 22% USA 25% India 59% 25% of Egypt 70% American’s don’t use the 2-3GB home ADSL Internet at all data ~$100/mth, ~$2/mth PAYG unlimited mobile data ~$17/mth Indonesia 44% S. Africa 57%Based on “Users who never or infrequently use the desktop web”, Source: On Device Research, Dec 2010Related: Opera mobile-only study specific to India (May 2011) and NY Times article on lack of Internet access in rural America (Feb 2011)
  46. 46. “ With current growth rates, Web access by people on the move—via laptops and smart mobile devices— is likely to exceed web access from desktop computers within the next five years....or by 2015 - Source: ITU vis mobiThinking http://www.flickr.com/photos/whiteafrican/2938685296
  47. 47. public space distractions limited aention so ‘mobile’ is no longer just this... glanceable? one hand simple? tedious input personal http://www.flickr.com/photos/oimax/3800475934
  48. 48. environment reliable network focused user unlimited data full-sized it’s now also this... keyboard privacycomfy work surface chair reliable power source http://www.flickr.com/photos/othree/5224045406
  49. 49. focused user 1hr train ride privacy reliable network? comfy unlimited wi ? chair two handsreliable power source? or this...
  50. 50. comfy chair privacy one handreliable power prone to source interruptions gravity and maybe some of this? http://www.flickr.com/photos/joeshlabotnik/2359224681
  51. 51. iPad 2 magnets are apparently strong enough to ‘natively’ do this! or possibly this...http://www.flickr.com/photos/mattedgar/3724116027http://tumblr.topherhulett.com/post/3902283232/i-know-you-were-wondering-yes-the-magnets-in
  52. 52. these new behaviourscreate a bit of a problem... http://www.flickr.com/photos/barkbud/4914492619
  53. 53. cues and guidelines that were important logical just a few years months ago are still useful...but no longer reliable
  54. 54. “ Context is King: circumstances or conditions that surround a person, place or thing. Content is of little value if it does not address the context of where you are. - Cameron Moll, SXSW, 2007 http://www.flickr.com/photos/webtreatsetc/4860505549/
  55. 55. “ Google (2007) breaks down mobile users into three behaviour groups: A. "Repetitive now" B. "Bored now" C. "Urgent now" http://www.flickr.com/photos/webtreatsetc/4860505549/
  56. 56. “ Mobile user: typically on the go in an unpredictable environment, interested in quick glanceable information, focused on discrete individual tasks, is often distracted. - Joe Marini @ MIX 2010 http://www.flickr.com/photos/webtreatsetc/4860505549/
  57. 57. now statements such as these are becoming far more common
  58. 58. “ i love it! nice and clean look, easy to navigate and easy to read. well done! but...can you put a bit more news on there?Source: Comments from readers regarding The Guardian’s new mobile web site http://www.flickr.com/photos/webtreatsetc/4860505549/
  59. 59. “ There should be a text only version of the (desktop) site for those of us who dont like the busyness of the main site.Source: User talking about his habit of using the mobile Guardian site on his PC http://www.flickr.com/photos/webtreatsetc/4860505549/
  60. 60. “ ...mobile users want to see our menu, hours, and delivery number...(but)...desktop users definitely want to see this one megabyte PNG of somebody smiling at a salad. ...for fun, Google “Women Laughing Alone With Salad”Source: SitePoint Podcast: Responsive web design with Jeremy Keith http://www.flickr.com/photos/webtreatsetc/4860505549/
  61. 61. “ I’m definitely moving, I’m in a car. I’m going to look at your website. This doesn’t mean my intent is to find an address, or quickly use a news site... Context can’t predict the way a user is going to use the site. Mind reading is no way to base fundamental content decisions.Source: Mark Kirby, The mobile context http://www.flickr.com/photos/webtreatsetc/4860505549/
  62. 62. the problem spaceHow do we go about creating the next generationof content-rich, meaningful, usable, andinteresting web sites, that are designed to operatein a generally smaller, more varied and far lesspredictable environment? http://www.flickr.com/photos/chelsea_nj/4223680604
  63. 63. Part 2: Beyond the mobile web http://www.flickr.com/photos/adactio/932798536
  64. 64. ...a few ideasfrom the yiibus
  65. 65. Idea 1: Loosen up http://www.flickr.com/photos/seo2/94216483
  66. 66. control is now an illusion... http://www.flickr.com/photos/dominicspics/3385403397
  67. 67. there is too much diversity...
  68. 68. data wants to move around...http://www.flickr.com/photos/anniemole/5354202837
  69. 69. we’ve already set much of our content free... http://www.flickr.com/photos/scobleizer/3044172251/
  70. 70. ...we neverreally know where itwill end up
  71. 71. dspot the bran brand presence (as we once knew it) is disappearing http://www.flickr.com/photos/alreadytaken/4944698902/
  72. 72. the conversation isn’t even on our site any more......companies are increasingly questioning the needto have separate corporate sites when the bulk ofinterest and traffic from customers goes directlyto their Facebook pages. - Thomas Crampton “
  73. 73. ...so why are we stillobsessed with controllingeach pixel on our web site?PS - the Ubuntu style guidelines are actually quite lovely! Take a look...
  74. 74. “I can’t see it on my BlackBerry...“ often at the- user comment regarding the new Threadless mobile site expense of access... http://www.flickr.com/photos/zoetnet/4669800101/
  75. 75. “If I can’t see your awesomeweb site...it’s not really thatawesome is it?” and therefore, of user experience... http://www.flickr.com/photos/zoetnet/4669800101/
  76. 76. you can’t plan for every contingency... http://www.flickr.com/photos/mackarus/4289960218
  77. 77. and will never know how your site looks on every device... http://www.flickr.com/photos/hendry/5491251497/
  78. 78. create nimble experiences – not perfect ones... http://www.flickr.com/photos/92523880@N00/5047216186
  79. 79. Idea 2: Let them tweak http://www.flickr.com/photos/jaybergesen/198091718
  80. 80. progressive enhancementis more important than ever http://www.flickr.com/photos/clagnut/315554083
  81. 81. why not let users participate? http://www.flickr.com/photos/nasa_goddard/4733847144
  82. 82. choose the enhancementsare most meaningful to them... http://www.flickr.com/photos/29301264@N06/3844309716
  83. 83. set a user experience baseline for *all* web experiences...thematically semantic markupconsistent (view source) optimised images minimal responsive layout cluer (almost.. :-) one web pragmatic scripting http://www.alistapart.com/articles/responsive-web-design http://m.alistapart.com/articles/responsive-web-design lightweight!
  84. 84. ...then providemeaningful choices http://www.flickr.com/photos/lamantin/5143354304
  85. 85. idea 1: adjusting data consumption user agent says it’s a PC (plus it has a big screen) she obviously hashmm...I wonder lots of bandwidth!how much datashe’s used so far this month? oh...hold on, she’s on a dongle http://www.flickr.com/photos/mujitra/4571580931
  86. 86. provide a choice of size or quality for key content Default view Increased size and metadata High quality viewScitable: a free science library and personal learning tool.
  87. 87. and media... choice of qualityoption to choose high or low quality(with default basedof device you’re using) regardless on device
  88. 88. Look, it’s a Galaxy Tab...she must bein a ‘contemplative reading mode’... idea 2: tweaking the reading experience
  89. 89. pinching or double-tapping to zoom is good fun but has zero continuity...
  90. 90. let users set persistentreading preferences... Source: Craigmod.com
  91. 91. or even tweak thewhole experience... algorithm can create 40,000 logo shapes in 12 different color combinations Source: Fastcodesign.com
  92. 92. ...if you don’t ...they’ll probably do it themselves
  93. 93. Idea 3: Content firstingredients makeall the difference http://www.flickr.com/photos/wwworks/822821227
  94. 94. designing mobile firstcan help us to focus... http://www.flickr.com/photos/hussain_quantum/2087578696
  95. 95. find a happy medium mobile portable desktop webhttp://www.flickr.com/photos/29301264@N06/3844309716 http://www.flickr.com/photos/29301264@N06/3844309716
  96. 96. but I think we need to go further... http://www.flickr.com/photos/basheertome/5557362895
  97. 97. “ No matter how cool your interface is, it would be nice if there were less of it. - Alan Cooper http://jonbox.wordpress.com/2010/05/27/what-is-au2h-and-why-i-cared/
  98. 98. ...on smaller screens, contentnaturally ends up front and centre
  99. 99. include definition(s) so we need to actually design the content first... a book turtleillustration(s) required define variations(s) contextually relevant http://www.flickr.com/photos/lindaaslund/3296943915
  100. 100. semantic structures can beinclude definition(s) used to create incredibly rich and responsive content... a book turtleillustration(s) requiredcontextually relevant define variations(s) http://www.flickr.com/photos/lindaaslund/3296943915
  101. 101. yet we mostly apply thisrichness to the interface...
  102. 102. this is due in part to the way we currently build web sites... essentially Word in a browser...?put your content here...
  103. 103. most sites are built as giant(often all-purpose) data containers... http://www.flickr.com/photos/lisasanderson/3414118999/
  104. 104. ...with different areas to accommodate different data structures services utilities knowledge base products newslocation finder corporate info http://www.flickr.com/photos/lisasanderson/3414118999/
  105. 105. this makes senseif you have big data... http://www.flickr.com/photos/dalbera/3151369718
  106. 106. ...or primarily user generated data
  107. 107. namecover cost rating ...or inherently stock structured data publisher, ISBN, # pages
  108. 108. but can be pretty painful if youneed to produce content like this...
  109. 109. or this...
  110. 110. ...and especially this!http://www.nytimes.com/interactive/2007/10/01/science/20071002_ARCTIC_GRAPHIC.html
  111. 111. The rabbit-hole went straight on like a tunnel for some way, and then dipped suddenly down, so suddenly that Alice had not a moment to think about stoppingherself before she found herself falling down a very deep well.Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next.First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed thatthey were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as shepassed; it was labelled ORANGE MARMALADE, but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so most sites (and the CMS’s thatmanaged to put it into one of the cupboards as she fell past it.Well! thought Alice to herself, after such a fall as this, I shall think nothing of tumbling down stairs! How brave theyll all think me at home! Why, I wouldnt say manage them) accommodate onlyanything about it, even if I fell off the top of the house! (Which was very likely true.)Down, down, down. Would the fall NEVER come to an end! I wonder how many miles Ive fallen by this time? she said aloud. I must be getting somewhere nearthe centre of the earth. Let me see: that would be four thousand miles down, I think-- (for, you see, Alice had learnt several things of this sort in her lessons in the unstructured or ‘formless’ content...schoolroom, and though this was not a VERY good opportunity for showing off her knowledge, as there was no one to listen to her, still it was good practice to sayit over) --yes, thats about the right distance--but then I wonder what Latitude or Longitude Ive got to? (Alice had no idea what Latitude was, or Longitudeeither, but thought they were nice grand words to say.)Presently she began again. I wonder if I shall fall right THROUGH the earth! How funny itll seem to come out among the people that walk with their headsdownward! The Antipathies, I think-- (she was rather glad there WAS no one listening, this time, as it didnt sound at all the right word) --but I shall have to askthem what the name of the country is, you know. Please, Maam, is this New Zealand or Australia? (and she tried to curtsey as she spoke--fancy CURTSEYING asyoure falling through the air! Do you think you could manage it?) And what an ignorant little girl shell think me for asking! No, itll never do to ask: perhaps Ishall see it written up somewhere.Down, down, down. There was nothing else to do, so Alice soon began talking again. Dinahll miss me very much to-night, I should think! (Dinah was the cat.) Ihope theyll remember her saucer of milk at tea-time. Dinah my dear! I wish you were down here with me! There are no mice in the air, Im afraid, but you mightcatch a bat, and thats very like a mouse, you know. But do cats eat bats, I wonder? And here Alice began to get rather sleepy, and went on saying to herself, in adreamy sort of way, Do cats eat bats? Do cats eat bats? and sometimes, Do bats eat cats? for, you see, as she couldnt answer either question, it didnt muchmatter which way she put it. She felt that she was dozing off, and had just begun to dream that she was walking hand in hand with Dinah, and saying to her veryearnestly, Now, Dinah, tell me the truth: did you ever eat a bat? when suddenly, thump! thump! down she came upon a heap of sticks and dry leaves, and the fallwas over.Alice was not a bit hurt, and she jumped up on to her feet in a moment: she looked up, but it was all dark overhead; before her was another long passage, and theWhite Rabbit was still in sight, hurrying down it. There was not a moment to be lost: away went Alice like the wind, and was just in time to hear it say, as it turneda corner, Oh my ears and whiskers, how late its getting! She was close behind it when she turned the corner, but the Rabbit was no longer to be seen: she foundherself in a long, low hall, which was lit up by a row of lamps hanging from the roof.There were doors all round the hall, but they were all locked; and when Alice had been all the way down one side and up the other, trying every door, she walkedsadly down the middle, wondering how she was ever to get out again.Suddenly she came upon a little three-legged table, all made of solid glass; there was nothing on it except a tiny golden key, and Alices first thought was that itmight belong to one of the doors of the hall; but, alas! either the locks were too large, or the key was too small, but at any rate it would not open any of them.However, on the second time round, she came upon a low curtain she had not noticed before, and behind it was a little door about fifteen inches high: she triedthe little golden key in the lock, and to her great delight it fitted!Alice opened the door and found that it led into a small passage, not much larger than a rat-hole: she knelt down and looked along the passage into the loveliestgarden you ever saw. How she longed to get out of that dark hall, and wander about among those beds of bright flowers and those cool fountains, but she couldnot even get her head through the doorway; and even if my head would go through, thought poor Alice, it would be of http://www.gutenberg.org/cache/epub/11/pg11.txt very little use without my shoulders. Oh,
  112. 112. The rabbit-hole went straight on like a tunnel for some way, and then dipped suddenly down, so suddenly that Alice had not a moment to think about stopping herself before she found herself falling down a very deep well. Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she define variations(s) passed; it was labelled ORANGE MARMALADE, but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it. Well! thought Alice to herself, after such a fall as this, I shall think nothing of tumbling down stairs! How brave theyll all think me at home! Why, I wouldnt say anything about it, even if I fell off the top of the house! (Which was very likely true.) or ‘adapting’ Down, down, down. Would the fall NEVER come to an end! I wonder how many miles Ive fallen by this time? she said aloud. I must be getting somewhere near the centre of the earth. Let me see: that would be four thousand miles down, I think-- (for, you see, Alice had learnt several things of this sort in her lessons in the which makes selecting & filtering schoolroom, and though this was not a VERY good opportunity for showing off her knowledge, as there was no one to listen to her, still it was good practice to say it over) --yes, thats about the right distance--but then I wonder what Latitude or Longitude Ive got to? (Alice had no idea what Latitude was, or Longitude include definition(s) either, but thought they were nice grand words to say.) content rather difficult... Presently she began again. I wonder if I shall fall right THROUGH the earth! How funny itll seem to come out among the people that walk with their heads downward! The Antipathies, I think-- (she was rather glad there WAS no one listening, this time, as it didnt sound at all the right word) --but I shall have to ask them what the name of the country is, you know. Please, Maam, is this New Zealand or Australia? (and she tried to curtsey as she spoke--fancy CURTSEYING as youre falling through the air! Do you think you could manage it?) And what an ignorant little girl shell think me for asking! No, itll never do to ask: perhaps I shall see it written up somewhere. illustration(s) required Down, down, down. There was nothing else to do, so Alice soon began talking again. Dinahll miss me very much to-night, I should think! (Dinah was the cat.) I hope theyll remember her saucer of milk at tea-time. Dinah my dear! I wish you were down here with me! There are no mice in the air, Im afraid, but you might catch a bat, and thats very like a mouse, you know. But do cats eat bats, I wonder? And here Alice began to get rather sleepy, and went on saying to herself, in a dreamy sort of way, Do cats eat bats? Do cats eat bats? and sometimes, Do bats eat cats? for, you see, as she couldnt answer either question, it didnt much matter which way she put it. She felt that she was dozing off, and had just begun to dream that she was walking hand in hand with Dinah, and saying to her very earnestly, Now, Dinah, tell me the truth: did you ever eat a bat? when suddenly, thump! thump! down she came upon a heap of sticks and dry leaves, and the fall was over. illustration? Alice was not a bit hurt, and she jumped up on to her feet in a moment: she looked up, but it was all dark overhead; before her was another long passage, and the White Rabbit was still in sight, hurrying down it. There was not a moment to be lost: away went Alice like the wind, and was just in time to hear it say, as it turned a corner, Oh my ears and whiskers, how late its getting! She was close behind it when she turned the corner, but the Rabbit was no longer to be seen: she found herself in a long, low hall, which was lit up by a row of lamps hanging from the roof. There were doors all round the hall, but they were all locked; and when Alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to get out again. Suddenly she came upon a little three-legged table, all made of solid glass; there was nothing on it except a tiny golden key, and Alices first thought was that it contextually relevant might belong to one of the doors of the hall; but, alas! either the locks were too large, or the key was too small, but at any rate it would not open any of them. However, on the second time round, she came upon a low curtain she had not noticed before, and behind it was a little door about fifteen inches high: she tried the little golden key in the lock, and to her great delight it fitted!http://www.flickr.com/photos/arrighi/4922317676 Alice opened the door and found that it led into a small passage, not much larger than a rat-hole: she knelt down and looked along the passage into the loveliesthttp://www.flickr.com/photos/49024304@N00/2435212284 that dark hall, and wander about among those beds of bright flowers and those cool fountains, but she could garden you ever saw. How she longed to get out ofhttp://www.flickr.com/photos/dannyboymalinga/4512002570 if my head would go through, thought poor Alice, it would be of http://www.gutenberg.org/cache/epub/11/pg11.txt not even get her head through the doorway; and even very little use without my shoulders. Oh,
  113. 113. so although the web sitelayout may be responsive...
  114. 114. desktop the content itself is often only barely so... tabletmobile
  115. 115. what if content wasdesigned more like an app? data logic renderings http://www.flickr.com/photos/angryjuliemonday/5087995342
  116. 116. http://www.nytimes.com/interactive/2010/05/01/us/20100501-oil-spill-tracker.html
  117. 117. http://www.visualnews.com/interactive_infographic/Korea_interactive_main/
  118. 118. http://www.apple.com/ipad/smart-cover/
  119. 119. and what if?http://www.focus.com/images/view/11905/ http://www.apple.com/ipad/smart-cover/
  120. 120. Idea 4: Build distributed experiences http://www.flickr.com/photos/wwarby/5106781173
  121. 121. maybe theseno longer meet our needs... http://www.flickr.com/photos/mikebaird/3898801499
  122. 122. perhaps a couple of these would do just fine... http://www.flickr.com/photos/56705607@N00/3555678336
  123. 123. PRsupport we’ve already decoupled our communications... web site news thought leadership evangelism blogs press
  124. 124. PRsupport our product marketing... web site news thought leadership evangelism product blogs press
  125. 125. PRsupport our human resources... web site news thought leadership evangelism product blogs press
  126. 126. PR yet still united by asupport brand message... products media support brand PR services news news HR thought leadership evangelism product blogs press
  127. 127. think of it as an ecosystem oftouchpoints, utilities & conversations... http://www.flickr.com/photos/7802947@N02/5179679136
  128. 128. ads we see examples of this already media search experimental? apps ud clo
  129. 129. cloud not just a site, but an ecosystembooks marketplace music
  130. 130. opportunistic? may not last long own hardware with cloud highly optimised user experience enabling the freedom to experiment books marketplace apps music highly optimisedmost logical core productplatform... web/mobile web 100s of devices for now hmm....
  131. 131. core audience merchandise and create the best experience for each audienceexperimental? web/mobile web (1000s of devices) brands commercial news arm agship app world service entertainment voice BBC Learning SMS agship iOS XHTML app MP (desktop) web WAPEnglish and life skills for emerging economies
  132. 132. “ [In the future] brands will no longer be placesyou visit, but people you meet along the road. – Simon Mainwaring http://www.flickr.com/photos/tijanav/4885088185
  133. 133. thank you hello@yiibu.comhttp://www.slideshare.net/yiibu/beyond-themobilewebbyyiibu
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×