Your SlideShare is downloading. ×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Supporting Mobile Users on Sitecore Sites


Published on

Adding Mobile Support to Existing Sitecore Sites - April 10, 2013

Adding Mobile Support to Existing Sitecore Sites - April 10, 2013

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Supporting Mobile Users on Sitecore Sites Adding Mobile Support to Existing Sitecore Sites April 10, 2013 1
  • 2. 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
  • 3. 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
  • 4. 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
  • 5. Tablets Present Fewer Challenges • Tablets can clearly display most standard web sites • Tablets require less touch navigation to view content 5
  • 6. 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
  • 7. 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
  • 8. 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
  • 9. 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
  • 10. 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
  • 11. • .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 11
  • 12. Mobile Device Detector • A Sitecore shared-source downloadable package • Supports Sitecore versions 6.3 to 6.6 • Version 3.1 supports Premium data file • Available from • 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
  • 13. Mobile View Switcher • A Sitecore shared-source downloadable package • Supports Sitecore versions 6.0 to 6.6 • Available from • 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
  • 14. Add Device Layout Wizard • A Sitecore shared-source downloadable package • Supports Sitecore versions 6.0 to 6.5 • Available from • 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
  • 15. 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
  • 16. iPhones - Features for Web Apps • Contain a touchscreen • Support JavaScript • Support portrait and landscape modes 16
  • 17. 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
  • 18. 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
  • 19. 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
  • 20. 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
  • 21. 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 first This presentation is intended to be academic • To enhance public knowledge of Sitecore mobile issues • To promote a better understanding of supporting mobile Author 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
  • 22. More Topics from TIC All Sitecore-related SlideShares from TIC How to Assure Success for a New Sitecore Site (full slide deck) How to Avoid Shooting Yourself in the SEO Implementing Routine Sitecore Maintenance Sitecore 7 – New Features for Users Sitecore Performance Tips for Visitor Engagement Troubleshooting Sitecore Performance 22
  • 23. 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
  • 24. 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
  • 25. Get Help with your Sitecore Site Follow TIC on LinkedIn • Add TIC to your Circles on Google Plus • Follow TIC on Twitter • Contact Craig Directly • Craig Nelson - Certified 7.0 Developer and Sitecore Partner • cwnelson[at] • Mobile - 707.319.7446 Visit the TIC website • 25
  • 26. Bibliography • • 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- Friendly, Fast on your Phone 26 Download slide presentation to view URLs
  • 27. 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