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 super fast, leaving no lack of performance for apps. And the best user experience on the web is generations ahead of that of native apps, with a 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. Awesome Web Apps are Awesome Apps. Both in a Browser or in an App Store.
Defining the ProblemEvery 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:
- Responsive layouts. The design presents a good reading/viewing experience no matter what the screen size or orientation. Users can accomplish their goals without the need to scroll in more than one direction or zoom in and out to interact with the app.
- 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 giant screens. Balance is key.
- 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.
- 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.
- Design a single interface for the app, so it looks consistent no matter what platform it’s being used on.
- Design a more “native” interface for each platform to honor its unique look and feel.
- Scan your site for out-of-date libraries, layout issues, and accessibility
- Use virtual machines for Mac, Linux, and Windows
- Remotely test for Microsoft Edge on your own device
- Coding Lab on GitHub: Cross-browser testing and best practices
- Woah, I can test Edge & IE on a Mac & Linux! (from Rey Bango)
- The Edge Rendering Engine that makes the Web just work (from Jacob Rossi)
- Unleash 3D rendering with WebGL (from David Catuhe including the vorlon.JS and babylonJS projects)
- Hosted web apps and web platform innovations (from Kevin Hill and Kiril Seksenov including the manifold.JS project)