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