The term ‘hybrid app’ is a fairly loaded term these days; it means different things to different people. For me, it means a mobile app that in some way uses a combination of native and web technologies.
Thursday 14 Jan 2016
This article was written on GitHub. You can raise issues, create pull requests or even fork the content... its open source
This week is all about hybrid apps for me. On Wednesday, we released the first in a weekly series of videos called ‘Web Hack Wednesday’, this week's edition is on Hybrid apps. On Friday, I am speaking at NDC London about ‘The murky world of hybrid apps’. I wanted to write an article which summarises some of the key points around hybrid apps. The videos and resources listed at the bottom will give you more detail, but I thought it made sense to cover some of the basics here.
The decision on whether to go with hybrid or not is a complex one. There are many conflicting priorities and concerns but here are some of the key considerations for and against: Look at hybrid if ...
The goal with any app is to provide a great user experience and hybrid apps are no different. A well designed hybrid app can be a superb experience and often better than most native apps. Here are 5 top tips for making hybrid apps awesome. 1) Be Responsive. Your app should adapt to the viewport that is being used. This could be 4" or 80". Responsive web design is a must have for this. 2) Be Fast. One of the top complaints from people around hybrid apps is that they are slow. But they don't have to be. Checkout YSlow and Google Pagespeed Insights to make sure your web app is sports-car quick 3) Offline. You might think that hybrid apps cannot work offline ... wrong, check out the FT web app. There are three things that can help you make your hybrid app work offline App Cache Manifest, IndexDb and Local Storage 4) Design as an app. UI makes a big difference. If your app looks like a website, users will think it is a website and rate it negatively. Avoid 'web' UI conventions like banner adverts, footers, on-page or complex main navigation bars. There are a bunch of UI frameworks that can help you design your HTML and CSS to be more app-like. See the resources at the bottom for links 5) Platform Integration. At the very least, you should go to the effort of having the right tiles/icons for your app. But if you can, take it a step further with Apache Cordova and/or Project Westminster for Windows
All my articles are written and managed as Markdown files on GitHub.
Please add an issue or submit a pull request if something is not right on this article or you have a comment.