One of the easiest ways to deter users from your website is to provide them with a frustrating experience. Be that with broken features, outdated information, or more times than not, an unfriendly user interface. Even the most feature-rich websites will lose users if they don’t have a website that users can access, navigate, and view, no matter what device they’re on. The aim of this post is to help you keep customers by familiarizing you with responsive design and give you the tools to quickly implement these principles in your websites as well as your SharePoint solutions.
I’ll cover the basics of responsive design, how to implement responsive design paradigms, and discuss tools that already implement responsive design as well as how to get started using them. I’ll also discuss the lack of responsive design in out-of-the-box SharePoint 2010 and below, the out-of-the-box responsive design in SharePoint 2013, and easy things you can do across the board in SharePoint to make it more responsive.
A Quick Prologue
I’m sure we’ve all been in the situation where we’re shopping for something on our computers in the comfort of our own homes, having a pleasant time, but can’t decide on what exactly we want, so we save our shopping cart with the intention of making a decision later on using our phone. I’m not saying I’ve been in this situation, but I’ve glanced over a time or two to see my girlfriend in this exact scenario and I can tell you that there are a couple of websites that have lost a loyal, lifelong, and frequent customer because of issues with their mobile sites. One of the most common things I’ve, err I mean, my girlfriend, has come across are images and layouts that don’t resize or adjust their position for mobile devices which leads to users having to constantly scroll across the screen to see all of the content. This can quickly deter customers from your website. To remedy this egregious offense and to bring in more customers, modern websites are implemented with responsive design paradigms in mind.
What is Responsive Design?
Responsive design, simply put, is a way to build websites so that no matter what device your customer views its content on, they’ll have an optimal experience. This design paradigm allows websites to take the device a user is on into consideration and adjusts its content placement, as well as size, dynamically. Like water, your content should fluidly render between devices without hassle; responsive design gives your websites that ability. Responsive design isn’t just about updating screen widths though! It goes the extra mile and gives websites the ability to compensate for different screen resolutions, available browser features, and different device resources.
Why Responsive Design is Important
In the last decade, there has been a huge shift in the way users view content. Where users used to boot up their desktop and then wait for their dial-up Internet to connect, users now pull out their phone, tablet, watch, laptop, and everything in-between to view content. One can only imagine the number of devices that developers and designers have to take into consideration to keep their websites up to date and keep their users happy! (And this madness isn’t going to end anytime soon.) With each new year, we see more and more devices enter the market, which leads to users accessing the Internet in new ways. Responsive design gives developers the power to take all mediums that their content is going to be viewed on into consideration instead of just targeting specific devices.
Mobile First
Before we start deep diving into responsive design, I want to take a second to talk about mobile-first. This is a huge design principle of responsive design which simply states that you should start designing for a mobile device first since it’s easier to go from a smaller screen to a larger one rather than the other way around. I will say that many developers come across some issues when trying to design for mobile devices first since there are many constraints, such as screen size and browser resources, right off the bat. Caution: It’s up to you whether or not you start with mobile-first, but you were warned!
Implementing Responsive Design with Media Queries
In its simplest form, responsive design is built from a combination of media queries. Earlier, I mentioned that you don’t want to create a layout for every single device out there and that responsive design gave you the answer for how to avoid that. Well, responsive design does that with media queries, which helps set the layout for different device target groups. How you target and group these devices can depend on screen size, browser features available, screen resolution, and many other things! Depending on how specific you want to be, you can have a plethora of media queries built in to your website to account for the most unique screens. As stated before, this can quickly become cumbersome, but the real power of media queries is in the ability to target a wide range of screen sizes and set your website’s layout for these with a few simple media queries.
Media queries are composed of one media type and however many media feature expressions you want, as long as they ultimately resolve to a Boolean. A media type is the type of device the content is being displayed on, a few examples being:
- “All” for any device,
- “Screen” for computer screens with color, and
- “Speech” for speech synthesizers.
A media feature is a property of the device the content is being displayed on, such as device-height, device-width, and min/max-resolution.
Below, we see an example of a general CSS style that will look for any block of content with a “col-“ class attribute and spread the content across the whole screen (width: 100%). This is a common example seen for mobile devices. Following that, we also see a media query that looks for screens bigger than 768px and splits out the “col-“ attribute a bit more to allow for more column style customization on larger screened devices. Again, we see the concept of mobile-first present here and then we add in more complexity as we move to larger screens.
[class*=“col-”]{
width: 100%;
}
@media only screen and (min-width: 768px){
.col-extra-small {width:8.33%;}
.col-small {width: 16.66%}
.col-medium {width: 50%}
.col-large {width: 100%}
}
To show how specific and unique media queries can get, we see the below media queries targeting specific wearable technologies that allow developers to adjust their content accordingly.
/* ----------- Moto 360 Watch ----------- */
@media (max-device-width: 218px) and (max-device-height: 281px){ }
/* ----------- Apple Watch -------------- */
@media (max-device-width: 42mm) and (min-device-width: 38mm) { }
Media queries can also be combined into a comma separated list as well as evaluated in a range to support even the most peculiar device targets.
@media (400px < width < 1000px), screen and (color)
In addition, media queries can be written in both CSS and HTML.
@import url(example.css) and (color);
<link rel=“stylesheet” media=“screen and (color)” href=“example.css”/>
As we can see, media queries are quite powerful and give developers the option to either use a few media queries to adjust to a large amount of device viewports at once or allow fine tuning to target specific device viewports as needed. With all of these options, we can start seeing that a lot of work can easily start piling up, even with the help of media queries. Luckily there are a lot of front end frameworks available that boast responsive design!
Tools that Customize for Responsive Design
Bootstrap and Responsive Design
“Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Bootstrap makes front-end web development faster and easier. It’s made for folks of all skill levels, devices of all shapes, and projects of all sizes.”
– Bootstrap
Bootstrap is a front-end framework that I have used for many years. The Bootstrap team has put together a very intuitive and feature-rich framework that allows developers to easily jump into web development and have a huge head start in responsive design. Bootstrap has already done a lot of the leg work in setting up media queries for different devices that other developers can easily customize to fit their preferences. It’s simple to start using this framework: navigate to their website to download the code and then reference it in your applications.
Their media queries are also built with mobile first in mind and look like:
/*Extra small devices (phones, less than 768px)*/
/*No media query since this is the default in Bootstrap*/
/*Small devices (tablets, 768px and up)*/
@media (min-width: @screen-sm-min) { … }
/*Medium devices (desktops, 992px and up)*/
@media (min-width: @screen-md-min) { … }
/*Large devices (large desktops, 1200px and up)*/
@media (min-width: @screen-lg-min) { … }
Foundation and Responsive Design
“Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and completely customizable.”
– Foundation
I haven’t personally used Foundation, but I know of other developers who have and loved it! It’s another popular front-end framework that comes with a lot of responsive design already built in. Foundation is very robust and allows users to apply the Foundation framework to websites, emails, and applications! Getting started with Foundation is simple as Bootstrap, just go to their site and click on the implementation guide you want to follow. For websites, the simplest one may be the CSS guide.
Their media queries work off of Ems, which have been argued to be better at scalability than using pixels, leading to an easier mobile implementation. These media queries look like:
// Small screens
@media only screen
/* max-width 640px, mobile-only styles*/
@media only screen and (max-width: 40em) { } { }
// Medium screens
/* min-width 641px, medium screens */
@media only screen and (min-width: 40.063em) { }
/* min-width 641px and max-width 1024px*/
@media only screen and (min-width: 40.063em) and (max-width: 64em) { }
// Large screens
/* min-width 1025px, large screens */
@media only screen and (min-width: 64.063em) { }
/* min-width 1025px and max-width 1440px*/
@media only screen and (min-width: 64.063em) and (max-width: 90em) { }
// XLarge screens
/* min-width 1441px, xlarge screens */
@media only screen and (min-width: 90.063em) { }
/* min-width 1441px and max-width 1920px*/
@media only screen and (min-width: 90.063em) and (max-width: 120em) { }
// XXLarge screens
/* min-width 1921px, xxlarge screens */
@media only screen and (min-width: 120.063em) { }
SharePoint’s Responsiveness Attempts
SharePoint is an absolute beast of a web application platform that has been available since 2001 and is used widely in many businesses. It comes with various out-of-the-box features that are highly configurable, but being a web application platform without much responsive design support has raised a few eyebrows. Up until SharePoint 2013, there weren’t any responsive design capabilities that came out-of-the-box and this posed some issues for users. In addition, developers quickly noticed that the media queries they were manually writing ended up conflicting with other SharePoint features. Heather Solomon wrote a great post about it which includes some quick snippets to add to your stylesheets that add a lot of responsiveness to SharePoint 2013. I’ve included a few of my favorite snippets of hers below.
You may have noticed that this page forces users to scroll horizontally to see all of the content. This is very frustrating for end users who are used to a more natural vertical scrolling experience. Using the snippets shown below, we’re going to easily remedy this. The snippet below demonstrates collapsing the navigation and search bar:
@media screen and (max-width: 1044px) {
.ms-core-listMenu-horizontalBox .ms-listMenu-editLink{
display: none;
}
#s4-titlerow .ms-table,
#s4-titlerow .ms-tableRow,
#s4-titlerow .ms-tableCell {
display: block;
}
#siteIcon {
float: none;
text-align: left;
}
#pageTitle {
position: absolute;
top: 30px;
left: 220px;
}
.ms-breadcrumb-box {
height: 30px;
}
.ms-breadcrumb-top > .ms-core-navigation {
display: block;
margin-top: 20px;
}
.ms-mpSearchBox.ms-floatRight,
#searchInputBox {
float: none;
}
#s4-bodyContainer {
padding-bottom: 60px;
}
#contentRow {
padding-top: 80px;
}
}
In this snippet, we can hide the left navigation entirely:
@media screen and (max-width: 740px) {
#sideNavBox {
display: none;
}
#contentBox {
margin-left: 20px;
}
.right-wp-zone-col {
border: 0;
}
}
Here we move the navigation to the bottom:
@media screen and (max-width: 740px) {
#contentRow {
display: flex;
display: -ms-flexbox;
display: -webkit-box;
flex-wrap: wrap;
-ms-flex-wrap: wrap;
}
#sideNavBox {
order: 2;
-ms-flex-order: 2;
-webkit-order: 2;
margin-top: 20px;
}
#contentBox {
margin-left: 20px;
order: 1;
-ms-flex-order: 1;
-webkit-order: 1;
}
.right-wp-zone-col {
border: 0;
}
}
And here we show how we can re-organize content:
@media screen and (max-width: 926px) {
#contentBox {
min-width: inherit;
}
.right-wp-zone-col {
float: none;
}
.col-fluid-1,
.col-fluid-2 {
margin-right: 10px;
}
}
If we put this all together, then we get SharePoint to resemble a responsive website.
Integration of Bootstrap and Foundation into SharePoint
This example shows how easy it is to integrate responsive design into SharePoint, but it also doesn’t start to scratch the surface in regards to all of the content and web parts that SharePoint provides developers with to include in their websites. Taking all of that into consideration, you may not want to take the time to biuld your own media queries, which would lead you to your next logical solution: leveraging other front-end frameworks such as Bootstrap or Foundation to use the responsive design features that they provide.
But once you start trying to integrate these frameworks, you may start to notice the same issues that many others who have gone down this path have come across; the out-of-the-box SharePoint and the Bootstrap/Foundation framework don’t really play well together. Thankfully, D’arce Hess, Gilda Spencer, Ugo Brunet and RioLinx worked with others to provide Bootstrap and Foundation for SharePoint users. It’s easy as going to their page on codeplex to grab the package you need and follow their wonderfully detailed install instructions.
SharePoint 2013 Responsive Design
With SharePoint 2013, we see some hints of responsive design coming through. SharePoint now includes Device Channels and Mobile Panels that allow users to integrate some-out-of-the-box responsive design.
- Device Channels allow developers to define mobile channels and map different master pages to them
- You can take this one step further and use Mobile Panels to map different content across different Device Channels to combat cross browser styles.
Device Channels can easily be created through the Design Manager.
Once you have a Device Channel set up, you can target them via Mobile Panels through the IncludedChannels attribute, as shown below.
<Publishing:MobilePanel runat="server" IncludedChannels=“iPhone">
<div>Hello iPhone Users!</div>
</Publishing:MobilePanel>
The Wrap-Up
We’ve covered a lot and there’s still a lot more left to responsive design! Especially when it comes to SharePoint. Keep in mind that Responsive Design is all about giving your users a fluid experience across all devices. This is done through the power of media queries, which is the foundation of many popular front-end responsive framework such as Bootstrap and Foundation.
Please feel free to comment below with any questions or to leave any tips and tricks you’ve found while dealing with Responsive Design and SharePoint; we’d love to hear from others who have found viable solutions to help their users as well.
Now that you’ve read a little about responsive design and the various tools to use alongside it, check out our other SharePoint tips and tricks. While you’re there, check out one of our most recent posts about SharePoint 2013 and Regional Settings. Feel free to explore how create custom applications in our current projects and other technologies we utilize:
Make yourself comfortable and check out our blog home page to explore other fixes we’ve solved in our day to day work.