Christian Ståhl
Marc D Anderson
Are You Ready to Bring Your
Own Device to SharePoint?
A Beginner’s Guide to Responsive Design
Who Is Marc?
• Over 30 years of experience in technology professional
services and software development. Over a wide-ranging
career in consulting as well as line manager positions,
Marc has proven himself as a problem solver and leader
who can solve difficult technology problems for
organizations across a wide variety of industries and
organization sizes.
• Awarded Microsoft MVP for SharePoint Server 2011-2014
Who Is Christian?
Session Overview
• Everyone is talking about responsive design. But are you really ready to
bring SharePoint to mobile and tablets? While you may have an idea of
what your site will look like when finished, there are many basic concepts
and pitfalls that aren’t always outlined in the “How To’s”.
• In this session, we will go through foundational steps to planning a
responsive SharePoint site including how to handle a hybrid content
scenario that uses publishing and team sites. You will learn what tools and
templates can make your life easier during design, build and testing.
• If you are excited about the capability of bringing SharePoint to any device
but not sure where to start, check out this session to get the foundational
understanding of the concept, best practices and examples to get you
started.
Responsive design [RWD]
What Is Responsive Design?
• Responsive web design (RWD) is a web design approach aimed at crafting sites
to provide an optimal viewing experience—easy reading and navigation with a
minimum of resizing, panning, and scrolling—across a wide range of devices
(from mobile phones to desktop computer monitors).[1][2][3]
• A site designed with RWD[1][4] adapts the layout to the viewing environment by
using fluid, proportion-based grids,[5] flexible images,[6][7][8][9] and CSS3 media
queries,[3][10][11] an extension of the @media rule.[12]
• The fluid grid concept calls for page element sizing to be in relative units like percentages,
rather than absolute units like pixels or points.[5]
• Flexible images are also sized in relative units, so as to prevent them from displaying
outside their containing element.[6]
• Media queries allow the page to use different CSS style rules based on characteristics of
the device the site is being displayed on, most commonly the width of the browser.
Source: Wikipedia http://en.wikipedia.org/wiki/Responsive_web_design
But…
•
•
•
•
RWD isn’t just “one thing”
RWD isn’t the same everywhere
RWD is more of a concept
Application of RWD to your sites may vary in approach and
complexity based on your requirements
• RWD is maybe not the ultimate solution for your needs, a separate
mobile site could be the option
Responsive design in SharePoint
• SharePoint is not responsive by default
• You can use CSS3 and HTML in SharePoint 2013
• This enables us to use modern tools and techniques to create a
responsive user interface
What Does Responsive Design Usually Mean For
Sharepoint?
•
•
•
•
A design that can adapt to any screen width, resolution or orientation
Page elements are rearranged based on available screen real estate
Uses breakpoints to identify where elements will be positioned
Three core concepts
• Media queries (CSS)
• Responsive grid system (HTML & CSS)
• Flexible images and media (CSS & JS)
Responsive Design Options in SharePoint
• No work
• Pinch and zoom
• Full site viewable on any device
• Easy
• Using SP responsive frameworks
• Only need to care about 3 portrait resolutions
• 1200 x 1900 (desktop)
• 768 x 1366 (tablet)
• 480 x 800 (smartphone)
• More time consuming
• On design that is perfect for all kind of devices, orientations, resolutions and widths and
works for all kind of artefacts in SharePoint
• Scalable contents
• Performance tuning
But first…
A few words about Design
Manager
Design Manager
• A central hub for design tasks in SharePoint
•
•
•
•
Create and apply design outside SharePoint
Create device channels for multiple master pages
Pack design with WSP into the solution gallery (sandbox)
Works in SharePoint 2013 (standard, enterprise & online)
• Other Options
• Visual Studio
• SharePoint Designer
• Themes/Composed looks
Design Manager Is New in SharePoint 2013
High Level Steps in Design Manager
1.
2.
3.
4.
5.
6.
Create the branding outside SharePoint
Upload the HTML-based design files to SharePoint
Convert to a master page
Add ’snippets’ and edit the design
Publish and apply the design
Create a design package (WSP)
Upload Design Files
Edit Master Pages
Kick-starting Your Design Project with help of the
Design Manager
• Reference: MSDN Overview
• http://msdn.microsoft.com/en-us/library/jj822363(v=office.15).aspx
• Book: SP2013 – Branding and user interface design Randy Drisgill,
John Ross and Paul Stuffs, published by Wrox.
• Blog: Christian Stahl’s blog series about Design Manager
• http://chrisstahl.wordpress.com/2013/10/31/design-manager-in-sharepointpart-iv/
Kick-starting Your Design Project with Starter
Master Pages
• Kyle Schaeffer’s SP Blueprint
• http://kyleschaeffer.com/sharepoint/sp-blueprint/
• Eric Overfield’s Responsive SharePoint
• http://responsivesharepoint.codeplex.com/
• Randy Drisgill’s Starter Master
• http://startermasterpages.codeplex.com/
Concepts:
CSS Grid System
Responsive CSS grid system
Responsive CSS grid system
<div class=“row”>
<div class=“col eight”>
This is the main column.
</div>
<div class=“col four”>
This is the sidebar.
</div>
</div>
Responsive CSS grid system
<div class=“row”>
<div class=“col six”></div>
<div class=“col six”></div>
</div>
Responsive CSS grid system
<div class=“row”>
<div class=“col four”></div>
<div class=“col four”></div>
<div class=“col four”></div>
</div>
Responsive CSS grid system
<div class=“row”>
<div class=“col three”></div>
<div class=“col six”></div>
<div class=“col three”></div>
</div>
Concepts:
Going Mobile with Media
Queries
CSS3 Media Queries
#wrapper {
width: 90%;
max-width: 960px;
margin: auto;
}
@media screen and (max-width: 768px) {
#wrapper {
width: 100%;
}
}
Taking a “Mobile First” Approach
#wrapper {
width: 100%;
}
@media screen and (min-width: 768px) {
#wrapper {
width: 90%;
max-width: 960px;
margin: auto;
}
}
Taking a “Mobile First” Approach
img {
max-width: 100%;
height: auto;
}
Set the width on the images parent elements in CSS. Max-width will
make the images follow the parents proportions.
Hint: Optimize the image with respect to its maximum possible width.
Taking a “Mobile First” Approach
<picture>
• A new solution <picture> that soon will become a part of HTML5.
This means you can have a set of images, and load different images
depending on media query results (viewport height, width and
orientation). This is not yet supported of all modern browsers.
• Before this will be supported by all browsers you can use JS plugins
such as PictureFill
http://webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-html5-picture-for-responsive-images--cms-21015
Tools
Tools For Responsive Design [Browser]
• FireFox
• Web Developer
• Screenqueri
• Responsinator
Tools For Responsive Design [Browser]
• Google Chrome
• Responsive Inspector
• Viewport Resizer
• Resposive Wiew
Tools For Responsive Design
• Mqtest.IO
• Let’s you inspect your devices user
agent, orientations, ratio or
width/height in px or em
• http://mqtest.io/
• MediaQuery Bookmarklet
• Browser bookmark for inspecting
current viewport state
http://seesparkbox.com/foundry/media
_query_bookmarklet
Tools For Responsive Design Mockup
• Online editors
• Macaw
• Edge reflow
• WebFlow
Good or Bad?
•
•
•
•
Can be good in the future
Code quality far from perfect
Most for non HTML people
Comes with a bunch of
templates, which are quite ok
Frameworks
Frameworks For Responsive Design
• Most common frameworks
• Bootstrap
• Fondation
• Skeleton
• Jetstrap
• Mockup / building tool
• Codepen
• A lot of different examples, all from responsive tables, responsive medias like
video, fonts and images
More
Use Fonts For Your Icons
• IcoMoon and Font Awesome
• Flexible: The Web is optimized for displaying text. Easy to change the color of
your icons with CSS instead of changing the image with PhotoShop.
• Scalable: Changing the size of your icons is just as easy as changing the font
size in CSS.
• Vector: Font icons are vector and resolution independent. They look good on
both mobile and desktop devices.
• Fast: By having your icons in a font, you can load them with one HTTP
request.
• Accessible: Icon fonts are 100% accessible and compatible with screen
readers.
Use Fonts For Your Icons – CSS Only
Other Plugins
• Fitvids.js
• Fluid width video embeds
• FitText.js
• Fluid font-sizes. Headers can
always will up to parents width
Test Your Design In Real Browsers
• Identify supported devices and browsers early in
the design process
• Some testing options
• Set up a bunch of virtual machines with most common
browsers in different versions
• BrowserStack
• Create an account and be able to remote cloud test in real
browsers live
• Spoon.net
• Browser Sandbox – Run any browser from the Web, virtualized
• Electric Plum Studio
• iPad, iPhone, and Responsive simulators
Performance
• Performance matters to users – it’s a fundamental part of UX
• You can’t mock-up performance in PhotoShop
• Don’t forget performance in the design process
• Don’t blame SharePoint, blame the implementation
• Conditional loading – load what you need when you need it
• LazyLoad – Images outside of the viewport are not loaded until user
scrolls to them
• Suppress JS for anonymous users or devices (ribbon will not be
useful to load for a public faced website or for a mobile device)
Demos
Takeaways
Takeaways
• A responsive design is great but maybe it’s not the ultimate solution
• Building a mobile site can be better than building a responsive site or using
multiple master pages (device channels)
• A perfect responsive design could be more time consuming than building a
regular site and a separate one for mobile
• Try SP Blueprint or Responsive SharePoint. Use them as is or as a
base for your own development
• Try responsive frameworks
• Bootstrap
• Fondation
• Skeleton
Takeaways
https://channel9.msdn.com/Events
/SharePointConference/2014/SPC203
https://channel9.msdn.com/Events
/SharePointConference/2014/SPC345
Questions?
Contact Information
Email marc.anderson@sympraxisconsulting.com
Twitter @sympmarc
Blog http://sympmarc.com
SPServices http://spservices.codeplex.com
SPXSLT http://spxslt.codeplex.com
Books http://sympmarc.com/books
The Middle Tier Manifesto http://bit.ly/middletier