SlideShare a Scribd company logo
1 of 146
Download to read offline
DESIGNING DEVELOPING           &
for the FUTURE OF MOBILE




                                   © Copyright 2008 Garrett Murray <info@garrettmurray.net>
Garrett Murray
Web 2.0 Expo — New York
September 16, 2008 — 1A08/10
(2.0)
                                                                   WELCOME!




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
WHO AM I?
• Web & mobile developer since 1998
• Co-creator of Leaflets
• Created the OS X application xPad and the open-
 source Rails application SimpleLog
• Clients include Lonely Planet, Big Think, Pfizer




                                                    © Copyright 2008 Garrett Murray <info@garrettmurray.net>
 and the United Nations Development Programme
• Host of Maniacal Rage TV & Podcast and
 Qwick Reviews
WHO ARE YOU?
•   How many of you are developers?
•   How many of you are designers?
•   How many of you own an iPhone (2.5G or 3G)?
•   How many of you have created a mobile site for
    any mobile platform?




                                                     © Copyright 2008 Garrett Murray <info@garrettmurray.net>
• How many have created iPhone-specific sites?
• How many of you shouldn’t be here because
    you’re actually chefs?
i
Note to self: If more than half the audience
              raised their hands when you asked
              that chef question, just close your
              MacBook and leave.




                                                    © Copyright 2008 Garrett Murray <info@garrettmurray.net>
(2.0)
                                                                   THE MOBILE WEB




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
ACTUALLY...




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
(1.0!)
                                                                    THE MOBILE WEB




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
IT WAS ROUGH...
•   We had to deal with a lot of junk!
•   ARPU, depending on application goals
•   Operators (Sprint, Verizon, AT&T, et al)
•   Different languages (Java, C++, BREW)
•   Poor support for web standards (CSS, XHTML, JS)




                                                      © Copyright 2008 Garrett Murray <info@garrettmurray.net>
•   The “Deck”
•   Handsets (about a bajillion of them)
© Copyright 2008 Garrett Murray <info@garrettmurray.net>
JARGON ALERT: ARPU
Average Revenue Per User, a term used
  to describe the financial value of a
   program, application or service.
HANDSETS!




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
V3m: Open
          wave 6.2.3.1
             THE .2RAZR
                   .3.2
                       .c.1.    115

            penw  ave 6
     V3: O
                  V3c/i/r: O
                              penwave
                       The epitomy of6Mobile 1.0,
  This isn’t even HALF OF                 .2.3.4.c.1.10
                       and probably the most            9

       THE MODELS!     prolific device.
 V3m/V9m: Teleca-Obigo 4.0
                                            1.c.1
                                                  .112
                       Also, the ave 6.2
                                 perfect .3.example




                                                            © Copyright 2008 Garrett Murray <info@garrettmurray.net>
                             enw .madness™ to
                      V8: Opera 8
                       of Op
                    V3 x: handset 5 (08.B7.23R)
                       the extreme!
                   (96.80 .53R)
    xi: Op era 8.0
V3x
© Copyright 2008 Garrett Murray <info@garrettmurray.net>   Photo copyright Jeremy Plemon
(2.0)
                                                                   THE MOBILE WEB




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
JUST HOW BIG IS
                                                       THE MOBILE WEB?




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
POPULATION OF THE EARTH   Source: Wikipedia




CHINA
  (1.3 billion)


    USA




                                              © Copyright 2008 Garrett Murray <info@garrettmurray.net>
 (303 million)

                  UK
           (50 million)
MOBILE WEB OF TODAY
                  Sources: GSM Association, T-Mobile, Credit Suisse, Pyramid Research




MOBILE
 USERS




                                                                                        © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  (2.9 billion)                                  MOBILE
                                             WEB ACCESS
                                                                       (1.3 billion)
MOBILE WEB OF TOMORROW
                 Source: Informa Telecoms & Media 2006




                                                         © Copyright 2008 Garrett Murray <info@garrettmurray.net>
   HALF OF
THE PLANET!
7 th
                                                           MASS
                                                           MEDIA




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
7   th
           MASS MEDIA

1. Printing Press
2. Recordings
3. Cinema
4. Radio




                        © Copyright 2008 Garrett Murray <info@garrettmurray.net>
5. Television
6. The Internet
7.Mobile
MOBILE IS THE ONLY
MASS MEDIA THAT CAN
 DO EVERYTHING THE




                       © Copyright 2008 Garrett Murray <info@garrettmurray.net>
PREVIOUS SIX CAN DO.
5 UNIQUE BENEFITS
1. First truly personal mass media
 e.g. We don’t share our phones with our spouses

2. First always-on mass media
 Information is always available 24/7, even when idle

3. First always-carried mass media
 7 out of 10 people sleep with their phones within reach




                                                                             © Copyright 2008 Garrett Murray <info@garrettmurray.net>
4. Only mass media with a built-in payment channel
 Universal click-to-buy—twice as many people have phones than credit cards

5. Offers point of thought
 Ability to create of consume content whenever the mood strikes
© Copyright 2008 Garrett Murray <info@garrettmurray.net>
Join            Down
                                                                             Notify                             load

                                                            Vote                                                                   Vote


                                            Down
                                            load                                                                                                 Notify



                                                                                          WAP
                           Discuss                                                                           IVR
                                                                       SMS                                                                                         Buy

                                                                                                                                 SMS

                                                      IVR
                 Notify                                                                                                                                                       Send to
                                                                                                                                                                               Friend
                                                                                                                                                WAP


                                       Bluetooth
                                                                              Radio                        TV
       Send to
        Friend                                                                                                                                                                           Notify
                                                                                                                                                           SMS


                                SMS


                                                       Live                                                                    Billboard
Send to                                                                                                                                                                                           Buy
 Friend
                                                                                                                                                                   WAP




                                                                                    ry




                                                                                                           Vi
                                                                                   to
                          MMS




                                                                                                           su
                                                                              di




                                                                                                            al
                                                                            Au
Join                                                                                                                                                                                              WAP Site
                                                                                                                                                                    QR Code
                                                   Word of                                                                          Print Ad
                                                   Mouth
                          SMS

Notify
                                                                                         Kinesthetic                                                                                          Notify
                                                                                                                                                                  SMS




                                                                                                                                                                                                             © Copyright 2008 Garrett Murray <info@garrettmurray.net>
                                 WAP                               Mobile                                              Events
          Buy                                                      Device                                                                                                               Send to
                                                                                                                                                                                         Friend
                                                                                                                                                      QR Code
                                                                                           Website
                                             MMS
                 Join
                                                                                                                                                                              Notify
                                                                                                                                          SMS


                                                             SMS
                                                                                                                       Email
                          WAP Site
                                                                                   MMS                                                                          WAP Site
                                                                                                     SMS


                                        Send to
                                         Friend                                                                                                 Send to
                                                                                                                                                 Friend

                                                       Notify
                                                                                                                                 Notify

                                                                            Post                            WAP Site
                                                                                           Send to
                                                                                            Friend
© Copyright 2008 Garrett Murray <info@garrettmurray.net>
   JARGON ALERT: LBS
Location-Based Services, the ability for a
mobile device to provide info relevant to
     its physical location via GPS.
GPS
             TRIANGULATION



© Copyright 2008 Garrett Murray <info@garrettmurray.net>
CONTEXTUAL WEB.
                                                           PREPARE FOR A TRULY




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
3 Cs OF MOBILE WEB
•   Cost
    If you don’t develop your mobile site responsibly, the user could get stuck with
    a big bill in order to view your content.

•   Content
    Issues like navigation, image sizes, page weight and scripts all need to be
    considered when thinking about your site on a mobile device.

•   Context




                                                                                       © Copyright 2008 Garrett Murray <info@garrettmurray.net>
    What does your website add to the user’s mobility? How do you add value to
    their physical context? What is the context in which they will use your site? On
    a bus or train?
© Copyright 2008 Garrett Murray <info@garrettmurray.net>
JARGON ALERT: CONTEXT
 The circumstances that form the setting
  for an event, statement or idea, and in
    terms of which it can be assessed.
© Copyright 2008 Garrett Murray <info@garrettmurray.net>
JARGON ALERT: ONE WEB
   The principal of making the same
 information and services available to
  users regardless of the device used.
MEDIUMS.
                                                       ADAPT TO DIFFERENT




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
© Copyright 2008 Garrett Murray <info@garrettmurray.net>
JARGON ALERT: ONE WEB
   The principal of making the same
 information and services available to
  users regardless of the device used.
OF THE WEB.
                                    WE ARE AT THE
                                   PRECIPICE OF THE
                                   NEXT GENERATION




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
PARTICULAR...
                                                       TWO COMPANIES IN




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
© Copyright 2008 Garrett Murray <info@garrettmurray.net>
© Copyright 2008 Garrett Murray <info@garrettmurray.net>
LET’S NOT FORGET...




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
© Copyright 2008 Garrett Murray <info@garrettmurray.net>
COME.
                         THE IPHONE IS THE
                        SHAPE OF THINGS TO




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
1980   1990   2000   2010



  Basic Phones

Feature Phones

 Smart Phones

       iPhone




                                             © Copyright 2008 Garrett Murray <info@garrettmurray.net>
    MOBILE EVOLUTION
A CONFESSION




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
© Copyright 2008 Garrett Murray <info@garrettmurray.net>
© Copyright 2008 Garrett Murray <info@garrettmurray.net>
WHEN WE TALK ABOUT
 IPHONE, WE’RE REALLY
TALKING ABOUT WEBKIT.




                        © Copyright 2008 Garrett Murray <info@garrettmurray.net>
WEBKIT FEATURES
• Supports all standard flavors of XHTML
• Supports CSS 1, 2 and a good deal of CSS 3
• Javascript, including AJAX and advanced
 scripting
• Replaceable fonts




                                               © Copyright 2008 Garrett Murray <info@garrettmurray.net>
• This means complex layouts, styling and
 interaction...
PLUS, WEBKIT CAN
DISPLAY FULL WEBSITES.
 AS IN, THE REAL WEB.




                         © Copyright 2008 Garrett Murray <info@garrettmurray.net>
WTF?




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
© Copyright 2008 Garrett Murray <info@garrettmurray.net>
JARGON ALERT: ONE WEB
   The principal of making the same
 information and services available to
  users regardless of the device used.
LIMITATIONS
• 10MB download limit
• Javascript execution time limit of 5 seconds for
    each top-level item
•   No Flash
•   No Java




                                                      © Copyright 2008 Garrett Murray <info@garrettmurray.net>
•   No mouse-over, hover, tooltip mouse events
•   No file downloads or uploads!
•   Slower processor, so intensive scripting can be
    laggy or choppy
NOKIA N95



© Copyright 2008 Garrett Murray <info@garrettmurray.net>
ANDROID



© Copyright 2008 Garrett Murray <info@garrettmurray.net>
LOOK FAMILIAR?



© Copyright 2008 Garrett Murray <info@garrettmurray.net>
IPOD TOUCH



© Copyright 2008 Garrett Murray <info@garrettmurray.net>
The iPod touch is an “entirely new
type of iPod,” one that Apple sees
moving the iPod beyond its roots
as a mere media player, becoming
“the first mainstream Wi-Fi mobile
platform.”




                                          © Copyright 2008 Garrett Murray <info@garrettmurray.net>
          —Peter Oppenheimer, Apple CFO
OVER 22 MILLION IPODS SOLD
   IN Q1 OF 2008. OVER 160
MILLION IPODS SOLD IN FEWER
      THAN SIX YEARS.




                              © Copyright 2008 Garrett Murray <info@garrettmurray.net>
COME.
                         THE IPHONE IS THE
                        SHAPE OF THINGS TO




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
A SHORT BREAK




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
DESIGNING DEVELOPING           &
for the FUTURE OF MOBILE




                                   © Copyright 2008 Garrett Murray <info@garrettmurray.net>
Garrett Murray
Web 2.0 Expo — New York
September 16, 2008 — 1A08/10
CONTEXT IS KEY
It really is. I swear. You’ll thank me later, hopefully.




                                                           © Copyright 2008 Garrett Murray <info@garrettmurray.net>
THE SPEED REALITY




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
EDGE
                                                                                        Max Speed




             EDGE
                                                           125 kbps
                                                                                        Actual Average




                                                                             200 kbps




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
3G

                                                           1 mbps
                                                                                   Max Speed




             3G   (HSDPA)
                                                                                   Actual Average




                                                                         14 mbps




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
Max Speed   Actual Average




                                          54 mbps



   WI-FI

           4 mbps




                                                    © Copyright 2008 Garrett Murray <info@garrettmurray.net>
WI-FI via BROADBAND
Actual Average



  WiFi                                              4.00 mbps




    3G               1.00 mbps        25% as fast


  EDGE   0.13 mbps                     3% as fast




                                                                © Copyright 2008 Garrett Murray <info@garrettmurray.net>
SPEEDS, COMPARED
A 300kb FILE: EDGE, 3G & WI-FI




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
EVEN THOUGH WE

                                                  ALWAYS RELY ON IT.
                                                 HAVE WI-FI, WE CAN’T




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
Photo copyright Peter Dean
                            THE SCREEN REALITY




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
DESKTOP-SIZED NYTIMES.COM




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
IPHONE-SIZED NYTIMES.COM




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
NYTIMES.COM ON ANDROID PHONE




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
CONTEXT! (!!!)




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
WHAT’S IMPORTANT HERE?




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
MOBILE NYTIMES.COM




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
iPhone apps that grow on you
                                                                       Leaflets



© Copyright 2008 Garrett Murray <info@garrettmurray.net>
WHY MAKE LEAFLETS?
 • We wanted to showcase the merger of Web 2.0
     with Mobile 2.0
 • The use of web standards and semantics in
     mobile
 •   Designing for the mobile context




                                                       © Copyright 2008 Garrett Murray <info@garrettmurray.net>
 •   Mobile web best practices
 •   Designing specifically for the iPhone/iPod Touch
 •   Rapid and iterative development
A QUICK DEMO




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
i
Note: These are only screenshots. To
      view Leaflets in all its useful glory,
      visit getleaflets.com on your
      iPhone/iPod Touch.




                                              © Copyright 2008 Garrett Murray <info@garrettmurray.net>
HOME SCREEN
•   Simple, iPhone-esque
•   Loading indicator for
    images in case of slow
    network
•   Users know how to use it
    right away because it uses
    metaphors they’re used to




                                 © Copyright 2008 Garrett Murray <info@garrettmurray.net>
SEARCH
•   Send users to mobile
    versions of search results
    where possible
•   Give users as many search
    options in one screen
    without having to reload
•   More than just simple




                                 © Copyright 2008 Garrett Murray <info@garrettmurray.net>
    search (dictionary,
    shopping, et cetera)
FEEDS
•   Simple feed reader (the
    first for the iPhone, BTW)
•   Subscribe, unsubscribe,
    but don’t bother with read
    status
•   Allow users to change
    from two-column to single-




                                  © Copyright 2008 Garrett Murray <info@garrettmurray.net>
    column for readability
•   Read full articles, link to
    websites
NEWSVINE
•   Most of the Newsvine
    content but it loads much
    faster
•   Works much like Feeds,
    allows for single column
    view, full text reading, et
    cetera




                                  © Copyright 2008 Garrett Murray <info@garrettmurray.net>
APP LIST
•   Our version of “the deck,”
    collecting neat iPhone
    sites we liked
•   Users can mark apps as
    “favorites” to access them
    easily in the future
•   Users can rate apps and




                                 © Copyright 2008 Garrett Murray <info@garrettmurray.net>
    comment on them
UPCOMING
•   View your Upcoming
    events, including all
    details
•   View your friends’ events
    as well




                                © Copyright 2008 Garrett Murray <info@garrettmurray.net>
FLICKR
•   See your latest comments,
    your latest photos and
    your friends’ latest photos
•   Much faster than the full
    site, but provides a much
    nicer experience than the
    default mobile Flickr site




                                  © Copyright 2008 Garrett Murray <info@garrettmurray.net>
BASEBALL
•   Nearly real-time updates
    for scores, base positions,
    batters
•   Shows scores for the day’s
    finished games
•   Shows upcoming games
•   Also provides baseball




                                  © Copyright 2008 Garrett Murray <info@garrettmurray.net>
    news
NEW YORK TIMES
•   All the same content, less
    than a tenth of the loading
    time of nytimes.com
•   Styled to look more like
    NY Times’ own site




                                  © Copyright 2008 Garrett Murray <info@garrettmurray.net>
SUCCESSFUL EXPERIMENT
  • Entire application built between WWDC and the
      iPhone launch (~3 weeks)
  •   TechCrunch called it a “must-have iPhone app”
  •   105,000 hits the first week
  •   12,000 unique users the first week




                                                       © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  •   7,000 recurring users per week
  •   Average of 22 pages viewed per visit
  •   Virtually no drop off in traffic in the last year
TAKEAWAYS
• While we designed it for the iPhone, Leaflets
    could work on any capable mobile browser
•   Standards, standards, standards
•   Design for context
•   Optimize for bandwidth




                                                   © Copyright 2008 Garrett Murray <info@garrettmurray.net>
•   Test, then test some more
•   Javascript is crucial to the user experience
•   CSS3 is ideal for mobile development
HTML, CSS & JS
The cause of and solution to all of life’s problems




                                                      © Copyright 2008 Garrett Murray <info@garrettmurray.net>
<div id=quot;appsquot;>
  <ul>
    <li id=quot;navSearchquot;><a href=quot;/search/quot;>Search</a></li>
    <li id=quot;navRSSquot;><a href=quot;/feeds/quot;>Feeds</a></li>
    <li id=quot;navNewsvinequot;><a href=quot;/newsvinequot;>Newsvine</a></li>
    <li id=quot;navLinksquot;><a href=quot;/applist/quot;>App List</a></li>
    <li id=quot;navEventsquot;><a href=quot;/upcoming/quot;>Upcoming</a></li>
    <li id=quot;navFlickrquot;><a href=quot;/flickr/quot;>Flickr</a></li>
    <li id=quot;navDeliciousquot;><a href=quot;/delicious/quot;>del.icio.us</a></li>
    <li id=quot;navBaseballquot;><a href=quot;/scores/quot;>Baseball</a></li>
    <li id=quot;navNYTquot;><a href=quot;/nyt/quot;>NY Times</a></li>
    <?php if ($_user): ?>
      <li id=quot;navSettingsquot;><a href=quot;/user/settings.phpquot;>Settings</a></li>
    <?php endif; ?>
  </ul>
  <div id=quot;loading_statusquot;>
    <img id=quot;loaderquot; src=quot;/media/images/loader.gifquot; border=quot;0quot; alt=quot;quot; /> ¬




                                                                             © Copyright 2008 Garrett Murray <info@garrettmurray.net>
    <span id=quot;ltextquot;>Loading icons...</span>
  </div>
</div>




              HOME ICON XHTML
#apps li {
    float: left;
    width: 56px;
    height: 56px;
    border: 1px hidden #666;
    text-align: center;
    margin: 7px 10px 20px;
    background: #666 url(/media/images/button_glare.png) no-repeat;
    -webkit-box-shadow: 0px 1px 3px black;
    -webkit-border-radius: 10px;
}

#apps li a {
    text-decoration: none;
    color: #999;
    display: block;
    padding-top: 60px;
    font-weight: bold;
    font-size: 0.8em;
}




                                                                      © Copyright 2008 Garrett Murray <info@garrettmurray.net>
li#navNewsvine {
    background: url(/media/images/button_glare.png) no-repeat, ¬
      url(/media/images/home_newsvine_low.png) no-repeat;
    background-color: #005422;
}




               HOME ICON CSS
LAYER YOUR CSS

                                                 SAVE BANDWIDTH.
                                                 WHERE POSSIBLE TO




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
CONTROLS CSS




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
NEWSVINE LEAFLET CSS




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
+
                                                           +
                                                                                                      +
                                                                                          320 bytes
                                                                                                      3 Kilobytes




                                                           -webkit-border-radius: 10px;




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
BUILD YOUR OWN
                                                       MINI-FRAMEWORK.




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
Core layout
                 Base Typography
                 Links and colors


     Navigation                    Headlines
   Common buttons                Image Handling
    Form controls                     Lists




                                                          © Copyright 2008 Garrett Murray <info@garrettmurray.net>
Nav Bar    Buttons      Inputs    Photos   ULs for News




                     YOUR CSS
Core layout
   Base Typography
   Links and colors
        Navigation
      Common buttons
       Form controls
   Photos   Buttons   ULs for News




                                     © Copyright 2008 Garrett Murray <info@garrettmurray.net>
YOUR CSS, STACKED
YOU NEED.
                                                       ONLY USE WHAT




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
SAVE SPACE
• Use ob_start(quot;ob_gzhandlerquot;) for PHP content
• Remove whitespace from HTML and CSS
• Refactor Javascript code to be more efficient and
 then remove unnecessary brackets and semi-
 colons




                                                    © Copyright 2008 Garrett Murray <info@garrettmurray.net>
• Compress images or use CSS where possible
• Cache data on the server for fastest possible
 server-side load times
YOUR IPHONE SITE
                                                       GETTING USERS TO




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
USING MEDIA QUERIES
 • Calling an iPhone stylesheet:
   <link media=quot;only screen and (max-device-width: 480px)quot; ¬
   href=quot;iphone.cssquot; type= quot;text/cssquot; rel=quot;stylesheetquot;>

 • To specify a stylesheet for everything else:
   <link media=quot;screen and (min-device-width: 481px)quot; ¬
   href=quot;other.cssquot; type=quot;text/cssquot; rel=quot;stylesheetquot;/>

 • Do not use:
   <link media=quot;handheldquot;...




                                                               © Copyright 2008 Garrett Murray <info@garrettmurray.net>
 • At least, not for the iPhone—it doesn’t support
   handheld stylesheets.
DEVICE DETECTION
• We used a simple Javascript redirect:
    if (navigator.userAgent.match(/iPhone/i))
    {
      window.location.replace('http://app.getleaflets.com');
    }

•   Or you can use other methods of detection:
    WURFL (http://wurfl.sourceforge.net)
    PHP (http://andymoore.info/php-to-detect-mobile-phones)
    URLs (e.g. m.site.com, site.com/m, site.mobi)




                                                               © Copyright 2008 Garrett Murray <info@garrettmurray.net>
CSS TRANSFORMS




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
Step 1:
     <div id=quot;cardquot; class=quot;cardquot; onclick=quot;flip(event)quot;>
       <div id=quot;frontquot; class=quot;front facequot;>
         <p>♠ ♦<br> ♣ ♥</p>
       </div>
       <div id=quot;backquot; class=quot;back facequot;>
         <p>♦ ♠<br> ♥ ♣</p>
       </div>
     </div>

Step 2:
     function flip (event)
     {
         var element = event.currentTarget;
         /* Toggle the setting of the classname attribute */
         element.className = (element.className == 'card') ? ¬
           'card flipped' : 'card';
     }




                                                                 © Copyright 2008 Garrett Murray <info@garrettmurray.net>
Step 3:
     .card.flipped
     {
         -webkit-transform: rotateY(180deg);
     }




                 SIMPLE CODE
DEMOS




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
(AND SOLUTIONS?)
                                                                              JAVASCRIPT PROBLEMS




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
function gradient(id, start, end, ms)
{
    var speed = Math.round(ms/100);
    var timer = 0;

    if (start > end)
    {
         for (i = start; i >= end; i--)
        {
             setTimeout(quot;set_opacity(quot; + i + quot;,'quot; + id + quot;')quot;, (timer * speed));
             timer++;
        }
    }
    else
    {
         for (i = start; i <= end; i++)
        {
             setTimeout(quot;set_opacity(quot; + i + quot;,'quot; + id + quot;')quot;, (timer * speed));
             timer++;
        }
    }




                                                                                   © Copyright 2008 Garrett Murray <info@garrettmurray.net>
}

function set_opacity(opacity, id)
{
    var object = document.getElementById(id).style;
    object.opacity = (opacity/100);
}



          POTENTIAL CHOKEVILLE
#fader {
      -webkit-transition: opacity 1s ease-out;
  }




                                                 © Copyright 2008 Garrett Murray <info@garrettmurray.net>
POTENTIAL SMOOTHNESS
OBJECTIVELY SPEAKING
  • SproutCore
   In use by Apple, used primarily for non-mobile web applications, utilizes Ruby;
   available at sproutcore.com

  • Cappuccino (aka Objective-J)
   Developed by 280north, attempts to recreate Objective-C (namely Cocoa) in
   Javascript; available at cappuccino.org

  • Fundamentally different ways to build web




                                                                                     © Copyright 2008 Garrett Murray <info@garrettmurray.net>
   applications
  • Closer to native application building
  • Possibility of porting applications to the desktop
import <Foundation/CPObject.j>
import <Foundation/CPURLRequest.j>
import <Foundation/CPJSONPConnection.j>

import   <AppKit/CPSlider.j>
import   <AppKit/CPToolbar.j>
import   <AppKit/CPToolbarItem.j>
import   <AppKit/CPCollectionView.j>


var SliderToolbarItemIdentifier = quot;SliderToolbarItemIdentifierquot;,
    AddToolbarItemIdentifier = quot;AddToolbarItemIdentifierquot;,
    RemoveToolbarItemIdentifier = quot;RemoveToolbarItemIdentifierquot;;

@implementation AppController : CPObject
{
    CPURLConnection         tagConnection;
    CPString                lastIdentifier;
    CPDictionary            photosets;
    CPWindow                theWindow;
    CPCollectionView        listCollectionView;




                                                                      © Copyright 2008 Garrett Murray <info@garrettmurray.net>
    CPCollectionView        photosCollectionView;
}

- (void)applicationDidFinishLaunching:(CPNotification)aNotification
{
    ....




         CAPPUCCINO EXAMPLE
MULTI-TOUCH
Two finger swipes, three finger salutes, shaking fists...




                                                         © Copyright 2008 Garrett Murray <info@garrettmurray.net>
EXPOSED
• iPhone OS 2.0+ exposes several multi-touch
 events to Javascript
• Utilize native-like behavior in your apps
• Combined with CSS Transforms you can make
 powerful animations and interactions with a small
 amount of code




                                                     © Copyright 2008 Garrett Murray <info@garrettmurray.net>
DEMOS




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
A SHORT BREAK




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
DESIGNING DEVELOPING           &
for the FUTURE OF MOBILE




                                   © Copyright 2008 Garrett Murray <info@garrettmurray.net>
Garrett Murray
Web 2.0 Expo — New York
September 16, 2008 — 1A08/10
EASY APPS
Get to work already, will you? We need groceries!




                                                    © Copyright 2008 Garrett Murray <info@garrettmurray.net>
THE QUICKEST WAYS
• Use RSS
  Nearly all sites provide RSS feeds for their primary data and you can grab it,
  skin it and use it

• Re-style your existing site to simplify
  Send iPhone users an iPhone-specific stylesheet that hides unnecessary
  content and restyles your site to fit the iPhone aesthetic

• Build a bare-bones version of your current site




                                                                                   © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  Start fresh and only focus on contextually-relevant sections of your site

• Use Dashcode
  For very simple sites, you might be able to whip up a quickie
RSS IS GREAT!




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
THE BENEFITS
• Very easy to cache
  The feeds are text and have publish dates so you can quickly check them only
  when necessary

• You’ve probably already got the RSS feeds ready
  Nearly all publishing platforms create RSS automatically and it’s usually
  trivial to create additional feeds

• Easy to grab updates




                                                                                 © Copyright 2008 Garrett Murray <info@garrettmurray.net>
• Very easy to re-style since it’s XML
  You’ve got a bunch of typed data ready to be wrangled

• Gives the impression of a full suite of data
  With only the NY Times RSS feed, you can create an app
Step 1:
          <?php
          define('MAGPIE_CACHE_DIR', 'rss_cache');
          require_once('magpierss/rss_fetch.inc');
          $rss = fetch_rss('http://www.nytimes.com/services/xml/ ¬
          rss/nyt/HomePage.xml');
          ?>


Step 2:

          <?php foreach ($rss->items as $item): ?>
              <h2><?= $item['title']; ?></h2>
              <span><?= $item['description']; ?></span>




                                                                     © Copyright 2008 Garrett Murray <info@garrettmurray.net>
          <?php endforeach; ?>




                    MAGPIE RSS
MAGPIE RULES!
• Automatically caches content
  You can tweak how long content is cached for, where, all that good stuff

• Easy to install
  Drag two folders into your app and include a file

• Does all the work for you
  Give it a URL and that’s pretty much it




                                                                                 © Copyright 2008 Garrett Murray <info@garrettmurray.net>
• Free!
  Zero cost to get it up and running, zero maintenance cost other than hosting
i
Secret: We use Magpie for a majority of
        Leaflets. It’s the core technology.

       You can too. Just send me some




                                             © Copyright 2008 Garrett Murray <info@garrettmurray.net>
       money when you’re filthy rich.
iUI
                                                           (AND OTHERS LIKE IT...)




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
FEATURES
• iPhone interface look and feel in a web app
 Native-looking controls, backgrounds, layout

• Simple to implement
 In some cases, doesn’t require much more than adding the kit to your project
 and changing a few lines of code

• Handles orientation changes




                                                                                © Copyright 2008 Garrett Murray <info@garrettmurray.net>
• Can handle off-site links as well, with the same
 animations and feel
• Low overhead
DISADVANTAGES
• Most iUI sites tend to look the same
  If you’ve seen one, you’ve seen them all

• Potential usability issues
  While iUI makes an effort not to break things, depending on implementation
  the experience can suffer

• Should your app look like it was made by Apple?
  Especially when iUI uses the most generic parts of the iPhone interface...




                                                                               © Copyright 2008 Garrett Murray <info@garrettmurray.net>
Things to consider, ponder or ignore.
                                                                                                   OTHER STUFFS




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
WHAT ABOUT ADS?




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
AD NETWORKS
• House ads
    Link from one section to another to drive traffic to content a user might not
    realize they want (especially content relevant... what if a user sees a movie
    listing and then you can give them more content about the movie?)

•   Google AdSense
•   AdMob




                                                                                    © Copyright 2008 Garrett Murray <info@garrettmurray.net>
•   JumpTap
•   Greystripe
•   AppLoop
WHERE DO YOU PUT YOUR ADS?




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
COSTS OF MOBILE?
                                                           CAN YOU JUSTIFY THE




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
DON’T LIMIT
• It might be hard to justify an iPhone-only app for
 your site, but that doesn’t mean you can’t create a
 mobile site that looks nice and works well
• Make an effort to write standards-based code that
 will be backwards compatible
• If you’re going to target other browsers, avoid CSS




                                                        © Copyright 2008 Garrett Murray <info@garrettmurray.net>
 3 and Javascript where possible
• XHTML-MP and Mobile CSS are very modern
 and very powerful, don’t rule them out
EXAMPLES




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
LONELY PLANET




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
SNOOTH




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
FACEBOOK




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
BRIGHT KITE




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
MANIACAL RAGE PODCAST & TV




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
RESOURCES




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
HTTP://DEVELOPER.APPLE.COM/IPHONE




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
HTTP://MOBILEDESIGN.ORG




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
Mobile Web
Developers Guide
Part I: Creating Simple Mobile Sites




                                                    © Copyright 2008 Garrett Murray <info@garrettmurray.net>
BRIAN FLING
with Ronan Cremin, Jo Rabin and D. Keith Robinson




                   HTTP://DEV.MOBI
THIS PRESENTATION WILL BE
AVAILABLE LATER TODAY AT:
http://garrettmurray.net/presentations/web20




                                               © Copyright 2008 Garrett Murray <info@garrettmurray.net>
THANKS FOR COMING
  You’re all my best friends now. For reals.




                                               © Copyright 2008 Garrett Murray <info@garrettmurray.net>
Q&A
                                                           If I don’t know the answer, I’ll lie.




© Copyright 2008 Garrett Murray <info@garrettmurray.net>
Garrett Murray
info@garrettmurray.net
Mobile: +1 347-694-4054
Web: http://garrettmurray.net
Blog: http://maniacalrage.net




                                © Copyright 2008 Garrett Murray <info@garrettmurray.net>

More Related Content

Similar to Designing & Developing for the Future of Mobile

The Wimax Challenge V1.1
The Wimax Challenge V1.1The Wimax Challenge V1.1
The Wimax Challenge V1.1StefanEmunds
 
The Wimax Challenge - Telcograde (quantumwimax.com)
The Wimax Challenge - Telcograde (quantumwimax.com)The Wimax Challenge - Telcograde (quantumwimax.com)
The Wimax Challenge - Telcograde (quantumwimax.com)Ari Zoldan
 
Mobile for the Next Billion - Nigel Waller, Movirtu
Mobile for the Next Billion - Nigel Waller, MovirtuMobile for the Next Billion - Nigel Waller, Movirtu
Mobile for the Next Billion - Nigel Waller, Movirtuguycollender
 
I Phone Dev Summit Lefty 03 07 08
I Phone Dev Summit Lefty 03 07 08I Phone Dev Summit Lefty 03 07 08
I Phone Dev Summit Lefty 03 07 08rajivmordani
 
Thomas Husson the mobile web
Thomas Husson the mobile webThomas Husson the mobile web
Thomas Husson the mobile webDaniel Nüüd
 
I need the data and I need it 1ms ago!
I need the data and I need it 1ms ago!I need the data and I need it 1ms ago!
I need the data and I need it 1ms ago!Angelo Corsaro
 
Location targeting - Putting mobile advertising on the map, Mandeep Mason, Na...
Location targeting - Putting mobile advertising on the map, Mandeep Mason, Na...Location targeting - Putting mobile advertising on the map, Mandeep Mason, Na...
Location targeting - Putting mobile advertising on the map, Mandeep Mason, Na...iMedia UK
 
Zh Tw Introduction To Cloud Computing
Zh Tw Introduction To Cloud ComputingZh Tw Introduction To Cloud Computing
Zh Tw Introduction To Cloud Computingkevin liao
 
How changing mobile and media technologies is changing the way we create inno...
How changing mobile and media technologies is changing the way we create inno...How changing mobile and media technologies is changing the way we create inno...
How changing mobile and media technologies is changing the way we create inno...Osaka University
 
Mobile Marketing For Advertisers
Mobile Marketing For AdvertisersMobile Marketing For Advertisers
Mobile Marketing For AdvertisersTed Mann
 
Camerjam mobile public masterclass openmarket
Camerjam mobile public masterclass openmarketCamerjam mobile public masterclass openmarket
Camerjam mobile public masterclass openmarketJames Cameron
 
The Anywhere Tipping Point
The Anywhere Tipping PointThe Anywhere Tipping Point
The Anywhere Tipping PointYankee Group
 
What do you want to know about "Streaming"!?
What do you want to know about "Streaming"!?What do you want to know about "Streaming"!?
What do you want to know about "Streaming"!?Interact
 
ERAI Risk Mitigation Tools to Address Today’s Complex Global Marketplace - Sn...
ERAI Risk Mitigation Tools to Address Today’s Complex Global Marketplace - Sn...ERAI Risk Mitigation Tools to Address Today’s Complex Global Marketplace - Sn...
ERAI Risk Mitigation Tools to Address Today’s Complex Global Marketplace - Sn...pzulueta
 
Sprint Osdl Carrier/NEP Meeting Oct 2006
Sprint Osdl Carrier/NEP Meeting Oct 2006Sprint Osdl Carrier/NEP Meeting Oct 2006
Sprint Osdl Carrier/NEP Meeting Oct 2006thehereweb
 
ADMA Mobile Presentation 3rd Nov 2008
ADMA Mobile Presentation 3rd Nov 2008ADMA Mobile Presentation 3rd Nov 2008
ADMA Mobile Presentation 3rd Nov 2008Jennifer Wilson
 
Telecom Spam Mathan Session2 08 Dec 06
Telecom Spam Mathan Session2 08 Dec 06Telecom Spam Mathan Session2 08 Dec 06
Telecom Spam Mathan Session2 08 Dec 06SANSEXPERT
 
Change Marketing v01
Change Marketing v01Change Marketing v01
Change Marketing v01Alain Thys
 
State of the (femto) nation
State of the (femto) nationState of the (femto) nation
State of the (femto) nationatiller
 
Leveraging Campaigns to Untangle the Threat Group Ship of Theseus
Leveraging Campaigns to Untangle the Threat Group Ship of TheseusLeveraging Campaigns to Untangle the Threat Group Ship of Theseus
Leveraging Campaigns to Untangle the Threat Group Ship of TheseusAdam Pennington
 

Similar to Designing & Developing for the Future of Mobile (20)

The Wimax Challenge V1.1
The Wimax Challenge V1.1The Wimax Challenge V1.1
The Wimax Challenge V1.1
 
The Wimax Challenge - Telcograde (quantumwimax.com)
The Wimax Challenge - Telcograde (quantumwimax.com)The Wimax Challenge - Telcograde (quantumwimax.com)
The Wimax Challenge - Telcograde (quantumwimax.com)
 
Mobile for the Next Billion - Nigel Waller, Movirtu
Mobile for the Next Billion - Nigel Waller, MovirtuMobile for the Next Billion - Nigel Waller, Movirtu
Mobile for the Next Billion - Nigel Waller, Movirtu
 
I Phone Dev Summit Lefty 03 07 08
I Phone Dev Summit Lefty 03 07 08I Phone Dev Summit Lefty 03 07 08
I Phone Dev Summit Lefty 03 07 08
 
Thomas Husson the mobile web
Thomas Husson the mobile webThomas Husson the mobile web
Thomas Husson the mobile web
 
I need the data and I need it 1ms ago!
I need the data and I need it 1ms ago!I need the data and I need it 1ms ago!
I need the data and I need it 1ms ago!
 
Location targeting - Putting mobile advertising on the map, Mandeep Mason, Na...
Location targeting - Putting mobile advertising on the map, Mandeep Mason, Na...Location targeting - Putting mobile advertising on the map, Mandeep Mason, Na...
Location targeting - Putting mobile advertising on the map, Mandeep Mason, Na...
 
Zh Tw Introduction To Cloud Computing
Zh Tw Introduction To Cloud ComputingZh Tw Introduction To Cloud Computing
Zh Tw Introduction To Cloud Computing
 
How changing mobile and media technologies is changing the way we create inno...
How changing mobile and media technologies is changing the way we create inno...How changing mobile and media technologies is changing the way we create inno...
How changing mobile and media technologies is changing the way we create inno...
 
Mobile Marketing For Advertisers
Mobile Marketing For AdvertisersMobile Marketing For Advertisers
Mobile Marketing For Advertisers
 
Camerjam mobile public masterclass openmarket
Camerjam mobile public masterclass openmarketCamerjam mobile public masterclass openmarket
Camerjam mobile public masterclass openmarket
 
The Anywhere Tipping Point
The Anywhere Tipping PointThe Anywhere Tipping Point
The Anywhere Tipping Point
 
What do you want to know about "Streaming"!?
What do you want to know about "Streaming"!?What do you want to know about "Streaming"!?
What do you want to know about "Streaming"!?
 
ERAI Risk Mitigation Tools to Address Today’s Complex Global Marketplace - Sn...
ERAI Risk Mitigation Tools to Address Today’s Complex Global Marketplace - Sn...ERAI Risk Mitigation Tools to Address Today’s Complex Global Marketplace - Sn...
ERAI Risk Mitigation Tools to Address Today’s Complex Global Marketplace - Sn...
 
Sprint Osdl Carrier/NEP Meeting Oct 2006
Sprint Osdl Carrier/NEP Meeting Oct 2006Sprint Osdl Carrier/NEP Meeting Oct 2006
Sprint Osdl Carrier/NEP Meeting Oct 2006
 
ADMA Mobile Presentation 3rd Nov 2008
ADMA Mobile Presentation 3rd Nov 2008ADMA Mobile Presentation 3rd Nov 2008
ADMA Mobile Presentation 3rd Nov 2008
 
Telecom Spam Mathan Session2 08 Dec 06
Telecom Spam Mathan Session2 08 Dec 06Telecom Spam Mathan Session2 08 Dec 06
Telecom Spam Mathan Session2 08 Dec 06
 
Change Marketing v01
Change Marketing v01Change Marketing v01
Change Marketing v01
 
State of the (femto) nation
State of the (femto) nationState of the (femto) nation
State of the (femto) nation
 
Leveraging Campaigns to Untangle the Threat Group Ship of Theseus
Leveraging Campaigns to Untangle the Threat Group Ship of TheseusLeveraging Campaigns to Untangle the Threat Group Ship of Theseus
Leveraging Campaigns to Untangle the Threat Group Ship of Theseus
 

Recently uploaded

UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 

Recently uploaded (20)

UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 

Designing & Developing for the Future of Mobile

  • 1. DESIGNING DEVELOPING & for the FUTURE OF MOBILE © Copyright 2008 Garrett Murray <info@garrettmurray.net> Garrett Murray Web 2.0 Expo — New York September 16, 2008 — 1A08/10
  • 2. (2.0) WELCOME! © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 3. WHO AM I? • Web & mobile developer since 1998 • Co-creator of Leaflets • Created the OS X application xPad and the open- source Rails application SimpleLog • Clients include Lonely Planet, Big Think, Pfizer © Copyright 2008 Garrett Murray <info@garrettmurray.net> and the United Nations Development Programme • Host of Maniacal Rage TV & Podcast and Qwick Reviews
  • 4. WHO ARE YOU? • How many of you are developers? • How many of you are designers? • How many of you own an iPhone (2.5G or 3G)? • How many of you have created a mobile site for any mobile platform? © Copyright 2008 Garrett Murray <info@garrettmurray.net> • How many have created iPhone-specific sites? • How many of you shouldn’t be here because you’re actually chefs?
  • 5. i Note to self: If more than half the audience raised their hands when you asked that chef question, just close your MacBook and leave. © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 6. (2.0) THE MOBILE WEB © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 7. ACTUALLY... © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 8. (1.0!) THE MOBILE WEB © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 9. IT WAS ROUGH... • We had to deal with a lot of junk! • ARPU, depending on application goals • Operators (Sprint, Verizon, AT&T, et al) • Different languages (Java, C++, BREW) • Poor support for web standards (CSS, XHTML, JS) © Copyright 2008 Garrett Murray <info@garrettmurray.net> • The “Deck” • Handsets (about a bajillion of them)
  • 10. © Copyright 2008 Garrett Murray <info@garrettmurray.net> JARGON ALERT: ARPU Average Revenue Per User, a term used to describe the financial value of a program, application or service.
  • 11. HANDSETS! © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 12. V3m: Open wave 6.2.3.1 THE .2RAZR .3.2 .c.1. 115 penw ave 6 V3: O V3c/i/r: O penwave The epitomy of6Mobile 1.0, This isn’t even HALF OF .2.3.4.c.1.10 and probably the most 9 THE MODELS! prolific device. V3m/V9m: Teleca-Obigo 4.0 1.c.1 .112 Also, the ave 6.2 perfect .3.example © Copyright 2008 Garrett Murray <info@garrettmurray.net> enw .madness™ to V8: Opera 8 of Op V3 x: handset 5 (08.B7.23R) the extreme! (96.80 .53R) xi: Op era 8.0 V3x
  • 13. © Copyright 2008 Garrett Murray <info@garrettmurray.net> Photo copyright Jeremy Plemon
  • 14. (2.0) THE MOBILE WEB © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 15. JUST HOW BIG IS THE MOBILE WEB? © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 16. POPULATION OF THE EARTH Source: Wikipedia CHINA (1.3 billion) USA © Copyright 2008 Garrett Murray <info@garrettmurray.net> (303 million) UK (50 million)
  • 17. MOBILE WEB OF TODAY Sources: GSM Association, T-Mobile, Credit Suisse, Pyramid Research MOBILE USERS © Copyright 2008 Garrett Murray <info@garrettmurray.net> (2.9 billion) MOBILE WEB ACCESS (1.3 billion)
  • 18. MOBILE WEB OF TOMORROW Source: Informa Telecoms & Media 2006 © Copyright 2008 Garrett Murray <info@garrettmurray.net> HALF OF THE PLANET!
  • 19. 7 th MASS MEDIA © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 20. 7 th MASS MEDIA 1. Printing Press 2. Recordings 3. Cinema 4. Radio © Copyright 2008 Garrett Murray <info@garrettmurray.net> 5. Television 6. The Internet 7.Mobile
  • 21. MOBILE IS THE ONLY MASS MEDIA THAT CAN DO EVERYTHING THE © Copyright 2008 Garrett Murray <info@garrettmurray.net> PREVIOUS SIX CAN DO.
  • 22. 5 UNIQUE BENEFITS 1. First truly personal mass media e.g. We don’t share our phones with our spouses 2. First always-on mass media Information is always available 24/7, even when idle 3. First always-carried mass media 7 out of 10 people sleep with their phones within reach © Copyright 2008 Garrett Murray <info@garrettmurray.net> 4. Only mass media with a built-in payment channel Universal click-to-buy—twice as many people have phones than credit cards 5. Offers point of thought Ability to create of consume content whenever the mood strikes
  • 23. © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 24. Join Down Notify load Vote Vote Down load Notify WAP Discuss IVR SMS Buy SMS IVR Notify Send to Friend WAP Bluetooth Radio TV Send to Friend Notify SMS SMS Live Billboard Send to Buy Friend WAP ry Vi to MMS su di al Au Join WAP Site QR Code Word of Print Ad Mouth SMS Notify Kinesthetic Notify SMS © Copyright 2008 Garrett Murray <info@garrettmurray.net> WAP Mobile Events Buy Device Send to Friend QR Code Website MMS Join Notify SMS SMS Email WAP Site MMS WAP Site SMS Send to Friend Send to Friend Notify Notify Post WAP Site Send to Friend
  • 25. © Copyright 2008 Garrett Murray <info@garrettmurray.net> JARGON ALERT: LBS Location-Based Services, the ability for a mobile device to provide info relevant to its physical location via GPS.
  • 26. GPS TRIANGULATION © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 27. CONTEXTUAL WEB. PREPARE FOR A TRULY © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 28. 3 Cs OF MOBILE WEB • Cost If you don’t develop your mobile site responsibly, the user could get stuck with a big bill in order to view your content. • Content Issues like navigation, image sizes, page weight and scripts all need to be considered when thinking about your site on a mobile device. • Context © Copyright 2008 Garrett Murray <info@garrettmurray.net> What does your website add to the user’s mobility? How do you add value to their physical context? What is the context in which they will use your site? On a bus or train?
  • 29. © Copyright 2008 Garrett Murray <info@garrettmurray.net> JARGON ALERT: CONTEXT The circumstances that form the setting for an event, statement or idea, and in terms of which it can be assessed.
  • 30. © Copyright 2008 Garrett Murray <info@garrettmurray.net> JARGON ALERT: ONE WEB The principal of making the same information and services available to users regardless of the device used.
  • 31. MEDIUMS. ADAPT TO DIFFERENT © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 32. © Copyright 2008 Garrett Murray <info@garrettmurray.net> JARGON ALERT: ONE WEB The principal of making the same information and services available to users regardless of the device used.
  • 33. OF THE WEB. WE ARE AT THE PRECIPICE OF THE NEXT GENERATION © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 34. PARTICULAR... TWO COMPANIES IN © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 35. © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 36. © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 37. LET’S NOT FORGET... © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 38. © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 39. COME. THE IPHONE IS THE SHAPE OF THINGS TO © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 40. 1980 1990 2000 2010 Basic Phones Feature Phones Smart Phones iPhone © Copyright 2008 Garrett Murray <info@garrettmurray.net> MOBILE EVOLUTION
  • 41. A CONFESSION © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 42. © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 43. © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 44. WHEN WE TALK ABOUT IPHONE, WE’RE REALLY TALKING ABOUT WEBKIT. © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 45. WEBKIT FEATURES • Supports all standard flavors of XHTML • Supports CSS 1, 2 and a good deal of CSS 3 • Javascript, including AJAX and advanced scripting • Replaceable fonts © Copyright 2008 Garrett Murray <info@garrettmurray.net> • This means complex layouts, styling and interaction...
  • 46. PLUS, WEBKIT CAN DISPLAY FULL WEBSITES. AS IN, THE REAL WEB. © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 47. WTF? © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 48. © Copyright 2008 Garrett Murray <info@garrettmurray.net> JARGON ALERT: ONE WEB The principal of making the same information and services available to users regardless of the device used.
  • 49. LIMITATIONS • 10MB download limit • Javascript execution time limit of 5 seconds for each top-level item • No Flash • No Java © Copyright 2008 Garrett Murray <info@garrettmurray.net> • No mouse-over, hover, tooltip mouse events • No file downloads or uploads! • Slower processor, so intensive scripting can be laggy or choppy
  • 50. NOKIA N95 © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 51. ANDROID © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 52. LOOK FAMILIAR? © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 53. IPOD TOUCH © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 54. The iPod touch is an “entirely new type of iPod,” one that Apple sees moving the iPod beyond its roots as a mere media player, becoming “the first mainstream Wi-Fi mobile platform.” © Copyright 2008 Garrett Murray <info@garrettmurray.net> —Peter Oppenheimer, Apple CFO
  • 55. OVER 22 MILLION IPODS SOLD IN Q1 OF 2008. OVER 160 MILLION IPODS SOLD IN FEWER THAN SIX YEARS. © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 56. COME. THE IPHONE IS THE SHAPE OF THINGS TO © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 57. A SHORT BREAK © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 58. DESIGNING DEVELOPING & for the FUTURE OF MOBILE © Copyright 2008 Garrett Murray <info@garrettmurray.net> Garrett Murray Web 2.0 Expo — New York September 16, 2008 — 1A08/10
  • 59. CONTEXT IS KEY It really is. I swear. You’ll thank me later, hopefully. © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 60. THE SPEED REALITY © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 61. EDGE Max Speed EDGE 125 kbps Actual Average 200 kbps © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 62. 3G 1 mbps Max Speed 3G (HSDPA) Actual Average 14 mbps © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 63. Max Speed Actual Average 54 mbps WI-FI 4 mbps © Copyright 2008 Garrett Murray <info@garrettmurray.net> WI-FI via BROADBAND
  • 64. Actual Average WiFi 4.00 mbps 3G 1.00 mbps 25% as fast EDGE 0.13 mbps 3% as fast © Copyright 2008 Garrett Murray <info@garrettmurray.net> SPEEDS, COMPARED
  • 65. A 300kb FILE: EDGE, 3G & WI-FI © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 66. EVEN THOUGH WE ALWAYS RELY ON IT. HAVE WI-FI, WE CAN’T © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 67. Photo copyright Peter Dean THE SCREEN REALITY © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 68. DESKTOP-SIZED NYTIMES.COM © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 69. IPHONE-SIZED NYTIMES.COM © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 70. NYTIMES.COM ON ANDROID PHONE © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 71. CONTEXT! (!!!) © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 72. WHAT’S IMPORTANT HERE? © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 73. MOBILE NYTIMES.COM © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 74. iPhone apps that grow on you Leaflets © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 75. WHY MAKE LEAFLETS? • We wanted to showcase the merger of Web 2.0 with Mobile 2.0 • The use of web standards and semantics in mobile • Designing for the mobile context © Copyright 2008 Garrett Murray <info@garrettmurray.net> • Mobile web best practices • Designing specifically for the iPhone/iPod Touch • Rapid and iterative development
  • 76. A QUICK DEMO © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 77. i Note: These are only screenshots. To view Leaflets in all its useful glory, visit getleaflets.com on your iPhone/iPod Touch. © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 78. HOME SCREEN • Simple, iPhone-esque • Loading indicator for images in case of slow network • Users know how to use it right away because it uses metaphors they’re used to © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 79. SEARCH • Send users to mobile versions of search results where possible • Give users as many search options in one screen without having to reload • More than just simple © Copyright 2008 Garrett Murray <info@garrettmurray.net> search (dictionary, shopping, et cetera)
  • 80. FEEDS • Simple feed reader (the first for the iPhone, BTW) • Subscribe, unsubscribe, but don’t bother with read status • Allow users to change from two-column to single- © Copyright 2008 Garrett Murray <info@garrettmurray.net> column for readability • Read full articles, link to websites
  • 81. NEWSVINE • Most of the Newsvine content but it loads much faster • Works much like Feeds, allows for single column view, full text reading, et cetera © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 82. APP LIST • Our version of “the deck,” collecting neat iPhone sites we liked • Users can mark apps as “favorites” to access them easily in the future • Users can rate apps and © Copyright 2008 Garrett Murray <info@garrettmurray.net> comment on them
  • 83. UPCOMING • View your Upcoming events, including all details • View your friends’ events as well © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 84. FLICKR • See your latest comments, your latest photos and your friends’ latest photos • Much faster than the full site, but provides a much nicer experience than the default mobile Flickr site © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 85. BASEBALL • Nearly real-time updates for scores, base positions, batters • Shows scores for the day’s finished games • Shows upcoming games • Also provides baseball © Copyright 2008 Garrett Murray <info@garrettmurray.net> news
  • 86. NEW YORK TIMES • All the same content, less than a tenth of the loading time of nytimes.com • Styled to look more like NY Times’ own site © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 87. SUCCESSFUL EXPERIMENT • Entire application built between WWDC and the iPhone launch (~3 weeks) • TechCrunch called it a “must-have iPhone app” • 105,000 hits the first week • 12,000 unique users the first week © Copyright 2008 Garrett Murray <info@garrettmurray.net> • 7,000 recurring users per week • Average of 22 pages viewed per visit • Virtually no drop off in traffic in the last year
  • 88. TAKEAWAYS • While we designed it for the iPhone, Leaflets could work on any capable mobile browser • Standards, standards, standards • Design for context • Optimize for bandwidth © Copyright 2008 Garrett Murray <info@garrettmurray.net> • Test, then test some more • Javascript is crucial to the user experience • CSS3 is ideal for mobile development
  • 89. HTML, CSS & JS The cause of and solution to all of life’s problems © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 90. <div id=quot;appsquot;> <ul> <li id=quot;navSearchquot;><a href=quot;/search/quot;>Search</a></li> <li id=quot;navRSSquot;><a href=quot;/feeds/quot;>Feeds</a></li> <li id=quot;navNewsvinequot;><a href=quot;/newsvinequot;>Newsvine</a></li> <li id=quot;navLinksquot;><a href=quot;/applist/quot;>App List</a></li> <li id=quot;navEventsquot;><a href=quot;/upcoming/quot;>Upcoming</a></li> <li id=quot;navFlickrquot;><a href=quot;/flickr/quot;>Flickr</a></li> <li id=quot;navDeliciousquot;><a href=quot;/delicious/quot;>del.icio.us</a></li> <li id=quot;navBaseballquot;><a href=quot;/scores/quot;>Baseball</a></li> <li id=quot;navNYTquot;><a href=quot;/nyt/quot;>NY Times</a></li> <?php if ($_user): ?> <li id=quot;navSettingsquot;><a href=quot;/user/settings.phpquot;>Settings</a></li> <?php endif; ?> </ul> <div id=quot;loading_statusquot;> <img id=quot;loaderquot; src=quot;/media/images/loader.gifquot; border=quot;0quot; alt=quot;quot; /> ¬ © Copyright 2008 Garrett Murray <info@garrettmurray.net> <span id=quot;ltextquot;>Loading icons...</span> </div> </div> HOME ICON XHTML
  • 91. #apps li { float: left; width: 56px; height: 56px; border: 1px hidden #666; text-align: center; margin: 7px 10px 20px; background: #666 url(/media/images/button_glare.png) no-repeat; -webkit-box-shadow: 0px 1px 3px black; -webkit-border-radius: 10px; } #apps li a { text-decoration: none; color: #999; display: block; padding-top: 60px; font-weight: bold; font-size: 0.8em; } © Copyright 2008 Garrett Murray <info@garrettmurray.net> li#navNewsvine { background: url(/media/images/button_glare.png) no-repeat, ¬ url(/media/images/home_newsvine_low.png) no-repeat; background-color: #005422; } HOME ICON CSS
  • 92. LAYER YOUR CSS SAVE BANDWIDTH. WHERE POSSIBLE TO © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 93. CONTROLS CSS © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 94. NEWSVINE LEAFLET CSS © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 95. + + + 320 bytes 3 Kilobytes -webkit-border-radius: 10px; © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 96. BUILD YOUR OWN MINI-FRAMEWORK. © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 97. Core layout Base Typography Links and colors Navigation Headlines Common buttons Image Handling Form controls Lists © Copyright 2008 Garrett Murray <info@garrettmurray.net> Nav Bar Buttons Inputs Photos ULs for News YOUR CSS
  • 98. Core layout Base Typography Links and colors Navigation Common buttons Form controls Photos Buttons ULs for News © Copyright 2008 Garrett Murray <info@garrettmurray.net> YOUR CSS, STACKED
  • 99. YOU NEED. ONLY USE WHAT © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 100. SAVE SPACE • Use ob_start(quot;ob_gzhandlerquot;) for PHP content • Remove whitespace from HTML and CSS • Refactor Javascript code to be more efficient and then remove unnecessary brackets and semi- colons © Copyright 2008 Garrett Murray <info@garrettmurray.net> • Compress images or use CSS where possible • Cache data on the server for fastest possible server-side load times
  • 101. YOUR IPHONE SITE GETTING USERS TO © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 102. USING MEDIA QUERIES • Calling an iPhone stylesheet: <link media=quot;only screen and (max-device-width: 480px)quot; ¬ href=quot;iphone.cssquot; type= quot;text/cssquot; rel=quot;stylesheetquot;> • To specify a stylesheet for everything else: <link media=quot;screen and (min-device-width: 481px)quot; ¬ href=quot;other.cssquot; type=quot;text/cssquot; rel=quot;stylesheetquot;/> • Do not use: <link media=quot;handheldquot;... © Copyright 2008 Garrett Murray <info@garrettmurray.net> • At least, not for the iPhone—it doesn’t support handheld stylesheets.
  • 103. DEVICE DETECTION • We used a simple Javascript redirect: if (navigator.userAgent.match(/iPhone/i)) { window.location.replace('http://app.getleaflets.com'); } • Or you can use other methods of detection: WURFL (http://wurfl.sourceforge.net) PHP (http://andymoore.info/php-to-detect-mobile-phones) URLs (e.g. m.site.com, site.com/m, site.mobi) © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 104. CSS TRANSFORMS © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 105. Step 1: <div id=quot;cardquot; class=quot;cardquot; onclick=quot;flip(event)quot;> <div id=quot;frontquot; class=quot;front facequot;> <p>♠ ♦<br> ♣ ♥</p> </div> <div id=quot;backquot; class=quot;back facequot;> <p>♦ ♠<br> ♥ ♣</p> </div> </div> Step 2: function flip (event) { var element = event.currentTarget; /* Toggle the setting of the classname attribute */ element.className = (element.className == 'card') ? ¬ 'card flipped' : 'card'; } © Copyright 2008 Garrett Murray <info@garrettmurray.net> Step 3: .card.flipped { -webkit-transform: rotateY(180deg); } SIMPLE CODE
  • 106. DEMOS © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 107. (AND SOLUTIONS?) JAVASCRIPT PROBLEMS © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 108. function gradient(id, start, end, ms) { var speed = Math.round(ms/100); var timer = 0; if (start > end) { for (i = start; i >= end; i--) { setTimeout(quot;set_opacity(quot; + i + quot;,'quot; + id + quot;')quot;, (timer * speed)); timer++; } } else { for (i = start; i <= end; i++) { setTimeout(quot;set_opacity(quot; + i + quot;,'quot; + id + quot;')quot;, (timer * speed)); timer++; } } © Copyright 2008 Garrett Murray <info@garrettmurray.net> } function set_opacity(opacity, id) { var object = document.getElementById(id).style; object.opacity = (opacity/100); } POTENTIAL CHOKEVILLE
  • 109. #fader { -webkit-transition: opacity 1s ease-out; } © Copyright 2008 Garrett Murray <info@garrettmurray.net> POTENTIAL SMOOTHNESS
  • 110. OBJECTIVELY SPEAKING • SproutCore In use by Apple, used primarily for non-mobile web applications, utilizes Ruby; available at sproutcore.com • Cappuccino (aka Objective-J) Developed by 280north, attempts to recreate Objective-C (namely Cocoa) in Javascript; available at cappuccino.org • Fundamentally different ways to build web © Copyright 2008 Garrett Murray <info@garrettmurray.net> applications • Closer to native application building • Possibility of porting applications to the desktop
  • 111. import <Foundation/CPObject.j> import <Foundation/CPURLRequest.j> import <Foundation/CPJSONPConnection.j> import <AppKit/CPSlider.j> import <AppKit/CPToolbar.j> import <AppKit/CPToolbarItem.j> import <AppKit/CPCollectionView.j> var SliderToolbarItemIdentifier = quot;SliderToolbarItemIdentifierquot;, AddToolbarItemIdentifier = quot;AddToolbarItemIdentifierquot;, RemoveToolbarItemIdentifier = quot;RemoveToolbarItemIdentifierquot;; @implementation AppController : CPObject { CPURLConnection tagConnection; CPString lastIdentifier; CPDictionary photosets; CPWindow theWindow; CPCollectionView listCollectionView; © Copyright 2008 Garrett Murray <info@garrettmurray.net> CPCollectionView photosCollectionView; } - (void)applicationDidFinishLaunching:(CPNotification)aNotification { .... CAPPUCCINO EXAMPLE
  • 112. MULTI-TOUCH Two finger swipes, three finger salutes, shaking fists... © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 113. EXPOSED • iPhone OS 2.0+ exposes several multi-touch events to Javascript • Utilize native-like behavior in your apps • Combined with CSS Transforms you can make powerful animations and interactions with a small amount of code © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 114. DEMOS © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 115. A SHORT BREAK © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 116. DESIGNING DEVELOPING & for the FUTURE OF MOBILE © Copyright 2008 Garrett Murray <info@garrettmurray.net> Garrett Murray Web 2.0 Expo — New York September 16, 2008 — 1A08/10
  • 117. EASY APPS Get to work already, will you? We need groceries! © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 118. THE QUICKEST WAYS • Use RSS Nearly all sites provide RSS feeds for their primary data and you can grab it, skin it and use it • Re-style your existing site to simplify Send iPhone users an iPhone-specific stylesheet that hides unnecessary content and restyles your site to fit the iPhone aesthetic • Build a bare-bones version of your current site © Copyright 2008 Garrett Murray <info@garrettmurray.net> Start fresh and only focus on contextually-relevant sections of your site • Use Dashcode For very simple sites, you might be able to whip up a quickie
  • 119. RSS IS GREAT! © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 120. THE BENEFITS • Very easy to cache The feeds are text and have publish dates so you can quickly check them only when necessary • You’ve probably already got the RSS feeds ready Nearly all publishing platforms create RSS automatically and it’s usually trivial to create additional feeds • Easy to grab updates © Copyright 2008 Garrett Murray <info@garrettmurray.net> • Very easy to re-style since it’s XML You’ve got a bunch of typed data ready to be wrangled • Gives the impression of a full suite of data With only the NY Times RSS feed, you can create an app
  • 121. Step 1: <?php define('MAGPIE_CACHE_DIR', 'rss_cache'); require_once('magpierss/rss_fetch.inc'); $rss = fetch_rss('http://www.nytimes.com/services/xml/ ¬ rss/nyt/HomePage.xml'); ?> Step 2: <?php foreach ($rss->items as $item): ?> <h2><?= $item['title']; ?></h2> <span><?= $item['description']; ?></span> © Copyright 2008 Garrett Murray <info@garrettmurray.net> <?php endforeach; ?> MAGPIE RSS
  • 122. MAGPIE RULES! • Automatically caches content You can tweak how long content is cached for, where, all that good stuff • Easy to install Drag two folders into your app and include a file • Does all the work for you Give it a URL and that’s pretty much it © Copyright 2008 Garrett Murray <info@garrettmurray.net> • Free! Zero cost to get it up and running, zero maintenance cost other than hosting
  • 123. i Secret: We use Magpie for a majority of Leaflets. It’s the core technology. You can too. Just send me some © Copyright 2008 Garrett Murray <info@garrettmurray.net> money when you’re filthy rich.
  • 124. iUI (AND OTHERS LIKE IT...) © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 125. FEATURES • iPhone interface look and feel in a web app Native-looking controls, backgrounds, layout • Simple to implement In some cases, doesn’t require much more than adding the kit to your project and changing a few lines of code • Handles orientation changes © Copyright 2008 Garrett Murray <info@garrettmurray.net> • Can handle off-site links as well, with the same animations and feel • Low overhead
  • 126. DISADVANTAGES • Most iUI sites tend to look the same If you’ve seen one, you’ve seen them all • Potential usability issues While iUI makes an effort not to break things, depending on implementation the experience can suffer • Should your app look like it was made by Apple? Especially when iUI uses the most generic parts of the iPhone interface... © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 127. Things to consider, ponder or ignore. OTHER STUFFS © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 128. WHAT ABOUT ADS? © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 129. AD NETWORKS • House ads Link from one section to another to drive traffic to content a user might not realize they want (especially content relevant... what if a user sees a movie listing and then you can give them more content about the movie?) • Google AdSense • AdMob © Copyright 2008 Garrett Murray <info@garrettmurray.net> • JumpTap • Greystripe • AppLoop
  • 130. WHERE DO YOU PUT YOUR ADS? © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 131. COSTS OF MOBILE? CAN YOU JUSTIFY THE © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 132. DON’T LIMIT • It might be hard to justify an iPhone-only app for your site, but that doesn’t mean you can’t create a mobile site that looks nice and works well • Make an effort to write standards-based code that will be backwards compatible • If you’re going to target other browsers, avoid CSS © Copyright 2008 Garrett Murray <info@garrettmurray.net> 3 and Javascript where possible • XHTML-MP and Mobile CSS are very modern and very powerful, don’t rule them out
  • 133. EXAMPLES © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 134. LONELY PLANET © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 135. SNOOTH © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 136. FACEBOOK © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 137. BRIGHT KITE © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 138. MANIACAL RAGE PODCAST & TV © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 139. RESOURCES © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 140. HTTP://DEVELOPER.APPLE.COM/IPHONE © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 141. HTTP://MOBILEDESIGN.ORG © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 142. Mobile Web Developers Guide Part I: Creating Simple Mobile Sites © Copyright 2008 Garrett Murray <info@garrettmurray.net> BRIAN FLING with Ronan Cremin, Jo Rabin and D. Keith Robinson HTTP://DEV.MOBI
  • 143. THIS PRESENTATION WILL BE AVAILABLE LATER TODAY AT: http://garrettmurray.net/presentations/web20 © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 144. THANKS FOR COMING You’re all my best friends now. For reals. © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 145. Q&A If I don’t know the answer, I’ll lie. © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  • 146. Garrett Murray info@garrettmurray.net Mobile: +1 347-694-4054 Web: http://garrettmurray.net Blog: http://maniacalrage.net © Copyright 2008 Garrett Murray <info@garrettmurray.net>