the mobile web n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
The Mobile Web PowerPoint Presentation
Download Presentation
The Mobile Web

Loading in 2 Seconds...

play fullscreen
1 / 67

The Mobile Web - PowerPoint PPT Presentation


  • 66 Views
  • Uploaded on

The Mobile Web. Catching Up With Our Clients. Panelists. David Bonebrake, LSNTAP Hugh Calkins, Pine Tree Legal Assistance Kathleen Caldwell, Pine Tree Legal Assistance Dave Mallon, iKnow Web Design. Today’s Training. Why Mobile Matters Making Sense of Mobile PTLA Project.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'The Mobile Web' - adah


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
the mobile web

The Mobile Web

Catching Up With Our Clients

panelists
Panelists
  • David Bonebrake, LSNTAP
  • Hugh Calkins, Pine Tree Legal Assistance
  • Kathleen Caldwell, Pine Tree Legal Assistance
  • Dave Mallon, iKnow Web Design
today s training
Today’s Training
  • Why Mobile Matters
  • Making Sense of Mobile
  • PTLA Project
mobile matters because
Mobile matters because:

1. People (including your clients) are using it.

2. It’s only getting bigger.

all of these phones can access the mobile web

All of these phones can access the mobile web

(The challenge is creating a quality user experience)

slide8

As of July 2009, how many Americans were actively using the mobile web?

*Active = accessing it at least monthly.

slide10
.

.

improved hardware
Improved Hardware

As processor speeds increase and full graphics systems get embedded onto single chips, phones will soon be able to embody a PC experience as soon as they get near a flat screen TV and a keyboard.

-Steve Rubel

http://www.steverubel.com/the-apple-tablet-and-chrome-os-are-meaningles

improved software
Improved Software
  • The mobile browser landscape is an absolute mess, but it’s improving
  • Going forward, most new touch phones will use a WebKit-based browser. That’s good.
why the mobile web matters
Why the mobile web matters
  • Surprising high mobile usage – and it’s increasing rapidly.
  • Early adopters of mobile technology do not fit the typical early-adopter profile: users are younger and are people of color. 
  • Devices, browsers, and connections are improving
the mobile ecosystem phones
The Mobile Ecosystem - Phones

Feature PhonesSmartphones Touch Phones

the mobile ecosystem carriers and networks
The Mobile Ecosystem: Carriers and Networks
  • Carriers provide mobile services and maintain networks. They provide customers contracts or prepaid plans.
  • Networks carry wireless signals.
    • Different generations of networks: 2G, 3G, and 4G
the mobile ecosystem platforms and operating systems
The Mobile Ecosystem: Platforms and Operating Systems
  • Platforms: Java ME, Blackberry, iPhone, and Android.
  • Operating Systems: Mac OS X, Android, Symbian and Windows Mobile
the mobile ecosystem medium types
The Mobile Ecosystem: Medium Types
  • SMS
  • Mobile Websites
  • Mobile Web Applications
  • Native Applications
benefits of mobile
Benefits of Mobile
  • Personal to the user
  • Capable of sending and receiving information at all times
  • Goes everywhere
challenges of mobile
Challenges of Mobile

Mobile Devices:

-Have tiny displays

-Utilize poor browsers

-Suffer from flaky connections

most important principle in mobile
Most important principle in mobile:
  • Adapt to the mobile context - don’t just repurpose your existing site.
slide36

…to here.

  • Think small
  • We eliminated:
  • graphics
  • fillable forms and .pdf’s
  • all long pages that require a lot of scrolling
  • most videos
  • left-hand navigation
prioritizing mobile content
Prioritizing mobile content
  • Again, eliminate all long, complicated content
  • Then, think about the kinds of information mobile users might be browsing for (e.g. baseball scores, flight schedule updates).
  • What is our equivalent?
slide41

Eliminate left-hand navigation

  • cut text to ¼ of original length (or less); retain only most essential information
  • move phone link to top of abbreviated page
  • convert all phone numbers into links
prioritizing existing content
Prioritizing existing content
  • Choose content that is already brief or that can be easily edited down
  • Choose content that a mobile user would be more likely to be looking for on mobile device, rather than on a desktop browser
new content
New content

Same questions:

  • What kinds of information might people being looking for on their mobile devices?
  • What topics can we address reasonably well in a small space?
  • How to distill messages down?
  • What formatting to use to avoid too much scrolling?
slide51

Starting with Maine Attorney

  • General’s Consumer Guide on “Your
  • Rights When Buying a Used Vehicle”
  • a very dense 22 page .pdf –
  • we came up with 8 basic tips that a buyer could easily skim while at the used car lot:
  • contact the prior owner
  • have a mechanic you trust check the car, etc.
evaluation and testing
Evaluation and testing
  • Yes, it’s annoying but LSC says you have to do it.
  • You’re getting toward the finish line and you’ve had it up to HERE with this project.
  • Put some thought and effort into it, anyway.
what we learned from our testers
What we learned from our testers
  • iPhones were doing a really funny thing with our phone # links.
  • Some phones weren’t recognizing characters like é and ñ
  • Although we had loaded things up with phone links, they wanted more.
  • We could test a lot of devices efficiently, at the same time, and compare results.
slide56

The Right Tools For The Job

  • Notepad or the editor of your choice
  • Firefox (with addons)
    • Firebug
    • Useragent Switcher
  • Mobile emulators
    • Opera mini
    • Ready.mobi
  • Real devices
slide57

Firebugaddons.mozilla.org

  • Inspect and edit HTML elements
  • Edit CSS and see effects instantly
  • Detailed error reporting
useragent switcher addons mozilla org
UserAgent Switcheraddons.mozilla.org

Openwave user agent

  • Default user agent
slide59

CODING

  • XHTML-MP (mobile profile)
  • XHTML is a stricter version of HTML
    • All tags must be closed
      • This is correct <br />
      • This is not <br>
    • Attribute values quoted
      • <p class=”foo”></p>
    • Case sensitive
      • Correct <p></p>
      • Incorrect <P></P>
    • Must include XML declaration and doctype
slide60

XHTML-MP sample

  • <?xml version="1.0" encoding="UTF-8"?>
  • <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
  • <html xmlns="http://www.w3.org/1999/xhtml">
  • <head>
  • <title>Your Title</title>
  • <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
  • </head>
  • <body>
  • <p>Hello World!</p>
  • </body>
  • </html>
slide61

Keep It Simple

    • Use markup to indicate structure - headings and lists
    • No floats or absolute positioning
    • Use percentages and em units for dimensions
    • Keep margins and padding to a minimum
    • Stylesheet support varies. Make sure your site is presentable without styles.
    • Images should be small and lightweight
    • Do not rely on JavaScript. Support varies.
slide62

Device Detection

    • Identify visitors by device typeIphone, Nokia, Opera Mini, Vodafone, Android, PalmOS, Kindle, Up.Link, Symbian, SymbianOS, MIDP, NetFront,, AvantGo, Windows CE, PIE, BlackBerry
    • Re-direct to mobile site
    • Detection takes place on the server
    • Useragent string: (Openwave)OPWV-SDK/62 UP.Browser/6.2.2.1.208 (GUI) MMP/2.0
    • Zope example<dtml-let target="'http://ptla.org/mobile'"><dtml-if "_.string.find(HTTP_USER_AGENT, 'UP.Browser') != -1"> <dtml-call expr="RESPONSE.redirect(target)"><dtml-elif "_.string.find(HTTP_USER_AGENT, 'Nokia') != -1"> <dtml-call expr="RESPONSE.redirect(target)"> </dtml-if>
slide63

VIDEO

  • Use audio and video to deliver more complex content.
  • Limitations of devices
  • On-screen text may be hard to read
  • Keep file sizes small
  • Mostly useful for smartphones
slide64

SOME THINGS WE LEARNED

  • Telephone links<a href=”tel:+12077748211”>774-8211</a>
  • Unicode limitationsCharacter set often limited by geographic region
  • Keep content scrolling to a minimum
  • Difficulty in linking to external sources
  • Test, test, test
additional resources
Additional Resources
  • mobiReady: http://ready.mobi/
  • LSNTAP Mobile Web Reading Room:

http://www.lsntap.org/Mobile_Web_Reading_Room

  • LawHelp Resources
  • Drupal Resources
discussion
Discussion
  • How can the mobile web be used to help legal aid clients and advocates?
  • What happens in few years? Does almost everyone have carry a powerful mobile device?
  • Other questions and comments?
thank you
Thank You!
  • David Bonebrake – David@lsntap.org
  • Hugh Calkins - hughcalkins@mac.com
  • Kathleen Caldwell - KCaldwell@ptla.org
  • Dave Mallon -- dmallon@gwi.net
  • For Law Help Questions – lkeith@probono.net
  • For Drupal Questions -- wsfriday@gmail.com