35
Accessible content is available upon request. Putting on your Design Bootstraps Intro to Responsive Design & SharePoint By: D’arce Hess
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
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.
