SPTechCon The SharePoint and Office 365 Conference Logo

Tools to help you implement responsive design in SharePoint

Tools to help you implement responsive design in SharePoint

by: Eric Overfield

Responsive Web Design techniques, strategies and tools continue to expand in the general Web design world. If you do a search for "Responsive Design,? the ever popular "Top X Tools for...? pops up in the search results, and one of my more recent favorites is "12 Essential Responsive Design Tools? by Richa Jain. I am often asked what tools I consider essential when I implement a responsive site in SharePoint, so I compiled a list of my go-to tools for every project I work on.

1. Twitter Bootstrap
You will always want to start each project with the right foundation, and with a responsive site, that starts with your grid. Although there are too many responsive grids to actually count, I would say a few of the most popular are Zurb Foundation, Skeleton, Less, and most importantly in my eyes, Twitter Bootstrap (also commonly referred to as simply Bootstrap).

Most frameworks use a similar HTML and CSS grid structure and are built using a mobile-first strategy. So what makes Bootstrap special? It's by far the most popular framework, and although popularity doesn't always mean the best, in this case I would stick with the crowd. The grid is clean and there are a ton of additional features, yet you can customize the package to meet your needs.

There is a sizeable Bootstrap user base, which means that the community is large. Ready-built templates designed for Bootstrap can be converted to SharePoint with a little elbow grease. I was truly sold on Bootstrap when they released Bootstrap 3, built with Sass.

2. Sass (Syntactically Awesome Style Sheets)
Sass is not necessarily a tool, but rather a language-in particular, a CSS extension language. If you are still writing straight CSS for your SharePoint sites, you need to check out Sass. It supercharges CSS by providing features such as variables, nesting, mixins (think functions), inheritance and operators. The output of compiled Sass is straight CSS, but managing Sass source is far easier when styling a complex system such as SharePoint.

3. Browser Developer Toolbar and Responsive Design View
If you have been building website front ends, I am sure you are familiar with browser developer tools such as my favorite (Firebug for Firefox), or the popular Chrome Inspector for Google Chrome. Every developer knows that an element selector, found in all current developer toolbars, is a must. A lesser-known but incredibly powerful tool is Responsive Design View, available in Firefox or Device Mode & Mobile Emulation in Chrome. Either of these tools allows you to emulate any device viewport, seamlessly integrated into your browser.

4. Safari Web Inspector with iPhone/iPad
Let's face it: A large percentage of your mobile and tablet user base will be using an iPhone or iPad. And although a desktop browser developer toolbar will help you preview your mobile interface, there is nothing like viewing your site on actual common mobile devices.

Debugging on a mobile device has been problematic in the past, but with the release of iOS 6, you can now plug an iPhone or iPad into a Mac (Mac OS X), enable "Web Inspector? on your device, and remotely debug in Safari. Even with the most conservative coding, you will never be sure of your site's experience on a specific device unless you test it on that device. Remote debugging tools will save you hours upon hours of frustration and potential rework.

5. InVision: A prototyping and design tool
I recently came across is InVision, an entire platform for prototyping Web and mobile design with the combined features of collaboration and workflow. Another popular prototyping tool I have used in the past is Balsamiq, which I used for wireframing, but I found the extended collaboration features built into InVision to be a powerful boost to the design process.

If you do not need all of the collaboration tools found in InVision, and instead want a full-suite design studio that allows you to create wireframes, mockups, graphics, video editing and more, then look no further than the Adobe Creative Cloud suite. For US$49 per month per user, you get almost every Adobe product there is from InDesign to Photoshop to Illustrator and more.

This article only hits on a few of the go-to tools that I regularly use in my job of creating beautiful, feature-rich, usable responsive sites. There are many other tools available, and you can only know what is best by trying them out. In the meantime, I offer these as a pretty good place to start. I'd love to hear about your experience with these and other tools! Let me know what you find works best for you @ericoverfield.

Eric Overfield is the President and co-founder of PixelMill, a digital branding consultancy specializing in Responsive Web Design and Branding for SharePoint websites and portals.

View all Blog Posts