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.


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/


The State of Digital Type in 2018

The State of Digital Type in 2018

When I tell people I’m a designer, they sometimes ask, “Does the world need another typeface?’ I tell them typography is important because letterforms, like the human voice, have character and personality, which communicate with us even before the words they form do. The medium is the message, the “how” matters as much as the “what.” And also like a human voice, type has its own distinctions, biases, patterns, pitches. Even the untrained eye will unconsciously receive these signals.

When a typeface reaches ubiquity it becomes banal or worse, contemptible. For brands, the risk in using these familiar faces means losing their individuality. It’s why IBM ditched Helvetica last year and Nike is distancing themselves from Futura. Brands—like people—are unique and the smart ones use type to communicate their values.

Meet the Grotesques

The demand for character-driven type in digital design has always been around—even if the means, ahem webfonts—weren’t yet. And in the last five to seven years there’s been a shift from the cold, mechanical utility of Helvetica and the rest of the modernist typefaces towards more expressive typography. 2017 saw more expressive type trends. It’s not just Coca-Cola’s TCCC Unity with its’ Grotesque-style characteristics, there were other brands which employed—or reemployed in the case of YouTube—Grotesque sans for their character and charm. Dropbox, SSSW, and YouTube all made updates. 2018 will be the year of the Grotesques.

What makes it Grotesque?

  • Irregular proportions
  • Near equal width uppercase letters
  • Spurred uppercase G and R
  • Double-story “a” and sometimes “g”
  • Square-shaped “M”
  • Similar cap and ascender height

Grotesques on the web:

  • 99designs (Larsseit, Linotype)
  • Bitbucket (Circular, Lineto)
  • Casper (Calbre, Klim Type Foundry)
  • Lonely Planet (Benton Sans, Font Bureau)
  • Orbital Insight (Neuzit Grotesk, Fontshop)
  • Quartz (Adelle Sans, TypeTogether)
  • Spectacles / Snapchat (Spectactles)
  • Vivint (Circular, Lineto)

Pairs well with…

Like a good dinner party, you’ll want to pair your typeface with a complimentary and maybe even a little contrasting personality. You may very well go with Garalde, an old style serif. The stroke max widths and larger x-heights are similar to many Grotesques but the serifs are different enough to add some distinction. Also, because they’re even older, drawn by skilled trade craftsman hundreds of years ago, they add the elegance of a Dutch Golden Age painting. If you really want your brand or digital experience to appear sophisticated, make this your primary face.

Old Style serifs:

  • Designed during the 16th and 17th centuries
  • Especially in France
  • More upright letters and horizontal crossbars
  • Low contrast between thick and thin strokes
  • Bracketed serifs

Example fonts:

  • Arno (Adobe Type)
  • Arnhem (Our Type)
  • Baskerville (Mergenthaler Linotype Company, Deberny & Peignot)
  • Galaxie Copernicus (Constellation, Village)
  • Plantin (Monotype Imaging)

Eventually these Grotesque and Garalde’s will run their course and we’ll move on to the next typographic style du jour. Until then we’re gonna be hanging with these quirky characters for a while. Could be worse, could be your weird uncle, Eurostile.