Announcing my HTML5 Mobile Portfolio Website

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
The home page in portrait mode
Blog Posts in portrait mode
Blog Posts in portrait mode
About page in landscape 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/.

Advertisements

Writing a full screen mobile web app for mobile devices

Here I talk about writing a full screen mobile web app for iPhones/iPods (320 x 480). But similar concepts can be applied to any mobile device out there. Read the post below,

This is one particular post that I was trying to pen down for some time now. I believe for beginners who are stepping into mobile web development, creating a full screen mobile web app and hiding the address or the URL bar of the mobile browser can be a little irritating and kind of mystified at times. In this tutorial I will discuss how to build a full screen mobile web app using pure javascript. I will not be using Sencha Touch or any other mobile web frameworks here. Before reading through, check out the demo app  in an iPod or an iPhone and notice how the URL bar gets hidden to reveal more of the viewport.

The Viewport
The main idea behind a full screen mobile web app is to hide the Address/URL bar so that the app looks like a native app and occupies the most of the space available within the browser window. Note that we are talking about a mobile web app and your app will run in the browser of your touch device.

Now, what is a viewport? Seems like a word that you might have heard before. Well, the actual visible area to the user that is available for the app is the viewport. Below is an image of my iPod’s mobile safari browser window in portrait mode. I have pointed out the labels and the sizes of each of the components. The dimensions are same for the iPhone as well. In portrait mode the resolution is 320 x 480 pixels. You can see from the image that in portrait mode the viewport is only 356px in height. The Status bar and the Button bar cannot be hidden from the user and will always be displayed. So, at the best we can hide the URL bar from the user to make the app look like a full screen app and give it a native feel.

Dimensions in portrait mode - 320 x 480
Image1: Dimensions in portrait mode

Read More »

CSS3 Expandable-Collapsible Panel for iPhone

Many of you might have worked upon or have used a collapsible panel in one of your projects before reading this post. And the best chances were that the collapsible panel core logic was developed using traditional methods of animating HTML objects using the setTimeout() or the setInterval() methods. Here I have listed down a quick example of building a collapsible/expandable panel using the latest CSS3 technique of transitions. Of course, you have to use a little bit of java script for handling the style elements dynamically. This example is mainly focused on iPhone (iOS) and Android touch devices and targets the mobile web kit browsers. You can also use the same code for desktop web kit browsers such as Chrome and Safari, and a little generalization of the code would let you use the application for all the other browsers supporting the newer CSS3 style rules (e.g. latest version of Firefox). Check out the images below, of the application in portrait and landscape mode of my iPod. And here is the link to the demo app, check in Safari or Chrome.

http://jbk404.site50.net/html5/mobile/collapsiblepanel/

Portrait
Expanded in portrait mode
Collapsed in portrait mode
Landscape mode

Read More »

Using percentage widths: auto adjust contents in a mobile web app

In my last post I talked about how to detect orientation change for a mobile web app using java script. Once you are able to detect the mode of view (portrait or landscape) you can write specific code to change the UI elements accordingly. Well, in this post I will discuss another technique to auto adjust the contents of the mobile web page as per the current orientation. Though this is not as powerful as the java script method or the CSS3 Media Query way, but still it is effective. Before staring, check out the demo application http://jbk404.site50.net/html5/mobile/percentwidth/  in your web browser and try to resize it, you will notice that the contents always auto fits to the screen width size. So, similarly it will also auto fit the mobile device’s screen width when viewed in different modes. Try opening the same URL in your smartphone.

Using percentage widhts
You might have used percent widths for your <div> element when you have declared the style in CSS. This is the same easy method that you can use to auto fit the page elements when viewed in either portrait or landscape mode in a mobile. The main goal is to auto fit the page contents with the correct amount of padding and alignment in both portrait and landscape mode. Below we have an image of a mobile web app page. You can see that the header and the contents occupy the entire screen width. Also I have a small padding applied to the content in the yellow background area. This is the portrait mode, for iPhones and iPods the dimension is 320 x 480 pixels. So the width is 320 px.

Read More »

JavaScript: How to detect orientation change of a mobile web app

Update:
1) For Firefox browsers on Android mobile devices, the orientation change event is not fired. See how to have an alternate detection mechanism for mobile firefox – https://jbkflex.wordpress.com/2013/05/23/orientationchange-does-not-work-in-mobile-firefox-for-androids-wtf/

Now back to the original post,

orientation changeIf  you have worked on a mobile web application using Sencha Touch, you might not have come across this problem of detecting the orientation change (portrait to landscape and landscape to portrait) of the mobile device, as Sencha Touch detects it for you (you do not have to write any extra code for it). However, when you are developing a mobile web app purely with HTML5, JavaScript and CSS/CSS3 which I did (without using Sencha Touch) then it becomes highly important for you to detect the orientation mode of the device and change the UI accordingly. JavaScript now allows us to detect the orientation mode of the device be it a iPhone, Android or a BlackBerry device. You can detect whether your viewing mode is portrait or landscape. Here is how to do it,

window.addEventListener('orientationchange', handleOrientation, false);
function handleOrientation() {
if (orientation == 0) {
  //portraitMode, do your stuff here
}
else if (orientation == 90) {
  //landscapeMode
}
else if (orientation == -90) {
  //landscapeMode
}
else if (orientation == 180) {
  //portraitMode
}
else {
}
}

As you can see we have used W3C’s DOM Level2 event registration method of addEventListener() to handle the orientationchange event. Now, as you change the orientation of the device the method  handleOrientation() will be called. Inside the handleOrientation() method we have a series of if-else blocks to handle the correct mode and make the UI changes accordingly. Note that the orientation variable gives the current orientation value. It is a pre-built variable, so no need to declare it.

There is another method of making the necessary UI changes for your mobile web app based on the orientation – using CSS3 Media Queries. However, I prefer the java script way as I had to do a lot of DOM manipulation and changes in my project which cannot be done using CSS.

Also I have used percentage widths of elements in CSS to make them auto adjust to the screen size of the device. So, this way also sometime solves the problems. Will write a small post on it soon.