Adapting EPiServer websites for mobile devices

Although mobile devices these days provide a quite smooth surfing experience, many websites might benefit even more by having their website adapted to fit mobile devices.

Overview:

• Mobile web is more than just iPhone
• Brand-specific vs generic adaptation
• Multiple templates vs CSS adaptations
• Apps and gadgets
• Resources
• What next?

Mobile web is more than just iPhone

It's fair to say that the iPhone revolutionized mobile web surfing, which is probably why so many people only think iPhone when the subject of adapting for mobile devices comes up. Landscape/portrait tilting, zooming, sliding and other finger gestures have become mobile web standards.

There are however a number of factors to consider when adapting for mobile devices, like:

• UI should not accomodate just one brand of mobile devices (e.g. Apple), since this would make the site less usable on other devices
• Mobile devices are not just phones - the iPad and other tablets have created a new niche
• UI needs to be adapted to a smaller screen size (although this is especially true for touch screen phones - the screen size of tablet devices generally offers more room for complex UIs)
• The UI should be simplified and more "finger friendly"
• UI should not be reliant on technologies like Flash or Silverlight, since many devices don't support them

Brand-specific vs generic adaptation

In the EPiServer community there have already been several good contributions in this area, but most are iPhone-specific.

Of course, the danger of adapting too closely to a specific brand, is alienating users with other devices or lessening their experience of your website. If you are spending time and money on adapting for mobile in the first place, your objective should be to accomodate as many users and devices as possible.

After a few years of people focussing mainly on the iPhone, suddenly the iPad came along and created a whole new niche - neither phone nor laptop. This type of touch tablet allows for a bigger and more complex UI, while still having the benefit of navigating using intuitive finger gestures. In addition, both these platforms share a disability when it comes to user input - the touch screen keyboard is no real replacement for a physical keyboard, and this makes writing anything longer than login credentials or a short comment/tweet slow and troublesome.

Design fads and popular device models come and go.. think ahead.

Multiple templates vs CSS adaptations

There are basically two ways of presenting a mobile-adapted webpage; either by redirecting the user to a set of specially created templates, or by substituting the normal stylesheet for a heavily modified one.

In both cases, the website has to detect that user as a mobile device, which is most commonly done by checking the browser user agent.

In 2008, Jacob Khan experimented with a cool  iPhone-specific version of EPiServer Labs, which used an innovative multirendering plugin module by Allan Thraen to display a special set of templates to iPhone users. Later the same year, Jacob released it as a module for EPiServer 5.

In 2010, Mari Jørgensen wrote a great blog post about the modified CSS approach. What I like about this method is that is is NOT iPhone-specific (but rather iPhone-FRIENDLY), and works by detecting the screen size of the browser and substituting the stylesheet accordingly. Getting started with this method is really easy, it just requires adding a few lines in your masterpage and creating a copy of your stylesheet to be modified. Mari also created a downloadable module which is designed to work with the CMS 6 Alloy demo templates.

While this approach is great because it is brand-independent, it is however unlikely that all websites can be adapted using only CSS. In fact, most websites would benefit from adapting only the core sections of the main site, typically the News, Products, Blog, About, Contact type pages, and deliberately hiding the rest. In essence, remove sections that are not easily adaptable to a finger-operated UI. To accomplish this, it would be hard to avoid having to create a special set of templates or relying on a lot of javascript.

Apps and gadgets

Another approach is to leave the website as is, and create separate apps specifically designed to run on mobile devices. This approach is widely used with social websites like Facebook and Twitter, and also a few webshops like Amazon and eBay. These sites would be near unusable using the regular mobile device browser, so a tailor-made app ensures the user experience is as fast and smooth as possible.

An obvious downside to this is that you will require specialized knowledge of how to develop apps for any particular mobile device, and you would be spending a lot of resources creating an app that is only available to a limited section of the mobile device market. Creating an app also adds maintenance costs, since the app would have to be updated/rewritten when the website changes. Not to mention that your website would need to have its own API.

So far, I've mostly been talking about the way end users experience the website. But what about the people who update and maintain the website?

The recently released MobileCenter for EPiServer takes advantage of the gadgets functionality in CMS6, allowing site editors and admins to run the gadgets on the mobile device (currently MobileCenter is only available for iPhone/iPad, but an Android version is apparently planned). This is a really cool use of the gadgets, and since the gadgets are hosted on the website, there is no need to update/rewrite the phone app when a new gadget is added. Just activate the gadget on your website, and it will appear in the MobileCenter.

The main drawback is still the close integration with a proprietary device, and the limited ability for user input. (Note that the MobileCenter was developed primarily for iPhone, which you can tell by the app not being fluid enough to take full advantage of the bigger screen when running on the iPad). The MobileCenter is a really cool start, but mobile devices are still not ready for proper content editing.

Resources

The W3C have their own guidelines regarding mobile web:
http://www.w3.org/TR/mwabp/
UPDATE: The W3C released a new version of their Mobile Web Application Best Practies document on December 14th 2010.

Here is one of the most comprehensive guides I've found, "Global Authoring Practices for the Mobile Web" by Luca Passani:
http://www.passani.it/gap/
It really goes into details about describing the challenges, best practices, and giving practical examples.

Another great post by John Arne Sæterås, "Mobile Web vs Native Apps revisited", outlines the pros and cons between - you guessed it - mobile and native apps:
http://www.mobiletech.mobi/blog/mobile-web-vs-native-apps-revisited/11672/

Peter-Paul Koch suggests introducing the new buzzword "HTML5 apps" to make clients think differently about mobile web:
http://www.quirksmode.org/blog/archives/2010/03/html5_apps.html
Informative and entertaining post, which makes me think of a recent viral video.. (we've all had clients like that).

What next?

So where do we go from here? What will be the next big trend in mobile adaptation?

Is it even worth the extra effort to adapt your website, or are mobile device users satisfied with browsing the regular website version?

Do you have any great examples of mobile adapted websites?