Designing Web Code in a Native App

Over the years I've heard developers say, "you can always tell when it's a web app," insinuating that web apps are lacking when compared with native apps. These same folks will claim that web app performance is poor and the design is inferior. Although that might have been true years ago, today's web fairs much better than the web of yesteryear. Our runtimes are superfast, leaving no lack of performance for apps. And the best user experience on the web is generations ahead of that of native apps, with responsive design making web apps a great experience on any device.

The benefits of web apps continue. When well written, anyone with a browser can interact with a web app regardless of platform, version, or device. Its single code base also makes it the overwhelming choice for developers, brands, and companies that don't desire or have the resources to build and maintain native apps for each platform.

[caption id="attachment_114218" align="aligncenter" width="999"] Awesome web apps are awesome apps. Both in a browser or in an app store.[/caption]

Defining the problem

Every day I work with developers who are using ManifoldJS to take great web apps and turn them into store apps. ManifoldJS lets you maintain the spirit of the web by building hosted web apps. Hosted web apps are different because they allow your code to live on a web server just as it does when you access it in a browser. That means the codebase is always up-to-date, you can deploy changes whenever you desire, and, generally, if the code works in the browser then it will work as a hosted web app.

Great web apps have great user experiences and a web app that is designed to work on a wide variety of browsers and devices can perform quite well as a cross-platform hosted web app. Some key characteristics of apps like this are:

1. Responsive layouts. The design presents a good reading/viewing experience no matter what the screen size or orientation. Users can accomplish their goals without need to scroll in more than one direction or zoom in and out to interact with the app.
2. Appropriately-sized fonts. You should be able to easily read the font on the screen. This works both ways - it should be large enough to be read on a small screen, but it should not be ridiculously large on larger screens. Balance is key.
3. Flexible input. The app should support touchscreens, keyboard and mouse; but if you want to support next-generation interfaces, don't forget about input modes like voice or gestures.
4. Speedy delivery. Not everyone has hard-wired access to a fiber optic connection and unlimited bandwidth. Many devices have limited bandwidth or slower processor speeds. Your app should not take too long to load or feel sluggish during interactions.

With all of that taken into account, the question I most frequently get is: How should I design my app? (And they mean that in terms of aesthetics.) In other words, what should the visual design look like? Generally, the options are:

1. Design a single interface for the app, so it looks consistent no matter what platform it's being used on.
2. Design a more "native" interface for each platform to honor its unique look and feel.

Continue reading %Designing Web Code in a Native App%

by Jeff Burtoft via SitePoint