Announcing my HTML5 Mobile Portfolio Website

Tutorial from my blog: http://jbkflex.wordpress.com/2011/12/30/announcing-my-html5-mobile-portfolio-website/Based on the techniques discussed in creating a full screen mobile web app for iPhone, Percentage widths for auto adjust, orientation detection.I am happy to announce that I have completed  my mobile web portfolio site. Let me call it my personal mobile web

app. The  app is meant for iOS devices (iPhone and iPod) and Android device. It is built purely with HTML5, CSS3

and JavaScript and is targeted for the mobile web-kit browsers. Some of the main features and highlights of the app

are listed below.

Link to the mobile app: http://jbk404.site50.net/joseph/mobile/. Remember to open it in your mobile browser.

Features:

1. Built using HTML5, CSS3 and plain JavaScript.

2. No Sencha Touch. Have not used it for my app.

3. Full Screen App. So URL bar is hidden

4. Both portrait and landscape mode supported. I have used simple CSS and JavaScript techniques for it.

5. Hardware accelerated CSS3 transitions used for navigation

6. Ajax Data Loading.

7. iPhone look and feel.

8. Remote domain data load by using PHP and Ajax.

9. Percentage widths used for auto adjust.

Below are some of the screenshots of the app from my iPod touch,

The home page in portrait mode

Blog Posts in portrait mode

About page in landscape mode

The app will even run fine on desktop web-kit browsers such as Chrome and Safari.

Here is the link to the app: http://jbk404.site50.net/joseph/mobile/ . Try opening it in your iPhone/iPod or Android

smart phone’s web browser.  If you do not have one try it out here http://www.iphonetester.com/.