Locassa App Essentials. Mobile Technology

Transcription

1 Locassa App Essentials Mobile Technology

2 What you'll learn 1. Native Apps How apps were intended to work 2. Mobile Websites Responsive design, limited scope 3. HTML5 Apps Old technologies, new name 4. Native App Builders Halfway measure with limited scope 5. Wrapped Web Low-cost, low quality approach 6. Want to know more? Whether at idea stage or just want to embrace mobile, we can help.

3 Native Apps How apps were intended to work Native apps are apps which are written specifically for a particular type of device (or device family) and are written in a language that is native to the device; hence the name. When creating native apps we know what we are building it for, we GENERALLY know the feature set (SEE ANDROID IS DIFFERENT BELOW) and we can design and develop a product which works beautifully on each platform you develop it for. Why is this important? Well, the first aspect of this is that we can maintain a platform consistency across all versions of the app. What we mean by this is that an app which is native to ios (Apples operating system for iphones, ipads and ipod Touches) works and behaves as users of those devices would expect, whereas an app which is native to Android (Google s operating system used by a multitude of third party hardware manufacturers) behaves natively to those users too. In an ideal world all platforms would work the same, look the same and behave the same. A user using one platform would feel immediately at home on any other and the way they interact with your product will be familiar and second nature. Unfortunately we do not live in an ideal world and whilst these platforms share common elements across them there are key differences that would make an ios user feel uncomfortable on an Android app and vice versa. Native apps also provide an optimised experience as they are written for a specific family of devices. Because we can optimise the app for an iphone or an Android phone, we can get the most out of the device; when it is done properly of course. The results are apps that feel very fluid, very engaging and very reliable. When you develop your products you must strive to provide the best product and service possible within your budget and as such, native apps should be seen as the top most level you can work to but which require more thought and development time. Due to the native aspect of these kinds of apps, the downside is that you have to develop a separate product for each platform (remember we don t live in an ideal world!) and so the cost and time implications are higher than that of other methods. When the quality of your product and the protection of your brand is concerned, you really can t do anything else but you will need to manage the development process to ensure the products feel native to each platform whilst providing a uniform brand experience. It should be noted, as we discuss other approaches, that whilst native delivers undoubtedly the best quality product, it is surprisingly not the most expensive

4 in the industry. The cost value for native is incredibly high and should be your preferred method of development for your brand.

5 Mobile Websites Responsive design, limited scope Mobile websites are nothing new, in fact since our mobile phones became smart we have had web browsers and galore, however they has evolved quite considerably in recent years especially as the predilection for mobile has increased. Mobile websites themselves aren t a true form of mobile app but I m including them here for the sake of completeness. Taking a purely mobile website approach is deciding to simply have a mobile friendly version of your website, or in more recent times, a responsive version which adapts from displaying on a desktop or laptop down to a tablet or phone accordingly. Responsive design takes a lot of the elements of HTML5 (discussed in a moment) to render content appropriately for the target device. What this means is that viewing a responsive website on a desktop SHOULD provide the optimum experience for that size of screen (or range thereof). When the size of the device scales down to that of a tablet or phone, the website can adapt its layout accordingly and respond with the best layout possible to maintain legibility and usability. The great thing about responsive design is that there is no limit to what you can change for the various sizes of screen, so for instance you can hide entire sections of your site on the phone and show other elements in their place. You can also change the entire style of the site when displayed on a mobile device if you want to, providing perhaps a more natural mobile-like interface for your customers. To create a responsive website you would generally use one of two available frameworks to make your life a whole lot simpler. Firstly there is Twitter Bootstrap, a great entry-level (but not lacking features!) responsive framework with all manner of grid systems and JavaScript plugins to get you going quickly. If you require more customisation and a deeper feature-set then you really need to take a look at Zurb Foundation. Similar in approach and function to Twitter Bootstrap, Zurb Foundation gives you a myriad of features to keep even the die-hard responsive nut happy for days! What approach you take with a mobile website, and whether you need one instead of an app is a key point to consider before embarking on any detailed app project. In quite a few cases you will find that a simple responsive website is all that you need and the costs associated with this approach is minimal when compared to other more specific app approaches. Regardless of whether you end up creating a native or HTML5 app for your product and service, you should still ensure your corporate website or app

6 supporting websites are responsive and provide an optimum experience for your customer base even before they hit your app.

7 HTML5 Apps Old technologies, new name You may have heard of this new thing called HTML5 well in reality it s not a new thing at all but merely a collection of existing technologies all packaged up under a new name. The basic components of HTML5 are HTML (obviously!), CSS3 and JavaScript. These technologies are most commonly used to create dynamic (and static) web content for web pages and web applications; on mobile they are used to create a cross-platform product which can be updated in real-time. There are two main uses for HTML5, pure HTML5 apps and native apps with HTML5 content. With pure HTML5 products, the app itself doesn t technically exist on the users device, it is merely a web based product and as such the user either browses to the site or taps a previously saved shortcut from their home screen. The content from the web server is then rendered by the browser and the user can interact with the elements within the product. As there is no native app here, the performance is not as good, although it is increasing all the time, and the fluidity is not as smooth. The other main use for HTML5 is in the side of content. When combined with a native app for example, large amounts of dynamic content can be created once in HTML5 and delivered for rendering within a native app. This is commonly used where large amounts of content need to be curated on a regular basis and for which creating it via a completely native solution would be cost or time prohibitive. This approach of combining native apps with HTML5 content can be seen with many magazine and newspaper apps for which the short Curation window available for a daily newspaper makes other options obsolete. HTML5 content can be created in a variety of ways and using a myriad of different tools. Products from Adobe allow easy HTML5 authoring especially taking animated content in the form of Flash movies and converting it into something of a more open standard. For this reason, many Flash developers have found a recent transition into HTML5 content creation and utilised these kinds of products to make the transition as seamless as possible. The rich interactive nature of HTML5 apps means that developers can create rich interactive content with minimal effort in comparison to a purely native approach although the quality of animation and transitions is not quite as fluid. With HTML5 apps and content the real power lies in the cross-platform nature. With this technology, and in contrast to native apps, the content or app can be created once and deployed amongst multiple platforms; basically any device which can render a web page can handle HTML5 content. However, due to this cross platform nature, you will always

8 be comprising what you produce to cater for the unknown. When you are writing content to target iphones, ipads, Android phones and Android tablets, you will have to work to a common feature set which all of those devices can offer. Whilst it is possible to begin adapting the feature set within the HTML5 for the specific device it is running on, you are verging into the area where you completely defy the whole reason of a cross platform technology in the first place. Cost implications of HTML5 are generally lower than when compared to fully native however if the quality of experience is your primary concern then you may wish to choose a different approach.

9 Native App Builders Halfway measure with limited scope Native app builders, along with Wrapped Web (see below) are one-stop-shops for creating cross-platform apps in the minimum of time; but often lacking in quality. With a native app builder product, such as App Machine, you can create their own native products from a set of template elements within the builder itself. You can choose various screen layouts and elements to include and define the data to be presented. At the end of the process a native app is built, sometimes a native app for each product, and which you can submit to the relevant store for approval. When compared to HTML5 content, the native app builder products perform better as the end result is a native app, albeit a heavily template and stock native app. The animations, where provided, are smooth and transitions behave as you would expect from a native app with none of the screen lag of HTML5. The main downside to native app builders is that you are inherently constrained by the available templates and screen elements provided to you. Whilst it is possible to change the colour and style of the pre-set elements, the end results always feel heavily templated and lacking in quality. These kinds of products are perfectly fine for the small business owner who wants to have a hand at developing an app themselves, and for where their brand image is not particularly crucial however you should think carefully before you take this route. If you are a medium to large brand, taking this approach will almost certainly damage your brand and undervalue your customer base, for which it is very difficult to come back from. The cost of using these native app builder tools varies depending on the exact product you use to build your app with, as does the ease by which you can build it in the first place, but be sure to weigh up the true cost of your brand before you place it on something templated such as this. It is also worth looking into the on-going costs associated with these products as sometimes you have to pay heavily for simple updates to your product, taking an initially attractive looking figure and turning it into something somewhat more grizzly.

10 Wrapped Web Low-cost, low quality approach When it comes to the dark end of app development they don t come much darker than Wrapped Web. The approach adopted with these kinds of products is similar in nature to the native app builders above, however the actual output is that of a lightweight native container and an HTML5 interface. These products, such as PhoneGap, Titanium and Appcelerator, allow you to create your product using standard HTML elements and CSS positioning and then click a single button to package everything up into a set of native products for submission to the relevant app stores. So why are these in the dark end of app development? Quite simply the quality; you are effectively getting the bad points from HTML5 without the good ones. With these kinds of apps you have the limitations of HTML5 apps in that when developing for cross platform you have to compromise the feature set somewhat, and combining with a lack of live updating (which you get with HTML5). The worst part is you have a perceived performance loss due to the fact that people will think (if you re really lucky!) that it is in fact a native app. If there is one thing you take away from this chapter it should be this, there is no magic button. It is quite simply not possible to create something and deploy native apps across all platforms and still maintain the quality of what you are producing. If you are even considering these kinds of products or Wrapped Web in general then please stop now and start this chapter again; you will thank me in the long run. What is really interesting is when you look at the cost implications of taking this approach it is not as you may expect. Whilst certain products such as PhoneGap can be fairly cheap, companies that offer a more bespoke Wrapped Web approach generally charge more than native to produce something of substantially lower quality. It seems crazy right? Well, it s easily done, the margins are a lot higher than native development and as such the value for money drops through the floor. In an ideal world these types of products and approaches would be outlawed; sadly we are not living in an ideal world and so the best I can do is help you avoid them at any cost. Even taking a step up to a native app builder, whilst not ideal, will still give you a better result for less money. But as with all of these one-size-fits-all approaches, you can seriously damage your brand if you get it wrong and with Wrapped Web, that is almost inevitable.

11 Want to know more? Whether at idea stage or just want to embrace mobile, we can help. GET IN TOUCH