Responsive SharePoint

  • 839 views
Uploaded on

 

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
839
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
6
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Get your SharePoint website on that mobile deviceusing HTML5 and CSS3#spsbe@kevinderudder
  • 2. Thanks to ourSponsorsPlatinumGoldSilver
  • 3. @kevinderudder working foreGuidelines and a lecturer at theTechnical University of West Flanders.Contact me on kevin@e-guidelines.be
  • 4. didn’t notice the SharePoint part
  • 5. SharePoint site is a site
  • 6. GOALWhyHow, what are the optionsConclusion
  • 7. WHY THIS TOPIC
  • 8. WHY THIS TOPICOR WHY SHOULD YOU CARE
  • 9. Photo by http://neuroticworkaholic.blogspot.com
  • 10. 2013NOWIS
  • 11. HOW? Give meaning to your contentStyle that content<HTML />.css{}
  • 12. HTML< />IS FOR THE STRUCTURE ONLY
  • 13. IMPORTANTthat you show the right contentISon each device
  • 14. What is the rightcontent?
  • 15. Desktop firstMobile first
  • 16. Now we’ve thoughtabout the contentHow do youidentify it?
  • 17. logonavigationintrocontentSidecontentfooter
  • 18. Which one is theside content?Some use nav, someuse navigation
  • 19. <div id=“header”> <div id=“top”><div id=“navigation”> <div id=“menu”><div id=“footer”><div id=“leftcontent” > <div id=“main” >
  • 20. footermenutitlesmalltextcontentheadernavcopyrightbuttonmainsearchmsonormaldatesmalltextbody
  • 21. <div id=“header”> <div id=“top”><div id=“navigation”> <div id=“menu”><div id=“footer”><div id=“leftcontent” > <div id=“main” >
  • 22. <header><nav><footer><aside><section><article>
  • 23. CSS{.}color: @ndstyle;
  • 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. DEMO
  • 26. Make it mobile1. Show different page per device2. Responsive design via Media Queries
  • 27. Make it mobile1. Show different page per device
  • 28. How1. Set device channels2. Create masterpages in HTML3. Use the Design Manager in SharePoint 2013 to link amasterpage to a specific device
  • 29. Step 1: Device ChannelsOnly for SharePoint 2013 publising sitesEnables rendering different content and style for differentdevices
  • 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. 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. Step 1: Device Channels limitations10 device channels per site collection150 inclusion rules per device channel
  • 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. 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. DEMO
  • 36. My thoughts on thisGoodThis is good if you want to deliver different content to differentdevices
  • 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. Make it mobile1. Show different page per device2. Responsive design via Media Queries
  • 39. What does it mean: RESPONSIVE??
  • 40. Pictures of M. vatia
  • 41. Pictures of M. vatia
  • 42. With device channels
  • 43. Media Queries allow you write design codebased on the characteristics of a device
  • 44. @media all and (max-width: 640px) {}MEDIA QUERYType Query or ExpressionMedia Queries exists out of 2 parts
  • 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. AHA, there is something like handheld
  • 47. @media screen{body{background-color: Red;}}@media handheld{body{background-color: Yellow;}}This is not yellow
  • 48. Old devices didn’t have capable browsers
  • 49. Modern mobile devices use screen as media type
  • 50. @media all and (max-width: 640px) {}MEDIA QUERYFeature ValueType Query or Expression
  • 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. 1.2.3.
  • 53. DEMO
  • 54. THANK YOU<name>Kevin DeRudder</name><input type=“email”>kevin@e-guidelines.be</email><blog>kevinderudder.wordpress.com</blog><twitter>@kevinderudder</twitter>
  • 55. Resourceshttp://iwdrm.tumblr.com/