Presentation is loading. Please wait.

Presentation is loading. Please wait.

Enhance SharePoint 2013 With Responsive Web Design Enhance SharePoint 2013 With Responsive Web Design Eric Overfield.

Similar presentations


Presentation on theme: "Enhance SharePoint 2013 With Responsive Web Design Enhance SharePoint 2013 With Responsive Web Design Eric Overfield."— Presentation transcript:

1 Enhance SharePoint 2013 With Responsive Web Design Enhance SharePoint 2013 With Responsive Web Design Eric Overfield

2 With Responsive Web Design Eric Overfield SharePoint Advocate and Enthusiast PixelMill Enhance SharePoint 2013

3 Introduction – Eric Overfield  Founder and SharePoint Branding/UI Lead, PixelMill  Speaker, Teacher, Advocate  Author, SharePoint Community Organizer  Located in Davis, CA Order Your Copy Co-author: “Pro SharePoint 2013 Branding and Responsive Web Development” (Apress – June 12 th, 2013) 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 - pixelmill.com

5 Responsive Web Design  #2 trend for 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 - pixelmill.com

6 A Grid – In Action

7 Push NotificationsLet’s See a Comparison Fluid (Flexible) - pixelmill.com i.e. 860 / 940 ~= %

8 Push NotificationsLet’s See a Comparison Flexible - pixelmill.com

9 Push NotificationsLet’s See a Comparison Media - pixelmill.com Load a stylesheet in HTML: Media Queries in a screen and (min-width: 768px) { #banner { display: block; } Added in CSS 2.1, Enhanced with CSS3

10 Responsive Design In - pixelmill.com

11

12

13 Who - pixelmill.com The Mobile Revolution

14 Not The - pixelmill.com

15 Today’s - pixelmill.com

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

17 Business Insider conference presentation shows (Blodget & Cocotas, 2012)

18 @EricOverfield - pixelmill.com

19 - pixelmill.com Mobile vs Desktop Traffic

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 - pixelmill.com

21 Screen Size Functionality Usability How All Devices - pixelmill.com

22 What About Mobile - pixelmill.com

23 SharePoint Mobile Apps Freely Available: SharePoint Newsfeed App Skydrive Pro - pixelmill.com Third Party: SharePlus by Infragistics's Briefcase by Colligo Mobile Entrée by H3 Solutions Filamente Mobile SharePoint App And more…

24 Apps and RWD serve different - pixelmill.com Apps -> particular function Mobile Collaboration Mobile Document Sharing / Offline Viewing RWD -> general site / portal Mobile Friendly Website

25 Planning For Responsive - pixelmill.com

26 Our Responsive Goals  Single site  Serve a variety of Viewports  And tailored to each - pixelmill.com  Future Friendly (i.e. no separate mobile)

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

28 Start with - pixelmill.com

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

30 Design - pixelmill.com to the

31 @EricOverfield - pixelmill.com

32 Navigation  Responsive Navigation the most difficult decision  SharePoint Navigation is not Responsive - pixelmill.com  SharePoint relies on hover event / unfriendly HTML  Static Navigation vs. SharePoint Navigation  note: Custom Responsive Navigation will require JS/jQuery

33 Floating Drop down Collapse Off Canvas Others? Responsive - pixelmill.com

34 Floating Navigation

35 Floating Drop down Collapse Off Canvas Others? Responsive - pixelmill.com

36 Dropdown Navigation

37 Floating Drop down Collapsing Off Canvas Others? Responsive - pixelmill.com

38 Collapsing Navigation

39 Floating Drop down Collapsing Off Canvas Others? Responsive - pixelmill.com

40 Off Canvas Navigation

41 Floating Drop down Collapsing Off Canvas Others? Responsive - pixelmill.com

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

43 Time to Code it - pixelmill.com

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

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

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

47 Coding Responsive Design  Responsive SharePoint at CodePlex  Free, Open Source Responsive SharePoint Frameworks  SharePoint 2013 Ready   SP Blueprint  SharePoint and Responsive DesignPush NotificationsLet’s See a Comparison Responsive Frameworks and - pixelmill.com

48 Mobile First  Build Mobile interface first  Forces us to concentrate on content  Helps control some - pixelmill.com  Mobile Interface not great for entering content  May not be preferable with some development processes  Not IE7/IE8 friendly

49 Mobile First In - pixelmill.com

50 Mobile First and IE8 / IE7  Will only load mobile - pixelmill.com  Fix with CSS Media Queries  JS Library:  So we need to use JS?  Or an IE8- stylesheet

51 Build to the Design not the - pixelmill.com

52 Become Device Independent  Base breakpoints based on design  Allows for any device  Use a background image to - pixelmill.com  Temporary background image with columns  Start with 300 pixel block  Then 50 to 100 pixel columns through 1200 pixels total

53 SharePoint pixelmill.com

54 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 - pixelmill.com

55 Device Channels – An - pixelmill.com

56 - pixelmill.com

57 Eric’s Practical Tips to #SPRWD  Start with a - pixelmill.com  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 (Responsive SharePoint?)

58 Build towards progress Perfection does not yet exist There is no silver - pixelmill.com

59 Resources "Responsive Web Design" by Ethan Marcotte Responsive Frameworks for SharePoint 2010 and SharePoint 2010 Responsive Web design Template by Luis Kerr v5, the Responsive HTML5 Master Page for SharePoint 2010 by Kyle Schaeffer Ethan Marcotte’s 20 Favorite Responsive Designs Configure SharePoint Server 2010 for Mobile Device Access html5shiv Modernizr css3-mediaqueries-js - pixelmill.com

60 Resources Twitter Bootstrap Implementing Off Canvas Navigation Less Framework Skeleton Framework Zurb Foundation - pixelmill.com Order Your Copy “Pro SharePoint 2013 Branding and Responsive Web Development” (Apress – June 12 th, 2013)

61 With Responsive Web Design Enhance SharePoint 2013 Thank You Eric ericoverfield.com

62 Special Thanks to our Platinum Sponsor …and our Gold Sponsor


Download ppt "Enhance SharePoint 2013 With Responsive Web Design Enhance SharePoint 2013 With Responsive Web Design Eric Overfield."

Similar presentations


Ads by Google