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.

18 comments:

Nivlong 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.

Unknown 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!

Unknown 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!

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.

Life is Beautiful said...
This comment has been removed by a blog administrator.
Website Development Company said...
This comment has been removed by a blog administrator.
Unknown said...

Creativity is needed everywhere. This is an age of creativity. Especially in web design and graphic design section creativity is must. http://www.startcreative.com.au/ is also a great source.

Anonymous said...

This constantly amazes me just how blog owners such as your self can find the time as well as the dedication to keep on crafting superb blog posts. Your website is good and one of my personal must read weblogs. I just had to thank you.
Professional Web Design Company

Unknown said...

Now a days responsive design plays major role.With help of responsive design the website can be view from all the devices like iPhone,iPad and tablet,etc,...
Web Design Companies in Coimbatore | Web Designing Company in Coimbatore

Encounters Nepal said...
This comment has been removed by the author.
Simran said...

Great Article & Thanks for sharing.

Oflox Is The Best Web Design company in Dehradun
Website Designing company in Dehradun
Website Development company in Dehradun
Digital Marketing Company In Dehradun
Website Development Company In Saharanpur

rohit said...

Great deals of important information and also a great article. I am currently following for your blog site and I am bookmarking it future reference. thanks for sharing!
top 10 crm software in india

Village Talkies said...

A great blog, it has a lot of useful information to me
Village Talkies a top-quality professional corporate video production company in Bangalore and also best explainer video company in Bangalore & animation video makers in Bangalore, Chennai, India & Maryland, Baltimore, USA provides Corporate & Brand films, Promotional, Marketing videos & Training videos, Product demo videos, Employee videos, Product video explainers, eLearning videos, 2d Animation, 3d Animation, Motion Graphics, Whiteboard Explainer videos Client Testimonial Videos, Video Presentation and more for all start-ups, industries, and corporate companies. From scripting to corporate video production services, explainer & 3d, 2d animation video production , our solutions are customized to your budget, timeline, and to meet the company goals and objectives.
As a best video production company in Bangalore, we produce quality and creative videos to our clients.

Unknown said...

aaa

Cindy Shelton said...

DG's web design Dubai developer's job is to create creative websites. While their primary role is to ensure the website is visually appealing and easy to navigate, many web developers are also responsible for the website's performance and capacity.

Scott Davis said...
This comment has been removed by the author.
Scott Davis said...

I hope you are doing well. That's a well-organized content. Very nicely written. Wordpress website builder