Your SlideShare is downloading. ×
0
DESIGNING DEVELOPING           &
for the FUTURE OF MOBILE




                                   © Copyright 2008 Garrett ...
(2.0)
                                                                   WELCOME!




© Copyright 2008 Garrett Murray <inf...
WHO AM I?
• Web & mobile developer since 1998
• Co-creator of Leaflets
• Created the OS X application xPad and the open-
 s...
WHO ARE YOU?
•   How many of you are developers?
•   How many of you are designers?
•   How many of you own an iPhone (2.5...
i
Note to self: If more than half the audience
              raised their hands when you asked
              that chef que...
(2.0)
                                                                   THE MOBILE WEB




© Copyright 2008 Garrett Murra...
ACTUALLY...




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




© Copyright 2008 Garrett Mur...
IT WAS ROUGH...
•   We had to deal with a lot of junk!
•   ARPU, depending on application goals
•   Operators (Sprint, Ver...
© Copyright 2008 Garrett Murray <info@garrettmurray.net>
JARGON ALERT: ARPU
Average Revenue Per User, a term used
  to des...
HANDSETS!




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

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




© Copyright 2008 Garrett Murra...
JUST HOW BIG IS
                                                       THE MOBILE WEB?




© Copyright 2008 Garrett Murray...
POPULATION OF THE EARTH   Source: Wikipedia




CHINA
  (1.3 billion)


    USA




                                      ...
MOBILE WEB OF TODAY
                  Sources: GSM Association, T-Mobile, Credit Suisse, Pyramid Research




MOBILE
 USER...
MOBILE WEB OF TOMORROW
                 Source: Informa Telecoms & Media 2006




                                        ...
7 th
                                                           MASS
                                                     ...
7   th
           MASS MEDIA

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




                        © Copyright 2...
MOBILE IS THE ONLY
MASS MEDIA THAT CAN
 DO EVERYTHING THE




                       © Copyright 2008 Garrett Murray <info...
5 UNIQUE BENEFITS
1. First truly personal mass media
 e.g. We don’t share our phones with our spouses

2. First always-on ...
© Copyright 2008 Garrett Murray <info@garrettmurray.net>
Join            Down
                                                                             Notify                  ...
© Copyright 2008 Garrett Murray <info@garrettmurray.net>
   JARGON ALERT: LBS
Location-Based Services, the ability for a
m...
GPS
             TRIANGULATION



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




© Copyright 2008 Garret...
3 Cs OF MOBILE WEB
•   Cost
    If you don’t develop your mobile site responsibly, the user could get stuck with
    a big...
© Copyright 2008 Garrett Murray <info@garrettmurray.net>
JARGON ALERT: CONTEXT
 The circumstances that form the setting
  ...
© Copyright 2008 Garrett Murray <info@garrettmurray.net>
JARGON ALERT: ONE WEB
   The principal of making the same
 inform...
MEDIUMS.
                                                       ADAPT TO DIFFERENT




© Copyright 2008 Garrett Murray <in...
© Copyright 2008 Garrett Murray <info@garrettmurray.net>
JARGON ALERT: ONE WEB
   The principal of making the same
 inform...
OF THE WEB.
                                    WE ARE AT THE
                                   PRECIPICE OF THE
        ...
PARTICULAR...
                                                       TWO COMPANIES IN




© Copyright 2008 Garrett Murray ...
© 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 M...
1980   1990   2000   2010



  Basic Phones

Feature Phones

 Smart Phones

       iPhone




                            ...
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...
WEBKIT FEATURES
• Supports all standard flavors of XHTML
• Supports CSS 1, 2 and a good deal of CSS 3
• Javascript, includi...
PLUS, WEBKIT CAN
DISPLAY FULL WEBSITES.
 AS IN, THE REAL WEB.




                         © Copyright 2008 Garrett Murray...
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
 inform...
LIMITATIONS
• 10MB download limit
• Javascript execution time limit of 5 seconds for
    each top-level item
•   No Flash
...
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 pla...
OVER 22 MILLION IPODS SOLD
   IN Q1 OF 2008. OVER 160
MILLION IPODS SOLD IN FEWER
      THAN SIX YEARS.




              ...
COME.
                         THE IPHONE IS THE
                        SHAPE OF THINGS TO




© Copyright 2008 Garrett M...
A SHORT BREAK




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




                                   © Copyright 2008 Garrett ...
CONTEXT IS KEY
It really is. I swear. You’ll thank me later, hopefully.




                                              ...
THE SPEED REALITY




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




             ED...
3G

                                                           1 mbps
                                                    ...
Max Speed   Actual Average




                                          54 mbps



   WI-FI

           4 mbps




      ...
Actual Average



  WiFi                                              4.00 mbps




    3G               1.00 mbps        ...
A 300kb FILE: EDGE, 3G & WI-FI




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

                                                  ALWAYS RELY ON IT.
                                     ...
Photo copyright Peter Dean
                            THE SCREEN REALITY




© Copyright 2008 Garrett Murray <info@garret...
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...
WHY MAKE LEAFLETS?
 • We wanted to showcase the merger of Web 2.0
     with Mobile 2.0
 • The use of web standards and sem...
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
    ...
HOME SCREEN
•   Simple, iPhone-esque
•   Loading indicator for
    images in case of slow
    network
•   Users know how t...
SEARCH
•   Send users to mobile
    versions of search results
    where possible
•   Give users as many search
    option...
FEEDS
•   Simple feed reader (the
    first for the iPhone, BTW)
•   Subscribe, unsubscribe,
    but don’t bother with read...
NEWSVINE
•   Most of the Newsvine
    content but it loads much
    faster
•   Works much like Feeds,
    allows for singl...
APP LIST
•   Our version of “the deck,”
    collecting neat iPhone
    sites we liked
•   Users can mark apps as
    “favo...
UPCOMING
•   View your Upcoming
    events, including all
    details
•   View your friends’ events
    as well




      ...
FLICKR
•   See your latest comments,
    your latest photos and
    your friends’ latest photos
•   Much faster than the f...
BASEBALL
•   Nearly real-time updates
    for scores, base positions,
    batters
•   Shows scores for the day’s
    finish...
NEW YORK TIMES
•   All the same content, less
    than a tenth of the loading
    time of nytimes.com
•   Styled to look m...
SUCCESSFUL EXPERIMENT
  • Entire application built between WWDC and the
      iPhone launch (~3 weeks)
  •   TechCrunch ca...
TAKEAWAYS
• While we designed it for the iPhone, Leaflets
    could work on any capable mobile browser
•   Standards, stand...
HTML, CSS & JS
The cause of and solution to all of life’s problems




                                                   ...
<div id=quot;appsquot;>
  <ul>
    <li id=quot;navSearchquot;><a href=quot;/search/quot;>Search</a></li>
    <li id=quot;n...
#apps li {
    float: left;
    width: 56px;
    height: 56px;
    border: 1px hidden #666;
    text-align: center;
    ma...
LAYER YOUR CSS

                                                 SAVE BANDWIDTH.
                                         ...
CONTROLS CSS




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




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




© Copyright 2008 Garrett Murray ...
Core layout
                 Base Typography
                 Links and colors


     Navigation                    Headli...
Core layout
   Base Typography
   Links and colors
        Navigation
      Common buttons
       Form controls
   Photos ...
YOU NEED.
                                                       ONLY USE WHAT




© Copyright 2008 Garrett Murray <info@g...
SAVE SPACE
• Use ob_start(quot;ob_gzhandlerquot;) for PHP content
• Remove whitespace from HTML and CSS
• Refactor Javascr...
YOUR IPHONE SITE
                                                       GETTING USERS TO




© Copyright 2008 Garrett Murr...
USING MEDIA QUERIES
 • Calling an iPhone stylesheet:
   <link media=quot;only screen and (max-device-width: 480px)quot; ¬
...
DEVICE DETECTION
• We used a simple Javascript redirect:
    if (navigator.userAgent.match(/iPhone/i))
    {
      window....
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; cla...
DEMOS




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




© C...
function gradient(id, start, end, ms)
{
    var speed = Math.round(ms/100);
    var timer = 0;

    if (start > end)
    {...
#fader {
      -webkit-transition: opacity 1s ease-out;
  }




                                                 © Copyrig...
OBJECTIVELY SPEAKING
  • SproutCore
   In use by Apple, used primarily for non-mobile web applications, utilizes Ruby;
   ...
import <Foundation/CPObject.j>
import <Foundation/CPURLRequest.j>
import <Foundation/CPJSONPConnection.j>

import   <AppKi...
MULTI-TOUCH
Two finger swipes, three finger salutes, shaking fists...




                                                   ...
EXPOSED
• iPhone OS 2.0+ exposes several multi-touch
 events to Javascript
• Utilize native-like behavior in your apps
• C...
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 ...
EASY APPS
Get to work already, will you? We need groceries!




                                                    © Copy...
THE QUICKEST WAYS
• Use RSS
  Nearly all sites provide RSS feeds for their primary data and you can grab it,
  skin it and...
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 ne...
Step 1:
          <?php
          define('MAGPIE_CACHE_DIR', 'rss_cache');
          require_once('magpierss/rss_fetch.inc...
MAGPIE RULES!
• Automatically caches content
  You can tweak how long content is cached for, where, all that good stuff

• ...
i
Secret: We use Magpie for a majority of
        Leaflets. It’s the core technology.

       You can too. Just send me som...
iUI
                                                           (AND OTHERS LIKE IT...)




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

• Simple to implemen...
DISADVANTAGES
• Most iUI sites tend to look the same
  If you’ve seen one, you’ve seen them all

• Potential usability iss...
Things to consider, ponder or ignore.
                                                                                    ...
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 w...
WHERE DO YOU PUT YOUR ADS?




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




© Copyright 2008 Garre...
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
 mob...
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




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




                     ...
THANKS FOR COMING
  You’re all my best friends now. For reals.




                                               © Copyri...
Q&A
                                                           If I don’t know the answer, I’ll lie.




© Copyright 2008 ...
Garrett Murray
info@garrettmurray.net
Mobile: +1 347-694-4054
Web: http://garrettmurray.net
Blog: http://maniacalrage.net
...
Upcoming SlideShare
Loading in...5
×

Designing & Developing for the Future of Mobile

4,385

Published on

Garrett Murray's workshop from Web 2.0 in NYC: The future of the mobile Web is here: WebKit. This premiere mobile browser is appearing in more and more devices and allows for amazingly detailed, fully functional mobile web sites. Come hear real-world advice, tricks, and strategies for designing and developing contextually relevant, beautiful, and fast-loading mobile sites.

Published in: Technology, Business
3 Comments
32 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,385
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
763
Comments
3
Likes
32
Embeds 0
No embeds

No notes for slide

Transcript of "Designing & Developing for the Future of Mobile"

  1. 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. (2.0) WELCOME! © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  3. 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. 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. 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. 6. (2.0) THE MOBILE WEB © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  7. 7. ACTUALLY... © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  8. 8. (1.0!) THE MOBILE WEB © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  9. 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. 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. 11. HANDSETS! © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  12. 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. 13. © Copyright 2008 Garrett Murray <info@garrettmurray.net> Photo copyright Jeremy Plemon
  14. 14. (2.0) THE MOBILE WEB © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  15. 15. JUST HOW BIG IS THE MOBILE WEB? © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  16. 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. 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. 18. MOBILE WEB OF TOMORROW Source: Informa Telecoms & Media 2006 © Copyright 2008 Garrett Murray <info@garrettmurray.net> HALF OF THE PLANET!
  19. 19. 7 th MASS MEDIA © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  20. 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. 21. MOBILE IS THE ONLY MASS MEDIA THAT CAN DO EVERYTHING THE © Copyright 2008 Garrett Murray <info@garrettmurray.net> PREVIOUS SIX CAN DO.
  22. 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. 23. © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  24. 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. 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. 26. GPS TRIANGULATION © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  27. 27. CONTEXTUAL WEB. PREPARE FOR A TRULY © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  28. 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. 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. 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. 31. MEDIUMS. ADAPT TO DIFFERENT © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  32. 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. 33. OF THE WEB. WE ARE AT THE PRECIPICE OF THE NEXT GENERATION © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  34. 34. PARTICULAR... TWO COMPANIES IN © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  35. 35. © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  36. 36. © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  37. 37. LET’S NOT FORGET... © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  38. 38. © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  39. 39. COME. THE IPHONE IS THE SHAPE OF THINGS TO © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  40. 40. 1980 1990 2000 2010 Basic Phones Feature Phones Smart Phones iPhone © Copyright 2008 Garrett Murray <info@garrettmurray.net> MOBILE EVOLUTION
  41. 41. A CONFESSION © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  42. 42. © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  43. 43. © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  44. 44. WHEN WE TALK ABOUT IPHONE, WE’RE REALLY TALKING ABOUT WEBKIT. © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  45. 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. 46. PLUS, WEBKIT CAN DISPLAY FULL WEBSITES. AS IN, THE REAL WEB. © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  47. 47. WTF? © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  48. 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. 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. 50. NOKIA N95 © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  51. 51. ANDROID © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  52. 52. LOOK FAMILIAR? © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  53. 53. IPOD TOUCH © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  54. 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. 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. 56. COME. THE IPHONE IS THE SHAPE OF THINGS TO © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  57. 57. A SHORT BREAK © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  58. 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. 59. CONTEXT IS KEY It really is. I swear. You’ll thank me later, hopefully. © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  60. 60. THE SPEED REALITY © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  61. 61. EDGE Max Speed EDGE 125 kbps Actual Average 200 kbps © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  62. 62. 3G 1 mbps Max Speed 3G (HSDPA) Actual Average 14 mbps © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  63. 63. Max Speed Actual Average 54 mbps WI-FI 4 mbps © Copyright 2008 Garrett Murray <info@garrettmurray.net> WI-FI via BROADBAND
  64. 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. 65. A 300kb FILE: EDGE, 3G & WI-FI © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  66. 66. EVEN THOUGH WE ALWAYS RELY ON IT. HAVE WI-FI, WE CAN’T © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  67. 67. Photo copyright Peter Dean THE SCREEN REALITY © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  68. 68. DESKTOP-SIZED NYTIMES.COM © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  69. 69. IPHONE-SIZED NYTIMES.COM © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  70. 70. NYTIMES.COM ON ANDROID PHONE © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  71. 71. CONTEXT! (!!!) © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  72. 72. WHAT’S IMPORTANT HERE? © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  73. 73. MOBILE NYTIMES.COM © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  74. 74. iPhone apps that grow on you Leaflets © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  75. 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. 76. A QUICK DEMO © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  77. 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. 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. 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. 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. 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. 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. 83. UPCOMING • View your Upcoming events, including all details • View your friends’ events as well © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  84. 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. 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. 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. 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. 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. 89. HTML, CSS & JS The cause of and solution to all of life’s problems © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  90. 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. 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. 92. LAYER YOUR CSS SAVE BANDWIDTH. WHERE POSSIBLE TO © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  93. 93. CONTROLS CSS © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  94. 94. NEWSVINE LEAFLET CSS © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  95. 95. + + + 320 bytes 3 Kilobytes -webkit-border-radius: 10px; © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  96. 96. BUILD YOUR OWN MINI-FRAMEWORK. © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  97. 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. 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. 99. YOU NEED. ONLY USE WHAT © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  100. 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. 101. YOUR IPHONE SITE GETTING USERS TO © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  102. 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. 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. 104. CSS TRANSFORMS © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  105. 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. 106. DEMOS © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  107. 107. (AND SOLUTIONS?) JAVASCRIPT PROBLEMS © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  108. 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. 109. #fader { -webkit-transition: opacity 1s ease-out; } © Copyright 2008 Garrett Murray <info@garrettmurray.net> POTENTIAL SMOOTHNESS
  110. 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. 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. 112. MULTI-TOUCH Two finger swipes, three finger salutes, shaking fists... © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  113. 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. 114. DEMOS © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  115. 115. A SHORT BREAK © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  116. 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. 117. EASY APPS Get to work already, will you? We need groceries! © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  118. 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. 119. RSS IS GREAT! © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  120. 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. 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. 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. 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. 124. iUI (AND OTHERS LIKE IT...) © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  125. 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. 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. 127. Things to consider, ponder or ignore. OTHER STUFFS © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  128. 128. WHAT ABOUT ADS? © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  129. 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. 130. WHERE DO YOU PUT YOUR ADS? © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  131. 131. COSTS OF MOBILE? CAN YOU JUSTIFY THE © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  132. 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. 133. EXAMPLES © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  134. 134. LONELY PLANET © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  135. 135. SNOOTH © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  136. 136. FACEBOOK © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  137. 137. BRIGHT KITE © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  138. 138. MANIACAL RAGE PODCAST & TV © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  139. 139. RESOURCES © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  140. 140. HTTP://DEVELOPER.APPLE.COM/IPHONE © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  141. 141. HTTP://MOBILEDESIGN.ORG © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  142. 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. 143. THIS PRESENTATION WILL BE AVAILABLE LATER TODAY AT: http://garrettmurray.net/presentations/web20 © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  144. 144. THANKS FOR COMING You’re all my best friends now. For reals. © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  145. 145. Q&A If I don’t know the answer, I’ll lie. © Copyright 2008 Garrett Murray <info@garrettmurray.net>
  146. 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>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×