SEF 2014 - Responsive Design in SharePoint 2013

Are You Ready to Bring Your
Own Device to SharePoint?
A Beginner’s Guide to Responsive Design
Christian Ståhl
Marc D Anderson

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

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.

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. Create the branding outside SharePoint
2. Upload the HTML-based design files to SharePoint
3. Convert to a master page
4. Add ’snippets’ and edit the design
5. Publish and apply the design
6. Create a design package (WSP)

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-sharepoint-part-
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/

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>

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;
}
}

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.

<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 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 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

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)

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
/SharePoint-
Conference/2014/SPC203
https://channel9.msdn.com/Events
/SharePoint-
Conference/2014/SPC345

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

SEF 2014 - Responsive Design in SharePoint 2013

More Related Content

What's hot

What's hot (20)

Similar to SEF 2014 - Responsive Design in SharePoint 2013

Similar to SEF 2014 - Responsive Design in SharePoint 2013 (20)

More from Marc D Anderson

More from Marc D Anderson (20)

Recently uploaded

Recently uploaded (20)

SEF 2014 - Responsive Design in SharePoint 2013