Responsive SharePoint

1,789 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,789
On SlideShare
0
From Embeds
0
Number of Embeds
929
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive SharePoint

  1. 1. Get your SharePoint website on that mobile deviceusing HTML5 and CSS3#spsbe@kevinderudder
  2. 2. Thanks to ourSponsorsPlatinumGoldSilver
  3. 3. @kevinderudder working foreGuidelines and a lecturer at theTechnical University of West Flanders.Contact me on kevin@e-guidelines.be
  4. 4. didn’t notice the SharePoint part
  5. 5. SharePoint site is a site
  6. 6. GOALWhyHow, what are the optionsConclusion
  7. 7. WHY THIS TOPIC
  8. 8. WHY THIS TOPICOR WHY SHOULD YOU CARE
  9. 9. Photo by http://neuroticworkaholic.blogspot.com
  10. 10. 2013NOWIS
  11. 11. HOW? Give meaning to your contentStyle that content<HTML />.css{}
  12. 12. HTML< />IS FOR THE STRUCTURE ONLY
  13. 13. IMPORTANTthat you show the right contentISon each device
  14. 14. What is the rightcontent?
  15. 15. Desktop firstMobile first
  16. 16. Now we’ve thoughtabout the contentHow do youidentify it?
  17. 17. logonavigationintrocontentSidecontentfooter
  18. 18. Which one is theside content?Some use nav, someuse navigation
  19. 19. <div id=“header”> <div id=“top”><div id=“navigation”> <div id=“menu”><div id=“footer”><div id=“leftcontent” > <div id=“main” >
  20. 20. footermenutitlesmalltextcontentheadernavcopyrightbuttonmainsearchmsonormaldatesmalltextbody
  21. 21. <div id=“header”> <div id=“top”><div id=“navigation”> <div id=“menu”><div id=“footer”><div id=“leftcontent” > <div id=“main” >
  22. 22. <header><nav><footer><aside><section><article>
  23. 23. CSS{.}color: @ndstyle;
  24. 24. Styling the content for mobileChange the style of the buttons in the <nav>Hide the irrelevant contentMake the logo in the header smaller…
  25. 25. DEMO
  26. 26. Make it mobile1. Show different page per device2. Responsive design via Media Queries
  27. 27. Make it mobile1. Show different page per device
  28. 28. How1. Set device channels2. Create masterpages in HTML3. Use the Design Manager in SharePoint 2013 to link amasterpage to a specific device
  29. 29. Step 1: Device ChannelsOnly for SharePoint 2013 publising sitesEnables rendering different content and style for differentdevices
  30. 30. if (/MSIE (d+.d+);/.test(navigator.userAgent)) {var ieversion = new Number(RegExp.$1)if (ieversion >= 9)document.write("Youre using IE9 or above")else if (ieversion >= 8)document.write("Youre using IE8 or above")else if (ieversion >= 7)document.write("Youre using IE7.x")else if (ieversion >= 6)document.write("Youre using IE6.x")else if (ieversion >= 5) // <------------- Just because I candocument.write("Youre using IE5.x")}elsedocument.write("hmmm, dunno")
  31. 31. var isMobile = {Android: function () {return navigator.userAgent.match(/Android/i);},BlackBerry: function () {return navigator.userAgent.match(/BlackBerry/i);},iOS: function () {return navigator.userAgent.match(/iPhone|iPad|iPod/i);},Opera: function () {return navigator.userAgent.match(/Opera Mini/i);},Windows: function () {return navigator.userAgent.match(/IEMobile/i);}};
  32. 32. Step 1: Device Channels limitations10 device channels per site collection150 inclusion rules per device channel
  33. 33. Step 2: Create masterpagesCreating masterpages from scratch is a hellstart with a minimal masterpageBut what if you need help from a non-sharepoint guy/girl??convert an existing HTML to a SharePoint masterpage
  34. 34. Step 3: Design ManagerDesign manager is the way to brand you SharePoint sitesUse your favorite design tool and upload the files to the designmanager
  35. 35. DEMO
  36. 36. My thoughts on thisGoodThis is good if you want to deliver different content to differentdevices
  37. 37. My thoughts on thisBadDo you really create different pages for different devices??What if I want to share something by sending a link from mymobile to your desktop?What about SharePoint 2010, 2007????Why do this when the rest of the world is doing it differently
  38. 38. Make it mobile1. Show different page per device2. Responsive design via Media Queries
  39. 39. What does it mean: RESPONSIVE??
  40. 40. Pictures of M. vatia
  41. 41. Pictures of M. vatia
  42. 42. With device channels
  43. 43. Media Queries allow you write design codebased on the characteristics of a device
  44. 44. @media all and (max-width: 640px) {}MEDIA QUERYType Query or ExpressionMedia Queries exists out of 2 parts
  45. 45. All Suitable for all devicesBraille Intended for braille tactile feedback devicesEmbossed Intended for paged braille printersHandheld Intended for handheld devicesPrint Intended for paged materialProjection Intended for projected presentationsScreen Intended primarily for color computer screensSpeech Inteded for speech synthesizersTty Media using a fixed character gridTv Intended for television-type devicesTaken from the W3C siteMedia Type
  46. 46. AHA, there is something like handheld
  47. 47. @media screen{body{background-color: Red;}}@media handheld{body{background-color: Yellow;}}This is not yellow
  48. 48. Old devices didn’t have capable browsers
  49. 49. Modern mobile devices use screen as media type
  50. 50. @media all and (max-width: 640px) {}MEDIA QUERYFeature ValueType Query or Expression
  51. 51. • Width• Height• Device-width• Device-height• Resolution• Aspect-ratio• Device-aspect-ratio• Color• Color-index• MonochromeFeatures with min- and max- prefixesThe FeaturesFeatures without min- and max- prefixes• Orientation• Scan• Grid
  52. 52. 1.2.3.
  53. 53. DEMO
  54. 54. THANK YOU<name>Kevin DeRudder</name><input type=“email”>kevin@e-guidelines.be</email><blog>kevinderudder.wordpress.com</blog><twitter>@kevinderudder</twitter>
  55. 55. Resourceshttp://iwdrm.tumblr.com/

×