Scribd Logo
Upload

Welcome to Scribd!

  • Mobile Web Design

    Uploaded by

    dewiniii
    28 views78 pages
    Mobile Web Design webinar presented by W3C to the web community as part of an EU IST project (3GWeb) the content of this webinar does not necessarily represent the official position of the W3C. "Designers face a proliferation of capabilities that make the early [Mobile] web look like a playground"

    Original Description:

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Mobile Web Design webinar presented by W3C to the web community as part of an EU IST project (3GWeb) the content of this webinar does not necessarily represent the official position of the W3C. "Designers face a proliferation of capabilities that make the early [Mobile] web look like a playground"

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    28 views78 pages

    Mobile Web Design

    Uploaded by

    dewiniii
    Mobile Web Design webinar presented by W3C to the web community as part of an EU IST project (3GWeb) the content of this webinar does not necessarily represent the official position of the W3C. "Designers face a proliferation of capabilities that make the early [Mobile] web look like a playground"

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 78

    Mobile Web Design

    This webinar is presented by W3C to the Web community as part of an EU


    IST project (3GWeb). The content of this webinar does not necessarily
    represent the official position of the W3C, or the position of any of
    the W3C members or W3C’s host institutions.

    (Lawyer says ‘Hi’!)

    2 © MMVI Cameron Moll. This document is available under the W3C Document License.
    You are...

    Experienced with XHTML/CSS.


    Familiar with good markup techniques.
    Unsure about this “mobile web thing”.

    3 © MMVI Cameron Moll. This document is available under the W3C Document License.
    Legacy
    1910

    5 © MMVI Cameron Moll. This document is available under the W3C Document License.
    “Pocket watches provide the closest
    historical parallel to the remarkable
    rise of the mobile phone.”

    —Jon Agar, Constant Touch

    6 © MMVI Cameron Moll. This document is available under the W3C Document License.
    Staggering Numbers

    1996 GSM phones in 103 countries

    2000 10 million i-mode users (Japan)

    2002 1 billion mobile phone users worldwide

    2009 3 billion mobile phone users worldwide

    7 © MMVI Cameron Moll. This document is available under the W3C Document License.
    UK More mobile phones than humans...

    8 © MMVI Cameron Moll. This document is available under the W3C Document License.
    Quandary
    Reader Poll
    Highly scientific, statistically significant

    (not really!)

    10 © MMVI Cameron Moll. This document is available under the W3C Document License.
    ~400 Participants

    159 Unique handsets


    (Motorola RAZR, Palm Treo 650, Sony Ericsson K750i / K700i / T610, Nokia 6230...)

    19 Manufacturers

    44 Countries

    11 © MMVI Cameron Moll. This document is available under the W3C Document License.
    “Designers face a proliferation of
    capabilities that make the early
    [Mobile] Web look like a playground.”

    —Joe Shepter, “The Pulse of Modern Design”

    12 © MMVI Cameron Moll. This document is available under the W3C Document License.
    Mobile Web “Playground”

    WML, XHTML, -MP, -Basic...


    Plethora of user agents
    Varying coding practices, URIs, etc.

    13 © MMVI Cameron Moll. This document is available under the W3C Document License.
    What is the Mobile Web?

    14 © MMVI Cameron Moll. This document is available under the W3C Document License.
    ?
    Optimism

    More mobiles than PCs.


    More mobiles than landline phones.
    Web usage is continually increasing.
    You can utilize existing skills.

    16 © MMVI Cameron Moll. This document is available under the W3C Document License.
    Context
    18 © MMVI Cameron Moll. This document is available under the W3C Document License.
    Noooo!

    19 © MMVI Cameron Moll. This document is available under the W3C Document License.
    Instead... What is contextually relevant?

    20 © MMVI Cameron Moll. This document is available under the W3C Document License.
    21 © MMVI Cameron Moll. This document is available under the W3C Document License.
    Mobile = Mobility

    22 © MMVI Cameron Moll. This document is available under the W3C Document License.
    Design = Communication

    23 © MMVI Cameron Moll. This document is available under the W3C Document License.
    Therefore, mobile design is the art of
    communicating within an
    environment of mobility.

    24 © MMVI Cameron Moll. This document is available under the W3C Document License.
    Fundamentals
    Most devices sold today are WAP 2.0.

    26 © MMVI Cameron Moll. This document is available under the W3C Document License.
    XHTML, not WML.

    27 © MMVI Cameron Moll. This document is available under the W3C Document License.
    What that means...

    28 © MMVI Cameron Moll. This document is available under the W3C Document License.
    english360.com
    english360.com
    english360.com/mobile (powered by MovableType)
    However,

    32 © MMVI Cameron Moll. This document is available under the W3C Document License.
    XHTML/CSS support is inconsistent.*

    * highly

    33 © MMVI Cameron Moll. This document is available under the W3C Document License.
    Markup Test Pages
    cameronmoll.com/mobile

    34 © MMVI Cameron Moll. This document is available under the W3C Document License.
    35 © MMVI Cameron Moll. This document is available under the W3C Document License.
    36 © MMVI Cameron Moll. This document is available under the W3C Document License.
    37 © MMVI Cameron Moll. This document is available under the W3C Document License.
    38 © MMVI Cameron Moll. This document is available under the W3C Document License.
    39 © MMVI Cameron Moll. This document is available under the W3C Document License.
    Test on target devices, not emulators.

    40 © MMVI Cameron Moll. This document is available under the W3C Document License.
    Methodology
    Method

    Do nothing.

    42 © MMVI Cameron Moll. This document is available under the W3C Document License.
    31 kb (markup only)
    Method

    Do nothing.
    Strip images and styling.

    44 © MMVI Cameron Moll. This document is available under the W3C Document License.
    Method

    Do nothing.
    Strip images and styling.
    Handheld stylesheets.

    45 © MMVI Cameron Moll. This document is available under the W3C Document License.
    Method

    Do nothing.
    Strip images and styling.
    Handheld stylesheets.
    Mobile-specific site/app.

    46 © MMVI Cameron Moll. This document is available under the W3C Document License.
    47 © MMVI Cameron Moll. This document is available under the W3C Document License.
    Miniaturize or Mobilize?

    48 © MMVI Cameron Moll. This document is available under the W3C Document License.
    Miniaturize
    Repurpose existing content

    49 © MMVI Cameron Moll. This document is available under the W3C Document License.
    craigslist.org
    craigslist screen grab

    51 © MMVI Cameron Moll. This document is available under the W3C Document License.
    Primary Use Cases

    Choose area (city)


    Browse category
    Post a listing
    Search
    Event Calendar
    Forums

    52 © MMVI Cameron Moll. This document is available under the W3C Document License.
    Use Case Hiearchy

    1. Search Top element

    2. Categories Most frequented

    3. Event calendar Access to today, tomorrow

    4. Choose area By zip code or city name


    Assume San Francisco by default

    53 © MMVI Cameron Moll. This document is available under the W3C Document License.
    Search
    Text or numeric

    Categories
    Most frequented

    City
    Zip or name; would offer
    suggestions if not found
    Opera Mini
    Mobilize
    Content-, Context-, Component-specific

    57 © MMVI Cameron Moll. This document is available under the W3C Document License.
    58 © MMVI Cameron Moll. This document is available under the W3C Document License.
    LBS

    59 © MMVI Cameron Moll. This document is available under the W3C Document License.
    Forces
    SMS Texting; SMS search

    J2ME Java-based apps, interactivity

    AJAX Javascript, XML

    SVG SVG Tiny; scalable vector graphics

    LBS Location-based services; GPS

    61 © MMVI Cameron Moll. This document is available under the W3C Document License.
    “ The mobile device has the potential to
    act as a significant reporter of data
    rather than a mere consumer of data.”

    —Joe Shepter, “The Pulse of Modern Design”

    62 © MMVI Cameron Moll. This document is available under the W3C Document License.
    63 © MMVI Cameron Moll. This document is available under the W3C Document License.
    Device Detection
    “Sniff out” user agent strings for individual devices

    64 © MMVI Cameron Moll. This document is available under the W3C Document License.
    User Agents
    Proprietary vs. Cross-platform?
    Beyond mobile phones?

    65 © MMVI Cameron Moll. This document is available under the W3C Document License.
    http://www.tinyurl.com/l2lst

    66 © MMVI Cameron Moll. This document is available under the W3C Document License.
    Best Practices
    ...and even “standards”?

    67 © MMVI Cameron Moll. This document is available under the W3C Document License.
    Mobile Web Initiative

    W3C chartered
    Input by mobile developers, companies
    Best Practices

    68 © MMVI Cameron Moll. This document is available under the W3C Document License.
    Sample Guidelines

    Use valid markup.


    Use tables only if supported by target device.
    Use text equivalents for non-text elements.

    http://www.w3.org/TR/mobile-bp/

    69 © MMVI Cameron Moll. This document is available under the W3C Document License.
    Also...

    mobileOK ...remember these?

    http://tinyurl.com/gzdrb

    Best Practices Checker


    http://tinyurl.com/jsrkn

    70 © MMVI Cameron Moll. This document is available under the W3C Document License.
    Ideology
    A mobile web that is
    desirable, dependable, disciplined.

    72 © MMVI Cameron Moll. This document is available under the W3C Document License.
    An array of thought leaders.

    73 © MMVI Cameron Moll. This document is available under the W3C Document License.
    User agent consistency.

    74 © MMVI Cameron Moll. This document is available under the W3C Document License.
    Mobile device wiki.

    75 © MMVI Cameron Moll. This document is available under the W3C Document License.
    ...and?

    76 © MMVI Cameron Moll. This document is available under the W3C Document License.
    Questions?
    cameronmoll.com
    email@cameronmoll.com
    801.644.8793

    You might also like