Are You Ready to Bring Your Own Device to SharePoint?

A Beginner’s Guide to Responsive Design

Christian StåhlMarc D Anderson

Who Is Marc?

• Co-Founder and President of Sympraxis Consulting LLC, located in the Boston suburb of Newton, MA, USA. Sympraxis focuses on enabling collaboration throughout the enterprise using the SharePoint application platform.

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

• Senior SharePoint consultant from Sweden. Works as lead designer at Humandata. Christian focuses on front end developing and branding in SharePoint.

• Writing blogs/articles/books, speaker, trainer and SharePoint consultant

• Twitter: @Cstahl

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

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

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

t-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 statehttp://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/SharePoint-Conference/2014/SPC203

https://channel9.msdn.com/Events/SharePoint-Conference/2014/SPC345

Questions?

Contact InformationEmail marc.anderson@sympraxisconsulting.

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