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
×

1. mobile first 2. use Rethinking the Mobile Web by Yiibu

917,254 views

Published on

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




aha, I told you we’d eventually get to #1!

Published in: Technology
  • Girls for sex in your area are there: tinyurl.com/areahotsex
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I wish I would have found this years ago! I recently got the EZ Battery Reconditioning program and just reconditioned two car batteries. The guides were very easy to follow. I wish I would have found this years ago! Thanks! ♣♣♣ http://ishbv.com/ezbattery/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you want to enjoy the Good Life: making money in the comfort of your own home with just your laptop, then this is for YOU... ◆◆◆ http://t.cn/AieX2Loq
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/unabmuo } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/unabmuo } ......................................................................................................................... Download Full doc Ebook here { https://tinyurl.com/unabmuo } ......................................................................................................................... Download PDF EBOOK here { https://tinyurl.com/unabmuo } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/unabmuo } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/unabmuo } ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

×