putting on your design bootstraps, intro to responsive design in sharepoint
TRANSCRIPT
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
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.