1 / 61

Enhance SharePoint 2013 With Responsive Web Design

Enhance SharePoint 2013 With Responsive Web Design. Eric Overfield. With Responsive Web Design. Eric Overfield SharePoint Advocate and Enthusiast PixelMill. Enhance SharePoint 2013. http://pxml.ly/EO-SP2013-Responsive. Introduction – Eric Overfield.

jatin
Download Presentation

Enhance SharePoint 2013 With Responsive Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Enhance SharePoint 2013 With Responsive Web Design Eric Overfield

  2. With Responsive Web Design Eric Overfield SharePoint Advocate and Enthusiast PixelMill Enhance SharePoint 2013 http://pxml.ly/EO-SP2013-Responsive

  3. 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) ericoverfield.com Order Your Copy http://pxml.ly/zsqykd @EricOverfield Co-author: “Black Magic Solutions for White Hat SharePoint” (August, 2013)

  4. 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

  5. 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

  6. A Grid – In Action @EricOverfield - pixelmill.com

  7. Fluid (Flexible) Grid Push Notifications Let’s See a Comparison i.e. 860 / 940 ~= 91.489361% @EricOverfield - pixelmill.com

  8. Flexible Media Push Notifications Let’s See a Comparison @EricOverfield - pixelmill.com

  9. Media Queries Push Notifications Let’s See a Comparison 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

  10. Responsive Design In Action @EricOverfield - pixelmill.com

  11. @EricOverfield - pixelmill.com

  12. @EricOverfield - pixelmill.com

  13. The Mobile Revolution Who Cares? @EricOverfield - pixelmill.com

  14. Not The Web @EricOverfield - pixelmill.com

  15. Today’s Web @EricOverfield - pixelmill.com

  16. And Tomorrow? Televisions? ? ? Who Knows? Cameras? Watches? Printers? Game Devices? Toasters? @EricOverfield - pixelmill.com

  17. Business Insider conference presentation shows (Blodget & Cocotas, 2012) @EricOverfield - pixelmill.com

  18. @EricOverfield - pixelmill.com

  19. Mobile vs Desktop Traffic http://thenextweb.com/insider/2012/12/27/christmas-day-mixpanel-study-more-online-activity-on-mobile-devices/ @EricOverfield - pixelmill.com

  20. "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

  21. Screen SizeFunctionalityUsability How All Devices Differ @EricOverfield - pixelmill.com

  22. What About Mobile Apps? @EricOverfield - pixelmill.com

  23. SharePoint Mobile Apps Freely Available: SharePoint Newsfeed App SkydrivePro App Third Party: SharePlusby Infragistics's Briefcase by Colligo Mobile Entrée by H3 Solutions FilamenteMobile SharePoint App And more… @EricOverfield - pixelmill.com

  24. 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

  25. Planning For Responsive Design @EricOverfield - pixelmill.com

  26. 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

  27. Responsive Drawbacks • Desktop vs. Mobile content • Content order • Maybe SharePoint can help? • Device Channels • A lot more work @EricOverfield - pixelmill.com

  28. Start with Content @EricOverfield - pixelmill.com

  29. Mobile First Information Architecture Content Rollups Search Driven Content Content is King @EricOverfield - pixelmill.com

  30. Design to the Extremes @EricOverfield - pixelmill.com

  31. @EricOverfield - pixelmill.com

  32. 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

  33. FloatingDrop downCollapseOff CanvasOthers? Responsive Navigation FloatingDrop downCollapseOff CanvasOthers? @EricOverfield - pixelmill.com

  34. Floating Navigation @EricOverfield - pixelmill.com

  35. FloatingDrop downCollapseOff CanvasOthers? Responsive Navigation @EricOverfield - pixelmill.com

  36. Dropdown Navigation @EricOverfield - pixelmill.com

  37. FloatingDrop downCollapsingOff CanvasOthers? Responsive Navigation @EricOverfield - pixelmill.com

  38. Collapsing Navigation @EricOverfield - pixelmill.com

  39. FloatingDrop downCollapsingOff CanvasOthers? Responsive Navigation @EricOverfield - pixelmill.com

  40. Off Canvas Navigation @EricOverfield - pixelmill.com

  41. FloatingDrop downCollapsingOff CanvasOthers? Responsive Navigation @EricOverfield - pixelmill.com

  42. Hide and Cry Overlay Footer Navigation Global Navigation jQuery or no jQuery No two projects are the same @EricOverfield - pixelmill.com

  43. Time to Code it Up @EricOverfield - pixelmill.com

  44. Frameworks • Pre-Built Responsive and Fluid Grids • Saves time and resources • Many include extras • i.e. Collapsing navigation @EricOverfield - pixelmill.com

  45. Framework Drawbacks • May take time to learn framework • Not always SharePoint friendly • Might not be the way “you” would do it • But - can save a bunch of time @EricOverfield - pixelmill.com

  46. Twitter Bootstrap Zurb Foundation Skeleton Less Framework and so many more @EricOverfield - pixelmill.com

  47. Responsive Frameworks and SharePoint Coding Responsive Design SharePoint and Responsive Design Push Notifications Let’s See a Comparison • 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

  48. 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

  49. Mobile First In Action @EricOverfield - pixelmill.com

  50. 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

More Related