Supporting Mobile Users on Sitecore Sites


Published on

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

No notes for slide

Supporting Mobile Users on Sitecore Sites

  1. 1. Supporting Mobile Users on Sitecore Sites Adding Mobile Support to Existing Sitecore Sites April 10, 2013 1
  2. 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. 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. 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. 5. Tablets Present Fewer Challenges • Tablets can clearly display most standard web sites • Tablets require less touch navigation to view content 5
  6. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 16. iPhones - Features for Web Apps • Contain a touchscreen • Support JavaScript • Support portrait and landscape modes 16
  17. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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