P&M307 Building intelligent websites with SharePoint 2013

Editor's Notes

• #2: More and more devices are used to surf the web. Those devices come in different sizes and have different capabilities. They are also used by different people in different scenarios. Building separate websites for all the different devices and visitors is not only expensive but also time consuming to maintain. What if we could build a website that automatically adjusts its presentation to the particular device and its content to the particular visitor? Open before the presentation: https://www.mavention.nl/_layouts/15/termstoremanager.aspx https://www.mavention.nl/_layouts/15/listqueryrules.aspx?level=sitecol https://assets.mavention.nl/_layouts/15/ImageRenditionSettings.aspx https://assets.mavention.nl/Lists/ResponsiveRenditions/AllItems.aspx Keep open: IE: https://assets.mavention.nl https://www.mavention.nl https://www.mavention.nl.local http://win2012:2013 Firefox: http://www.mavention.com (clear cookies) http://blog.mastykarz.nl Explorer: https://www.mavention.nl.local/_catalogs/masterpage
• #4: Before we talk further let’s have a look at some properties of an intelligent website. Show mavention.com Discuss the pieces on the home page Come to home page from my blog Size the home page to phone width Search for the translations article > show responsive renditions Show related content Show recommended content Show search query suggestions Show query spelling suggestions
• #5: So to recap: an intelligent website is a website that adapts to who the user is, what she is trying to accomplish and what device she is using. Intelligent websites are cool obviously but is it something that business would spend they money on?
• #6: From the business perspective there are a few benefits worth mentioning. Intelligent websites can help you cut costs. Instead of building and maintaining several separate sites you can have one single website that suits different purposes. Intelligent websites also allow you to shorten your time to market. By creating new dynamic content aggregation pages you can react to the market within minutes. Since intelligent websites adapt to all the different devices and users they help you reach more people and by showing content that is relevant to the users they increase conversion rate.
• #7: Now we know what intelligent websites are, let’s take a look at what they consist of.
• #8: The three main ingredients of intelligent websites are responsive user experience, responsive media and responsive content. On all those axes the website should adapt to who the user is, what she is trying to achieve and what device she is using.
• #9: By supporting as broad range of devices as possible we can reach more people. Additionally we eliminate the need for separate websites. On top of that, because the content is published on a single website, we simplify the content management process. The first step in designing for responsive user experience is to define which devices you are focusing on. The goal is of course to support as many devices as possible but the main focus will help you define the different user experiences that you might need. The next step is to define breakpoints: the screen dimensions that will cause one user experience to turn into another. Finally, aside from the screen dimensions, depending on what devices your visitors are using, you might need to take into account the different capabilities that those devices have. For example do your users use systems with mice or do they use touch screens as well.
• #10: With responsive media you ensure that the media fits the size and capabilities of the particular device. This allows you to optimize the performance of your website what leads to better user experience. Responsive media build upon responsive web design. Having defined the different user experiences you can then optimize the media loaded on the website accordingly. By sizing the media on the server the website loads quicker what saves your users bandwidth and time.
• #11: Responsive content is something else than hiding paragraphs of content on mobile phones. The idea is to make the content fit the current scenario and be relevant to the user. You could think about recommended content that is related to the content that the visitor is looking at or content that is personalized based on user’s behavior on your website. Additionally you could help your user find the right content on the website. By displaying the right content on your website you can make users spend more time on your website and convert them to customers.
• #12: One of the pieces of responsive content is content targeting: showing the user the relevant content. This part is particularly challenging from the organization point of view as it requires to know your audience and the different characteristics that describe them. First of all you have to distinguish between the different groups of users on your website. Then you have to translate those groups into audiences and define what properties they have. Finally you have to define how your visitors are going to get a property and when (if) they lose it. For example: on mavention.com we have content targeted at technical consultants and customers. We decided to recognize visitors as technical consultants if they come from one of the technical sites or if they read some technical content on our website. Once a person visits for example a blog post on our website they will be marked as ‘interested in technical content’.
• #13: Now we know what intelligent websites are, which benefits they offer and what they consist of, let’s see how you could build an intelligent website with SharePoint 2013.
• #14: Responsive web design has nothing to do with SharePoint at all. Using CSS media queries and optionally JavaScript it changes the user experiences across the different devices.
• #15: Let’s take a look at how we have implemented Responsive web design on mavention.com.
• #16: Image Renditions, one of the new capabilities of SharePoint 2013, offer a great starting point for building responsive media. The challenging part is to turn static rendition references into dynamic ones that change along with responsive web design. Mavention Responsive Image Renditions are a free SharePoint 2013 Solution that I have built that allows you to turn standard SharePoint 2013 Image Renditions into Responsive Image Renditions.
• #17: Let’s take a look at how responsive image renditions with Mavention Responsive Image Renditions work.
• #18: One of the building blocks of responsive content are content recommendations. The great part is that recommendations in SharePoint 2013 just work out of the box. In fact there is a web part called Recommended Items that will automatically display recommended content for you (assuming you’re using search-driven publishing). For the recommendations to work on an anonymous website you have to enable the usage cookie which is a Web Application-scoped setting. For non-product recommendations you have to add your identifier to the UsageAnalyticsId Managed Property Mappings. The recommendations engine provided with SharePoint is very flexible and there is API available that allows you to interact with it. The recommendations for the particular item are stored in the recommendedfor Managed Property. Next, using REST, you can log the analytics events that feed recommendations. For a content recommendation there are two events. First there is the view event that occurs every time an item is displayed as a recommendation for another item. The second event is the click event which occurs when an item displayed as recommendation is clicked, which means it was a good recommendation. This will boost the recommendation ranking of that particular item to that item even more.
• #19: Let’s have a look at how it all works in SharePoint 2013 > On a blog post
• #20: You can display personalized content using the content targeting capability of SharePoint 2013. The first step is to define all the different properties for all the different audiences for which you want to display personalized content. Those properties are represented as terms in your Term Store. Next you have to define all the audiences that should see personalized content. Those audiences are called user segments in SharePoint 2013 and are defined as query rules in search settings. The next step is to decide how you going to assign and revoke profile permissions to visitors. For this you need to develop a custom solution that will fit your needs. Finally you need to feed the profile of the user that you have gathered to the content search web part that will display personalized content based on that profile.
• #21: Let’s take a look at how configuring content targeting in SharePoint 2013 looks like. …… .. And with that we have discussed all the different pieces that build up an intelligent website.