OPINION-Technology- Mobile Media Will Replace Traditional Websites: How do you adapt?
06 December 2009

OPINION-Technology- Mobile Media Will Replace Traditional Websites: How do you adapt?

What impacts does this have on redesigning your site to work on mobile devices?


Mobile websites are replacing traditional websites. The Internet is moving to a mobile delivery platform, centred around handheld Smartphones and tablets. Eventually the traditional website will no longer exist in the form that it does today. If sites can't scale to mobile device,s they will lose their audience over time.
What do you need to consider when redesigning your site to work on mobile devices?

I completely understand if you disagree with these statements. Change can be difficult to wrap your head around. Change is often disruptive and controversial. In this blog entry I will try to explain why the above statement is so important to consider. The impacts of the mobilization of the Internet mean change is on the horizon. What does all this mean to the fundamentals of Internet design and website development. Read on...

1: Streamlining Content for Mobile: Dealing with website bloating

Website bloating is a term I invented, so I thought I better call it out and explain what I mean. A bloated website is a site that has been around for a while and content has been added to the site on a regular basis. Old content has not been expired and the purpose of the content has been forgotten along the way. These issues are very common when a site has evolved rapidly. Bloating involved convoluted navigation, excessive page weight, out of date pages, and page designs that may also be out of date. A regular audit needs to be made of website content to avoid this situation. Every month content should be expired, updated, or re-deployed for bloating to be kept to a minimum. 

Websites have become bloated experiences with endless pages of content, long pages that require lots of scrolling, complicated multi-layered navigation, and plugins overload. The net result is a slow, clunky, overloading Internet experience. If you visit any website with deep content, you can find yourself going to Google just to find a page inside one of these sites. Rather than being able to find the page from within the site itself. This is the trademark of a bloated website. You find yourself surfing in circles, wondering how and where you can find the information you need.

Making a site work on Smartphones forces any website content manager to assess the extent to which their site has become bloated. This is analogous to downsizing from a house to a condo. You have to sit down and see what is essential, what is clutter, that is just not going to work in the condo, and finally decide on what to keep. Like any move, it will also require some new elements to be added, and a lot to be taken away. This streamlining process can be dauntin, and it is one of the most important initial steps I typically perform when moving a site to mobile media delivery.

How to combat this website bloating and prepare a site for mobile delivery is beyond the scope of this article. I will discuss this issue in more detail in future articles.

2: Fundamental Changes in Navigation Design

Mobile media requires very different navigation strategies. This issue begins with screen size issues. Your site navigation must be accessible on every page but also not take over the entire screen. Screen real estate is at a premium. Navigation can be big, especially if the site has many sections and sub-levels. For a site to work well on mobile devices five navigation changes must take place:

  1. Reduce the number of sections to 5 maximum
  2. Reduce the site depth to two-three levels maximum
  3. Convert graphic navigation to text navigation
  4. Allow non essential navigation to be toggled between hidden and displayed
  5. Redesign navigation specifically for mobile devices

We will discuss more navigation design options and approaches in future articles.

Standard vs. Mobile Navigation Screen Shots

3: Radical Changes in Site Design

One of the first things I do when I begin consulting with a customer to make their site mobile accessible is to start trim the content. This involves a careful editing process that spans the following areas:

  1. Reducing the site sections to 4 or 5 (maximum)
  2. Limiting page depth to 3-2 levels
  3. Removing heavy pages with Flash and image galleries
  4. Trimming the length of long pages with lots of text
  5. Scale large graphics to smaller sizes
  6. Reassessing and adapting the interactive media

I think of mobile device website editing as a process of decluttering and keeping the essential content. In future, I think that page segments will be tagged for display on mobile devices so that a single page can present abbreviated content for mobile devices, and full content for non-mobile devices. In the interim, website developer will have to deploy an edited set of pages just for mobile devices. More on this issue to come in future articles...

4: From Plugins to JavaScript

iPhone JavaScript Screen

Today's web pages are weighed down with Flash, video, plugin content, JavaScript, and large graphic. Mobile devices support a more limited set of digital media that has to be formatted in very specific ways to be viewable on a Smartphone. For example, video must be formatted in specific encoding specifications. Flash does not work on most Smartphones, and if it does, a flash element may be the wrong aspect ratio or size for a mobile device. I stay away from Flash altogether for many reasons, which I will discuss in future articles.

Some JavaScript code can be irrelevant to mobile devices or just not work at all on mobile devices. This code will typically be ignored by the mobile device. JavaScript could also be disabled by the user of the device in the device settings. In addition, JavaScript code that causes issues on a mobile device may cause all other JavaScript not to work on the page (blocking other scripts from functioning).

A lot of activities that plugins perform can be reproduced on a mobile device using JavaScript. JavaScript is definitely the right way to deploy content without using plugins. JavaScript can be used on Smartphones to do many of the tasks plugins do. For example:

  1. Video can be embedded on pages
  2. Animations can be added
  3. Special effects can be created
  4. Ajax can be used to create dynamic content
  5. Audio and sound can be embedded

JavaScript is going to work on most SmartPhones. Plugins are rarely written for mobile devices because there are just too many devices and no clear plugin or OS standard available at this time. So my advice to any website developer is to switch your plugin content to JavaScript implementations when deploying your mobile media website. This is far from a simple issue. There are differences in JavaScript support across devices and quirks and differences across Smartphones. If you stick to the most common JavaScript functions and keep the code simple things should work more often on mobile devices.

5: Mobile Media is About Communication and Interaction, Use it!

iPhone Chat

Mobile devices are excellent for customer communications. Mobile devices are perceived by users as phones with entertainment and data functionality. This means that mobile users are in communication mode when using these devices. For this reason, it is essential to add some kind of interactive communication strategy on your mobile media website. You are more likely to generate website interaction on a mobile device than on a non-mobile device. This means capitalizing on interactive email forms, chat functionality, live chat with customer services representatives, and SMS alerts etc.

Mobile media is a communication-centric media. So put on your thinking cap and come up with some interactive applications for your mobile website. Your audience will love you for it.

More to come in future articles...