Lately there’s been a lot of talk about many renowned retailers, like J.C. Penney, Gap, Banana Republic, Old Navy and Nordstrom, shutting down their Facebook stores due to lack of interest and activity from users. Why would customers go to Facebook to interact with a store when they can directly visit the store’s website?
While many businesses have discovered that customers preferred shopping directly on their own sites, the impact of social networks like Twitter, Facebook and Google+ on buyers behaviour is significant.
Word-of-mouth recommendations strongly influences purchases. In one recent study, it was found that 60% people are willing to post about products/services [on Facebook] if they were offered a deal or discount. In another survey, 67% of Web shoppers said that they are more likely to buy a product or service when a friend recommends it to them.
This notion of social sharing and peer recommendations compliments our aim at Roveb to create a mobile commerce platform for small-medium businesses.
With an ever increasing number of mobile Web users (around 1.2 billion) and an increasing number (over 50%) of local searches done from a mobile device, businesses must have a mobile presence to engage their mobile visitors.
With Roveb, businesses can create a mobile website, feature their products or services with exclusive deals for mobile visitors and reward users who recommend on social networks or visit the business. This mechanism not only creates virality and awareness for the business but also brings new customers and helps retain existing ones through the in-built loyalty program.
Before we started building Roveb, we spent some time researching and studying mobile Web usability on smartphones. Our main focus was on hand-held usability, small-screen aesthetics and Web standards. During the initial prototyping phase, we reviewed jQuery Mobile and Sencha Touch as two of the many mobile Web development frameworks out there.
We found that both of these frameworks are better for native app development (with the Web app running in a container) rather than for mobile Web apps or mobile websites, since they are not optimized towards a great user experience. Both try to mimic the native app look & feel, but in most cases their shortcomings make their use counter-productive for the mobile Web in its current state.
Here’s a summary of our analysis:
1. Size and Speed
- jQuery Mobile (1.0.1) CDN-Hosted CSS with Default Theme is 48.6KB (minified) in size or 7KB minified and gzipped.
That’s a total of 220KB (minified) or 61KB minified and gzipped, to be delivered on an average mobile network (remember smartphone users are most active outdoors, away from their home or office WiFi).
The sheer size of these libraries made it unacceptable for real-world use cases. Even if the files are served from a CDN, it still leaves room for improvement, until 4G becomes a widespread standard.
So why is file size a major consideration for mobile Web apps and sites? Because not only does it affect the download time of the resources on mobile bandwidth, but it significantly increases the parse & render time (see below) in mobile browsers.
Sure, a CDN (with local fallback ofcourse) will provide slightly better downloads, increased parallelism and better caching, but those advantages are mostly made redundant due to the increased mobile network latency, mobile browser gzip decompression and script parse time.
2. Parse Time
Speeding up mobile websites is as important as having one. Google’s mobile performance best practices suggests:
That would roughly equate to 171ms of load time for jQuery Mobile and jQuery (minified and decompressed), and around 370ms+ for Sencha Touch, on each page request. Add the mobile browser gzip decompression time along with load time for other content on the mobile page and those numbers would go up even more.
With site speed becoming increasingly valuable in Web search ranking and overall online sales, even small changes in response times, specially in a mobile environment, can have significant effects.
Google found that moving from a 10-result page loading in 0.4 seconds to a 30-result page loading in 0.9 seconds decreased traffic and ad revenues by 20%. Tests at Amazon revealed similar results: every 100ms increase in load time of Amazon.com decreased sales by 1%.
In our prototype testing on iPhone and Android, we found that while Sencha-based pages were pretty responsive and swift, jQuery Mobile operated with sluggish transitions, scrolling issues with fixed toolbars and inconsistent look & feel between the two devices.
So when it comes to developing for the mobile Web, light-weight and more optimized alternatives like Zepto.js and HTML5 Mobile Boilerplate are more suitable.
That’s one of the questions we asked in our online survey and interview questionnaire during the initial Customer Development for our mobile startup - Roveb.
We spoke to friends, relatives, existing clients, past employers, local shops and small businesses, people who were in a position to make decisions for their business or their employer. The response we got was surprising.
Nearly everyone understood and appreciated the importance of a mobile strategy for their business. Almost 65% of the respondents acknowledged that Responsive Design (as we briefly explained to them) is a good approach for designing device-agnostic websites and Web apps.
But an overwhelming 93% said that they will not undertake a redesign initiative for a Responsive Design. They would rather have a separate presence that’s optimized and targeted for mobile users. (Update 17 Jan 2012: Of the top 100 sites most visited on the internet, 71 of them have content specifically designed for mobile devices. Source: BuiltWith)
A lot has been said about what makes Responsive Design unfriendly for smartphones in particular. It may still be a good idea for new websites/webapps to be built with Responsive Design principles in mind right from the start.
Speed, simplicity and engagement are the key factors in a mobile environment. It’s highly debatable whether Responsive Design alone can directly address any of these factors for mobile users out-on-the-move.
Brian Fling, author of the book Mobile Design and Development, contemplated with good reason:
“Great mobile products are created, never ported.”
Our initial discussion with businesses (prospective customers) and real-world mobile users helped us understand what both sides really want from a mobile website. Further research and analysis on hand-held usability and small-screen aesthetics has guided us in differentiating the core facet of a practical mobile presence.