In SharePoint 2013, Microsoft has built in new capabilities for targeting different devices. The two main technologies that should be used to target mobile devices are Device Channels and Image renditions.

Device channels

Device channels are set up using different user agent strings and separate master pages based on these. For user agent strings, you can use just parts of the string, for example “Windows Phone”, “iPhone”, etc. In addition to separate master pages, it is now possible to target content based on the device channels you have defined.

The use of device channels is a different technique than building responsive design using CSS 3 media queries/fluid grid layouts/etc., but it does not eliminate the possibility of building a responsive design. It would actually powerful to combine the two techniques: if you for example target a mobile device you can use a device channel that uses code that is responsive for that specific device – you can make it behave responsively when for example flipping from the “portrait” to the “landscape” view.

Debugging the different device channels with your favorite browser and developer tools is made possible with a device channel query string parameter (for example “?devicechannel=surface”)

Image renditions

With Image Renditions you can set up multiple sizes, aspect ratios and crops for the same image. Targeting the right image for a device is done by using a query string parameter (for example “?width=320”). The Image Rendition functionality will use this parameter to find the closest image version.