Ask The Experts: Implementing
the RightNow Mobile Cookbook
David Fulton,
Director of Product Management, Web Experience Center Of
Excellence,
March 2011
© RightNow Technologies, Inc.
Agenda
Presentation (20 minutes):
Why is mobile (and specifically the mobile web)
becoming a priority?
How can we get ‘Mobile in minutes?’
• What are the essential items in the cookbook?
• What should I concentrate on if implementing for the
first time?
• What sort of commitment do I need to make in terms of
time/resources?
• Cast Study: Implementing the Nikon US Mobile pages,
Rhianna Albert, Nikon
Demonstration (20 minutes)
Discussion (20 minutes)
Why is mobile becoming a priority?
Because:
Consumers are spending more time on mobile devices
• Are viewing more internet pages [1]
• Are consuming more media
Consumers are using some of that time to interact with you!
The reality is that if you don’t address their needs online, most
will have a full feature phone at hand to contact you directly!
Smart phones and Tablets in particular are responsible for
driving changes in consumer behavior.
Both Morgan Stanley & Gartner are predicting by 2013,
more than half of internet interactions will be delivered from
Mobile devices [2]
A UN report in 2009 reported that more that half of the 6.9b
people on the planet already pay to use mobile devices,
and that number is rapidly increasing [3]
Gartner are also predicting that by 2015, every
economically significant member of the worlds population
will be online.
How can we get Mobile in Minutes?
If you:
Use Customer Portal today
And are on one of our last four
releases
…then you already have our
mobile capabilities
Today we are going to help you get
ready to switch them on!
We’ll help you understand the key:
Tasks
Skill sets required
and gotcha’s you need to be aware
of
We are going to do that today by
talking to the RightNow Mobile
Cookbook
Which you’ll be able to find on the
Community thread for this event
shortly after our presentation
today….
Boiling things down to the Essentials
The cookbook was written for
two audiences:
Customer RNT Administrators
and Managers
Designers and Tech resources
At 37+ pages, it is a
comprehensive document
Some of those pages cover very
specific use cases
In order to make this
presentation broadly applicable:
We are going to focus on the
bare essentials within the
presentation
And we will address any
complex requirements or use
cases during the Q&A…
What should I be concentrating on?
The following are the key
components of the Cookbook:
Reviewing the mobile pages
• Get familiar with the tools that you
have
Determining the devices that will
be supported
• What are the key devices that you
need to support?
• What devices are part of the ‘long
tail?’
Applying your brand to the
mobile experience
• We’ll spend some time on this one!
• We will talk you through each of the
steps in creating a ‘SmartTech’ banner
for our test pages
• We’ll also talk to some great tools that
you can use to accelerate the design
and testing process
Deploying your mobile pages
• Finally’ we’ll deploy to production….
What kind of time commitment do I need
to make?
That depends on the scope of the experience that
you are looking to deliver
If you go with the out of the box experience you
can be live and supporting mobile customers in
minutes!
If you brand your site it might take you a few
minutes to a couple of hours to do some light
branding
mileage will vary based on your organizations
familiarity with Cascading Style Sheets (CSS) etc
If you are:
building an experience from scratch
adding significant changes in functionality
Supporting new platforms
Need your .com team to approve the branding etc
….then you are likely to need developers/designers
to work on your project
Case Study:
Rhianna Albert (JustRhianna),
Nikon US
Case Study: Implementing the Cookbook
What is Rhianna’s role at Nikon?
Rhianna started out as the RN Admin handling
Analytics, Marketing and Customer Portal
Now she manages all of the integration pieces
as well!
Anything that touches RN comes through
Rhianna.
How technically proficient is she?
Rhianna is a jack of all trades and considers
herself to be a well rounded geek!
She has worked in technical support roles as
well as programming and even some web
design back when every website had to have
<blink> tags and music playing in the
background and you optimized for Netscape. 
Case Study: Implementing the Cookbook
Why is Mobile important to Nikon?
Nikon likes to stay on the cutting edge.
If their customers are using something
like mobile and they feel they can
engage them then they want to offer it.
What changes did Rhianna make?
She implemented a few style changes,
buttons with gradients, adding a logo and
removing a few pages (they don’t use
chat for example).
What proved to be straightforward?
Rhianna is pretty comfortable with CP
now and found the cookbook simple to
follow. She thinks using the cookbook
would be easy even for someone less
familiar / less technical.
What required a little more effort?
CSS always puts her out of her comfort
zone!
Rhianna found changing the positioning
of the buttons and editing the gradients a
little scary!
Case Study: Implementing the Cookbook
What did she need help with?
She needed some help finding documentation on
the Call Us page that is in the reference site.
She posted in the developer forum and got a
response the same day.
How would Rhianna summarize the
experience?
Going live was very simple and quick
Enabled the user agents for the different phones
and then deployed CP from the Admin console.
What advice would Rhianna give to other
customers?
Same advice she gives for all projects - start small!
Implement as vanilla as possible and then expand
from there.
Evolution is a slow steady process and it helps
prevent scope creep which can make the project
impossible to manage.
Have an iPhone or Android device of your
own?
Check out the pages at
http://support.nikonusa.com
Demonstration
Step 1: Review your pages
Complexity: Low
1. Login to your CP admin pages at:
<site address>/ci/admin
You’ll need CP admin privileges to access
these pages. Talk to your system
administrator if you don’t have access.
2. If you are the first person to view your
mobile pages, click on the page set mappings
button or link (August 2010 or later)
If someone has already enabled one or more
mobile page sets you won’t have to do step 2 or
step 3.
Step 1: Review your pages
3. Make sure that at least one of the entries for the ‘mobile’
page set is enabled.
You’ll need at least one ‘enabled’ entry to review your pages.
4. After enabling one page set (Android for example), go back
to the CP admin home page and select ‘Set Environment’.
5. Select ‘Development’ from the first dropdown and disable
the Use default browser checkbox, and select ‘Mobile’ from
the resulting drop-down.
6. This will open the out of the box mobile pages. Spend
some time reviewing the pages and noting any changes that
you will look to make prior to enabling your pages.
Did you Know?: Enabling the pages in this manner only
makes them visible in development mode. Making them
visible to the outside world is a separate step.
Step 1: Review your pages
Did you Know?: The best
desktop browser to review your
pages will not be Microsoft
Internet Explorer!
Chrome or later releases of
Firefox will be better
experiences, as the layout
engines for their browsers
support the styling elements for
WebKit and Mozilla (two different
CSS styling engines) that are
built into our style sheets.
Did you Know?: RightNow
provides three out of the box
mappings by default.
These are always the top three
items in the Page Set Mapping
screen. You can enable or
disable each of these settings
and augment the list with your
own.
Step 2: Determining what devices will be
Supported
Complexity: Low to Medium
We need to return to the page set mappings list and
make some decisions on the devices that we need to
enable.
Making these decisions is not just your decision as an
administrator or developer, but a decision by the
business as well.
The decision will primarily be dictated by the devices
that your consumers are using
For most of us, IPhone and Android are the easy
decisions (today, those two platforms account for
>80% of mobile web usage in North America). What
other devices does your business need to support?
Step 2: Determining what devices will be
Supported
While we are on the subject, lets discuss the browsers that are out there and the effort needed to
support them:
There are a number of layout engines out there that form the basis of mobile browsers
IE is built on Trident
Firefox for Mobile on Gecko
Android/Apple on Webkit/KHTML (along with an increasing number of other vendors – Blackberry have
recently introduced browsers that support Webkit on newer platforms, Nokia have been supporting Webkit
for several years on its S60 platforms)
Opera Mini on Presto (a lot of game system browsers use Opera Mini or derivatives)
We officially support the Webkit browsers on Android/Apple and WebOS (Palm).
In order of effort to support additional browsers important to your business from lowest to highest,
consider the following rule of thumb:
Other WebKit browsers: Low
Gecko browsers: Medium
Trident/Presto browsers: High
Layout for the most part will consume most of the effort. Only on browsers with limited javascript
support would you expect to be doing a lot of development work
Currently we don’t recommend that you support mobile browsers that don’t support javascript.
Step 2: Determining what devices will be
Supported
Adding the browsers you wish to support requires you to be familiar with
their user agents
User agents are identifiers that the web browser gives to the web server
when it requests a page
http://www.zytrax.com/tech/web/mobile_ids.html is a great resource for
tracking user agents down.
Once you have a user agent that you wish to add – in our case the following
user agent for a newer Blackberry browser:
Mozilla/5.0 (BlackBerry; U; BlackBerry 9800; en)
AppleWebKit/534.1+ (KHTML, Like Gecko) Version/6.0.0.141
Mobile Safari/534.1+
In our page set mappings tool, we can choose any of the items in the above
string to make sure that we direct these devices to our mobile pages
In our case, adding Blackberry 9800 to the ‘User Agent Regular Expression’
cell of a new mapping entry will direct the newer Blackberry WebKit
browsers to our mobile (or, alternately, other specified) page-sets
Step 2: Determining what devices will be
supported.
Did you Know? There are best practices for doing this, particularly
given the fact that there is no defined format for building out a User
Agent:
DO’S
• Focus on the layout engine (in this case AppleWebKit) if you want to use the
layout engine as a determinant of whether you support it or not – make sure
that you are willing to invest time in testing all of these browsers though!
• Focus on the device type (Blackberry 9800) if you want to ensure that you
support a particular family of devices (a good example as Blackberry 9800
supports Webkit)
• Focus on a browser name if you want to focus support on a browser familyfor example, Firefox for Mobile
DON’T
• Use version Id’s if avoidable – device manufacturers update these constantly
• Use a brand name, like Blackberry, unless you wish to support all types of
device by that name – for brands with a range of supported browsers of
different levels of sophistication, like Blackberry, Nokia Symbian and
WindowsMobile, that carries a number of risks!
Step 2: Determining what devices will be
supported.
Did you Know? The Page Set mapper reads its list from
top to bottom at run time.
Order your more specific entries at the top of the page
followed by your catch all entries at the bottom.
An entry of ‘Blackberry’ followed by an entry of
‘Blackberry 9800’ will result in the second entry never
being selected!
Important to Know!: Our product uses Perl like string
matching for the regular expressions. If you wanted to
find both the platform and the browser type in the user
agent string something like the following would be
applicable:
/Opera .+Nintendo Wii/i
Step 3: Adding Your Brand to the Mobile
Experience
Complexity: Low to High
CSS can be the most time intensive task
for you to tackle (as Rhianna’s experience
as a CSS novice illustrated)
Some customers (ShopNBC for example,
who embed their support pages within
their iPhone shopping app) have gone live
without any styling changes at all
Most of you will want to do some light
branding on your pages
Step 3: Adding Your Brand to the Mobile
Experience
There are three important files to manage
here if you are doing some level of
branding:
The mobile template file
The site CSS for the mobile ‘theme’
The CSS for specific widgets (buttons)
Understanding these files and the
components they control will give you:
• Insight into how assets are organized
• Accelerate (greatly) the branding process
Step 3: Adding Your Brand to the Mobile
Experience
Step 3: Adding Your Brand to the Mobile
Experience
The quickest (and dirtiest – it’s a best practice to extend your CSS
with new class and id entries for this kind of stuff rather than putting
styling directly into your template page) would be the following entry
just after the rn_navigation entry in the views/templates/mobile.php
file (or a new file of your own – it is best to copy and modify when
you are testing and apply the new template to a test page)
The following places the logo before the menu button – upload your
logo to the assets/images directory before adding this to the
template:
<span style="float:left; margin-top:8px;">
<img src="/euf/assets/images/<your image logo>" width="110" height="26">
</span>
Keep any images small – the header component is designed for
buttons and images of less than ~40 pixels in height
Larger images will prove to be difficult to accommodate and will be
visually distracting – smaller is better for the consumer – you have
more room to maneuver with the width of your logo
Step 3: Adding Your Brand to the Mobile
Experience
There are three main components of the themes folder:
the site.css file, which governs high level styling for the experience (including colors, fonts etc),
the display css for the various widgets contained in the experience (we’ll get back to those when we
talk about coloring buttons)
and finally ,the images associated with the experience.
The site.css file is the one we are going to focus on for the most part, as we are going to restrict our
work to the elements covered by the header file. We‟ll open that file and look at the contents for
header, our top level element governing the content at the top of the page.
If you want to change the gradients to match your company color scheme, then the
background gradients (underlined below) are the items to change here.
header {
background:#7F93AD;
background: -moz-linear-gradient(top, #B0BCCD, #8195AF, #6D84A2);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.0,
#B0BCCD), color-stop(0.5, #8195AF), color-stop(1.0, #6D84A2));
color:#FFF;
min-height:43px;
overflow:visible;
padding:0 8px;
www.rightnow.com text-align:center;
text-shadow:0 1px 3px rgba(0, 0, 0, 0.7);
}
Step 3: Adding Your Brand to the Mobile
Experience
Changing Button colors/shading is another
common change – as we saw from the
Nikon example, these were changed by
Rhianna to a yellow color to match the
corporate color scheme.
Those items are controlled not in site.css
but in a widget specific file
(euf/assets/themes/mobile/widgetCss/Mob
ileNavigationMenu.css)
Step 3: Adding Your Brand to the Mobile
Experience
.rn_MobileNavigationMenu button {
background:#597EAA;
Most mobile browsers will read this
background: -moz-linear-gradient(top, rgba(154, 175, 202, 1.0), rgba(89, 126, 170, 1.0),
rgba(90, 127, 171, 1.0));
background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.0, rgba(154, 175,
202, 1.0)), color-stop(0.5, rgba(89, 126, 170, 1.0)), color-stop(1.0, rgba(90, 127, 171,
1.0)));
border:1px solid #AAA;
border-color:#444 #999 #DDD;
Mozilla (Gecko etc) browsers
color:#FFF;
will read and interpret this
display:block;
font-size:inherit;
font-weight:bold;
margin-top:5px;
text-shadow:1px 1px 3px rgba(0, 0, 0, .5);
Webkit browsers (Apple, Android, newer
Blackberry) will read and interpret this
-moz-border-radius:6px;
-moz-box-shadow:0 0 0 rgba(0, 0, 0, .5);
-webkit-box-shadow:0 0 0 rgba(0, 0, 0, .5); -webkit-border-radius:6px;
}
Step 3: Adding Your Brand to the Mobile
Experience
Items being
inspected
Step 3: Adding Your Brand to the Mobile
Experience
Important to Note! The reason why your IE and Blackberry browsers
render the out of the box pages poorly is because both browsers (with the
exception of Blackberry’s newer webkit-based blackberry browser) ignore
Mozilla (-moz) or WebKit (-webkit) styling definition entries in the style sheet
files. If you plan to add support for IE mobile and older blackberry browsers
then adding new styling entries that these browsers can read can often be
the most significant changes you will need to make to your mobile
experience.
Did You Know? The reason we didn’t see the –webkit definitions in
Firebug? Because Firefox (as a Gecko browser) doesn‟t support them. The
Firebug inspector will only display the elements that the Firefox browser will
interpret. Firefox ignores the –webkit definitions. Keep that in mind when
making your final changes to your design, particularly if you are testing
primarily on a single platform.
Did you Know? Firebug Inspect and Chrome Inspect Element are great
tools for reviewing the content of the page and understanding page
structure. Chrome Inspect Element is an out of the box feature of that
browser. Firebug is a very popular add-on for the Firefox browser and
accelerates the process of styling a page. Go to Tools->Add Ons from your
Firefox browser to find and add the tool to your browser.
Step 3: Adding Your Brand to the Mobile
Experience
Lets spend a few minutes talking about
testing. Both Firefox Firebug and Google
Chrome are excellent tools to test changes in
CSS in particular without editing the files first.
But…. They are not a viable alternative for
testing on mobile browsers.
Supplement them with testing on the actual
devices (recommended) or with emulators
(your fallback if the devices are not available)
Step 3: Adding Your Brand to the Mobile
Experience
http://mite.keynote.com
Step 4. Deploying your Mobile Pages
You’ve remembered to test,
right?
Ok, so lets discuss
deployment. Up until this point,
all your mobile experiences
have been internal only. They
are not available externally.
Deploying them for production
use requires using the CP
Deployment Manager. The preFeb 2011 screenshot is
illustrated. All you need to do is
select your Interface and click
deploy – and your mobile
pages are available!
But, if you plan to do a lot of
mobile work and plan
several releases, we
recommend that you
upgrade to a newer release.
Step 4. Deploying your Mobile Pages
If you plan to do a lot of
iterations on your mobile
pages, we would recommend
the new deployment manager
functionality in our February
release
Deployment Manager gives
you the option to selectively
promote and deploy individual
page set mappings and files
(you can now deploy your
mobile folders only)
You also get a staging area –
again an internal access only
area that you can use for UAT
and performance testing –
mobile performance testing is
critical!
Summary
Today we covered:
Reviewing the pages that come out of the box
Choosing the devices that you wish to support
Making light changes to look and feel
Deploying your mobile experience…
Congratulations! You are ready to get live on
mobile!
Want to move quickly? You can even start
without addressing step 3 and iterate that into
your design over time…
Switch it on and get immediate value!
Questions & Answers
© RightNow Technologies, Inc.