To have our sharepoint 2013 on premise publishing internet site in different devices, can we use responsive CSS? instead of having several master pages in device channels?
Well, the best we can do is provide comparisons, and you will need to make the determination based on what you are trying to accomplish. You could obviously do a combination of both, have device channels and on the respective master pages (add responsive design principles).
- Uses the identity of the browser on the particular device to decide which presentation style to use.
Different HTML every channel
- Will always load the same experience for the same device regardless of the browser window size. But, depending on how many different devices your site visitors use, managing the different deices and experiences can become complex.
- Uses different master pages to ensure that only the relevant markup is served to users and therefore optimized performance of the website.
- You can serve different content to different devices.
- You get more flexibility in controlling the markup of your website for the different devices.
- You can apply additional optimizations to your website, such as resizing images and videos server-side using the renditions capability, which further improves the performance and user experience of the site
- (Support for new Devices) - Any new device to be supported will need a separate device channel / inclusion of rule.
- Uses a device's screen size to determine the presentation layer, using CSS media queries.
Same HTML for every device
- Responsive Web Design can cause different experiences to be loaded depending on the size of the browser window.
- Changes only presentation layer, although you can show/hide using CSS - the code is still present and loaded.
Limited by CSS support and capabilities
- Same content is served when using responsive web design
- Preferred by search engines, since same HTML is sent to every device - that way the content can be indexed once, and the results will apply to search query on all devices.
- It's based on Device Size.
I'd use CSS based on viewport width. That way you'd have only three CSS files to edit and you'd get a more manageable solution. The only change needed in the master page would be the following just before the closing head tag:
<link type="text/css" rel="stylesheet" media="only screen and (min-width: 1024px)" href="/css/desktop.css" /> <link type="text/css" rel="stylesheet" media="only screen and (min-width: 641px) and (max-width: 1023px)" href="/css/tablet.css" /> <link type="text/css" rel="stylesheet" media="only screen and (max-width: 640px)" href="/css/mobile.css" />
You can also use the same master page on multiple device channels. You then will use CSS to control the presentation layout and optimise the user experience according to the screen resolution.
If you have in a page layout a fixed image control you can use a device panel to optimise the page load. You can the use the image rendition to show different image sizes according to the device.