Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Rethinking the Mobile Web
                                              a pragmatic look at creating an accessible and inc...
we   apps, and...
                       a lovely, location-b
                                           ased,
           ...
Dinosaurs!




                                   we think the iPad is pretty awesome, but...




http://www.flickr.com/pho...
something is askew...
1.8                 billion
                                       the number of internet
                                ...
6.8             billion
                          the number of people
                          in the world today...



...
3.4         billion
                      the number of people
                      with mobile devices today...




 or ...
it’s about people not devices...
so here’s the dilemma...




http://www.flickr.com/photos/soundman1024/1796003688
"The future is already here – it’s
                                                  just not evenly distributed."
       ...
no home



                                   Sony Ericsson
                                      w810i



               ...
but inclusive...



                                                               iPhone




http://www.flickr.com/photos/...
and available to everyone...




                                                         iPhone




http://www.flickr.com/...
yes, even this man who
                                                    does not have an iPhone...


                  ...
so, who actually has an iPhone...


http://www.flickr.com/photos/data_op/2468057934
USA
about 6% US market share...
                                                                                              ...
EU5
only 4% EU5* market share...
                                                     enormous                       EU5* = Fr...
<4% global market share*

                                   enormous
                                   impact




      ...
ie: BMW
The ”most popular” devices don’t necessarily
     translate to the most used devices.
                          ie...
”
                                                   yeah, but those
                                                   de...
ahem...
the first smartphone in 2003...
          considered
          portable in 1984                   fits in your pocket




  ...
the music phone in 2008...
again, it was ‘portable’...?

                                    ...this runs Flash



       ...
the feature phone in 2009...

          smartphone from 2005                              extremely
                      ...
the smartphone in 2010...

          ...playing “catch-up”
                                         raising the “bar”...

...
”
                                                   ...but folks with those other phones
                                ...
yeah, and grandma
                                                           doesn’t do Facebook...  ”
                   ...
1.3           billion
                        the number of mobile internet
                        users today...




 .....
1/3
                   number of global internet
                   users who access the internet
                   only ...
21%      the projected worldwide
         3G penetration in 2010...




  via Morgan Stanley
so, what are they using...
mobile browser market share
                                                                                              ...
something happened in February...



                                           UC browser...




                        ...
moving forward...

 used in iOS, Android, Palm WebOS, Nokia Qt,                                     primarily used on feat...
the importance of WebKit...




                                     open source
                                     lice...
the importance of OperaMini...




                                                  free
                   costs consume...
rendered + optimised         and proxy browsers...
proxy browser                    on proxy server...




               ...
on private networks...

             caller


                             a

                                            ...
also availabl
                                                             e for Android
                                 ...
app
yeah, whatever–I just wanna build a mobile website...
traditionally you might consider...



                                                           a device database
      ...
but that might be a bit overwhelming...




                                                                     OMG...   ...
start somewhere familiar...




http://www.flickr.com/photos/adactio/4742158560
...a look at what we’re doing now?*




         *for illustration purposes only
we could
do nothing...




 http://www.alistapart.com/
but that’s not terribly mobile friendly – what about...
a mobile
           specific site...


http://mobify.me




                   http://m.alistapart.com/
oh, but then that just begs the question...
other...




                         laptops/netbooks                               TVs




                             ...
or, more specifically...
128x160




                                240x320

                           320x480

                                 ...
then again, we could...
create an adaptive experience...




         http://www.flickr.com/photos/rohit_saxena/4873732679
an example
                               http://colly.com*




*for illustration purposes only, I’m not criticising the t...
http://colly.com


MOBILE SITE OF THE YEAR
         NOMINEE

http://www.thenetawards.com/
a lovely website




http://colly.com/
squishy             squishy




                              with flexible layout

http://colly.com/
also available on mobile...



                    squishy                squishy




http://colly.com/
al
                              an optimce
                              experien




                    squishy        ...
ahem...




http://www.flickr.com/photos/jakerome/3481634789
these are also mobile...
                    WebKit                                                                       ...
as are these...
                            the iPhone is #1 device for OperaMini




  *OperaMini is often preferred by m...
and these...
                           Mozilla
                                               77mm
                    47...
traditionally used
                                                                     for the fine print...




         ...
viewport is much smaller
                                                 than the actual content




                    ...
keyhole browsing




                    for this experience

http://colly.com/
...would you be
                    happy with this?




                                        hmm...

http://colly.com/
once again

  why are we writing for only one browser...

2000                              2010




                     ...
“This site works best in Safari 4”
                                                                                       ...
If you want to use the web on a
                                       ”
       mobile device, is the purchase of
       a...
as per my highly sophisticated
                                      mobile web triage process... ;)
                     ...
3 one style sheet w/@media queries

                                        4    jQuery used only for animation...




   ...
a few guidelines...
2. use well structured, meaningful markup




for those still paying attention, yes there is a #1 and we will get to it sh...
2                                   well structured, meaningful markup...



                                  mmm... mean...
2                                   well structured, meaningful markup...
         use <header>, <h1>, <p> and other seman...
2. use well structured, meaningful markup
3. the absence of support for @media queries
   is in fact the first @media query...
3                  all-in-one stylesheet with @media queries...


        a single css file is network efficient, but often i...
how retro...




                                                   kinda backwards...



http://www.flickr.com/photos/dumb...
rocket science

     a desktop browser...




                                                       are we expecting too ...
rocket science




                                a mobile browser...
                                                   ...
which brings us to...
1. mobile first
2. use well structured, meaningful markup
3. the absence of support for @media queries
   is in fact the fir...
Luke Wroblewski




                                                                             mobile first
             ...
traditional thinking goes like so...
is technically served to everyone...




                                       a full desktop site
sprinkle on a few @media queries...




    + @media queries
a full desktop site
...if the @media query resolves
to true, tada - a mobile site!




                                             = mobile s...
but here’s the problem...
FAIL
                                                             = mobile site
                                          ...
= mobile site

                                                a full desktop site
http://www.flickr.com/photos/hendry/3053...
@media queries will resolve to false on most devices...




       no, really – you simply cannot rely on them currently o...
resulting in this experience...




http://colly.com/
so it’s far more effective when we start with...
is technically served
to everyone...


           a mobile site
for browsers that support
   them, other browsers will
   just ignore them...


+ @media queries
           a mobile site
tada – a desktop site! ;)




= full desktop site
    + @media queries
            a mobile site
which is really just...
and not a new idea at all...
progressive enhancement

                 = full desktop site
  Jeremy Keith         + media ...
think mobile first
but let’s get back to...
1. mobile first
2. use well structured, meaningful markup
3. the absence of support for @media queries
   is in fact the fir...
3                  all-in-one stylesheet with @media queries...


        a single css file is network efficient, but often i...
3                          default stylesheet plus @media queries...




 place mobile related styles into a default style...
1. mobile first
2. use well structured, meaningful markup
3. the absence of support for @media queries
   is in fact the fir...
4                 jQuery/JavaScript used only for animation...



                                    jQuery is still a ra...
mobile browsers aren’t as
                                                                   capable as desktop browsers.....
4              use CSS instead of JavaScript for animations...
                are jQuery (and JavaScript) necessary to
  ...
look ma, no jQuery?




                                                             from a time before jQuery...
        ...
then again, do you really need javascript?


*none of these services relied on Javascript when they first started...
1. mobile first
2. use well structured, meaningful markup
3. the absence of support for @media queries
   is in fact the fir...
5                                         same images used for all devices...

                                      one s...
5                     images adapted appropriately for each device...


ul li#biography a span.label {
  background: url("...
we could also rethink the <img />* tag...

                              one image can have multiple source
              ...
the results could be...
much better...




                    approximations based on actual device testing - font rendering will vary...
http://...
quick

     another example...
                    http://2010.dconstruct.org*




*again, for illustration purposes only,...
http://2010.dconstruct.org/
squishy                         squishy




  http://2010.dconstruct.org/
different                                           different    tada!




                              again, brought to y...
so close...




http://2010.dconstruct.org/
6 fonts often not supported on mobile

                                             sprite image not used 6
              ...
1. mobile first
2. use well structured, meaningful markup
3. the absence of support for media queries
   is in fact the firs...
6                                display:none still loads resources...
                                                   ...
images not used on   @font-face not supported
           mobile devices...    on most mobile devices...


             367...
6                                  ...avoid sending unnecessary data




@media (max-device-width:767px), all and (max-wid...
anything else...?
little tweaks...



                              fixed       relative
                              width        width
   ...
accessibility*


                                                          features                     functionality

   ...
1. mobile first
2. use well structured, meaningful markup
3. the absence of support for @media queries
   is in fact the fir...
why even bother...




                                                             I’ve seen
                            ...
...people actually do use the mobile web




                                                     source comScore MobiLens...
...but, not only on these devices
but, also on these...




WebKit
            OperaMini
and, these...




WebKit
           OperaMini
and, these...




btw - expect many, many more devices to be heading our ways soon...
Dinosaurs!




               ...and shouldn’t everyone benefit from technology?




http://www.flickr.com/photos/goincase/4...
thank you




hello@yiibu.com
Upcoming SlideShare
Loading in …5
×

2. use well structured, meaningful Rethinking the Mobile Web by Yiibu

858,225 views

Published on

2. use well structured, meaningful markup
3. the absence of support for @media queries
is in fact the first @media query...

Published in: Technology
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ https://www.ThesisScientist.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Finally i found something that changed my life, if you need to change yours just watch the video here http://bit.ly/changesvideo Hope it helps you as it helped me!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Calculamos el número de clientes que puedes conseguir para tu sector a través de google en: www.obtenerclientes.com. Acceda a hacer el cálculo.-------------------------------------------------------------------------------------------------------------We calculate the number of clients you can get for your sector with google at: www.geilemanagement.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Now, change your life Now! No more excuses, watch the video http://bit.ly/changesvideo
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 67 steps to getting anything you want out of life: health, wealth, love and happiness! change your life today! Watch the video here: http://bit.ly/67stepstoallyouwant
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

×