SP2013 WCM Bootcamp - ARC04 Building intelligent websites

Editor's Notes

• #3: 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.aspxhttps://www.mavention.nl/_layouts/15/listqueryrules.aspx?level=sitecolhttps://assets.mavention.nl/_layouts/15/ImageRenditionSettings.aspxhttps://assets.mavention.nl/Lists/ResponsiveRenditions/AllItems.aspxKeep open:IE:https://assets.mavention.nlhttps://www.mavention.nlhttps://www.mavention.nl.localhttp://win2012:2013Firefox:http://www.mavention.com (clear cookies)http://blog.mastykarz.nlExplorer:https://www.mavention.nl.local/_catalogs/masterpage
• #4: Before we talk furtherlet’s have a look at someproperties of an intelligent website.Show mavention.comDiscuss te pieces on the home pageCometo home page frommy blogSize the home page tophonewidthSearch for the translationsarticle > show responsiverenditionsShow related contentShow recommended contentShow search query suggestionsShow query spelling suggestions
• #5: Sotorecap: an intelligent website is a website thatadaptstowho the user is, whatshe is tryingtoaccomplishandwhat device she is using.Intelligent websites are cool obviously but is itsomethingthat business wouldspendthey money on?
• #6: From the business perspectivethere are a few benefits worthmentioning.Intelligent websites can help you cut costs. Instead of building andmaintainingseveral separate sites youcan have one single website thatsuits different purposes.Intelligent websites alsoallowyoutoshortenyour time to market. Bycreating new dynamic content aggregation pages youcanreactto the market within minutes.Since intelligent websites adapttoall the different devicesand users they help youreach more peopleandbyshowing content that is relevant to the users theyincreaseconversionrate.
• #7: Now we knowwhat intelligent websites are, let’s take a look at whattheyconsist of.
• #8: The threemainingredients of intelligent websites are responsive user experience, responsive media andresponsive content. On allthoseaxes the website shouldadapttowho the user is, whatshe is tryingtoachieveandwhat device she is using.
• #9: Bysupporting as broad range of devices as possible we canreach more people. Additionally we eliminate the needfor 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 designingforresponsive user experience is todefinewhichdevicesyou are focusing on. The goal is of course to support as manydevices as possible but the main focus will help youdefine the different user experiencesthatyoumightneed.The next step is todefine breakpoints: the screen dimensionsthatwillcauseone user experienceto turn intoanother.Finally, asidefrom the screen dimensions, depending on whatdevicesyourvisitors are using, youmightneedto take into account the different capabilitiesthatthosedevices have. For example do your users use systems withmice or do theyusetouchscreens as well.
• #10: Withresponsive media youensurethat the media fits the sizeandcapabilities of the particular device. Thisallowsyoutooptimize the performance of your website what leads tobetter user experience.Responsive media builduponresponsive web design. Havingdefined the different user experiencesyoucanthenoptimize the media loaded on the website accordingly. Bysizing the media on the server the website loads quickerwhatsavesyour users bandwidthand time.
• #11: Responsive content is somethingelsethanhidingparagraphs of content on mobile phones. The idea is to make the content fit the current scenario andbe relevant to the user. Youcouldthinkaboutrecommended content that is relatedto the content that the visitor is looking at or content that is personalizedbased on user’sbehavior on your website. Additionallyyoucould help your user find the right content on the website.Bydisplaying the right content on your website youcan make users spend more time on your website andconvertthemtocustomers.
• #12: One of the pieces of responsive content is content targeting: showing the user the relevant content. This part is particularlychallengingfrom the organization point of view as itrequirestoknowyouraudienceand the different characteristicsthatdescribethem.First of allyou have todistinguishbetween the different groups of users on your website. Thenyou have to translate thosegroupsintoaudiencesanddefinewhatpropertiesthey have. Finallyyou have todefinehowyourvisitors are goingto get a property andwhen (if) theylose it.For example: on mavention.com we have content targeted at technical consultants andcustomers. We decidedtorecognizevisitors as technical consultants iftheycomefromone of the technical sites or iftheyreadsometechnical content on our website. Once a person visitsforexample a blog post on our website theywillbemarked as ‘interested in technical content’.
• #13: Now we knowwhat intelligent websites are, which benefits they offer andwhattheyconsist of, let’sseehowyoucouldbuildan 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 recommendationsyou have toaddyouridentifierto the UsageAnalyticsIdManaged 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 howconfiguring content targeting in SharePoint 2013 looks like.……..Andwiththat we have discussedall the different pieces thatbuild up an intelligent website.
• #22: One of the thingsthatmightbe a part of an intelligent website is assistive content. Query suggestionsand query spelling suggestions are a great way to help your users find the right content on your website. Let me show youhowyoucouldadd query suggestionsand query spelling suggestions on your website.