1. Executive Summary 

Addressing the question of mobile content publishing is no longer a “nice to have”—it’s a must have. With more and more of your customers accessing the web via mobile devices, every day you delay a strategy is a day your business is at greater disadvantage.

This white paper provides information for business and technical decision makers on why you need to implement an effective mobile website strategy, and the steps creators, maintainers, and operators of websites can take to achieve this.

We ask you the most fundamental question: do you really need a mobile presence for your website? To help you decide, we pose some further questions for you to think about—is your target audience more likely to access the web from a mobile device? Do you need to provide location based service information?

If you do need a mobile presence for your website, this whitepaper will tell you what you need to know. We’ll tell you how to meet your customers’ needs as quickly as possible, how to ensure that you show essential information, and some methods for designing mobile-friendly page layouts.

We then discuss best practice for delivering web content to mobile devices as recommended by The World Wide Web Consortium (W3C) who develops the protocols and guidelines that ensure the long-term growth of the internet. The principal objective is to improve the user experience of the Web when accessed from such devices.

Finally, we talk about how Squiz can effectively address your mobile web business needs using fully supported open source software and professional implementation services.

2. Introduction

We’ll start by defining three important concepts.

Mobile Web refers to Internet access from a mobile phone or smart phone, such as the iPhone.

Classic Web refers to Internet access from a desktop or laptop computer.

Customer refers to end users.

For twenty years, people have accessed the Classic Web in pretty much the same way—by using a software browser on a desktop or laptop computer. Whether they used Netscape, Internet Explorer, Opera, Firefox or Safari, the experience was generally the same. As screen resolutions increased over that time, web developers enjoyed a generous amount of real estate with which to deliver content to customers.

However, the way humanity accesses and uses information online has entered a transitional phase, which will dramatically change how the Internet will be accessed.

You see, the Mobile Web is how most of us will use the Internet, most of the time, in the very near future. You don’t need a crystal ball to see this. Just listen to what Gartner is saying. (1)

“By 2013, mobile phones will overtake PCs as the most common Web access device worldwide”. Gartner Key Predictions for IT Organisations and Users in 2010 and Beyond.

In fact, the number of Internet users in Japan accessing from mobile phones exceeded those using it from personal computers in 2005! (2)

But based on analysis of Squiz customer polling, the reality is that few players have seriously thought about Mobile Web. Industry experts at Mobiforge estimate that only 0.2% of websites are optimised for mobile use—a shockingly low number. (3)

How could this be? A combination of factors is responsible.

The global financial crisis slashed IT spending down to the bone. Non-essential initiatives quickly fell off the radar. It was only the brave few who were prepared to invest in Mobile Web technology during this epoch, which arguably, we still have not seen the back of. However, as we will see, this position is no longer tenable.

Secondly, how on earth do you cram a website into a mobile phone? Understanding what it means to design for a mobile device screen can be a challenge. You’ll need to contend with a multitude of screen shapes and sizes, diverse interfaces and operating systems, a number of ways to format content, as well as varying network speeds and download times.

Then there is the issue of trying to understand the demographics of a Mobile Web customer, which can be very different to Classic Web demographics. It is important to have a very good idea of who your target user audience is and what mobile technology they most frequently use.

And last, but far from least, there is the question of how to deliver content to the Mobile Web. Do you need a new Content Management System (CMS)? Do you have to purchase new hardware? What about software licensing costs? Will your web team need special training to publish content? How much is this going to cost?

You would be forgiven for thinking that it’s all a bit too hard. The good news is that it doesn’t have to be and the time for prevarication is long gone.

3. Background Information

According to the International Telecommunication Union (ITU), there are 4.6 billion mobile subscribers around the world and they expect the number of mobile cellular subscriptions globally to reach five billion in 2010. The ITU also expects to see the number of global mobile broadband subscriptions exceed one billion during 2010. With current growth rates, web access by people on the move is likely to exceed web access from desktop computers within the next five years. (4)

This means that mobile phones have become the most universal communication device in human history. This also means that the website owners around the world need to think about what this means for their customers, audience, and websites.

Opera Software, the company that makes one of the most popular web browsers for mobile phones, tracks the use of its product and reports rapid growth in Mobile Web browsing, particularly in developing countries. According to Opera’s report, the number of web pages viewed by users of its software last year was over 20 billion, a 220% increase compared to 2008. (5)

And yet, as we mentioned in the Executive Summary, some experts at Mobiforge estimate that only 0.2% of websites are optimised for mobiles—a shockingly low number.

4. Do I really need a mobile presence for my website?

Before we get too far down the track, ask yourself this fundamental question.

“Do I need really need a mobile presence for my website?”

A great place to start is to work with your technology professional to analyse your traffic logs and see what types of browsers are accessing your site. Do you see mobile traffic? Also take the time to poll some of your customers about the likelihood of them accessing your website (and others) on their smartphones.

To help you decide, here are some further questions to consider.

Do I need to provide location-based services information?

Location-based services are used to identify the location of a person or object and are an example of telecommunication convergence. They include search, personalised weather services, parcel tracking, vehicle tracking services, and even location-based games. LBS can include mobile commerce when taking the form of coupons or advertising directed at customers based on their current location. (6) Popular uses are:

• Requesting the nearest business or service
• Navigation to any address
• Locating friends, customers, employees or resources on a map displayed on the mobile phone
• Receiving alerts, such as notification of a sale on petrol or warning of a traffic jam
• Location-based mobile advertising
• Asset recovery such as locating stolen assets in containers where GPS wouldn't work by using active RF.

Do I provide updated information to customers who are away from a computer?

Does your organisation provide updated information to customers away from their computer, such as students on campus or mobile workers who are constantly on the road (road warriors)? They may be waiting in line, riding on the train or bus, running to the departure gate or lost in an unfamiliar town late at night and trying to get somewhere.

Does your organisation use services such as Twitter and Facebook to deliver up-to-the-minute information in real time? Because of the popularity of iPhones, BlackBerries and similar devices, Facebook via mobile browser has grown 112 percent in the past year, while Twitter has experienced a 347 percent jump. (7)

Do I provide updated information to employees who are away from a computer?

At the business-to-employee (B2E) level, you can quickly, easily, and cost-effectively deploy corporate information and services directly to your employees’ smartphones. Employees can have instant access to critical, time-sensitive corporate information, check the status of key accounts, access documents, monitor targets, find appointments and close off sales leads.

Does my organization have a charter to disseminate consumer information?

Government departments, emergency organisations and community services often have a requirement in their charter to provide consumers with access to good and timely information.

Do I provide immediate “calls-to-action”?

Just about every type of website has a call-to-action built into it and is most likely the reason that you have a website in the first place. In a nutshell, a call-to-action is defined as something (a design element or some piece of content) that directs a visitor to take some specific measureable action. If done right a call-to-action will compel your visitors to do what you ultimately want them to do. Examples of calls-to-action include:

• Make an online donation
• Request an appointment
• Purchase a product
• Fill out a request form
• Register for an event or program

If your answer is “Yes” to any one of the questions above, you need to seriously consider a mobile presence for your company’s website.

No matter what you learn, expect that figure to grow—the reality is that Mobile Web is how most of us will use the Internet - most of the time - in the very near future. (1)

“By 2013, mobile phones will overtake PCs as the most common Web access device worldwide”. Gartner Key Predictions for IT Organisations and Users in 2010 and Beyond.

5. I need to mobilize - what do I need to know?

If it is now clear that you need a mobile presence for your website there are some basics you will need to know.

Meet your customers’ needs as quickly as possible

Classic Web customers and Mobile Web customers are seeking different kinds of information and might have different reasons for visiting the same site. For example, Mobile Web customers may not have the luxury of time to wait and search for information at your site. Mobile Web customers are more likely to want information to help them at that location or time, such as finding directions or finding out what's going on nearby. Or they might want quick entertainment to pass away a short period of time, like something to read on the train or while waiting to meet someone. (8)

If you repurpose existing content for the Mobile Web, you need to think carefully about how this audience wants to consume content—which is content that shows more, tells less. You need to constantly consider the small mobile-viewing experience by making content optimised for handheld screens. However, there are some huge differences when using these new ways for your audience to consume content and in trying telling the same story. Customers are inundated with information, and providing them with more content isn't the answer. Give your audience a new way of understanding your message and ensure this content stands out by being valuable. (9)

Simplify your navigation

Classic Web sites usually repeat the navigation on every page. However, screen real estate is precious on a mobile screen and navigation can push content out of view. For your Mobile Web site, consider a simplified form of your navigation menu on your homepage, and exclude the menu from other pages. On other pages only include links back to the homepage and back to the last important point along the path customers have taken. Show these links at the top and bottom of the page so they're never too far away. (8)

Clearly distinguish selected items

Mobile Web customers may lack fine control over the cursor depending on the mobile device being used. They could be navigating around the screen with a stylus, a set of keys, a joystick, or their finger. It’s helpful to highlight active elements on the page, such as buttons or links, when these elements are selected. (8)

Make user input as simple as possible

It’s often helpful to allow customers to input information by making selections instead of entering free text (or at least provide this as an alternative method). Entering text on a mobile phone can be painfully slow and error-prone on the typical 12 button mobile keypad but it’s fantastic on the iPhone, WinMo, Blackberry etc. Mobile Web customers are more likely to make mistakes, due to misspelling or mistyping, or may try to take shortcuts. (8)

Design mobile-friendly page layouts

On your Mobile Web site, make sure you design the page to present content in the right order and render well on mobile screens. Website layouts for large landscape PC screens usually don't work well on small portrait mobile phone screens and you have to cater to different screen sizes, resolutions and shapes from long rectangles to perfect squares. Furthermore, mobile browsers and page transcoders usually vertically stack pages suitable for portrait display. It's often best to have completely different page designs to meet mobile customers' needs. (8) The following image shows the most popular screen sizes for mobile devices - you can see how they differ.

Image Source: http://articles.sitepoint.com/print/designing-for-mobile-web

Detect and redirect

Detect and redirect to a mobile site automatically. Why make customers remember domain names for Web and Mobile Web sites, when one will do? When a user visits your site the server looks at the visitor's user agent and tries to detect if the visitor's using a mobile device or a desktop browser. Based on that information, the server will send the most appropriate page—whether they're on computers or mobile devices, users will view the version of the site that is best optimized for them.

Validate your mark-up

Be aware that mobile browsers are less forgiving than desktop browsers. Therefore it is recommended to validate your mark-up. Much of the checking and validation of a mobile web site can be done through a normal desktop browser. If you're developing in XHTML, for example, you can reuse all of the same tools that you use to validate traditional sites.

The W3C validator can be used to find simple mark-up errors - there's even a mobile-specific version.http://validator.w3.org/mobile/

The Ready.mobi site lists a few additional mobile specific checks. http://ready.mobi/launch.jsp?locale=en_EN

Simplicity is the key

Stick to the essentials and keep it simple. White space is important on a mobile screen. Images take bandwidth and make a mobile site slow (read expensive) so try to avoid images when possible.

W3C Best Practices

When it comes to web standards, the World Wide Web Consortium (W3C) is the go to source. They develop the protocols and guidelines that ensure the long-term growth of the Web, and help it to achieve its full potential.

The W3C Mobile Web Best Practices 1.0 document specifies best practices for delivering Web content to mobile devices. The principal objective is to improve the user experience of the Web when accessed from such devices. Their recommendations refer to delivered content and not to the processes by which it is created, nor to the devices or user agents to which it is delivered. (10). The following image illustrates W3C's top ten ways to mobilise. 

Image Source.  http://www.w3.org/2008/Talks/09-mwbp-miux/flipcards.png

6. MySource Matrix and Mobile Web

The Squiz-developed MySource Matrix content management system (CMS) is a robust scalable open-source solution for the enterprise. It is an incredibly powerful and flexible “off-the-shelf” CMS that can be configured in a multitude of ways to suit the individual requirements of each project—including for the mobile Web.

The open source nature of MySource Matrix makes installation of the CMS across multiple servers a cost effective means of serving large numbers of web objects, and provides a scalable solution for the future. Since the system runs on an open source platform, installing new servers or hosting on existing servers will not attract any additional platform related licensing fees.

MySource Matrix for the Mobile Web

MySource Matrix fully supports publishing contents to mobile websites by defining new design templates to suit mobile devices. MySource Matrix employs the use of CSS style sheets to deliver such tailored content for specific devices like mobile device.

By separating the design and contents, MySource Matrix enables reusing the contents to different designs.

For example, the University of Melbourne uses MySource Matrix to deliver web content from their site designed especially for mobile devices. http://m.unimelb.edu.au/

EatStreets uses MySource Matrix to present the same web content in different format for mobile devices.http://eatstreets.com.au/m.

Here at Squiz, we use the same content on both our mobile site and normal web site. The content displayed to the mobile device is reformatted in a design more suitable to small screens. 
http://squiz.com.au/mobile

The following explanation and diagram show how MySource Matrix picks up the device suitable design and shows the contents.

When a browser requests a page from the web server, the server detects the browser’s type and version, and redirects to the appropriate site in MySource Matrix. For each site, My Source Matrix applies the device specific design to the contents and displays them in the browser.

W3C Mobile Web Best Practices 1.0 (MWBP)

Many Squiz implementers have completed the W3C’s Mobile Web Best Practices courses and have experience in mobile content delivery, so are well-positioned to advise on, and implement mobile designs that conform to your requirements.

Manual and Automated Testing

Squiz testing services are performed manually by actual users for different browsers and mobile devices (iPhone, Blackberry etc.), as agreed with our clients. In particular, our qualified test team will test online forms and searches manually. In addition we use the automated testing tool Browsercam (http://www.browsercam.com), which will take snapshots of web content for different devices. Those snapshots (images) are date and time stamped and form part of our deliverables.

7. How Squiz can help!

Synonymous with developing supported open source software and delivering effective web solutions for more than a decade, Squiz is Australia’s largest and most comprehensively resourced Content Management System (CMS) business. Using the experience gained in hundreds of website deployments Squiz takes a holistic approach to project implementation. Squiz’s philosophy is to partner with you to develop and deliver a successful web strategy using Squiz Solutions – a unique system developed in house by Squiz.

Squiz Solutions provides flexible options to allow you to choose the extent to which you engage Squiz’s consulting services, throughout each of the phases of your website project.

Analysis Services

Squiz can help you in the analysis phase of your project, from determining your business requirements, to information architecture design, user analysis and usability testing. The key output of the Analysis Phase is a Functional Specification which defines the functionality of your site. The Functional Specification is required before we start planning for the website implementation, since this document defines your website in terms of layout and functionality. A Functional Specification should define each page that you require Squiz to build, in addition to each functional component of a page to be built.

Having this level of detail makes it easy for Squiz to understand the type and number of items to be built, as well as those that need to be designed during Design Creative during the Implementation Phase.  From a Functional Specification, Squiz can determine the appropriate Implementation Package for your needs, based on the number of functional components you require us to build. The number of functional components will also affect the duration of your project. You may decide that you would like to undertake the Analysis Phase in-house or contract out to a third party.

Implementation Services

Squiz specialises in providing the services necessary to implement your website in MySource Matrix from start to finish, including build planning, project management, design creative, design implementation, functional implementation, content migration, documentation, platform build, QA testing, go live support and training. During the Implementation Phase, Squiz uses the wireframes from your Functional Specification and build your website.

Squiz Implementation Packages allow you to use Squiz's services to get your website up and running. Squiz offers these packages which bundle selected streams of our Implementation Services at a discounted price.  You can find details of each of our Implementation Services in the sections to follow.  In each of these sections, we have also provided pricing for purchasing each of those Analysis Services as a separate service.

Although implementations share the same basic steps, each individual project has different levels of requirement – most often related to the size of the implementation, and each package is targeted accordingly. Each package offers an increased level and type of services provided to match the growing complexity of the projects. For example, the number of days of training included in our packages ranges from 5 to 50 days.

Support Services

Once your site is live, you may wish Squiz to provide ongoing support services such as software upgrades, 24x7 emergency support, a single point of contact and priority help desk access with response time and uptime guarantees.  Squiz can provide these services under a Service Level Agreement (SLA), which is a formal agreement between yourself and Squiz, chosen to meet your particular requirements for the support of your MySource Matrix system.

Squiz can host and manage your MySource Matrix system and servers at a state of the art hosting facility on your behalf. Squiz can also rent or sell you the appropriate hardware as part of any hosting agreement.

8. References

(1) Gartner - Highlights Key Predictions for IT Organizations and Users in 2010 and Beyondhttp://www.gartner.com/it/page.jsp?id=1278413

(2) InfoWorld - More mobile Internet users than wired in Japan http://www.infoworld.com/d/networking/more-mobile-internet-users-wired-in-japan-259

(3) Mobiforge - http://mobiforge.com/

(4) International Telecommunication Union - https://www.itu.int/newsroom/press_releases/2009/39.html

(5) Opera - State of the Mobile Web, December 2009 - http://www.opera.com/smw/2009/12/

(6) Wikipedia - Location Based Service- http://en.wikipedia.org/wiki/Location-based_service

(7) Bizlex – Managing your online presence by Sue H. Strup, MSEd - http://www.bizlex.com/Articles-c-2010-04-16-92282.113117_Managing_your_online_presence.html

(8) Webcredible - 7 usability guidelines for websites on mobile devices - http://www.webcredible.co.uk/user-friendly-resources/web-usability/mobile-guidelines.shtml

(9) Savvy B2B Marketing - The Dos and Don'ts of B2B Content Reuse by Michael Linnhttp://www.savvyb2bmarketing.com/blog/entry/594191/the-dos-and-donts-of-b2b-content-reuse

(10) The World Wide Web Consortium (W3C) - http://www.w3.org/TR/mobile-bp/