The Noko Blog: February 2010

With the recent explosion in smartphone platforms we've seen a growing interest in building mobile websites and intranets. Developing a mobile site can be quite a challenge so we thought we'd put together a post on our experiences so far: content planning, design considerations, tips and tricks, plus information on how we built the mobile version of our own website using Alterian CMC (Immediacy CMS).

Noko are a partner for Alterian CMC and we've been building advanced B2B sites on the platform for several years.

We'll cover both general decisions that we made about the mobile version of our site, and also some quite specific instructions on how we set up the site in Alterian CMC.

Here's a link to our mobile site http://m.noko.co.uk, although you can also point your Smartphone at http://www.noko.co.uk and you should be redirected to our mobile site (more about that later on).

Content and Navigation Decisions

We started with the question: "which content can be re-purposed?" In other words; which content can we serve from the desktop version of our site directly to a new set of mobile Alterian CMC templates so that we're not managing two sets of content when we need not be? We're quite lucky that most of the content can be served to both the full site and the mobile site, but we did have to reorganise a table of data on one of the pages of our desktop site so that it was more adaptable to a small screen.

Our full web site has 6 main navigation options consisting of 11 words in total. We reduced this to 4 navigation options consisting of 4 words which gave us the option of keeping a horizontal navigation bar.

The next question was: "which content is inappropriate or needs to be replaced?" The result was a separate mobile-specific contact page, removal of some unnecessary content on all pages that hindered, rather than added to the mobile experience, and a review and cutting-down of content to make the home page more easily digestible on a mobile device.

The final question was: "what needs to be added?" We added a map, phone, Blog RSS, and "full site" links to the footer of all pages that take advantage of many modern phones' intelligent use of phone number links, Google maps links, and RSS feeds. The "full site" link is an important addition that I'll tell you more about later on...

Mix and Matching your Content in Alterian CMC

I can think of a few basic options of how to manage sharing or replacing your content between your full site and your mobile site in Alterian CMC. You can use one or all of these in combination:

Have the same page served through a mobile template
This allows you to edit a page once and for that content to update instantly on both sites
Create a second version of a page with mobile-specific content
Use this idea when the content you have is simply inappropriate to serve to a mobile device (long contact forms for example), and deserves to be rewritten from scratch.
Create a second version of a page and use the Alterian Shared Content plugin
In some situations you might need to have a separate version of a page (for example, where you must have different meta-data applied to the page on the mobile version of the site), but want to grab existing content so that you're only writing this content once. In this situation use the Shared Content Plugin to grab content from an existing page.
Create a completely separate web site
This is appropriate if most of your content needs to be re-written, or you need a separate team of mobile-aware people editing and reviewing content before it goes live. You could use the Immediacy Cross-site Shared Content plug-in to serve some content from your main site to your mobile site (see the caveat below)

A Note on Sharing content between sites

Be careful! Re-templating existing content or using the Shared Content plug-ins needs careful management. Be aware that you need to educate editors that some content they edit on the desktop version of the site will also be published to the mobile site. It's easy for an editor to accidentally publish a page which contains content that's too wide, or is generally inappropriate for the mobile site.

If you've built a completely separate mobile site and you're using the Cross-site Shared Content Plugin to pull content from your desktop site remember that anyone approving content for the mobile site will not be given the opportunity to review the shared content before it is published.

Creating Mobile-Specific Navigation in Alterian CMC for the Noko Site

We created a hidden page called "Mobile Main Navigation" in the Alterian CMC Editor and created our mobile navigation structure inside. We then used one of the Menu Plug-ins to render this navigation in the mobile theme templates by setting the plug-in's StartPage parameter to the Mobile Main Navigation page.

"Mobile Main Navigation" pages relate directly to the main navigation bar on the Noko Mobile site

On the Noko mobile site the Mobile Main Navigation section consists of 3 "link" pages (with our shortened titles) which link to existing areas of the site, and one page (our mobile-specific contact page) which contained our replacement content for the "Contact Us" page. This is an example of how you can mix and match your content between your main site and your mobile site; reusing some content, and making mobile specific versions of other content.

Creating the Alterian CMC mobile templates

Alterian CMC (the content management system we use for our website), handles multiple templates out of the box which Alterian call "themes". Originally designed with printer friendly and accessibility templates in mind, the "themes" feature can also be used for creating a mobile template (which we, unsurprisingly, called "mobile"). So step one is to copy your default theme and rename it "mobile" before starting development. To view your site in a different theme, just append ?theme=[the name of your theme folder] to the end of any Alterian CMC URL.

Start with a copy of your default template and rename it "mobile"

Next review every piece of XHTML in your mobile templates, stripping out anything that is not needed before starting to build your style-sheets. Be ruthless at this stage as you're saving bandwidth with everything you remove!

XHTML considerations

In the <head> of our templates we added the following tags:

<meta name="viewport" content="width=device-width; initial-scale=1.0; ">

<meta name="HandheldFriendly" content="true" />

<link href="images/apple-touch-icon.png" rel="apple-touch-icon" />

Viewport lets the device itself decide how wide it should set it's viewport in order to display the page. If you set the width parameter to a pixel value (width=480 for an iPhone), other devices tend to either ignore this or use it in an inappropriate way (and subsequently, what looks good on one phone looks either much bigger, or much smaller on other devices).

HandheldFriendly tells devices (in particular the Google spider) that this web site is handheld-friendly. In some situations Google will display a small mobile phone image next to a search result to indicate that a site is mobile friendly, although I honestly haven't worked out Google's logic of when this icon is displayed and on which devices!

rel="apple-touch-icon" is a link to a 57px by 57px PNG file that will be used as the icon if a user bookmarks the web site onto their iPhone screen.

You don't need to add the rounded corners or glossy highlight to your icon; the iPhone automatically creates those effects for you. (If you don't want those effects, you can specify a "precomposed" icon.) The icon should be named either:

"apple-touch-icon.png" or
"apple-touch-icon-precomposed.png"

Now is also a good time to set up a separate Google Analytics or other statistics tracking account if you want to track your mobile stats separately from your main web site.

CSS Style-Sheet Considerations

Once you have your bare-bones XHTML I would strongly recommend clearing any style-sheets and starting from scratch for two reasons. Firstly to encourage you to reconsider how every single element should both look and be built on a mobile device, from body text to headings to beautifully designed curved boxes. Secondly to encourage the building of a lightweight style-sheet that starts from the ground-up, rather than adding bandwidth-consuming overriding style definitions.

If you usually create several .css files in order to help you organise your CSS development, it's worth remembering that consolidating these into as few .css files as possible will reduce the number of HTTP calls needed to serve the page to a mobile device.

A good way to begin initial template testing is to view your development site in Safari appending ?theme=mobile the end of your home page URL to force Alterian CMC to serve your mobile template. You'll get an excellent approximation of what the site will look like on an iPhone. There are also plenty of mobile device emulators out there for Windows, Blackberry and Android phones. http://www.browsercam.com/ also offer a screen-shot service that now supports some mobile devices.

Use Liquid Layout

One method I would suggest when creating a mobile style-sheet to fit a variety of screen sizes would be to build your style-sheet as a liquid layout. This ensures that it can resize itself to each individual device's standard screen width and resize itself if a phone is rotated between portrait and landscape mode.

Use liquid CSS layouts to ensure your site works across different devices and orientations

By liquid layout I mean your main root DIV tag should not have a width associated with it, and all content DIVs within this DIV should also be left to resize themselves as appropriate.

Your layout will have to survive in widths from around 300 pixels to 500 pixels.

Stop the iPhone from resizing your text

The iPhone (and other Webkit based mobile browsers) will try and resize text to a more readable size if it thinks your text is too small (useful for when the iPhone is looking at web pages that are not optimized for mobile). As we're developing a specific mobile style-sheet your text should be set to a readable size anyway and you probably don't want the iPhone tinkering with it.

body{

    -webkit-text-size-adjust:none;

}

Resize Images Using CSS

If you are repurposing content originally intended for the full version of your web site then you may well have images within pages that are far too wide to fit on a mobile screen and push your liquid layout very wide.

If you have many large images like this then you should ask yourself whether you should serve smaller images for the mobile site, reduce the size of all images on your main web site, or create mobile-specific versions of problem pages.

If your large images are few-and-far between, and you understand that you are sacrificing bandwidth to make editing your site a less labour intensive process then you can use the following style-sheet rule to target all images within the main body of your pages in order to resize them appropriately:

#mycontentarea img{

    max-width:100px;

    height:auto;

}

A Note on Rounded Corners and drop-shadows

Rounded corners are a popular feature on many sites these days so it's possible that you (or someone you know) has a particular attachment to them. Creating rounded corners that work in every possible desktop-browser generally means one or more of the following:

Generating extra XHTML mark-up to hang images from (which is a bandwidth-hog)
Using JavaScript (which is not available on some Smartphones)

To avoid the above issues and have rounded corners that work on many of today's phones with minimal development costs you might wish to consider the CSS3 border-radius and box-shadow rules.

This technique will work on iPhone, Palm Pre and the very latest Google Android phones (with the use of the -webkit CSS selectors), and will degrade to clean, square-cornered elements on Windows Mobile or Blackberry. The inclusion of the CSS3 proposed rule should ensure that when these browsers catch up, they will start rendering these lovely additions. The -moz-border-radius rule is included as Mozilla offer a downloadable version of the Firefox browser for some Nokia and Windows Mobiles which uses the same Geko rendering engine as their desktop counterpart.

.roundedCornersAndDropShadow{

    padding:10px;

    border-radius:10px;           /* CSS3 */

    -moz-border-radius:10px;      /* Geko (Firefox) */

    -webkit-border-radius: 10px;  /* Webkit (Safari on iPhone, Newer Google Android phone browsers, Palm WebOS) */

    box-shadow: 5px 5px 6px #999;

    -moz-box-shadow: 5px 5px 6px #999;

    -webkit-box-shadow: 5px 5px 6px #999;

}

If you decide to go down this route, ensure your design still looks acceptable on Windows and Blackberry phones with squared off corners and no drop-shadows. There is an argument that rounded corners should not be attempted in any other way on mobiles as the development and testing costs involved in getting them to work in all phone browsers would be very prohibitive.

Mobile Device Detection and Site Redirection in Alterian CMC

Earlier I touched upon the need to detect mobile devices coming to your web site and forward them to your mobile web site. At Noko we've created a .Net-based extension to the Alterian content management system which manages mobile device detection.

If there is sufficient interest then we may offer this code along with some instructions and make it available to existing Alterian customers. Drop me an email at steve.attewell@noko.co.uk if you think you could make use of this code.

Here's what we're trying to achieve:

If I'm viewing www.noko.co.uk on my desktop nothing happens
If I'm viewing www.noko.co.uk on a mobile device then I got forwarded to the m.noko.co.uk mobile site.
When Viewing the mobile site I have the option of clicking on the "full site" link and, as I move from the mobile site to the full site, I see instructions embedded into the full site home page on how to always see the full site on my mobile device.

Here's how we did it:

On www.noko.co.uk (desktop site)

On the full, desktop version of our site we detect the browser's User-Agent and use the freely available Mobile Device Browser Definition file at http://mdbf.codeplex.com/ to see if the User-Agent is an appropriate Smartphone device.

If a Smartphone is detected then the visitor is redirected to http://m.noko.co.uk/default.aspx?theme=mobile

If mobile=NoThanks is detected in the query string on www.noko.co.uk then

a custom plug-in renders extra mark-up at the top of our homepage telling the visitor that they can bookmark the current page http://www.noko.co.uk/?mobile=NoThanks on their mobile device to always come to the full version of the site.
A session-cookie is set to stop the visitor being forwarded back to the mobile site during this session.

On m.noko.co.uk (mobile site)

To ensure that the mobile theme is always served on the mobile web site: If the sub-domain of the current site is "m" and the "mobile" theme is not being displayed, redirect the visitor to the current URL with ?theme=mobile appended.

Note: you should not enforce the "default" theme on the full version of the web site; doing so would potentially stop you being able to use other themes on your main site.

We added a link to the "full site" in the footer of all templates with the URL: http://www.noko.co.uk/default.aspx?theme=default&Mobile=NoThanks

In Conclusion

This overview should give you a good place to start when considering a methodology for creating a mobile site with Alterian CMC or any other content management platform.

I hope you now have some ideas for

Which content you can re-use and which content needs to be mobile-specific, or dropped altogether.
The beginnings of a practical development methodology and what needs to be considered when building the XHTML and CSS for your mobile site.
An idea of how you will treat mobile device users who visit your full web site, or do not wish to be forced to see the mobile version of your site.

If you are an existing Alterian CMC or Immediacy customer and are interested in the mobile device detection system we've built, drop me a line. If there is sufficient interest we will almost certainly make this development available to others in some form.

Enterprise wiki and blogging software can be used to solve an extremely wide range of collaboration, knowledge management and communication challenges within an organisation. They’re so flexible, though, that it can be difficult to know where to start.

We’ve put together a few practical examples based on our client work, which are designed to help you out if you’re looking to introduce or extend the use of enterprise social software and concepts within your organisation.

(Note: We’re an Atlassian partner and there are mentions of the Confluence Enterprise Wiki and associated plug-ins below, but the usage examples will be of use whichever product you use)

Getting started

First off here are the three steps we recommend to clients:

Understand the capabilities of enterprise wiki and blogging software – It’s simple to get online accounts with most vendors to evaluate the software
Identify a business challenge or pain point related to collaboration, content publishing or knowledge management
Solve it with enterprise social software

Simple, right?

Practical wiki usage examples

Here are some help and ideas for points 2 and 3 above:

Current awareness publications

Overview: Many professional services firms (such as law, accounting and business consultancy) keep colleagues updated with developments within their practice or specialist area.

Business issues: The process for current awareness is usually ad-hoc between departments and often involves mass emails and various different document attachments. The emails often get sent to the wrong people, information is not centrally stored or archived and is difficult to search. Mass emails clog up email boxes and servers and there is no mechanism for adding commentary or additional resources which might be useful to colleagues.

Solution: Use a blogging platform to create and deliver current awareness and share the content via RSS news feeds, either direct to news readers or to your intranet. Consider adding social bookmark functionality so that colleagues can store and share their online links and related content firm-wide. Finally, ensure that content creators label articles effectively and encourage colleagues to comment on items and add their own related resources.

Benefits: Current Awareness publications become consistent across the organisation, centrally managed, easier to filter and search. Inbox clutter is reduced. The publications are more collaborative and evolve into a firm-wide knowledge base of articles, commentary and links to resources. The solution also introduces staff and fee earners to the concepts of labelling, commenting and social bookmarking. Effective post tagging enables trends to emerge over time.

Supporting field sales and support staff

Overview and issues: Staff working away from the office need access to a large range of information and resources. They also need organising and managing remotely.

Solution: The web based collaborative nature of a wiki makes it ideal for managing and collaborating with distributed colleagues.

Benefits:

Centrally organise and manage sales literature, sales techniques and experiences
Build client, product and competitor knowledge bases
Use the wiki to set and manage tasks (an interesting extension for Atlassian Confluence called TaskDoc (http://www.taskdoc.com) can help)
Manage reporting – Staff can use the relevant wiki spaces to submit reports and status information
Enable team collaboration –Remote colleagues can collaborate with each other
Support knowledge bases – Build searchable knowledge bases that expand with new knowledge and experience over time
Information and updates – Keep staff up to date with the latest news, information and updates

In addition most wikis use templated page designs that can be adapted to make them respond effectively over lower bandwidth networks (such as 3G) and via mobile devices.

Collaborative document creation and cross-department projects

Overview: There are many scenarios where a team needs to come together to collaborate for a client, an internal project or a sales bid.

Solution: The collaborative editing and management features of a wiki can make it an ideal solution.

Benefits:

Using a wiki can provide your teams with a much more effective way of working. As an example, a sales team working collaboratively on a bid can use a wiki project workspace to:

Manage and discuss customer intelligence and potential competitor bidsStore the ITT documents
Collaborate on the bid document itself
Gain and manage project/bid feedback
Manage task assignments, timescales and milestones (TaskDoc for confluence can help)
Share links to relevant resources

If you’re using Confluence it’s also possible to pull customer intelligence from SalesForce.com via a commercial plug-in from CustomWare

Once the project has been completed a project review team can assess the knowledge gained from the bid and store it for later use.

Managing knowledge bases for support, product information and manuals

Overview: In most organisations there’s a need to provide easy access to knowledge bases for everything from using the phone system to solving software support issues.

Solution: A wiki is an ideal way to build and manage knowledge bases that enable interaction and extension over time.

Business benefits:

Effective knowledge bases enable staff, partners and customers to serve themselves
Wikis can easily be updated with new issues, resolutions and knowledge
Effective labelling enables related information and common issue patterns to emerge
For support teams a wiki can be a great way of accessing technical knowledge bases, documentation and product downloads remotely when onsite with a client
The wiki can also be used to build documentation over time (I know that in an ideal world this shouldn’t happen but let’s face it – It does)

Note: Many of the examples above can also be amended to suit collaboration scenarios with suppliers and partners.

Final tips for encouraging buy-in from the business

Avoid using jargon – If you’re selling these concepts to the business (which you probably will be) it can be worthwhile avoiding the terms blog, wiki, enterprise social software and enterprise 2.0. Just concentrate on current challenges, solutions and benefits to the business.

Avoid using the term ‘social’ – Although I always think of the word social in terms of a social business culture that fosters collaboration and engagement, it’s worth noting many people instantly think of ‘socialising’ (or Facebook, MySpace, Twitter, etc) which generally has a negative impact.

Friday, 19 February 2010

A guide to developing mobile/smartphone websites in Alterian CMC content management system (formerly Immediacy CMS)