introduction to a responsive master page with the design manager
Post on 27-Jan-2017
893 Views
Preview:
TRANSCRIPT
-
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