Post on 02-Jul-2015
MEH, I WAS TOLD IT WOULD
BE EASY.
HOW DO I START?
LET MESHOW
YOU HOW
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
YIKES!
BUT IT CAN BE ACCOMPLISHED
BEFORE YOU BEGIN, YOU SHOULD UNDERSTAND
THE SHAREPOINT BASICS
SO THAT YOU MAY START YOUR JOURNEY ON THE RIGHT
PATH
THE INTERFACE
THE QUICK LAUNCH
GLOBAL NAVIGATION
SUITE BAR
THE PAGE
THESE ARE A FEW SHAREPOINT
CONTROLS ON THE DEFAULT
« MASTER PAGE »
AND YOU CAN OVERRIDE THE CSS
OR CHOOSE THE LOOK
THESE ARE EASY WAYS TO CHANGE HOW
SHAREPOINT LOOKS WITHOUT TOO MUCH EFFORT
wooahbut how do you
change the CSS?
WELL YOU CAN START WITH BROWSER DEVELOPER TOOLS
(F12 in most browsers)
THESE WILL HELP YOU IDENTIFY CSS USED AND TEST
SOME OF YOUR CHANGES
ok… I don’t know
this CSS business how
can I make those looks you talked about?
THERE IS THE COLOR PALETTE TOOL… THOUGH SOME ASSEMBLY MAY BE
REQUIRED
BUT I STRONGLY RECOMMEND YOU START LEARNING
HTML AND CSS
HOWEVER, NO MATTER WHAT YOU DO, YOU’LL EVENTUALLY
HAVE TO LEARN ABOUT « MASTER PAGES »
THE MASTER PAGE IS THE FILE WHERE YOU WILL WRITE
THE STRUCTURE OF YOUR SHAREPOINT
DESIGN.
WHERE WILL OBJECTS BE AND HOW WILL THEY
LOOK LIKE?
ALONG WITH WHAT CSS FILES OR JAVASCRIPT FILES
TO CALL.
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.
REMEMBER THIS?
IT’S USING THE DEFAULT SHAREPOINT MASTER PAGE.
IT DECIDED WHERE THINGS ARE AND WHICH CSS TO CALL TO
MAKE IT LOOK LIKE THIS
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.
IDEALLY, IF YOU ARE STARTING A NEW
DESIGN.
YOU’LL START A MASTER PAGE FROM
SCRATCH
WHAT IS RESPONSIVE WEB DESIGN
“Pro SharePoint 2013 Branding and Responsive Web Development” (Apress – June 2013)
Eric Overfield Pixelmill
https://sprwd-public.sharepoint.com
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*
WHY WE NEED IT
SO MANY DIFFERENT DEVICES
• Screen size (viewport, proportions, resolution)
• Functionality (clicks, hover, touch, swipe…)
• Usability (can your site be used on any device?)
FUNDAMENTALS OF RWD
THE 3 PILLARS OF RWD
FLUID GRID – FLEXIBLE MEDIA – CSS3 MEDIA QUERIES
A FLUID GRID
FLEXIBLE MEDIA
▪ Flexible Images ▪ Flexible Video ▪ Proportional Text
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; }}
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
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
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?
CUSTOM GRID VS EXISTING FRAMEWORK
• Pre-‐built responsive and fluid grids
• Saves time and resources
• Many include extras
• i.e. collapsing navigation
COMMON FRAMEWORKS
Twitter Bootstrap
Zurb Foundation
Skeleton
Less Framework
FRAMEWORK PLUSES AND MINUSES
May take time to learn framework
Not always SharePoint ready OOTB
Can save you a bunch of time!
BUT IF YOU ARE NEW TO SHAREPOINT, YET COMFORTABLE WITH
HTML.
YOU CAN CONVERT YOUR HTML INTO A
MASTER PAGE
THE DESIGN MANAGER
AND THE SNIPPETS GALLERY WILL HELP YOU TURN IT INTO A COOL MASTER PAGE
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
IN THE END YOU CAN DO WHATEVER YOU
WANT.
AS LONG AS YOU ADD THE NECESSARY
SHAREPOINT CONTROLS
I CAN’T BELIEVE IT’S SHAREPOINT
WAIT
you can also change how content is displayed
there’s more…
TURNING AN IMAGE LIBRARY INTO A SLIDER OR A LIST INTO
ANIMATED TILES
NOT IMPRESSED?
(shout out to my dog)
WHAT IF I TOLD YOU
THOSE DESIGNS
WERE REUSABLE WITH ANY TYPE OF
CONTENT
by Benjamin Niaulin, a SharePoint GEEK
@bniaulin
share-gate.com/blog
THANK YOU!