Your SlideShare is downloading. ×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Supporting Mobile Users on Sitecore Sites

2,029
views

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

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,029
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
40
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