Accessible content is available upon request.

Putting on your Design BootstrapsIntro to Responsive Design & SharePointBy: D’arce Hess

©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of

AvePoint, Inc.

©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of

AvePoint, Inc.

©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of

AvePoint, Inc.

@darcehess

https://www.linkedin.com/in/darcehess

Darce.Hess@avepoint.com

D’arce HessStrategic Consultant

©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of

AvePoint, Inc.

Introduction

References

Responsive vs. Adaptive Bootstrap

Integration with SharePoint

QuestionsBest PracticesIt’s a Bugs Life

Agenda

©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of

AvePoint, Inc.

INTRODUCTION

©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of

AvePoint, Inc.

RESPONSIVE DESIGN

Coined by Ethan Marcotte in “A List Apart” article.

Requires:• Media

Queries• Flexible

Images• Grid

©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of

AvePoint, Inc.

More than meets the eye.

©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of

AvePoint, Inc.

MobileTabletDesktop

©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of

AvePoint, Inc.

ADAPTIVE DESIGN

Distinct layouts for multiple screen sizes, and the layout used depends on the screen size used.

©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of

AvePoint, Inc.

COMPONENTS

©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of

AvePoint, Inc.

Grid Flexible ImagesMedia Queries

WHAT DO YOU NEED?

©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of

AvePoint, Inc.

THE GRID

12 ColumnsAllows for Design to be easily broken up into common layouts.

©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of

AvePoint, Inc.

MEDIA QUERIESCSS3 module allowing content rendering to adapt to conditions such as screen resolution 

©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of

AvePoint, Inc.

FLEXIBLE IMAGES

Images created in correct format and size to allow for CSS re-sizing based on screen width

©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of

AvePoint, Inc.

BOOTSTRAP 3

©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of

AvePoint, Inc.

ABOUT BOOTSTRAP FRAMEWORK

Supports both Sass and Less solutions for development.

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

Lots of added functionality, i.e. Glyphicons, Navigation & responsive embed

©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of

AvePoint, Inc.

PROS vs CONSPros Con

s• Allows for faster prototyping

• Grid has already been established

• Easy to engage newer web developers

• SASS and LESS

• Can be bloated

• Some resets need to be made to work with SharePoint

• May be too restrictive for experienced developers

©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of

AvePoint, Inc.

UNDERSTANDING THE STRUCTURE

©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of

AvePoint, Inc.

IMPLEMENT INTO MASTER PAGE

©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of

AvePoint, Inc.

Set up your frame the same and then bring in the webpart containers inside of your columnsThis is a page layout example

IMPLEMENT INTO PAGE LAYOUT

©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of

AvePoint, Inc.

Both of these layouts us the “Wiki” page layout. These are out-of-the-box layouts that do not come with Publishing Features enabled.

This means you cannot create a custom layout for these pages. You can make them responsive by adjusting the tables in the layout, but it is very difficult to do.

MY SITES & TEAM SITES

©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of

AvePoint, Inc.

DEMO

©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of

AvePoint, Inc.

Sass is a pre-processor for CSS

Compiles to

WHAT IS SASS (NOT SAS)

©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of

AvePoint, Inc.

Mixins

Do you remember your order of operations?

©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of

AvePoint, Inc.

Mindscape Web Workbench

SassyStudio

SASS SUPPORT IN VISUAL STUDIO

©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of

AvePoint, Inc.

IT’S A BUGS LIFE

©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of

AvePoint, Inc.

Bootstrap uses box-sizing: border-box; This means that padding does not affect the computed width of an element.

SharePoint uses box-sizing: content-box; This means that if you add a border to an element it equals the element + 2px.

THE BOX MODEL

©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of

AvePoint, Inc.

CSS OVERIDES NEEDED

Several CSS resets need to be added in order for Bootstrap to work correctly with SharePoint

©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of

AvePoint, Inc.

BEST PRACTICES

©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of

AvePoint, Inc.

WITH GREAT POWER… Just because you can, doesn’t mean that you should!

Time to think about the user experience:• Do you want your users to scroll forever

when down on a mobile device?• That beautiful banner image and rotator do

not add any value on a phone.• Mobile users are using data to load your

site, size of images and files matters. Time to optimize.

• Think of options for links and buttons to be easier to use for touch.

• Remember, there is no hover functionality on a mobile device

©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of

AvePoint, Inc.

ON PREM OR CLOUD?

• More control over Master Page• Create Custom Page Layouts• Use javascript injections for

specific functionality

• Advised not to alter Master Page• Create Custom Page Layouts• Use alternative CSS• Use javascript injections for

specific functionality

©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of

AvePoint, Inc.

Powershell

Manual Deployme

nt

“Add-in”Model/CSOM

Third-PartySolution

Multiple Site Collection Deployment

©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of

AvePoint, Inc.

QUESTION & ANSWER

©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of

AvePoint, Inc.