In my previous post [The future is mobile] I have briefly pointed out that the web is moving towards the mobile web [ web apps & native apps ].
Building for mobile is tricky however, I have summarized “building for mobile guidelines” into the following points :
- Simple options
- Lack of images
- White space
- Prioritized content / Publish the Bare Minimum
- Clean Markup
A very smart & wise initiative from Batelco is developing a mobile version of their telephone directory site that enables mobile users to search for public/private telephone numbers and their addresses.
You can fireup your safari on iphone or just browse the site on your BlackBerry device @ http://m.181.bh/ as you read.
A side note: the site detects mobile devices and redirects accordingly. [passed on iphone and BB]
Pointing your browser at the link above will lead you to this:
The site contains 4 main block elements:
- A very simple header with the title to the left and the logo to the right
- An option to switch to the full version of the site
- Language switcher [AR/EN]
- And the most important element a single search box with a title ( name ) and a search button
A user experience expert wanna-be might jump up and say: hey where are the instructions to use the site?
Here is how to shut him up, how old is the internet in Bahrain 15+ years? I guess google & yahoo embossed that function into our brains so whenever we see and input box with a button next or below it that means that the site will submit whatever keyword I input in that field and I will expect an action in return hence the baby duck syndrome.
Notice that the site supers my previous post on search as a dominant function!
Pizza, is what I used as a search term … don’t even ask why hehe! Carrying on…
Here is how the SRP or Search Result Page for the term “Pizza” looks like:
3 additional blocks were added to the SRP besides the records ( 5 records per page ), the 3 additional blocks are :
- The counter strip ( Displaying 1 – 5 of 31 results )
- Refine, a smart filtering mechanism
- Next and Previous
- new search link was added on the language block
Hmmm, so why didn’t I get to choose the category from the first page before submitting the query?
Remember the screen size is too small to be able to fetch all possible categories & areas in it, However the backend is kind of smart, once you search for a term the taxonomy system will only show you related categories to your search term, in our case “Pizza” falls into food and restaurants category & somewhere in the backend this term is somehow linked to that category ( see the image below ).
Note: If you are an Iphone user, then no problem, you will still be using the iphone User Interface to scroll through the options in the drop down box J #thankSteveJobs
There is one thing that confused me for a second and that’s the light blue circle with the letter B in it which I think it stands for Business, and R stands for Residential …
Carrying on …
You can see that the contact number is highlighted as a link (on iPhone Ipods only), guess what happens when you tap on it … No, it doesn’t Dial, it will overlay the “create new contact or Add to existing account” option, in my opinion it should have been Dialing the number out … but hey its just me!
Click on more and it will show you more information including the map but it won’t go native, native as in using the device GPS to plot the direction from your location to the destination… but it’s still a good option to have a map of the location.
Lets jump to the site’s content size, below are to snaps the first one is before search and the second one is after search :
16 KB before search and 17 KB after search …I like [ excluding skype’s JS ]
The markup behind it looks intact so far with one error and 2 warnings, it’s a very simple error that can be fixed on the fly be specifying the <alt> tag for the image used, it will basically show the alternative text if the image is not available or if images were turned off by the client.
One thing though… the document type declaration used is :
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
I’m not very keen when it comes to mobile DOCTYPE but I think they should have used XHTML Mobile profile DTD
The Batelco 181 Telephone directory mobile site is very simple and easy to use; it’s probably one of the first noticeable mobile sites in Bahrain, enhancements can be applied for example, by clicking on the contact number the phone should dial that instead of copying and pasting.
I’m sure that there will be enhancements applied & that explains the GA tracking code to gather useful information, If interpreted correctly it will give a very useful insights on how to improve the site sort of business intelligence or BI data reports!
But so far, two thumbs up!