Enhance SharePoint 2013 with Responsive Web Design


Published on

Enhance SharePoint 2013 with Responsive Web Design session held at SharePoint Saturday Los Angeles 2013.

Published in: Education, Technology, Design
  • Excellent presentation & summary.
    Thanks, Eric!
    Are you sure you want to  Yes  No
    Your message goes here
  • Very nice presenttion about making SharePoint responsive.
    I'm also working with responsive branding for SharePoint, let me introduce our work, take a look at http://bindtuning.com/
    We have a tunning tool where you can fully customize a theme for SharePoint and besides being responsive the theme include a lot of features.
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Will make available on blog and twitter (slideshare.net), so if you remember one of those then you can always review everything we discuss
  • fluid proportion-based grids (which use percentages pixels) to adapt the layout to the viewing environmentAll clients effectively load the entire page but using css, hides or replaces elements to tailor the experience to the screen.DOES NOT USE USERAGENT, browser detection, rather works of screen width.Early adopter AIDS.gov
  • mobile is invading, for the good, all organizations. if not now then in the next few years. Iphone is estimated to provide 1/3% of gdp.
  • What, you think your next web initiative is only going to last a few years? How long did you last intranet or public facing site last?Built towards to future, not the past, you MUST consider tablets and smart phones at the least
  • http://www.wcu.edu/ceap/houghton/edelcompeduc/ch1/ch1palmframes.html
  • http://www.mequoda.com/articles/digital-magazine-publishing/web-usage-prediction-when-mobile-and-desktop-collide/
  • Mr. Zeldman founded A List Apart, best practices and innovations in web design.sure, you can zoom in on many smart phones or tablets, but what if you can make tailored experience for each device?Modern devices share basic ability with css, js though which his a plus
  • Mississippi Department of IT
  • Test download using FiddlerTest design on important devices just to make sure
  • Device Channels work only with Publishing Sites Allow for one interface for all desktops and another for most tablets let's say.Only 10 device channels per site collection, but do you really want to maintain 10 MP’s?
  • Device Channels work only with Publishing Sites Allow for one interface for all desktops and another for most tablets let's say.Only 10 device channels per site collection, but do you really want to maintain 10 MP’s?
  • HTML MockupInclude bootstrapView resultConvert to gridInclude fluidNavigation types
  • Enhance SharePoint 2013 with Responsive Web Design

    1. 1. With Responsive Web Design Eric Overfield SharePoint Advocate and Enthusiast PixelMill Enhance SharePoint 2013
    2. 2. Introduction – Eric Overfield  Founder and SharePoint Branding/UI Lead, PixelMill  Speaker, Teacher, Advocate  Author, SharePoint Community Organizer  Located in Davis, CA ericoverfield.com @EricOverfield Order Your Copy http://pxml.ly/zsqykd Co-author: “Pro SharePoint 2013 Branding and Responsive Web Development” (Apress – June 12th, 2013) Co-author: “Black Magic Solutions for White Hat SharePoint” (August, 2013)
    3. 3. What You Will Learn  What is Responsive Web Design (RWD)  Why Should We Use It  Planning for Responsive Design  Join Response Web Design and SharePoint  SharePoint 2013 RWD Extras @EricOverfield - pixelmill.com
    4. 4. Responsive Web Design  #2 trend for 2012 - .net Magazine  Coined by Ethan Marcotte in May 2010  Use fluid grids and flexible media to adapt  Uses CSS3 and JavaScript  All devices load same page, use CSS3 to adapt @EricOverfield - pixelmill.com
    5. 5. Push NotificationsLet’s See a ComparisonFluid (Flexible) Grid @EricOverfield - pixelmill.com i.e. 860 / 940 ~= 91.489361%
    6. 6. @EricOverfield - pixelmill.com The Grid – In Action
    7. 7. Push NotificationsLet’s See a ComparisonFlexible Media @EricOverfield - pixelmill.com
    8. 8. Push NotificationsLet’s See a ComparisonMedia Queries @EricOverfield - pixelmill.com Load a stylesheet in HTML: <link rel=“stylesheet” type=“text/css” href=“css/styles.css” media=“screen and (min-width: 768px)” /> Media Queries in a Stylesheet @media screen and (min-width: 768px) { #banner { display: block; } } Added in CSS 2.1, Enhanced with CSS3
    9. 9. Responsive Design In Action @EricOverfield - pixelmill.com
    10. 10. @EricOverfield - pixelmill.com
    11. 11. @EricOverfield - pixelmill.com
    12. 12. Who Cares? @EricOverfield - pixelmill.com The Mobile Revolution
    13. 13. Not The Web @EricOverfield - pixelmill.com
    14. 14. Today’s Web @EricOverfield - pixelmill.com
    15. 15. And Tomorrow? Watches? Game Devices? Printers? Who Knows? Toasters? Televisions? Cameras? @EricOverfield - pixelmill.com
    16. 16. @EricOverfield - pixelmill.com Business Insider conference presentation shows (Blodget & Cocotas, 2012)
    17. 17. @EricOverfield - pixelmill.com
    18. 18. http://thenextweb.com/insider/2012/12/27/christmas-day-mixpanel-study-more-online-activity-on-mobile-devices/ @EricOverfield - pixelmill.com Mobile vs Desktop Traffic
    19. 19. "There’s a plethora of devices out there with widely differing abilities – it’s never been more confusing or challenging to create brilliant interfaces that work across them all.” ~ Jeffery Zeldman @EricOverfield - pixelmill.com
    20. 20. Screen Size Functionality Usability How All Devices Differ @EricOverfield - pixelmill.com
    21. 21. Planning For Responsive Design @EricOverfield - pixelmill.com
    22. 22. Our Responsive Goals  Single site  Serve a variety of Viewports @EricOverfield - pixelmill.com  Future Friendly (i.e. no separate mobile)
    23. 23. Responsive Drawbacks  Desktop vs. Mobile content  Content order @EricOverfield - pixelmill.com  Maybe SharePoint can help?  Device Channels  A lot more work
    24. 24. Start with Content @EricOverfield - pixelmill.com
    25. 25. Mobile First Information Architecture Content Rollups Search Driven Content Content is King @EricOverfield - pixelmill.com
    26. 26. Design Extremes @EricOverfield - pixelmill.com to the
    27. 27. @EricOverfield - pixelmill.com
    28. 28. Navigation  Responsive Navigation the most difficult decision  SharePoint Navigation is not Responsive friendly @EricOverfield - pixelmill.com  SharePoint relies on hover event  Static Navigation vs. SharePoint Navigation
    29. 29. Floating Drop down Collapse Off Canvas Others? Floating Drop down Collapse Off Canvas Others? Responsive Navigation @EricOverfield - pixelmill.com
    30. 30. @EricOverfield - pixelmill.com Floating Navigation
    31. 31. Floating Drop down Collapse Off Canvas Others? Responsive Navigation @EricOverfield - pixelmill.com
    32. 32. @EricOverfield - pixelmill.com Dropdown Navigation
    33. 33. Floating Drop down Collapsing Off Canvas Others? Responsive Navigation @EricOverfield - pixelmill.com
    34. 34. @EricOverfield - pixelmill.com Collapsing Navigation
    35. 35. Floating Drop down Collapsing Off Canvas Others? Responsive Navigation @EricOverfield - pixelmill.com
    36. 36. @EricOverfield - pixelmill.com Off Canvas Navigation
    37. 37. Floating Drop down Collapsing Off Canvas Others? Responsive Navigation @EricOverfield - pixelmill.com
    38. 38. No two projects are the same Hide and Cry Overlay Footer Navigation Global Navigation jQuery or no jQuery @EricOverfield - pixelmill.com
    39. 39. Time to Code it Up @EricOverfield - pixelmill.com
    40. 40. Frameworks  Pre-Built Responsive and Fluid Grids  Saves time and resources @EricOverfield - pixelmill.com  Many include extras  i.e. Collapsing navigation
    41. 41. Framework Drawbacks  May take time to learn framework  Not always SharePoint friendly @EricOverfield - pixelmill.com  Might not be the way “you” would do it But - can save a bunch of time
    42. 42. Twitter Bootstrap Zurb Foundation Skeleton Less Framework and so many more @EricOverfield - pixelmill.com
    43. 43. Coding Responsive Design  Responsive SharePoint at CodePlex  Free, Open Source Responsive SharePoint Frameworks  SharePoint 2013 Ready  http://responsivesharepoint.codeplex.com SharePoint and Responsive DesignPush NotificationsLet’s See a ComparisonResponsive Frameworks and SharePoint @EricOverfield - pixelmill.com
    44. 44. Mobile First  Build Mobile interface first  Forces us to concentrate on content  Helps control some resources @EricOverfield - pixelmill.com  Mobile Interface not great for entering content  Considerations needed for page editing  Cross-site publishing in SharePoint 2013?
    45. 45. Mobile First In Action @EricOverfield - pixelmill.com
    46. 46. Mobile First and IE8 / IE7  Will only load mobile view @EricOverfield - pixelmill.com  Fix with CSS Media Queries  JS Library: http://pxml.ly/zcw2jb2  So we need to use JS? <!--[if lt IE 9]> <sciprt src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script> <![endif]-->
    47. 47. Build to the Design not the Device @EricOverfield - pixelmill.com
    48. 48. Become Device Independent  Base breakpoints based on design  Allows for any device  Use a background image to help @EricOverfield - pixelmill.com  Temporary background image with columns  Start with 300 pixel block  Then 50 to 100 pixel columns through 1200 pixels total
    49. 49. SharePoint 2013 Helps @EricOverfield - pixelmill.com
    50. 50. Device Channels  New to SharePoint 2013  Interfaces tailored and maps to specific device(s)  Custom Master Pages per Channel  Custom DeviceChannelPanels  Change the order of content! @EricOverfield - pixelmill.com
    51. 51. Device Channels – An Example @EricOverfield - pixelmill.com
    52. 52. Eric’s Practical Tips to #SPRWD  Start with a framework @EricOverfield - pixelmill.com  Mobile first  Set your project expectations accordingly  Test your design on primary devices/browsers  Be sure you are very comfortable with CSS/HTML  Don’t stop learning (Responsive SharePoint?)
    53. 53. Build towards progress Perfection does not yet exist There is no silver bullet @EricOverfield - pixelmill.com
    54. 54. Resources "Responsive Web Design" by Ethan Marcotte http://pxml.ly/23fkmjd SharePoint 2010 Responsive Web design Template by Luis Kerr http://pxml.ly/xvr2ny v5, the Responsive HTML5 Master Page for SharePoint 2010 by Kyle Schaeffer http://pxml.ly/i3dbxre Ethan Marcotte’s 20 Favorite Responsive Designs http://pxml.ly/yqiyor Configure SharePoint Server 2010 for Mobile Device Access http://pxml.ly/vh3hhca html5shiv http://pxml.ly/uzcz32 Modernizr http://modernizr.com css3-mediaqueries-js http://pxml.ly/zcw2jb2 @EricOverfield - pixelmill.com Responsive Frameworks for SharePoint 2010 and 2013 http://responsivesharepoint.codeplex.com
    55. 55. Resources Twitter Bootstrap http://pxml.ly/d3qbekq Implementing Off Canvas Navigation http://pxml.ly/26ajefj Less Framework http://pxml.ly/y4wq8w Skeleton Framework http://pxml.ly/t2gkrft Zurb Foundation http://pxml.ly/wcxkqv @EricOverfield - pixelmill.com Order Your Copy http://pxml.ly/zsqykd “Pro SharePoint 2013 Branding and Responsive Web Development” (Apress – June 2013)
    56. 56. With Responsive Web Design Enhance SharePoint 2013 Thank You Eric Overfield @EricOverfield ericoverfield.com eoverfield@pixelmill.com