Optimize SharePoint 2013 sites on mobile devices

optimize on mobile devices SharePoint site

This article is translated by spfarmer from Waldek Mastykarz

The mobile market continues to grow, and in the near future, using mobile devices to browse websites will surpass computers. To ensure a user-friendly experience, we must optimize our website for display on different devices. SharePoint Page offers a range of options to optimize access to public-facing websites on mobile devices. Depending on your situation, you can choose one or a series of combinations of options.

in the past few years, the use of mobile devices to browse the site has been greatly increased. According to some researchers, using mobile devices to access websites will exceed the computer by the year. Mobile devices are available in different sizes and functions. Because the computer experience is not good for mobile users, what options are available to enhance your site's experience with mobile users?

Improve cross-device user experience

optimizing the user experience across devices for a website is a complex process. Not only do you have to consider the screen size of the different devices, you also have to consider his features ( such as touching or using a stylus ) and size (1024x768 It can be clearly displayed on a 5 - inch screen , but it may be a bad display on the monitor .

There's no universal process to follow when you're talking about improving your website's user experience on mobile devices. You have to study who your users are, what devices they use, what they are doing on your site. You also need to have a clear vision of what your site is going to achieve, and how it can guide your visitors to become your customers.

There are many ways to improve the user experience for a public-facing site. Which one you choose depends on the different factors that apply to your situation.

Sites for mobile devices

in the past, in the past, website technology is not so rich as it is now. A common practice is to provide mobile users with a separate site for mobile devices to increase their experience. the user experience of a mobile site is optimized because it is provided in a separate URL, such as http://m.contoso.com . In some cases, the organization even further optimizes the mobile site. When a user accesses a Web site, the main site detects users that are accessed from the mobile device and automatically redirects to the mobile version of the site.

It's not hard to imagine that building and maintaining two completely different sites is not only costly, but also time consuming. Each update is executed separately. Even so, today's mobile devices are so diverse that the problem is still unresolved. A single mobile site that can accommodate all mobile devices of different sizes?

Moving Apps

in the mobile market, Apps is growing rapidly. By using the device's own features, you can create rich mobile apps to support different user needs. The ability to use your mobile device brings the best user experience. You can continue to learn by visiting Buildmobile apps for SharePoint .

for all mobile devices of different sizes, make a separate Apps is a very real thing. However, even though mobile apps can be of great value for supporting specific users, there is still a good user experience when it comes to accessing websites on mobile devices.

Responsive web-Design

Unlike making different websites for different mobile devices, how do we make a Web site that can be used automatically for different devices?

Responsive web Design is a concept that separates design from content. By using the browser's query media function, and based on the screen resolution of different devices, you can load different CSStomeet the site's friendly display. Because CSS has limitations, you can use JavaScript to further optimize the interface and user interaction, and access the implementingyour Responsive designs on SharePoint for more information.

from search engine optimization (SEO) angle of view , Responsive web Design is a recommended way to optimize a public-facing mobile site. After all, because all of the devices use the same HTML, the search engine needs to crawl only once enough, and the search results for each device are the same.

If you start planning from the beginning, it is relatively easy to implement responsive design on a public-facing site. In addition to the above mentioned, there is a big advantage of responsive design is that you only need to maintain the site once, you can meet different devices.

The picture below shows clearly that Contosoelectronics Web site on different devices, through the response design Bai display. The first picture is displayed on the desktop of the computer, and the second picture is displayed on a different mobile device.

Picture One

Picture Two

SharePoint Device Channels

sharepoint A new feature is device channels You can use the device channels channels and associating different devices, you can use different masterpage   how to:createdevice channels in SharePoint For more information. The following figure shows the sharepoint for a public-facing web site, the device channels settings.

Figure 3. Devicechannels configured for a public-facing website built on SharePoint 2013

The responsive design then uses the device's screen size to determine the display layer, SharePoint decide which display style to use by using the browser's identity on the device. Depending on the device your site visitors use, managing different devices and experiences can become complex. But with device channels, you can get more flexibility when you control the display of different devices. Another benefit of using device channels is that you can publish different content to different devices, and for responsive design it is the same content that is published for different devices. By using device channels, You can add other optimizations to your site, such as using the renditions feature to redefine the size of pictures and videos, Thus Linyi does not enhance the corresponding speed and user experience of your website. For more information, see howto:manage image renditions in SharePoint.

In so many options, which one should we use to get better results?

in the SharePoint to enhance the user experience for public-facing websites

first of all, know SharePoint2013 It is important to support all of the methods described above to enhance the user experience of mobile devices. Whether you want to create a separate site for mobile, or Support Specific use cases in an apps, responsive design, or device channels, SharePoint can be implemented based on your website.

For example, using cross-sitepublishing function , you can easily publish unified managed content to primary sites and mobile sites. Using the search REST API, You can publish content to your mobile app, if you're looking for sites that are optimized to display on different devices,SharePoint Many features are available to help you.

depending on what you want to achieve, in all of these technologies, choose the one or a set of features that best suits you. In your colleagues who support complex processes in standalone apps, it's still valuable to ensure that anyone using any device can access all the information on the site.

in most cases, it is easy to determine whether a particular optimization technique is valuable. But a slightly harder choice ( partly because the two technologies are a lot more similar )is the use of responsive design or device channels To optimize the display of your website on your mobile device.

Responsive Design and Device Channels Compare

in how to optimize a website to be friendly on multiple devices this perspective, responsive design and Device Channels very similar. There are some important points that are different from the same point, and the following table is a comparison of two ways:

tr>

Device Channels	responsive web design
device management	property Management
	< P align= "left" > All devices use the same HTML
more admin work (support new device)	adapt to the future (device size)
more flexible
	search engines prefer this

Table 1. Device Channels vs. Responsive design

App User Experience

First, Device Channel and responsive design is different when it comes to detecting which experience should be presented to the user. The responsive design community uses the screen's channels to decide how to render the content and layout,andDevice , using a different method , displays the appropriate one through the browser's identity . Channel .

responsive design can determine how the content is displayed by the size of the browser, and Device Channels on the same device, the same content is displayed regardless of browser size. Using device channels can be a great benefit, for example, regardless of the screen resolution, the size of the browser form, the user and the system support staff can see the same interface.

Page markup

device channels and responsive design is another difference is how the content of the page is parsed. Responsive design only changes the display layer Although you can use css device channels You can use a different master pages device Channel panels t To make progress, you need to control the elements displayed on the page.

Although Device Channels in the Allow control to display the HTML more advantages, and thus bring better speed to the site, requires a greater amount of work to enable the Internet search engine to correctly establish a site for different devices of different versions. You can do this by using the vary-by useragent response header , but this needs to be set manually.

Prevention of future problems

Responsive design distinguishes between different experiences by using the size of the browser. This is a robust practice, and it can be very low when a new device appears on the market. Even if the display is not good, it is also because some of those new devices have some specific features. But, again, this is a very low probability.

SharePoint Device Channels open a Web site based on a browser. There are two challenges to this approach: first , Sometimes it is difficult to differentiate the same browsers that are installed on different features of the same operating system on the device. Then , If a new device appears, you will also need to verify that your site is assigned the correct device channelon the appliance.

Choosing the right way to optimize your user experience

Although responsive design is very similar to device channels , their functionality, and their impact on the site's optimized display on mobile devices, is different. Because they are very similar, it can be difficult to pick up. Why not combine them with a little bit?

use a combination of responsive design and Device Channels

An interesting scenario worth considering is that the responsive design and Device Channels combined to get the benefits of both approaches.

when the responsive design and Device Channels when combined, you can use responsive design to create a basic cross-device experience. the 80% and even 90% optimizations can be accomplished using responsive design . The rest, based on the functionality of the specific device,- should use device channels and device channel panels to achieve.

About the author

Waldek Mastykarz is a microsoftsharepoint Server MVP and works as a SharePoint consultant at Mavention. Waldekshares His enthusiasm about the SharePoint platform through he blog, articlespublished in online and off-line Magaz Ines and on the MSDN SharePoint Forums. He isalso A speaker at community events such as the SharePoint conference in London,sharepoint Connections Amsterdam, and SharePoint Saturday. In addition to Hisjob at Mavention, Waldek is a Virtual technology Solutions Sales professionalfor Microsoft Netherlands. In this role he helps answer customer Questionsaround SharePoint Web Content Management (WCM).

Blog: http://blog.mastykarz.nl
Twitter: http://twitter.com/waldekm
Mavention: http://www.mavention.com

Optimize SharePoint 2013 sites on mobile devices