SlideShare a Scribd company logo
1 of 144
Download to read offline
Muddling Through
                                              the Mobile Web
                                                designing for rapid change and increasing diversity




http://creativecommons.org/licenses/by/2.0                        http://www.flickr.com/photos/booleansplit/2806792407
things are moving pretty
     quickly these days...




         http://www.flickr.com/photos/joo0ey/4630950433
until very recently ‘best practice’ was
      to build a separate mobile site...
         typically




m.domain.com || domain.mobi




                     http://www.forum.nokia.com/Develop/Web/Mobile_web_browsing/Web_templates
but lately, old ideas are
        being revisited...




http://www.alistapart.com/articles/understandingprogressiveenhancement
...and new ideas are really
        shaking things up



       http://www.alistapart.com/articles/responsive-web-design
...of course the elusive ‘One Web’
still beckons madmen & dreamers




                  http://www.flickr.com/photos/3oheme/4069616710
...of which we’re
pragmatic devotees ;)




    http://www.flickr.com/photos/aerosolhalos/5134483703
You must have a goal in life.




         BUT




                                http://www.flickr.com/photos/christopherdombres/4493564844
rethinking mobile web yiibu


   try to keep an open mind and
regularly challenge our beliefs...




                                    http://www.flickr.com/photos/fpat/3692425154
this is rhetorical...

Are we there yet?




                           http://yiibu.com
...why are kiwi fruit fuzzy?



                                    many questions
                               remain unanswered...




                                    http://www.flickr.com/photos/wwworks/2427001802
@media queries?
                                                                                  yes              no           *.mobi?       adapt?
                        yes           ?

 web                  mobile?         yes         is        ?         yes
                                                                                               such as...what do you do with
                                                                                        one web?          yes        ?
                                                                                                                                yes             yes
                                                                                                                                                             yes?

                                                                                                                                                                    many

Rethinking the Mobile Web
                        no                             no                                                  images like this?
                                                                                                                     no
                                                                                                                             device dB?

                                                                                                                                                                     yes
                                                                                                                                yes
                      desktop          no         care?                     yes                     ?           UA sni ng?




                                                                                  few
                      umm...?         no                                                                             no                   yes


                                                                yes                                     *.mobi?
                                @media queries?                                                                               adapt?

                                                                                  yes              no
                        yes                                                                                                                                                              U
                                      ?                                                                                         yes                   available
                                                                                                                                                       here?

                                                                                                                                                                    many
 web                  mobile?         yes         is        ?         yes               one web?          yes        ?       device dB?


                        no                             no
                                                                                                                    no
                                                                                                                                yes
                                                                                                                                                                    yes
                      desktop          no         care?                     yes                     ?           UA sni ng?




       web


no   mobile?    yes

     @media
no   queries?




                                                                                                                                                                      http://yiibu.com
automagically scaling
                                                                                                                                                       detailed images isn't ideal...
                                               no                                                                             few                           no
                                                                    @media queries?                 yes

                                                                                                                      yes              no         *.mobi?         adapt?
                                                            yes           ?
                                                                                                                                                                                                 yes?
                                                                                                                                                                    yes             yes
                                       web                mobile?         yes         is        ?         yes               one web?        yes        ?                                                   many

                                  Rethinking the Mobile Web few
                                                                                                                                                                 device dB?
                                                            no                             no
      umm...?         no                                                                                                                               no

                                                                                                                                                                    yes
                                                                                                                                                                              no                            yes          yes
                                                          desktop          no         care?                     yes                     ?         UA sni ng?




                                                    yes                                                                                       *.mobi?
                @media queries?                                                                                                                                                                          adapt?      desktop                  web                   ?
                                                                                                                      few
                                                          umm...?         no                                                                           no                     yes

                                                                                           yes                                         no
                                                                                                                                        *.mobi?                                                                      *.mobi?
                                                                                                                                                                                                                                  no         mobile?          yes

                                                                                                    yes
        yes                                                         @media queries?                                                                               adapt?

                      ?                                                                                                                                                                                                                        available
                                                                                                                                                                                                                                   umm...?              @media
                                                                                                                                                                                                                                                       no
                                                                                                                      yes              no                                                                  yes                                          queries?

                                                                                                                                                                                                                                                here? yes
                                                            yes                                                                                                                                                      UA sni ng?
                                                                          ?                                                                                         yes                   available
                                                                                                                                                                                           here?                                                   is ?
                                                                                                                                                                                                           many      device dB?               one
                                       web                mobile?         yes         is        ?         yes               one web?        yes        ?         device dB?                                                                   web?
                                                                                                                                                                                                                                                             no
                                                                                                                                                                                                                                                                          many
web   mobile?         yes         is          ?             no
                                                                         yes               no
                                                                                                          one web?                                    yes
                                                                                                                                                      no
                                                                                                                                                                    yes
                                                                                                                                                                              ?                         device dB?                adapt?

                                                                                                                                                                                                                                               yes          care?
                                                                                                                                                                                                                                                                    few
                                                                                                                                                                                                           yes                    many
                                                          desktop          no         care?                     yes                     ?         UA sni ng?


        no                             no
                                                                                                                                                                           no

                                                                                                          unreadable
                                             web
                                                                                                                                                                                                           yes
                                   no    mobile?    yes
                                                                                                                                                                                                                                                                          yes
                                         @media


                                                                                                                ?
                                   no

                                                                                 yes
                                         queries?

      desktop          no         care?                                                                                                                          UA sni ng?




                                                                                                                                                                                                                                                                                 http://yiibu.com
eries?                   yes

                                           yes              no           *.mobi?       adapt?

                                                                                                                      yes?
                                                                                         yes             yes
           is        ?         yes               one web?          yes        ?                                              many
                                                                                      device dB?
ile Web         no
                                                                              no
                                                                                                                              yes
                                                                                         yes
           care?                     yes                     ?           UA sni ng?
                                                                                                                                                            hmm...
                                                                                                                                    desktop                  web
     yes                                   few
                                                                              no                   yes
                                                                                                                                                 no         mobile?              yes

                         yes                                     *.mobi?                                                            *.mobi?
eries?                                                                                 adapt?                                                                                          @m
                                                                                                                                                  umm...?              no
                                                                                                                                                                                       qu
                 available                 yes              no
                  here?                                                                                        available            UA sni ng?
                                                                                         yes
                                                                                                                here?                                                       is     ?    y
B?                                          many
                                                                                                                             many   device dB?               one
           is        ?         yes           one web?              yes        ?       device dB?                                                             web?
                                                                                                                                                                             no
                                                                                                                                                 adapt?
                no
                                                                             no                                                                                                         f
                                             yes                                         yes                                                                  yes           care?
                                                                                                                             yes                 many
o          care?                     yes                     ?           UA sni ng?




                                                                                                                                                                    http://yiibu.com
o


      adapt?

                                      yes?
        yes                yes

                                               many
     device dB?

                                                yes
        yes




                                                                                                                        ...do we simply
                                                                                                           ?
                                                                                                                   provide alternates?
                                                      desktop                  web
       yes
                     yes
                                                                   no         mobile?             yes
                                                      *.mobi?
      adapt?                                                                                            @media
                                                                    umm...?             no
                  available                                                                             queries?
                   here?                              UA sni ng?
        yes                      available
                                  here? many                                                 is     ?     yes
B?
                                               many   device dB?               one
     device dB?                                                                web?
                                                                                              no
                                                                   adapt?
                                         yes                                                              few
        yes                                                                     yes          care?
                                               yes                 many




                                                                                                                                 http://yiibu.com
o
                                                                                                                                                                             ?
         @240x2                                                                                                                   web                  mobile?               yes
       adapt?                       web

                                          yes?
         yes                yes                                                                                                                          no
                      no          mobile?        yes
                                                         many
     device dB?
                      no
                                  @media
                                  queries?
                                                                                                                               @320x2                  desktop                no

                                                          yes
         yes




                                          @960                                                                                    ...do we simply
                                                                                                                                  desktop                     web
                                                                                                                     ?
                                                                                                                             provide alternates?
                                                                desktop                  web
       yes
                      yes

                                                                                                                                   countless
                                                                             no                                                                 no           mobile?              yes
                                                                                        mobile?             yes
                                                                *.mobi?                                                           *.mobi?
       adapt?                                                                                                                                                                           @m
       @1280
          available
                                                                              umm...?             no              @media
                                                                                                                  queries?
                                                                                                                                                 umm...?                no
                                                                                                                                                                                        qu
                  here?                                         UA sni ng?                                                       UA sni ng?
         yes                      available
B?
                                   here? many                                                          is     ?     yes                  @320                 one
                                                                                                                                                                             is     ?    y

                                                         many   device dB?               one                                      device dB?
     device dB?                                                                          web?                                                                 web?
                                                                                                        no                                                                    no
                                                                             adapt?                                                             adapt?
                                                                                                                    few                                                                  f
                                             yes                                                                                                               yes           care?
         yes                                                                              yes          care?
                                                         yes                 many                                                              many




                @640                                                                                                                                         @640x2
                                                                                                                                             web
                                                                                                                                                                              desktop
apt?                                                                                                                                no      mobile?    yes

                                  yes?                                                                                              no
                                                                                                                                            @media
es              yes                                                                                                                         queries?

                                                 many
ce dB?                                                                                                                         @240                                          *.mobi?

                                                   yes                                                                                       web
es
                                                                                                                                                                     http://yiibu.com
                                                                                                                                    no      mobile?    yes
every stylesheet is not required

                                                            3 columns, really?


@font support varies

    desktop scripts aren't suitable for mobile
                       typically                  perhaps a bit ambitious?




                ...what about scripts & stylesheets
                               that aren't suitable?


     ...a bit late, no?
                                   device detect early
too many HTTP...do we
                                                    requests...simply
                                                  provide alternates?

                         ...that's a lot of              unsupported
                            JavaScript!
                                                       media formats...
     ...is Flash even supported?
the right version of

                            ...aye, thar be Floosh!
                       ...does every device get the same
                       Floosh – if they support Floosh?



                                                                  http://yiibu.com
...available bandwidth?


                             ...is orthogonal to...


                  ...screen size?

                         this only deals with
                         codecs - not context*...




                     ...or factors that
                you just can't detect
c.2000...


                              http://www.w3.org/TR/html5/video.html
mmm, Spongebob...




                    “   Biggest problem for handheld
                        web video playback still seems
                        to be pulling down a high-bitrate
                        HD file...with extra pixels that
                        never display. – @jdowdell

                                       http://www.flickr.com/photos/rexroof/3372607671
'we' being yiibu...
                        obviously delusional                            ...so we've done a little
                                                        mild insanity
                                                                               brainstorming...
                research


                                                                          harmless sketches
       something else...?




                                                                         prototypes
                      crazy ideas




                                               cerebral gymnastics




Research is what I’m doing when I don’t know what I’m doing.
– Wernher von Braun
                                                                                  http://www.flickr.com/photos/humblog/4522388767
server-side
media queries


                              and we have a little
                filters   dirty laundry to share...

                           XSLT




                                  http://www.flickr.com/photos/katayun/4288456971
...a selection of content
filtering + transformation prototypes




                     http://www.flickr.com/photos/digger_twit/1353837770
g
                  in n
               er tioes
            lt a typ
         t firm roto
      en fo p
   nt ns
Co ra
   t               rs ...
 +
            Fi lte                     Plan B
     .D OM         server-side media queries...
   a




                               http://www.flickr.com/photos/mwichary/2614644341
begin with some
existing HTML content...
Raw user agent: Mozilla/5.0 (SymbianOS/9.1; U; en-us) AppleWebKit/413 ...
Device identified as: Nokia N73

Actual Root Device ID: nokia_n73_ver1
WURFL ID: nokia_n73_ver1_submozilla50

physical_screen_height: 49
columns: 21
dual_orientation: false
physical_screen_width: 37
                                    $wurfl->getDevice($id);
rows: 6
max_image_width: 229
resolution_height: 320
resolution_width: 240
max_image_height: 260
                         this is what we're after!
...




                                                            http://www.tera-wurfl.com/explore/
resolution_width: 240   device property




                                   $html->find('img[src]');
resolution_width: 240   device property




                                           <img />


                                 <img />




                                           <img />
resolution_width: 240     device property


                                            based on...




  panda.jpg   panda@320.jpg panda@240.jpg



                                                       repeat process for each
                                                       <img> found in document...

                               replace each image with a
                                more suitable alternate...




                                                  http://www.flickr.com/photos/davefayram/3773208649
IL
     resolution_width: 240            device property



                                                        FA
        panda.jpg     panda@320.jpg panda@240.jpg       ...how many images are required?


               ...related elements?


                                                  ...what about slightly
                                             "fuzzier" DOM elements?



...other elements?


                                                            http://www.flickr.com/photos/davefayram/3773208649
in n   g
               er tioes
            lt a typ
         t firm roto
      en fo p
   nt ns
Co ra
   t                      ..t.eir uses...
                    rsave h
 +             lttey do h
            Fi he
     .D OM         id rie e s...
   a            -s e
            er qu
          rv ia
       Seed
     b. m


                                            http://www.flickr.com/photos/mwichary/2614644341
...an interesting idea
{{mustache}} inspired...
*H AC K*
                                                       FAIL
                                                                      yet revolting

                                                  ...an interesting idea that
                                                quickly got out of control...
            {{mustache}} inspired...

   written in                                        slippery slope



      PHP
hacked together in PHP
                               almost
                              reinvent
                                       ed...
                                                                                      to
(should have been C for speed)...                                                     XSLT!
...apologies to @stephenhay
in n  g
                   r o
                te ti ypes
                                             #mobilism at
             fi l a t                        we support s mtdemo.mobi
                                            processing o erver side
           t rm roto
      en fo p                              enhanced witf media-queries
     t s
  on an                                    from wurfl... h all features
C r
   t                       ..t.eir uses...
                      rsave h EASE LO!
                                                        – @harloff

 +               lttey do h PLAY HEL
               Fi he
         O M               e s...S

   a .D              id rie
                  -s e
               er qu
            rv ia
       .
     b m Seed                   LT       ?
                        X   S
                 is it
           .R ev
         c
                                                http://www.flickr.com/photos/mwichary/2614644341
...use XSLT – after
         all it was made to
         style content!?         WTFF?
                                    AIL
                               found massive inspiration
yup, that's "99                for XSLT here!
Bottles of Beer"
in XSLT...?
                                    ...we honestly tried,
                                   but we @$*#& XSLT!




                                          http://www.angelfire.com/tx4/cus/shapes/bottles.html
in n g
                    r o
                te ti ypes
                                             #mobilism at
             fi l a t                        we support s mtdemo.mobi
                                            processing o erver side
           t rm roto
      en fo p                              enhanced witf media-queries
     t s
  on an                                    from wurfl... h all features
C r
   t                       ..t.eir uses...
                       rsave h EASE LO!
                                                        – @harloff

 +               lttey do h PLAY HEL
               Fi he
         O M               e s... S

   a .D           -s eid rie
               er qu
            rv ia
       .
     b m Seed                    LT      ?
                             S
                          X te...
                    it ed tas
                 isacquir
           .R ev an
         c
                                                http://www.flickr.com/photos/mwichary/2614644341
...eventually we came to accept
that we can't get there, from here



                 http://www.flickr.com/photos/awfulshot/180189401
but we did learn
       two things...




http://www.flickr.com/photos/meddygarnet/3390890516
respon sive design & one web
        the mobile web is
 really bloody difficult...




               http://www.flickr.com/photos/vauvau/3466024918
everything we believed about
   the web today is wrong...


           http://www.flickr.com/photos/congaman/4059136660
in hindsight...the problem
      becomes obvious...




         http://www.flickr.com/photos/sketch22/2460898332
display size/width



                                             in the beginning
                                          we had computers...


        512 x 342




       1984          1990   1994   1998      2004    2007
display size/width



                                          we came to expect
                                                    1440
                                   more and more every year...
                                            1280


                                    1024

        512 x 342                   1024 x 768
                            800

                     640
        512




       1984          1990   1994    1998         2004   2007
display size/width



                                              ...one day1440 2007
                                                          in
                                      less became much more
                                              1280


                                   1024

        512 x 342                  1024 x 768
                            800

                     640
        512                                            320 x 480


                                                240



       1984          1990   1994   1998         2004           2007
display size/width



                                          today we seem1440 have
                                                             to
                                               1280 lot less more...
                                                 a

                                   1024

        512 x 342                  1024 x 768
                            800                                            768 x 1024
                     640
                                                               480 x 800
        512                                            320 x 480


                                                240



       1984          1990   1994   1998         2004               2007
display size/width

                                                                               public displays
                                                                                  3200
                                                                 with a lot more less
                                                                   on the horizon...
                                                                                     1920 x 1080

                                                                        1920
                       1024 x 768                              768 x 1024
                                                      1440
                                    1280                                        600 x 1024
                                                   480 x 800       360 x 640
                       1024                320 x 480
                800
    640
                                    240



    1990        1994   1998         2004              2007              2011      2015
“        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 via mobiThinking   http://www.flickr.com/photos/tocaboca/5524320942
yet we're inherently constrained
             by human factors...


               http://www.flickr.com/photos/carbonnyc/4213684953
which presents us with
       one problem...
                  nagging




     http://www.flickr.com/photos/whiskeytango/471826517
the hell
how do we make content meaningful
     in all of these varied contexts?
                    http://www.flickr.com/photos/izzyplante/4009893952
...let's first deal with
what we mean by 'context'...




             http://www.flickr.com/photos/sporst/3999795549
con•text [kon-tekst] – the set of
circumstances or facts that surround
a particular event, situation, etc.
http://dictionary.reference.com/browse/context
human beings are a generally
         unpredictable lot...




            http://www.flickr.com/photos/collinmesser/4567027786
meaningful
determining user context remains
            an impossible task...




                      http://www.flickr.com/photos/collinmesser/4567027786
meaningful
while determining device context is
 often a much simpler endeavour...
                                   and opportunity..
                                                              .




                    http://www.flickr.com/photos/hejgustav/3631418869
and stuff you
stuff you know                 wish you didn't...

features          +   constraints
• screen size                • screen size
• local storage              • no touch
• touch                      • poor JavaScript
• canvas                     • no canvas
• SVG                        • isMSIE
• etc                        • etc



                        http://www.flickr.com/photos/katerha/4330199412
feature
 detection
the client


             with both client & server
                   working together...



                                    device
                                   database

                   and the server
                              "first-run"

                    http://www.flickr.com/photos/donkeyhotey/5527263186
first load...




http://www.flickr.com/photos/wscullin/3770015203
Hmm, Huston - we have a problem...

                                    JavaScript
                          HTML                              fonts
initial request             stylesheets     images
                            Flash     video
                             ...no idea what we can
                             deliver to this client...
            1




                                           http://www.flickr.com/photos/wscullin/3770015203
$wurfl->getDevice($id);


                               ...or another dB!

             PHP, Java, etc.




                       http://www.flickr.com/photos/wscullin/3770015203
width: 320 px...      use what you can...




                                                PHP, Java, etc.




{
	
  	
  width:{
	
  	
  	
  	
  screen:320
	
  	
  }
}

                             2
             create profile




                  a cookie


                                                          http://www.flickr.com/photos/wscullin/3770015203
we could send smaller images...

                                                JavaScript
                                      HTML                             fonts
                                        stylesheets    images
                                                        images
                                        Flash     video                reduce images
                                       include only those resources
                                       suitable for device context...
{
	
  	
  width:{
	
  	
  	
  	
  screen:320
	
  	
  }
}




                                                      http://www.flickr.com/photos/wscullin/3770015203
be sure to compress them
                             if you can...
{
	
  	
  width:{
	
  	
  	
  	
  screen:320
	
  	
  }
}




                                             http://www.flickr.com/photos/wscullin/3770015203
initial response




{
	
  	
  width:{
	
  	
  	
  	
  screen:320
	
  	
  }
}




                                            http://www.flickr.com/photos/wscullin/3770015203
{
	
  	
  width:{
	
  	
  	
  	
  screen:320
	
  	
  }
}                                                        3
                                     detectFeatures();




                             JavaScript




                                                         http://www.flickr.com/photos/wscullin/3770015203
{
     	
  	
  width:{
     	
  	
  	
  	
  screen:320,
     	
  	
  	
  	
  document:320     subsequent
     	
  	
  },                         request
     	
  	
  xhr:true,
     	
  	
  canvas:true,
     	
  	
  flash:false,
     	
  	
  video:true,
     	
  	
  formats:{
     	
  	
  	
  	
  h264:probably,
     	
  	
  	
  	
  ogg:false,
     	
  	
  	
  	
  webm:false
     	
  	
  },
     	
  	
  offline:true
     }

                                        4
                update profile




...now with more chips!


                                                   http://www.flickr.com/photos/wscullin/3770015203
sync profile
{                                              5
	
  	
  width:{
	
  	
  	
  	
  screen:320,
	
  	
  	
  	
  document:320
	
  	
  },
	
  	
  xhr:true,
	
  	
  canvas:true,
	
  	
  flash:false,
	
  	
  video:true,
	
  	
  formats:{
	
  	
  	
  	
  h264:probably,
	
  	
  	
  	
  ogg:false,
	
  	
  	
  	
  webm:false
	
  	
  },
	
  	
  offline:true
}                                                  same profile on both
                                                   client & server




                                                      http://www.flickr.com/photos/wscullin/3770015203
now, send only what's required
{                                                                       6
	
  	
  width:{                             HTML JavaScript
                                            HTML JavaScript                 fonts
	
  	
  	
  	
  screen:320,
	
  	
  	
  	
  document:320                                 images
                                              stylesheets images
                                              stylesheets
	
  	
  },
	
  	
  xhr:true,
	
  	
  canvas:true,
                                              Flash    video
                                                        video
	
  	
  flash:false,
	
  	
  video:true,
	
  	
  formats:{
	
  	
  	
  	
  h264:probably,
	
  	
  	
  	
  ogg:false,
	
  	
  	
  	
  webm:false
	
  	
  },
	
  	
  offline:true
}




                                                  .com/bryanri eger/profile
                                  h ttps://github
                                                             sample code* available
                                                 *fyi the code currently uses a
                                                 simple profile db idea we're playing
                                                 with instead of WURFL...

                                                            http://www.flickr.com/photos/wscullin/3770015203
Ogg
      javascript                             input methods
                                                                     or profile
storage                 colour depth
                                              the device context is defined via
             appcache                  dpi            features & constraints...

screen size         isBrowserLame                            xhr                 media formats
                   custom properties
                   based on your own
                   tacit knowledge...

HTML5               CSS                                        isTouch
                         canvas                                                          doctype
      @font-face
                          json                               H.264
  WebM
                                                                                isTablet
                   WebGL                                           http://www.flickr.com/photos/wscullin/3770015203
features & constraints
 device profile
                                   but only those that are
  screen size                         actually relevant...
                 Flash Embed                                             to us

HTML5                          JavaScript




                                            http://www.flickr.com/photos/dullhunk/4422952742
http://www.flickr.com/photos/aturkus/4040454167
The significant problems
we face, cannot be
solved at the same level
of thinking we were at
when we created them.

– Albert Einstein
what if what is actual
is actually not normal...?




        http://www.flickr.com/photos/pagedooley/2121472112
and now for a little
cerebral gymnastics...




      http://www.flickr.com/photos/jb-london/4112837448
display size/width
+ a little cerebral gymnastics...


                                                             and our perception of it
                                                                                1440
                                           how would the web be different
                                                          1280
                                                  if history had given us...
                                                                and Steve
                                                1024

         512 x 342                              1024 x 768
                                    800

                       640
                                                                               480 x 800
        512                                                            320 x 480


                                                                240



        1984           1990         1994        1998            2004               2007
1280




                                                             1024

                                    a more constrained context first...?
                                                      800
                               natural progression?

                          512 x 342 640                             1024 x 768
 ...mobile first?

                   480
320 x 480
       320




       1984        1990             1994              1998   2004          2007
and
what would happen
if we designed content...




      http://www.flickr.com/photos/pasteberlusconi/5352932503
in a manner similar
to how we design software...?



            http://www.flickr.com/photos/stephi2006/4428932249
...could we design content
that adapts to 40,000 contexts?
hmm...




http://www.flickr.com/photos/seatbelt67/502255276
{insert fave CMS here}



                 most websites today are
                     built using a CMS...
where page templates
                       tend to dominate content...
<put content here />




                                          http://www.nytimes.com
monetization
                        focused on delivering ads
                       and providing navigation...
                                                            longer visits




<put content here />



                             http://www.wired.com/magazine/2011/04/st_thompson_homophily/
<put content here />
All the Numbers, All the Facts on Mobile the Trillion-Dollar Industry. Why is ...




Yes, Google (outgoing) CEO Eric Schmidt had been saying 'Mobile First' but his latest version of his 'Mobile mobile
mobile' mantra, that he shares with all partners and companies interested in mobile is: "Put your best people on
mobile." Why? Because Mobile today is by a wide margin, the fastest-growing giant industry on the planet.
Because all major digital technologies are headed to mobile - telecoms, computers, the internet, etc - and all major
media are headed to mobile - music, gaming, news, television, advertising - and even money, from coins to
banking to credit cards, is headed to a phone near you. This is definitely the "industry of the decade" and we have
only begun. So how big is big? Its huge. Lets review the numbers.


          2013




                                                                                         and content typically
                                                                                       confined to a sandbox...



    http://communities-dominate.blogs.com/brands/2011/02/all-the-numbers-all-the-facts-on-mobile-the-trillion-dollar-industry-why-is-google-saying-put-your-b.html
where context is
completely irrelevant...




        http://www.flickr.com/photos/wengs/3938347495
resulting in an
                                                                          experience similar to this...




http://communities-dominate.blogs.com/brands/2011/02/all-the-numbers-all-the-facts-on-mobile-the-trillion-dollar-industry-why-is-google-saying-put-your-b.html
please note...

                  The use of @tomiahonen    's site is for illustration
                  purposes only, and is not intended as a criticism
                  of the excellent inform ation he regularly publishes
                  on his site.

                    If you've never re ad any of Tomi's posts, you're
                    missing out! ;)
                                                          Sincerely,
                                                          Bryan



http://communities-dominate.blogs.com/brands/2011/02/all-the-numbers-all-the-facts-on-mobile-the-trillion-dollar-industry-why-is-google-saying-put-your-b.html
“   There still is no such thing as
    a mobile-friendly CMS...
    http://pinchzoom.com/posts/7-things-we-learned-during-sprint-8/




                                                                      http://www.flickr.com/photos/29022619@N03/3902777481
our assets
     we treat our content
as rubbish with no value...




          http://www.flickr.com/photos/dnorman/3590132503
...doh!




http://www.flickr.com/photos/proimos/4199675334
which of course provides exciting
       opportunities for others...




                  http://www.flickr.com/photos/johanl/4816110696
Instapaper Flipboard Readable
                     +   Reader in Safari...
who are very good at
                                                                                                    taking this...




http://communities-dominate.blogs.com/brands/2011/02/all-the-numbers-all-the-facts-on-mobile-the-trillion-dollar-industry-why-is-google-saying-put-your-b.html
and automagically
turning it into this...
and this...
http://communities-dominate.blogs.com/brands/2011/02/all-the-numbers-all-the-facts-on-mobile-the-



...and look, we're back in the browser!


                                                                                                                                and even this




            http://communities-dominate.blogs.com/brands/2011/02/all-the-numbers-all-the-facts-on-mobile-the-trillion-dollar-industry-why-is-google-saying-put-your-b.html
http://communities-dominate.blogs.com/brands/2011/02/all-the-numbers-all-the-facts-on-mobile-the-




                                                                       which can then be tailored
                                                                           to your preferences...




                                                                                                    http://readable.tastefulwords.com/
#!/usr/bin/perl -w

use   strict;
use   XML::RSS;
use   LWP::Simple;
use   HTML::Entities;

my $rss = new XML::RSS (version => '1.0');
my $url = "http://www.linux.org.uk/~telsa/Diary/diary.html";
my $page = get($url);

$rss->channel(title         => "The more accurate diary. Really.",
              link          => $url,
              description   => "Telsa's diary of life with a hacker:"
	          	  	         .   " the current ramblings");

foreach (split ('<dt>', $page))
{
	    if (/<asname="
             ([^"]*)
             ">
                          # Anchor name          ...surely we can do significantly
             <strong>
             ([^>]*)      # Post title               better than a screen scraper
                                                                        glorified
             </strong></a></dt>s*<dd>
             (.*)         # Body of post
             </dd>/six)
	    {
	    	    $rss->add_item(title        => $2,
	    	    	           link        => "$url#$1",
	    	           	         description => encode_entities($3));
	    }
}

print $rss->as_string;



                                                                               http://linuxgazette.net/108/oregan2.html
but can we...




http://www.flickr.com/photos/jaako/218844774
do significantly
better than a PDF...?
object database


                           gs,
booleans , numbers, strainies,
                         r
names, arrays, diction..
                      .
     streams and null
                                                 ...a fascinating
                                            little technology...




                                 database
%!PS-Adobe-3.0 EPSF-3.0

%%BoundingBox:0 0 288 288         context*
%%ColorUsage: Color
%%DocumentProcessColors: Cyan Magenta Yellow Black
/ok_Ellipse
{
    ok_xOffset ok_yOffset moveto
    ok_x1 0 ok_xR ok_y1 ok_xR ok_yR rcurveto
    0 ok_y1 ok_x1 neg ok_yR ok_xR neg ok_yR rcurveto
    ok_x1 neg 0 ok_xR neg ok_y1 neg ok_xR neg ok_yR neg rcurveto
    0 ok_y1 neg ok_x1 ok_yR neg ok_xR ok_yR neg rcurveto
    closepath
} def
/ok_Ellipses
{
    %on stack:
                                                                 designed to faithfully render
    %xCenter yCenter xOffset yOffset width height weight howMany [color array]

                                                             one single context everywhere...
    aload pop setcmykcolor
    /ok_HowMany exch def
    /ok_Weight exch def        routine
                                                                                                         device independent
    /ok_Height exch def
    /ok_Width exch def        definition
    /ok_yOffset exch def
    /ok_xOffset exch def
    /ok_yCenter exch def
    /ok_xCenter exch def
                                    http://en.wikip
    /ok_Angle 360 ok_HowMany div def
                                                    edia.org/
    /ok_xR ok_Width 2 div def          wiki/PostScrip
    /ok_yR ok_Height 2 div def                          t
    /ok_x1 ok_xR ok_xR .552292 mul sub def
    /ok_y1 ok_yR ok_yR .552292 mul sub def
    ok_Weight setlinewidth
    gsave
    ok_xCenter ok_yCenter translate
    ok_HowMany
    {
         ok_Ellipse
         ok_Angle rotate

                                  routine call
    } repeat
    stroke
    grestore


                                                                                         +
} def
%here's an example call to the "ok_Ellipses" routine
144 144 0 0 24 36 .5 24 [0 0 0 1] ok_Ellipses
                                                                 database                               application
144 144 0 76 18 60 3 6 [1 0 1 0] ok_Ellipses
144 144 0 76 12 48 2 12 [.8 0 .8 0] ok_Ellipses
                                                                             http://www.adobe.com/products/adobemag/archive/spirogf1.html
144 144 0 78 11 44 2 12 [.6 0 .6 0] ok_Ellipses
but not known for being
      terribly adaptive...
but the web wasn't designed to
be constrained to a single context...
http://communities-dominate.blogs.com/brands/2011/02/all-the-numbers-all-the-facts-on-mobile-the




                                             ...maybe we should stop imposing
                                          arbitrary constraints on our content?
features & constraints
                                           web design is
                                       software design...
               +
object model         view controller

          device context




    ...keep an eye on these!
to a brave, new
content.app




                      content as
                   applications...



              http://www.flickr.com/photos/colindunn/4479309983
February 17, 2011

All the Numbers, All the Facts on Mobile the Trillion-Dollar Industry. Why is Google saying: Put your Best People on Mobile?

Yes, Google (outgoing) CEO Eric Schmidt had been saying 'Mobile First' but his latest version of his 'Mobile mobile mobile' mantra, that he shares with all
partners and companies interested in mobile is: "Put your best people on mobile." Why? Because Mobile today is by a wide margin, the fastest-growing giant
industry on the planet. Because all major digital technologies are headed to mobile - telecoms, computers, the internet, etc - and all major media are headed to
mobile - music, gaming, news, television, advertising - and even money, from coins to banking to credit cards, is headed to a phone near you. This is definitely
the "industry of the decade" and we have only begun. So how big is big? Its huge. Lets review the numbers.

5.2 Billion Subscribers

                                                                    it should be blatantly obvious but,
So first the biggest number - 5.2. That is in billions with a B. There are 1.2 billion personal computers in use worldwide including desktops, laptops and tablet

                                                                             – start with the content...
PCs like the iPad. There are 1.1 billion fixed landline phones. There are 1.0 billion automobiles registered and in use. There are 1.6 billion television sets, 1.7
billion credit card users, 2.0 billion internet users, 2.2 billion people with a banking account, and 3.9 billion radio receivers in use worldwide. Mobile utterly
dwarfs them all - with 5.2 billion currently active, ie fully paid mobile phone subscriptions. Active mobile phone accounts. 5.2 billion. yes, 4.5 times more mobile
phone subscriptions than personal computers or landline phones. 2.5x more mobile accounts than all internet users. 3 times more mobile subscribers than the
total number of television sets. Mobile is huge.

The planet has 6.9 billion people alive, from babies to great grandparents. Now there is an active mobile phone subscription for 75% of them. So where are
we? One way to look at it is electricity. The planet has 1.6 billion people who live beyond the reach of electricity (said CNN, 2009). So the mobile phone
subscriber count is almost matching every human alive (including babies etc) who enjoys modern conveniences like electricity (5.3 billion people). Or another
way? Water. We learned last year that 4.2 billion people use a toothbrush (MMA Forum Asia 2010) - so there are one billion more mobile phone accounts than
the total number of users of a toothbrush. Or jobs? Motorola told us last year that there are 5 billion people who have a job on the planet - but 5.2 billion people
have a mobile phone.

I am doing my 'count-down' to the point when we have 100% per-capita penetration rate of mobile phone accounts on the planet, ie one active mobile account
per person alive. We'll hit that point roughly at the end of 2013. But I'm using an age-related count-down. So if we allocate all existing active mobile phone
accounts by age, from the eldest to the youngest, we are now at the start of 2011, at the point, where there would be an active mobile phone account for every
person alive on the planet who is over the age of 12. It is coming down at the rate of about one year of age, per quarter! In other words phones are spreading at
the rate of four years of age, per year. By the end of this year we'll be at about age 8... And its everywhere. In the USA the mobile phone penetration rate is
rapidly nearing the 100% rate per capita (we should pass that point this year). That may seem impressive, it is not. Europe is at 130%, many ;eading countries
are already past the 150% level and the United Arab Emirates (ie Abu Dhabi, Dubai etc) became the first country to pass 200% mobile phone subscriber count.
And even the poorest regions are rushing in. The continent of Africa has already passed the 50% penetration level in mobile phone subscriptions per capita.

3.7 BILLION UNIQUE MOBILE PHONE USERS

The total mobile phone subscriber count of 5.2 billion is not the same as 'unique users' of mobile phones. Over one third of all people who have a mobile
phone, have two or more mobile accounts. Many have two phones, some have a phone and a laptop-PC account on a 3G data dongle, and some walk around
February 17, 2011



All the Numbers, All the Facts on Mobile the Trillion-
Dollar Industry. Why is Google saying: Put your Best
People on Mobile?
                                                          typography matters
Yes, Google (outgoing) CEO Eric Schmidt had been saying 'Mobile First' but his latest
                               (you may not care) but your users do...
version of his 'Mobile mobile mobile' mantra, that he shares with all partners and companies
                                                                                          etitors
                                                                                and compis by a
interested in mobile is: "Put your best people on mobile." Why? Because Mobile today
wide margin, the fastest-growing giant industry on the planet. Because all major digital
technologies are headed to mobile - telecoms, computers, the internet, etc - and all major
                                                                  Instapaper
media are headed to mobile - music, gaming, news, television, advertising - and even money,
from coins to banking to credit cards, is headed to a phone near you. This is definitely the
"industry of the decade" and we have only begun. So how big is big? Its huge. Lets review
                                                                                Flipboard
the numbers.

5.2 BILLION SUBSCRIBERS

So first the biggest number - 5.2. That is in billions with a B. There are 1.2 billion personal
computers in use worldwide including desktops, laptops and tablet PCs like the iPad. There
are 1.1 billion fixed landline phones. There are 1.0 billion automobiles registered and in use.
There are 1.6 billion television sets, 1.7 billion credit card users, 2.0 billion internet users, 2.2
billion people with a banking account, and 3.9 billion radio receivers in use worldwide.
February 17, 2011



All the Numbers, All the Facts on Mobile the Trillion-
Dollar Industry. Why is Google saying: Put your Best
People on Mobile?
Yes, Google (outgoing) CEO Eric Schmidt had been saying 'Mobile First' but his latest
version of his 'Mobile mobile mobile' mantra, that he shares with all partners and companies
interested in mobile is: "Put your best people on mobile." Why? Because Mobile today is byto
                                                              and don't be afraid a
wide margin, the fastest-growing giant industry on the planet. Because all their ideas...
                                                                  steal major digital
technologies are headed to mobile - telecoms, computers, the internet, etc - and all major
                                                                               ie. 'preferences'
media are headed to mobile - music, gaming, news, television, advertising - and even money,
from coins to banking to credit cards, is headed to a phone near you. This is definitely the
"industry of the decade" and we have only begun. So how big is big? Its huge. Lets review
the numbers.

5.2 BILLION SUBSCRIBERS

So first the biggest number - 5.2. That is in billions with a B. There are 1.2 billion personal
computers in use worldwide including desktops, laptops and tablet PCs like the iPad. There
are 1.1 billion fixed landline phones. There are 1.0 billion automobiles registered and in use.
There are 1.6 billion television sets, 1.7 billion credit card users, 2.0 billion internet users, 2.2
billion people with a banking account, and 3.9 billion radio receivers in use worldwide.
http://www.flickr.com/photos/farleyj/2768941171
/*	
  dimensions	
  */
                                                                     ...check out   if you use
$min-­‐width:	
  220px;
                               constraints can easily be modified
$max-­‐width:	
  960px;

$column-­‐main:	
  65%;
$column-­‐aside:	
  31%;      relative values provide flexibility
$column-­‐margin:	
  4%;
                                                             ems + %'s                   $variables
/*	
  dimensions	
  */
                                                 think relative, embrace uncertainty
@mixin	
  aside	
  {
	
   clear:	
  right;                                          and express yourself...
	
   float:	
  right;
	
   margin:	
  0	
  0	
  0	
  $column-­‐margin;
	
   &:color	
  opacify($azure-­‐sea-­‐of-­‐despair,	
  0.8);
	
   width:	
  $column-­‐aside;
}

@mixin	
  wrap	
  {
	
   clear:	
  both;         expressions based on variable
	
   display:	
  block;         features + constraints
	
   margin:	
  0px	
  auto;
	
   padding:	
  0px	
  $column-­‐margin/2;
	
   min-­‐width:	
  $min-­‐width;
	
   max-­‐width:	
  $max-­‐width;
}

/*	
  colours	
  */
$azure-­‐sea-­‐of-­‐despair:	
  rgba(84,	
  174,	
  207,	
  0.75);                               http://sass-lang.com
February 17, 2011



All the Numbers, All the Facts on Mobile the Trillion-
Dollar Industry. Why is Google saying: Put your Best
People on Mobile?
Yes, Google (outgoing) CEO Eric Schmidt had been saying 'Mobile First' but his latest
version of his 'Mobile mobile mobile' mantra, that he shares picture is often worth
                                                          a with all partners and companies
                                                               a thousand words...
interested in mobile is: "Put your best people on mobile." Why? Because Mobile today is by a
wide margin, the fastest-growing giant industry on the planet. Because all major digital
technologies are headed to mobile - telecoms, computers, the internet, etc - and all major
media are headed to mobile - music, gaming, news, television, advertising - and even money,
from coins to banking to credit cards, is headed to a phone near you. This is definitely the
"industry of the decade" and we have only begun. So how big is big? Its huge. Lets review
the numbers.

5.2 BILLION SUBSCRIBERS

So first the biggest number - 5.2. That is in billions with a B. There are 1.2 billion personal
computers in use worldwide including desktops, laptops and tablet PCs like the iPad. There
are 1.1 billion fixed landline phones. There are 1.0 billion automobiles registered and in use.
There are 1.6 billion television sets, 1.7 billion credit card users, 2.0 billion internet users, 2.2
billion people with a banking account, and 3.9 billion radio receivers in use worldwide.
February 17, 2011



All the Numbers, All the Facts on Mobile the Trillion-
Dollar Industry. Why is Google saying: Put your Best
People on Mobile?
Yes, Google (outgoing) CEO Eric Schmidt had
been saying 'Mobile First' but his latest version of
his 'Mobile mobile mobile' mantra, that he shares
with all partners and companies interested in
mobile is: "Put your best people on mobile."
Why? Because Mobile today is by a wide margin,
the fastest-growing giant industry on the planet.
Because all major digital technologies are headed
to mobile - telecoms, computers, the internet, etc
- and all major media are headed to mobile -
music, gaming, news, television, advertising - and even money, from coins to banking to
credit cards, is headed to a phone near you. This is definitely the "industry of the decade"
and we have only begun. So how big is big? Its huge.

5.2 BILLION SUBSCRIBERS

So first the biggest number - 5.2. That is in billions with a B. There are 1.2 billion personal
February 17, 2011


                 All the Numbers, All the Facts on Mobile
                 the Trillion-Dollar Industry. Why is
                 Google saying: Put your Best People on
                 Mobile?



                                                                   tinySrc
                                                                     http://tinysrc.net/


                                                                                       a cloud app to resize images
                                                                                       appropriate to the device context
device context                                                                                  device context


                 Yes, Google (outgoing) CEO Eric Schmidt had been
                 saying 'Mobile First' but his latest version of his 'Mobile
                                                                            the simplest way
                                                                       to adapt your images
                 mobile mobile' mantra, that he shares with all partners
                 and companies interested in mobile is: "Put your best
                 people on mobile." Why? Because Mobile today is by a
                 wide margin, the fastest-growing giant industry on the
                 planet. Because all major digital technologies are headed
                 to mobile - telecoms, computers, the internet, etc - and all
                 major media are headed to mobile - music, gaming,                     BTW - ImageMagick, GD, Batik,
                 news, television, advertising - and even money, from
                 coins to banking to credit cards, is headed to a phone
                                                                                       PIL and other libraries and
                 near you. This is definitely the "industry of the decade"             applications can be used to roll
                 and we have only begun. So how big is big? Its huge.                  your own solution...
                 Lets review the numbers.


                 5.2 BILLION SUBSCRIBERS
                 So first the biggest number - 5.2. That is in billions with a
but images
     can also be...




http://www.flickr.com/photos/johanl/4382372758
data




                                   ...applications

                                                                data
                            design elements
focus region




                              BTW - ImageMagick, GD, Batik,
                              PIL and other libraries and
                              applications can be used to roll
                              your own solution...
                                                     <canvas />
               <canvas />

                                 http://www.flickr.com/photos/johanl/4382372758
that adapt
constraints




              http://www.flickr.com/photos/johanl/4382372758
focus region


                     to changes...




               http://www.flickr.com/photos/johanl/4382372758
in context...




http://www.flickr.com/photos/johanl/4382372758
February 17, 2011



All the Numbers, All the Facts on Mobile the Trillion-
Dollar Industry. Why is Google saying: Put your Best
People on Mobile?




Yes, Google (outgoing) CEO Eric Schmidt had been saying 'Mobile First' but his latest
version of his 'Mobile mobile mobile' mantra, that he shares with all partners and companies
interested in mobile is: "Put your best people on mobile." Why? Because Mobile today is by a
wide margin, the fastest-growing giant industry on the planet. Because all major digital
technologies are headed to mobile - telecoms, computers, the internet, etc - and all major
media are headed to mobile - music, gaming, news, television, advertising - and even money,
from coins to banking to credit cards, is headed to a phone near you. This is definitely the
<aside />
                  #rant




http://paulrouget.com/e/infographicsInHTML5
Yes, Google (outgoing) CEO Eric Schmidt had been
saying 'Mobile First' but his latest version of his 'Mobile
mobile mobile' mantra, that he shares with all partners
and companies interested in mobile is: "Put your best
people on mobile." Why? Because Mobile today is by a
wide margin, the fastest-growing giant industry on the
planet. Because all major digital technologies are headed
to mobile - telecoms, computers, the internet, etc - and all
major media are headed to mobile - music, gaming,
news, television, advertising - and even money, from
coins to banking to credit cards, is headed to a phone
near you. This is definitely the "industry of the decade"
and we have only begun. So how big is big? Its huge.
Lets review the numbers.


5.2 BILLION SUBSCRIBERS
So first the biggest number - 5.2. That is in billions with a
B. There are 1.2 billion personal computers in use
worldwide including desktops, laptops and tablet PCs
like the iPad. There are 1.1 billion fixed landline phones.
There are 1.0 billion automobiles registered and in use.
There are 1.6 billion television sets, 1.7 billion credit card   ...and what about
                                                                       all that text?
users, 2.0 billion internet users, 2.2 billion people with a
banking account, and 3.9 billion radio receivers in use
worldwide. Mobile utterly dwarfs them all - with 5.2
billion currently active, ie fully paid mobile phone
subscriptions. Active mobile phone accounts. 5.2 billion.
yes, 4.5 times more mobile phone subscriptions than
personal computers or landline phones. 2.5x more mobile
accounts than all internet users. 3 times more mobile
subscribers than the total number of television sets.
Mobile is huge.

The planet has 6.9 billion people alive, from babies to
great grandparents. Now there is an active mobile phone
subscription for 75% of them. So where are we? One way
@bdconf
If you're not at #mobilism you can still
watch the browser panel at
http://mobilism.nl/2011/stream at 16:00
CET! via @ppk


                                  ...or for that matter
                                              this text?
make it usable
and meaningful...




 http://www.flickr.com/photos/aubergene/970367879
add structure to
enable manipulation...


      http://www.flickr.com/photos/aubergene/970367879
tag
identifier   @bdconf
            If you're not at #mobilism you can still
            watch the browser panel at
      url   http://mobilism.nl/2011/stream at 16:00
            CET! via @ppk


                                              markup enhances
                                             your textual data...
                                                       or content...?
If you're not at #mobilism you can still
watch the browser panel at
http://mobilism.nl/2011/stream at 16:00
CET! via @ppk                      this is also recognisable...
Yes, Google (outgoing) CEO Eric Schmidt had been
                                        saying 'Mobile First' but his latest version of his 'Mobile
                                        mobile mobile' mantra, that he shares with all partners
                                        and companies interested in mobile is: "Put your best
                                        people on mobile." Why? Because Mobile today is by a
                                        wide margin, the fastest-growing giant industry on the
                                        planet. Because all major digital technologies are headed
                                        to mobile - telecoms, computers, the internet, etc - and all
                                        major media are headed to mobile - music, gaming,
                       microformats     news, television, advertising - and even money, from
                           microformats.org
                                        coins to banking to credit cards, is headed to a phone
                                        near you. This is definitely the "industry of the decade"
open data formats                       and we have only begun. So how big is big? Its huge.
hCard, hCal, rel-*, etc.                Lets review the numbers.


                                       5.2 BILLION SUBSCRIBERS
                                                                                                  ...read it and add
                                       So first the biggest number - 5.2. That is in billions with a

                                                                                               meaningful structure
                                       B. There are 1.2 billion personal computers in use
                                       worldwide including desktops, laptops and tablet PCs
                                       like the iPad. There are 1.1 billion fixed landline phones.
                                       There are 1.0 billion automobiles registered and in use.
                                       There are 1.6 billion television sets, 1.7 billion credit card
                                                                                                                  some call it editorial...
                                       users, 2.0 billion internet users, 2.2 billion people with a
                                       banking account, and 3.9 billion radio receivers in use
                                       worldwide. Mobile utterly dwarfs them all - with 5.2
                                       billion currently active, ie fully paid mobile phone
                                       subscriptions. Active mobile phone accounts. 5.2 billion.
                                       yes, 4.5 times more mobile phone subscriptions than
                                       personal computers or landline phones. 2.5x more mobile
                                       accounts than all internet users. 3 times more mobile
                                       subscribers than the total number of television sets.          HTML5
                                                                                                   http://w3.org/html5
                                       Mobile is huge.
                                                                                                                           data-attributes
                                       The planet has 6.9 billion people alive, from babies to                           semantic elements
                                       great grandparents. Now there is an active mobile phone
                                       subscription for 75% of them. So where are we? One way
typically
"Links don't open apps" Google (outgoing) CEOlatestSchmidt of his 'Mobile
                     Yes,
                     saying 'Mobile First' but his
                                                   Eric
                                                        version
                                                                had been

– @grigs                      mobile mobile' mantra, that he shares with all partners
                              and companies interested in mobile is: "Put your best
                              people on mobile." Why? Because Mobile today is by a
                              wide margin, the fastest-growing giant industry on the
                              planet. Because all major digital technologies are headed
                              to mobile - telecoms, computers, the internet, etc - and all
                              major media are headed to mobile - music, gaming,
                              news, television, advertising - and even money, from
                              coins to banking to credit cards, is headed to a phone
                                                                                    which will enable
                              near you. This is definitely the "industry of the decade"

                                                                             you to better interpret...
                              and we have only begun. So how big is big? Its huge.
                              Lets review the numbers.

                              5.2 BILLION SUBSCRIBERS
                               Description                                 Billions
                               mobile	
  subscribers                       5.2
                               personal	
  computers	
  in	
  use          1.2    interpret
                               fixed	
  landline	
  phones                 1.1
                               registered	
  automobiles	
  in	
  use      1.0
                               television	
  sets                          1.6                  a little information design can
                               credit	
  card	
  users                     1.7                  often help clarify things...
                               internet	
  users                           2.0
                               people	
  with	
  a	
  banking	
  account   2.2
                               radio	
  receivers	
  in	
  use             3.9


                              The planet has 6.9 billion people alive, from babies to
                              great grandparents. Now there is an active mobile phone
                              subscription for 75% of them. So where are we? One way
                              to look at it is electricity. The planet has 1.6 billion people
                              who live beyond the reach of electricity (said CNN, 2009).
                              So the mobile phone subscriber count is almost matching
                              every human alive (including babies etc) who enjoys
Yes, Google (outgoing) CEO Eric Schmidt had been
                                            saying 'Mobile First' but his latest version of his 'Mobile
                                            mobile mobile' mantra, that he shares with all partners
                                            and companies interested in mobile is: "Put your best
                                            people on mobile." Why? Because Mobile today is by a
                                            wide margin, the fastest-growing giant industry on the
                                            planet. Because all major digital technologies are headed
                                            to mobile - telecoms, computers, the internet, etc - and all
                                            major media are headed to mobile - music, gaming,
                                            news, television, advertising - and even money, from
                                                                                                              and communicate
                                            coins to banking to credit cards, is headed to a phone
                                            near you. This is definitely the "industry of the decade"
                                                                                                                your message...
                                            and we have only begun. So how big is big? Its huge.
                                            Lets review the numbers.

                                            5.2 BILLION SUBSCRIBERS
ion                              Billions     6

ubscribers                       5.2
                                            4.5
	
  computers	
  in	
  use       1.2
                                                                                                       chart tools API
ndline	
  phones                 1.1          3                                  visualise
ed	
  automobiles	
  in	
  use   1.0
on	
  sets                       1.6        1.5

ard	
  users                     1.7
                                              0
                                                                                                                     images can also
	
  users                        2.0                              billions	
  of	
  users                            be applications!
ith	
  a	
  banking	
  account   2.2                 mobile            radio                bank	
  account
                                                     internet          credit	
  card       television
ceivers	
  in	
  use             3.9                 computers         landline             automobiles

                                            The planet has 6.9 billion people alive, from babies to
                                            great grandparents. Now there is an active mobile phone
                                            subscription for 75% of them. So where are we? One way
                                            to look at it is electricity. The planet has 1.6 billion people
                                            who live beyond the reach of electricity (said CNN, 2009).
                                            So the mobile phone subscriber count is almost matching
                                            every human alive (including babies etc) who enjoys
Muddling Through the Mobile Web
Muddling Through the Mobile Web
Muddling Through the Mobile Web
Muddling Through the Mobile Web
Muddling Through the Mobile Web
Muddling Through the Mobile Web
Muddling Through the Mobile Web
Muddling Through the Mobile Web
Muddling Through the Mobile Web
Muddling Through the Mobile Web

More Related Content

Viewers also liked

Social Media Success Stories
Social Media Success Stories Social Media Success Stories
Social Media Success Stories Viqui Dill
 
Universidad nacional de chimborazo karu
Universidad nacional de chimborazo karuUniversidad nacional de chimborazo karu
Universidad nacional de chimborazo karukaru_linda
 
Resume update executive it
Resume  update executive itResume  update executive it
Resume update executive itAjaya Mohanty
 
Impacto de las tic en la educación.luisa
Impacto de las tic en la educación.luisaImpacto de las tic en la educación.luisa
Impacto de las tic en la educación.luisaluisa fernanda orozco
 
«Самоорганизуй» себя, пока не «самоорганизовали» тебя
«Самоорганизуй» себя, пока не «самоорганизовали» тебя«Самоорганизуй» себя, пока не «самоорганизовали» тебя
«Самоорганизуй» себя, пока не «самоорганизовали» тебяAndrii Dzynia
 
Newsbrands and social media
Newsbrands and social media Newsbrands and social media
Newsbrands and social media Newsworks
 
New Global Healthcare - Another Chapter In Healthcare Marketing Brand Management
New Global Healthcare - Another Chapter In Healthcare Marketing Brand ManagementNew Global Healthcare - Another Chapter In Healthcare Marketing Brand Management
New Global Healthcare - Another Chapter In Healthcare Marketing Brand ManagementHealthcare-Marketing
 
cchandler_portfolioFeb16.3
cchandler_portfolioFeb16.3cchandler_portfolioFeb16.3
cchandler_portfolioFeb16.3Charles Chandler
 
Resume mohanty it executive
Resume mohanty it executiveResume mohanty it executive
Resume mohanty it executiveAjaya Mohanty
 
GREATEST HITS MAY 2013
GREATEST HITS MAY 2013GREATEST HITS MAY 2013
GREATEST HITS MAY 2013Kevin Duncan
 
Online audience research
Online audience researchOnline audience research
Online audience researchchino rambo
 
National Civic Summit - BBB Civic Ethics - Lisa Jemtrud
National Civic Summit - BBB Civic Ethics - Lisa JemtrudNational Civic Summit - BBB Civic Ethics - Lisa Jemtrud
National Civic Summit - BBB Civic Ethics - Lisa JemtrudNational Civic Summit
 

Viewers also liked (13)

Social Media Success Stories
Social Media Success Stories Social Media Success Stories
Social Media Success Stories
 
Universidad nacional de chimborazo karu
Universidad nacional de chimborazo karuUniversidad nacional de chimborazo karu
Universidad nacional de chimborazo karu
 
Resume update executive it
Resume  update executive itResume  update executive it
Resume update executive it
 
Impacto de las tic en la educación.luisa
Impacto de las tic en la educación.luisaImpacto de las tic en la educación.luisa
Impacto de las tic en la educación.luisa
 
«Самоорганизуй» себя, пока не «самоорганизовали» тебя
«Самоорганизуй» себя, пока не «самоорганизовали» тебя«Самоорганизуй» себя, пока не «самоорганизовали» тебя
«Самоорганизуй» себя, пока не «самоорганизовали» тебя
 
Newsbrands and social media
Newsbrands and social media Newsbrands and social media
Newsbrands and social media
 
Ost
OstOst
Ost
 
New Global Healthcare - Another Chapter In Healthcare Marketing Brand Management
New Global Healthcare - Another Chapter In Healthcare Marketing Brand ManagementNew Global Healthcare - Another Chapter In Healthcare Marketing Brand Management
New Global Healthcare - Another Chapter In Healthcare Marketing Brand Management
 
cchandler_portfolioFeb16.3
cchandler_portfolioFeb16.3cchandler_portfolioFeb16.3
cchandler_portfolioFeb16.3
 
Resume mohanty it executive
Resume mohanty it executiveResume mohanty it executive
Resume mohanty it executive
 
GREATEST HITS MAY 2013
GREATEST HITS MAY 2013GREATEST HITS MAY 2013
GREATEST HITS MAY 2013
 
Online audience research
Online audience researchOnline audience research
Online audience research
 
National Civic Summit - BBB Civic Ethics - Lisa Jemtrud
National Civic Summit - BBB Civic Ethics - Lisa JemtrudNational Civic Summit - BBB Civic Ethics - Lisa Jemtrud
National Civic Summit - BBB Civic Ethics - Lisa Jemtrud
 

More from yiibu

Designing for conversation
Designing for conversationDesigning for conversation
Designing for conversationyiibu
 
The internet of things is for people
The internet of things is for peopleThe internet of things is for people
The internet of things is for peopleyiibu
 
Exploring the physical web
Exploring the physical webExploring the physical web
Exploring the physical webyiibu
 
Imagining the physical web
Imagining the physical webImagining the physical web
Imagining the physical webyiibu
 
The future of media queries?
The future of media queries?The future of media queries?
The future of media queries?yiibu
 
The Emerging Global Web
The Emerging Global WebThe Emerging Global Web
The Emerging Global Webyiibu
 
Beyond progressive-enhancement
Beyond progressive-enhancementBeyond progressive-enhancement
Beyond progressive-enhancementyiibu
 
Designing for diversity - how to stop worrying and embrace the Android revol...
Designing for diversity -  how to stop worrying and embrace the Android revol...Designing for diversity -  how to stop worrying and embrace the Android revol...
Designing for diversity - how to stop worrying and embrace the Android revol...yiibu
 
Everything old is new again
Everything old is new againEverything old is new again
Everything old is new againyiibu
 
Reset the Web
Reset the WebReset the Web
Reset the Webyiibu
 
Adaptation: Why responsive design actually begins on the server
Adaptation: Why responsive design actually begins on the serverAdaptation: Why responsive design actually begins on the server
Adaptation: Why responsive design actually begins on the serveryiibu
 
Letting Go
Letting GoLetting Go
Letting Goyiibu
 
The trouble with context
The trouble with contextThe trouble with context
The trouble with contextyiibu
 
It's about people, not devices...
It's about people, not devices...It's about people, not devices...
It's about people, not devices...yiibu
 
Beyond the mobile web by yiibu
Beyond the mobile web by yiibuBeyond the mobile web by yiibu
Beyond the mobile web by yiibuyiibu
 
Developing an Interface for the Future of Mass Market Software Distribution (...
Developing an Interface for the Future of Mass Market Software Distribution (...Developing an Interface for the Future of Mass Market Software Distribution (...
Developing an Interface for the Future of Mass Market Software Distribution (...yiibu
 

More from yiibu (16)

Designing for conversation
Designing for conversationDesigning for conversation
Designing for conversation
 
The internet of things is for people
The internet of things is for peopleThe internet of things is for people
The internet of things is for people
 
Exploring the physical web
Exploring the physical webExploring the physical web
Exploring the physical web
 
Imagining the physical web
Imagining the physical webImagining the physical web
Imagining the physical web
 
The future of media queries?
The future of media queries?The future of media queries?
The future of media queries?
 
The Emerging Global Web
The Emerging Global WebThe Emerging Global Web
The Emerging Global Web
 
Beyond progressive-enhancement
Beyond progressive-enhancementBeyond progressive-enhancement
Beyond progressive-enhancement
 
Designing for diversity - how to stop worrying and embrace the Android revol...
Designing for diversity -  how to stop worrying and embrace the Android revol...Designing for diversity -  how to stop worrying and embrace the Android revol...
Designing for diversity - how to stop worrying and embrace the Android revol...
 
Everything old is new again
Everything old is new againEverything old is new again
Everything old is new again
 
Reset the Web
Reset the WebReset the Web
Reset the Web
 
Adaptation: Why responsive design actually begins on the server
Adaptation: Why responsive design actually begins on the serverAdaptation: Why responsive design actually begins on the server
Adaptation: Why responsive design actually begins on the server
 
Letting Go
Letting GoLetting Go
Letting Go
 
The trouble with context
The trouble with contextThe trouble with context
The trouble with context
 
It's about people, not devices...
It's about people, not devices...It's about people, not devices...
It's about people, not devices...
 
Beyond the mobile web by yiibu
Beyond the mobile web by yiibuBeyond the mobile web by yiibu
Beyond the mobile web by yiibu
 
Developing an Interface for the Future of Mass Market Software Distribution (...
Developing an Interface for the Future of Mass Market Software Distribution (...Developing an Interface for the Future of Mass Market Software Distribution (...
Developing an Interface for the Future of Mass Market Software Distribution (...
 

Recently uploaded

Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTopCSSGallery
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfTejal81
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxNeo4j
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsDianaGray10
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxKaustubhBhavsar6
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud DataEric D. Schabell
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingFrancesco Corti
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.IPLOOK Networks
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightSafe Software
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)codyslingerland1
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationKnoldus Inc.
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdfThe Good Food Institute
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kitJamie (Taka) Wang
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applicationsnooralam814309
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Libraryshyamraj55
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Alkin Tezuysal
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FESTBillieHyde
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingMAGNIntelligence
 

Recently uploaded (20)

Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development Companies
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projects
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile Brochure
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is going
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)
 
SheDev 2024
SheDev 2024SheDev 2024
SheDev 2024
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its application
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kit
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applications
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Library
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FEST
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced Computing
 

Muddling Through the Mobile Web

  • 1. Muddling Through the Mobile Web designing for rapid change and increasing diversity http://creativecommons.org/licenses/by/2.0 http://www.flickr.com/photos/booleansplit/2806792407
  • 2. things are moving pretty quickly these days... http://www.flickr.com/photos/joo0ey/4630950433
  • 3. until very recently ‘best practice’ was to build a separate mobile site... typically m.domain.com || domain.mobi http://www.forum.nokia.com/Develop/Web/Mobile_web_browsing/Web_templates
  • 4. but lately, old ideas are being revisited... http://www.alistapart.com/articles/understandingprogressiveenhancement
  • 5. ...and new ideas are really shaking things up http://www.alistapart.com/articles/responsive-web-design
  • 6. ...of course the elusive ‘One Web’ still beckons madmen & dreamers http://www.flickr.com/photos/3oheme/4069616710
  • 7. ...of which we’re pragmatic devotees ;) http://www.flickr.com/photos/aerosolhalos/5134483703
  • 8. You must have a goal in life. BUT http://www.flickr.com/photos/christopherdombres/4493564844
  • 9. rethinking mobile web yiibu try to keep an open mind and regularly challenge our beliefs... http://www.flickr.com/photos/fpat/3692425154
  • 10. this is rhetorical... Are we there yet? http://yiibu.com
  • 11. ...why are kiwi fruit fuzzy? many questions remain unanswered... http://www.flickr.com/photos/wwworks/2427001802
  • 12. @media queries? yes no *.mobi? adapt? yes ? web mobile? yes is ? yes such as...what do you do with one web? yes ? yes yes yes? many Rethinking the Mobile Web no no images like this? no device dB? yes yes desktop no care? yes ? UA sni ng? few umm...? no no yes yes *.mobi? @media queries? adapt? yes no yes U ? yes available here? many web mobile? yes is ? yes one web? yes ? device dB? no no no yes yes desktop no care? yes ? UA sni ng? web no mobile? yes @media no queries? http://yiibu.com
  • 13. automagically scaling detailed images isn't ideal... no few no @media queries? yes yes no *.mobi? adapt? yes ? yes? yes yes web mobile? yes is ? yes one web? yes ? many Rethinking the Mobile Web few device dB? no no umm...? no no yes no yes yes desktop no care? yes ? UA sni ng? yes *.mobi? @media queries? adapt? desktop web ? few umm...? no no yes yes no *.mobi? *.mobi? no mobile? yes yes yes @media queries? adapt? ? available umm...? @media no yes no yes queries? here? yes yes UA sni ng? ? yes available here? is ? many device dB? one web mobile? yes is ? yes one web? yes ? device dB? web? no many web mobile? yes is ? no yes no one web? yes no yes ? device dB? adapt? yes care? few yes many desktop no care? yes ? UA sni ng? no no no unreadable web yes no mobile? yes yes @media ? no yes queries? desktop no care? UA sni ng? http://yiibu.com
  • 14. eries? yes yes no *.mobi? adapt? yes? yes yes is ? yes one web? yes ? many device dB? ile Web no no yes yes care? yes ? UA sni ng? hmm... desktop web yes few no yes no mobile? yes yes *.mobi? *.mobi? eries? adapt? @m umm...? no qu available yes no here? available UA sni ng? yes here? is ? y B? many many device dB? one is ? yes one web? yes ? device dB? web? no adapt? no no f yes yes yes care? yes many o care? yes ? UA sni ng? http://yiibu.com
  • 15. o adapt? yes? yes yes many device dB? yes yes ...do we simply ? provide alternates? desktop web yes yes no mobile? yes *.mobi? adapt? @media umm...? no available queries? here? UA sni ng? yes available here? many is ? yes B? many device dB? one device dB? web? no adapt? yes few yes yes care? yes many http://yiibu.com
  • 16. o ? @240x2 web mobile? yes adapt? web yes? yes yes no no mobile? yes many device dB? no @media queries? @320x2 desktop no yes yes @960 ...do we simply desktop web ? provide alternates? desktop web yes yes countless no no mobile? yes mobile? yes *.mobi? *.mobi? adapt? @m @1280 available umm...? no @media queries? umm...? no qu here? UA sni ng? UA sni ng? yes available B? here? many is ? yes @320 one is ? y many device dB? one device dB? device dB? web? web? no no adapt? adapt? few f yes yes care? yes yes care? yes many many @640 @640x2 web desktop apt? no mobile? yes yes? no @media es yes queries? many ce dB? @240 *.mobi? yes web es http://yiibu.com no mobile? yes
  • 17. every stylesheet is not required 3 columns, really? @font support varies desktop scripts aren't suitable for mobile typically perhaps a bit ambitious? ...what about scripts & stylesheets that aren't suitable? ...a bit late, no? device detect early
  • 18. too many HTTP...do we requests...simply provide alternates? ...that's a lot of unsupported JavaScript! media formats... ...is Flash even supported? the right version of ...aye, thar be Floosh! ...does every device get the same Floosh – if they support Floosh? http://yiibu.com
  • 19. ...available bandwidth? ...is orthogonal to... ...screen size? this only deals with codecs - not context*... ...or factors that you just can't detect c.2000... http://www.w3.org/TR/html5/video.html
  • 20. mmm, Spongebob... “ Biggest problem for handheld web video playback still seems to be pulling down a high-bitrate HD file...with extra pixels that never display. – @jdowdell http://www.flickr.com/photos/rexroof/3372607671
  • 21. 'we' being yiibu... obviously delusional ...so we've done a little mild insanity brainstorming... research harmless sketches something else...? prototypes crazy ideas cerebral gymnastics Research is what I’m doing when I don’t know what I’m doing. – Wernher von Braun http://www.flickr.com/photos/humblog/4522388767
  • 22. server-side media queries and we have a little filters dirty laundry to share... XSLT http://www.flickr.com/photos/katayun/4288456971
  • 23. ...a selection of content filtering + transformation prototypes http://www.flickr.com/photos/digger_twit/1353837770
  • 24. g in n er tioes lt a typ t firm roto en fo p nt ns Co ra t rs ... + Fi lte Plan B .D OM server-side media queries... a http://www.flickr.com/photos/mwichary/2614644341
  • 25. begin with some existing HTML content...
  • 26. Raw user agent: Mozilla/5.0 (SymbianOS/9.1; U; en-us) AppleWebKit/413 ... Device identified as: Nokia N73 Actual Root Device ID: nokia_n73_ver1 WURFL ID: nokia_n73_ver1_submozilla50 physical_screen_height: 49 columns: 21 dual_orientation: false physical_screen_width: 37 $wurfl->getDevice($id); rows: 6 max_image_width: 229 resolution_height: 320 resolution_width: 240 max_image_height: 260 this is what we're after! ... http://www.tera-wurfl.com/explore/
  • 27. resolution_width: 240 device property $html->find('img[src]');
  • 28. resolution_width: 240 device property <img /> <img /> <img />
  • 29. resolution_width: 240 device property based on... panda.jpg panda@320.jpg panda@240.jpg repeat process for each <img> found in document... replace each image with a more suitable alternate... http://www.flickr.com/photos/davefayram/3773208649
  • 30. IL resolution_width: 240 device property FA panda.jpg panda@320.jpg panda@240.jpg ...how many images are required? ...related elements? ...what about slightly "fuzzier" DOM elements? ...other elements? http://www.flickr.com/photos/davefayram/3773208649
  • 31. in n g er tioes lt a typ t firm roto en fo p nt ns Co ra t ..t.eir uses... rsave h + lttey do h Fi he .D OM id rie e s... a -s e er qu rv ia Seed b. m http://www.flickr.com/photos/mwichary/2614644341
  • 33. *H AC K* FAIL yet revolting ...an interesting idea that quickly got out of control... {{mustache}} inspired... written in slippery slope PHP hacked together in PHP almost reinvent ed... to (should have been C for speed)... XSLT! ...apologies to @stephenhay
  • 34. in n g r o te ti ypes #mobilism at fi l a t we support s mtdemo.mobi processing o erver side t rm roto en fo p enhanced witf media-queries t s on an from wurfl... h all features C r t ..t.eir uses... rsave h EASE LO! – @harloff + lttey do h PLAY HEL Fi he O M e s...S a .D id rie -s e er qu rv ia . b m Seed LT ? X S is it .R ev c http://www.flickr.com/photos/mwichary/2614644341
  • 35. ...use XSLT – after all it was made to style content!? WTFF? AIL found massive inspiration yup, that's "99 for XSLT here! Bottles of Beer" in XSLT...? ...we honestly tried, but we @$*#& XSLT! http://www.angelfire.com/tx4/cus/shapes/bottles.html
  • 36. in n g r o te ti ypes #mobilism at fi l a t we support s mtdemo.mobi processing o erver side t rm roto en fo p enhanced witf media-queries t s on an from wurfl... h all features C r t ..t.eir uses... rsave h EASE LO! – @harloff + lttey do h PLAY HEL Fi he O M e s... S a .D -s eid rie er qu rv ia . b m Seed LT ? S X te... it ed tas isacquir .R ev an c http://www.flickr.com/photos/mwichary/2614644341
  • 37. ...eventually we came to accept that we can't get there, from here http://www.flickr.com/photos/awfulshot/180189401
  • 38. but we did learn two things... http://www.flickr.com/photos/meddygarnet/3390890516
  • 39. respon sive design & one web the mobile web is really bloody difficult... http://www.flickr.com/photos/vauvau/3466024918
  • 40. everything we believed about the web today is wrong... http://www.flickr.com/photos/congaman/4059136660
  • 41. in hindsight...the problem becomes obvious... http://www.flickr.com/photos/sketch22/2460898332
  • 42. display size/width in the beginning we had computers... 512 x 342 1984 1990 1994 1998 2004 2007
  • 43. display size/width we came to expect 1440 more and more every year... 1280 1024 512 x 342 1024 x 768 800 640 512 1984 1990 1994 1998 2004 2007
  • 44. display size/width ...one day1440 2007 in less became much more 1280 1024 512 x 342 1024 x 768 800 640 512 320 x 480 240 1984 1990 1994 1998 2004 2007
  • 45. display size/width today we seem1440 have to 1280 lot less more... a 1024 512 x 342 1024 x 768 800 768 x 1024 640 480 x 800 512 320 x 480 240 1984 1990 1994 1998 2004 2007
  • 46. display size/width public displays 3200 with a lot more less on the horizon... 1920 x 1080 1920 1024 x 768 768 x 1024 1440 1280 600 x 1024 480 x 800 360 x 640 1024 320 x 480 800 640 240 1990 1994 1998 2004 2007 2011 2015
  • 47. 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 via mobiThinking http://www.flickr.com/photos/tocaboca/5524320942
  • 48. yet we're inherently constrained by human factors... http://www.flickr.com/photos/carbonnyc/4213684953
  • 49. which presents us with one problem... nagging http://www.flickr.com/photos/whiskeytango/471826517
  • 50. the hell how do we make content meaningful in all of these varied contexts? http://www.flickr.com/photos/izzyplante/4009893952
  • 51. ...let's first deal with what we mean by 'context'... http://www.flickr.com/photos/sporst/3999795549
  • 52. con•text [kon-tekst] – the set of circumstances or facts that surround a particular event, situation, etc. http://dictionary.reference.com/browse/context
  • 53. human beings are a generally unpredictable lot... http://www.flickr.com/photos/collinmesser/4567027786
  • 54. meaningful determining user context remains an impossible task... http://www.flickr.com/photos/collinmesser/4567027786
  • 55. meaningful while determining device context is often a much simpler endeavour... and opportunity.. . http://www.flickr.com/photos/hejgustav/3631418869
  • 56. and stuff you stuff you know wish you didn't... features + constraints • screen size • screen size • local storage • no touch • touch • poor JavaScript • canvas • no canvas • SVG • isMSIE • etc • etc http://www.flickr.com/photos/katerha/4330199412
  • 57. feature detection the client with both client & server working together... device database and the server "first-run" http://www.flickr.com/photos/donkeyhotey/5527263186
  • 59. Hmm, Huston - we have a problem... JavaScript HTML fonts initial request stylesheets images Flash video ...no idea what we can deliver to this client... 1 http://www.flickr.com/photos/wscullin/3770015203
  • 60. $wurfl->getDevice($id); ...or another dB! PHP, Java, etc. http://www.flickr.com/photos/wscullin/3770015203
  • 61. width: 320 px... use what you can... PHP, Java, etc. {    width:{        screen:320    } } 2 create profile a cookie http://www.flickr.com/photos/wscullin/3770015203
  • 62. we could send smaller images... JavaScript HTML fonts stylesheets images images Flash video reduce images include only those resources suitable for device context... {    width:{        screen:320    } } http://www.flickr.com/photos/wscullin/3770015203
  • 63. be sure to compress them if you can... {    width:{        screen:320    } } http://www.flickr.com/photos/wscullin/3770015203
  • 64. initial response {    width:{        screen:320    } } http://www.flickr.com/photos/wscullin/3770015203
  • 65. {    width:{        screen:320    } } 3 detectFeatures(); JavaScript http://www.flickr.com/photos/wscullin/3770015203
  • 66. {    width:{        screen:320,        document:320 subsequent    }, request    xhr:true,    canvas:true,    flash:false,    video:true,    formats:{        h264:probably,        ogg:false,        webm:false    },    offline:true } 4 update profile ...now with more chips! http://www.flickr.com/photos/wscullin/3770015203
  • 67. sync profile { 5    width:{        screen:320,        document:320    },    xhr:true,    canvas:true,    flash:false,    video:true,    formats:{        h264:probably,        ogg:false,        webm:false    },    offline:true } same profile on both client & server http://www.flickr.com/photos/wscullin/3770015203
  • 68. now, send only what's required { 6    width:{ HTML JavaScript HTML JavaScript fonts        screen:320,        document:320 images stylesheets images stylesheets    },    xhr:true,    canvas:true, Flash video video    flash:false,    video:true,    formats:{        h264:probably,        ogg:false,        webm:false    },    offline:true } .com/bryanri eger/profile h ttps://github sample code* available *fyi the code currently uses a simple profile db idea we're playing with instead of WURFL... http://www.flickr.com/photos/wscullin/3770015203
  • 69. Ogg javascript input methods or profile storage colour depth the device context is defined via appcache dpi features & constraints... screen size isBrowserLame xhr media formats custom properties based on your own tacit knowledge... HTML5 CSS isTouch canvas doctype @font-face json H.264 WebM isTablet WebGL http://www.flickr.com/photos/wscullin/3770015203
  • 70. features & constraints device profile but only those that are screen size actually relevant... Flash Embed to us HTML5 JavaScript http://www.flickr.com/photos/dullhunk/4422952742
  • 72. The significant problems we face, cannot be solved at the same level of thinking we were at when we created them. – Albert Einstein
  • 73. what if what is actual is actually not normal...? http://www.flickr.com/photos/pagedooley/2121472112
  • 74. and now for a little cerebral gymnastics... http://www.flickr.com/photos/jb-london/4112837448
  • 75. display size/width + a little cerebral gymnastics... and our perception of it 1440 how would the web be different 1280 if history had given us... and Steve 1024 512 x 342 1024 x 768 800 640 480 x 800 512 320 x 480 240 1984 1990 1994 1998 2004 2007
  • 76. 1280 1024 a more constrained context first...? 800 natural progression? 512 x 342 640 1024 x 768 ...mobile first? 480 320 x 480 320 1984 1990 1994 1998 2004 2007
  • 77. and
  • 78. what would happen if we designed content... http://www.flickr.com/photos/pasteberlusconi/5352932503
  • 79. in a manner similar to how we design software...? http://www.flickr.com/photos/stephi2006/4428932249
  • 80. ...could we design content that adapts to 40,000 contexts?
  • 82. {insert fave CMS here} most websites today are built using a CMS...
  • 83. where page templates tend to dominate content... <put content here /> http://www.nytimes.com
  • 84. monetization focused on delivering ads and providing navigation... longer visits <put content here /> http://www.wired.com/magazine/2011/04/st_thompson_homophily/
  • 86. All the Numbers, All the Facts on Mobile the Trillion-Dollar Industry. Why is ... Yes, Google (outgoing) CEO Eric Schmidt had been saying 'Mobile First' but his latest version of his 'Mobile mobile mobile' mantra, that he shares with all partners and companies interested in mobile is: "Put your best people on mobile." Why? Because Mobile today is by a wide margin, the fastest-growing giant industry on the planet. Because all major digital technologies are headed to mobile - telecoms, computers, the internet, etc - and all major media are headed to mobile - music, gaming, news, television, advertising - and even money, from coins to banking to credit cards, is headed to a phone near you. This is definitely the "industry of the decade" and we have only begun. So how big is big? Its huge. Lets review the numbers. 2013 and content typically confined to a sandbox... http://communities-dominate.blogs.com/brands/2011/02/all-the-numbers-all-the-facts-on-mobile-the-trillion-dollar-industry-why-is-google-saying-put-your-b.html
  • 87. where context is completely irrelevant... http://www.flickr.com/photos/wengs/3938347495
  • 88. resulting in an experience similar to this... http://communities-dominate.blogs.com/brands/2011/02/all-the-numbers-all-the-facts-on-mobile-the-trillion-dollar-industry-why-is-google-saying-put-your-b.html
  • 89. please note... The use of @tomiahonen 's site is for illustration purposes only, and is not intended as a criticism of the excellent inform ation he regularly publishes on his site. If you've never re ad any of Tomi's posts, you're missing out! ;) Sincerely, Bryan http://communities-dominate.blogs.com/brands/2011/02/all-the-numbers-all-the-facts-on-mobile-the-trillion-dollar-industry-why-is-google-saying-put-your-b.html
  • 90. There still is no such thing as a mobile-friendly CMS... http://pinchzoom.com/posts/7-things-we-learned-during-sprint-8/ http://www.flickr.com/photos/29022619@N03/3902777481
  • 91. our assets we treat our content as rubbish with no value... http://www.flickr.com/photos/dnorman/3590132503
  • 93. which of course provides exciting opportunities for others... http://www.flickr.com/photos/johanl/4816110696
  • 94. Instapaper Flipboard Readable + Reader in Safari...
  • 95. who are very good at taking this... http://communities-dominate.blogs.com/brands/2011/02/all-the-numbers-all-the-facts-on-mobile-the-trillion-dollar-industry-why-is-google-saying-put-your-b.html
  • 98. http://communities-dominate.blogs.com/brands/2011/02/all-the-numbers-all-the-facts-on-mobile-the- ...and look, we're back in the browser! and even this http://communities-dominate.blogs.com/brands/2011/02/all-the-numbers-all-the-facts-on-mobile-the-trillion-dollar-industry-why-is-google-saying-put-your-b.html
  • 99. http://communities-dominate.blogs.com/brands/2011/02/all-the-numbers-all-the-facts-on-mobile-the- which can then be tailored to your preferences... http://readable.tastefulwords.com/
  • 100. #!/usr/bin/perl -w use strict; use XML::RSS; use LWP::Simple; use HTML::Entities; my $rss = new XML::RSS (version => '1.0'); my $url = "http://www.linux.org.uk/~telsa/Diary/diary.html"; my $page = get($url); $rss->channel(title => "The more accurate diary. Really.", link => $url, description => "Telsa's diary of life with a hacker:" . " the current ramblings"); foreach (split ('<dt>', $page)) { if (/<asname=" ([^"]*) "> # Anchor name ...surely we can do significantly <strong> ([^>]*) # Post title better than a screen scraper glorified </strong></a></dt>s*<dd> (.*) # Body of post </dd>/six) { $rss->add_item(title => $2, link => "$url#$1", description => encode_entities($3)); } } print $rss->as_string; http://linuxgazette.net/108/oregan2.html
  • 103. object database gs, booleans , numbers, strainies, r names, arrays, diction.. . streams and null ...a fascinating little technology... database
  • 104. %!PS-Adobe-3.0 EPSF-3.0 %%BoundingBox:0 0 288 288 context* %%ColorUsage: Color %%DocumentProcessColors: Cyan Magenta Yellow Black /ok_Ellipse { ok_xOffset ok_yOffset moveto ok_x1 0 ok_xR ok_y1 ok_xR ok_yR rcurveto 0 ok_y1 ok_x1 neg ok_yR ok_xR neg ok_yR rcurveto ok_x1 neg 0 ok_xR neg ok_y1 neg ok_xR neg ok_yR neg rcurveto 0 ok_y1 neg ok_x1 ok_yR neg ok_xR ok_yR neg rcurveto closepath } def /ok_Ellipses { %on stack: designed to faithfully render %xCenter yCenter xOffset yOffset width height weight howMany [color array] one single context everywhere... aload pop setcmykcolor /ok_HowMany exch def /ok_Weight exch def routine device independent /ok_Height exch def /ok_Width exch def definition /ok_yOffset exch def /ok_xOffset exch def /ok_yCenter exch def /ok_xCenter exch def http://en.wikip /ok_Angle 360 ok_HowMany div def edia.org/ /ok_xR ok_Width 2 div def wiki/PostScrip /ok_yR ok_Height 2 div def t /ok_x1 ok_xR ok_xR .552292 mul sub def /ok_y1 ok_yR ok_yR .552292 mul sub def ok_Weight setlinewidth gsave ok_xCenter ok_yCenter translate ok_HowMany { ok_Ellipse ok_Angle rotate routine call } repeat stroke grestore + } def %here's an example call to the "ok_Ellipses" routine 144 144 0 0 24 36 .5 24 [0 0 0 1] ok_Ellipses database application 144 144 0 76 18 60 3 6 [1 0 1 0] ok_Ellipses 144 144 0 76 12 48 2 12 [.8 0 .8 0] ok_Ellipses http://www.adobe.com/products/adobemag/archive/spirogf1.html 144 144 0 78 11 44 2 12 [.6 0 .6 0] ok_Ellipses
  • 105. but not known for being terribly adaptive...
  • 106. but the web wasn't designed to be constrained to a single context...
  • 107. http://communities-dominate.blogs.com/brands/2011/02/all-the-numbers-all-the-facts-on-mobile-the ...maybe we should stop imposing arbitrary constraints on our content?
  • 108. features & constraints web design is software design... + object model view controller device context ...keep an eye on these!
  • 109. to a brave, new
  • 110. content.app content as applications... http://www.flickr.com/photos/colindunn/4479309983
  • 111. February 17, 2011 All the Numbers, All the Facts on Mobile the Trillion-Dollar Industry. Why is Google saying: Put your Best People on Mobile? Yes, Google (outgoing) CEO Eric Schmidt had been saying 'Mobile First' but his latest version of his 'Mobile mobile mobile' mantra, that he shares with all partners and companies interested in mobile is: "Put your best people on mobile." Why? Because Mobile today is by a wide margin, the fastest-growing giant industry on the planet. Because all major digital technologies are headed to mobile - telecoms, computers, the internet, etc - and all major media are headed to mobile - music, gaming, news, television, advertising - and even money, from coins to banking to credit cards, is headed to a phone near you. This is definitely the "industry of the decade" and we have only begun. So how big is big? Its huge. Lets review the numbers. 5.2 Billion Subscribers it should be blatantly obvious but, So first the biggest number - 5.2. That is in billions with a B. There are 1.2 billion personal computers in use worldwide including desktops, laptops and tablet – start with the content... PCs like the iPad. There are 1.1 billion fixed landline phones. There are 1.0 billion automobiles registered and in use. There are 1.6 billion television sets, 1.7 billion credit card users, 2.0 billion internet users, 2.2 billion people with a banking account, and 3.9 billion radio receivers in use worldwide. Mobile utterly dwarfs them all - with 5.2 billion currently active, ie fully paid mobile phone subscriptions. Active mobile phone accounts. 5.2 billion. yes, 4.5 times more mobile phone subscriptions than personal computers or landline phones. 2.5x more mobile accounts than all internet users. 3 times more mobile subscribers than the total number of television sets. Mobile is huge. The planet has 6.9 billion people alive, from babies to great grandparents. Now there is an active mobile phone subscription for 75% of them. So where are we? One way to look at it is electricity. The planet has 1.6 billion people who live beyond the reach of electricity (said CNN, 2009). So the mobile phone subscriber count is almost matching every human alive (including babies etc) who enjoys modern conveniences like electricity (5.3 billion people). Or another way? Water. We learned last year that 4.2 billion people use a toothbrush (MMA Forum Asia 2010) - so there are one billion more mobile phone accounts than the total number of users of a toothbrush. Or jobs? Motorola told us last year that there are 5 billion people who have a job on the planet - but 5.2 billion people have a mobile phone. I am doing my 'count-down' to the point when we have 100% per-capita penetration rate of mobile phone accounts on the planet, ie one active mobile account per person alive. We'll hit that point roughly at the end of 2013. But I'm using an age-related count-down. So if we allocate all existing active mobile phone accounts by age, from the eldest to the youngest, we are now at the start of 2011, at the point, where there would be an active mobile phone account for every person alive on the planet who is over the age of 12. It is coming down at the rate of about one year of age, per quarter! In other words phones are spreading at the rate of four years of age, per year. By the end of this year we'll be at about age 8... And its everywhere. In the USA the mobile phone penetration rate is rapidly nearing the 100% rate per capita (we should pass that point this year). That may seem impressive, it is not. Europe is at 130%, many ;eading countries are already past the 150% level and the United Arab Emirates (ie Abu Dhabi, Dubai etc) became the first country to pass 200% mobile phone subscriber count. And even the poorest regions are rushing in. The continent of Africa has already passed the 50% penetration level in mobile phone subscriptions per capita. 3.7 BILLION UNIQUE MOBILE PHONE USERS The total mobile phone subscriber count of 5.2 billion is not the same as 'unique users' of mobile phones. Over one third of all people who have a mobile phone, have two or more mobile accounts. Many have two phones, some have a phone and a laptop-PC account on a 3G data dongle, and some walk around
  • 112. February 17, 2011 All the Numbers, All the Facts on Mobile the Trillion- Dollar Industry. Why is Google saying: Put your Best People on Mobile? typography matters Yes, Google (outgoing) CEO Eric Schmidt had been saying 'Mobile First' but his latest (you may not care) but your users do... version of his 'Mobile mobile mobile' mantra, that he shares with all partners and companies etitors and compis by a interested in mobile is: "Put your best people on mobile." Why? Because Mobile today wide margin, the fastest-growing giant industry on the planet. Because all major digital technologies are headed to mobile - telecoms, computers, the internet, etc - and all major Instapaper media are headed to mobile - music, gaming, news, television, advertising - and even money, from coins to banking to credit cards, is headed to a phone near you. This is definitely the "industry of the decade" and we have only begun. So how big is big? Its huge. Lets review Flipboard the numbers. 5.2 BILLION SUBSCRIBERS So first the biggest number - 5.2. That is in billions with a B. There are 1.2 billion personal computers in use worldwide including desktops, laptops and tablet PCs like the iPad. There are 1.1 billion fixed landline phones. There are 1.0 billion automobiles registered and in use. There are 1.6 billion television sets, 1.7 billion credit card users, 2.0 billion internet users, 2.2 billion people with a banking account, and 3.9 billion radio receivers in use worldwide.
  • 113. February 17, 2011 All the Numbers, All the Facts on Mobile the Trillion- Dollar Industry. Why is Google saying: Put your Best People on Mobile? Yes, Google (outgoing) CEO Eric Schmidt had been saying 'Mobile First' but his latest version of his 'Mobile mobile mobile' mantra, that he shares with all partners and companies interested in mobile is: "Put your best people on mobile." Why? Because Mobile today is byto and don't be afraid a wide margin, the fastest-growing giant industry on the planet. Because all their ideas... steal major digital technologies are headed to mobile - telecoms, computers, the internet, etc - and all major ie. 'preferences' media are headed to mobile - music, gaming, news, television, advertising - and even money, from coins to banking to credit cards, is headed to a phone near you. This is definitely the "industry of the decade" and we have only begun. So how big is big? Its huge. Lets review the numbers. 5.2 BILLION SUBSCRIBERS So first the biggest number - 5.2. That is in billions with a B. There are 1.2 billion personal computers in use worldwide including desktops, laptops and tablet PCs like the iPad. There are 1.1 billion fixed landline phones. There are 1.0 billion automobiles registered and in use. There are 1.6 billion television sets, 1.7 billion credit card users, 2.0 billion internet users, 2.2 billion people with a banking account, and 3.9 billion radio receivers in use worldwide.
  • 115. /*  dimensions  */ ...check out if you use $min-­‐width:  220px; constraints can easily be modified $max-­‐width:  960px; $column-­‐main:  65%; $column-­‐aside:  31%; relative values provide flexibility $column-­‐margin:  4%; ems + %'s $variables /*  dimensions  */ think relative, embrace uncertainty @mixin  aside  {   clear:  right; and express yourself...   float:  right;   margin:  0  0  0  $column-­‐margin;   &:color  opacify($azure-­‐sea-­‐of-­‐despair,  0.8);   width:  $column-­‐aside; } @mixin  wrap  {   clear:  both; expressions based on variable   display:  block; features + constraints   margin:  0px  auto;   padding:  0px  $column-­‐margin/2;   min-­‐width:  $min-­‐width;   max-­‐width:  $max-­‐width; } /*  colours  */ $azure-­‐sea-­‐of-­‐despair:  rgba(84,  174,  207,  0.75); http://sass-lang.com
  • 116. February 17, 2011 All the Numbers, All the Facts on Mobile the Trillion- Dollar Industry. Why is Google saying: Put your Best People on Mobile? Yes, Google (outgoing) CEO Eric Schmidt had been saying 'Mobile First' but his latest version of his 'Mobile mobile mobile' mantra, that he shares picture is often worth a with all partners and companies a thousand words... interested in mobile is: "Put your best people on mobile." Why? Because Mobile today is by a wide margin, the fastest-growing giant industry on the planet. Because all major digital technologies are headed to mobile - telecoms, computers, the internet, etc - and all major media are headed to mobile - music, gaming, news, television, advertising - and even money, from coins to banking to credit cards, is headed to a phone near you. This is definitely the "industry of the decade" and we have only begun. So how big is big? Its huge. Lets review the numbers. 5.2 BILLION SUBSCRIBERS So first the biggest number - 5.2. That is in billions with a B. There are 1.2 billion personal computers in use worldwide including desktops, laptops and tablet PCs like the iPad. There are 1.1 billion fixed landline phones. There are 1.0 billion automobiles registered and in use. There are 1.6 billion television sets, 1.7 billion credit card users, 2.0 billion internet users, 2.2 billion people with a banking account, and 3.9 billion radio receivers in use worldwide.
  • 117. February 17, 2011 All the Numbers, All the Facts on Mobile the Trillion- Dollar Industry. Why is Google saying: Put your Best People on Mobile? Yes, Google (outgoing) CEO Eric Schmidt had been saying 'Mobile First' but his latest version of his 'Mobile mobile mobile' mantra, that he shares with all partners and companies interested in mobile is: "Put your best people on mobile." Why? Because Mobile today is by a wide margin, the fastest-growing giant industry on the planet. Because all major digital technologies are headed to mobile - telecoms, computers, the internet, etc - and all major media are headed to mobile - music, gaming, news, television, advertising - and even money, from coins to banking to credit cards, is headed to a phone near you. This is definitely the "industry of the decade" and we have only begun. So how big is big? Its huge. 5.2 BILLION SUBSCRIBERS So first the biggest number - 5.2. That is in billions with a B. There are 1.2 billion personal
  • 118. February 17, 2011 All the Numbers, All the Facts on Mobile the Trillion-Dollar Industry. Why is Google saying: Put your Best People on Mobile? tinySrc http://tinysrc.net/ a cloud app to resize images appropriate to the device context device context device context Yes, Google (outgoing) CEO Eric Schmidt had been saying 'Mobile First' but his latest version of his 'Mobile the simplest way to adapt your images mobile mobile' mantra, that he shares with all partners and companies interested in mobile is: "Put your best people on mobile." Why? Because Mobile today is by a wide margin, the fastest-growing giant industry on the planet. Because all major digital technologies are headed to mobile - telecoms, computers, the internet, etc - and all major media are headed to mobile - music, gaming, BTW - ImageMagick, GD, Batik, news, television, advertising - and even money, from coins to banking to credit cards, is headed to a phone PIL and other libraries and near you. This is definitely the "industry of the decade" applications can be used to roll and we have only begun. So how big is big? Its huge. your own solution... Lets review the numbers. 5.2 BILLION SUBSCRIBERS So first the biggest number - 5.2. That is in billions with a
  • 119. but images can also be... http://www.flickr.com/photos/johanl/4382372758
  • 120. data ...applications data design elements focus region BTW - ImageMagick, GD, Batik, PIL and other libraries and applications can be used to roll your own solution... <canvas /> <canvas /> http://www.flickr.com/photos/johanl/4382372758
  • 121. that adapt constraints http://www.flickr.com/photos/johanl/4382372758
  • 122. focus region to changes... http://www.flickr.com/photos/johanl/4382372758
  • 124. February 17, 2011 All the Numbers, All the Facts on Mobile the Trillion- Dollar Industry. Why is Google saying: Put your Best People on Mobile? Yes, Google (outgoing) CEO Eric Schmidt had been saying 'Mobile First' but his latest version of his 'Mobile mobile mobile' mantra, that he shares with all partners and companies interested in mobile is: "Put your best people on mobile." Why? Because Mobile today is by a wide margin, the fastest-growing giant industry on the planet. Because all major digital technologies are headed to mobile - telecoms, computers, the internet, etc - and all major media are headed to mobile - music, gaming, news, television, advertising - and even money, from coins to banking to credit cards, is headed to a phone near you. This is definitely the
  • 125. <aside /> #rant http://paulrouget.com/e/infographicsInHTML5
  • 126. Yes, Google (outgoing) CEO Eric Schmidt had been saying 'Mobile First' but his latest version of his 'Mobile mobile mobile' mantra, that he shares with all partners and companies interested in mobile is: "Put your best people on mobile." Why? Because Mobile today is by a wide margin, the fastest-growing giant industry on the planet. Because all major digital technologies are headed to mobile - telecoms, computers, the internet, etc - and all major media are headed to mobile - music, gaming, news, television, advertising - and even money, from coins to banking to credit cards, is headed to a phone near you. This is definitely the "industry of the decade" and we have only begun. So how big is big? Its huge. Lets review the numbers. 5.2 BILLION SUBSCRIBERS So first the biggest number - 5.2. That is in billions with a B. There are 1.2 billion personal computers in use worldwide including desktops, laptops and tablet PCs like the iPad. There are 1.1 billion fixed landline phones. There are 1.0 billion automobiles registered and in use. There are 1.6 billion television sets, 1.7 billion credit card ...and what about all that text? users, 2.0 billion internet users, 2.2 billion people with a banking account, and 3.9 billion radio receivers in use worldwide. Mobile utterly dwarfs them all - with 5.2 billion currently active, ie fully paid mobile phone subscriptions. Active mobile phone accounts. 5.2 billion. yes, 4.5 times more mobile phone subscriptions than personal computers or landline phones. 2.5x more mobile accounts than all internet users. 3 times more mobile subscribers than the total number of television sets. Mobile is huge. The planet has 6.9 billion people alive, from babies to great grandparents. Now there is an active mobile phone subscription for 75% of them. So where are we? One way
  • 127. @bdconf If you're not at #mobilism you can still watch the browser panel at http://mobilism.nl/2011/stream at 16:00 CET! via @ppk ...or for that matter this text?
  • 128. make it usable and meaningful... http://www.flickr.com/photos/aubergene/970367879
  • 129. add structure to enable manipulation... http://www.flickr.com/photos/aubergene/970367879
  • 130. tag identifier @bdconf If you're not at #mobilism you can still watch the browser panel at url http://mobilism.nl/2011/stream at 16:00 CET! via @ppk markup enhances your textual data... or content...?
  • 131. If you're not at #mobilism you can still watch the browser panel at http://mobilism.nl/2011/stream at 16:00 CET! via @ppk this is also recognisable...
  • 132. Yes, Google (outgoing) CEO Eric Schmidt had been saying 'Mobile First' but his latest version of his 'Mobile mobile mobile' mantra, that he shares with all partners and companies interested in mobile is: "Put your best people on mobile." Why? Because Mobile today is by a wide margin, the fastest-growing giant industry on the planet. Because all major digital technologies are headed to mobile - telecoms, computers, the internet, etc - and all major media are headed to mobile - music, gaming, microformats news, television, advertising - and even money, from microformats.org coins to banking to credit cards, is headed to a phone near you. This is definitely the "industry of the decade" open data formats and we have only begun. So how big is big? Its huge. hCard, hCal, rel-*, etc. Lets review the numbers. 5.2 BILLION SUBSCRIBERS ...read it and add So first the biggest number - 5.2. That is in billions with a meaningful structure B. There are 1.2 billion personal computers in use worldwide including desktops, laptops and tablet PCs like the iPad. There are 1.1 billion fixed landline phones. There are 1.0 billion automobiles registered and in use. There are 1.6 billion television sets, 1.7 billion credit card some call it editorial... users, 2.0 billion internet users, 2.2 billion people with a banking account, and 3.9 billion radio receivers in use worldwide. Mobile utterly dwarfs them all - with 5.2 billion currently active, ie fully paid mobile phone subscriptions. Active mobile phone accounts. 5.2 billion. yes, 4.5 times more mobile phone subscriptions than personal computers or landline phones. 2.5x more mobile accounts than all internet users. 3 times more mobile subscribers than the total number of television sets. HTML5 http://w3.org/html5 Mobile is huge. data-attributes The planet has 6.9 billion people alive, from babies to semantic elements great grandparents. Now there is an active mobile phone subscription for 75% of them. So where are we? One way
  • 133. typically "Links don't open apps" Google (outgoing) CEOlatestSchmidt of his 'Mobile Yes, saying 'Mobile First' but his Eric version had been – @grigs mobile mobile' mantra, that he shares with all partners and companies interested in mobile is: "Put your best people on mobile." Why? Because Mobile today is by a wide margin, the fastest-growing giant industry on the planet. Because all major digital technologies are headed to mobile - telecoms, computers, the internet, etc - and all major media are headed to mobile - music, gaming, news, television, advertising - and even money, from coins to banking to credit cards, is headed to a phone which will enable near you. This is definitely the "industry of the decade" you to better interpret... and we have only begun. So how big is big? Its huge. Lets review the numbers. 5.2 BILLION SUBSCRIBERS Description Billions mobile  subscribers 5.2 personal  computers  in  use 1.2 interpret fixed  landline  phones 1.1 registered  automobiles  in  use 1.0 television  sets 1.6 a little information design can credit  card  users 1.7 often help clarify things... internet  users 2.0 people  with  a  banking  account 2.2 radio  receivers  in  use 3.9 The planet has 6.9 billion people alive, from babies to great grandparents. Now there is an active mobile phone subscription for 75% of them. So where are we? One way to look at it is electricity. The planet has 1.6 billion people who live beyond the reach of electricity (said CNN, 2009). So the mobile phone subscriber count is almost matching every human alive (including babies etc) who enjoys
  • 134. Yes, Google (outgoing) CEO Eric Schmidt had been saying 'Mobile First' but his latest version of his 'Mobile mobile mobile' mantra, that he shares with all partners and companies interested in mobile is: "Put your best people on mobile." Why? Because Mobile today is by a wide margin, the fastest-growing giant industry on the planet. Because all major digital technologies are headed to mobile - telecoms, computers, the internet, etc - and all major media are headed to mobile - music, gaming, news, television, advertising - and even money, from and communicate coins to banking to credit cards, is headed to a phone near you. This is definitely the "industry of the decade" your message... and we have only begun. So how big is big? Its huge. Lets review the numbers. 5.2 BILLION SUBSCRIBERS ion Billions 6 ubscribers 5.2 4.5  computers  in  use 1.2 chart tools API ndline  phones 1.1 3 visualise ed  automobiles  in  use 1.0 on  sets 1.6 1.5 ard  users 1.7 0 images can also  users 2.0 billions  of  users be applications! ith  a  banking  account 2.2 mobile radio bank  account internet credit  card television ceivers  in  use 3.9 computers landline automobiles The planet has 6.9 billion people alive, from babies to great grandparents. Now there is an active mobile phone subscription for 75% of them. So where are we? One way to look at it is electricity. The planet has 1.6 billion people who live beyond the reach of electricity (said CNN, 2009). So the mobile phone subscriber count is almost matching every human alive (including babies etc) who enjoys