Download as PDF, PPTX
Uploaded byNCCOMMS
Spca2014 introduction responsive master page niaulin
This document provides an overview of how to get started with branding and customizing the look of a SharePoint site. It discusses some basic SharePoint concepts and controls to understand first. It then explains ways to change the look, including overriding the CSS or choosing different themes. Master pages are discussed as the central file that determines page structure and styling. The document also introduces responsive web design and how this approach can make the site appear properly on different devices.
More Related Content
Similar to Spca2014 introduction responsive master page niaulin
Spca2014 introduction responsive master page niaulin
- 2. ! ! byBenjamin Niaulin, a SharePoint GEEK @bniaulin share-gate.com/blog
- 4. MEH, I WASTOLD IT WOULD BE EASY. HOW DO I START?
- 5. LET ME SHOW YOU HOW
- 6. YES, SHAREPOINT ISA WEB PLATFORM (HTML, CSS, JS) BUT IT IS SO VAST AND HAS SO MANY FEATURES THAT BRANDING ISN’T THAT SIMPLE
- 7.
- 8. BUT IT CANBE ACCOMPLISHED
- 9. BEFORE YOU BEGIN, YOU SHOULD UNDERSTAND THE SHAREPOINT BASICS SO THAT YOU MAY START YOUR JOURNEY ON THE RIGHT PATH
- 10.
- 11.
- 12.
- 13.
- 14.
- 15. THESE ARE AFEW SHAREPOINT CONTROLS ON THE DEFAULT « MASTER PAGE »
- 16. AND YOU CAN OVERRIDE THE CSS
- 17. OR CHOOSE THELOOK
- 18. THESE ARE EASYWAYS TO CHANGE HOW SHAREPOINT LOOKS WITHOUT TOO MUCH EFFORT
- 19. wooah but how do you change the CSS?
- 20. WELL YOU CANSTART WITH BROWSER DEVELOPER TOOLS (F12 in most browsers)
- 21. THESE WILL HELPYOU IDENTIFY CSS USED AND TEST SOME OF YOUR CHANGES
- 22. ok… I don’tknow this CSS business how can I make those looks you talked about?
- 23. THERE IS THECOLOR PALETTE TOOL… THOUGH SOME ASSEMBLY MAY BE REQUIRED
- 24. BUT I STRONGLY RECOMMEND YOU START LEARNING HTML AND CSS
- 25. HOWEVER, NO MATTERWHAT YOU DO, YOU’LL EVENTUALLY HAVE TO LEARN ABOUT « MASTER PAGES »
- 26. THE MASTER PAGE IS THE FILE WHERE YOU WILL WRITE THE STRUCTURE OF YOUR SHAREPOINT DESIGN.
- 27. WHERE WILL OBJECTSBE AND HOW WILL THEY LOOK LIKE? ALONG WITH WHAT CSS FILES OR JAVASCRIPT FILES TO CALL.
- 28. IT IS THE« MASTER » FILE AND IS ALWAYS CALLED FIRST WHEN A PAGE IS LOADED. A WAY TO STANDARDIZE THE LOOK AND FEEL OF YOUR SHAREPOINT WITH ONE FILE.
- 29.
- 30. IT’S USING THEDEFAULT SHAREPOINT MASTER PAGE. IT DECIDED WHERE THINGS ARE AND WHICH CSS TO CALL TO MAKE IT LOOK LIKE THIS
- 31. IF YOU CHOOSETO CHANGE THE LOOK WITHOUT RESTRUCTURING IT. THEN ALL YOU NEED TO DO IS EDIT THAT MASTER PAGE. AND LINK YOUR NEW CSS FILE.
- 32. IDEALLY, IF YOUARE STARTING A NEW DESIGN. YOU’LL START A MASTER PAGE FROM SCRATCH
- 33. WHAT IS RESPONSIVEWEB DESIGN Eric Overfield Pixelmill “Pro SharePoint 2013 Branding and Responsive Web Development” (Apress – June 2013) https://sprwd-public.sharepoint.com
- 34. Responsive Web Design • A web design methodology – Addresses growing number of Internet devices • Tailored experience to any device – Limits resizing, panning and scrolling • The Key: All devices load the same page*
- 35.
- 36. SO MANY DIFFERENT DEVICES • Screen size (viewport, proportions, resolution) • Functionality (clicks, hover, touch, swipe…) • Usability (can your site be used on any device?)
- 37.
- 38. THE 3 PILLARSOF RWD FLUID GRID – FLEXIBLE MEDIA – CSS3 MEDIA QUERIES
- 39.
- 40. FLEXIBLE MEDIA ▪Flexible Images ▪ Flexible Video ▪ Proportional Text
- 41. MEDIA QUERIES In-‐LineMedia Query: <link rel="stylesheet" media="screen and (min-‐width: 768px)" href=“tablet.css" /> <link rel="stylesheet" media="screen and (max-‐width: 599px)" href=“small.css" /> Media Query in style sheets: @media screen and (min-‐width: 786px) { body { font-‐size: 1.3em; } } @media screen and (min-‐width: 992px) { body { font-‐size: 1.6em; } } Device ability to handle orientation @media screen and (orientation: landscape) { .landscape { width: 30%; float: right; } }
- 42. NAVIGATION • Howwill your navigation adapt to different viewports • Responsive navigation may require thought • Only basic SharePoint OOTB navigation is RWD friendly • Multi-‐level SP OOTB navigation relies on hover
- 43. BEGIN WITH SITEPLANNING • This should be familiar – Start with content / site purpose – Sitemap – Information Architecture • What’s different – Wireframing – including for mobile devices – High fidelity mockups – including for mobile devices • Design to the extremes, then fill in the gaps
- 44. ALWAYS REMEMBER SHAREPOINT • What will be a part of the Master Page • How you will you handle navigation? • Current navigation on all pages? • How will Page Layout content be defined?
- 45. CUSTOM GRID VSEXISTING FRAMEWORK • Pre-‐built responsive and fluid grids • Saves time and resources • Many include extras • i.e. collapsing navigation
- 46. COMMON FRAMEWORKS TwitterBootstrap Zurb Foundation Skeleton Less Framework
- 47. FRAMEWORK PLUSES ANDMINUSES May take time to learn framework Not always SharePoint ready OOTB Can save you a bunch of time!
- 48. BUT IF YOUARE NEW TO SHAREPOINT, YET COMFORTABLE WITH HTML. YOU CAN CONVERT YOUR HTML INTO A MASTER PAGE
- 49.
- 50. AND THE SNIPPETS GALLERY WILL HELP YOU TURN IT INTO A COOL MASTER PAGE
- 51. BY GIVING YOUTHE CODE TO ADD THOSE SHAREPOINT CONTROLS LIKE: - NAVIGATION - SUITE BAR - PAGE CONTENT ZONE - AND MORE… TO ADD IN YOUR MASTER PAGE
- 52. IN THE ENDYOU CAN DO WHATEVER YOU WANT. AS LONG AS YOU ADD THE NECESSARY SHAREPOINT CONTROLS
- 55. I CAN’T BELIEVEIT’S SHAREPOINT
- 56. WAIT there’s more… you can also change how content is displayed
- 58. TURNING AN IMAGELIBRARY INTO A SLIDER OR A LIST INTO ANIMATED TILES
- 59. NOT IMPRESSED? (shoutout to my dog)
- 60. WHAT IF I TOLD YOU THOSE DESIGNS WERE REUSABLE WITH ANY TYPE OF CONTENT
- 62. by Benjamin Niaulin, a SharePoint GEEK ! ! THANK YOU! @bniaulin share-gate.com/blog