4

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?

  • Depends on the requirements. Can you please further explain what you are trying to accomplish and what type of sites you are using. i.e. Team sites, publishing sites, etc. – Steve Lineberry Apr 10 '15 at 17:31
  • It is a publishing internet site, i have experience on designing web sites by using responsive CSS, I want to be sure it works on sharepoint and there is no better way, I do not want to have several master pages because I want to use j query menu so we do not have to change all master pages when we want to change menu item. – Melika Apr 10 '15 at 18:31
  • 1
    it can be easier to maintain than having a multitude of masterpage/css combos for each device you are catering to. – Eric Alexander Apr 11 '15 at 0:03
5

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).

Comparisons

Device Channels

Device Management

  • 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.

Performance

  • Uses different master pages to ensure that only the relevant markup is served to users and therefore optimized performance of the website.

More Flexibility

  • 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

More Management

  • (Support for new Devices) - Any new device to be supported will need a separate device channel / inclusion of rule.

Responsive Design

Property Management

  • 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.

Performance

  • 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.

Future Proof

  • It's based on Device Size.

[Source]

| improve this answer | |
3

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" />
| improve this answer | |
  • you do not use device channel then? – Melika Apr 14 '15 at 21:16
  • @forouz No! That's not needed when I use three different css files – Karl Svensson Apr 22 '15 at 12:03
1

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.

| improve this answer | |
1

You can use pure css using media queries. You do have to consider points per pixel(retina displays) in addition to regular pixel resolution settings (1024 x768, etc.)

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.