Building Mobile Version for My ASP Website

I enjoy watching YouTube on my Android because I don’t sit in front of my PC for a long time. I found that the mobile version of YouTube was quite simple, straight-forward and easy. It is very easy to look for videos in Subscriptions, personal Playlists, History and Favourites. I like how YouTube handles playlists which are very long (having more than 12 videos in it). Instead of showing all the videos in a long playlist, the mobile version of YouTube shows only the first few. The user then has to click on the “Show more videos” button at the bottom of the page to view more of the playlist. This is a bit troublesome for the user but that feature helps in showing the playlist videos page faster. This feature is introduced because of the smaller display we have in mobile phones.

Usability
Recently, I am doing the mobile version for an existing ASP website. Learning from YouTube mobile and some other mobile website online tutorials, I introduce a few changes in the mobile version of the ASP website:

  1. Remove large images, especially not-so-useful advertisement pictures shown on the original site and background images. This helps in reducing the bandwidth;
  2. Make the mobile version of the website to be single column. The original site has a multi-column layout. This makes the user needs to scroll a lot (horizontally and vertically) on the phone just to view the entire web page. The what-the-hash moment comes when the page contains too much unnecessary content, and the user has to spend time on scrolling and finding the important info on the page;
  3. Increase the click-able area. It will never be a good idea to ask user to zoom in to the page just to click on the tiny check-box or radio button. So, I have a large table cells there to replace the radio buttons and check-boxes so that user has a wider area to click on. Drop-down list can also be used to replace radio buttons because it is easier to choose item from the drop-down list in the mobile phone;
  4. No Flash and Silverlight. Removing all the animation thingy is a good choice;
  5. Build a fluid layout. Since different types of the mobile phones have different screen size, so it is good to fix the width of the display area;
  6. Have a “Back” button to go to the previous page. The original site has a section where the user has to go through several steps to get to see their results. So, a “Back” button is important in section like this on mobile version.

Besides, the links should be avoided for any important call to action. YouTube mobile still has this problem. Previously, they even placed the “Sign out” link very close to the “Show more videos” button. So, there are many times I accidentally clicked on the “Sign out” link. In the latest version, YouTube mobile has changed the position of the “Sign out” link. However, it is still placed not far from the frequently used buttons and they still do not ask for conformation when user clicks on the “Sign out” link. Haiz…

YouTube Mobile Not-so-good Design
The "Sign out" link in YouTube mobile is still close to the "Show more videos" button. Argg...

Also, I am thinking of having the functionality of allowing the user to view the address on the map on smartphone. This is to help user find out the actual position of the place easily. Allow users to automatically call the number when they click on the number on the web page is also helpful. I think some users will go crazy if they have to first note down the number on paper and then type the number on the phones just to call the person.

Detect the Mobile Device
Since it is an ASP website, I decided to use ASP to do the device detection.

MSDN shows a very easy tutorial to do that: http://msdn.microsoft.com/en-us/library/fhhycabe.aspx. The tutorial shows how to use Request.Browser[“IsMobileDevice”] to check if it is a mobile device that is accessing the page right now. According the a discussion thread on the StackOverflow (http://stackoverflow.com/questions/1829089/how-does-ismobiledevice-work), by calling Request.Browser[“IsMobileDevice”], the runtime uses regular expression from the *.browser files to match against the incoming User-Agent string. However, this does not work at my side.

The *.browser files shipped with .NET
The *.browser files shipped with .NET
I then tried another solution found on another thread ASP.NET Forums (http://forums.asp.net/t/1175390.aspx):

An advanced version of code to check the device being used
An advanced version of code to check the device being used
The method suggested by anantjains uses several stuff to check: IsMobileDevice, HTTP_X_WAP_PROFILE, HTTP_ACCEPT and HTTP_USER_AGENT. The code actually works when I use User Agent Switcher on Firefox to test it. Yup, so I will use the code for now.

Meanwhile, according to a page in ASP.NET (http://www.asp.net/mobile), there is a third-party project on detecting the mobile devices, including those which are just released recently. The project is an open-source project and it is called 51degree.mobi Foundationhttp://51degrees.codeplex.com/. I have not tried it yet though.

Testing Mobile Website on PC
I usually tested my ASP and C# code on localhost first before deploy it on the server. So, for the mobile ASP website, I need a way to test it on my PC also.

True mobile browsing can be done on Firefox with the help of User Agent Switcher add-on (https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/). With just the User Agent and a short description in the User Agent Switcher, a new user agent option can then be added to the list. By switching to the correct mobile user agent, the mobile version of the page can be viewed properly.

User Agent Switcher Add-on for Firefox
User Agent Switcher Add-on for Firefox

There is also an online article about testing mobile website on Firefox using this add-on and Modify Headers add-on: http://mobiforge.com/testing/story/testing-mobile-web-sites-using-firefox.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s