Share and Enjoy !

Find this Podcast “Building Responsive SharePoint Sites” on the ThreeWill Soundcloud, Stitcher, and iTunes.


Danny Ryan:                       Hi, this is Danny Ryan, and this is the ThreeWill Podcast. Today I’ve got Eric Bowden here with me. Eric is a Principal Consultant for ThreeWill. Did I get that right?

Eric Bowden:                     You got it.

Danny Ryan:                       Awesome. Thank you for taking the time to do this, Eric. I know we are going to talk about an important subject here today, which is how do you do responsive when it comes to SharePoint. I look forward to learning more about how you actually make this happen. Let’s just get this kicked off with what do we need to know to get started with this?

Eric Bowden:                     I think to get started with the responsive design in SharePoint my recommendation is really to start with the requirements. Some folks may decide that, okay, I want the entire SharePoint experience to do Responsive, and may decide that there are only certain pages that I want to be able to render on a mobile device. Because there are only certain things that your mobile user are going to want to do. For example, they’re not going to commonly upload content in SharePoint from their phone.

Danny Ryan:                       Mm-hmm (affirmative), very nice, and so you’re taking a look at those requirement, and then maybe talk me through the first could of steps that you want to start thinking about.

Eric Bowden:                     Yup, so once you have an idea of where you’re headed with your responsive design or a.k.a. supporting mobile and tablet devices in SharePoint, so once you have an idea of where you’re going, you’re going to start into planning the implementation phase. At the highest level what you’re going to need to do in SharePoint is really disable SharePoint’s default handling for mobile devices.

Out of the box, SharePoint includes a feature that’s a mobile redirection site collection scope feature, and what it does is redirects mobile browsers to what is really a constrained presentation of the SharePoint site pages. You’re going to need to disable that, because if you don’t and you create a mobile design, it will really ultimately ignore your mobile design. It will just go to that redirection page.

Danny Ryan:                       Is this the same, I remember you usually could do like slash mobile, and it would bring you to a page?

Eric Bowden:                     Yup, yup, very similar.

Danny Ryan:                       Got you.

Eric Bowden:                     Same thing. Another aspect of SharePoint when people are thinking mobile, and Responsive is a new feature in SharePoint 2013 called device channels. Device channels allow you to target specific master pages and CSS for specific devices. What you do is you configure a master page in CSS for specific user agent strings, which are presented.

This is different than a responsive design. Responsive design is one where the site is really built to present itself on a variety of screen sizes, so as the SharePoint site shrinks up for say a tablet, or a mobile phone, it’s actually morphing. It’s changing as the screen size reduces, and that’s different than device channels, which are really discreet, specific experiences for specific devices.

Danny Ryan:                       Got you, so we disable what’s built in, starting to think about what types of devices we’re trying to target with this?

Eric Bowden:                     That’s right. Yeah, and that is important. On a recent project that I worked on, we decided that we would target, of course desktop, and then you’re targeting tablet and mobile phones. We chose to go try and find the extremes, so on the mobile phone you’re thinking … We targeting the iPhone 4, because that’s the smallest screen size, in the middle were tablets. You have to keep in mind that tablets are both landscape and portrait, so those may have a different experience. Your contents going to run separately, and then of course desktop.

Danny Ryan:                       Got you, so once you’ve disabled it, and you’re starting to make some changes, what are some of the technologies involved with this? Any further steps we need to make to get ready for this?

Eric Bowden:                     Yes. It’s good at this point to think about or to be aware of what is going to be changed in your SharePoint environment. What are the scope of appdev changes that I’m going to make in the SharePoint environment to support responsive design? Those are not entirely limited to, but include master page updates. Unlike the device channels, you’re not going to have a number of master pages, you’re going to have one master page. There’s also going to be layout pages, changes to those. I highly recommend the use of publishing sites with layout pages versus team sites with web part pages. The reason for that is because it’s a lot easier for us to change the layout of a layout page than it is a web part page.

Danny Ryan:                       Got you.

Eric Bowden:                     On our most recent project 99% of the sites were publishing sites with layout pages. Now we did have some team sites. I’ll talk a little bit later about some of the ways you can poke into those, and continue to make those responsive. The third piece that you’re going to be updating of course are CSS. Really what you’re going to be doing there is overriding in large part CSS styles that are provided by default from SharePoint.

Danny Ryan:                       Got you. Let me back up here just a second, whereas, as far as we’ve said you use SharePoint in general. We’re talking about on-premise … I guess there’s a couple different versions that we’re dealing with. I know it depends on the project, but you’re focusing primarily on a SharePoint 2013 on-premise is that typically what we’re dealing with?

Eric Bowden:                     It could really be either one from a technology standpoint. The most recent project that I’m referring to was an on-premise version of SharePoint 2013. These changes could be made in Microsoft 365, the only caveat to that is you do need to be aware of Microsoft’s guidance for upgrades. They may push an upgrade out at any time. If you have your own master page, you made a copy, and now you’re using your own master page, and any updates to master pages that they may have pushed out, you’re going to miss those. The ideal case-

Danny Ryan:                       As soon as you do a custom master page, then that’s the one you move forward with, and if they make any changes, you don’t get those changes.

Eric Bowden:                     You don’t get those.

Danny Ryan:                       Shut the front door.

Eric Bowden:                     Right. They will have upgraded the default master page for that publishing site. In SharePoint online our recommendation is if at all possible, keeping that master page the same, you’re more focusing on CSS updates. You’re more focusing on something that can be accomplished through a theme. You’re a little bit more limited, but you’re being more friendly to the free upgrades that come with Microsoft 365.

Danny Ryan:                       Have you talked at all about Bootstrap and jQuery?

Eric Bowden:                     Yeah, Bootstrap-

Danny Ryan:                       I’m going to bring this up like I know what I’m talking about.

Eric Bowden:                     That’s good, that’s good. It sounds like you do. When we talk responsive and mobile, Bootstrap is usually the first thing that come to mind. Bootstrap is the first place to start with making a SharePoint site responsive. For those who aren’t familiar with Bootstrap, the good news is you don’t have to become an expert with it to be productive. There are many simple features that are provided in Bootstrap. The simplest is is describing that Bootstrap is designed to provide a 12 column layout for your site. Imagine that you’re looking at a desktop presentation of your site, and imagine dividing it up into 12 columns.

You can combine those columns together. For example, you could have four columns which are really three columns wide each. Then what you’re saying is that for different screen widths, I want those columns to stack on top of each other. As the screen becomes more narrow and you have these say three columns at some point, and you decide what that point is, they stack on top of each other. Bootstrap provides a handful of other handy utilities. You can hide and show certain columns. Let’s say we have a rendering of a web part, which has certain data on it.

Maybe it’s a listing of users, and it has the name, title, I don’t know, phone number, and then for a mobile maybe it’ll just have their name and phone number, and we’ll leave the title off. That’s the simple Bootstrap, and that’s really the best place to start. What you’re going to be doing there is open your master page, add a reference to Bootstrap, and then you’re going to start decorating HTML elements that are in your master page with Bootstrap classes.

Danny Ryan:                       Decorating, how festive.

Eric Bowden:                     Bootstrap, that’s going to get you started. That’s a real quick easy way to get really any site responsive. It’s a lot faster than you might see with a standard application, but with SharePoint you’re going to have to go a few steps further. The reason for that is because we don’t really have control over everything that’s being rendered. The next step is we’re going to have to get in and override CSS. SharePoint may be saying a column is a specific width.

One of the things that we battled with a lot was the padding, so as the screen width becomes more narrow, we want to constrain that padding between elements to give it a little bit more space. Another aspect are what are called meteor rules. Meteor rules allow us to specify specific CSS attributes for certain screen widths, so that comes into play. Padding is a pretty good example. For desktop widths, maybe we’ll have the default padding, but then for phone widths we’ll constrain that padding.

Danny Ryan:                       Got you, and then jQuery, have you talked about that?

Eric Bowden:                     Yes, so jQuery and JavaScript … I have to admit, that’s not something I was expecting to get into when making a SharePoint site responsive, but it ended up being really a key, and highly useful tool. The net of it is that because we don’t have control over everything that’s being rendered in SharePoint, we use jQuery to select elements that are on the page and maybe add Bootstrap classes. Maybe we’re adjusting the width. jQuery was used to constrain images. Images end up being a challenge, because images will tend to push out the boundaries of an HTML element, so you’ve got to find some way to get those images to constrain, and jQuery and JavaScript is one way to do it.

We had one interesting application of jQuery and JavaScript was with this particular site design we decided … You’re familiar with the quick Launch in SharePoint, that’s on the left hand side of the page normally. For our mobile design, we decided to do two things. Take that quick launch and instead of on the left hand side of the screen, we put it to the top. The second thing we decided was that anything that was in the quick launch, except for sub-sites, would be removed.

What we’re doing there is we’re allowing users who are on a mobile device, we’re saying, “Well, let’s not clutter them up with lists and libraries. We’ll just let them navigate from site-to-site. They can see the home page and dashboard style information that’s on each home page.” That was accomplished with jQuery because we need some of that JavaScript logic to figure out, okay, here’s this link, well, what is it? Is this a sub-site, or is it a list, or a library?

Danny Ryan:                       My goodness. It sounds like there’s things in SharePoint that you’re having to, I call it, fight against and make change around, and then there’s a couple of technologies. Were there certain tools that you were using, like browser tools to go inspect who had control and those types of things? I know I deal with it on our public site, just trying to figure out who’s setting what and digging into that, so are there certain tools that you end up using when you’re doing responsive design with SharePoint?

Eric Bowden:                     Yeah, absolutely. Chrome developer tools is a great place to start. All of the browsers have developer tools, but Chrome is the best one to start with because it has the ability to render for mobile devices. There’s a little icon there, you click and it goes into a mobile view. Then you can actually select from maybe a dozen of different devices. The iPhone is one of them.

Danny Ryan:                       They just change the user agent. Is that what it’s doing?

Eric Bowden:                     It does. It changes the user agent, and it also changes, of course, the screen size to be the appropriate screen size. We found I would say maybe 90% of issues on mobile devices we found through testing with the Chrome developer tools, but highly recommend that folks are sure to have a sampling of the actual devices, preferable across the three major OS’s: iPhone, Android, and Windows phone.

For us, iPhone was the friendliest. We had the fewest issues on that one, or at least the fewest issues that were not discovered through the Chrome developer tools. Android ended up being the second friendliest, and funny enough we had the most issues on Windows phone. You have some issues like one of the basics and fairly easy ones is that on a desktop experience you’re used to the hover, well there’s no hover on your mobile devices. You have to changes those to be click, so they actually touch those things instead of hovering over them.

Danny Ryan:                       For the testing it seems like you want to dedicate some good time towards testing. Did we have somebody come in in particular? Did Brandon come in and help out with the testing for this?

Eric Bowden:                     Yes, so Brandon was a key part definitely in the testing effort. We had him configured with his own local, of course, SharePoint 2013 environment. He had testing across those devices. We had iPads and the Galaxy tablets and so forth. Probably can’t say enough good things about the testing effort there, and really being sure to … You can’t really make assumptions on it, or you can’t make too many assumptions. I’ll put it that way.

Danny Ryan:                       Interesting. Anything to wrap this up at all? Anything more you want to add? Besides, if you’re doing something crazy like doing responsive with SharePoint you should contact us, right?

Eric Bowden:                     Absolutely, absolutely. Yeah, so we’ve been through it a few times, and can definitely save you some time. I think one thing that I’ll add is on this most recent project, having good site analytics and site usage data was really important. It was really important for two reasons. One is constraining the scope of the project, so we can find out what are people really using. If nobody goes to a particular page, let’s not put the work into making it mobile and able.

Now what might end up happening is, and largely it does through your work, the site may end up being mobile and able, because it just is by default of the other work that you’re doing, and of course, lucky you it works. If nobody’s going to that site, recognize that and don’t put the effort into testing it and appdev on a site that nobody’s visiting. The next aspect of having that site-

Danny Ryan:                       I’m sorry to interrupt. What did you use for analytics?

Eric Bowden:                     This site was using Google Analytics.

Danny Ryan:                       Okay, so you had just the embedded in there code and looked at Google Analytics?

Eric Bowden:                     Yup.

Danny Ryan:                       Okay.

Eric Bowden:                     Yeah, and interesting story about that is that there’s a CodePlex project for embedding Google Analytics into SharePoint. These folks have been using it for quite some time and with great results. However, we found an issue with that project, and it only showed itself on Windows phone. We had to make a little update and work around that by taking what was that Google Analytics JavaScript, taking it out of the site collection feature that comes with this Google Analytics solution by default, and adding it ourselves to the master page. That worked around what was really an authentication issue only on Windows phone.

The last thing to mention about Google Analytics or any analytics that you choose, a benefit is that when this project is complete, and you have your launch and you do some marketing around the site, you can find out are people really using this site with their mobile devices, and which pages are they using. Maybe they branched out beyond the site usage patterns that you’d imagine that they would use.

Danny Ryan:                       Cool. Thank you for taking the time to share this. I appreciate your sharing with folks some insights on how to make your SharePoint sites responsive. That’s neat that you mentioned this works for both on-premise and Microsoft 365.

Eric Bowden:                     That’s right.

Danny Ryan:                       That’s very cool.

Eric Bowden:                     Thanks for having me.

Danny Ryan:                       You betcha. Thanks so much for listening. Take care. Bye bye.

Share and Enjoy !

Related Content: