Mobile Native App Cross Platform Development on Single Framework

I did my mid-term paper on mobile web app, which supposedly would operate on any smart phone’s browser. The major benefit for mobile web app is its ability to cross platform since it work only via your browser. By using frameworks such as PhoneGap and Sencha Touch you can build a kind of hybrid between regular webpage and native app that work on mobile browsers and use native features of mobile phone. For instance geolocation can be used on Google Map and microphone feature can implement on search text box. In order to create web app native feel and integrate with native features, it would count on HTML5, CSS3, and JavaScript.

The idea of cross platform enticed me. However, since the web app work via browser there are bound to have some limitations that wouldn’t match with native app. Furthermore, few weeks ago I heard a speaker from the Mobile UX Camp said, in order to create native-like user experience such as continuous flow of scroll gesture, hundred lines code of JavaScript needed to be written to have the same effect. This is cumbersome for the developer and the performance might even act sluggish.

Then I read this.
Xamarin debuts iOS and Android app development inside Visual Studio for C# programmers

To say it in simple way, Xamarin is an integrated development environment that uses C# code to develop mobile native app, also it can work as plug-in on Microsoft Visual Studio. C# Developers can now use Xamarin to create iOS and Android applications.You can have different UI depend on the platform, but the code behind can be the same and written in C#.

The concept to develop native apps that cross multiple platforms via a single framework intrigues me. In the past (?) time, applications on certain platform have to be coded by its dedicated language, Objective-C for iOS, Java for Android, and C++ for Windows. Each platform also has their own main framework, Xcode for iOS, Eclipse for Android, and Visual Studio for Windows. For developer, the burden to learn and familiarize with these abundant of computer languages and frameworks seems like a never ending journey. It would be awesome if I could use one coding language to create cross platform native app!

Back in college I had learned Java and Visual Basic. When I worked as web developer I fumbled with C#, which turned out all right for me. When mobile apps became famed, new and old languages all wanted to take the lead of market, which made diverge of codes and user interface. Could Xamarin become the savior (for developer) for the code behind as we follow the UI guideline (AKA the bible) of Apple, Google, and Windows?

In recent years, the vast varieties of frameworks that work on development of mobile web app thrived and probably have reached its climax. Never had I thought there is a framework to build cross platform native app. Perhaps it will create another trend in the future, and become the foundation to develop mobile solution.

Xamarin
http://xamarin.com/

Mobile Websites of iSchools

Although I use iPad, which the mobile Safari and Chrome always download the iPad version, I could download the Dolphin browser iPhone version to mimic the viewport of iPhone to have applicable mobile phone experience.

Since our midterm project is on making MCDM website mobile, I thought might as well take a look on other academic institute’s website and see how they appear.
Most of the major institutions such as Stanford, Harvard, and UCLA had configured their main homepage mobile friendly. However, if you deep dive and take a look at departments’ website, it’s totally different and chaotic. Innovative and prestige programs like MIT Media Lab and UCLA Computer Science doesn’t have a mobile website or responsive design. This made me wondered, what is the percentage for a department to have a mobile compatible website?

MIT Media Lab and UCLS CS website weren't mobile friendly

To find out the answer, the iSchools worldwide were probably the best entities to observe. In my opinion the iSchools should be specialized in information system management, web development, and user experience. They are the pioneers in building bridges between human and the Internet. There’s even an iSchools.org organization dedicated to the iSchools of the world. It’s better (and easier) to examine the 41 departments which have joined iSchools.org to gain understanding and learn pros and cons from their design. Ironically, the iSchool.org itself has a major flaw if you browse through your mobile phone. Its responsive design made its mobile page pop out a HUGE menu icon, which takes scroll 3~4 pages and it’s another 2~3 pages to find the link after open the menu tab.
http://ischools.org/


The result was quite surprising - only 9 out of 41 iSchools have their web site made mobile friendly. Means if you visit an iSchool’s webpage through mobile phone, less than 22% of chances it would appear as a mobile site. Furthermore, not every mobile website turned out to be fine. Just liked the iSchools.org, there were pages have their functions or buttons misplaced, or information of contents appeared in a hideous crowded way.

iSchool.org, it's a menu tab, not a list of links

Here are the 9 iSchools that have their website go mobile, and few comments on them.

Responsive site – Use a menu button to direct as main navigation
Singapore Management University: average website
University of Illinois-Graduate School of Library and Information Science (GSLIS): Menu button redirect to bottom of page, where all the navigation tabs are.
University of Maryland, Baltimore County (UMBC)-Department of Information Systems: Long list of verbose options, in a bad way. However I once saw a tornado warning on top of page, useful.

U of Illinois, the menu button directs you to bottom of page

Responsive site – Assign tool bar or tab on top of page as main navigation
University of Amsterdam-Graduate School of Humanities (Archives and Information Studies): Clean, simple, very good on making contrast between different elements.
University of Maryland-College of Information Studies: Very simple, clean page
University of Melbourne-Melbourne School of Information: The layout was not designed, everything is not organized.
University of Texas, Austin-School of Information: Good design on labels, but the events got cramped, shown in an uncomfortable way.
University of Washington-Information School: The tabs are the same as full webpage version. But a dropdown list pop out on mobile page, specific for finding information, really handy.

U of Amsterdam, nice responsive design, although in full page mode it's kinda quirky

Tele-

commu-

nications

U of Texas in Austin, do you like to read in this way?

Dedicated Mobile Site
University of North Carolina-School of Information and Library Science: It's a web app, you could tell difference by compare the views with desktop browser. Offer install as a web app to your phone's screen on first time entry. Very clean, like U of Amsterdam. The shortest in page's height.

U of North Carolina, web app!

Find the North Star via mobile devices

When I was 7th grade, I was astounded by the sight of milky way galaxy under the sky of Australia. Because the lack of knowledge, I could only recognize the Crux. Then as I made it to freshman, there were times I took girl(s) or boy(s) out just to see the star. All I could distinguish was Orion's Belt, the Big Dipper, and the w of Cassiopeia. Polaris was very hard to identify due to light hazard of metropolis.

Two free star charts on iOS

In old-fashioned way, we had to use the star chart and compass to identify the stars. Thanks to modern technology, we now can install the digital star chart onto our mobile devices. What's more, with augmented reality, mobile star chart can do all the works on finding the stars and leads us toward the star we want to look up. By using geolocation, mobile devices are able to tell the current position and let the app load current star map. Then with gyroscope, we are able mimic our device as a globe sphere and rotate to find the stars and constellations. I tried two free star charts, surprisingly they all worked even with no Internet connection. Although the free version have limitations on what to see, as a novice I think it should be enough. The upgraded version seems have different wonderful features such as unlock all constellations and their facts, follow the satellites, and augmented reality (more!?). For people who love to watch stars and want to learn more about the sky, buy the full version of the app would let them find their favorite star whenever wherever.

Night Sky Lite doesn't have augmented reality feature, but it offers all 88 constellations. Another downside is the app can't lead you to the star or sign you're trying to find.

SkyView free version have augmented reality and the 12 signs of zodiac with its drawing, plus Hubble telescope and International space station. The app can only navigate to the sun, moon, and zodiac signs.

Maybe it's not ideal to blog via mobile

This the first post I'm using the Blogger mobile app on iPad. I tried the Wordpress app as a way to sketch my blog before I publish. Still, I'm used to Wordpress desktop website to make tunes on my images and contents, and make modifications on HTML. On the desktop it's already lots of work on image editing and HTML tweaking, posting via mobile made the journey even harder. The way you try to embed images is really tricky, think about the sizes and location. Alteration on HTML is confusing and cumbersome, typing and arrange all those is trouble enough. Blogger has probably made all these even more miserable.

Blogger somehow add a lot of unnecessary HTML codes in the blog post. Yes, it is awesome that user can edit their own < div> < span > or maybe CSS. However, typing HTML code on mobile device is not practical, it just take too much time. Even more, if you try to edit the old post , you can only edit it under Html code mode! Not user friendly at all.

Perhaps blogging on a mobile device should stay same as the experience on Facebook or Tumblr. Either focus on text-based content or provide single piece visual content. If I want to post a lengthy trip report with lots of images via mobile app, it will probably drives me nut, and I can't imagine how on earth will I be able to publish a post on a smart phone's tiny screen.

Better QR it before post it

os: I feel Blogger isn't very user friendly on image posting and HTML editing

I’ve never scanned a QR code before this class. Although I heard about QR code couple years ago, it somehow didn’t catch my attention. Based on curiosity I downloaded QR code reader onto my iPad. I scanned and took the shots of some code around University of Washington IMA building, HUB, and Communication building. Furthermore when I got home I tested the QR codes using my partner’s iPhone. Here are some thoughts I would like to share.

Although the sample size was kind of small, among the ads and leaflets on 4 bulletin boards, roughly 10-15% of ads contain QR code. Meaning even though QR serve as an easy way for mobile devices to access online information, it’s not ubiquitous. Maybe ads in modern day still favor just put on hyperlink or short-link, or perhaps most advertisers didn’t know QR code as new way for mobile access. The UW women’s tennis has gone another way around. They just print out their QR codes, without given URLs.  Now if I’m a smart phone user who doesn’t know what a QR code is or a regular desktop user, without a URL I would have to look up on search engine. In this case the search engine would give you several unnecessary results. Somehow U of Wisconsin ranked over U of Washington, even though I’m at Seattle and Google is location based. Searching on Facebook would first lead me to UW women tennis alumni. Therefore it’s always a good idea to put URL on the ads. Otherwise people won’t land on the right spot easily.

Here are the free QR reader apps I tested:

iPhone: QRCodeScan, Scan

iPad: QR, Scan

The use of QR code readers may raise some problems. It seemed different QR readers have their own way to open up a hyperlink. Scan and QR opened via build-in browser, QRCodeScan gracefully integrated with Safari. While QR codes lead to webpages acted normally, codes that lead to its Facebook page appeared having some confusions. Two Facebook pages were tested: Washington women’s tennis and ISOUW ideas of Karl Marx. If you use QR reader with build-in browser, like QR and Scan, the tennis page appeared fine but the ISOUW required you to log-in since the build-in browser were not connected with other browsers or apps. If you use QRCodeScan, which integrate with the Facebook app (assume you already log-in), the ISOUW turned out fine but the tennis page just won’t show up. Huh!?

All I’m suggesting is QR code that leads to Facebook page should be examined and tested before publish. Any hurdle or hassle might just drives away prospective engagements.

Safeway mobile app - when ads and coupons goes mobile

This might sound like a housewife, perhaps house-husband, but the Safeway mobile app has been really helping me on saving money on groceries. The Safeway Just for U is the loyalty program brought by Safeway. By adding the e-coupons into your Safeway card(s), you can get the discount just like using paper coupon. The program save the time to search and cut-out paper coupon, but customer could use both e-coupon and paper coupon at the same time. Hooray for accumulate the discounts! (Discount accumulation never happens in Taiwan. Can you imagine how shocked it was when I learned there are things like multiple coupons or additional 30% off for something that’s already 50% off?)

Safeway app on iPhone

I’ve found the mobile app extremely helpful to look up for nearest Safeway, the weekly ads, and current discounts, and its navigation is pretty easy too. The mobile app on iPad gives full spectrum of view on the merchants, which I like the best. The app for iPhone is a bit harder to use, which the view is limited to a few items per scroll. Somehow because there are two different e-coupon systems, the Coupon Center and Personalized Deal, the coupon lists in these two have to be view separately. On the other hand the mobility brought by iPhone is very handy. Take the iPad out in Safeway is impractical and it adds extra weight. (Been there, done that. Now I always write groceries list down first.)

iPad

iPhone

On the contrary, the use of Just for U portal through the main website is cumbersome. The data list on the website is not automatically categorized like the one on mobile app. For some reason I don’t know why I have had trouble on Google Chrome browser, but worked fine on Internet Explorer. All the teeny-tiny bits on lack of usability might just drive the valuable customers away from its website. No wonder that according to Safeway CEO Steve Burd, mobile users use Just for U 50% more often than those who are confined to desktop devices (Johnsen, 2012).

Safeway website, Just for U on Google Chrome

As a student (who’s just trying to save money) I’m always paying attentions to different grocery stores’ prices. Having these ads going paperless not only helps me constantly updated, it also helps being environmental friendly. In fact Safeway is even considering stop print its ad by end of 2013 (Zwiebach, 2013). With the combination of mobile app and loyalty program, Safeway has caught up the trends and draw customers.
--

Works Cited

Johnsen, M. (2012, 7 19). Safeway's Just for U loyalty card program will bolster sales through rest of year. Retrieved from Drug Store News: http://drugstorenews.com/article/safeways-just-u-loyalty-card-program-will-bolster-sales-through-rest-year

Zwiebach, E. (2013, 2 21). Just for U Could End Print Ads: Safeway. Retrieved from Supermarket News: http://supermarketnews.com/retail-amp-financial/just-u-could-end-print-ads-safeway