Putting on Your Design Bootstraps: Intro to Responsive Design and SharePoint
1 like230 views
The document is a guide on responsive design and SharePoint integration, authored by D'Arce Hess of AvePoint. It discusses key concepts such as responsive versus adaptive design, the benefits and drawbacks of using Bootstrap, and best practices for implementation. The content emphasizes the importance of optimizing user experience, particularly for mobile users, while providing technical insights into grid layouts, media queries, and CSS considerations.
Putting on Your Design Bootstraps: Intro to Responsive Design and SharePoint
- 1. Accessible content is available upon request. Putting on your Design Bootstraps Intro to Responsive Design & SharePoint By: D’arce Hess
- 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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.