The SharePoint Responsive Design Experience
If the very thought of making your SharePoint site mobile friendly makes you cringe in anticipation of long nights spent banging your head on the proverbial desk, set your worries aside as you have come to the right place. This course will help jumpstart your responsive design efforts within SharePoint and provide you valuable skills and resources to ensure your development process goes as smoothly as possible.
SharePoint Version: 2013, 2016 and SharePoint Online
Author and instructor: Dustin Miller
Complementary courses to the SharePoint Responsive Design Experience:
* Please note that these are not pre-requisite courses.
Key takeaways for this course
- The know-how to create a responsive design for your SharePoint implementation
- Session recordings and electronic lecture notes with post-class revisions and updates
- SharePoint Designer 2013 (required if you want to follow along with the instructor)
- Speakers or headphones for course audio
- OPTIONAL: Dual monitor setup – it helps to have the course video stream on one monitor and your test environment on the other monitor so you can avoid flipping between two applications.
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.
Class will kick off with walking through the key points and purposes of responsive design so you can 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 SharePoint 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
- SharePoint 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 just be hidden from the site interface to save you, and your users, time and heartache when using your SharePoint 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 spend a good part of the day looking at various SharePoint components and what you should do with them within your responsive design solution.
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 SharePoint 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 SharePoint 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.