Fulfilling the promise of Responsive Design with SharePoint 2013

  • 1,333 views
Uploaded on

Presented by @JustinSypek at SharePoint Saturday NYC on July 27th 2013.

Presented by @JustinSypek at SharePoint Saturday NYC on July 27th 2013.

More in: Technology , Design , Business
  • 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
1,333
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
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
  • Consumers just have too many choices these days… in everything… doesn’t just extend to laptop/desktop manufacturers anymore, there are all different devices with a multitude of forms factors, all running different operating systemsThese devices have different Screen resolutionBrowser choiceWhether or not the browser is maximizedDo they have toolbars installed that take up realestate
  • You can see the trends that IE and Chrome complement each other with. IE is losing share and chrome is gaining.Microsoft did the right thing with 2013 growing platform compatibility into chromeBut not only are there browser, there are different operating systems…
  • Windows 8’s launch at the end of the year gave another option to mobility along with iOS.Mobility has had a steady trend upwards as well.Still most browsing is done on a standard laptop/desktop
  • We can’t design for one platform or 1 deviceWe have to make our own choices as engineers and designersSo what should we do?
  • Has a fixed width container around all of the web content which is set to never move. Inner DIV’s either have a fixed width or % width.No matter the screen resolution of the viewing browser, the site layout remains consistent.Can set background as a gradient, or image. can scroll with user or be static.Popular a few years ago. With the screen resolutions and monitor sizes increasing, this gave an easy way to design consistent experiences across those new screen.
  • Fluid is having the width of the containing elements of the site (banner, columns, etc.) set at a percentage, so as you increase/decrease the browser width the columns, etc. will increase/decrease proportionately.Let’s use that screen real estate!But it’s difficult to design a site – with enough available content for those really large monitorsThis helps move you toward a responsive interface. There is a point where this isn't enough – this is where the first media query would be introduced.Flexible layout — any layout that uses relative measurements to allow the layout to resize under different conditionsFluid layouts — layouts with measurements relative to the browser windowElastic layouts — layouts with measurements relative to something internal to the design such as the size of the type
  • Not necessarily just stacking content vertically – but rethinking how best to deliver the content at a given screen size.Not just how to deliver the content, but WHAT content to deliver!Scrolling is inevitable – but what is the most important? This can vary from device to device
  • Making content readable on all devices is the goal of responsive designHistorically: the width of the letter “M” at a given point size, as it was cast for use in a printing pressEM actually cascades to it’s children, difficult to manage. REM isn’t available in IE 7 or 8 introduced in css3This has been around for a while and gained popularity as making website “accessible” became more mainstream. One big problem of using pixel values in a website was, and still is, that in IE you can’t use the browsers built in controls to increase/decrease the font-size. It is seen as an absolute value, not a relative one that can be adjusted. This has obvious ramifications on the person who wants to make the text a little bigger for comfort/readability.Can be translated to layout – div widths, padding, and margins can all be set relative to the current font size. If the user makes it bigger, the width, padding and margin get bigger proportionately. This prevents text from overflowing out of its given container
  • Responsive grid system gives you a base style and html to build a grid systemBreakpointsMaybe you don't want to just stack the columns at a smaller screen size? .span_1_of_12:nth-child(4n+1) { clear: both; margin-left: 0; }
  • Images often have a width and height attribute set in the <img> tag. Use CSS to make your images flexible:Using max-width ensures that the images is flexible only up to it’s maximum width so the image quality won’t degrade.Setting height to auto prevents the image from getting distorted.
  • All - for all the media types belowBraille - for braille tactile feedback devicesEmbossed - for paged braille printersHandheld - for handheld devices like mobile phonesPrint - for printed materialProjection - for projected presentationsScreen - computer screensSpeech - for speech synthesizerstty - for teletypes, terminals, and other devices with limited display capabilitiestv - for televisions and television like device
  • Not supported in less than IE 8Conditional comments – pass in the styles for the desktop view. This tends to be the more common approach at this point.Respond.js or modernizer– adds support for min-width and max-width media queries where support is lacking. May not be necessary to load an extra library if a conditional comment will meet your needs.
  • Just because we plan to implement responsive design doesn’t mean we only need 1 visual comp to work off ofWeb designers still need to mock up what the layout should be and what content should be available on at a minimum Desktops, tablets and mobile devices.Engineers will implement these with a Grids, but we shouldn’t “assume” what content is relative to the device layouts.
  • Hard approachIt is confusing to take away styles and move them into appropriate media queriesCan end up with media queries that were overlapping each otherStart a new media query with the max-width set to the current browser width (-1px to avoid overlapping with the previous media query) and add new styles that compliment the current browser size
  • Fluid layouts only go so far, at some point they will become too cramped, items will wrap too tightly and content will be difficult to read
  • Now you’ve date through a good 30 minutes of this crap… and I know your all wondering. What about SharePoint?I told you I promised, so here we go.
  • Good for Collaboration – allows site owners to choose Color schemes and masterpages to provide a “unique” look to their sitesNot ideal for responsive web designStored within the site (scalability/maintenance issues)No inheritance from parent for all components (i.e. Master Page)Background Image – Single ImageCan’t really test all permutations
  • You can have a maximum of 10 device channels A Device Channel Panel is a control that you can add to a master page or page layout to control what content is rendered in each channel that you create. Not really responsive, multiple styles are required.Works well with Media Queries
  • You can have a maximum of 10 device channels A Device Channel Panel is a control that you can add to a master page or page layout to control what content is rendered in each channel that you create. 
  • A publishing site collection   The site collection where you are adding image renditions must have been created by using the Publishing Portal or the Product Catalog site collection template. Or, publishing features must be enabled on the site collection where you want to use image renditionsA configured BLOB cache   The disk-based BLOB cache controls the caching for binary large objects (BLOBs), such as frequently used image, audio, and video files, and other files that are used to display webpages, such as .css files and .js files. The BLOB cache must be enabled on each front-end web server where you want to use image renditions. If the BLOB cache is not enabled, the original image is always used. An asset library (recommended)   You can use the Asset Library template to set up a library that makes it easy to store, organize, and find rich media assets, such as image, audio, or video files. Design permissions to the top-level site of the site collection.
  • DEMOShow configured device channelsShow how to assign masterpagesImage renditions site settingsImage renditions on the assets libraryRenditions page
  • Thank you for the heavy lifting!There not perfect, but I’m willing to bet one any of us create wouldn’t be either.So if you can’t beat them… use them!Demo frameworks
  • DEMO Sharepoint responsive site
  • Now that we’ve avoided this, you’ve sat through hours of sessions, and probably can’t wait for SharePint…Any questions?
  • Historically: the width of the letter “M” at a given point size, as it was cast for use in a printing pressThis has been around for a while and gained popularity as making website “accessible” became more mainstream. One big problem of using pixel values in a website was, and still is, that in IE you can’t use the browsers built in controls to increase/decrease the font-size. It is seen as an absolute value, not a relative one that can be adjusted. This has obvious ramifications on the person who wants to make the text a little bigger for comfort/readability.Can be translated to layout – div widths, padding, and margins can all be set relative to the current font size. If the user makes it bigger, the width, padding and margin get bigger proportionately. This prevents text from overflowing out of its given container
  • http://www.xiconeditor.comhttp://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

Transcript

  • 1. Presentedby:JustinSypek
  • 2. 2 | SharePoint Saturday New York City 2013  The Need  The Design  The SharePoint  The Promise
  • 3. Let’s face it…
  • 4. 4 | SharePoint Saturday New York City 2013 There’s just too many choices…
  • 5. 5 | SharePoint Saturday New York City 2013 http://www.w3schools.com/browsers
  • 6. 6 | SharePoint Saturday New York City 2013 http://www.w3schools.com/browsers
  • 7. 7 | SharePoint Saturday New York City 2013 http://www.w3schools.com/browsers
  • 8. What to do?
  • 9. Get Educated!
  • 10. Design Layouts
  • 11. 11 | SharePoint Saturday New York City 2013
  • 12. 12 | SharePoint Saturday New York City 2013
  • 13. 13 | SharePoint Saturday New York City 2013
  • 14. 14 | SharePoint Saturday New York City 2013
  • 15. 15 | SharePoint Saturday New York City 2013
  • 16. 16 | SharePoint Saturday New York City 2013 http://finecitizens.com/defineResponsive/
  • 17. 17 | SharePoint Saturday New York City 2013  Types  Images  Media Queries  Grid Layouts
  • 18. 18 | SharePoint Saturday New York City 2013 Types EMunitequaltothecomputedvalueofthefont-sizepropertyoftheelementitisdeclared on body { font-size: 16px; } 1em = 16px .5em = 8px body { font-size: 10px; } 1em = 10px .5em = 5px REMlikeanEMunit,butalwaysrefersbacktotherootfont-size,assetontheHTMLtag html { font-size: 16px; } 1rem = 16px .5rem = 8px html { font-size: 10px; } 1rem = 10px .5rem = 5px
  • 19. 19 | SharePoint Saturday New York City 2013 Calculate your percentages… Really, no eye balling. Create 3 equally sized columns of 230px within a 1000px container: 230 / 1000 = 0.23 .col { width: 23%; } With 10px margins? No problem: 10 / 1000 = 0.01 .col { width: 23%; margin: 1%; } http://www.responsivegridsystem.com
  • 20. 20 | SharePoint Saturday New York City 2013  Deliver small images to small devices  Don’t allow images to stretch past their designated width img{ max-width:100%; height:auto; }
  • 21. 21 | SharePoint Saturday New York City 2013 Media queries are made up of a media type and a query, usually checking for max-width or min-width which work universally. @media screen and (max-width: 480px) { .ChooseRendition { background-image:url(“SmallImageBackground.jpg”); } } @media screen and (min-width: 481px) and (max-width: 768px) { .ChooseRendition { background-image:url(“MediumImageBackground.jpg”); } }
  • 22. 22 | SharePoint Saturday New York City 2013 media_query:[only|not]?<media_type>[and<expression>]* expression:(<media_feature>[:<value>]?) media_type:all|aural|braille|handheld|print|projection|screen|tty|tv| embossed media_feature:width|min-width|max-width|height|min-height|max-height| device-width|min-device-width|max-device-width|device-height|min-device- height|max-device-height|device-aspect-ratio|min-device-aspect-ratio |max- device-aspect-ratio|color|min-color|max-color|color-index|min-color-index| max-color-index|monochrome|min-monochrome|max-monochrome| resolution|min-resolution|max-resolution|scan|grid
  • 23. 23 | SharePoint Saturday New York City 2013 <!--[if IE 8]> <link rel=“stylesheet” href=“ie8.css” /> <![endif]--> Media queries are made up of a media type and a query, usually checking for max-width or min-width which work universally.
  • 24. 24 | SharePoint Saturday New York City 2013 Designers still need to come up with layouts for various form factors. • Desktops • Tablets • Mobile
  • 25. the Good & the Bad
  • 26. 26 | SharePoint Saturday New York City 2013  Easier to manage content  Maintain a strong brand presence and consistent experience  Once designed, does not have to be redone (v. attractive to the enterprise)  Responsive design establishes a design framework that is relatively future proof so costs across time are radically reduced.
  • 27. 27 | SharePoint Saturday New York City 2013  Significant front loaded effort in UI code.This is often unattractive to enterprises because they cannot see the long term cost benefit. Cleaner code reduces latency but time is required.  Testing is also significantly increased  New devices on the market place are not a guarantee that the website will display properly (though admittedly less risk than a site that has no responsive design)
  • 28. Desktop vs. Mobile First
  • 29. 29 | SharePoint Saturday New York City 2013 Designthedesktopsolutionfirstandtakeawaystylesasyoudeterminewherethe breakingpointsareinthedesign:  Youcanstillcomeupwithabasesetofpropertiesthatapplyacrosstheboard,but yougettherethroughaprocessoftakingawaystylesandmovingthemtomedia queries.  Afterdeveloping thedesktopversion,decreasethewidthofthewindowuntilyouhit thepointwherethedesigniscompromised(columnsaretoonarrowforcontent, navigationwrapstomultiple lines,etc.)  Movetheoffendingstylesintoanewmediaquery  Repeatthisprocessuntilyougettoamobile/phonewidth  Ofcourse,testingonotherdevicesalongthewaywillsignificantlyimprovethe outcomeofthisprocess,butthebrowserisagoodstartingplace
  • 30. 30 | SharePoint Saturday New York City 2013 Design the mobile solution first and move up from there.This is generally seen as the preferred approach.  This not only forces you to consider what content is most important given the limited real estate, it also gives you abase set of styles that are applicable tomobile right up todesktop  Asyou increase the real estate, determine what elements can be brought into view or adjusted and add styling for them using a media query with the min-width set tothe current browser width  Repeat until you’ve reach the desktop view
  • 31. I told you I promised!
  • 32. Now the SharePoint side of things
  • 33. 33 | SharePoint Saturday New York City 2013 Web Part Web Part Web Part Web Part Web Part
  • 34. 34 | SharePoint Saturday New York City 2013 Provides a mechanism for template based branding, yet still allows power users tomake minor changes  Master Page  Color palettes - .spcolor  Font palettes - .spfont  Background image  Preview - .preview
  • 35. 35 | SharePoint Saturday New York City 2013  Render a single publishing site in multiple ways by using different designs that target different devices  Assign MasterPages to device channels to create specific experiences for each device.
  • 36. 36 | SharePoint Saturday New York City 2013 Device User agent substring(s) Windows Phone •Windows Phone OS 7.5 (Specific to Windows Phone 7.5 phone.) •Windows Phone OS (Generic substring for all Windows Phone versions.) iPhone iPhone iPad iPad Android Android
  • 37. 37 | SharePoint Saturday New York City 2013  Enable you to display differently sized versions of an image on different pages in a publishing site, based on the same source image. When you create an image rendition, you specify the width and/or height for all images that use that image rendition. The image renditions are available for every image that is uploaded to a library in that site collection.
  • 38. Let’s take a look…
  • 39. Let’s get Responsive!
  • 40. 40 | SharePoint Saturday New York City 2013  Bootstrap for SharePoint  Desktop First approach  ZURB Foundation  Mobile FirstApproach Each Framework comes with a MasterPage, set of Style Sheets and an assortment of Page Layouts that are developed for Responsive Web Design. http://responsivesharepoint.codeplex.com/releases
  • 41. 41 | SharePoint Saturday New York City 2013  Ton of jQuery plugins to help smooth the transition to a responsive design http://speckyboy.com/2011/10/24/25-jquery-plugins-to-help-with-responsive-layouts/
  • 42. Putting it all together
  • 43. 43 | SharePoint Saturday New York City 2013
  • 44. 44 | SharePoint Saturday New York City 2013
  • 45. 45 | SharePoint Saturday New York City 2013
  • 46. 46 | SharePoint Saturday New York City 2013
  • 47. 47 | SharePoint Saturday New York City 2013
  • 48. 48 | SharePoint Saturday New York City 2013
  • 49. 49 | SharePoint Saturday New York City 2013
  • 50. 50 | SharePoint Saturday New York City 2013
  • 51. Questions?
  • 52. Thank you! @JustinSypekwww.linkedin.com/in/justinsypek/
  • 53. 53 | SharePoint Saturday New York City 2013  Please remember to turn in your filled out bingo cards and event evaluations for prizes.  SharePint is sponsored by Slalom at Whiskey Trader (Between 55th and 56th on 6th Avenue).  Follow SharePoint Saturday New York City on Twitter @spsnyc and hashtag #spsnyc
  • 54. ThankstoOurSponsors!
  • 55. 55 | SharePoint Saturday New York City 2013 Images:  fromthecurb.com  sugarbushcc.com  lauriecalzada.files.wordpress.com  http://farm5.static.flickr.com