Mobile Web Development Examples – The Good, The Bad, The Ugly (April 2012)

April 27th, 2012 by

This is our first entry into a periodical series looking at some of the latest and greatest achievements in mobile web development. Not intended as criticism, but rather as an exploration into the possibilities and realities of mobile web.

With the HTML5 standard almost baked and the latest Javascript and CSS styling, mobile web has taken some huge steps in the last year. Whether you like it or not, HTML5 is still a buzzword in the web developer community…and possibly even more so in the mobile community. The buzz shows no signs of slowing either — as a recent announcement from the W3C said, they are in the midst of finalizing the HTML5 standard and looking forward to HTML6.

Here at Trilibis, we are equally excited, albeit a bit hesitant, about where mobile web development is headed with the likes of HTML5. At any rate, we thought it’d be fun to periodically showcase a few standout mobile sites to get some real world examples of exceptional creativity and strength in mobile design. So without further ado…

 

Snow White & the Huntsman

URL: http://universalpictures.mobi/snowwhite

Background: Promotional site for the upcoming Universal Pictures film Snow White & The Huntsman

The Good: Right off the bat, the exceptional visual design is evident. Following a brief loading bar, you’re presented with rich graphics and a site that fits the iPhone screen perfectly. Animated transitions through content sections make navigating the site both fun and painless. For a movie promo, all of the right features are there: plot info, high-quality video trailers, image gallery and an array of social features including Pinterest, Facebook and a Twitter stream of recent tweets about the film. Lastly, the site performs equally whether in landscape or portrait.

The Bad: At times, the animated transitions that make the site so fun to use would slow and hiccup before proceeding to the next section. Additionally, touch elements aren’t always recognized on the first try, or not at all with the home button. Although very minor, these two things could present issues for some users.

The Ugly: As it stands, the site was obviously developed exclusively for the iPhone. Hiccups during transitions and distorted graphics arise when on Android devices, especially those with larger screens. And a completely different, much simpler site is presented when viewing it on a Windows device.

Gatorade

URL: m.gatorade.com

Background: Mobile-optimized version of Gatorade’s main product website

The Good: Gatorade’s mobile website is all about high-quality visuals and touch/swipe navigation. The homepage presents you with an in-your-face swipeable display of Gatorade products and content. Selecting an option loads additional information about the product. Swiping up or down flows through the info with fun animated transitions. If ever lost, the “Navigation” button is fixed to the upper-right corner allowing the user to get wherever they need to go quickly and easily. Factoring in the social options linking to YouTube, Facebook and Twitter, and Gatorade has created a site that is sure to engage users.

The Bad: Swipe actions sometimes are misinterpreted and either go the wrong direction or don’t move the page at all. Videos link out to YouTube app, which doesn’t allow user to quickly and easily get back to browser. Some sub-navigational components fail to load in background and are actually pushed to a second screen to the right (see image below).

The Ugly: Another site that was designed exclusively for the iPhone. Images do not render to fit the screen on Android devices (below) and the site completely breaks on Windows Phone.

Nike Jumpman 23

URL: http://www.nike.com/jumpman23/aj2012/mobile/

Background: Promotional product page for new line of Nike Jumpman sneakers

The Good: This site is built with a responsive design-esque feel. Both mobile and desktop sites are identical with the exception of the placement of the navigational bar on the bottom for mobile as opposed to the right sidebar on the full website. The Nike Jumpman mobile site utilizes a “scrolling storytelling” element to offer an interactive visual representation of the shoes and  their features. Swiping up and down gradually transitions the user through the product story while offering a few stops along the way to access more information. Finally, an easy option to “Buy Now” presents a clear call to action and makes it incredibly easy to purchase the shoe.

The Bad: Swiping through the entire page can get tiresome. At times, transitions tend to seem choppy and unresponsive.

The Ugly: Yet another site that was designed with only iPhone in mind. Both lower-end Android devices and Windows Phone fail to scroll at all. Higher-end Android devices have issues with smoothly rendering the transitions.

 As you can see, each site has its own ups and downs. A clear pattern throughout is the lack of emphasis placed on devices other than the iPhone. While this is ultimately a business decision and could reflect a data-driven decision to segment and target the users of this single device, it is of bad practice to completely ignore the other side of the market. All of these sites could have easily gotten away with providing an explanatory page that the site works best when viewed on iOS or designed a simpler site to work  on non-iOS devices. Alternatively, a best approach, and one we are no stranger to, is utilizing a solution that allows for full-featured development and high-end user experiences on any of today’s devices.

Got a fantastic mobile site we should feature in an upcoming showcase? Disagree with some of our points? Keep the conversation going and check out our Facebook and Twitter pages.  

Related Posts Plugin for WordPress, Blogger...

Comments Off


Comments are closed.