Designing and developing mobile applications and responsive web sites when there are a variety of ways that a person can connect to the mobile web, as we can't assume unlimited data and wifi.

1. Mobile Development
on a Shoestring
Connection
by Jenifer Hanen
Responsive Web Design Summit 2013
1

2. Who is Ms. Jen?
Mobile Maker :: Designer, Developer, Photographer
blackphoebe.com/msjen @msjen
2

3. Hello, 1st talk of the
day...
Big picture.
Question our assumptions.
Interactive. Talk to the box.
3

4. Who are you?
Tell me in the texting box...
designer? developer? product human?
freelancer? consultant?
small agency? large agency?
medium company?
big business?
4

5. Let’s get this out of
the way now:
I am Appnostic
5

6. I am also pragmatic
The past and future are behind us and ahead of us.
We have right now.
6

7. How do we design and
develop for varying
data and bandwidth
scenarios?
7

8. Let's start by
challenging our own
assumptions.
It is easy to think that we know every use case and that our
experience is the experience of others.
8

9. Data Sipper
or
Data Chugger?
Is your app or mobile site a ...
9

10. Meet Margeaux
She is sick of poking the screen of her
iPhone and having nothing happen or it
happens very very slowly.
10

11. Why would the Apps or
Mobile Sites on
Margeaux’s iPhone
react S-L-O-W-L-Y?
Interaction time:
11

12. Let’s run through a
few scenarios:
12

13. Margeaux could be in
an area of bad
connection
13

14. And|or
no wifi to be found
14

15. Or the wifi is also slow
or has too many connections on the router
15

16. Or the local area has too
many connections and her
mobile data has dropped
down to 2G or lower
16

17. While, you the Developer,
can’t control Margeaux’s
mobile data speed or
local wifi...
17

18. a Data Chugger or
a Data Sipper
You can control if your mobile app or site is
18

19. But Wait!
There are a few more scenarios we need to take into account before
we can talk about how to develop for data sipping...
19

20. Limited vs Unlimited
Mobile Data Plans
How many of you here are hoarding your (almost past) unlimited plan
and how many of you have a limited plan?
20

21. The realities of
data plans & Wifi
across the planet:
21

22. Did she just say across the planet?
22
Why yes, I did.
http://visibleearth.nasa.gov/view.php?id=57723

23. I’am with AT&T Mobile
I have (supposedly) unlimited data for $30/mo
Don’t make me upgrade!
I buy my own phones to avoid having to get the new data plans.
I use wifi whenever I have something big to download or watch.
I frequently lose connection in dense areas of LA & SF.
23

24. AT&T’s New Data Plans
AT&T in my zip code (tablets, laptops, mifi):
250MB - $14.99, 3 GB - $30, 5 GB - $50, no unlimited
AT&T smartphone services (aka data):
300MB - $20, 3 GB - $30, 5 GB - $50, no umlimited
When one clicks on Unlimited menu item
one is presented with the choices above and no unlimited
Nov 2012
http://www.att.com/shop/wireless/plans/dataplans.html
http://www.att.com/shop/wireless/services/serviceslist.html
24

25. Steve Marshall in the UK
“O2. I don't how much it is, off the top of my head, but I get 1GB/
month and I generally don’t hit it. About one in every 3-4 months, I
get a warning that I’m close. For a fairly trivial sum, £5/mo or
something, I could upgrade to 2GB/mo. I use wifi at home and the
office." - @stevemarshall
25

26. Rita El Khoury in Lebanon
"Currently Lebanon has 3G/HSDPA (4G should be coming soon as well). I'm on the operator
Touch, but prices are all the same for all operators. I have the 19$/month 500MB data plan,
and I pay overage fees for additional usage. We don't have a lot of open WiFi networks here
(barely none), because even home ADSL is limited (eg: 10GB/month for 25$), so no one is
going to share their bandwidth. ADSL however is unlimited in the night, so that's when most
of my internet usage is concentrated (automatic scheduling FTW!)" - @khouryrt
26

27. Clinton Jeff in India
“Airtel : For 3G, we get 2GB of data for 30 days, for Rs 499 (which is a pretty big amount
here). If you cross your data allowance, you're charged Rs 0.3 for every 10kb downloaded/
uploaded. There's also other plans that I've included in the screenshot below.
There is 4G LTE but only in two cities in India (Pune/Bangalore) by the same one carrier. In
cities like Delhi, 3G coverage can be bad in most pockets, when you're automatically
switched over to EDGE/GPRS until you get to a better coverage area.
Very hard to find free wifi (Indian government is paranoid about security, and apparently free
wifi is a security hazard). You have solid wifi connections at home, but they go to a
maximum of 2MBPS and all plans have data caps, so you have to be careful how much you
download or upload. If you cross your home broadband data cap, you're switched to
256kbps unlimited internet, which is painfully slow.” - @clintonjeff
27

28. Alvin Wong in Singapore
"My carrier is M1, I get 12GB of data for S$39/month (although I'm now grandfathered into
my particular price plan because data limits have since been slashed to 2GB across the board
coinciding with the LTE rollout here) and we have free WiFi hotspots in most public places
(think malls, libraries, cafes) here as part of a government initiative but in my experience
they have either been extremely slow or non-functioning." - @alv1nW
28

29. Roaming in the Gloaming
Should folks not use your app or mobile site
when out of their normal range?
The $750 iPhone bill after a few weeks in France
or the $1220 Finland bill from 2008
29

30. Elevate Me Baby!
Ms. Jen’s 2013 MeFi experiement...
4G/LTE speeds until after 5pm
$50 for 5GB / month
$10 per 1GB after the first 5GB
The Web became PAINFUL...
30

31. Last but not least:
What about the user who is in an area of no connection?
No wifi, no mobile data, no nothing...
But still wants to use your web app or site?
31

32. But I want to Check In!
How could we change the mobile Foursquare app so that I could
check in at the Bristlecone Pines?
32

33. Check In Persistence
If it is a native mobile app, I could have it store the GPS coordinates &
timestamp, do a background check for a data connection and when it
finds one have an alert that asks me if I want to check in now.
If it is a hybrid or a mobile web app, I ask the user if they want to
store location (tricky) and timestamp in the browser cookies and then
next time the user has a connection they could activate a retrieval...
And then check in.
33

34. Overwhelmed?
Too many things to consider when developing for mobile?
Do you want a user | customer | viewer who loves your
app | site or gives up frustrated?
34

35. A few suggested
places to start...
35

36. A few suggested
places to start...
36
1. Persistence:
A native app should work regardless of connection, some tasks may
have to be saved for later.
A hybrid app should have some method to persist until connection is
regained.
A web app should use local storage to persist assets.

37. A few suggested
places to start...
37
1. Persistence:
A native app should work regardless of connection, some tasks may
have to be saved for later.
A hybrid app should have some method to persist until connection is
regained.
A web app should use local storage to persist assets.
2. Reduce calls to web APIs if user wants to data sip:
Mobile apps and web sites don’t always need to be phoning home.

38. A few suggested
places to start...
38
1. Persistence:
A native app should work regardless of connection, some tasks may
have to be saved for later.
A hybrid app should have some method to persist until connection is
regained.
A web app should use local storage to persist assets.
2. Reduce calls to web APIs if user wants to data sip:
Mobile apps and web sites don’t always need to be phoning home.
3. Be Responsive:
Be it in the web design, layouts, javascript, or images make sure your
web site can respond not just to screen size but also device. Mobile is
everywhere.

39. A few suggested
places to start...
39
1. Persistence:
A native app should work regardless of connection, some tasks may
have to be saved for later.
A hybrid app should have some method to persist until connection is
regained.
A web app should use local storage to persist assets.
2. Reduce calls to web APIs if user wants to data sip:
Mobile apps and web sites don’t always need to be phoning home.
3. Be Responsive:
Be it in the web design, layouts, javascript, or images make sure your
web site can respond not just to screen size but also device. Mobile is
everywhere.
4. Minimalism: Be it a native app, hybrid, or web site, do not be
afraid to not just go mobile first, but also to go minimal...

40. Ms. Jen’s Minimalism
Minimalism is not the art of cutting corners or abstracting to the
point of non-usability, but the merging for form and function such
that the human who uses the site or app is both delighted and is able
to complete the task they came for.
40

41. Minimalism Can Set
You Free:
One of the reasons, I tend towards minimalism over time is so that I
can afford to make allowances for complexity as needed.
If I go lean on code and design elements in one or more areas, I can
afford to go fatter in areas where it will benefit the user.
41

42. What Minimalism can do for you
and your users:
1. Lean means fast performance in the face of a dicey connection.
42

43. What Minimalism can do for you
and your users:
1. Lean means fast performance in the face of a dicey connection.
2. Only use what is needed right now. Cut out the fat. Reduce.
43

44. What Minimalism can do for you
and your users:
1. Lean means fast performance in the face of a dicey connection.
2. Only use what is needed right now. Cut out the fat. Reduce.
3. Fear not the Server, it is your friend let it do the heavy lifting and
thinking, even as calls to the server may be limited if data sipping.
44

45. What Minimalism can do for you
and your users:
1. Lean means fast performance in the face of a dicey connection.
2. Only use what is needed right now. Cut out the fat. Reduce.
3. Fear not the Server, it is your friend let it do the heavy lifting and
thinking, even as calls to the server may be limited if data sipping.
4. Conversely, fear not the mobile device not only as the front end
screen and input, but also a server in its own right.
45

46. What Minimalism can do for you
and your users:
1. Lean means fast performance in the face of a dicey connection.
2. Only use what is needed right now. Cut out the fat. Reduce.
3. Fear not the Server, it is your friend let it do the heavy lifting and
thinking, even as calls to the server may be limited if data sipping.
4. Conversely, fear not the mobile device not only as the front end
screen and input, but also a server in its own right.
5. Don't just refactor your code, but also refactor your way of
thinking about the site and the context of how, when, and where
folks will use the site. http://refactoringmanifesto.org/
46

47. Do they want to data sip or chug?
Don't make the choice for them.
Let them choose.
Always Give the User the Choice.
47

48. Thank you!
@msjen
blackphoebe.com/msjen
Slides will be up on Slideshare.net/msjen
48