Native App and Mobile Web App m.feestdagen-belgie.be

Go to

Major Updates

  • 2016:
    • Web App: migration to SSL-HTTPS and HTTP/2 and HSTS, added Google Chrome manifest, added universal calendar 1830-2099.
    • Android App: migration to HTTPS, upgraded the IDE to Android Studio V1.5, migrated Google Analytics for Apps to Firebase Analytics for Apps, migrated the Google Mobile Ads SDK to Firebase AdMob Ads SDK, upgraded Gradle to V2.14, upgraded the Facebook SDK to V4, upgraded the Facebook Audience Network SDK to V4.
  • 2015Q1:
    • Web App: activated a new A/B Test for enabling ads -versus- disabling ads in the mobile webapp. The results are sent to Google Analytics for analysis. Winner: none – which was unexpected at least by me, the average Time On Site did not differ significantly between the two variants.
    • Web App: activated a new A/B Test for responsive ad units -versus- fixed size 320×50 ad units in the mobile webapp. The results are sent to Google Analytics for analysis. Winner: fixed size ad units 320×50, which was again unexpected – at least by me.
  • 2014Q4:
    • Android App: new feature Integration with the Google Search App. This means that the Search App opens a deep link of our app if you click an item in the Search App (opposed to a page of the mobile website). This is a ground-breaking feature.
    • Android App: new feature Facebook App Links (app deep links).
    • Android App: new feature Facebook Audience Network native ads.
    • Android App: new feature Google AdMob native ads.
    • Android App: new feature Google App Indexing (app deep links).
    • Android App: migrate the development from the IDE Eclipse Android Developer Tools to the IDE Android Studio (based on JetBrains IntelliJ).
    • Web App: upgraded the Google AdSense fixed size 320×50 ad units to responsive Ad Units.
    • Added the data of the holidays (public holidays and school vacations) for the year 2016.
  • 2014Q3:
    • Milestone reached of 5000 Android App installations.
    • Added feature Facebook SDK for Android for app analytics purposes, and the future implementation of the Facebook Audience Network.
  • 2014Q1:
    • Added the data of the holidays for the year 2015.
    • Major upgrade of the jQuery Mobile framework to V1.4.2.
    • Upgraded the Google Analytics legacy edition to the new Universal Analytics interface.
  • 2014Q2:
    • Released the Amazon App (an Android App edition).

Overview

Target audience: 15-30y.

This is a mobile property that has been designed specifically for smartphones. By design, the users with a tablet will keep using the desktop website.

This service is offered on various platforms such as an HTML5 web app, a native Android App, a Firefox OS App and an Amazon App (Android edition). An iPhone App is not available because the hardware to develop an iPhone App was not provided for.

The Amazon App (Android edition) is primarily targeted at Amazon Kindle devices and the brand new Amazon Fire phone. You can also install these Amazon apps on any Android device using the Amazon App Store app for Android. So this edition increases the potential reach of the app.

Launch dates:

  • Web App: February 2013.
  • Android App: September 2013.
  • Firefox OS App: September 2013.
  • Amazon App (Android edition): July 2014.

Statistics

The app was launched in early 2013. It has now become clear that the year 2015 will be year of mobile for the country Belgium. This is clearly backed by the reach statistics (YTD March 18, 2015). The graphs speak for themselves (the graphs are auto-generated by this Custom Analytics Dashboard).

fdb mfdb reach stats
  • Web Traffic:
    • Year 2013: 56000 Unique Visitors, 118000 Page Views.
    • Year 2014: 300000 Unique Visitors (that is a 6x increase vs. 2013).
  • Android App: The number of app installs are increasing steadily.
    • @ Sep2013: first release.
    • @ Feb2014: 1100 Current App Installs, 1600 App Downloads.
    • @ Jul2014: 2475 Current App Installs, 4200 App Downloads.
    • @ Dec2014: 2800 Current App Installs, 5500 App Downloads.
  • Usage:
    • Webapp 70%.
    • Android App 29%.
    • Others 1%.
  • Device Brands:
    • Apple 52%.
    • Samsung 42%.
    • Others 6%.

Objectives

  • To extend my ecosystem around Belgian Holidays, Belgian Vacations and Calendars.
  • In 2012 it became very clear to me that mobile, touch-based devices and responsive web design were the way to move forward. I believe that information properties in particular are very good candidates for mobile; in fact I believe that in the near future 80% of the traffic will come from mobile devices (opposed to desktop/laptop/tablet). Therefore I launched this project to get familiar with this type of projects. I decided to develop a mobile version of the popular website www.feestdagen-belgie.be and therefore extend the ecosystem of that web property from desktops to mobile.
  • To analyze which server and client frameworks and components are best suited for this type of project and to test a numer of prototypes.
  • To become familiar with the specific User Interface requirements for a mobile service (smartphone, tablet).
  • To learn to design the feature-set for content-first (or mobile-first, which is the same thing) and only then to design for devices with larger form factors (desktops, Smart TVs).
  • To start thinking of defining a common stack of components and frameworks for this type of projects, and to try to construct an application template in order kick-start future projects.
  • To apply the interesting model of the company Facebook for perpetual development and continous deployment.
  • To implement Rich Snippets, more specifically the Schema.org Event type. The Rich Snippet code in this web app is generated by a program; adding it manually is virtually impossible due to its complexity.

The first version of this mobile web app project was developed in 2013Q1 and it is part of the “Feestdagen Belgie” ecosystem. It uses various frameworks in order to develop a responsive mobile web app and it integrates seamlessly with the desktop website (www.feestdagen-belgie.be). It also uses various HTML5 components such as CSS3 Animations and Rich Snippets.

The Web App, and its connection with the desktop website, has been designed with Google’s best practices for mobile websites in mind, more specifically the Google’s Parallel Mobile Site pattern.
An example: if a user lands on the desktop website and the website detects that you are a smartphone user (not a tablet user, they stay on the desktop site) then you are redirected automagically to the mobile website. This resulted in having plenty of traffic from day 1 because it consumes all the smartphone traffic that was sent originally to the desktop website (that existed already, about 15% of the total traffic; with peeks on Sundays). Secondly, Google Search shows specific pages from the mobile website when you use a smartphone, and knows how to connect the desktop website pages with the mobile webapp pages.

Objectives 2015

  • To integrate the web app version and the Android native app version.
  • To simplify the UX and the visual design.

Screencasts

Android Smartphone.

Android Tablet.

Project Documentation

Notes

  • The content of the mobile web app is on purpose not a duplicate of the desktop website, but a property on its own (called a mobile web app). The content-needs and the user experience expectations of a smartphone visitor are entirely different from a desktop/tablet visitor.
  • I have opted to develop both a mobile web app (which runs on all devices) and a native Android app. The web app was released in February 2013 but the Android app was released much later (in September 2013) because in Feburary I did not yet have the experience to make a native Android app.
  • The App for the FireFox OS Smartphone Platform was released in 2013Q4 after I received a real Firefox OS smartphone from Mozilla to facilitate the development.
  • An iPhone App is not available because the hardware (an Apple desktop/laptop and a smartphone device) to develop an iPhone App was not provided for.

Related Projects