Mobile web – one content doesn’t fit all

Before the smart phones arrived, desktop computers were virtually the only means of information consumption. Mid-sized and Large companies have started paying attention to their web presence on mobile devices(iPhone, android phones and iPad). In this blog post, I discuss some of the key issues that affect the mobile web experience.

Just to give an idea, Twitter currently receives more than 60% of it’s tweets from mobile devices. Likewise Facebook receives a sizable amount of it’s traffic from mobile devices. Restaurant and news websites in particular are adapting to this need compared to others.

Users visit the websites from mobile devices with a variety of needs, like:
- Contact information (Directions and Phone)
- About
- Service (for example, chase bank has a mobile website which users visit for their account related information)

Here are few things that affect the user experience on mobile devices.

  • Text Due to the size and form factors, the information or descriptions shown for the mobile devices have to be shorter and much more precise. The longer the text, the less the chance of it being read. So the content strategy for mobile devices has different goals compared to desktop devices.

    With that said, you might be thinking – should I be writing content to suit each and every device? The answer is no and yes. Take this blog post for example, instead of showing the whole blog post, it’s better to show only an excerpt or the title on mobile devices.

  • Design Mobile websites should be designed by paying attention to information architecture, image quality and aesthetics. Graphics have to be smaller to accommodate the bandwidth limits.
  • Video As you might know by now, iPhone doesn’t support Flash. So videos have to displayed using players that support html5 video. Similarly to images, the videos shown on mobile devices should be small to make good use of the bandwidth.
  • Effects/Animation A finger is different from a mouse. Go animations that make use of hover effects don’t work well on mobile devices. Instead developers could make use of advanced gestures like swipe.

    There are certain limitations to what you can do in terms of interacting with hardware (camera, gyroscope, accelerometer etc) for mobile websites, in which case mobile apps which are installed are the only way to go currently.

Conclusion:

A careful consideration of all the above factors and evaluation of user needs will lead to a better mobile web experience for users and improved conversion metrics for organizations of all sizes.

My blog post on the Finelight Blog about Mobile web experience

Posted
 

Internet download and upload speeds in India

Net Index by Ookla has recently ranked the Internet speeds across the globe. This index is created based on millions of recent test results from Speedtest.net. It compares and ranks user download and upload speeds around the globe.

According to this India, the average internet download speed in India is 1.26 Mbps and average upload speed is 0.64 Mbps. This places us at #126 and #101 ranks respectively for download and upload speeds. With the amount IT services that Indian IT companies provide, definitely we need a lot of improvement in this.

The same index ranks US at #27 and South Korea at #1 for both download and upload speeds.

Posted
 

The State of Web Development 2010 – Web Directions

Tuesday, April 27th, 2010

The State of Web Development 2010 – Web Directions

Category: Survey

What are the current Web Directions? John Allsopp is back, with results from his latest State of Web Development 2010 survey.

There is a ton of content here, and the data is made available. For the full report you can grab the PDF.

This article summarizes the preferred environment of web developers and what's hot.

- Firefox is the browser of choice
- Preferred mobile browser is Safari
- Mac OS X is the preferred OS
- Most used js framework is jQuery
- Most developers test on IE (6-8), Safari 4/Chrome and Firefox >3.5

Posted
 

How to set child element opacity different from parent element

When using css (opacity) to set the transparency of an element, the child elements inherit the transparency of the parent element.

For example, if you set 50% transparency to the body element, the whole pages becomes 50% transparent. Even if you explicitly set the opacity to 1 for the child elements, the transparency is still there.

This is particularly not desired if your child elements has text.  As you can see from the screenshots, the text looks clear in Screenshot 1.  In Screenshot 2, the text dissolves into the background when opacity is set to 0.5. I used opacity 0.5 just to demonstrate this. The text looks better with opacity 0.9, but this is not the ideal solution.

   

Solution
To prevent this, the only way is to use a  png with the desired alpha transparency.
Note:
Transparent pngs are not supported by IE 6. So make sure that you use the fix mentioned at TwinHelix


 

Posted
 

Centering an element on a page

Here is how you can position an element at the center of a web page (both horizontally and vertically).

The content of the div with the id 'centered', will be positioned at the center of the web page. The 'absolute' positioning ensures that it is positioned at the center w.r.t the webpage or document.Instead if you want to position an element relative to an enclosing div, changing docheight and docwidth variables accordingly ensures that your element is centered.

This is often useful in situations where you want to display error messages like 404-page not found and for showing 'page redirect' messages.

Posted