cross-screen marketing solutions

Should you develop for small screens or create a ‘Mobile Experience’?

Developing websites for multiple screens and adapting your designs for a “One size fits all” approach is the hot trend at the moment. Seminal books from Ethan Marcotte and Aaron Gustafson have kicked up a storm in the design and development world with people realising that they can style their site differently in order to make it fit multiple devices. On the surface this sounds fantastic, but looking deeper reveals multiple flaws in this approach and not giving the due care and attention to your mobile website experience.

The first and foremost problem dealing with styling and mobile optimisation client side, is that the user viewing the website on their mobile will still incur download hits for assets and elements they may not even see.

Take for example this Media Query and CSS (commonly used in Responsive Web Design)

@media all and (max-width: 320px) {
       #largeElement {
             display: none;
       }
}

Now, all devices will still download this element, yet the user will not see it. A pointless waste of kilobytes.

When using Wapple’s Technology, we can detect what device the user has and send appropriate images and assets at the correct size which does not clog up their downloading of the website.

Take for example http://wapple.net – if you examined this website in YSlow you would see that the weight of the homepage when viewed on a mobile is around 150Kb. Very streamlined. Compare this to http://www.apple.com/uk/. Their desktop site weighs a total of 387kb, and in this unoptimised state, 387kb is unnecessarily downloaded to the user’s phone.

The trend seems to be that some people will develop their desktop site and add the mobile version as an afterthought, this results in certain small screen websites looking, frankly, dull. Recently, The Boston Globe made the headlines as it was the first large website that was redesigned using Responsive techniques. Now, even in this article, the phrase “Responsive design allows the Globe’s content to be refitted to any screen size available automatically” uses the word “refitted”, it just doesn’t sound very elegant. What seems to happen with Responsive Web Design is that content and styling have to be kept minimal and very text heavy, now simple single column websites adapt well to this approach but anything above and beyond struggles to remain fluid. A tweet from Simurai details this very succinctly: “My excitement for Responsive Web Design is fading a bit. It’s great for simple websites, but not enough for more complex web apps.”

The user of a smartphone buys a smartphone because they want a powerful, fun gadget in their hands. Responsive Web Design allows nothing more than styling tweaks. The real power of a mobile experience is using technologies such as Geolocation, SMS integration and now even, the phone’s Gyroscope. 360 Panorama have accessed the iPhone’s Gyroscope in Mobile Safari to give a native app feel to their Panoramic images.

Wapple were proud to be involved in the building and developing of the Microsoft Office 2010 mobile website, this site uses the smartphone’s GPS to access the user’s Geolocation and tell them where they could buy Microsoft Office 2010 around them.

There are 5.3 billion mobile subscribers (that’s 77 percent of the world population)“. In a nutshell, this means that a LOT of users will be accessing your website through a mobile phone. Don’t just squeeze your website into a small screen, give people a mobile experience.

2 Responses

  1. [...] blog about Responsive Web Design and Mobile Web Development.Here is the full article:Should you develop for small screens or create a ‘Mobile Experience’?Source: http://wapple.net Recommend on Facebook share via Reddit Share with Stumblers Tweet about it [...]

  2. simurai says:

    I guess there is just not a general rule and each site needs to be looked at individually. For a simple blog it’s totally fine to just use Responsive Design with some Media Queries, but more complex apps that require user interaction, a separate “Mobile Experience” is needed.