Building A Website For Your App

Our guest post this week is written by Jean-Eudes Lepelletier of Tapikeo and iVocAudio. Jean-Eudes posted on our forum last month with a long list of notes about how he built the websites to promote his apps. The notes were so extensive that I invited him to publish on our blog. Website creation isn’t everyone’s core skill, and the resources he mentions could be useful to others who are managing their own sites.

Here are the steps I followed to set-up websites for each of my two apps : http://www.tapikeo.com  and http://www.ivocaudio.com

Web Hosting

Choose a company to host your website (I chose the french company ovh http://www.ovh.com/fr/hebergement_mutualise/), and buy the domain name. Generally you can do both at the same time. I selected the minimum plan on a shared server, around $20 for one year, including several email accounts, 25 GB storage, and good customer service.

Templates

Buy the templates you need from a specialised website, that are easily customizable. In my case, the only modifications I was looking for was updating .html files. I chose http://themeforest.net/item/my-application/96345 for $10.00. After purchase you can download a Zip file. You just have to extract it onto your hard-drive and you’ll get a parent directory called www/.

First customization step – Choose the tabs/pages for your website and update necessary html pages. I chose to have 5 tabs for Tapikeo (http://www.tapikeo.com) : home, screenshots, press, data about my app (grids), contact. In order to modify the .html documents, I used X-code on my Mac, and Notepad++ on my windows-based PC (which supports find/replace in multiple files and is free).

Second customization step – Write the entire content of your app description on the files on your hard drive in www/ directory.

Demo Video

Create a demo video of your app. You can either film your iDevice with a camera, or you can make a screencast (http://en.wikipedia.org/wiki/Screencast). I chose the second option, and I bought the “Screenflow” Mac app (but it’s expensive!). I’ve seen some other free software but this one is really great and includes the possibility to turn the mouse pointer into a little dot representing the finger on the screen, choose its width/alpha, and you can adjust the quality/format of the output. Here’s the iTunes link : http://itunes.apple.com/fr/app/screenflow/id422025166?mt=12.

Once your film is created, you upload it onto a video sharing platform, Youtube, Dailymotion, Vimeo etc. Since in the template I bought all the formatting was done with Vimeo, I decided to use Vimeo.

FTP Software

Download FTP software. Since I’m using both a Mac and a Windows-based PC, I chose :

– on my Mac : Cyberduck http://cyberduck.ch/ which is free and opensource.

– on my PC : Filezilla,  http://filezilla-project.org/ which is free.

Upload the www/ directory that you customized to the server, using the IDs given by the hosting company in step 1.

When your domain is ready (which might take up to 3 days depending on the country you read the website from) after step 1 is completed, you can type-in the URL of your website (http://www.tapikeo.com for me) and see what it gives for real! Before that you can test launch the copy of your website from your hard drive, by clicking on the file www/index.html.

Analytics

If you want to get details such us “who visits my website, from what country/town, to check what page, etc.”, then open a Google Analytics account: http://www.google.com/intl/fr/analytics/. All you have to do is to copy paste the code snippet that will be given by google analytics into each html file you want to grab data about. Then you’ll see every how your metrics and usage patterns evolve.

In order to know at each second how many people are reading your website, you can use a third party website such as www.whos.amung.us/stats/iyjqs1jbr1tp/ which is free for basic functions. This system is very nice because when you launch a campaign, you generally see people rushing to your website. Implementation is simple: you just need to copy-paste the code snippet from the third party app into each .html file you want to show the item on. In order to see the result, go to  http://www.tapikeo.com, and take a look on the right hand-side of the screen : you’ll see a red “button” with a pedestrian on it and number (in my case it usually says “1” -> you :-))

You can also display a button in order to manage users satisfaction. I used Getsatisfaction for Tapikeo:  http://getsatisfaction.com/ivocaudio. I think it can be very interesting when you have really many users or a very interacting community which is not my case. I only had less than 10 ideas/comments through this “Feedback” button (but I didn’t link to this website from within the app). All of them were very interesting to me though.

Summary

Professional website designers might laugh when reading this article, but for a Dad without knowledge at the beginning… it required a lot of effort to gather this information on my own. The second time around, when I created the website for my second app, it was a much easier process.