jhkueh's Dev Journal

Blog
Portfolio

Improving Mobile Web Experience (A Case Study)

A few days ago, I was looking at job boards and came across a web developer job ads which leaded me to its company’s (Teapot Digital) website. Upon further researching the company, I liked what I find and thought it has a solid porfolio of websites all built with the latest design trends which draws me wanting to work with them. The company website itself is minimalist and responsive. Being curious, I fire up Chrome’s Developer Tools to see how it is done and find myself coming up with ideas of improving the website [demo]. So, I am going to discuss them in this post.

HTML5 Rocks

Really? Yes really. HTML5 is the future of the web. Even Steve Jobs agreed. Although some of its specifications have yet to be finalised, we can already ultilise some of its functionalities to make the web having a better and richer user experience. The website, I noticed, is still using XHTML for whatever reasons. Perhaps for supporting Internet Explorer (IE) 6 or 7 users. Those users should be rare by now in 2014. At least in Australia, Kogan implemented the world’s first “Internet Explorer 7 Tax” which would incentivise customers to upgrade their IE 7. Since IE 8 is almost 5 years old, when are you going to introduce the IE 8 tax, Kogan?

Next, I am going to show how HTML5 rocks in a minute, but first, I want to explain the mobile web.

Why care about mobile web users?

Mobile web users are on the rise. Over 1.2 billion people access the web from their mobile devices, according to this infographic by Trinity Digital Marketing.

In an article by Mashable (April 2010), based on Morgan Stanley’s research:

Morgan Stanley’s analysts believe that, based on the current rate of change and adoption, the mobile web will be bigger than desktop Internet use by 2015.

Then, we have headlines from Business Insider (Jun 2012) which reads:

ComScore: Mobile Will Force Desktop Into Its Twilight In 2014

Next, the description from a SlideShare titled Thinking Mobile First by Jordan Harper writes:

“In 2014, more users will access the web on mobile devices (smartphones + tablets) than with ‘desktop’ machines.”

Highlights of the presentation include:

In a world where we see massive adoption in mobile devices, ignoring mobile web users is no longer an option anymore. Businesses who do, will lose out because “61% of people have a better opinion of brands when they offer a good mobile experience” according to Latitude.

How HTML5 rocks mobile web

In this section, I am going to show how HTML5 give mobile web users a better User Experience (UX).

Below is the UX of the original email field:

original email UX

With HTML5, noticed the ‘@’ besides the spacebar:

improved email UX

The above example may not seem like a big improvement if you have TouchPal installed. But what if you need to enter in a telephone number? This is what we have in the original.

original phone UX

With HTML5, users are presented with the keypad right away when selecting the phone field, which makes a better UX.

improved phone UX

How’s it done

HTML5 introduces a few [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) ‘type’. So just change the input type to email or tel, instead of text, like so:

<input name="form_67_email" type="email" ...... required="">
<input name="form_67_phone" type="tel"   ...... required="">

While there is no discernible difference for non-mobile browsers, these properties provides a better UX on mobile web browsers. As for older mobile web browsers that didn’t support HTML5, they will just appear as a normal input field.

How does AngularJS fit in?

Why AngularJS? First of all, I choose AngularJS for its two-way data-binding, one of its most notable features. See it in action below:

two-way data-binding at work

Second of all, it comes with client-side form validation built into the framework itself. Try out the form validation for yourself on the improved page here.

Last of all, it was designed from the start to be easily testable. All of these can be easily implemented, just see the source code to see how easy it is.

Although jQuery can be used here, I find that angularJS give me a little bit more flexibility because of its declarative style of doing things, as opposed to jQuery’s DOM manipulation. However, it is worth noting that angularJS is geared more toward building web applications and it should be used with caution when building content sites that depends on SEO.

Before and after comparison with PageSpeed Insights

Here’s the results from the PageSpeed Insights tool (original at the top and improved at the bottom): PageSpeed Comparison

The improved page can be viewed here.

Here are some examples of things we do open source and why:

Suggestions for further improvements:

Conclusion

I hope that everyone who has read this far has learned a thing or two. Again, here is the improved demo page, in case anyone missed it. One piece of final advice I can give is to always keep on learning. HTML5 will be finalised at the end of this year and there is bound to be richer web experience, be it mobile or desktop, that is being explored. It will certainly open up new possibilities never thought of before as technologies advance. What I have showcase here is the fruit of my learning at Udacity’s Mobile Web Development course. Stay Udacious!

Additional resources

–

25 February 2014