mobile development on a shoestring connection

Mobile Development on a Shoestring

Connectionby Jenifer Hanen

Responsive Web Design Summit 2013

1

Who is Ms. Jen?Mobile Maker :: Designer, Developer, Photographer

blackphoebe.com/msjen @msjen

2

Hello, 1st talk of the day...

Big picture.Question our assumptions.Interactive. Talk to the box.

3

Who are you?Tell me in the texting box...

designer? developer? product human?freelancer? consultant?

small agency? large agency?medium company?

big business?

4

Let’s get this out of the way now:

I am Appnostic5

I am also pragmaticThe past and future are behind us and ahead of us.

We have right now.

6

How do we design and develop for varying data and bandwidth

scenarios?

7

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

Data Sipper or

Data Chugger?

Is your app or mobile site a ...

9

Meet MargeauxShe is sick of poking the screen of her

iPhone and having nothing happen or it happens very very slowly.

10

Why would the Apps or Mobile Sites on

Margeaux’s iPhone react S-L-O-W-L-Y?

Interaction time:

11

Let’s run through a few scenarios:

12

Margeaux could be in an area of bad

connection

13

And|or no wifi to be found

14

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

15

Or the local area has too many connections and her mobile data has dropped

down to 2G or lower16

While, you the Developer, can’t control Margeaux’s

mobile data speed or local wifi...

17

a Data Chugger or a Data Sipper

You can control if your mobile app or site is

18

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

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

The realities of data plans & Wifi across the planet:

21

Did she just say across the planet?

22

Why yes, I did.

http://visibleearth.nasa.gov/view.php?id=57723

I’am with AT&T MobileI 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

AT&T’s New Data PlansAT&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 2012http://www.att.com/shop/wireless/plans/dataplans.html

http://www.att.com/shop/wireless/services/serviceslist.html

24

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

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

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

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

Roaming in the GloamingShould 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

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

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

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

Check In PersistenceIf 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

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

A few suggested places to start...

35

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.

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.

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.

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

Ms. Jen’s MinimalismMinimalism 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

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

What Minimalism can do for you and your users:

1. Lean means fast performance in the face of a dicey connection.

42

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

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

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

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

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

Thank you!@msjen

blackphoebe.com/msjenSlides will be up on Slideshare.net/msjen

48