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.
