With Responsive Web Design
Eric Overfield
SharePoint Advocate and Enthusiast
PixelMill
Enhance SharePoint 2013
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 R...
Responsive Web Design
 #2 trend for 2012 - .net Magazine
 Coined by Ethan Marcotte in May 2010
 Use fluid grids and fle...
Push NotificationsLet’s See a ComparisonFluid (Flexible) Grid
@EricOverfield - pixelmill.com
i.e. 860 / 940 ~= 91.489361%
@EricOverfield - pixelmill.com
The Grid – In Action
Push NotificationsLet’s See a ComparisonFlexible Media
@EricOverfield - pixelmill.com
Push NotificationsLet’s See a ComparisonMedia Queries
@EricOverfield - pixelmill.com
Load a stylesheet in HTML:
<link rel=...
Responsive Design
In Action
@EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
Who Cares?
@EricOverfield - pixelmill.com
The Mobile Revolution
Not The Web
@EricOverfield - pixelmill.com
Today’s Web
@EricOverfield - pixelmill.com
And Tomorrow?
Watches?
Game Devices?
Printers?
Who Knows?
Toasters?
Televisions?
Cameras?
@EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
Business Insider conference presentation shows (Blodget & Cocotas, 2012)
@EricOverfield - pixelmill.com
http://thenextweb.com/insider/2012/12/27/christmas-day-mixpanel-study-more-online-activity-on-mobile-devices/
@EricOverfie...
"There’s a plethora of devices
out there with widely differing
abilities – it’s never been more
confusing or challenging t...
Screen Size
Functionality
Usability
How All Devices Differ
@EricOverfield - pixelmill.com
Planning For
Responsive Design
@EricOverfield - pixelmill.com
Our Responsive Goals
 Single site
 Serve a variety of Viewports
@EricOverfield - pixelmill.com
 Future Friendly
(i.e. n...
Responsive Drawbacks
 Desktop vs. Mobile content
 Content order
@EricOverfield - pixelmill.com
 Maybe SharePoint can he...
Start with Content
@EricOverfield - pixelmill.com
Mobile First
Information Architecture
Content Rollups
Search Driven Content
Content is King
@EricOverfield - pixelmill.com
Design
Extremes
@EricOverfield - pixelmill.com
to the
@EricOverfield - pixelmill.com
Navigation
 Responsive Navigation the most difficult decision
 SharePoint Navigation is not Responsive friendly
@EricOve...
Floating
Drop down
Collapse
Off Canvas
Others?
Floating
Drop down
Collapse
Off Canvas
Others?
Responsive Navigation
@EricO...
@EricOverfield - pixelmill.com
Floating Navigation
Floating
Drop down
Collapse
Off Canvas
Others?
Responsive Navigation
@EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
Dropdown Navigation
Floating
Drop down
Collapsing
Off Canvas
Others?
Responsive Navigation
@EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
Collapsing Navigation
Floating
Drop down
Collapsing
Off Canvas
Others?
Responsive Navigation
@EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
Off Canvas Navigation
Floating
Drop down
Collapsing
Off Canvas
Others?
Responsive Navigation
@EricOverfield - pixelmill.com
No two projects are the same
Hide and Cry
Overlay
Footer Navigation
Global Navigation
jQuery or no jQuery
@EricOverfield -...
Time to
Code it Up
@EricOverfield - pixelmill.com
Frameworks
 Pre-Built Responsive and Fluid Grids
 Saves time and resources
@EricOverfield - pixelmill.com
 Many include...
Framework Drawbacks
 May take time to learn framework
 Not always SharePoint friendly
@EricOverfield - pixelmill.com
 M...
Twitter Bootstrap
Zurb Foundation
Skeleton
Less Framework
and so many more
@EricOverfield - pixelmill.com
Coding Responsive Design
 Responsive SharePoint at CodePlex
 Free, Open Source Responsive SharePoint Frameworks
 ShareP...
Mobile First
 Build Mobile interface first
 Forces us to concentrate on content
 Helps control some resources
@EricOver...
Mobile First In Action
@EricOverfield - pixelmill.com
Mobile First and IE8 / IE7
 Will only load mobile view
@EricOverfield - pixelmill.com
 Fix with CSS Media Queries
 JS L...
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
@Eri...
SharePoint 2013 Helps
@EricOverfield - pixelmill.com
Device Channels
 New to SharePoint 2013
 Interfaces tailored and maps to specific device(s)
 Custom Master Pages per Ch...
Device Channels – An Example
@EricOverfield - pixelmill.com
Eric’s Practical Tips to #SPRWD
 Start with a framework
@EricOverfield - pixelmill.com
 Mobile first
 Set your project ...
Build towards progress
Perfection does not yet exist
There is no silver bullet
@EricOverfield - pixelmill.com
Resources
"Responsive Web Design" by Ethan Marcotte
http://pxml.ly/23fkmjd
SharePoint 2010 Responsive Web design Template ...
Resources
Twitter Bootstrap
http://pxml.ly/d3qbekq
Implementing Off Canvas Navigation
http://pxml.ly/26ajefj
Less Framewor...
With Responsive Web Design
Enhance SharePoint 2013
Thank You
Eric Overfield
@EricOverfield
ericoverfield.com
eoverfield@pi...
Upcoming SlideShare
Loading in...5
×

Enhance SharePoint 2013 with Responsive Web Design

10,165

Published on

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

Published in: Education, Technology, Design
2 Comments
3 Likes
Statistics
Notes
  • Excellent presentation & summary.
    Thanks, Eric!
       Reply 
    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.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
10,165
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
204
Comments
2
Likes
3
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&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
  • 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
    1. Gostou de algum slide específico?

      Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

    ×