Tuesday, October 01, 2013

Introducing Responsible Web Design

How do we do Mobile with SDL Tridion?

If I had a dollar for each time that I've been asked that in the past few years, well, I'd have a few dollars. As a seasoned Tridion implementer I know that the best answer to this question is "how do you want to do Mobile with SDL Tridion?" or better yet "What do you intend to achieve with the mobile channel?".

Unfortunately, most of the time the person asking this question is not someone that can answer my question - they are looking for the magic "go mobile" button that will transform anything they currently have to "mobile-ready". And - as you probably know - Tridion is just not that type of system that can transform your content without you being quite explicit about what you're trying to achieve. It will do anything - as long as you can tell it what you want to do.

This question has been particularly more frequent ever since we acquired Bemoko, a UK-based mobile-delivery focused company, and there's been some confusion in the market about what exactly we set out to do with this acquisition. Let me state right here right now that we did not have a plan to give you that "go mobile" button with it (not immediately anyway). 

Instead, our plan from the beginning has been to provide you the tools you need to create a proper mobile strategy and presentation for your content. In other words, with the features we are adding to Tridion you will be able to create that "go mobile" button, and it will do exactly what you want it to do.

So we started following that path - what do our implementers need to provide cross-channel experiences for the sites they create - and released version 1.0 of the Tridion Context Engine (officially named Context Engine Cartridge) about 2 months ago, and are now getting ready to release an update with some interesting new features. The goal of this context engine is really to start providing developers with the tools they need to create "context-aware" experiences, and therefore the focus of the first release was with providing you knowledge about the device your visitors are using to access your site, on first click, on the server side.

There are already quite a few posts from the Tridion community about how to use this cartridge, I'd recommend reading this one by Rob Stevenson Leggett and this one by our very own Eric Huiza. In a nutshell, this context engine - at time of writing - gives you properties about 3 aspects of the current device:
  • Device
  • Browser
  • OS
Examples include "IsTablet" or "IsMobile", etc. Since most of this data is "buried" inside the Ambient Data Framework, I joined up with a few community members and created an open source project dubbed "SDL Tridion Context Engine Wrapper" to expose some of this information in a more web-developer friendly way and you will now find .NET server controls, html helpers for MVC.NET and even a Personalization & Profiling extension to expose these properties as part of the visitor's profile. 

What can we do with the Tridion Context Engine?

During the recent SDL Tridion MVP Retreat in Óbidos I sat down with Rob, Mónica and Julian and we decided that we would build a set of methods to enable Responsible Web Design, a framework to provide implementers ways to use Responsive Web Design while making sure they keep their bandwidth (and load speed) as low as possible. These are some of the things that the framework can be used for:
  • Remove navigation elements that would not display on a given device
  • Remove page elements (calls to action, sidebars) that would not display on a given device
  • Resize images to match the device characteristics
  • Resize images to account for Retina capable devices (not as simple as it would immediately seem)
  • Group devices into device families, simplifying the "targeting" of these solutions

We expect to have some really cool functionality added to the Context Engine soon (like expression evaluation for audience segmentation) and will continue enhance its sister open source project as we go - and as we gain field experience with it - and will continue keeping in mind that mobile is a channel that will continue evolving at a really fast pace (cars? glasses? road signs?) and adapting as quick as we can to support what the field really needs to do a successful implementation of "the right content at the right time for the right device".


You can find the Tridion Context Engine Wrapper project on github.

8 comments:

Alvin Reyes said...

I'm looking forward to designing for, and implementing, more context-aware CMS implementations.

The Ambient Data Framework is deceptively powerful since it's not just about Web, but about context.

Though it can be a powerful quick win, I would be careful with investing too much on today's devices. I like the device families for layout, but think we'll also want to focus on features over form factor.

In other words, detect device features like geo-aware, voice-enabled, eye-blinking-enabled, or context features like "in the bathroom" or "moving very quickly" rather than assuming these because it's a mobile phone or tablet.

Maybe might show/hide the touch-enabled navigation when the user has a touch-enabled device? ;-)

Good stuff, Nuno. I'll follow-up with a post or two.

Frank Taylor said...

I'm laughing over the "go mobile" button because I've actually had a client ask where that was in Tridion.

"Responsible Web Design" is the right phrase to use because strictly building a mobile website or strictly throwing some media queries into the stylesheet isn't enough. People go to the website for content, not for the layout. Shifting the focus to producing content that makes sense in context is totally the right thing to do. I can't wait to see more.

If you want to mix in some voice control, geolocation, or both, let me know. I've got some JS APIs in my back pocket that are looking to break loose.

Nuno said...

Any chance they meant the "Device Preview" that was built into Experience Manager? Fun in any case :)

I will remember your offer to help!

Desert Sea Design said...

Thanks For this information!

sanam arzoo said...

Thanks for specific this nice valuable data .It is very fantastic and here is nice ideas Great Information! Nice post,it is very terribly useful on behalf of me.One of the few articles I’ve scan these days.web designI’m locution thanks from the thousands UN agency get pleasure from your journal.I simply stumbled upon your journal and needed to mention that I’ve very adored water sport around your journal posts.I am hoping you write all over again terribly soon!

sheila olson said...
This comment has been removed by a blog administrator.
Free SEO Tools said...

Excellent your great post.This post is important for me.This post give more important knowledge about we design.Your post is helpful and important for web designer.Thanks a lot for share your great post.

Nobanno said...

A superb reactive web site tend not to are expensive. However it can provide us all a good deal. Factors like improved conversion rates along with increased manufacturer loyalty along with acceptance can be obtained by a creating a top-notch website design. Credit Union Web Hosting