Supporting Mobile Users on Sitecore Sites

Adding Mobile Support to Existing Sitecore SitesApril 10, 2013 1

Sitecore Enterprise Web CMS

• Popular .NET Web Content Management System for mid-to-large organizations

• Provides friendly tools for non-technical Content Authors and Marketers

• Can be customized and extended to meet almost any conceivable business need

2

Why Support Mobile Users?

• A large share of traffic comes from mobile devices• Web access from smart mobile devices is on the rise• The shift to mobile Web access is accelerating• Larger multitouch smartphones since 2007• Multitouch tablet devices since 2010• Smartphones and tablets are being used for business

• Mobile user activity and requirements are different

3

Challenges for Creating Mobile Sites

• Smaller device screens of smartphones• Browser shrinks content to fit the width of the display • Difficult to view text and graphics• Users zoom and swipe to see content

• Some devices do not support JavaScript and cookies• Data entered by visitors cannot be validated client-side • Web analytics tools cannot uniquely identify visitors

• Flash and Silverlight do not render on iOS devices• Access speeds can be slow on cellular networks• New and varied devices are released regularly

4

Tablets Present Fewer Challenges• Tablets can clearly display most standard web sites• Tablets require less touch navigation to view content

5

Creating Mobile-optimized Sites

• Site speed and abilities designed for mobile users• Mobile-optimized browsing• Easier transactions• Faster page loading on cellular networks• Content display supports mobile device form factor • Content is viewable on smaller mobile displays• Site addresses variations among mobile displays• HTML5 is used for Flash-like capabilities across devices

6

Optimizing your Mobile Site

• Render content to the form factor of mobile devices• Create page layouts that support mobile browsers• Detect the device type to tailor visual presentations

• Build sites with mobile screen size limits in mind• Scale down content and button sizes• Use smaller versions of images in-line with text

• Tailor the experience to functionality on the device• Avoid reliance of drop-down menus and hovering• Use server-side functions specific to mobile devices• Validate devices before offering content downloads 7

Sitecore Devices

• A logical representation of a physical device• Represents something that can issue an HTTP request• Used to apply different layouts to mobile and other devices

• Definition item in the Sitecore Content Tree• Detection Section provides 3 methods of detection• Browser Agent• Query String• Sitecore Rule

• Data Section used to specify the default device, a fallback device and capabilities 8

Creating a Mobile Sitecore Site

• Create a new site in web.config to respond to a host header for the mobile site • Create a mobile layout item and .aspx file• Define Sitecore devices for mobile devices using rules • Add a fallback device for each device • Place mobile-specific modules in Sitecore Sublayouts• Assign the mobile layout and sublayouts to the

Template Standard Values• Use Presentation->Layout->Details to configure display 9

Switching Between Sites

• Users may need to switch between mobile and desktop sites• Provide an interstitial page for transitioning• Add a “view desktop” link to the mobile layout• Add a “view mobile” link to the desktop layout

10

51Degrees.mobi

• .NET library that detects mobile devices• Supports Sitecore Content Management System• Can detect over 5 million devices per second

• Two types of mobile device data files available• Lite data file identifies mobile and non-mobile web traffic• Premium data file contains thousands of different devices• Device types, hardware models, input methods and more…

• Open Source Foundation Project available at http://51degrees.codeplex.com/

11

Mobile Device Detector

• A Sitecore shared-source downloadable package • Supports Sitecore versions 6.3 to 6.6• Version 3.1 supports 51Degrees.mobi Premium data file• Available from http://marketplace.sitecore.net• Uses Sitecore’s Rules engine to determine site display• Display based on the detected mobile device• Some rules are supported only with Premium data file

12

Mobile View Switcher• A Sitecore shared-source downloadable package • Supports Sitecore versions 6.0 to 6.6• Available from http://marketplace.sitecore.net• Users can switch between mobile and desktop sites• Displays link to switch site based on device• Module works with Mobile Device Detector or alone

13

Add Device Layout Wizard

• A Sitecore shared-source downloadable package • Supports Sitecore versions 6.0 to 6.5• Available from http://marketplace.sitecore.net• Useful for sites that want to add mobile support• Assigns layouts for new devices across Content Tree• Assigns new layout for Presentation Overridden items• Identifies all items that are not using Standard Values• Applies a new device layout to those items • Does not impact existing assigned layouts

14

Sitecore Device Simulators

• Each simulator represents a category of devices• A single simulator can represent multiple physical devices• There are many simulators for different device categories

• Included in Sitecore starting in version 6.6• Used to create approximations of how pages will appear• Users don’t need device to see how pages will render• Users can add additional simulators

15

iPhones - Features for Web Apps

• Contain a touchscreen• Support JavaScript• Support portrait and landscape modes

16

iPhones – Orientation Styling

• iPhones support both portrait and landscape modes• Create pages for 480 pixel width and scale down to

320 pixel width when in portrait mode• Avoid styling pages for 320 pixel width initially and

then stretch to 480 pixels for landscape mode

17

iPhones - Understanding Viewports

• The viewport is the viewable portion of a web page• Default viewport is 980 pixels for the width of a page• iPhone displays are 320-pixels by 480-pixels

• Avoid displaying pages in the top left corner of screen• Use <meta> HTML tags to "scale" the viewport • Add <meta> tags to the header section of HTML pages • <meta name = "viewport" content = "width = device-

width">• <meta name = "viewport" content = "height = device-

height">• Most browsers will then scale the content to fill the

screen for desktop and mobile devices

18

iPhones - Hide the URL in Safari

• Hide the URL in Safari to increase display space• Use Rollup to auto-scroll the display without the URL• An onLoad JavaScript event handler in the HTML <body>

section is used to do this• <body onLoad="setTimeout(function()

{window.scrollTo(0,1)}, 100);">

19

In Summary

• There are a number of factors to consider when adding mobile support to a Sitecore Site

• Start by determining your mobile audience needs• Use the Mobile Device Detector module• Create a separate site for mobile display• Use rules to direct users to the correct site

20

Caveat Emptor

There are many ways to manage mobile devices in Sitecore• Skilled developers can provide other solutions• Review your mobile needs with your Sitecore partner• Review proposed changes with all stakeholders• Implement new configurations on a test system firstThis presentation is intended to be academic• To enhance public knowledge of Sitecore mobile issues• To promote a better understanding of supporting mobileAuthor cannot guarantee accuracy or fitness for your site• Author makes no representations or warranties• Author disclaims any liability if you act on this information

21

More Topics from TICAll Sitecore-related SlideShares from TIChttp://www.slideshare.net/cwnelson/presentations

How to Assure Success for a New Sitecore Site (full slide deck)http://www.slideshare.net/cwnelson/creating-new-sitecore-sites-full

How to Avoid Shooting Yourself in the SEOhttp://www.slideshare.net/cwnelson/sitecore-seo-tips

Implementing Routine Sitecore Maintenancehttp://www.slideshare.net/cwnelson/sitecore-maintenance-tips

Sitecore 7 – New Features for Usershttp://www.slideshare.net/cwnelson/sitecore-7-new-features

Sitecore Performance Tips for Visitor Engagementhttp://www.slideshare.net/cwnelson/sitecore-performance-tips

Troubleshooting Sitecore Performancehttp://www.slideshare.net/cwnelson/troubleshooting-sitecore-performance

22

The Inside Corner, Inc.

• The Inside Corner, Inc. (TIC) is owned by Craig Nelson• TIC is a Sitecore partner & web consultancy• A U.S. point of contact for teams of Sitecore specialists • We create new Sitecore sites & enhance existing ones

23

Primary Developer - Craig Nelson

• Sitecore Specialist certified for Sitecore 7• 10 years of system administration experience• 10 years as a Microsoft Certified Trainer• 5 years of ASP.NET web development experience• 4 years of Sitecore development experience• 3 years as a Sitecore technical instructor• Sitecore architecture & configuration expert• Performance & SEO optimization specialist• Workflow configuration specialist 24

Get Help with your Sitecore Site

Follow TIC on LinkedIn• http://www.linkedin.com/company/the-inside-corner-inc.

Add TIC to your Circles on Google Plus• http://google.com/+Theinsidecorner

Follow TIC on Twitter • https://twitter.com/TheInsideCorner

Contact Craig Directly• Craig Nelson - Certified 7.0 Developer and Sitecore Partner• cwnelson[at]ticdevs.com• Mobile - 707.319.7446

Visit the TIC website• http://ticdevs.com

25

Bibliography

• 51Degrees.mobi• Building Content for Mobile Devices• Mobile SEO Best Practices• Render IBM i Web Pages to a Smartphone• Sitecore CMS 6.6 Features: Device Simulation• Sitecore Mobile: How to Make Your Site Mobile-Frien

dly, Fast on your Phone

26Download slide presentation to view URLs

Thank you for taking the time to view this presentation on

Supporting Mobile Users on Sitecore Sites

Please share with others and add a comment if you think it is useful

Thanks!April 10, 2013

27