P&M307 Building intelligent websites with SharePoint 2013
•
4 j'aime•2,613 vues
SharePoint 2013 supports us with building intelligent websites: websites that adapt their experience to different devices but also their content to visitors. In this session we will discuss what intelligent websites are and how we can leverage new capabilities of SharePoint 2013 to build them.
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (10)
En vedette
En vedette (20)
Similaire à P&M307 Building intelligent websites with SharePoint 2013
Similaire à P&M307 Building intelligent websites with SharePoint 2013 (20)
Plus de Waldek Mastykarz
Plus de Waldek Mastykarz (15)
Dernier
Dernier (20)
P&M307 Building intelligent websites with SharePoint 2013
- 1. Building intelligent websites with SharePoint 2013 P&M307 Waldek Mastykarz SharePoint MVP
- 2. Waldek Mastykarz, SharePoint MVP Mavention http://mavention.com http://blog.mastykarz.nl @waldekm
- 4. Intelligent website Adapts to user Adapts to scenario Adapts to device
- 5. Business benefits Cut costs Shorten Time to market Increase conversion Expand reach
- 7. Ingredients Responsive Responsive media user experience Responsive content
- 8. Responsive user experience Expand your reach by supporting more devices Which devices are you focusing on? Define breakpoints Consider capabilities
- 9. Responsive media Improve user experience by improving performance Build upon responsive user experience Sized on the server to save bandwidth and time
- 10. Responsive content Expand reach and increase conversion Recommended content Relevant content Assistive content
- 11. Content targeting Increase conversion by displaying relevant content Who are your users? Which audiences do you target? Which properties make up those audiences? When does a visitor get a property? When does she lose it?
- 12. Building intelligent websites with SharePoint 2013
- 13. Responsive user experience DeviceChannels Responsive web design Nothing to do with SharePoint CSS media queries and JavaScript P&M302: Real-life building public-facing websites with SharePoint 2013
- 14. BUILDING RESPONSIVE WEB DESIGN IN SHAREPOINT 2013
- 15. Responsive media ImageRenditions are a good start Mavention Responsive Image Renditions
- 16. BUILDING RESPONSIVE IMAGES IN SHAREPOINT 2013
- 17. Recommendations ‘Just work’ out of the box (Recommended Items Web Part) Usage Cookie (per Web App setting) UsageAnalyticsId Managed Property recommendedfor property Logging Events (/_api/events/log) View: EventId 2 Click: EventId 3
- 19. Content targeting Define properties (Terms) Define user segments (Query Rule) Assign and revoke properties to visitors (custom development) Target content (extended Content Search Web Part)
- 20. BUILDING CONTENT TARGETING IN SHAREPOINT 2013
- 21. Summary Intelligent websites are a great way to provide added value to the business with WCM SharePoint 2013 provides capabilities that support building intelligent websites Business considerations more challenging than technology
- 22. Capabilities overview Intelligent websites with SharePoint 2013 Responsive web design Responsive images Content recommendations User segments Query rules Query suggestions Query spelling suggestions Page not found widget
- 23. More information Mavention Case Study http://blog.mastykarz.nl/go/mavention-case/ SharePoint 2013 Query Spelling Inclusions for the masses http://blog.mastykarz.nl/go/evo13-4/ Mavention Responsive Image Renditions http://blog.mastykarz.nl/go/evo13-5/ SharePoint 2013 @ Mavention http://www.mavention.com/sharepoint-2013 Mavention http://mavention.com
- 24. Thank you for attending!
Notes de l'éditeur
- 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
- 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
- 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?
- 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.
- Now we know what intelligent websites are, let’s take a look at what they consist of.
- 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.
- 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.
- 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.
- 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.
- 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’.
- 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.
- 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.
- Let’s take a look at how we have implemented Responsive web design on mavention.com.
- 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.
- Let’s take a look at how responsive image renditions with Mavention Responsive Image Renditions work.
- 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.
- Let’s have a look at how it all works in SharePoint 2013 > On a blog post
- 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.
- 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.