Cross Platform Strategies For Mobile

Cross Platform Strategies For Mobile

At MJD Interactive we develop high quality, award-winning mobile apps. We take great care in building apps that are responsive, custom, and easy to use. People have very little patience for a clumsy or slow mobile site or app.

Google research recently found that 29% of smartphone users will immediately switch to another site or app if it doesn’t satisfy their needs – that is, they can’t find information or it’s too slow1. Apps need to load faster, respond quicker, and have more robust error handling. Currently the best way to achieve this is with native development. That said, our clients are always looking for strategic ways to add value to their digital products. A couple great ways to do that are by making updates to an app easier, and by building it with cross platform code that can be used for both iOS and Android platforms.

Making updates to an app easier

The traditional way to update an app is to go through the app store. But there are also ways to update the app remotely. Advantages:

  • Changes happen immediately, mitigating the need to go through the sometimes-unpredictable App Store approval process
  • You avoid ‘blowing out’ good reviews; updating an app on the iOS app store moves reviews from ‘current version’ to ‘all versions’ and reduces their profile
  • Updates will happen to both iOS and Android versions, saving development time and cost

How does this magic happen?

We do this by using web views, which are essentially web browsers within the app. Like any web browser, they can render HTML/CSS and process javascript, and get files from a server or from local storage.

Ok, so why do we need native development at all? Why not just build everything in a web view?

It’s all about compromises. Users of a non-native app will immediately perceive the app is of lower quality: the UI won’t respond as quickly or smoothly; common gestures and functions won’t work as expected; there will be delays and stuttering. Ultimately, the app won’t feel native, and your users will know it.

So how does MJD leverage the advantages of web views, without compromising performance?

Native controls provide elegant, buttery-smooth interactions. HTML/CSS is best at laying out text and images. By strategically marrying the two, your app looks and feels like the user expects, and offers a great experience.

Here is an example from the SAG-AFTRA app that MJD developed. The slide control at the top and the button at the bottom are native. The slide control will smoothly animate over, and the button will respond like normal native buttons do. The central part—with the nice stylized text—is perfect for HTML/CSS.

The best part: when SAG-AFTRA needed to change copy, all we had to do was update the HTML on the server, and it was instantly updated on both iOS and Android. No App Store/Google Play re-submission necessary.

Can we take this too far?

Yes! In a previous life, I worked for a company that would build up an entire app from a single JSON file. Everything was completely dynamic. Sounds great, right? No! It was un-maintainable. No one knew how to interpret it or change things. We spent months undoing that and writing the code natively.

Here are some questions we use as guide when deciding what to make cross platform:

  • What is the likelihood this text/content will change?
  • How long will it take to develop on separate platforms vs writing in HTML/CSS/Javascript?
  • Will this compromise the user experience?

It’s a balance, and that’s where MJD’s expertise comes in. We know the pitfalls and we do our best to align the client’s goals with the best possible user experience.

I need help!

If you’d like to chat about getting your mobile app ready for iPhone X get in touch with Michael Maginnis at (800) 619-3930 x23 or email him at solutions@mjdinteractive.com.


The Top Four Technologies from Shop.org 2017

The Top Four Technologies from Shop.org 2017

Shop.org 2017, the NRF conference focused on e-Commerce, went down last week. MJD was there both as a participant in the renowned Tech Lab, as well as a group of digital retail geeks excited to check things out. Here’s what we found.

Tech Lab was definitely a highlight of the conference. It allowed attendees to experience “technologies of the future” via custom-designed simulations in the store, home, and office. Visitors had a chance to talk directly with startup founders about how their technologies will transfer from the lab to the showroom and full retail stack. To curate the lab, the NRF carefully selected twenty-five emerging technologies that best represent the entire purchase experience including product development, shopper consideration, customer engagement, purchase and post-purchase experience and more. MJD was selected as the sole digital innovation agency to show retailers how to build digital products and experiences that fulfill their brand promise and give them a competitive edge in the hotly contested retail space.

Following are four technologies that we could see making an impact in retail over the next couple years.

Aila

Interactive Kiosk

The majority of retailers continue to display products on shelves with only a tiny amount of valuable product information. A couple of the reasons for Amazon’s success is that you can read reviews on products and view how-to videos. That’s tough to do on a physical shelf, but a kiosk with a barcode scanner is a good solution to give customers the information they need to make a purchase. Aila adds additional optics and lighting to an off the shelf iPad, which then enables retailers to build very user-friendly scanning apps on top of iOS. A custom app with Aila’s kiosk hardware is the best possible combination for building a middle of aisle or end of aisle barcode scanning kiosk that we have yet seen.

Visa and Payscout

Interactive VR Checkout

Payscout VR Commerce allows users to buy physical products inside virtual reality experiences. It’s the first implementation of this technology that we’ve seen that starts to remove the friction of buying in the VR environment. The trick is that you set up a Visa Checkout account before going into the virtual world. This allows the application to show you product, place it in a cart, and then easily checkout. Most VR shopping apps miss badly at the checkout because there isn’t currently a good user interface inside the goggles for entering all the personal information and credit card data required to check out. From Visa:

“The process is fairly simple, but the possibilities with it are endless. With virtual reality, users can shop at a variety of merchant locations without actually visiting the stores. They can pick up products and get a feel for size, color, and dimensions while wearing a VR headset. The only thing they cannot experience is the tangible elements of the product, like the material it is made of or how much it weighs.”

Augment

SDK and Platform to add AR to retail shopping apps

Apple themselves have used their last two product unveiling events to hype Ikea’s new augmented reality application. Augment is a company that is helping bring that functionality to anyone. Augment includes an SDK and platform that allows a retailer to add augmented reality 3D objects to any application. They also offer a 3D view for web e-commerce. This is a great way for retailers to begin prototyping AR technologies.

Slyce

Visual Search

Let’s say you’re walking around on a crowded city sidewalk and you spot some sneakers that you just love. Slyce allows you to use your phone’s camera to scan the shoes and tell you who makes them, what style they are, and where to buy them. This also works in print catalogs and photos.

This was a really cool tool that bridges the gap between being inspired by a product you see and actually purchasing it. Slyce is signing up retailers left and right, so look for this app to make big waves in retail.

Conclusion

It was a good year for technology innovation at Shop.org, but it did leave us wanting something more. Most of the technology could be classified as a digital tactic, rather than a strategic plan to really disrupt retail. We’re currently working with clients to create digital products and experiences to fulfill their brand promise and tell a compelling story rather than just follow the crowd into the digital jungle. Following tech trends often leads to spending a boatload of money on technology that just doesn’t resonate with customers. The success we’ve been having with clients like American Girl, GoPro, Electrolux and The Container Store all deliver on combining digital with physical spaces to capture imaginations. Doing that leads to customers falling ever deeper in love with their favorite brands, and that is a great way for us to not only compete with threats like Amazon, but win.

If that sounds interesting to you, please get in touch. We’d love to help you change the world of retail.

Click here for more information on MJD’s Digital Retail Offering.

P.S. I got to meet Tyra Banks and she is absolutely delightful.


How to Get Your Mobile App Ready for iPhone X

How to Get Your Mobile App Ready for iPhone X

iPhone X devices started arriving for customers last week, heralding the biggest hardware change to the iPhone line since its inception. With edge-to-edge display—and the infamous “notch”—the new form factor offers challenges that need to be handled when updating your apps. We’ve been helping our clients update their apps to get them looking and working great with the new phone, and we thought we’d share some information with everyone on the steps you should take.

The beautiful new iPhone X.

How bad is it?

The changes are pretty significant; you can still see them for yourself in the wild, as many high-profile apps have not been updated for iPhone X. Compare Google Maps, which hasn’t been updated, with Apple Maps:

Google Maps vs. Apple Maps on iPhone X

Apple Maps takes advantage of the entire screen, whereas Google Maps is relegated to suffering an ugly letterbox treatment. Technically speaking, this is no bueno. Customers will notice this; it instantly makes your app look bad when compared to a competitor’s iPhone X-ready app.

Ok, so what do I have to do?

The amount of work needed depends on if your app uses stock iOS controls and auto layout. If it does, supporting the iPhone X could be as simple as linking against the iOS 11 SDK. If you are using custom controls—which most modern apps are—you’ll have some work to do.

Here are some things to think about when updating apps for iPhone X.

iPhone X Screen Size and Resolution

Screen size

The iPhone X features Apple’s biggest phone display to date, measuring 5.8 inches on the diagonal—even bigger than the display on the 5.5 inch iPhone 8 Plus. The removal of the Home button and minimized screen bezel enables this larger screen size to inhabit a physically smaller device; it feels closer to the 4.7 inch phones— iPhone 6, 6s, 7, and 8—than it does the Plus models.

And while iPhone X feels similar to the 4.7 inch iPhone models, there are 145 points more height-wise to play with. A good strategy for iPhone X success is taking advantage of the 20% taller screen with more relevant content, and allowing more breathing space around some of the more complicated interfaces.

Another thing to consider is iPhone X’s different aspect ratio. If your application features photos or video optimized for display on iPhone 6, 7, or 8, those will have to be reworked.

iPhone X UI Controls layout.

Layout

If you are not linking against iOS 11 and using the Safe Area Layout guides, chances are your UI controls will not end up properly spaced to the device edges. iPhone X’s top notch and rounded corners will clip or hide things that are normally fine on all other iPhone models, causing potentially major problems.

New larger navigation bars were introduced with iOS 11, and while not specific to iPhone X, you should definitely take advantage of them: the larger bars work well on the taller iPhone X, and come with animations that add a nice level of polish without requiring investment of time for custom development.

Finally, taller screens require special consideration when positioning buttons in a layout. Much has been written on this subject, but it suffices to say iPhone X’s height will require some consideration when optimizing the interface user experience.

Gestures

To maximize the screen size, the iPhone X said “so long” to the Home button. As a result, the phone’s interface is almost entirely dependent on gestures. Summoning the App Switcher or going to Home screen is achieved by swiping up from the Home Indicator (the small bar near the bottom of the display). Reachability is now activated by swiping down on the Home Indicator.

This primarily gesture-based interface is a significant departure from prior devices, and you’d do well to infuse your app with these behaviors. Some user interface and user experience changes will be important, if not necessary, in order to stay current. However, be sure to not interfere with the system gestures, as that will most certainly frustrate your users. Keep user input and controls from the very bottom of the screen, as they may be inadvertently activated when the user attempts to go back home, switch apps, etc (or conversely accidentally interact with the indicator rather than the app UI controls).

Face ID

When it ushered out the Home button, iPhone X said “goodbye” to the finger scanner, so if your app makes use of Touch ID, you will now have to add support for Face ID. Also, be prepared to support both Touch ID and Face ID for the next several years, until you no longer need to support iPhone 8 (and earlier) models.

Summing it up

Almost all apps will need to be updated to support the iPhone X. How far your app deviates from the stock iOS controls will dictate how much work your app will need. If you need help freshening up your user interface or reworking your codebase, get in touch – we’d love to help.

I need help!

If you’d like to chat about getting your mobile app ready for iPhone X get in touch with Michael Maginnis at (800) 619-3930 x23 or email him at solutions@mjdinteractive.com.

Resources:

  • Human Interface Guidelines iPhone X: https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/
  • What’s New in iOS 11: https://developer.apple.com/ios/human-interface-guidelines/overview/whats-new/
  • Building Apps for iPhone X video: https://developer.apple.com/videos/play/fall2017/201/