Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Enhance SharePoint 2013 with Responsive Web Design

6,723 views

Published on

Learn all about SharePoint 2013 and how to a better front end with Responsive Design Strategies and techniques

Published in: Technology, Design
  • ➤➤ How Long Does She Want You to Last? Here's the link to the FREE report ➤➤ https://tinyurl.com/rockhardxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ★★ How Long Does She Want You to Last? ★★ A recent study proved that the average man lasts just 2-5 minutes in bed (during intercourse). The study also showed that many women need at least 7-10 minutes of intercourse to reach "The Big O" - and, worse still... 30% of women never get there during intercourse. Clearly, most men are NOT fulfilling there women's needs in bed. Now, as I've said many times - how long you can last is no guarantee of being a GREAT LOVER. But, not being able to last 20, 30 minutes or more, is definitely a sign that you're not going to "set your woman's world on fire" between the sheets. Question is: "What can you do to last longer?" Well, one of the best recommendations I can give you today is to read THIS report. In it, you'll discover a detailed guide to an Ancient Taoist Thrusting Technique that can help any man to last much longer in bed. I can vouch 100% for the technique because my husband has been using it for years :) Here's the link to the report ◆◆◆ http://ishbv.com/rockhardx/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Enhance SharePoint 2013 with Responsive Web Design

  1. 1. Enhance SharePoint 2013 With Responsive Web Design Eric Overfield SharePoint Advocate and Enthusiast PixelMill http://pxml.ly/EO-SP2013-Responsive
  2. 2. Introduction – Eric Overfield  Founder and SharePoint Branding/UI Lead, PixelMill  Speaker, Teacher, Advocate  Author, SharePoint Community Organizer  Located in Davis, CA Co-author: “Pro SharePoint 2013 Branding and Responsive Web Development” (Apress – June 12th, 2013) Order Your Copy http://pxml.ly/zsqykd Co-author: “Black Magic Solutions for White Hat SharePoint” (August, 2013) ericoverfield.com @EricOverfield
  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. A Grid – In Action @EricOverfield - pixelmill.com
  6. 6. Fluid (Flexible) Comparison Let’s Notifications Push See a Grid i.e. 860 / 940 ~= 91.489361% @EricOverfield - pixelmill.com
  7. 7. FlexibleSee a Comparison Let’s Media Push Notifications @EricOverfield - pixelmill.com
  8. 8. Media QueriesComparison Let’s Notifications Push See a Added in CSS 2.1, Enhanced with CSS3 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; } } @EricOverfield - pixelmill.com
  9. 9. Responsive Design In Action @EricOverfield - pixelmill.com
  10. 10. @EricOverfield - pixelmill.com
  11. 11. @EricOverfield - pixelmill.com
  12. 12. The Mobile Revolution Who Cares? @EricOverfield - pixelmill.com
  13. 13. Not The Web @EricOverfield - pixelmill.com
  14. 14. Today’s Web @EricOverfield - pixelmill.com
  15. 15. And Tomorrow? Televisions? Cameras? Who Knows? Watches? Game Devices? Printers? Toasters? @EricOverfield - pixelmill.com
  16. 16. Business Insider conference presentation shows (Blodget & Cocotas, 2012) @EricOverfield - pixelmill.com
  17. 17. @EricOverfield - pixelmill.com
  18. 18. Mobile vs Desktop Traffic http://thenextweb.com/insider/2012/12/27/christmas-day-mixpanel-study-more-online-activity-on-mobile-devices/ @EricOverfield - pixelmill.com
  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. How All Devices Differ Screen Size Functionality Usability @EricOverfield - pixelmill.com
  21. 21. What About Mobile Apps? @EricOverfield - pixelmill.com
  22. 22. SharePoint Mobile Apps Freely Available: Third Party: SharePoint Newsfeed App SharePlus by Infragistics's Skydrive Pro App Briefcase by Colligo Mobile Entrée by H3 Solutions Filamente Mobile SharePoint App And more… @EricOverfield - pixelmill.com
  23. 23. Apps and RWD serve different purposes Apps -> particular function Mobile Collaboration Mobile Document Sharing / Offline Viewing RWD -> general site / portal Mobile Friendly Website @EricOverfield - pixelmill.com
  24. 24. Planning For Responsive Design @EricOverfield - pixelmill.com
  25. 25. Our Responsive Goals  Single site (i.e. no separate mobile)  Serve a variety of Viewports  And tailored to each viewport  Future Friendly @EricOverfield - pixelmill.com
  26. 26. Responsive Drawbacks  Desktop vs. Mobile content  Content order  Maybe SharePoint can help?  Device Channels  A lot more work @EricOverfield - pixelmill.com
  27. 27. Start with Content @EricOverfield - pixelmill.com
  28. 28. Mobile First Information Architecture Content Rollups Search Driven Content Content is King @EricOverfield - pixelmill.com
  29. 29. Design to the Extremes @EricOverfield - pixelmill.com
  30. 30. @EricOverfield - pixelmill.com
  31. 31. Navigation  Responsive Navigation the most difficult decision  SharePoint Navigation is not Responsive friendly  SharePoint relies on hover event / unfriendly HTML  Static Navigation vs. SharePoint Navigation  note: Custom Responsive Navigation will require JS/jQuery @EricOverfield - pixelmill.com
  32. 32. Responsive Navigation Floating Drop down Collapse Off Canvas Others? @EricOverfield - pixelmill.com
  33. 33. Floating Navigation @EricOverfield - pixelmill.com
  34. 34. Responsive Navigation Floating Drop down Collapse Off Canvas Others? @EricOverfield - pixelmill.com
  35. 35. Dropdown Navigation @EricOverfield - pixelmill.com
  36. 36. Responsive Navigation Floating Drop down Collapsing Off Canvas Others? @EricOverfield - pixelmill.com
  37. 37. Collapsing Navigation @EricOverfield - pixelmill.com
  38. 38. Responsive Navigation Floating Drop down Collapsing Off Canvas Others? @EricOverfield - pixelmill.com
  39. 39. Off Canvas Navigation @EricOverfield - pixelmill.com
  40. 40. Responsive Navigation Floating Drop down Collapsing Off Canvas Others? @EricOverfield - pixelmill.com
  41. 41. Hide and Cry Overlay Footer Navigation Global Navigation jQuery or no jQuery No two projects are the same @EricOverfield - pixelmill.com
  42. 42. Time to Code it Up @EricOverfield - pixelmill.com
  43. 43. Frameworks  Pre-Built Responsive and Fluid Grids  Saves time and resources  Many include extras  i.e. Collapsing navigation @EricOverfield - pixelmill.com
  44. 44. Framework Drawbacks  May take time to learn framework  Not always SharePoint friendly  Might notsavethe way “you” would do it But - can be a bunch of time @EricOverfield - pixelmill.com
  45. 45. Twitter Bootstrap Zurb Foundation Skeleton Less Framework and so many more @EricOverfield - pixelmill.com
  46. 46. Responsive Frameworks and SharePoint SharePoint Comparison Coding Responsive Design Design Let’s Notifications Push See a and Responsive  Responsive SharePoint at CodePlex  Free, Open Source Responsive SharePoint Frameworks  SharePoint 2013 Ready  http://responsivesharepoint.codeplex.com  SP Blueprint  http://spblueprint.codeplex.com/ @EricOverfield - pixelmill.com
  47. 47. Mobile First  Build Mobile interface first  Forces us to concentrate on content  Helps control some resources  Mobile Interface not great for entering content  May not be preferable with some development processes  Not IE7/IE8 friendly @EricOverfield - pixelmill.com
  48. 48. Mobile First In Action @EricOverfield - pixelmill.com
  49. 49. Mobile First and IE8 / IE7  Will only load mobile view  Fix with CSS Media Queries  JS Library: http://pxml.ly/zcw2jb2  So we need to use JS? <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script> <![endif]-->  Or an IE8- stylesheet <!--[if lt IE 9]> <link rel="stylesheet" type="text/css“ href=“/styles/styles-ie8.css” /> <![endif]--> @EricOverfield - pixelmill.com
  50. 50. Build to the Design not the Device @EricOverfield - pixelmill.com
  51. 51. Become Device Independent  Base breakpoints based on design  Allows for any device  Use a background image to help  Temporary background image with columns  Start with 300 pixel block  Then 50 to 100 pixel columns through 1200 pixels total @EricOverfield - pixelmill.com
  52. 52. SharePoint 2013 Helps @EricOverfield - pixelmill.com
  53. 53. 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
  54. 54. Device Channels – An Example @EricOverfield - pixelmill.com
  55. 55. Eric’s Practical Tips to #SPRWD  Start with a framework (Responsive SharePoint?)  Mobile first (most likely)  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 @EricOverfield - pixelmill.com
  56. 56. There is no silver bullet Build towards progress Perfection does not yet exist @EricOverfield - pixelmill.com
  57. 57. Resources "Responsive Web Design" by Ethan Marcotte http://pxml.ly/23fkmjd Ethan Marcotte’s 20 Favorite Responsive Designs http://pxml.ly/yqiyor v5, the Responsive HTML5 Master Page for SharePoint 2010 by Kyle Schaeffer http://pxml.ly/i3dbxre SharePoint 2010 Responsive Web design Template by Luis Kerr http://pxml.ly/xvr2ny Responsive Frameworks for SharePoint 2010 and 2013 http://responsivesharepoint.codeplex.com 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
  58. 58. Resources Twitter Bootstrap http://pxml.ly/d3qbekq Zurb Foundation http://pxml.ly/wcxkqv Skeleton Framework http://pxml.ly/t2gkrft Less Framework http://pxml.ly/y4wq8w Implementing Off Canvas Navigation http://pxml.ly/26ajefj “Pro SharePoint 2013 Branding and Responsive Web Development” (Apress – June 12th, 2013) Order Your Copy http://pxml.ly/zsqykd @EricOverfield - pixelmill.com
  59. 59. Enhance SharePoint 2013 With Responsive Web Design http://pxml.ly/EO-SP2013-Responsive Thank You Eric Overfield @EricOverfield ericoverfield.com eoverfield@pixelmill.com

×