Enhance SharePoint 2013 with Responsive Web Design
1. With Responsive Web Design
Eric Overfield
SharePoint Advocate and Enthusiast
PixelMill
Enhance SharePoint 2013
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
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. 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. Push NotificationsLet’s See a ComparisonFluid (Flexible) Grid
@EricOverfield - pixelmill.com
i.e. 860 / 940 ~= 91.489361%
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
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
22. Our Responsive Goals
Single site
Serve a variety of Viewports
@EricOverfield - pixelmill.com
Future Friendly
(i.e. no separate mobile)
23. Responsive Drawbacks
Desktop vs. Mobile content
Content order
@EricOverfield - pixelmill.com
Maybe SharePoint can help?
Device Channels
A lot more work
40. Frameworks
Pre-Built Responsive and Fluid Grids
Saves time and resources
@EricOverfield - pixelmill.com
Many include extras
i.e. Collapsing navigation
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
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. 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?
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. Build to the Design
not the Device
@EricOverfield - pixelmill.com
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
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
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?)
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. 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. With Responsive Web Design
Enhance SharePoint 2013
Thank You
Eric Overfield
@EricOverfield
ericoverfield.com
eoverfield@pixelmill.com
Notas del editor
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
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'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'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