SlideShare a Scribd company logo
With Responsive Web Design
Eric Overfield
SharePoint Advocate and Enthusiast
PixelMill
Enhance SharePoint
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)
What You Will Learn
 The What and Why of Responsive Web Design (RWD)
 Planning for Responsive Design
 Join Response Web Design and SharePoint
 SharePoint 2013 Considerations
@EricOverfield - pixelmill.com
Responsive Web Design
 A “new-ish” web design methodology
 Addresses growing number of Internet devices
 Tailored experience for any device
 Limit resizing, panning and scrolling
@EricOverfield - pixelmill.com
 The Key: All devices load the same page
@EricOverfield - pixelmill.com
Progressive
Enhancement
Graceful
Degradation
Adaptive WebDesign
Responsive WebDesign Desktop FirstMobile First
Related Terms
Why We Need It
@EricOverfield - pixelmill.com
So Many Different Devices
 Screen size (viewport, proportions, resolution)
 Functionality (clicks, hover, touch, swipe…)
 Usability (can your site be used on any device?)
@EricOverfield - pixelmill.com
"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
Responsive Design
In Action
@EricOverfield - pixelmill.com
Fundamentals of RWD
@EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
The 3 Pillars of Responsive Web Design
Fluid Grid – Flexible Media – CSS3 Media Queries
@EricOverfield - pixelmill.com
Fluid Grid
Push NotificationsLet’s See a ComparisonFlexible Media
@EricOverfield - pixelmill.com
 Flexible Images
 Flexible Video
 Proportional Text
Push NotificationsLet’s See a ComparisonMedia Queries
@EricOverfield - pixelmill.com
In-Line Media Query:
<link rel="stylesheet" media="screen and (min-width: 768px)" href=“tablet.css" />
<link rel="stylesheet" media="screen and (max-width: 599px)" href=“small.css" />
Media Query in a Stylesheet
@media screen and (min-width: 768px) {
#banner {
display: block;
}
}
Added in CSS 2.1, Enhanced with CSS3
Device ability to handle orientation
Beyond the Pillars
@EricOverfield - pixelmill.com
Navigation
 How will your navigation adapt to different viewports
 Responsive navigation may require thought
 Only basic SharePoint OOTB navigation is RWD friendly
 Multi-level SP OOTB navigation relies on hover
@EricOverfield - pixelmill.com
Example RWD
Navigation - Collapsing
@EricOverfield - pixelmill.com
Mobile First
 Build and code mobile interface first
 Mobile friendly – progressively enhance
 Forces us to concentrate on content
 *Caveats for IE8
@EricOverfield - pixelmill.com
Mobile First
In Action
@EricOverfield - pixelmill.com
Planning For
Responsive Design
@EricOverfield - pixelmill.com
Begin With Site Planning
 This should be familiar...
 Start with content / site purpose
 Sitemap
 Information Architecture
 What’s different…
 Wireframing – including for mobile devices
 High fidelity mockups – including for mobile devices
Design to the extremes, then fill in the gaps
@EricOverfield - pixelmill.com
Always Remember SharePoint
 What will be a part of the Master Page
 How will Page Layout content be defined
 How will you handle navigation
 Will you include the quick launch on all pages
@EricOverfield - pixelmill.com
Responsive Friendly
Wireframes and Mockups
@EricOverfield - pixelmill.com
Time to Code it Up
A HTML Prototype
@EricOverfield - pixelmill.com
Your Own Grid Vs Existing Framework
 Pre-built responsive and fluid grids
 Saves time and resources
 Many includes extras
 i.e. collapsing navigation
@EricOverfield - pixelmill.com
Frameworks Pluses and Minuses
 May take time to learn framework
 Not always SharePoint ready OOTB
 Can save you a bunch of time!
@EricOverfield - pixelmill.com
Twitter Bootstrap
Zurb Foundation
Skeleton
Less Framework
and so many more
@EricOverfield - pixelmill.com
A Responsive
HTML Prototype
@EricOverfield - pixelmill.com
Joining RWD
And SharePoint
@EricOverfield - pixelmill.com
Convert Key Components to SharePoint
 Distill page into Master Page and Page Layout(s)
 Fix framework to work with SharePoint
 Or use pre-converted RWD framework for SharePoint
 Add SharePoint controls, snippets (2013) and navigation
@EricOverfield - pixelmill.com
Convert a Responsive
Prototype to SharePoint
@EricOverfield - pixelmill.com
https://sprwd-public.sharepoint.com/
A Quick Review
 The What and Why of Responsive Web Design (RWD)
 Planning for Responsive Design
 Join Response Web Design and SharePoint
@EricOverfield - pixelmill.com
Coding Responsive Design
 Responsive SharePoint at CodePlex
 Free, Open Source Responsive SharePoint Frameworks
 SharePoint 2010/2013 Ready
 http://responsivesharepoint.codeplex.com
 SP Blueprint (SharePoint 2013)
 SharePoint 2013 responsive framework
 A lean, custom grid
 http://spblueprint.codeplex.com/
SharePoint and Responsive DesignPush NotificationsLet’s See a ComparisonResponsive Frameworks and SharePoint
@EricOverfield - pixelmill.com
Mobile First and IE8 / IE7
 Will only load mobile view
@EricOverfield - pixelmill.com
 Fix with CSS Media Queries
 JS Library: http://pxml.ly/zcw2jb2 (Among others)
 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]-->
And SharePoint 2013?
@EricOverfield - pixelmill.com
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
Device Channels – An Example
@EricOverfield - pixelmill.com
Eric’s Practical Tips to #SPRWD
 Use a prebuilt framework (SharePoint ready)
 Set project budget, deliverables and expectations accordingly
 Develop for the real world (will mobile users need to edit pages?)
 Don’t break SharePoint!*
 Mobile first (with caveats)
 Be sure you are very comfortable with CSS/HTML
 Test, and test, and test some more
 Train content authors! RWD relies on groomed content.
@EricOverfield - pixelmill.com
Resources
"Responsive Web Design" by Ethan Marcotte
http://pxml.ly/23fkmjd
Responsive Frameworks for SharePoint 2010 and 2013
http://responsivesharepoint.codeplex.com
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
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 12th, 2013)
With Responsive Web Design
Enhance SharePoint
Thank You
Eric Overfield
@EricOverfield
ericoverfield.com
eoverfield@pixelmill.com

More Related Content

PPT
Reshaping SharePoint for Evolving Internet Devices
PPT
SharePoint Branding - Change Your Look
PPTX
The Design Dilemma of Mobile and SharePoint
PPTX
Shape SharePoint 2013 for Mobile
PPTX
The Design Dilemma of Mobile and SharePoint
PPTX
Enhance SharePoint with Responsive Web Design
PPTX
SharePoint 2013 Design manager – from HTML to SharePoint
PPTX
The 2013 Design Manager - From HTML to SharePoint
Reshaping SharePoint for Evolving Internet Devices
SharePoint Branding - Change Your Look
The Design Dilemma of Mobile and SharePoint
Shape SharePoint 2013 for Mobile
The Design Dilemma of Mobile and SharePoint
Enhance SharePoint with Responsive Web Design
SharePoint 2013 Design manager – from HTML to SharePoint
The 2013 Design Manager - From HTML to SharePoint

What's hot (20)

PPTX
Enhance SharePoint 2013 with Responsive Web Design
PPTX
Enhance SharePoint 2013 with Responsive Web Design
PPTX
Enhancing SharePoint with Responsive Web Design
PPTX
Your SharePoint 2013 Branding Initiation
PPT
Enhancing SharePoint with Responsive Web Design
PPTX
Fulfilling the promise of Responsive Design with SharePoint 2013
PPTX
SharePoint master pages in 2013 and managed metadata magic
PDF
Flatworld Edge Brochure
PPT
Branding SharePoint for Evolving Internet Devices
PPTX
The Future of SharePoint - What You Need to Know
PPTX
Broaden your dev skillset with SharePoint branding options
PPTX
Branding SharePoint from Prototype to Deployment - Workshop
PPTX
Microsoft Ignite 2016 In Review
PPTX
Uncovering the Latest in SharePoint Development
PPTX
Branding Modern SharePoint
PPTX
Responsive Design for SharePoint
PPT
Results from our survey of UI/UX needs
PPTX
Sitecore Experience Accelerator (SxA)
PPTX
SXA in action
PDF
Branding Deployment in Office 365 and SharePoint 2013/2016
Enhance SharePoint 2013 with Responsive Web Design
Enhance SharePoint 2013 with Responsive Web Design
Enhancing SharePoint with Responsive Web Design
Your SharePoint 2013 Branding Initiation
Enhancing SharePoint with Responsive Web Design
Fulfilling the promise of Responsive Design with SharePoint 2013
SharePoint master pages in 2013 and managed metadata magic
Flatworld Edge Brochure
Branding SharePoint for Evolving Internet Devices
The Future of SharePoint - What You Need to Know
Broaden your dev skillset with SharePoint branding options
Branding SharePoint from Prototype to Deployment - Workshop
Microsoft Ignite 2016 In Review
Uncovering the Latest in SharePoint Development
Branding Modern SharePoint
Responsive Design for SharePoint
Results from our survey of UI/UX needs
Sitecore Experience Accelerator (SxA)
SXA in action
Branding Deployment in Office 365 and SharePoint 2013/2016
Ad

Viewers also liked (20)

PPTX
Academy PRO: ES2015
PPTX
Now You're Speaking My Language!
PDF
Binary bracelets
PPT
03. language of computer &amp; translators
PDF
iOS vs. Android — In Numbers and Style
PPTX
Apple vs Samsung - What do you know?
PPT
Machine language
PDF
An Introduction to Computer Assisted Language Learning (CALL) 中間発表
PPT
Binary code - Beginning
PPT
Apple vs samsung
PPTX
Android Vs iOS
PPTX
ppt on android vs iOS
PPT
Presentation on generation of languages
PPTX
Android vs iOS
PPTX
Ios vs android
PPT
Computer languages
PPT
Computer languages 11
PPT
Binary code
PPTX
Deconstruction
PPT
Lect 1. introduction to programming languages
Academy PRO: ES2015
Now You're Speaking My Language!
Binary bracelets
03. language of computer &amp; translators
iOS vs. Android — In Numbers and Style
Apple vs Samsung - What do you know?
Machine language
An Introduction to Computer Assisted Language Learning (CALL) 中間発表
Binary code - Beginning
Apple vs samsung
Android Vs iOS
ppt on android vs iOS
Presentation on generation of languages
Android vs iOS
Ios vs android
Computer languages
Computer languages 11
Binary code
Deconstruction
Lect 1. introduction to programming languages
Ad

Similar to Enhancing SharePoint with Responsive Web Design (20)

PPTX
Shape SharePoint 2013 for Mobile
PPTX
Beyond Branding SharePoint - SharePoint and Today's Web
PPTX
SEF 2014 - Responsive Design in SharePoint 2013
PDF
Responsive design SharePoint
PDF
Spca2014 introduction responsive master page niaulin
PPTX
Branding 101
PPTX
Responsive Web Design ~ Best Practices for Maximizing ROI
PDF
Responsive Design
PDF
Introduction to a Responsive Master Page with the Design Manager
PDF
Responsive Web Design - more than just a buzzword
PPTX
Using Responsive Web Design To Make Your Web Work Everywhere
PPTX
Responsive web design
PDF
Responsive Web Designed for your communication and marketing needs
PDF
Module 08: Responsive Web Design
PPTX
Using Responsive Web Design To Make Your Web Work Everywhere
PDF
Responsive Design Essentials
PDF
Responsive Web Design
PPTX
The A to Z of Building a Responsive SharePoint Site with Bootstrap
PDF
Responsive web - CC FE & UX
PPT
Mobile Monday Presentation: Responsive Web Design
Shape SharePoint 2013 for Mobile
Beyond Branding SharePoint - SharePoint and Today's Web
SEF 2014 - Responsive Design in SharePoint 2013
Responsive design SharePoint
Spca2014 introduction responsive master page niaulin
Branding 101
Responsive Web Design ~ Best Practices for Maximizing ROI
Responsive Design
Introduction to a Responsive Master Page with the Design Manager
Responsive Web Design - more than just a buzzword
Using Responsive Web Design To Make Your Web Work Everywhere
Responsive web design
Responsive Web Designed for your communication and marketing needs
Module 08: Responsive Web Design
Using Responsive Web Design To Make Your Web Work Everywhere
Responsive Design Essentials
Responsive Web Design
The A to Z of Building a Responsive SharePoint Site with Bootstrap
Responsive web - CC FE & UX
Mobile Monday Presentation: Responsive Web Design

More from Eric Overfield (11)

PPTX
The Adventures of Azure Functions and Microsoft Graph
PPTX
All You Need to Know for Automated SharePoint Site Provisioning with PnP Powe...
PPTX
Use Office UI Fabric React to Build Beauty with SharePoint
PPTX
Supercharge Your SharePoint Framework Webpart with React
PPTX
Build Your First SharePoint Framework Webpart
PPTX
Use office ui fabric react to build beauty with SharePoint
PPTX
Move past bootstrap and build our lightweight responsive framework w.v1.2
PPTX
Who Needs A Developer For Automated SharePoint Provisioning
PPTX
Create your own SharePoint Master Pages and Page Layouts
PPTX
Share point 2013 apps and i mean it
PPTX
Integrating Search Driven Content in SharePoint 2013/2016/O365
The Adventures of Azure Functions and Microsoft Graph
All You Need to Know for Automated SharePoint Site Provisioning with PnP Powe...
Use Office UI Fabric React to Build Beauty with SharePoint
Supercharge Your SharePoint Framework Webpart with React
Build Your First SharePoint Framework Webpart
Use office ui fabric react to build beauty with SharePoint
Move past bootstrap and build our lightweight responsive framework w.v1.2
Who Needs A Developer For Automated SharePoint Provisioning
Create your own SharePoint Master Pages and Page Layouts
Share point 2013 apps and i mean it
Integrating Search Driven Content in SharePoint 2013/2016/O365

Recently uploaded (20)

PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
PPTX
MYSQL Presentation for SQL database connectivity
DOCX
The AUB Centre for AI in Media Proposal.docx
PDF
Unlocking AI with Model Context Protocol (MCP)
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
PPTX
A Presentation on Artificial Intelligence
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
PDF
Machine learning based COVID-19 study performance prediction
PDF
Chapter 3 Spatial Domain Image Processing.pdf
PDF
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
PPT
Teaching material agriculture food technology
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
PDF
Spectral efficient network and resource selection model in 5G networks
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
PDF
Encapsulation theory and applications.pdf
PPTX
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
PDF
Approach and Philosophy of On baking technology
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
MYSQL Presentation for SQL database connectivity
The AUB Centre for AI in Media Proposal.docx
Unlocking AI with Model Context Protocol (MCP)
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
Agricultural_Statistics_at_a_Glance_2022_0.pdf
A Presentation on Artificial Intelligence
Diabetes mellitus diagnosis method based random forest with bat algorithm
Machine learning based COVID-19 study performance prediction
Chapter 3 Spatial Domain Image Processing.pdf
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
Teaching material agriculture food technology
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
Reach Out and Touch Someone: Haptics and Empathic Computing
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Spectral efficient network and resource selection model in 5G networks
Digital-Transformation-Roadmap-for-Companies.pptx
Encapsulation theory and applications.pdf
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
Approach and Philosophy of On baking technology

Enhancing SharePoint with Responsive Web Design

  • 1. With Responsive Web Design Eric Overfield SharePoint Advocate and Enthusiast PixelMill Enhance SharePoint
  • 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. What You Will Learn  The What and Why of Responsive Web Design (RWD)  Planning for Responsive Design  Join Response Web Design and SharePoint  SharePoint 2013 Considerations @EricOverfield - pixelmill.com
  • 4. Responsive Web Design  A “new-ish” web design methodology  Addresses growing number of Internet devices  Tailored experience for any device  Limit resizing, panning and scrolling @EricOverfield - pixelmill.com  The Key: All devices load the same page
  • 5. @EricOverfield - pixelmill.com Progressive Enhancement Graceful Degradation Adaptive WebDesign Responsive WebDesign Desktop FirstMobile First Related Terms
  • 6. Why We Need It @EricOverfield - pixelmill.com
  • 7. So Many Different Devices  Screen size (viewport, proportions, resolution)  Functionality (clicks, hover, touch, swipe…)  Usability (can your site be used on any device?) @EricOverfield - pixelmill.com
  • 8. "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
  • 11. @EricOverfield - pixelmill.com The 3 Pillars of Responsive Web Design Fluid Grid – Flexible Media – CSS3 Media Queries
  • 13. Push NotificationsLet’s See a ComparisonFlexible Media @EricOverfield - pixelmill.com  Flexible Images  Flexible Video  Proportional Text
  • 14. Push NotificationsLet’s See a ComparisonMedia Queries @EricOverfield - pixelmill.com In-Line Media Query: <link rel="stylesheet" media="screen and (min-width: 768px)" href=“tablet.css" /> <link rel="stylesheet" media="screen and (max-width: 599px)" href=“small.css" /> Media Query in a Stylesheet @media screen and (min-width: 768px) { #banner { display: block; } } Added in CSS 2.1, Enhanced with CSS3 Device ability to handle orientation
  • 16. Navigation  How will your navigation adapt to different viewports  Responsive navigation may require thought  Only basic SharePoint OOTB navigation is RWD friendly  Multi-level SP OOTB navigation relies on hover @EricOverfield - pixelmill.com
  • 17. Example RWD Navigation - Collapsing @EricOverfield - pixelmill.com
  • 18. Mobile First  Build and code mobile interface first  Mobile friendly – progressively enhance  Forces us to concentrate on content  *Caveats for IE8 @EricOverfield - pixelmill.com
  • 21. Begin With Site Planning  This should be familiar...  Start with content / site purpose  Sitemap  Information Architecture  What’s different…  Wireframing – including for mobile devices  High fidelity mockups – including for mobile devices Design to the extremes, then fill in the gaps @EricOverfield - pixelmill.com
  • 22. Always Remember SharePoint  What will be a part of the Master Page  How will Page Layout content be defined  How will you handle navigation  Will you include the quick launch on all pages @EricOverfield - pixelmill.com
  • 23. Responsive Friendly Wireframes and Mockups @EricOverfield - pixelmill.com
  • 24. Time to Code it Up A HTML Prototype @EricOverfield - pixelmill.com
  • 25. Your Own Grid Vs Existing Framework  Pre-built responsive and fluid grids  Saves time and resources  Many includes extras  i.e. collapsing navigation @EricOverfield - pixelmill.com
  • 26. Frameworks Pluses and Minuses  May take time to learn framework  Not always SharePoint ready OOTB  Can save you a bunch of time! @EricOverfield - pixelmill.com
  • 27. Twitter Bootstrap Zurb Foundation Skeleton Less Framework and so many more @EricOverfield - pixelmill.com
  • 30. Convert Key Components to SharePoint  Distill page into Master Page and Page Layout(s)  Fix framework to work with SharePoint  Or use pre-converted RWD framework for SharePoint  Add SharePoint controls, snippets (2013) and navigation @EricOverfield - pixelmill.com
  • 31. Convert a Responsive Prototype to SharePoint @EricOverfield - pixelmill.com https://sprwd-public.sharepoint.com/
  • 32. A Quick Review  The What and Why of Responsive Web Design (RWD)  Planning for Responsive Design  Join Response Web Design and SharePoint @EricOverfield - pixelmill.com
  • 33. Coding Responsive Design  Responsive SharePoint at CodePlex  Free, Open Source Responsive SharePoint Frameworks  SharePoint 2010/2013 Ready  http://responsivesharepoint.codeplex.com  SP Blueprint (SharePoint 2013)  SharePoint 2013 responsive framework  A lean, custom grid  http://spblueprint.codeplex.com/ SharePoint and Responsive DesignPush NotificationsLet’s See a ComparisonResponsive Frameworks and SharePoint @EricOverfield - pixelmill.com
  • 34. Mobile First and IE8 / IE7  Will only load mobile view @EricOverfield - pixelmill.com  Fix with CSS Media Queries  JS Library: http://pxml.ly/zcw2jb2 (Among others)  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]-->
  • 36. 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
  • 37. Device Channels – An Example @EricOverfield - pixelmill.com
  • 38. Eric’s Practical Tips to #SPRWD  Use a prebuilt framework (SharePoint ready)  Set project budget, deliverables and expectations accordingly  Develop for the real world (will mobile users need to edit pages?)  Don’t break SharePoint!*  Mobile first (with caveats)  Be sure you are very comfortable with CSS/HTML  Test, and test, and test some more  Train content authors! RWD relies on groomed content. @EricOverfield - pixelmill.com
  • 39. Resources "Responsive Web Design" by Ethan Marcotte http://pxml.ly/23fkmjd Responsive Frameworks for SharePoint 2010 and 2013 http://responsivesharepoint.codeplex.com 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
  • 40. 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 12th, 2013)
  • 41. With Responsive Web Design Enhance SharePoint Thank You Eric Overfield @EricOverfield ericoverfield.com eoverfield@pixelmill.com

Editor's Notes

  • #2: { "1": "Slides will be available from blog and twitter\r\rIn-depth look at SharePoint and we can apply RWD to SharePoint.\rDevs should be happy, we will walk through the process. Business users, you will see what is possible.\rMeat will be in the demos\r\rWho has already worked with RWD and SP? Thoughts? Scratch, framework, how did you do it?", "2": "Will make available on blog and twitter (slideshare.net), so if you remember one of those then you can always review everything we discuss", "4": "fluid proportion-based grids (which use percentages pixels) to adapt the layout to the viewing environment\r\rAll clients effectively load the entire page but using css, hides or replaces elements to tailor the experience to the screen.\r\rDOES NOT USE USERAGENT, browser detection, rather works of screen width.\r\rEarly adopter AIDS.gov\r", "7": "fluid proportion-based grids (which use percentages pixels) to adapt the layout to the viewing environment\r\rAll clients effectively load the entire page but using css, hides or replaces elements to tailor the experience to the screen.\r\rDOES NOT USE USERAGENT, browser detection, rather works of screen width.\r\rEarly adopter AIDS.gov\r", "8": "Mr. Zeldman founded A List Apart, best practices and innovations in web design.\r\rsure, you can zoom in on many smart phones or tablets, but what if you can make tailored experience for each device?\r\rModern devices share basic ability with css, js though which is a plus\r", "16": "fluid proportion-based grids (which use percentages pixels) to adapt the layout to the viewing environment\r\rAll clients effectively load the entire page but using css, hides or replaces elements to tailor the experience to the screen.\r\rDOES NOT USE USERAGENT, browser detection, rather works of screen width.\r\rEarly adopter AIDS.gov\r", "18": "fluid proportion-based grids (which use percentages pixels) to adapt the layout to the viewing environment\r\rAll clients effectively load the entire page but using css, hides or replaces elements to tailor the experience to the screen.\r\rDOES NOT USE USERAGENT, browser detection, rather works of screen width.\r\rEarly adopter AIDS.gov\r", "36": "Device Channels work only with Publishing Sites \u000b\rAllow for one interface for all desktops and another for most tablets let's say.\r\rOnly 10 device channels per site collection, but do you really want to maintain 10 MP’s?\r", "37": "Device Channels work only with Publishing Sites \u000b\rAllow for one interface for all desktops and another for most tablets let's say.\r\rOnly 10 device channels per site collection, but do you really want to maintain 10 MP’s?\r", "41": "Thank You!\r\rDon’t forget to check out my blog where you can download this presentation or the recording.\r\rEasiest way to get to the material I referenced" }