• Read more about Navy Mutual: Deep Dive into Mobile

Navy Mutual's Mobile App

Navy Mutual Aid Association provides life insurance and annuity products to military families. In our previous blog, we discussed how an association’s struggle to face the challenge that investing in technology can pose.

 Navy Mutual Aid Association chose to face this challenge head-on and Mobomo helped usher Navy Mutual Aid Association through their first foray into mobile with the launch of their Survivor Benefits app.

The Navy Mutual Aid Association has a focus on educating members on their legally entitled government benefits, as well as on matters of financial security.  

In creating this app, Navy Mutual is now able to put appropriate resources directly in the hands of their members in an overall effort to increase awareness of government benefits.

It also allows Navy Mutual to more directly reach members through a new channel and increase its footprint in members’ lives.

Incorporating Legal Resources

One of Navy Mutual’s goals is to ensure veterans and veteran’s families fully understand their legal rights and benefits.  While the Navy Mutual website housed many valuable resources, the team wanted a tool optimized for, and easily accessible from a mobile device.

Throughout the process, the Mobomo team worked collaboratively with the Navy Mutual team, as well as their existing brand guidelines.  During all creative discussions, Navy Mutual ensured that the app would meet member needs and fulfill their mission.

We led them through the design, development, and launch of iOS and Android mobile apps. In order to meet these goals, we created various palettes to finalize a look and feel for the mobile app’s overall User Experience.   

For maintainability purposes, Navy Mutual opted to move forward with a React Native cross-platform application in order to create both iOS and Android apps from a single codebase.

The Benefit Calculator

One of the key features of the mobile app is a set of Benefit Calculators, which are on the website as well. These are for users to estimate survivor benefits and entitlements.

The calculators are processed through a legacy, internal backend database that did not have an optimized interface for plugging in new systems.

In order to make the backend accessible to the mobile apps, our team had to create new APIs for the apps to submit user inputs and retrieve the appropriate output to be displayed.

All of the tools that were created for use in the Survivor Benefits app are user-friendly as well as engage members throughout their experience.  

As discussed previously, members believe that the investment in technology was critical, but associations want their investment to last longer than the latest trend.  

The Navy Mutual Aid Association ensured that this app, not only was a financially sound investment but would meet their member needs long term.

• Read more about Ken Fang Named to Monte Jade Board

Monte Jade DC has recently announced that they have nominated Mobomo’s President, Ken Fang, as their Chairman of the Board. Ken has been on the Monte Jade DC board since 2013.

“It is indeed a great honor to be nominated to lead this great organization. Over the past few years of involvement with Monte Jade, I have seen incredible relationships grow as business owners connect, students and mentors learn from one another, and professionals network to build bonds with one another. It is a fantastic connection for the Asian community in DC."

Monte Jade is an organization that aids in resources for starting, funding and growing high technology businesses. Their commitment is to assist future entrepreneurs, students, researchers, scientists, scholars and business people to advance their careers in becoming leaders and executives in their organizations or assist those that have interest in becoming entrepreneurs and business owners. They accomplish this through the experience and knowledge our prestigious board and other key members that include C-level executives, managers, and directors leading, operating, and developing some of the most successful science and technology firms in the Greater Washington area.

Ken Fang is the President of Mobomo, primarily overseeing the strategy and operations of the company. He works closely with clients to create mobile solutions to meet their strategic needs, and is adept at developing apps on all major mobile platforms, including iOS, Android, Blackberry, Windows Phone, and mobile web. In addition to running Mobomo, Ken is the founder and chairman of Altum, Inc., the market leader of enterprise grants management and performance management solutions for federal and philanthropic organizations. Ken has published a number of titles and articles in educational software and advanced computing technology. He holds a B.S. and an M.S. in Computer Science from Pennsylvania State University, an M.B.A. from the University of Maryland, College Park, and a certificate in Bioinformatics from Stanford University.

• Read more about Touch Icons: Less is More!

Last week, I found myself in an interesting Twitter discussion with my friend Brad Frost. Centered around home screen icons for mobile, Brad was lamenting on the lack of up-to-date, clean cut resources for them.

I couldn't agree more! In fact, over the last few weeks, that has been my baby; to create a simplistic guide for home screen icons. Initially, it was just an internal team resource, but now I'd like to share it with you. And after a lot of testing and research, here is what I came up with...

TL;DR: People are overdoing it. You can add great looking home screen icons for iOS and Android with a single image and two lines of code. Here's the Github Repo with the markup and a test image.

From Flappy Birds to the "Gloss" Effect

Before the days of App Stores and Flappy Birds, when the iPhone was first unveiled, there were no third party apps. Your home screen was a fixed set of icons and there was virtually no customization, not even rearranging capabilities.

The following year (still talkin' iPhone OS version 1.1.3 here) Apple added the ability to add (or bookmark) "Web Clips" to your home screen. Rearranging was finally implemented for apps and web clips on up to 9 home screens (hot dog!) - still no app store though.

Along with this feature, Apple provided the ability for developers to specify custom icons for "Web Clips" called a "Web Clip Icon." This could be accomplished in two ways; by adding the file to your root folder via predefined naming conventions or by adding a <meta> tag to the <head> of your document. The image was required to be an 8-bit (no transparency) square PNG. iOS automatically rounded the corners and added that sexy "gloss" effect icons. However, you could disable the gloss with a different naming convention in your file or meta tag.

Many iterations of the iPhone and iOS later, you still have access to this feature as you did way back in iOS 1.1.3. Additionally, Mobile Safari for iOS 7 uses the web clip icon when displaying your bookmarks. Oh, and home screen bookmarks are now available in Chrome (31+) for Android as well. Long story short, this is something everyone should be adding. No one wants to see the default icon.

If you look up documentation on these icons though, it will boggle your mind! Some of the sources out there recommend up to seven different size icons with varied meta tags for each. After a ton of experimenting, I found this to be totally unnecessary. iOS and Android are quite adept to scaling the icon to its necessary size without making a ton of versions or adding loads of code to the head of your document.

The Simplicity of Modern Touch Icons

Now with all that said, here are my simple steps for modern touch icons.

Step 1: Make It

Make your icon. My preference is 512x512px but as long as its at least 152x152px, you'll be good. In addition, double check it's PNG 8-BIT with no transparency. Note: It won't work if you use PNG-16 or have transparency enabled. Finally, make it square, the OS is going to round the corners for you. Save your file as touch-icon.png That's it.

Step 2: Add Code

Add these two lines of code to the head of your HTML document. The first is for Android, the second is for iOS.

<link rel="shortcut icon" href="touch-icon.png">
<link rel="apple-touch-icon-precomposed" href="touch-icon.png">


Notes:

Bonus

By default, both iOS and Android use the page's <title> tag for the bookmark title (you can still edit before saving them). However, if you're feeling crazy and want to add another line of code, you can use this undocumented tag, from Apple, to set a different default title.

<meta name="apple-mobile-web-app-title" content="My App Name">

Technically this tag is for full screen web apps (a post for another day), but it works with regular web clip bookmarks as well.

Keep the conversation conversation going! We'd love to hear from you.

• Read more about Add to Home Screen: The (iOS) Natives are Getting Restless

iOS has always offered the ability to add web pages to the home screens of iPhones and iPads, but there are tons of techniques that when combined can make for a great “app experience” via the web!

At ModevEast 2013, Ben will delve into this “app experience” with examples ranging from enterprise and prototyping, to simple informational apps. Web developers and entrepreneurs alike, don’t miss out! With an emphasis on creating value for his attendees, Ben will equip you with the necessary tools to create an intuitive, visually stunning, and cost effective app all on your own!

What you’ll learn at Add to Home Screen: The (iOS) Natives are Getting Restless

How to...

• Create home screen icons
• Start up splash screens
• Run web apps full screen
• Utilize offline storage and image uploading
• Drive the user to run the page as a home screen app

By the end of this talk you’ll be armed with some great techniques for building a web app with a native feel for iOS.

• Read more about How To: Refresh an iOS Hybrid App

If you've spent any time building iOS apps using tools like Cordova or PhoneGap, you'll know that one of the biggest time-sucks is in viewing new changes to existing pages. The most common example of this would be building a Single Page Application using libraries like Backbone, Angular, or Ember.

The awful way

My flow, until recently, has been to start up the simulator from Xcode, test out my pages, stop the app from Xcode, then select Reset Content and Settings... from the iOS Simulator menu. This process is painfully slow, especially if you work iteratively like I do.

A better way

With the most recent updates to Safari, there's now a way to refresh your app from the Web Inspector (the functionality has been around for a little while via keyboard short-cuts, but the explicit UI is new).

You can access this once your app is running by opening up Safari, selecting the Develop menu, iPhone Simulator (or iPad Simulator), then index.html.

Once there, select the Resources tab and you'll see the index.html page selected, with a refresh icon to the right of the column. Click on that and you'll get a proper page reload. Alternately, you can press cmd + shift + r to trigger the reload.

• Read more about Should We Open Source This App For iOS Development?

Here at Intridea we’re currently working on Smashbook, which, once released, will be the premier mobile app and companion for tracking and scoring tennis matches.

Currently we’re working on the API portion of this application, which is being built in Rails and utilizing Grape, an opinionated micro-framework for creating REST-like APIs in Ruby we open sourced.

In the course of development, we needed to build an iOS app that could natively test access to the all areas of the API - it’s parameters, authentication, and more. Here’s what we built:

The purpose of this app is to natively test access to the API, rather than just relying upon the web resource forms. And after we built it, we thought "hey, this may be quite valuable to others," hence this post...

You tell us: should this app be an open source iOS project?

The goal would be to make the source available, so anyone doing iOS development can define access to any API using configuration plists. This would define not only the access type, such as POST and GET, it would also define the fields, the data types, as well as form elements such as input text boxes, image boxes, etc.

In only a few minutes you as an iOS developer, or even an API developer, could test your work from an iOS client, therefore establishing and determining functionality, exceptions, and much more.

So I’ll ask again: should we release this as open source?

Let us know in the comments below. And be sure to follow the progress of Smashbook on Twitter.

• Read more about The Apple/Google Android Mobile Horse Race

Recent reports about Apple and Google mobile market shares might seem a bit contradictory, but the gist of them is fairly simple: both companies are winning in the mobile space.

According to a recent report from Canalys, Apple has taken the U.S. smartphone share lead for Q3 2010 with just over 26% marketshare -- edging out 2nd-place RIM by only 2%. But in terms of mobile OS, Android maintained its previous U.S. lead, with close to 44% for Q3 2010. However, consumer researcher NPG Group's findings show that Google's Android mobile OS's U.S. share jumped considerably (3% to 44%) between Q3 2009 and Q3 2010, whereas Apple and RIM have fallen in that time period -- RIM considerably, by a drop of 24% in that one year period.

On the flipside, both Apple and RIM won with handsets. Apple's iPhone 4 and RIM's BlackBerry Curve 8500 took first and second spots, respectively, in Q3 2010 as top handsets. High-end Android phones such as Motorola Droid X and HTC EVO 4G, which took 4th and 5th places, respectively, are examples of handsets that have helped Android move into and maintain top mobile OS spot.

Of course, since Android has multiple active versions in the wild and is not limited to one manufacturer's handsets, it's not surprising that this mobile OS is in the lead. Also, it doesn't hurt that there are some pretty sexy high-end Android smartphones competing with Apple's iPhones. I recently purchased a Droid X for Android development and I have to say I'm liking the phone about as much as my iPhone 3GS. I also like the Android experience, though that may change once I get an iPhone 4.

Now the question is, can Android maintain its lead as top mobile OS (at least for the U.S.)? Android apps are available in multiple "marketplaces" (including Google's official one), and that number is going to grow. For example, Barnes & Noble is coming out later this month with their Nook Color, an Android-based media tablet that has maybe not the ability to compete with the Apple iPad but to do well if marketed properly. However, taking a page from Apple's strategy, B&N plans to have its own curated marketplace for Nook Color apps. Similarly, wireless carrier Verizon already has its own VCast apps market for Android.

Whether marketplace, OS version and UI fragmentation is good for Android or not remains to be seen; Google is apparently making an effort to unify the Android UI experience for consumers. The fact is that there's a lot of confidence in the OS. According to Millenial Media's State of the App Industry 2010 Report, a survey of app developers and app publishers suggests that the top mobile platforms for 2011 will be, from highest to lowest, iPhone (30%), Android (23%), iPad (21%), RIM (12%), Windows Mobile (6%), Palm (5%), and Symbian (3%) [via ReadWriteWeb and Venture Beat]. Of course, those numbers might change as Android tablets -- which will on average be lower-priced than iPads -- come to market.

Need advice on a mobile apps strategy for your business? Just want to know how you can leverage the mobile platform in general? Feel free to contact us to discuss your app idea or mobile campaign needs.