enhance sharepoint with responsive web design
DESCRIPTION
Session Dev 201 from SharePoint Fest Denver 2013.TRANSCRIPT
With Responsive Web Design
Eric OverfieldSharePoint Advocate and Enthusiast
PixelMill
SharePoint Fest Denver – March 18th - 20th 2013
Enhance SharePoint
DEV 201
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/226mwkj
Co-author: “Pro SharePoint 2013 Branding and
Responsive Web Development” (Apress – May
2013)
What You Will Learn
What is Responsive Web Design
(RWD)
Why Should We Use It
The Responsive Process
Join Response Web Design and
SharePoint
SharePoint 2013 Considerations@EricOverfield - pixelmill.com
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
Fluid Grid – Flexible Media – CSS3 Media Queries @EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
Why Do We Need Responsive
Design?
@EricOverfield - pixelmill.com
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
"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
Screen Size
Functionality
Usability
How All Devices Differ
@EricOverfield - pixelmill.com
The ResponsiveProcess
@EricOverfield - pixelmill.com
Our Responsive Goals
Single site
Serve a variety of Viewports
@EricOverfield - pixelmill.com
Future Friendly
(i.e. no separate mobile)
Responsive Drawbacks
Desktop vs. Mobile content
Content order
@EricOverfield - pixelmill.com
Maybe SharePoint can help?
Start with Content
@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
@EricOverfield - pixelmill.com
SharePoint relies on hover event
Static Navigation vs. SharePoint Navigation
Floating
Drop down
Collapse
Off Canvas
Others?
Floating
Drop down
Collapse
Off Canvas
Others?
Responsive Navigation
@EricOverfield - pixelmill.com
@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 - pixelmill.com
Time to Code it Up
@EricOverfield - pixelmill.com
Frameworks
Pre-Built Responsive and Fluid Grids
Saves time and resources
@EricOverfield - pixelmill.com
Many include extras
i.e. Collapsing navigation
Framework Drawbacks
May take time to learn framework
Not always SharePoint friendly
@EricOverfield - pixelmill.com
Twitter Bootstrap
Zurb Foundation
Skeleton
Less Framework
and so many more@EricOverfield - pixelmill.com
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?
Mobile First In Action
@EricOverfield - pixelmill.com
Build to the Designnot the Device
@EricOverfield - pixelmill.com
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
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
Demos
@EricOverfield - pixelmill.com
Build towards
progressPerfection does not yet
exist
There is no silver bullet
@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.comcss3-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
50 Useful Responsive Web Design Tools For Designers
http://pxml.ly/hifruno
Eric Overfield@EricOverfield
Thank You
With Responsive Web Design
Enhance SharePoint
DEV 201