• Like

Supporting Mobile Users on Sitecore Sites

  • 1,890 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,890
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
34
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. 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
  • 12. 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
  • 13. 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
  • 14. 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
  • 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 http://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 SEO http://www.slideshare.net/cwnelson/sitecore-seo-tips Implementing Routine Sitecore Maintenance http://www.slideshare.net/cwnelson/sitecore-maintenance-tips Sitecore 7 – New Features for Users http://www.slideshare.net/cwnelson/sitecore-7-new-features Sitecore Performance Tips for Visitor Engagement http://www.slideshare.net/cwnelson/sitecore-performance-tips Troubleshooting Sitecore Performance http://www.slideshare.net/cwnelson/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 • 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
  • 26. 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- 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