Discover Basel
Discover Basel was the product of a module in my final year at Staffordshire University, Mobile Web Programming. The emphasis here was on creating a website, that then was developed to be mobile adaptive, using CSS3 and media queries. Finally an Android App was developed of the same website.
The idea was taken after my year away in Switzerland, when I had a million and one different questions about life in Basel, Switzerland. From this it seemed a good idea to develop a web guide for newcomers to the city, to help them arrive, settle in and enjoy Basel and its surrounds.
Full Site
The desktop version of Discover Basel is a 10 or so page guide to arriving in Basel, scripting in HTML5 with some CSS3 aspects. The original design was taken from a current template available on the internet and developed and changed slightly into the resulting product. Three colour coded areas of the site, that are present through all products, section off different areas, namely pink for arrival information, yellow for details on things to do, and green for travel and weather. This theme is recurring in the mobile site and the Android App.
The desktop version makes reasonable attempts, as far as possible at using sensible image quality, and only using the code necessary to get the desired results. To allow for different screen sizes and resolutions, CSS media queries were implemented, reducing images on smaller screens and then removing them completely at around the size a mobile device screen would be expected. This was for optimisation purposes and to improve the user experience.
Mobile Adaptive Site
Following the development of the desktop site, a mobile site was developed from the desktop site, stripping out un-necessary images, reducing quality of images, using the cache.manifest feature, optimising the site for mobile use and minifying code to improve load times. JavaScript Touch events were used here as well as the introduction of Apple Touch Icons.
Android App
Although not currently available the website was then exported to a HTC Deisre S, via the Android SDK and tested as an installed app on the mobile device.