The SharePoint Responsive Design Experience

The very thought of making your SharePoint site mobile friendly can make you cringe in anticipation of days spent banging your head on the proverbial desk. Well you can set your worries aside as you have come to the right place. This course will help jumpstart your responsive design efforts within SharePoint. It will provide you valuable skills and resources to ensure your development process goes as smoothly as possible.

Key Takeaways

  • The know-how to create a responsive design for your SharePoint implementation
  • The knowledge on how to effectively use Bootstrap, SASS, JavaScript and more
  • Session recordings and electronic lecture notes with post-class revisions and updates

In-Depth Course Syllabus

Understanding Responsive Design

From breakpoints to hamburger menus, there is a slew of new terms and techniques that contribute to what has become a murky and often confusing topic… responsive design. Usually tacked on at the end of a web site project or mentioned as being something you should probably look into, responsive design has quickly grown into an ogre of a task for SharePoint projects everywhere.

Training will kick off with walking through the key points and purposes of responsive design. Understand what responsive design is, what mobile first approach even means, and how to identify what you truly need to care about in order to make your site responsive.

Why You Shouldn’t Target Specific Devices

Go out for coffee and by the time you get back yet another new device has been released with internet capabilities. It is impossible to keep up with the ever changing market so you need to stop worrying about how your site looks on tablets, iPhones, Galaxies or the latest game console. Instead you need to focus on context so you don’t have a nervous breakdown every time a major tech company has a press conference. Abandon the old ways of approaching web site design and adopt new methods that allow you to move and adapt with the ever changing device market.

Tools for Development and Execution

Every time you turn around some new tool is being released to make responsive design a snap to create. But that doesn’t mean it can help you within SharePoint. Block out the noise of the web world and focus on a few key tools to help ease your responsive design development process and learn what to use to make implementation easy. Topics will include:

  • Browser inspectors and tools
  • CSS and CSS media queries
  • JavaScript and jQuery
  • Master Pages and Device Channels

Better than Bootstrap

That’s right, we said better. Bootstrap is nice, but it could be a heck of a lot nicer. We will start off with explaining what Bootstrap is and how it can help you speed up site customization. Next we will walk through setting up SharePoint Experience’s own implementation of Bootstrap (for SharePoint) that will create an ideal environment for your site development. All code will be provided, a student exclusive.

Don’t Fight It, Just Hide It

You can spend hours reworking that sidebar column for responsive views. Or, you can just hide the darn thing because people using itty bitty screens don’t want to see it anyways. Time for a reality check as we walk through what should be hidden from the site interface to save you, and your users, time and heartache when using your site on a non-desktop device.

Web Parts, Lists and Forms… oh my!

Dig deep enough into SharePoint and you start to wonder if this whole responsive design thing is really worth it. We get it, SharePoint can be scary. That is why we will look at various components and what you should do with them within your site.

What to do about all that navigation?

No doubt about it, SharePoint likes to give you many ways to navigate around your site. Navigation is the frenemy of responsive design. You don’t want it to take up valuable space but you have to have it for your users. Get some ideas for how to handle navigation and learn some cool tricks to create hamburger menus and off-canvas navigation all while remaining very touch friendly.

Don’t Get Wrecked by SharePoint CSS

You have lovingly crafted your responsive design and then SharePoint gets in the way. End the course with tips and tricks on how to stop SharePoint CSS from wrecking your design.

System Requirements

  • OPTIONAL*: SharePoint Designer 2013 (suggested if you want to follow along with the instructor)
  • OPTIONAL*: Simple code editor of your choice such as:
  • Speakers or headphones for course audio
  • OPTIONAL: If you have access to a second monitor it can aid with viewing the course while trying out exercises

* While both of these system requirements are marked as optional, you will need to have at least one of these editors installed for class.