Mobile Development on a Shoestring Connection

376 views

Published on

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.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
376
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mobile Development on a Shoestring Connection

  1. 1. Mobile Developmenton a ShoestringConnectionby Jenifer HanenResponsive Web Design Summit 20131
  2. 2. Who is Ms. Jen?Mobile Maker :: Designer, Developer, Photographerblackphoebe.com/msjen @msjen2
  3. 3. Hello, 1st talk of theday...Big picture.Question our assumptions.Interactive. Talk to the box.3
  4. 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. 5. Let’s get this out ofthe way now:I am Appnostic5
  6. 6. I am also pragmaticThe past and future are behind us and ahead of us.We have right now.6
  7. 7. How do we design anddevelop for varyingdata and bandwidthscenarios?7
  8. 8. Lets start bychallenging our ownassumptions.It is easy to think that we know every use case and that ourexperience is the experience of others.8
  9. 9. Data SipperorData Chugger?Is your app or mobile site a ...9
  10. 10. Meet MargeauxShe is sick of poking the screen of heriPhone and having nothing happen or ithappens very very slowly.10
  11. 11. Why would the Apps orMobile Sites onMargeaux’s iPhonereact S-L-O-W-L-Y?Interaction time:11
  12. 12. Let’s run through afew scenarios:12
  13. 13. Margeaux could be inan area of badconnection13
  14. 14. And|orno wifi to be found14
  15. 15. Or the wifi is also slowor has too many connections on the router15
  16. 16. Or the local area has toomany connections and hermobile data has droppeddown to 2G or lower16
  17. 17. While, you the Developer,can’t control Margeaux’smobile data speed orlocal wifi...17
  18. 18. a Data Chugger ora Data SipperYou can control if your mobile app or site is18
  19. 19. But Wait!There are a few more scenarios we need to take into account beforewe can talk about how to develop for data sipping...19
  20. 20. Limited vs UnlimitedMobile Data PlansHow many of you here are hoarding your (almost past) unlimited planand how many of you have a limited plan?20
  21. 21. The realities ofdata plans & Wifiacross the planet:21
  22. 22. Did she just say across the planet?22Why yes, I did.http://visibleearth.nasa.gov/view.php?id=57723
  23. 23. I’am with AT&T MobileI have (supposedly) unlimited data for $30/moDon’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. 24. AT&T’s New Data PlansAT&T in my zip code (tablets, laptops, mifi):250MB - $14.99, 3 GB - $30, 5 GB - $50, no unlimitedAT&T smartphone services (aka data):300MB - $20, 3 GB - $30, 5 GB - $50, no umlimitedWhen one clicks on Unlimited menu itemone is presented with the choices above and no unlimitedNov 2012http://www.att.com/shop/wireless/plans/dataplans.htmlhttp://www.att.com/shop/wireless/services/serviceslist.html24
  25. 25. Steve Marshall in the UK“O2. I dont 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, Iget a warning that I’m close. For a fairly trivial sum, £5/mo orsomething, I could upgrade to 2GB/mo. I use wifi at home and theoffice." - @stevemarshall25
  26. 26. Rita El Khoury in Lebanon"Currently Lebanon has 3G/HSDPA (4G should be coming soon as well). Im on the operatorTouch, 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 dont have a lot of open WiFi networks here(barely none), because even home ADSL is limited (eg: 10GB/month for 25$), so no one isgoing to share their bandwidth. ADSL however is unlimited in the night, so thats when mostof my internet usage is concentrated (automatic scheduling FTW!)" - @khouryrt26
  27. 27. Clinton Jeff in India“Airtel : For 3G, we get 2GB of data for 30 days, for Rs 499 (which is a pretty big amounthere). If you cross your data allowance, youre charged Rs 0.3 for every 10kb downloaded/uploaded. Theres also other plans that Ive included in the screenshot below.There is 4G LTE but only in two cities in India (Pune/Bangalore) by the same one carrier. Incities like Delhi, 3G coverage can be bad in most pockets, when youre automaticallyswitched 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 freewifi is a security hazard). You have solid wifi connections at home, but they go to amaximum of 2MBPS and all plans have data caps, so you have to be careful how much youdownload or upload. If you cross your home broadband data cap, youre switched to256kbps unlimited internet, which is painfully slow.” - @clintonjeff27
  28. 28. Alvin Wong in Singapore"My carrier is M1, I get 12GB of data for S$39/month (although Im now grandfathered intomy particular price plan because data limits have since been slashed to 2GB across the boardcoinciding 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 experiencethey have either been extremely slow or non-functioning." - @alv1nW28
  29. 29. Roaming in the GloamingShould folks not use your app or mobile sitewhen out of their normal range?The $750 iPhone bill after a few weeks in Franceor the $1220 Finland bill from 200829
  30. 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 5GBThe Web became PAINFUL...30
  31. 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. 32. But I want to Check In!How could we change the mobile Foursquare app so that I couldcheck in at the Bristlecone Pines?32
  33. 33. 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 itfinds 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 tostore location (tricky) and timestamp in the browser cookies and thennext time the user has a connection they could activate a retrieval...And then check in.33
  34. 34. Overwhelmed?Too many things to consider when developing for mobile?Do you want a user | customer | viewer who loves yourapp | site or gives up frustrated?34
  35. 35. A few suggestedplaces to start...35
  36. 36. A few suggestedplaces to start...361. Persistence:A native app should work regardless of connection, some tasks mayhave to be saved for later.A hybrid app should have some method to persist until connection isregained.A web app should use local storage to persist assets.
  37. 37. A few suggestedplaces to start...371. Persistence:A native app should work regardless of connection, some tasks mayhave to be saved for later.A hybrid app should have some method to persist until connection isregained.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. 38. A few suggestedplaces to start...381. Persistence:A native app should work regardless of connection, some tasks mayhave to be saved for later.A hybrid app should have some method to persist until connection isregained.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 yourweb site can respond not just to screen size but also device. Mobile iseverywhere.
  39. 39. A few suggestedplaces to start...391. Persistence:A native app should work regardless of connection, some tasks mayhave to be saved for later.A hybrid app should have some method to persist until connection isregained.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 yourweb site can respond not just to screen size but also device. Mobile iseverywhere.4. Minimalism: Be it a native app, hybrid, or web site, do not beafraid to not just go mobile first, but also to go minimal...
  40. 40. Ms. Jen’s MinimalismMinimalism is not the art of cutting corners or abstracting to thepoint of non-usability, but the merging for form and function suchthat the human who uses the site or app is both delighted and is ableto complete the task they came for.40
  41. 41. Minimalism Can SetYou Free:One of the reasons, I tend towards minimalism over time is so that Ican afford to make allowances for complexity as needed.If I go lean on code and design elements in one or more areas, I canafford to go fatter in areas where it will benefit the user.41
  42. 42. What Minimalism can do for youand your users:1. Lean means fast performance in the face of a dicey connection.42
  43. 43. What Minimalism can do for youand 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. 44. What Minimalism can do for youand 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 andthinking, even as calls to the server may be limited if data sipping.44
  45. 45. What Minimalism can do for youand 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 andthinking, even as calls to the server may be limited if data sipping.4. Conversely, fear not the mobile device not only as the front endscreen and input, but also a server in its own right.45
  46. 46. What Minimalism can do for youand 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 andthinking, even as calls to the server may be limited if data sipping.4. Conversely, fear not the mobile device not only as the front endscreen and input, but also a server in its own right.5. Dont just refactor your code, but also refactor your way ofthinking about the site and the context of how, when, and wherefolks will use the site. http://refactoringmanifesto.org/46
  47. 47. Do they want to data sip or chug?Dont make the choice for them.Let them choose.Always Give the User the Choice.47
  48. 48. Thank you!@msjenblackphoebe.com/msjenSlides will be up on Slideshare.net/msjen48

×