Benjamin Niaulin

@bniaulin

http://en.share-gate.com/blog

http://en.share-gate.com/blog

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 ISNT 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 dont 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, YOULL 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?

ITS 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.

YOULL 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:

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

Whats 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 CANT BELIEVE ITS SHAREPOINT

WAIT

you can also change how content is displayed

theres 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!

http://share-gate.com/blog