One of the biggest features introduced in SharePoint 2013 is the Design Manager. Benjamin Niaulin tells us everything there is to know about it!

2. Benjamin
Niaulin
@bniaulin
http://en.share-gate.com/blog

4. MEH,
I WAS TOLD
IT WOULD
BE
EASY.
HOW DO I
START?

5. LET ME
SHOW
YOU HOW

6. YES, SHAREPOINT IS A WEB
PLATFORM (HTML, CSS, JS)
BUT IT IS SO VAST AND HAS SO
MANY FEATURES THAT
BRANDING ISN’T THAT SIMPLE

7. YIKES!

8. BUT IT
CAN BEACCOMPLISHED

9. BEFORE YOU BEGIN,
YOU SHOULD UNDERSTAND
THE SHAREPOINT BASICS
SO THAT YOU MAY START
YOUR JOURNEY ON THE RIGHT
PATH

10. THE INTERFACE

11. THE QUICK LAUNCH

12. GLOBAL NAVIGATION

13. SUITE BAR

14. THE PAGE

15. THESE ARE A FEW
SHAREPOINT
CONTROLS ON THE
DEFAULT
« MASTER PAGE »

16. AND YOU CAN
OVERRIDE
THE CSS

17. OR CHOOSE
THE LOOK

18. THESE ARE
EASY WAYS TO
CHANGE HOW
SHAREPOINT LOOKS
WITHOUT TOO
MUCH EFFORT

19. wooah
but how
do you
change the
CSS?

20. WELL YOU CAN START WITH
BROWSER DEVELOPER TOOLS
(F12 in most browsers)

21. THESE WILL HELP YOU
IDENTIFY CSS USED AND TEST
SOME OF YOUR CHANGES

22. ok…
I don’t know
this CSS
business how
can I make
those looks you
talked about?

23. THERE IS THE COLOR PALETTE TOOL…
THOUGH SOME ASSEMBLY MAY BE
REQUIRED

24. BUT I STRONGLY
RECOMMEND YOU
START LEARNING
HTML AND CSS

25. HOWEVER, NO MATTER WHAT
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
OBJECTS BE 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. REMEMBER THIS?

30. IT’S USING THE DEFAULT
SHAREPOINT MASTER PAGE.
IT DECIDED WHERE THINGS ARE
AND WHICH CSS TO CALL TO
MAKE IT LOOK LIKE THIS

31. IF YOU CHOOSE TO 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 YOU ARE
STARTING A NEW
DESIGN.
YOU’LL START A
MASTER PAGE FROM
SCRATCH

33. WHAT IS RESPONSIVE WEB DESIGN
“Pro SharePoint 2013 Branding and Responsive Web
Development” (Apress – June 2013)
Eric Overfield
Pixelmill
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. WHY WE
NEED IT

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. FUNDAMENTALS OF RWD

38. THE 3 PILLARS OF RWD
FLUID GRID – FLEXIBLE MEDIA –
CSS3 MEDIA QUERIES

39. A FLUID GRID

40. FLEXIBLE MEDIA
▪ Flexible Images
▪ Flexible Video
▪ Proportional Text

41. MEDIA QUERIES
In-Line Media 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
• How will 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 SITE PLANNING
• 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 VS EXISTING
FRAMEWORK
• Pre-built responsive and fluid grids
• Saves time and resources
• Many include extras
• i.e. collapsing navigation

46. COMMON FRAMEWORKS
Twitter Bootstrap
Zurb Foundation
Skeleton
Less Framework

47. FRAMEWORK PLUSES AND MINUSES
May take time to learn framework
Not always SharePoint ready OOTB
Can save you a bunch of time!

48. BUT IF YOU ARE NEW
TO SHAREPOINT, YET
COMFORTABLE WITH
HTML.
YOU CAN CONVERT
YOUR HTML INTO A
MASTER PAGE

49. THE DESIGN
MANAGER

50. AND THE SNIPPETS
GALLERY WILL HELP
YOU TURN IT INTO A
COOL MASTER PAGE

51. BY GIVING YOU THE CODE TO
ADD THOSE SHAREPOINT
CONTROLS LIKE:
- NAVIGATION
- SUITE BAR
- PAGE CONTENT ZONE
- AND MORE…
TO ADD IN YOUR MASTER PAGE

52. IN THE END YOU CAN
DO WHATEVER YOU
WANT.
AS LONG AS YOU ADD
THE NECESSARY
SHAREPOINT
CONTROLS

55. I CAN’T
BELIEVE IT’S
SHAREPOINT

56. WAIT
you can also
change how
content is
displayed
there’s more…

58. TURNING AN IMAGE LIBRARY
INTO A SLIDER OR A LIST INTO
ANIMATED TILES

59. NOT
IMPRESSED?
(shout out 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
@bniaulin
share-gate.com/blog
THANK YOU!