Enhance SharePoint 2013 with Responsive Web Design
-
Upload
eric-overfield -
Category
Technology
-
view
9 -
download
4
description
Transcript of Enhance SharePoint 2013 with Responsive Web Design
With Responsive Web Design
Eric OverfieldSharePoint Advocate and Enthusiast
PixelMill
Enhance SharePoint 2013
http://pxml.ly/EO-SP2013-Responsive
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
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
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
@EricOverfield - pixelmill.com
A Grid – In Action
Push NotificationsLet’s See a ComparisonFluid (Flexible) Grid
@EricOverfield - pixelmill.comi.e. 860 / 940 ~= 91.489361%
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=“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
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/ @EricOverfield - pixelmill.com
Mobile vs Desktop Traffic
"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
What AboutMobile Apps?
@EricOverfield - pixelmill.com
SharePoint Mobile Apps
Freely Available:
SharePoint Newsfeed App
Skydrive Pro App
@EricOverfield - pixelmill.com
Third Party:
SharePlus by Infragistics's
Briefcase by Colligo
Mobile Entrée by H3 Solutions
Filamente Mobile SharePoint
App
And more…
Apps and RWD serve different
purposes
@EricOverfield - pixelmill.com
Apps -> particular function
Mobile Collaboration
Mobile Document Sharing / Offline Viewing
RWD -> general site / portal
Mobile Friendly Website
Planning ForResponsive
Design@EricOverfield - pixelmill.com
Our Responsive Goals
Single site
Serve a variety of Viewports
And tailored to each viewport
@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?
Device Channels
A lot more work
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
@EricOverfield - pixelmill.com
SharePoint relies on hover event / unfriendly HTML
Static Navigation vs. SharePoint Navigation
note: Custom Responsive Navigation will require
JS/jQuery
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 toCode 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
Might not be the way “you” would do
it
But - can save a bunch of time
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
SharePoint 2013 Ready
http://responsivesharepoint.codeplex.com
SP Blueprint
http://spblueprint.codeplex.com/
SharePoint and Responsive DesignPush NotificationsLet’s See a ComparisonResponsive Frameworks and SharePoint
@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
May not be preferable with some development
processes
Not IE7/IE8 friendly
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 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]-->
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
SharePoint 2013 Helps
@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
Start with a framework
@EricOverfield - pixelmill.com
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
(Responsive
SharePoint?)
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
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 2013
Thank YouEric Overfield
@EricOverfieldericoverfield.com
http://pxml.ly/EO-SP2013-Responsive