@bniaulin

share-gate.com/blog

by Benjamin Niaulin, a SharePoint GEEK

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!