Ask The Experts: Implementing the RightNow Mobile Cookbook

1. Ask The Experts: Implementing the RightNow Mobile Cookbook David Fulton, Director of Product Management, Web Experience Center Of Excellence, March 2011

2. 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? • Case Study: Implementing the Nikon US Mobile pages, Rhianna Albert, Nikon • Demonstration (20 minutes) • Discussion (20 minutes)

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

4. 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….

5. 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…

6. 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….

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

8. Case Study: Rhianna Albert (JustRhianna), Nikon US

9. Case Study: Implementing the Cookbook • What is my role at Nikon? • I started out as the RN Admin handling Analytics, Marketing and Customer Portal • Now I manage all of the integration pieces as well! • Anything that touches RN comes through me. • How technically proficient am I? • I am a jack of all trades and consider myself to be a well rounded geek! • I haveworked 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. 

10. Case Study: Implementing the Cookbook • Why is Mobile important to Nikon? • Nikon likes to stay on the cutting edge. • If our customers are using something like mobile and wefeel that wecan engage them then wewant to offer it. • What changes did I make? • I implemented a few style changes, buttons with gradients, adding a logo and removing a few pages (we don’t use chat for example). • What proved to be straightforward? • I am pretty comfortable with CP now and found the cookbook simple to follow. I think using the cookbook would be easy even for someone less familiar / less technical. • What required a little more effort? • CSS always puts meout of my comfort zone! • I found changing the positioning of the buttons and editing the gradients a little scary!

11. Case Study: Implementing the Cookbook • What did she I help with? • Ineeded some help finding documentation on the Call Us page that is in the reference site. • I posted in the developer forum and got a response the same day. • How would I 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 I give to other customers? • Same advice I give 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 Nikon pages at http://support.nikonusa.com

12. Demonstration

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

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

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

16. 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?

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

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

19. 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 family- for 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!

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

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

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

23. Step 3: Adding Your Brand to the Mobile Experience

24. 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;"> <imgsrc="/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

25. 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); }

26. 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/MobileNavigationMenu.css)

27. Step 3: Adding Your Brand to the Mobile Experience Most mobile browsers will read this .rn_MobileNavigationMenu button { background:#597EAA; 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; color:#FFF; display:block; font-size:inherit; font-weight:bold; margin-top:5px; text-shadow:1px 1px 3px rgba(0, 0, 0, .5); -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; } Mozilla (Gecko etc) browsers will read and interpret this Webkit browsers (Apple, Android, newer Blackberry) will read and interpret this

28. Step 3: Adding Your Brand to the Mobile Experience Items being inspected

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

30. 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)

31. Step 3: Adding Your Brand to the Mobile Experience http://mite.keynote.com

32. 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 pre-Feb 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.

33. 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!

34. 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!

35. Questions & Answers