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?

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]web design[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 rule.[12][1][4][5][6][7][8][9]CSS3media queries[3][10][11][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]gridpixelspoints [5] Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element. [6]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.Media queriesbrowser Source: Wikipedia

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

Kick-starting Your Design Project with Starter Master Pages Kyle Schaeffer’s SP Blueprint Eric Overfield’s Responsive SharePoint Randy Drisgill’s Starter Master

Concepts: CSS Grid System

Responsive CSS grid system

This is the main column. This is the sidebar.

Responsive CSS grid system

Responsive CSS grid system

Responsive CSS grid system

Concepts: Going Mobile with Media Queries

CSS3 Media Queries #wrapper { width: 90%; max-width: 960px; margin: auto; screen and (max-width: 768px) { #wrapper { width: 100%; } }

Taking a “Mobile First” Approach #wrapper { width: 100%; 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 A new solution 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

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 MediaQuery Bookmarklet Browser bookmark for inspecting current viewport state _query_bookmarklet _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

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 /SharePoint- Conference/2014/SPC203 /SharePoint- Conference/2014/SPC345

Questions?

Contact Information Bloghttp://sympmarc.com SPServiceshttp://spservices.codeplex.com SPXSLThttp://spxslt.codeplex.com Bookshttp://sympmarc.com/books The Middle Tier Manifestohttp://bit.ly/middletier