Catching Up With Our Clients

David Bonebrake, LSNTAP Hugh Calkins, Pine Tree Legal Assistance Kathleen Caldwell, Pine Tree Legal Assistance Dave Mallon, iKnow Web Design

Why Mobile Matters Making Sense of Mobile PTLA Project

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

2. It’s only getting bigger.

(The challenge is creating a quality user experience)

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

*Active = accessing it at least monthly.

With the mobile web, the early adoption demographics are much different.

.

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

• 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.

• 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

 

Feature Phones Smartphones Touch Phones

• 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

Platforms: Java ME, Blackberry, iPhone, and Android.

Operating Systems: Mac OS X, Android, Symbian and Windows Mobile

• SMS

• Mobile Websites

• Mobile Web Applications

• Native Applications

Personal to the user Capable of sending and receiving

information at all times Goes everywhere

Mobile Devices: -Have tiny displays

-Utilize poor browsers

-Suffer from flaky connections

Adapt to the mobile context - don’t just repurpose your existing site.

…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

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?

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

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

Who is our most likely audience?

Duh–uh-uh

Even better

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?

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.

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.

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.

The Right Tools For The Job Notepad or the editor of your choice Firefox (with addons)

a)Firebugb)Useragent Switcher

Mobile emulatorsa)Opera minib)Ready.mobi

Real devices

Inspect and edit HTML elements

Edit CSS and see effects instantly

Detailed error reporting

Firebugaddons.mozilla.org

Default user agent Openwave user agent

CODING• XHTML-MP (mobile profile)• XHTML is a stricter version of HTML

All tags must be closeda) This is correct <br />b) This is not <br>

Attribute values quoteda) <p class=”foo”></p>

Case sensitive a) Correct <p></p> b) Incorrect <P></P>

Must include XML declaration and doctype

• 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>

• Keep It Simple

a)Use markup to indicate structure - headings and lists

b)No floats or absolute positioning

c) Use percentages and em units for dimensions

d)Keep margins and padding to a minimum

e)Stylesheet support varies. Make sure your site is presentable without styles.

f) Images should be small and lightweight

g)Do not rely on JavaScript. Support varies.

• Device Detection

a) Identify visitors by device typeIphone, Nokia, Opera Mini, Vodafone, Android, PalmOS, Kindle, Up.Link, Symbian, SymbianOS, MIDP, NetFront,, AvantGo, Windows CE, PIE, BlackBerry

b) Re-direct to mobile site

c) Detection takes place on the server

d) 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>

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

SOME THINGS WE LEARNED• Telephone links

<a href=”tel:+12077748211”>774-8211</a>• Unicode limitations

Character set often limited by geographic region

• Keep content scrolling to a minimum• Difficulty in linking to external sources• Test, test, test

mobiReady: http://ready.mobi/ LSNTAP Mobile Web Reading Room:

http://www.lsntap.org/Mobile_Web_Reading_Room

LawHelp Resources Drupal Resources

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?

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