Mobile App Development Dos and Don'ts
•Download as PPTX, PDF•
0 likes•224 views
The document discusses best practices for developing mobile applications and mobile-optimized websites. It notes that smartphone usage and shipments are increasing significantly. There are three main approaches to developing for mobile: native, hybrid, and responsive web. The document provides tips for each approach and emphasizes designing specifically for mobile by minimizing inputs, avoiding clutter, and choosing optimal use cases. It recommends responsive web design only when it makes sense and otherwise using optimized mobile applications.
Recommended
Recommended
More Related Content
Viewers also liked
Similar to Mobile App Development Dos and Don'ts
Similar to Mobile App Development Dos and Don'ts (20)
More from Ruben Goncalves
More from Ruben Goncalves (10)
Recently uploaded
Recently uploaded (20)
Mobile App Development Dos and Don'ts
- 1. © All rights reserved Mobility Rúben Gonçalves – Expert Services @ OutSystems Dos and Don'ts on the road to
- 2. © All rights reserved Mo·bil·i·ty 1. The quality or state of being mobile. 2. The ability to move physically
- 3. © All rights reserved Go Mobile!
- 4. © All rights reserved Why? 1
- 5. © All rights reserved 125.6% of executives have smartphones Source:frommypersonalobservation
- 6. © All rights reserved 50% of US market share smartphone Source:Nielsen +
- 7. © All rights reserved 1.000.000.000 to be shipped worldwide in 2013 Source:Deloitte
- 8. © All rights reserved 1 in 5 US companies say they will provide Tablets to employees Source:ChangeWaveResearch
- 9. © All rights reserved Getting it done 2
- 10. © All rights reserved Native
- 11. © All rights reserved
- 12. © All rights reserved
- 13. © All rights reserved Native
- 14. © All rights reserved
- 15. © All rights reserved
- 16. © All rights reserved
- 17. © All rights reserved
- 18. © All rights reserved Hybrid
- 19. © All rights reserved
- 20. © All rights reserved
- 21. © All rights reserved
- 22. © All rights reserved
- 23. © All rights reserved
- 24. © All rights reserved Hybrid
- 25. © All rights reserved
- 26. © All rights reserved Test Test Test Test Test
- 27. © All rights reserved Web
- 28. © All rights reserved
- 29. © All rights reserved
- 30. © All rights reserved
- 31. © All rights reserved
- 32. © All rights reserved Web
- 33. © All rights reserved
- 34. © All rights reserved
- 35. © All rights reserved Keep in mind
- 36. © All rights reserved Source:DeveloperSource
- 37. © All rights reserved Make it GREAT 3
- 38. © All rights reserved Minimize input Hard and time-consuming
- 39. © All rights reserved The good, the bad and (the) ugly
- 40. © All rights reserved UnCluttering Removing visual pollution
- 41. © All rights reserved Space is Precious and Fingers are FAT Luke, can’t u see? I have fat fingers!
- 42. © All rights reserved Let’s see some action
- 43. © All rights reserved Use Case The art of choosing the right features
- 44. © All rights reserved Less & Simpler Golden rule
- 45. © All rights reserved Good Example
- 46. © All rights reserved
- 47. © All rights reserved Responsive Web Design 4
- 48. © All rights reserved
- 49. © All rights reserved It’s magical
- 50. © All rights reserved However…
- 51. © All rights reserved “responsive web design isn’t intended to serve as a replacement for mobile web sites”
- 52. © All rights reserved
- 53. © All rights reserved Design pages for Mobile 5
- 54. © All rights reserved Don’t mimic native apps
- 55. © All rights reserved Don’t make it look like a website
- 56. © All rights reserved Use your FAT, clumsy fingers
- 57. © All rights reserved Good Example
- 58. © All rights reserved
- 59. © All rights reserved Final Thoughts
- 60. © All rights reserved Mobile is here to stay and grow
- 61. © All rights reserved Mobile is a behavior!
- 62. © All rights reserved Can dramatically Increase Productivity
- 63. © All rights reserved Minimize Input Avoid Cluttering Choose Use Cases
- 64. © All rights reserved Use RWD only when makes sense
- 65. © All rights reserved Whenever possible use optimized mobile Applications
- 66. © All rights reserved Thank you!
- 67. © All rights reserved Questions
Editor's Notes
- Good morning, My name is Ruben Gonçalves and I would like to be a farmer. While I not trying to be, I work for OutSystems in the Expert Services. In this session we will be talking about...
- Let’s take a moment and think what mobility is. (Pregnant pause) In the dictionary the definition is.. The ability to move physically. In this session however it will have a different meaning... It will mean the ability to take your web application with you to wherever you go. There are people who say
- There’s people who says “Go Mobile!” just because it’s trendy… But we must ask and know
- WHY? Why is it needed? What makes it so important? I’m going to use some statistics, and something you should have mind is that actually 73point6% of all statistics… are.. made up. http://www.businessinsider.com/736-of-all-statistics-are-made-up-2010-2
- I would guess that 125point6% of executives have smartphones, and this statistic is based on my personal experience. Who has two of them?
- http://www.nielsen.com/us/en/newswire/2012/smartphones-account-for-half-of-all-mobile-phones-dominate-new-phone-purchases-in-the-us.html Nielsen February 2012
- One billion… one billion is the number of smartphones estimated to be shipped this year. http://www.deloitte.com/view/en_GX/global/press/e608748edba3c310VgnVCM3000003456f70aRCRD.htm
- http://www.rawstory.com/rs/2012/03/13/one-in-five-u-s-companies-say-they-will-buy-tablets-by-mid-year/ These companies bought thousands of tablets for their employees. United Airlines (yes pilots, no longer use paper maps) Barclays Now that we know why? We have to know how?
- With today’s technology there are plenty ways of getting it done. But which one is the most appropriate for what we want to do?
- Is the designation for Applications created in specific language and are optimized to run in specific Operating System So what are the advantages of going native?
- You can distribute your application in the app stores. Nowadays we live in an App culture, where people want apps and know where to find them! If your app is not there, it simply doesn’t exist.
- Ability to work offline. A good example is UltraLingua. This application is used as a translator and download the languages you need, and from that moment on, you can use it offline. Another very well know example, is angry birds! By going native, they could take full advantage of the graphical hardware, creating a smooth game with great visual effects.
- But like everything, you always have the dark side.
- It’s Hard to build. Does anyone recognizes this tool? This is the Xcode, the tool to build ios native apps. I can tell you from personal experience that it is a pain to use.
- App store approval process, sometimes is not clear and can take weeks to months.
- You rely on the user to update your app, something that may never happen.
- This is the biggest problem, and And of course… you’ll have to build one app for every single platform and sometimes each OS version. Now that we know the benefits and the handicaps of Native, we’ll explore another option…
- Hybrid is composed by a thin native shell that runs your web app. And what advantages of going hybrid?
- You can use better tools to create your app.
- You can use platforms like PhoneGap Build, to create at the same time hybrid apps to several platforms.
- It’s possible to use phone features, just like a native app!
- You don’t need to worry about updates! They are done instantly by next user access!
- You’ll be able to publish it to app stores, with all the visibility that it brings.
- But there’s also a darker side.
- App store approval process
- You’ll have to test your hybrid apps in every single device and OS version There’s also another way,
- Your app will be running in your server
- Like before, we can use better tools.
- No more rejected apps, no more waiting time to publish app!
- No need to worry about updates.
- With browsers of the devices more and more advanced, and the standards being implemented, less to worry between differences from devices.
- There is always, well, a less bright side.
- You don’t get to publish it in the App Store. This can be a big problem! However there are work around this! http://blog.forecast.io/its-not-a-web-app-its-an-app-you-install-from-the-web/
- You cannot use most phone features: Such as: 1) Microphone 2) Sensors 3) Phone book You can use: Geo location Upload file (including taking a picture and send it)
- So what’s the best option?
- Image source: http://wiki.developerforce.com/page/Native,_HTML5,_or_Hybrid:_Understanding_Your_Mobile_Application_Development_Options Depending on your needs, you should choose the technology that helps you most. Independently of the technology that you may choose, to be a success you’ll have to…
- Making Great MOBILE applications There are a couplethings that you can actually do in order to make it great
- As probably you already know, inputing a lot of information in a smartphone, it’s hard and time-consuming. So you should always look for alternative ways to input data. As examples do worth more than words, let’s see an example.
- Imagine that we want to create mini survey for the speakers of NextStep.
- Note this menu pattern, will be release in the forge.
- As you probably already hear in the previous sessions, cluterring is specially important in mobile because…
- This means if this are too close, the user may end up touching in multiple places simultaneously. Why finger are fat you may ask? Finger tips have an average of 40-80px wide (target should be a minimum 30-40px)
- Imagine now, that you would want an application to help the presenter to check in who’s on the room
- Choosing the right Use Case for your mobile application, is one of the most important things to do. Choosing the right features for when your on the run.
- You shouldn’t try to include all functionality that you have in your desktop web application, but only those that will make your web application great.
- In the US, people use a lot of checks, I mean a LOT. So a couple of years ago, when chase bank was to create there mobile app, they actually came up with a very interesting use case.
- Which was the ability to deposit a check with your phone! This was an great use case, which brought them many new costumers. Nowadays, all banks have apps with similar features. Some of you may say, but actually building a mobile app, doesn’t bring me that much advantages, and I would have to maintain two web apps. So brings us to the next subject…
- Who knows what RWD is? Please don’t be shy, raise your hands!
- RWD is web design approach aimed at create sites to provide an optimal viewing experience. This means that you can have one website for all devices.
- Show community website
- There’s the wrong perception that RWD is the solution for mobile, and that it should be used in every situation. If you have being paying attention to what I have been told you so far, you know this is not true
- Even Ethan Marcotte, which is one of the initial promoters of RWD. But why is this important? http://www.abookapart.com/products/responsive-web-design Ethan Marcotte: “most importantly, responsive web design isn’t intended to serve as a replacement for mobile web sites.”
- Responsive design simply rearranges the content of your site to fit on a mobile screen. Responsive only solves one half of the mobile equation, it does not optimize for the behavior, it only optimizes for the resolution. Mobile: Is not just a smaller screen resolution; mobile is a behavior.
- So what should we have in consideration when creating web mobile app?
- avoid replicating the default iOS styling and interactions http://blog.forecast.io/its-not-a-web-app-its-an-app-you-install-from-the-web/
- Just because is web app, don’t make it look like one. consider the use of buttons instead of blue underlined links. Just because you’re using HTML5 under the hood doesn’t mean that it should look like it. http://blog.forecast.io/its-not-a-web-app-its-an-app-you-install-from-the-web/
- Spend hours—hours!—mashing on your app with your big, clumsy fingers. Tap things twice. Swipe at things that shouldn’t be swiped. http://blog.forecast.io/its-not-a-web-app-its-an-app-you-install-from-the-web/
- forecast.io
- Catch the ride and improve your user experience at all levels.
- Is not just a smaller screen resolution; mobile is a behavior. It’s not just a small computer, different use cases.
- When should I decide whether to use RWD of build a specific mobile web app?
- When should I decide whether to use RWD of build a specific mobile web app?