Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Accessible content is available upon request.
Putting on your Design Bootstraps
Intro to Responsive Design & SharePoint
By...
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be rep...
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be rep...
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be rep...
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be rep...
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be rep...
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be rep...
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be rep...
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be rep...
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be rep...
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be rep...
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be rep...
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be rep...
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be rep...
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be rep...
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be rep...
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be rep...
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be rep...
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be rep...
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be rep...
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be rep...
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be rep...
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be rep...
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be rep...
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be rep...
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be rep...
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be rep...
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be rep...
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be rep...
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be rep...
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be rep...
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be rep...
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be rep...
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be rep...
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be rep...
Upcoming SlideShare
Loading in …5
×

Putting on your Design Bootstraps, Intro to Responsive Design in SharePoint

637 views

Published on

SPTechCon Boston 2015 presentation.

Published in: Technology
  • Be the first to comment

Putting on your Design Bootstraps, Intro to Responsive Design in SharePoint

  1. 1. Accessible content is available upon request. Putting on your Design Bootstraps Intro to Responsive Design & SharePoint By: D’arce Hess
  2. 2. ©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.
  3. 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.
  4. 4. ©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
  5. 5. ©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
  6. 6. ©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
  7. 7. ©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
  8. 8. ©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.
  9. 9. ©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
  10. 10. ©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.
  11. 11. ©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
  12. 12. ©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?
  13. 13. ©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.
  14. 14. ©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
  15. 15. ©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
  16. 16. ©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
  17. 17. ©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
  18. 18. ©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
  19. 19. ©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
  20. 20. ©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
  21. 21. ©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
  22. 22. ©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
  23. 23. ©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
  24. 24. ©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)
  25. 25. ©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?
  26. 26. ©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
  27. 27. ©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
  28. 28. ©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
  29. 29. ©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
  30. 30. ©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
  31. 31. ©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
  32. 32. ©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
  33. 33. ©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 Deployment “Add-in” Model/CSOM Third-Party Solution Multiple Site Collection Deployment
  34. 34. ©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
  35. 35. ©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.

×