How to Create an App Version of Your Website
For many website owners the next step in their digital strategy is to extend their existing website and offer an app version of that site. For example, if you’re running an e-commerce store it’s a logical next step to create an app version of your site to capture the ever-growing array of mobile users who shop online and provide enhanced customer service.
In this article we’ll walk you through what’s involved in creating an app version of your site and show you how you can manage both services in a cost-effective manor.
Re-purposing a central repository of data (i.e. a database)
Most e-commerce stores are built upon a central repository of information. This usually includes a database table containing user logins and another set of tables with products for sale. The great thing about this model is that there’s no reason to re-invent what you’re already using for the web, you can use the same information for your mobile app.
Commonly e-commerce retailers on the web will be using a MySQL database which exists in the cloud and can be authenticated against using your mobile app. This database can also be used to display the same content and images stored in your cloud location by referencing those product details using static URLs. Provided your images can be scaled to size, very little actual work is likely to be required to bring your web images and data across to your new shiny app.
Choosing between Native and Hybrid HTML5 application development
One of the first decisions you’ll be required to make when deciding to build a mobile app is whether to go Native or Hybrid HTML5. Both options have their strong points but are very different.
In the below table we’ve summarised the key difference you need to be aware of when choosing to build a Native or Hybrid HTML5 mobile application.
|Android specific version||Yes||No|
|iOS specific version||Yes||No|
|Device specific feature limitations||No||Yes|
In short, if you choose to develop a HTML5 version of your website for mobile you’ll save money provided you don’t intend to utilise the more advanced in-built functionality of mobile devices. This includes features such as GPS functionality and some notification based services amongst others; but the biggest limitation you may see is around performance. It’s a well documented issue in the HTML5 vs Native debate that performance of Native apps is far better. They’re faster, smoother, and give you more control to implement more visually stunning applications which should be a consideration if you’re looking to offer your app long-term.
Review your web information architecture before implementing your mobile app
Most mobile apps do not have the same information architecture (IA) as their web counterparts. Your mobile app will generally be more to the point, contain only what is absolutely necessary, and although it will contain a large amount of the same content, it will generally be more product-driven. That being said, this is why refining your site IA and how your users are able to navigate and search your app matters so much.
If your website does not contain search facility; your mobile app definitely needs to. Your mobile users will want to be able to search for your products because of the limited amount of screen space on offer. Because your mobile navigation will be limited or hidden using a ‘hamburger type mobile menu’, search will be the go-to navigation for your customers if they can’t see any other option. This is a basic example of why app IA is different to web-based IA, so spend some time refining what goes into your app IA before your implementation phase and you’ll be much better off.
Performance of your mobile application is everything
There’s nothing worse than a slow-loading website right? No…actually a slow loading mobile app is far worse because in general your mobile data speeds will be less than that of your desktop counterpart. That being said you need to ensure your app runs smooth and is a breeze for your users to access.
Below are some top tips to ensure your mobile app is performing at it’s optimal state:
- Ensure your images are optimised: Services like TinyPNG are great for ensuring images load fast on the web and mobile. TinyPNG essentially shrinks the file size of PNG images without any loss of quality up to 70% and can really help to make your applications pop.
- Hire a professional: The reality is there’s a vast difference in between the skills that web developers utilise each day and that of mobile application developers. They’re two very different skills sets. If you’re looking to develop an app, partner with a professional with years of experience in app development to help out. Otherwise you may end up with a poorly-built, expensive to update mess.
- Native is the better choice long-term: Mark Zuckerberg was quoted to say that “the biggest mistake Facebook ever made was to go HTML5 over Native” when building their mobile app product. That being said Native apps will provide a better outcome than HTML5, but you have to consider whether your budget permits the cost involved in this and most importantly whether you require the feature set only available to Native code bases such as Java and Swift.
- Don’t get carried away with unnecessary graphics: Professionalism is the key when developing mobile apps. Within this in mind we can all do without slow-loading videos and unnecessary imagery that inhibit mobile user experience.
- Host your rich content externally to your app: I hate downloading 200MB apps each time they need an update. If you’re smart, make sure your product images, videos, and site assets are hosted externally in the cloud on service such as Amazon Web Services. Not only is this cost effective but will ensure a faster download and update of your app for your user base.
If your digital strategy is ready to take the next step and release a mobile application version of your existing website, the above tips and tricks will ensure that your mobile product release is a success.
If you’re looking to develop a mobile app to extend the functionality of your existing website, get in touch with the mobile application development team at OSE.