0
Enhance SharePoint 2013
With Responsive Web Design

Eric Overfield
SharePoint Advocate and Enthusiast
PixelMill

http://px...
Introduction – Eric Overfield
 Founder and SharePoint Branding/UI Lead, PixelMill
 Speaker, Teacher, Advocate
 Author, ...
What You Will Learn

 What is Responsive Web Design (RWD)
 Why Should We Use It
 Planning for Responsive Design
 Join ...
Responsive Web Design
 #2 trend for 2012 - .net Magazine

 Coined by Ethan Marcotte in May 2010
 Use fluid grids and fl...
A Grid – In Action

@EricOverfield - pixelmill.com
Fluid (Flexible) Comparison
Let’s Notifications
Push See a Grid

i.e. 860 / 940 ~= 91.489361%

@EricOverfield - pixelmill....
FlexibleSee a Comparison
Let’s Media
Push Notifications

@EricOverfield - pixelmill.com
Media QueriesComparison
Let’s Notifications
Push See a
Added in CSS 2.1, Enhanced with CSS3
Load a stylesheet in HTML:
<li...
Responsive Design
In Action

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

@EricOverfield - pixelmill.com
Not The Web

@EricOverfield - pixelmill.com
Today’s Web

@EricOverfield - pixelmill.com
And Tomorrow?
Televisions?

Cameras?

Who Knows?

Watches?
Game Devices?

Printers?
Toasters?
@EricOverfield - pixelmill.c...
Business Insider conference presentation shows (Blodget & Cocotas, 2012)

@EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
Mobile vs Desktop Traffic

http://thenextweb.com/insider/2012/12/27/christmas-day-mixpanel-study-more-online-activity-on-m...
"There’s a plethora of devices
out there with widely differing
abilities – it’s never been more
confusing or challenging t...
How All Devices Differ

Screen Size
Functionality

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

@EricOverfield - pixelmill.com
SharePoint Mobile Apps
Freely Available:

Third Party:

SharePoint Newsfeed App

SharePlus by Infragistics's

Skydrive Pro...
Apps and RWD serve different purposes
Apps -> particular function
Mobile Collaboration
Mobile Document Sharing / Offline V...
Planning For
Responsive Design

@EricOverfield - pixelmill.com
Our Responsive Goals
 Single site (i.e. no separate mobile)
 Serve a variety of Viewports
 And tailored to each viewpor...
Responsive Drawbacks
 Desktop vs. Mobile content
 Content order
 Maybe SharePoint can help?
 Device Channels

 A lot ...
Start with Content

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

to the

Extremes

@EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
Navigation
 Responsive Navigation the most difficult decision
 SharePoint Navigation is not Responsive friendly
 ShareP...
Responsive Navigation

Floating

Drop down
Collapse
Off Canvas

Others?
@EricOverfield - pixelmill.com
Floating Navigation

@EricOverfield - pixelmill.com
Responsive Navigation

Floating

Drop down
Collapse
Off Canvas

Others?
@EricOverfield - pixelmill.com
Dropdown Navigation

@EricOverfield - pixelmill.com
Responsive Navigation

Floating
Drop down
Collapsing
Off Canvas

Others?
@EricOverfield - pixelmill.com
Collapsing Navigation

@EricOverfield - pixelmill.com
Responsive Navigation

Floating
Drop down
Collapsing
Off Canvas

Others?
@EricOverfield - pixelmill.com
Off Canvas Navigation

@EricOverfield - pixelmill.com
Responsive Navigation

Floating
Drop down
Collapsing
Off Canvas

Others?
@EricOverfield - pixelmill.com
Hide and Cry
Overlay
Footer Navigation
Global Navigation
jQuery or no jQuery
No two projects are the same
@EricOverfield -...
Time to
Code it Up

@EricOverfield - pixelmill.com
Frameworks
 Pre-Built Responsive and Fluid Grids
 Saves time and resources
 Many include extras
 i.e. Collapsing navig...
Framework Drawbacks
 May take time to learn framework
 Not always SharePoint friendly
 Might notsavethe way “you” would...
Twitter Bootstrap
Zurb Foundation
Skeleton
Less Framework

and so many more
@EricOverfield - pixelmill.com
Responsive Frameworks and SharePoint
SharePoint Comparison
Coding Responsive Design Design
Let’s Notifications
Push See a ...
Mobile First
 Build Mobile interface first

 Forces us to concentrate on content
 Helps control some resources

 Mobil...
Mobile First In Action

@EricOverfield - pixelmill.com
Mobile First and IE8 / IE7
 Will only load mobile view

 Fix with CSS Media Queries
 JS Library: http://pxml.ly/zcw2jb2...
Build to the Design
not the Device

@EricOverfield - pixelmill.com
Become Device Independent
 Base breakpoints based on design

 Allows for any device
 Use a background image to help

 ...
SharePoint 2013 Helps

@EricOverfield - pixelmill.com
Device Channels
 New to SharePoint 2013

 Interfaces tailored and maps to specific device(s)
 Custom Master Pages per C...
Device Channels – An Example

@EricOverfield - pixelmill.com
Eric’s Practical Tips to #SPRWD
 Start with a framework (Responsive SharePoint?)
 Mobile first (most likely)

 Set your...
There is no silver bullet

Build towards progress
Perfection does not yet exist
@EricOverfield - pixelmill.com
Resources
"Responsive Web Design" by Ethan Marcotte
http://pxml.ly/23fkmjd
Ethan Marcotte’s 20 Favorite Responsive Designs...
Resources
Twitter Bootstrap
http://pxml.ly/d3qbekq
Zurb Foundation
http://pxml.ly/wcxkqv
Skeleton Framework
http://pxml.ly...
Enhance SharePoint 2013
With Responsive Web Design
http://pxml.ly/EO-SP2013-Responsive

Thank You
Eric Overfield
@EricOver...
Upcoming SlideShare
Loading in...5
×

Enhance SharePoint 2013 with Responsive Web Design

5,294

Published on

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

Published in: Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,294
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
84
Comments
0
Likes
4
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 is a plus
  • Mobile first can be difficult for traditional developers to embrace and goes against legacy design strategies / stakeholders
  • Will spend some time on this.
  • Mississippi Department of IT
  • Not solved yetI don’t like current JS fixesUse custom classes and JS for IE8For IE8 targeted projects, mobile first doesn’t make sense
  • 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&apos;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&apos;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
  • Transcript of "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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×