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
Top Related