Tridion Context Engine
SDL Mobile, UX Optimization and
Contextual Web Delivery
Ian Homer
May 16th 2014
Agenda
○ Challenges
–
–
–
–
–
Cross context UX Control
Performance – page speed
Device coverage – customer reach
Contextual Targeting
UI Quality Control
○ How Tridion Context Engine & SDL Mobile helps
○ Demo
– Context Engine
– Contextual Image Delivery
– Contextual Rendering
2
Consumers have high expectations
What I want to accomplish - now
At my location
Expectations
Speed of Interaction
Context
At my finger tips
Information I need - now
3
Relevant
In the moment
Consumers are “mobile”
Consider
Research
PREPURCHASE
Engage
Advocate
POSTPURCHASE
Evaluate
o Expectations of what we
have at our finger tips is
rising exponentially
o Explosive growth in content,
highly interactive
PURCHASE
4
o Consumer chooses how to
connect
Optimized & Contextual Experience
○ Relevant information based on:
–
–
–
–
Device
Location
Time
User segment, etc.
○ Optimized for context segments / device families
– Premium UI for all devices
– App-like, mobile and desktop experience using one URL
– Opportunity to enhance content and UI server side
5
Contextual Web : Foundations for content delivery
Native App
RWD
App
m.dot
6
Contextual
Web
UX & performance
Too Much Data = Poor Experience
vs.
• 2 MB page
• Delivered to Laptop
• Via Wire Ethernet
8
Lou to Add
updated
phone
screens
here
Approach
Page Weight and
Delivery Speed Matters!
A ONE second delay in a
page response can result in a
7% reduction in conversions
• 2 MB page
• Delivered to Smartphone
• Via Cellular 3G
When Responsive Design Done Bad
9
Buried Content and Poor Navigation
vs.
Experience
This lacks proper
device context
Experience
dominated by
scrolling
Many clicks to
want you want
More than half of consumers who’ve
shopped on their mobile have abandoned
a purchase because of poor navigation
10
Brand dilution

Contextually
Poor
3.3 MB
11
Full page loaded onto mobile…
“Porsche = Fast cars, slow web pages”
3.3 MB
I’m interested now … why rotate? … don’t lecture me.
12
Better UX
Mobile tuned experience
Approach
Make it easy to
engage with your
brand
Smooth experience
across functions
and integrated apps
like eCommerce
Connects easy access to relevant
info with real-time apps that fit
within device context
14
Provides best use of screen while
blending content, personalized info
and functionality
Relevant and digestible content
Experience
Give them what
they want that
makes sense for
that device
Make it easy to do
business with your
brand
• More Content
• Greater use of available
screen real estate
15
• Easy Access
• Rich, relevant Content
• Easily digestible bites
Consistent Experiences
Experience
Leveraging all
content and digital
assets to deliver to
all touch points
AAAAAAAAAAAAAAAAA
Fully Leveraging
• Content
• Rich Media Assets
Across all channels
16
• Mobile Context
• Quick Navigation
Location & Time
Mobile Context
The right
information and
experience
based on time
and location
Traditional
Web Experience
17
Understands
location of mobile
device/customer
Provides hyper-relevant
info and offers based on
location and time
Checkpoint
○ Mobile first drives
– Consistent experience
– Single code base
– Content / functionality prioritisation
○ Single URL – no need for m.com site
○ Introduce mobile without risking PC Experience
○ Opportunities for performance optimisation
18
UI Quality Control
UI Quality Control
○ Imagine device quirk … should you
1. Find generic fix that corrects quirk + no regression on
other devices? Good goal, but what’s risk to other users / cost ?
2. Deliver fix only to devices that need it?
Valuable control, but how do we manage tweaks / handle complexity?
20
What is SDL Mobile?
Context Engine
○ Get the contextual information from the visitor (what device,
OS, browser etc.)
22
Context Repository – a.k.a. Device Database
○ Device recognition
○ Device database
–
~15K devices
○ Examples of attributes:
–
–
–
–
–
–
Device model
Device screen size
Is retina screen
Browser support
OS model
…
○ Resolution Algorithm = Trust based aggregation of DB lookup, User
Agent parsing & client side discovery.
23
Where does Context Engine sit?
Outbound
E-Mail
Experience Manager
Content Manager
Explorer
UGC
ECL
BasicAdvanced
BluePrinting
SDL
Customer
Analytics
WebDAV
Connector
SDL
Media
Manager
Translation
Management
System
Content Porter
SDL Tridion
Modules
Connected
Solutions
Audience Manager
SDL Quatron
Customer
Analytics
Connector
Ambient Data
Framework
SDL Live
Content
Visitors
SDL
SafeGuard
Secure
Content
Delivery
Content
Web
Application
SDL Smart
Target
SDL
Mobile
Other
Context Broker
Archive
Manager
Authoring
Context
Engine
Dynamic Content Broker
Delivery
Business Connector
Core Web Service
RDBMS
RDBMS
Content Distributor
(Optional)
Implementation
Utilities
LEGEND
24
Transport Protocols
CREATE
MANAGE
DELIVER
Context Engine Cartridge
Web Site
Ambient Data Framework
Context Engine Cartridge
Cartridge #1
UA Parser
Resolver
Cartridge #2
Discover
Resolver
…
Repository
Resolver
ADF
claims
Claim Store
Promotions
... others
Client side context
resolver (JavaScript
library) that collect client
context properties (e.g.
landscape/portrait
mode)
25
Other cartridges that
fetch location info,
customer segments
etc.
Context
Repository
Smart
Target
Examples:
os.model=iOS
device.model=iPhone
browser.cssVersion=2.1
device.displayHeight=800
device.displayWidth=600
browser.cookiesupport=Y
Demo : Context
Engine & ADF
27
Contextual Image
Delivery
Contextual Image Delivery - background
○ Runtime optimization of images
○ Optimize images from any HTTP / file source
○ Developer friendly URL interface
○ CID nodes scaled independently of other delivery nodes
○ Edge cache friendly URL inc easy for CDN deployment
○ .NET and Java stacks
○ Caching, source image update checks, flush API
29
Contextual Image Delivery – URL interface
<protocol, host name, port number>
[/<context path>]/t
[/<rule>]*
/<image uri>[/<image format rule>]
Where <rule> is
<rule name>[/<rule arguments]
e.g.
http://myste.com/t/scale/100x100/localhost:9090/img/snow.jpg
30
Demo – Contextual Image Delivery
Scale
Specify x, y or both dimensions
e.g. 100 (width), x50 (height), 100x50 (both)
Image scaled down to desired dimensions image with cropping where necessary
Fit
Complete image scaled down would fit into desired space on page without cropping
Cropping
Transform – between PNG, GIF, JPEG
31
Demo : Contextual
Image Delivery
33
CID JS and TBB
○ We will be releasing
– JS to dynamically create CID URLs client side
– TBB to dynamically create CID URLs from component presentation
34
Contextual Rendering
Contextual Targeting
○ Handle the complexity of rendering a contextual and
optimized experience in an efficient way
PC
Wearable's
Tablets
TV
Smart Phones
36
Device Aware Templating
○ Templates using context information (device etc) to render
an optimized experience for defined device families
Device Aware Templates
<html>
<head>
</head>
<body>
</body>
</html>
37
Demo : Contextual
Rendering
<context:If>
39
Targeting a promotion
See Smart Target for real editorial control
40
Head Optimization and Tweaks
Clear out redundancy
41
ADF Claim Interaction
VOCABULARY CONFIGURATION
CARTRIDGE CONFIGURATION
CARTRIDGE CODE
e.g. user choice
to increase font
size
42
Device Aware Templating: Typical Scenarios
○ Alternative experience that’s not easily maintained in RWD
○ Tweak rendering – device quirks / biz demand
○ Content / promotion targeting
○ Optimize image links
○ Reduce redundant content / markup (HTML, CSS, JS)
43
Levels of Device Aware Templating
○ Level 1: Contextual Conditions
○ Level 2: Contextual Views
○ Level 3: Contextual Templating
Device Aware Templates
<html>
<head>
</head>
<body>
</body>
</html>
44
Level 1: Contextual Conditions
○ Based on expressions on context properties, conditions
can be built up to deliver an optimized experience
○ Template neutral TCDL tags
<div class="article">
<tcdl:if expression="device.mobile">
Device is mobile
</tcdl:if>
<tcdl:if expression=“!device.mobile”>
Device is desktop
</tcdl:if>
<tcdl:eval expression="'Hello ' + browser.model + ' user'"/>
</div>
45
Level 2: Contextual Views
○ Select best resource for context, e.g. .NET view engine
Request
Web Site
lookup
Claim Store
MVC Controller
Mobile
View
46
Tablet
View
Desktop
View
Roadmap :
Contextual Templating
Level 3: Contextual Templating
○ Select best resource
○ Include / inherit – OO principles applied to Templating
○ Encapsulated components
– Reuse
– Reduce copy and paste
○ Targeted tweaks
– Keep minimal
– Easily managed – clear separation from default rendering
48
Context Segments
○ Boolean property that can be used for
targeting, e.g. device families.
○ Context segment defines:
– Name – for targeting
– Context expression
Root
Mobile
Tablet
• E.g.: device.model=‘iPhone’
– Implies and requires relationship to imply
hierarchy and inheritance
○ Points to target experience and content
49
iPhone
Desktop
Smart
phone
Android
Contextual Templating in Action
50
Enhancing Responsive Design
○ RESS – RWD + server side optimisation where needed
○ Best of both worlds – client side responsive experience & server side power
–
One does not exclude the other
○ Improved device optimization, user experience and performance
○ Smaller pages, delivering only what the device needs = faster mobile interactions
○ Easier to manage and support new devices
○ One code base and URL
51
Summary
SDL Mobile
○ Context Repository updates
○ Contextual Image Delivery
○ Contextual Templating (roadmap)
53
Business benefits
○
○
○
○
○
○
○
○
○
○
○
54
Develop & deliver relevant (mobile) content
Editorial control – target device families as desired
Managed within Experience Manager
Contextual information consumed by 3rd party components (ADF)
One URL
Optimize and target content for device
Reduce regression testing
Faster sites, better sites
Increased conversion rates
Reach more devices / customers
Adopt new channels / new device evolutions quicker
ROI equation – how much do you value … ?
Shaving off a sec
Page
Speed
Greater device
coverage
Reducing support
and maintenance
Multi-site
Multi-locale
Multi-context
Devices
UX
…. to improve user satisfaction and goal conversion.
55
Cornerstones of contextual delivery
Performance
Device Coverage
• Pages load faster & UI more responsive • Easier to support long tail
• More users achieve what they want
• Adopt new devices & support legacy
Quality Control
Targeting
• 100% control of UI to each device
• Smart Target
• Not held hostage to device quirks
• Editorial Control
Better UX
56
Q&A
Global Customer Experience Management
Copyright © 2008-2014 SDL plc. All rights reserved. All company names, brand names, trademarks,
service marks, images and logos are the property of their respective owners.
This presentation and its content are SDL confidential unless otherwise specified, and may not be
copied, used or distributed except as authorised by SDL.