Accessible content is available upon request.

Putting on your Design BootstrapsIntro to Responsive Design & SharePoint

By: 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 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.

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 Columns

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

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

Pros Cons

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

This 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

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

PowershellManual

Deployment

“Add-in”

Model/CSOM

Third-Party

Solution

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.