Transcript Document

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-aremeaningles
•
The mobile browser landscape is an absolute mess, but it’s
improving
•
Going forward, most new touch phones will use a WebKitbased 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) Firebug
b) Useragent Switcher
Mobile emulators
a) Opera mini
b) Ready.mobi
Real devices
Firebug
addons.mozilla.org



Inspect and edit
HTML elements
Edit CSS and see
effects instantly
Detailed error
reporting

Default user agent
Openwave user agent

CODING
•
XHTML-MP (mobile profile)
•
XHTML is a stricter version of HTML
 All tags must be closed
a) This is correct <br />
b) This is not <br>
 Attribute values quoted
a) <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 type
Iphone, Nokia, Opera Mini, Vodafone, Android, PalmOS,
Kindle, Up.Link, Symbian, SymbianOS, MIDP, NetFront,,
AvantGo, Windows CE, PIE, BlackBerry
Re-direct to mobile site
c) Detection takes place on the server
d) Useragent string: (Openwave)
b)
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 – [email protected]
Hugh Calkins - [email protected]
Kathleen Caldwell - [email protected]
Dave Mallon -- [email protected]
For Law Help Questions – [email protected]
For Drupal Questions -- [email protected]