SlideShare a Scribd company logo
Rethinking the Mobile Web
                                              a pragmatic look at creating an accessible and inclusive mobile experience




http://www.flickr.com/photos/fpat/3692425154
we   apps, and...
                       a lovely, location-b
                                           ased,
                          social, photo thing
                                              y...




                       this presentation
                                         is
                        not about these.




http://www.flickr.com/photos/scobleizer/3985020876
Dinosaurs!




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




http://www.flickr.com/photos/goincase/4647893507
something is askew...
1.8                 billion
                                       the number of internet
                                       connections in the world today...




26% of the world’s population at the beginning of 2010 – http://www.internetworldstats.com
6.8             billion
                          the number of people
                          in the world today...




*2009 estimates put the population around 6.79 billion inhabitants...
3.4         billion
                      the number of people
                      with mobile devices today...




 or roughly 1/2 the population of the planet, which is...
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."
                                                                     – William Gibson




http://www.flickr.com/photos/kiwanja/3169447879
no home



                                   Sony Ericsson
                                      w810i



               no iPhone




                                   technology should not only be accessible...




http://www.flickr.com/photos/walkadog/3093763311
but inclusive...



                                                               iPhone




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




                                                         iPhone




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


                                                      not an iPhone...




http://www.flickr.com/photos/dopesmuglar/486087009
so, who actually has an iPhone...


http://www.flickr.com/photos/data_op/2468057934
USA
about 6% US market share...
                                                                                                                US Population: 307 million
                                                                                                                Smartphone penetration: 31% of pop.
                                                                                                                iPhone market share: 21% of smp.
                                 enormous                                                                       Total iPhones in US: 19 million (~6%)
                                 impact




                   low overall
                   penetration




                          The iPhone Reality in Europe: Low Overall Penetration, Enormous Impact
http://moconews.net/article/419-deep-discounts-on-smartphones-drive-u.s.-adoption-rates-to-nearly-a-thi/ and http://www.npd.com/press/releases/press_100510.html
EU5
only 4% EU5* market share...
                                                     enormous                       EU5* = France, Germany, Italy, Spain and United Kingdom
                                                     impact




                                        low overall
                                        penetration




                             The iPhone Reality in Europe: Low Overall Penetration, Enormous Impact
http://www.comscore.com/layout/set/popup/layout/set/popup/Press_Events/Press_Releases/2010/6/The_iPhone_Reality_in_Europe_Low_Overall_Penetration_Enormous_Impact
<4% global market share*

                                   enormous
                                   impact




                 low overall
                 penetration




*I suspect it’s actually much less, but finding accurate global figures is a tad difficult...
ie: BMW
The ”most popular” devices don’t necessarily
     translate to the most used devices.
                          ie: Ford
”
                                                   yeah, but those
                                                   devices suck!




http://www.flickr.com/photos/eldret_99/3311540398
ahem...
the first smartphone in 2003...
          considered
          portable in 1984                   fits in your pocket




                                                               still widely used...




                  Released: 1984          Released: 2003
                     CPU: 8 MHz           CPU: 104 MHz
           RAM: 128k (512k max)           RAM: 6 MB
      Storage: 400k (3.5” floppy)          Storage: 32 MB MMC Card
  Display: 22.9 cm Monochrome             Display: 5.3 cm Thousands of colours
Dimensions: 34.5 x 24.4 x 27.7 cm         Dimensions: 10.9 x 5.8 x 2.4 cm
                  Weight: 7.5 kgs         Weight: 122 g
the music phone in 2008...
again, it was ‘portable’...?

                                    ...this runs Flash



                                                                               not a feature phone,
                                                                               nor a smartphone...




                             Released: 1998                Released: 2008
                             CPU: 233 MHz                  CPU: 434 MHz
                 RAM: 32 MB (512 MB max)                   RAM: 128 MB
             Storage: 4 GB (+ optical drive)               Storage: 8 GB (16 GB max)
       Display: 38.1 cm Millions of colours                Display: 8.1 cm Millions of colours
        Dimensions: 40.1 x 38.6 x 44.7 cm                  Dimensions: 11.1 x 5.2 x 1.5 cm
                           Weight: 17.3 kgs                Weight: 109 g
the feature phone in 2009...

          smartphone from 2005                              extremely
                                                            popular today...



     still widely
   used today...




                     Released: 2005        Released: 2009
                      CPU: 220 MHz         CPU: 369 MHz
                         RAM: 22 MB        RAM: 30 MB
                      Storage: 64 MB       Storage: 1 GB (16 GB max)
Display: 5.3 cm Thousands of colours       Display: 5.1 cm Thousands of colours
      Dimensions: 10.8 x 5.3 x 2.2 cm      Dimensions: 10.6 x 4.7 x 1.5 cm
                       Weight: 126 g       Weight: 88 g
the smartphone in 2010...

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




                    Released: 2010     Released: 2010
                     CPU: 680 MHz      CPU: 1 GHz A4 Processor
                      RAM: 256 MB      RAM: 512 MB
       Storage: 16 GB (32 GB max)      Storage: 16 GB (32 GB max)
Display: 8.9 cm Millions of colours    Display: 8.9 cm Millions of colours
   Dimensions: 11.4 x 5.9 x 1.3 cm     Dimensions: 11.5 x 5.9 x 0.9 cm
                      Weight: 135 g    Weight: 137 g
”
                                                   ...but folks with those other phones
                                                   simply don’t use the Internet.




http://www.flickr.com/photos/carbonnyc/3369424492
yeah, and grandma
                                                           doesn’t do Facebook...  ”
                                                                   Grandma*




                                                Facebook



http://www.flickr.com/photos/amagill/304701054
                                                                         *not my Grandma
1.3           billion
                        the number of mobile internet
                        users today...




 ...includes WAP and ‘real web’ via Tomi Ahonen Consulting
1/3
                   number of global internet
                   users who access the internet
                   only via mobile...




...includes WAP and ‘real web’ via Tomi Ahonen Consulting
21%      the projected worldwide
         3G penetration in 2010...




  via Morgan Stanley
so, what are they using...
mobile browser market share
                                                                                                     via http://gs.statcounter.com - 02/2010
                                                other?
                                                                                                                      things have changed



                                                                                                                                      skeptical




                                                                                                                      UC ate Nokia’s share...
                                        other?
                                                                   other?




                                                                   note OperaMini...
                                                                                                                                 Blackberry!
             quality + sample size?
Data Source: http://gs.statcounter.com
Published Under a Creative Commons Attribution 3.0 Unported License
You are free to copy, distribute and transmit the work and to adapt the work providing it is attributed to www.icrossing.co.uk

http://www.flickr.com/photos/icrossing_uk/4342659861
something happened in February...



                                           UC browser...




                                         Nokia browser...




Top 9 Mobile Browsers in China from Sep 09 to Aug 10 | StatCounter Global Stats
               http://gs.statcounter.com/#mobile_browser-CN-monthly-200909-201008
moving forward...

 used in iOS, Android, Palm WebOS, Nokia Qt,                                     primarily used on feature
          Bada, Symbian and new Blackberry...                                    phones supporting Java ME...




                                                        +

                           WebKit                              OperaMini                         Windows Mobile


                                                                    proxy browser...
                                     watch these...
                           lots of new browsers, variation and of course – legacy browsers




                            “Fennec”             Browser     UC
Obigo                                                                                  SkyFire
                                                   proxy browsers


                       Internet Explorer                     MicroB                     Internet Browser
the importance of WebKit...




                                     open source
                                     licensed under the GNU Library General Public License

                                     excellent standards support
                                     including HTML, CSS3, SVG, etc.

                                     innovations often contributed back
                                     example: HTML5, CSS animations, SquirrelFish, etc.

                                     adopted by many leading companies
                                     including Apple, Nokia, Samsung, Google, Palm, etc.

WebKit                               used in many mobile operating systems
                                     including iOS, Android, webOS, Bada, Symbian, etc.




      btw - “There is no WebKit on Mobile” by @ppk
     http://www.quirksmode.org/blog/archives/2009/10/there_is_no_web.html
the importance of OperaMini...




                                                  free
                   costs consumers absolutely nothing

                          a full-web experience
         supports Ajax, zooming, tabbed browsing, etc

                  excellent standards support
   based on the same code-base as the Opera browser                  OperaMini
               available just about anywhere
  on JavaME, iPhone, Android, Windows Mobile + more

               an extremely efficient browser
a proxy server filters, compresses & pre-renders content


                        usable on older devices
          breathe new life into those antique devices...


                                               very important
rendered + optimised         and proxy browsers...
proxy browser                    on proxy server...




                                                                                  free + unlimited
                                                                                     bandwidth


                       OBML*                               HTML
                         limited + costly       proxy server                           bbc.co.uk
                            bandwidth

    *OBML (Opera Binary Markup Language) is highly optimised for mobile networks + devices.
on private networks...

             caller


                             a

                                                    d
  limited + costly
     bandwidth

                               switching
                                centre                                      receiver

            c                                             b


base-station

                                    to the Internet...



transcoding, bandwidth limitations, service blocking and no packet neutrality
also availabl
                                                             e for Android
                                                                          ...




                                                   OperaMini is great for browsing
                                                   the web on iPhone when your
                                                   connection stinks. Which is
                                                   unfortunately is fairly often in my
                                                                                         ”
                                                   case. – @jonathanstark




http://www.flickr.com/photos/johanl/4424185115
app
yeah, whatever–I just wanna build a mobile website...
traditionally you might consider...



                                                           a device database
                                                                           ie. DeviceAtlas
                                                device detection           or WURFL

                        content adaptation
      an abstraction layer
                                                                device            various standards
                                                 exhausting     capabilities
 media types                WURFL/WALL           testing

                       transcoding                                     multiple templates private networks
     mimetypes                                                          geing “on-deck”
                                           data limits               multiple sites
                         an off-deck strategy...                                     cHTML
     the “One Web” dream                                       thematic
                                 correct doctypes             consistency
                fragmentation                                         switching algorithms
                                         WML    using UAProf data                      XHTML-MP

http://www.flickr.com/photos/rmlowe/3281353786
                                                                                     WAP
but that might be a bit overwhelming...




                                                                     OMG...     ”
http://www.flickr.com/photos/richardmoross/1413692087
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




                                               handheld consoles




                                                              what exactly is mobile...



http://www.flickr.com/photos/amagill/26273015
or, more specifically...
128x160




                                240x320

                           320x480

                                             what isn’t...
1280x768
           1024x768
                      480x800
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 talented Mr. Collison or his fine work...
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                                               squishy   tada!




                        brought to you through the magic of @media queries...
http://colly.com/
ahem...




http://www.flickr.com/photos/jakerome/3481634789
these are also mobile...
                    WebKit                                                                         WebKit




                     approximations based on actual device testing - font rendering will vary...
http://colly.com/
as are these...
                            the iPhone is #1 device for OperaMini




  *OperaMini is often preferred by many users as it optimises content prior to download, which reduces data costs.
http://colly.com/
and these...
                           Mozilla
                                               77mm
                    47mm




                                     insanely tiny!




                                                      expect many more tablet
                                                      devices on the market soon...

http://colly.com/
traditionally used
                                                                     for the fine print...




                                                          which now require this...

http://www.flickr.com/photos/chrisbrenschmidt/1832787028
viewport is much smaller
                                                 than the actual content




                                                                            and this...

http://www.flickr.com/photos/katerha/4592429363
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




                       ...is WebKit the new Internet Explorer?
“This site works best in Safari 4”
                                                                                        ”
                                                      is ok where “This site works best in
                                                      IE4” wasn’t?!? Open standards or
                                                      double standards? – @csssquirrel
                                                      via @brucel




http://www.flickr.com/photos/pjanvandaele/3990379048
If you want to use the web on a
                                       ”
       mobile device, is the purchase of
       an iPhone the cost of entry?
                 or Android device

      this design can work on
      *many* more devices...




let alone only one device?
as per my highly sophisticated
                                      mobile web triage process... ;)
                               Good
                               Could be improved
                               Needs to be improved




                    let’s make it more accessible...
http://colly.com/
3 one style sheet w/@media queries

                                        4    jQuery used only for animation...




                                  5 same images used for
                                     all screen devices...



                                                  only a few issues...

         2   well structured,
             meaningful markup
                                                        Good
4   Javascript animations tend to work
    poorly on the majority of mobile devices...         Could be improved

                                                        Needs to be improved
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 shortly...
2                                   well structured, meaningful markup...



                                  mmm... meaning!

   structure




          there’s lots more, but who
          wants to stare at code...


http://colly.com/   view source
2                                   well structured, meaningful markup...
         use <header>, <h1>, <p> and other semantically meaningful tags to provide basic structure



                                     *Note: this is not from hp://colly.com
                                                                           recreating
                                                                           existing <tags>
                                        <div class="body">                 is not cool
                                         <div class="header">
                                          <div class= "h1">
                                            <span>Hello World!</span>
                                          </div>
                                         </div>                         <div> soup...
                                         <div class="body">HTML
                                          <span class="emphasis">can actually be</span>meaningful.
                                         </div>
                                        </div>




                     soup is best served in a bowl...


    without a basic, meaningful structure you will need to re-create many existing properties
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 includes
        unnecessary style data for mobile devices...

<link href="screen.css" type="text/css" rel="stylesheet" media="screen" />


                        ....towards the end of ‘screen.css’ we find the @media queries




            mobile specific tweaks are added at the very
            end, and only through @media queries...

@media (max-device-width:480px) and (orientation:portrait) { ...
how retro...




                                                   kinda backwards...



http://www.flickr.com/photos/dumbledad/3400708183
rocket science

     a desktop browser...




                                                       are we expecting too much...

http://www.flickr.com/photos/nasa_goddard/4678389619/
rocket science




                                a mobile browser...
                                                        ...from our mobile browsers?

http://www.flickr.com/photos/wwworks/3749061604
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 first @media query...




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




                                                                             mobile first
                                                                     http://www.lukew.com/ff/entry.asp?933




http://www.flickr.com/photos/pete-karl/4637024524
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 site
                                      + @media queries
                                  a full desktop site
but here’s the problem...
FAIL
                                                             = mobile site
                                                      + @media queries
                                                a full desktop site
http://www.flickr.com/photos/hendry/3053419265
= mobile site

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




       no, really – you simply cannot rely on them currently on mobile devices
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 queries
                                       a mobile site

                          http://www.flickr.com/photos/clagnut/315554083
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 first @media query...
3                  all-in-one stylesheet with @media queries...


        a single css file is network efficient, but often includes
        unnecessary style data for mobile devices...

<link href="screen.css" type="text/css" rel="stylesheet" media="screen" />


                        ....towards the end of ‘screen.css’ we find the @media queries




            mobile specific tweaks are added at the very
            end, and only through @media queries...

@media (max-device-width:480px) and (orientation:portrait) { ...
3                          default stylesheet plus @media queries...




 place mobile related styles into a default stylesheet...

<link href="default.css" type="text/css" rel="stylesheet" media="screen" />
<link href="desktop.css" type="text/css" rel="stylesheet" media="screen
 and (min-device-width:1024px) and (max-width:989px)" />
                        link additional style sheets using @media queries
                        to progressively enhance the content for more
                        capable browsers




                                  some mobile browsers look for it...

 *you may want to use both the ‘screen’ and ‘handheld’ media types for your default stylesheet
1. mobile first
2. use well structured, meaningful markup
3. the absence of support for @media queries
   is in fact the first @media query...

4. progressively enhance using JavaScript
   and @media queries
4                 jQuery/JavaScript used only for animation...



                                    jQuery is still a rather hefty library
                                    for use on mobile devices...

<script type="text/javascript" src=".../jquery.min.js"><script>
<script type="text/javascript" src=".../scrollto.js"><script>
                                  animation in JavaScript can be
                                  very taxing on mobile devices...
mobile browsers aren’t as
                                                                   capable as desktop browsers...



                                                 again, are we expecting too much...?




http://www.flickr.com/photos/mjryall/3638778588
4              use CSS instead of JavaScript for animations...
                are jQuery (and JavaScript) necessary to
                provide an experience on mobile devices...?

<script type="text/javascript" src=".../jquery.min.js"><script>
<script type="text/javascript" src=".../scrollto.js"><script>
                 consider using basic DOM manipulation, or a mobile optimised Javascript library



<script type="text/javascript" src=".../xui.min.js"><script>
                                  the “jQuery Mobile” long before jQuery Mobile...
                                            http://xuijs.com                     http://jquerymobile.com


                             use CSS for animations if available instead of Javascript


                                                                                 ...use CSS animations
.scrollto {                                                                      (where possible) instead
   -webkit-transform: translate(540px, -200px);
   -moz-transform: translate(540px, -200px);
   -o-transform: translate(540px, -200px);
   }
                                   ignored on browsers that don’t support it
look ma, no jQuery?




                                                             from a time before jQuery...
                                                                 Twier?




http://www.flickr.com/photos/wordridden/2474879344
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 first @media query...

4. progressively enhance using JavaScript
   and @media queries

5. adapt content (especially images)
   appropriately for each device
5                                         same images used for all devices...

                                      one size rarely fits all...

ul li#biography a span.label {
  background: url("../pig.png") repeat-x center bottom;
  }
                                                                                  16 Kb
                                        also adapt content used in <img /> tags




               we should also adapt images found within the markup...

<img src="butterfly.png"
     width="200" height="160" alt="butterfly" />


                                                                                  16 Kb



http://colly.com/
5                     images adapted appropriately for each device...


ul li#biography a span.label {
  background: url("../pig-small.png") repeat-x center bottom;
  }
                    provide appropriate sized images for various devices
                                                                                                           6 Kb
                                              also adapt content used in <img /> tags



                      many CMS’s such as WordPress provide a means of
                      filtering HTML before it’s sent to the client

<img src="butterfly-small.png"
     width="100" height="80" alt="butterfly" />
                                                                                                           6 Kb
          be sure to update the width and height aributes accordingly



                     services such as http://tinysrc.net can automatically resize + compress your images
http://colly.com/
we could also rethink the <img />* tag...

                              one image can have multiple source
                              files, each for an appropriate context
<img alt="butterfly">
  <source src="butterfly-small.png" width="100" height="80" />
  <source src="butterfly.png" width="200" height="160" />
  <source src="butterfly-large.svg" width="400" height="400"
   media="min-device-width:320px" /> image formats, and aspect ratios
</img>                                     could be modified as required
         and possibly even include media queries...




                    *I’m just dreaming here, this doesn’t currently exist...
the results could be...
much better...




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

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




*again, for illustration purposes only, I’m not criticising the fine folks behind dConstruct...
http://2010.dconstruct.org/
squishy                         squishy




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




                              again, brought to you through the magic of @media queries...
http://2010.dconstruct.org/
so close...




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

                                             sprite image not used 6
                                                on mobile devices...



                     6 images not used on
                        mobile devices...


                                     only one real issue...

        3   a single (and compressed!) style sheet

2    well structured, meaningful
     and compressed markup
                                                 Good

      simple DOM scripting without               Could be improved
    4 large Javascript libraries
                                                 Needs to be improved
1. mobile first
2. use well structured, meaningful markup
3. the absence of support for media queries
   is in fact the first @media query...

4. progressively enhance using JavaScript
   and @media queries

5. adapt content (especially images)
   appropriately for each device

6. compress content where possible,
   and avoid sending unnecessary data
6                                display:none still loads resources...
                                                                 don’t expect mobile
                                                                 bandwidth to be free...




@media (max-device-width:767px), all and (max-width:449px) { ...

 .speaker-carousel {
   display: none;      all of the speaker-carousel images are actually loaded,
                       even though they are never displayed on mobile devices...
 }
images not used on   @font-face not supported
           mobile devices...    on most mobile devices...


             367.35 KB          93.63 KB




http://2010.dconstruct.org/
6                                  ...avoid sending unnecessary data




@media (max-device-width:767px), all and (max-width:449px) { ...

 .speaker-carousel {
   display: none;      find another way to remove the
                       unused resources on mobile devices...
 }
anything else...?
little tweaks...



                              fixed       relative
                              width        width
                                      width: 90%;
                                      height: auto;




http://2010.dconstruct.org/
accessibility*


                                                          features                     functionality

                                                      usability                          performance


                                                         experience                   bandwidth




                                                                                         a balancing act...


http://www.flickr.com/photos/superfantastic/50088733
1. mobile first
2. use well structured, meaningful markup
3. the absence of support for @media queries
   is in fact the first @media query...

4. progressively enhance using JavaScript
   and @media queries

5. adapt content (especially images)
   appropriately for each device

6. compress content where possible,
   and don’t include unnecessary data
why even bother...




                                                             I’ve seen
                                                             that look...




http://www.flickr.com/photos/eldret_99/3311540632
...people actually do use the mobile web




                                                     source comScore MobiLens




http://www.flickr.com/photos/pictfactory/2796367140
...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/4647893507
thank you




hello@yiibu.com

More Related Content

What's hot

Camara de cine
Camara de cineCamara de cine
Camara de cine
Ana García Martínez
 
Advanced photography techniques
Advanced photography techniquesAdvanced photography techniques
Advanced photography techniques
Muhammad Faiz
 
Assignment 4:4:Camera shots, camera angles, camera movement and composition
Assignment 4:4:Camera shots, camera angles, camera movement and compositionAssignment 4:4:Camera shots, camera angles, camera movement and composition
Assignment 4:4:Camera shots, camera angles, camera movement and composition
monaenae
 
Understanding Camera Exposure, Aperture, ISO & Shutter Speed
Understanding Camera Exposure, Aperture, ISO & Shutter SpeedUnderstanding Camera Exposure, Aperture, ISO & Shutter Speed
Understanding Camera Exposure, Aperture, ISO & Shutter Speed
Rahat Kazmi
 
Aperture priority
Aperture priorityAperture priority
Aperture priority
Grand Lake Photo Club
 
Camera fotografica e_seus_mecanismos
Camera fotografica e_seus_mecanismosCamera fotografica e_seus_mecanismos
Camera fotografica e_seus_mecanismos
Artetudo
 
White balance
White balanceWhite balance
White balance
Mary Haas
 
Introduction to Landscape Photography
Introduction to Landscape PhotographyIntroduction to Landscape Photography
Introduction to Landscape Photography
Z Hoeben
 
BASICS and INTRODUCTION of ROBOTICS
BASICS and INTRODUCTION of ROBOTICSBASICS and INTRODUCTION of ROBOTICS
BASICS and INTRODUCTION of ROBOTICS
nishantsharma1705
 
Types of Camera Lenses
Types of Camera LensesTypes of Camera Lenses
Types of Camera Lenses
X-Light Photography
 
Lesson 1c Lighting
Lesson 1c LightingLesson 1c Lighting
Lesson 1c Lighting
hweeling
 
White balance
White balanceWhite balance
White balance
Jo Lowes
 
Aperture
ApertureAperture
Aperture
Mark Carter
 
12 principles of animation
12 principles of animation12 principles of animation
12 principles of animation
INFORMATIC COMPUTER INSTITUTE
 
Robotics and control theory
Robotics and control theoryRobotics and control theory
Robotics and control theory
Uzair Afridi
 
Introduction to blender
Introduction to blenderIntroduction to blender
Introduction to blender
Carlos Cámara
 
Photography genres
Photography genresPhotography genres
Photography genres
101k_
 
Digital Photography- Exposure Triangle
Digital Photography- Exposure TriangleDigital Photography- Exposure Triangle
Digital Photography- Exposure Triangle
jspeir
 
Basic elements of photography
Basic elements of photographyBasic elements of photography
Basic elements of photography
fimz786
 
Formatos fotografía
Formatos fotografíaFormatos fotografía
Formatos fotografía
Heriberto berbal
 

What's hot (20)

Camara de cine
Camara de cineCamara de cine
Camara de cine
 
Advanced photography techniques
Advanced photography techniquesAdvanced photography techniques
Advanced photography techniques
 
Assignment 4:4:Camera shots, camera angles, camera movement and composition
Assignment 4:4:Camera shots, camera angles, camera movement and compositionAssignment 4:4:Camera shots, camera angles, camera movement and composition
Assignment 4:4:Camera shots, camera angles, camera movement and composition
 
Understanding Camera Exposure, Aperture, ISO & Shutter Speed
Understanding Camera Exposure, Aperture, ISO & Shutter SpeedUnderstanding Camera Exposure, Aperture, ISO & Shutter Speed
Understanding Camera Exposure, Aperture, ISO & Shutter Speed
 
Aperture priority
Aperture priorityAperture priority
Aperture priority
 
Camera fotografica e_seus_mecanismos
Camera fotografica e_seus_mecanismosCamera fotografica e_seus_mecanismos
Camera fotografica e_seus_mecanismos
 
White balance
White balanceWhite balance
White balance
 
Introduction to Landscape Photography
Introduction to Landscape PhotographyIntroduction to Landscape Photography
Introduction to Landscape Photography
 
BASICS and INTRODUCTION of ROBOTICS
BASICS and INTRODUCTION of ROBOTICSBASICS and INTRODUCTION of ROBOTICS
BASICS and INTRODUCTION of ROBOTICS
 
Types of Camera Lenses
Types of Camera LensesTypes of Camera Lenses
Types of Camera Lenses
 
Lesson 1c Lighting
Lesson 1c LightingLesson 1c Lighting
Lesson 1c Lighting
 
White balance
White balanceWhite balance
White balance
 
Aperture
ApertureAperture
Aperture
 
12 principles of animation
12 principles of animation12 principles of animation
12 principles of animation
 
Robotics and control theory
Robotics and control theoryRobotics and control theory
Robotics and control theory
 
Introduction to blender
Introduction to blenderIntroduction to blender
Introduction to blender
 
Photography genres
Photography genresPhotography genres
Photography genres
 
Digital Photography- Exposure Triangle
Digital Photography- Exposure TriangleDigital Photography- Exposure Triangle
Digital Photography- Exposure Triangle
 
Basic elements of photography
Basic elements of photographyBasic elements of photography
Basic elements of photography
 
Formatos fotografía
Formatos fotografíaFormatos fotografía
Formatos fotografía
 

Similar to Rethinking the Mobile Web by Yiibu

Its about people, not devices
Its about people, not devicesIts about people, not devices
Its about people, not devices
Alexander Anikin
 
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
 
Adaptation
AdaptationAdaptation
Adaptation
Alexander Anikin
 
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
yiibu
 
Yiibu goingmobile2010-100818120505-phpapp01
Yiibu goingmobile2010-100818120505-phpapp01Yiibu goingmobile2010-100818120505-phpapp01
Yiibu goingmobile2010-100818120505-phpapp01
Gustavo Luveira
 
The trouble with context
The trouble with contextThe trouble with context
The trouble with context
Alexander Anikin
 
The trouble with context
The trouble with contextThe trouble with context
The trouble with context
yiibu
 
Yiibu rethinkingthemobileweb-100910074556-phpapp01
Yiibu rethinkingthemobileweb-100910074556-phpapp01Yiibu rethinkingthemobileweb-100910074556-phpapp01
Yiibu rethinkingthemobileweb-100910074556-phpapp01
Raymond Morin
 
Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Native vs. Mobile Web vs. Hybrid Apps for Mobile DevelopmentNative vs. Mobile Web vs. Hybrid Apps for Mobile Development
Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Jason Grigsby
 
Beyond the mobile web
Beyond the mobile webBeyond the mobile web
Beyond the mobile web
Alexander Anikin
 
Beyond The Mobile Web By Yiibu 110412113255 Phpapp01
Beyond The Mobile Web By Yiibu 110412113255 Phpapp01Beyond The Mobile Web By Yiibu 110412113255 Phpapp01
Beyond The Mobile Web By Yiibu 110412113255 Phpapp01
Therese Kokot
 
Beyond The Mobile Web By Yiibu
Beyond The Mobile Web By YiibuBeyond The Mobile Web By Yiibu
Beyond The Mobile Web By Yiibu
Jim Porter
 
Beyond the mobile web by yiibu
Beyond the mobile web by yiibuBeyond the mobile web by yiibu
Beyond the mobile web by yiibu
yiibu
 
Keynote ok acrl murphy
Keynote ok acrl murphyKeynote ok acrl murphy
Keynote ok acrl murphy
Joe Murphy Librarian & Futurist
 
Mobile & journalism webinar - trad(1)
Mobile & journalism   webinar - trad(1)Mobile & journalism   webinar - trad(1)
Mobile & journalism webinar - trad(1)
FAIR PLAY AD / @VeronicaRRSouza
 
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01
Victor Minuesa
 
Beyond The Hamburger Menu - MOBX, 13 Sep 2014
Beyond The Hamburger Menu - MOBX, 13 Sep 2014Beyond The Hamburger Menu - MOBX, 13 Sep 2014
Beyond The Hamburger Menu - MOBX, 13 Sep 2014
Anna Dahlström
 
Change? Wot me? Digital Marketing is Here Already
Change? Wot me? Digital Marketing is Here AlreadyChange? Wot me? Digital Marketing is Here Already
Change? Wot me? Digital Marketing is Here Already
Ian Fenwick, Digital Marketing
 
SparkUp 2010 Mobile UX 101
SparkUp 2010 Mobile UX 101SparkUp 2010 Mobile UX 101
SparkUp 2010 Mobile UX 101
Antony Ribot
 
Casting Off Our Desktop Shackles
Casting Off Our Desktop ShacklesCasting Off Our Desktop Shackles
Casting Off Our Desktop Shackles
Jason Grigsby
 

Similar to Rethinking the Mobile Web by Yiibu (20)

Its about people, not devices
Its about people, not devicesIts about people, not devices
Its about people, not devices
 
It's about people, not devices...
It's about people, not devices...It's about people, not devices...
It's about people, not devices...
 
Adaptation
AdaptationAdaptation
Adaptation
 
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
 
Yiibu goingmobile2010-100818120505-phpapp01
Yiibu goingmobile2010-100818120505-phpapp01Yiibu goingmobile2010-100818120505-phpapp01
Yiibu goingmobile2010-100818120505-phpapp01
 
The trouble with context
The trouble with contextThe trouble with context
The trouble with context
 
The trouble with context
The trouble with contextThe trouble with context
The trouble with context
 
Yiibu rethinkingthemobileweb-100910074556-phpapp01
Yiibu rethinkingthemobileweb-100910074556-phpapp01Yiibu rethinkingthemobileweb-100910074556-phpapp01
Yiibu rethinkingthemobileweb-100910074556-phpapp01
 
Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Native vs. Mobile Web vs. Hybrid Apps for Mobile DevelopmentNative vs. Mobile Web vs. Hybrid Apps for Mobile Development
Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
 
Beyond the mobile web
Beyond the mobile webBeyond the mobile web
Beyond the mobile web
 
Beyond The Mobile Web By Yiibu 110412113255 Phpapp01
Beyond The Mobile Web By Yiibu 110412113255 Phpapp01Beyond The Mobile Web By Yiibu 110412113255 Phpapp01
Beyond The Mobile Web By Yiibu 110412113255 Phpapp01
 
Beyond The Mobile Web By Yiibu
Beyond The Mobile Web By YiibuBeyond The Mobile Web By Yiibu
Beyond The Mobile Web By Yiibu
 
Beyond the mobile web by yiibu
Beyond the mobile web by yiibuBeyond the mobile web by yiibu
Beyond the mobile web by yiibu
 
Keynote ok acrl murphy
Keynote ok acrl murphyKeynote ok acrl murphy
Keynote ok acrl murphy
 
Mobile & journalism webinar - trad(1)
Mobile & journalism   webinar - trad(1)Mobile & journalism   webinar - trad(1)
Mobile & journalism webinar - trad(1)
 
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01
Mobxbeyondthehamburgermenu13sep2014 140916040153-phpapp01
 
Beyond The Hamburger Menu - MOBX, 13 Sep 2014
Beyond The Hamburger Menu - MOBX, 13 Sep 2014Beyond The Hamburger Menu - MOBX, 13 Sep 2014
Beyond The Hamburger Menu - MOBX, 13 Sep 2014
 
Change? Wot me? Digital Marketing is Here Already
Change? Wot me? Digital Marketing is Here AlreadyChange? Wot me? Digital Marketing is Here Already
Change? Wot me? Digital Marketing is Here Already
 
SparkUp 2010 Mobile UX 101
SparkUp 2010 Mobile UX 101SparkUp 2010 Mobile UX 101
SparkUp 2010 Mobile UX 101
 
Casting Off Our Desktop Shackles
Casting Off Our Desktop ShacklesCasting Off Our Desktop Shackles
Casting Off Our Desktop Shackles
 

More from Bryan Rieger

The End of Unlimited Bandwidth
The End of Unlimited BandwidthThe End of Unlimited Bandwidth
The End of Unlimited Bandwidth
Bryan Rieger
 
Some Kind of Wonderful
Some Kind of WonderfulSome Kind of Wonderful
Some Kind of Wonderful
Bryan Rieger
 
What Would Picasso Do?
What Would Picasso Do?What Would Picasso Do?
What Would Picasso Do?
Bryan Rieger
 
Going Mobile (2010) by Yiibu
Going Mobile (2010) by YiibuGoing Mobile (2010) by Yiibu
Going Mobile (2010) by Yiibu
Bryan Rieger
 
8 Ways to Improve App Store User Experience
8 Ways to Improve App Store User Experience8 Ways to Improve App Store User Experience
8 Ways to Improve App Store User Experience
Bryan Rieger
 
Mobile Ajax Workshop
Mobile Ajax WorkshopMobile Ajax Workshop
Mobile Ajax Workshop
Bryan Rieger
 
Of Prototypes, Rubber Ducks And Little Men Behind The Curtain
Of Prototypes, Rubber Ducks And Little Men Behind The CurtainOf Prototypes, Rubber Ducks And Little Men Behind The Curtain
Of Prototypes, Rubber Ducks And Little Men Behind The Curtain
Bryan Rieger
 
Modeling the Mobile User Experience
Modeling the Mobile User ExperienceModeling the Mobile User Experience
Modeling the Mobile User Experience
Bryan Rieger
 
Mobile Persuasion
Mobile PersuasionMobile Persuasion
Mobile Persuasion
Bryan Rieger
 
MEX 2008 - Is Fashion a Stronger Motivator than Functionality?
MEX 2008 - Is Fashion a Stronger Motivator than Functionality?MEX 2008 - Is Fashion a Stronger Motivator than Functionality?
MEX 2008 - Is Fashion a Stronger Motivator than Functionality?
Bryan Rieger
 
Going Mobile - A Pragmatic Look At Mobile Design
Going Mobile - A Pragmatic Look At Mobile DesignGoing Mobile - A Pragmatic Look At Mobile Design
Going Mobile - A Pragmatic Look At Mobile Design
Bryan Rieger
 
Creating Casual Games, Content and Applications for the Mobile Long Tail
Creating Casual Games, Content and Applications for the Mobile Long TailCreating Casual Games, Content and Applications for the Mobile Long Tail
Creating Casual Games, Content and Applications for the Mobile Long Tail
Bryan Rieger
 
Makin It Work
Makin It WorkMakin It Work
Makin It Work
Bryan Rieger
 
Prime Sky
Prime SkyPrime Sky
Prime Sky
Bryan Rieger
 

More from Bryan Rieger (14)

The End of Unlimited Bandwidth
The End of Unlimited BandwidthThe End of Unlimited Bandwidth
The End of Unlimited Bandwidth
 
Some Kind of Wonderful
Some Kind of WonderfulSome Kind of Wonderful
Some Kind of Wonderful
 
What Would Picasso Do?
What Would Picasso Do?What Would Picasso Do?
What Would Picasso Do?
 
Going Mobile (2010) by Yiibu
Going Mobile (2010) by YiibuGoing Mobile (2010) by Yiibu
Going Mobile (2010) by Yiibu
 
8 Ways to Improve App Store User Experience
8 Ways to Improve App Store User Experience8 Ways to Improve App Store User Experience
8 Ways to Improve App Store User Experience
 
Mobile Ajax Workshop
Mobile Ajax WorkshopMobile Ajax Workshop
Mobile Ajax Workshop
 
Of Prototypes, Rubber Ducks And Little Men Behind The Curtain
Of Prototypes, Rubber Ducks And Little Men Behind The CurtainOf Prototypes, Rubber Ducks And Little Men Behind The Curtain
Of Prototypes, Rubber Ducks And Little Men Behind The Curtain
 
Modeling the Mobile User Experience
Modeling the Mobile User ExperienceModeling the Mobile User Experience
Modeling the Mobile User Experience
 
Mobile Persuasion
Mobile PersuasionMobile Persuasion
Mobile Persuasion
 
MEX 2008 - Is Fashion a Stronger Motivator than Functionality?
MEX 2008 - Is Fashion a Stronger Motivator than Functionality?MEX 2008 - Is Fashion a Stronger Motivator than Functionality?
MEX 2008 - Is Fashion a Stronger Motivator than Functionality?
 
Going Mobile - A Pragmatic Look At Mobile Design
Going Mobile - A Pragmatic Look At Mobile DesignGoing Mobile - A Pragmatic Look At Mobile Design
Going Mobile - A Pragmatic Look At Mobile Design
 
Creating Casual Games, Content and Applications for the Mobile Long Tail
Creating Casual Games, Content and Applications for the Mobile Long TailCreating Casual Games, Content and Applications for the Mobile Long Tail
Creating Casual Games, Content and Applications for the Mobile Long Tail
 
Makin It Work
Makin It WorkMakin It Work
Makin It Work
 
Prime Sky
Prime SkyPrime Sky
Prime Sky
 

Recently uploaded

Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
313mohammedarshad
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
Priyanka Aash
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Networks
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
Edge AI and Vision Alliance
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
Matthias Neugebauer
 
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and OllamaTirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Zilliz
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
Steven Carlson
 
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Torry Harris
 
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Muhammad Ali
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
ssuser1915fe1
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
ldtexsolbl
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
bhumivarma35300
 
WhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring AppsWhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring Apps
HackersList
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
HackersList
 
The importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT StandardizationThe importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT Standardization
Axel Rennoch
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Kunal Gupta
 
July Patch Tuesday
July Patch TuesdayJuly Patch Tuesday
July Patch Tuesday
Ivanti
 

Recently uploaded (20)

Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
 
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and OllamaTirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
 
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
 
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
 
WhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring AppsWhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring Apps
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
 
The importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT StandardizationThe importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT Standardization
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
 
July Patch Tuesday
July Patch TuesdayJuly Patch Tuesday
July Patch Tuesday
 

Rethinking the Mobile Web by Yiibu

  • 1. Rethinking the Mobile Web a pragmatic look at creating an accessible and inclusive mobile experience http://www.flickr.com/photos/fpat/3692425154
  • 2. we apps, and... a lovely, location-b ased, social, photo thing y... this presentation is not about these. http://www.flickr.com/photos/scobleizer/3985020876
  • 3. Dinosaurs! we think the iPad is pretty awesome, but... http://www.flickr.com/photos/goincase/4647893507
  • 5. 1.8 billion the number of internet connections in the world today... 26% of the world’s population at the beginning of 2010 – http://www.internetworldstats.com
  • 6. 6.8 billion the number of people in the world today... *2009 estimates put the population around 6.79 billion inhabitants...
  • 7. 3.4 billion the number of people with mobile devices today... or roughly 1/2 the population of the planet, which is...
  • 8. it’s about people not devices...
  • 9. so here’s the dilemma... http://www.flickr.com/photos/soundman1024/1796003688
  • 10. "The future is already here – it’s just not evenly distributed." – William Gibson http://www.flickr.com/photos/kiwanja/3169447879
  • 11. no home Sony Ericsson w810i no iPhone technology should not only be accessible... http://www.flickr.com/photos/walkadog/3093763311
  • 12. but inclusive... iPhone http://www.flickr.com/photos/javiercito/2319331695
  • 13. and available to everyone... iPhone http://www.flickr.com/photos/pictfactory/2796367140
  • 14. yes, even this man who does not have an iPhone... not an iPhone... http://www.flickr.com/photos/dopesmuglar/486087009
  • 15. so, who actually has an iPhone... http://www.flickr.com/photos/data_op/2468057934
  • 16. USA
  • 17. about 6% US market share... US Population: 307 million Smartphone penetration: 31% of pop. iPhone market share: 21% of smp. enormous Total iPhones in US: 19 million (~6%) impact low overall penetration The iPhone Reality in Europe: Low Overall Penetration, Enormous Impact http://moconews.net/article/419-deep-discounts-on-smartphones-drive-u.s.-adoption-rates-to-nearly-a-thi/ and http://www.npd.com/press/releases/press_100510.html
  • 18. EU5
  • 19. only 4% EU5* market share... enormous EU5* = France, Germany, Italy, Spain and United Kingdom impact low overall penetration The iPhone Reality in Europe: Low Overall Penetration, Enormous Impact http://www.comscore.com/layout/set/popup/layout/set/popup/Press_Events/Press_Releases/2010/6/The_iPhone_Reality_in_Europe_Low_Overall_Penetration_Enormous_Impact
  • 20. <4% global market share* enormous impact low overall penetration *I suspect it’s actually much less, but finding accurate global figures is a tad difficult...
  • 21. ie: BMW The ”most popular” devices don’t necessarily translate to the most used devices. ie: Ford
  • 22. yeah, but those devices suck! http://www.flickr.com/photos/eldret_99/3311540398
  • 24. the first smartphone in 2003... considered portable in 1984 fits in your pocket still widely used... Released: 1984 Released: 2003 CPU: 8 MHz CPU: 104 MHz RAM: 128k (512k max) RAM: 6 MB Storage: 400k (3.5” floppy) Storage: 32 MB MMC Card Display: 22.9 cm Monochrome Display: 5.3 cm Thousands of colours Dimensions: 34.5 x 24.4 x 27.7 cm Dimensions: 10.9 x 5.8 x 2.4 cm Weight: 7.5 kgs Weight: 122 g
  • 25. the music phone in 2008... again, it was ‘portable’...? ...this runs Flash not a feature phone, nor a smartphone... Released: 1998 Released: 2008 CPU: 233 MHz CPU: 434 MHz RAM: 32 MB (512 MB max) RAM: 128 MB Storage: 4 GB (+ optical drive) Storage: 8 GB (16 GB max) Display: 38.1 cm Millions of colours Display: 8.1 cm Millions of colours Dimensions: 40.1 x 38.6 x 44.7 cm Dimensions: 11.1 x 5.2 x 1.5 cm Weight: 17.3 kgs Weight: 109 g
  • 26. the feature phone in 2009... smartphone from 2005 extremely popular today... still widely used today... Released: 2005 Released: 2009 CPU: 220 MHz CPU: 369 MHz RAM: 22 MB RAM: 30 MB Storage: 64 MB Storage: 1 GB (16 GB max) Display: 5.3 cm Thousands of colours Display: 5.1 cm Thousands of colours Dimensions: 10.8 x 5.3 x 2.2 cm Dimensions: 10.6 x 4.7 x 1.5 cm Weight: 126 g Weight: 88 g
  • 27. the smartphone in 2010... ...playing “catch-up” raising the “bar”... Released: 2010 Released: 2010 CPU: 680 MHz CPU: 1 GHz A4 Processor RAM: 256 MB RAM: 512 MB Storage: 16 GB (32 GB max) Storage: 16 GB (32 GB max) Display: 8.9 cm Millions of colours Display: 8.9 cm Millions of colours Dimensions: 11.4 x 5.9 x 1.3 cm Dimensions: 11.5 x 5.9 x 0.9 cm Weight: 135 g Weight: 137 g
  • 28. ...but folks with those other phones simply don’t use the Internet. http://www.flickr.com/photos/carbonnyc/3369424492
  • 29. yeah, and grandma doesn’t do Facebook... ” Grandma* Facebook http://www.flickr.com/photos/amagill/304701054 *not my Grandma
  • 30. 1.3 billion the number of mobile internet users today... ...includes WAP and ‘real web’ via Tomi Ahonen Consulting
  • 31. 1/3 number of global internet users who access the internet only via mobile... ...includes WAP and ‘real web’ via Tomi Ahonen Consulting
  • 32. 21% the projected worldwide 3G penetration in 2010... via Morgan Stanley
  • 33. so, what are they using...
  • 34. mobile browser market share via http://gs.statcounter.com - 02/2010 other? things have changed skeptical UC ate Nokia’s share... other? other? note OperaMini... Blackberry! quality + sample size? Data Source: http://gs.statcounter.com Published Under a Creative Commons Attribution 3.0 Unported License You are free to copy, distribute and transmit the work and to adapt the work providing it is attributed to www.icrossing.co.uk http://www.flickr.com/photos/icrossing_uk/4342659861
  • 35. something happened in February... UC browser... Nokia browser... Top 9 Mobile Browsers in China from Sep 09 to Aug 10 | StatCounter Global Stats http://gs.statcounter.com/#mobile_browser-CN-monthly-200909-201008
  • 36. moving forward... used in iOS, Android, Palm WebOS, Nokia Qt, primarily used on feature Bada, Symbian and new Blackberry... phones supporting Java ME... + WebKit OperaMini Windows Mobile proxy browser... watch these... lots of new browsers, variation and of course – legacy browsers “Fennec” Browser UC Obigo SkyFire proxy browsers Internet Explorer MicroB Internet Browser
  • 37. the importance of WebKit... open source licensed under the GNU Library General Public License excellent standards support including HTML, CSS3, SVG, etc. innovations often contributed back example: HTML5, CSS animations, SquirrelFish, etc. adopted by many leading companies including Apple, Nokia, Samsung, Google, Palm, etc. WebKit used in many mobile operating systems including iOS, Android, webOS, Bada, Symbian, etc. btw - “There is no WebKit on Mobile” by @ppk http://www.quirksmode.org/blog/archives/2009/10/there_is_no_web.html
  • 38. the importance of OperaMini... free costs consumers absolutely nothing a full-web experience supports Ajax, zooming, tabbed browsing, etc excellent standards support based on the same code-base as the Opera browser OperaMini available just about anywhere on JavaME, iPhone, Android, Windows Mobile + more an extremely efficient browser a proxy server filters, compresses & pre-renders content usable on older devices breathe new life into those antique devices... very important
  • 39. rendered + optimised and proxy browsers... proxy browser on proxy server... free + unlimited bandwidth OBML* HTML limited + costly proxy server bbc.co.uk bandwidth *OBML (Opera Binary Markup Language) is highly optimised for mobile networks + devices.
  • 40. on private networks... caller a d limited + costly bandwidth switching centre receiver c b base-station to the Internet... transcoding, bandwidth limitations, service blocking and no packet neutrality
  • 41. also availabl e for Android ... OperaMini is great for browsing the web on iPhone when your connection stinks. Which is unfortunately is fairly often in my ” case. – @jonathanstark http://www.flickr.com/photos/johanl/4424185115
  • 42. app yeah, whatever–I just wanna build a mobile website...
  • 43. traditionally you might consider... a device database ie. DeviceAtlas device detection or WURFL content adaptation an abstraction layer device various standards exhausting capabilities media types WURFL/WALL testing transcoding multiple templates private networks mimetypes geing “on-deck” data limits multiple sites an off-deck strategy... cHTML the “One Web” dream thematic correct doctypes consistency fragmentation switching algorithms WML using UAProf data XHTML-MP http://www.flickr.com/photos/rmlowe/3281353786 WAP
  • 44. but that might be a bit overwhelming... OMG... ” http://www.flickr.com/photos/richardmoross/1413692087
  • 46. ...a look at what we’re doing now?* *for illustration purposes only
  • 47. we could do nothing... http://www.alistapart.com/
  • 48. but that’s not terribly mobile friendly – what about...
  • 49. a mobile specific site... http://mobify.me http://m.alistapart.com/
  • 50. oh, but then that just begs the question...
  • 51. other... laptops/netbooks TVs handheld consoles what exactly is mobile... http://www.flickr.com/photos/amagill/26273015
  • 53. 128x160 240x320 320x480 what isn’t... 1280x768 1024x768 480x800
  • 54. then again, we could...
  • 55. create an adaptive experience... http://www.flickr.com/photos/rohit_saxena/4873732679
  • 56. an example http://colly.com* *for illustration purposes only, I’m not criticising the talented Mr. Collison or his fine work...
  • 57. http://colly.com MOBILE SITE OF THE YEAR NOMINEE http://www.thenetawards.com/
  • 59. squishy squishy with flexible layout http://colly.com/
  • 60. also available on mobile... squishy squishy http://colly.com/
  • 61. al an optimce experien squishy squishy tada! brought to you through the magic of @media queries... http://colly.com/
  • 63. these are also mobile... WebKit WebKit approximations based on actual device testing - font rendering will vary... http://colly.com/
  • 64. as are these... the iPhone is #1 device for OperaMini *OperaMini is often preferred by many users as it optimises content prior to download, which reduces data costs. http://colly.com/
  • 65. and these... Mozilla 77mm 47mm insanely tiny! expect many more tablet devices on the market soon... http://colly.com/
  • 66. traditionally used for the fine print... which now require this... http://www.flickr.com/photos/chrisbrenschmidt/1832787028
  • 67. viewport is much smaller than the actual content and this... http://www.flickr.com/photos/katerha/4592429363
  • 68. keyhole browsing for this experience http://colly.com/
  • 69. ...would you be happy with this? hmm... http://colly.com/
  • 70. once again why are we writing for only one browser... 2000 2010 ...is WebKit the new Internet Explorer?
  • 71. “This site works best in Safari 4” ” is ok where “This site works best in IE4” wasn’t?!? Open standards or double standards? – @csssquirrel via @brucel http://www.flickr.com/photos/pjanvandaele/3990379048
  • 72. If you want to use the web on a ” mobile device, is the purchase of an iPhone the cost of entry? or Android device this design can work on *many* more devices... let alone only one device?
  • 73. as per my highly sophisticated mobile web triage process... ;) Good Could be improved Needs to be improved let’s make it more accessible... http://colly.com/
  • 74. 3 one style sheet w/@media queries 4 jQuery used only for animation... 5 same images used for all screen devices... only a few issues... 2 well structured, meaningful markup Good 4 Javascript animations tend to work poorly on the majority of mobile devices... Could be improved Needs to be improved
  • 76. 2. use well structured, meaningful markup for those still paying attention, yes there is a #1 and we will get to it shortly...
  • 77. 2 well structured, meaningful markup... mmm... meaning! structure there’s lots more, but who wants to stare at code... http://colly.com/ view source
  • 78. 2 well structured, meaningful markup... use <header>, <h1>, <p> and other semantically meaningful tags to provide basic structure *Note: this is not from hp://colly.com recreating existing <tags> <div class="body"> is not cool <div class="header"> <div class= "h1"> <span>Hello World!</span> </div> </div> <div> soup... <div class="body">HTML <span class="emphasis">can actually be</span>meaningful. </div> </div> soup is best served in a bowl... without a basic, meaningful structure you will need to re-create many existing properties
  • 79. 2. use well structured, meaningful markup 3. the absence of support for @media queries is in fact the first @media query...
  • 80. 3 all-in-one stylesheet with @media queries... a single css file is network efficient, but often includes unnecessary style data for mobile devices... <link href="screen.css" type="text/css" rel="stylesheet" media="screen" /> ....towards the end of ‘screen.css’ we find the @media queries mobile specific tweaks are added at the very end, and only through @media queries... @media (max-device-width:480px) and (orientation:portrait) { ...
  • 81. how retro... kinda backwards... http://www.flickr.com/photos/dumbledad/3400708183
  • 82. rocket science a desktop browser... are we expecting too much... http://www.flickr.com/photos/nasa_goddard/4678389619/
  • 83. rocket science a mobile browser... ...from our mobile browsers? http://www.flickr.com/photos/wwworks/3749061604
  • 85. 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!
  • 86. Luke Wroblewski mobile first http://www.lukew.com/ff/entry.asp?933 http://www.flickr.com/photos/pete-karl/4637024524
  • 88. is technically served to everyone... a full desktop site
  • 89. sprinkle on a few @media queries... + @media queries a full desktop site
  • 90. ...if the @media query resolves to true, tada - a mobile site! = mobile site + @media queries a full desktop site
  • 91. but here’s the problem...
  • 92. FAIL = mobile site + @media queries a full desktop site http://www.flickr.com/photos/hendry/3053419265
  • 93. = mobile site a full desktop site http://www.flickr.com/photos/hendry/3053419265
  • 94. @media queries will resolve to false on most devices... no, really – you simply cannot rely on them currently on mobile devices
  • 95. resulting in this experience... http://colly.com/
  • 96. so it’s far more effective when we start with...
  • 97. is technically served to everyone... a mobile site
  • 98. for browsers that support them, other browsers will just ignore them... + @media queries a mobile site
  • 99. tada – a desktop site! ;) = full desktop site + @media queries a mobile site
  • 100. which is really just...
  • 101. and not a new idea at all... progressive enhancement = full desktop site Jeremy Keith + media queries a mobile site http://www.flickr.com/photos/clagnut/315554083
  • 103. but let’s get back to...
  • 104. 1. mobile first 2. use well structured, meaningful markup 3. the absence of support for @media queries is in fact the first @media query...
  • 105. 3 all-in-one stylesheet with @media queries... a single css file is network efficient, but often includes unnecessary style data for mobile devices... <link href="screen.css" type="text/css" rel="stylesheet" media="screen" /> ....towards the end of ‘screen.css’ we find the @media queries mobile specific tweaks are added at the very end, and only through @media queries... @media (max-device-width:480px) and (orientation:portrait) { ...
  • 106. 3 default stylesheet plus @media queries... place mobile related styles into a default stylesheet... <link href="default.css" type="text/css" rel="stylesheet" media="screen" /> <link href="desktop.css" type="text/css" rel="stylesheet" media="screen and (min-device-width:1024px) and (max-width:989px)" /> link additional style sheets using @media queries to progressively enhance the content for more capable browsers some mobile browsers look for it... *you may want to use both the ‘screen’ and ‘handheld’ media types for your default stylesheet
  • 107. 1. mobile first 2. use well structured, meaningful markup 3. the absence of support for @media queries is in fact the first @media query... 4. progressively enhance using JavaScript and @media queries
  • 108. 4 jQuery/JavaScript used only for animation... jQuery is still a rather hefty library for use on mobile devices... <script type="text/javascript" src=".../jquery.min.js"><script> <script type="text/javascript" src=".../scrollto.js"><script> animation in JavaScript can be very taxing on mobile devices...
  • 109. mobile browsers aren’t as capable as desktop browsers... again, are we expecting too much...? http://www.flickr.com/photos/mjryall/3638778588
  • 110. 4 use CSS instead of JavaScript for animations... are jQuery (and JavaScript) necessary to provide an experience on mobile devices...? <script type="text/javascript" src=".../jquery.min.js"><script> <script type="text/javascript" src=".../scrollto.js"><script> consider using basic DOM manipulation, or a mobile optimised Javascript library <script type="text/javascript" src=".../xui.min.js"><script> the “jQuery Mobile” long before jQuery Mobile... http://xuijs.com http://jquerymobile.com use CSS for animations if available instead of Javascript ...use CSS animations .scrollto { (where possible) instead -webkit-transform: translate(540px, -200px); -moz-transform: translate(540px, -200px); -o-transform: translate(540px, -200px); } ignored on browsers that don’t support it
  • 111. look ma, no jQuery? from a time before jQuery... Twier? http://www.flickr.com/photos/wordridden/2474879344
  • 112. then again, do you really need javascript? *none of these services relied on Javascript when they first started...
  • 113. 1. mobile first 2. use well structured, meaningful markup 3. the absence of support for @media queries is in fact the first @media query... 4. progressively enhance using JavaScript and @media queries 5. adapt content (especially images) appropriately for each device
  • 114. 5 same images used for all devices... one size rarely fits all... ul li#biography a span.label { background: url("../pig.png") repeat-x center bottom; } 16 Kb also adapt content used in <img /> tags we should also adapt images found within the markup... <img src="butterfly.png" width="200" height="160" alt="butterfly" /> 16 Kb http://colly.com/
  • 115. 5 images adapted appropriately for each device... ul li#biography a span.label { background: url("../pig-small.png") repeat-x center bottom; } provide appropriate sized images for various devices 6 Kb also adapt content used in <img /> tags many CMS’s such as WordPress provide a means of filtering HTML before it’s sent to the client <img src="butterfly-small.png" width="100" height="80" alt="butterfly" /> 6 Kb be sure to update the width and height aributes accordingly services such as http://tinysrc.net can automatically resize + compress your images http://colly.com/
  • 116. we could also rethink the <img />* tag... one image can have multiple source files, each for an appropriate context <img alt="butterfly"> <source src="butterfly-small.png" width="100" height="80" /> <source src="butterfly.png" width="200" height="160" /> <source src="butterfly-large.svg" width="400" height="400" media="min-device-width:320px" /> image formats, and aspect ratios </img> could be modified as required and possibly even include media queries... *I’m just dreaming here, this doesn’t currently exist...
  • 118. much better... approximations based on actual device testing - font rendering will vary... http://colly.com/
  • 119. quick another example... http://2010.dconstruct.org* *again, for illustration purposes only, I’m not criticising the fine folks behind dConstruct...
  • 121. squishy squishy http://2010.dconstruct.org/
  • 122. different different tada! again, brought to you through the magic of @media queries... http://2010.dconstruct.org/
  • 124. 6 fonts often not supported on mobile sprite image not used 6 on mobile devices... 6 images not used on mobile devices... only one real issue... 3 a single (and compressed!) style sheet 2 well structured, meaningful and compressed markup Good simple DOM scripting without Could be improved 4 large Javascript libraries Needs to be improved
  • 125. 1. mobile first 2. use well structured, meaningful markup 3. the absence of support for media queries is in fact the first @media query... 4. progressively enhance using JavaScript and @media queries 5. adapt content (especially images) appropriately for each device 6. compress content where possible, and avoid sending unnecessary data
  • 126. 6 display:none still loads resources... don’t expect mobile bandwidth to be free... @media (max-device-width:767px), all and (max-width:449px) { ... .speaker-carousel { display: none; all of the speaker-carousel images are actually loaded, even though they are never displayed on mobile devices... }
  • 127. images not used on @font-face not supported mobile devices... on most mobile devices... 367.35 KB 93.63 KB http://2010.dconstruct.org/
  • 128. 6 ...avoid sending unnecessary data @media (max-device-width:767px), all and (max-width:449px) { ... .speaker-carousel { display: none; find another way to remove the unused resources on mobile devices... }
  • 130. little tweaks... fixed relative width width width: 90%; height: auto; http://2010.dconstruct.org/
  • 131. accessibility* features functionality usability performance experience bandwidth a balancing act... http://www.flickr.com/photos/superfantastic/50088733
  • 132. 1. mobile first 2. use well structured, meaningful markup 3. the absence of support for @media queries is in fact the first @media query... 4. progressively enhance using JavaScript and @media queries 5. adapt content (especially images) appropriately for each device 6. compress content where possible, and don’t include unnecessary data
  • 133. why even bother... I’ve seen that look... http://www.flickr.com/photos/eldret_99/3311540632
  • 134. ...people actually do use the mobile web source comScore MobiLens http://www.flickr.com/photos/pictfactory/2796367140
  • 135. ...but, not only on these devices
  • 136. but, also on these... WebKit OperaMini
  • 137. and, these... WebKit OperaMini
  • 138. and, these... btw - expect many, many more devices to be heading our ways soon...
  • 139. Dinosaurs! ...and shouldn’t everyone benefit from technology? http://www.flickr.com/photos/goincase/4647893507