SharePoint 2013 and RWD

Transcript SharePoint 2013 and RWD

Enhance SharePoint 2013
With Responsive Web Design
Eric Overfield
Enhance SharePoint 2013
With Responsive Web Design
Eric Overfield
SharePoint Advocate and Enthusiast
PixelMill
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
Co-author: “Pro SharePoint 2013 Branding and Responsive
Web Development” (Apress – June 12th, 2013)
Order Your Copy
http://pxml.ly/zsqykd
Co-author: “Black Magic Solutions for
White Hat SharePoint” (August, 2013)
ericoverfield.com
@EricOverfield
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
A Grid – In Action
@EricOverfield - pixelmill.com
Fluid
Grid
Push(Flexible)
Let’s
See
Notifications
a Comparison
i.e. 860 / 940 ~= 91.489361%
@EricOverfield - pixelmill.com
Flexible
Media
Push See
Let’s
Notifications
a Comparison
@EricOverfield - pixelmill.com
Media
PushQueries
Let’s
See
Notifications
a Comparison
Added in CSS 2.1, Enhanced with CSS3
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;
}
}
@EricOverfield - pixelmill.com
Responsive Design
In Action
@EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
The Mobile
Who Cares?
Revolution
@EricOverfield - pixelmill.com
Not The Web
@EricOverfield - pixelmill.com
Today’s Web
@EricOverfield - pixelmill.com
And Tomorrow?
Televisions?
Cameras?
Who Knows?
Watches?
Game Devices?
Printers?
Toasters?
@EricOverfield - pixelmill.com
Business Insider conference presentation shows (Blodget & Cocotas, 2012)
@EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
Mobile vs Desktop Traffic
http://thenextweb.com/insider/2012/12/27/christmas-day-mixpanel-study-more-online-activity-on-mobile-devices/
@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
How All Devices Differ
Screen Size
Functionality
Usability
@EricOverfield - pixelmill.com
What About
Mobile Apps?
@EricOverfield - pixelmill.com
SharePoint Mobile Apps
Freely Available:
Third Party:
SharePoint Newsfeed App
SharePlus by Infragistics's
Skydrive Pro App
Briefcase by Colligo
Mobile Entrée by H3 Solutions
Filamente Mobile SharePoint App
And more…
@EricOverfield - pixelmill.com
Apps and RWD serve different purposes
Apps -> particular function
Mobile Collaboration
Mobile Document Sharing / Offline Viewing
RWD -> general site / portal
Mobile Friendly Website
@EricOverfield - pixelmill.com
Planning For
Responsive Design
@EricOverfield - pixelmill.com
Our Responsive Goals
 Single site (i.e. no separate mobile)
 Serve a variety of Viewports
 And tailored to each viewport
 Future Friendly
@EricOverfield - pixelmill.com
Responsive Drawbacks
 Desktop vs. Mobile content
 Content order
 Maybe SharePoint can help?
 Device Channels
 A lot more work
@EricOverfield - pixelmill.com
Start with Content
@EricOverfield - pixelmill.com
Mobile First
Information Architecture
Content Rollups
Search Driven Content
Content is King
@EricOverfield - pixelmill.com
Design
to the
Extremes
@EricOverfield - pixelmill.com
@EricOverfield - pixelmill.com
Navigation
 Responsive Navigation the most difficult decision
 SharePoint Navigation is not Responsive friendly
 SharePoint relies on hover event / unfriendly HTML
 Static Navigation vs. SharePoint Navigation
 note: Custom Responsive Navigation will require JS/jQuery
@EricOverfield - pixelmill.com
Responsive Navigation
Floating
Drop down
Collapse
Off Canvas
Others?
@EricOverfield - pixelmill.com
Floating Navigation
@EricOverfield - pixelmill.com
Responsive Navigation
Floating
Drop down
Collapse
Off Canvas
Others?
@EricOverfield - pixelmill.com
Dropdown Navigation
@EricOverfield - pixelmill.com
Responsive Navigation
Floating
Drop down
Collapsing
Off Canvas
Others?
@EricOverfield - pixelmill.com
Collapsing Navigation
@EricOverfield - pixelmill.com
Responsive Navigation
Floating
Drop down
Collapsing
Off Canvas
Others?
@EricOverfield - pixelmill.com
Off Canvas Navigation
@EricOverfield - pixelmill.com
Responsive Navigation
Floating
Drop down
Collapsing
Off Canvas
Others?
@EricOverfield - pixelmill.com
Hide and Cry
Overlay
Footer Navigation
Global Navigation
jQuery or no jQuery
No two projects are the same
@EricOverfield - pixelmill.com
Time to
Code it Up
@EricOverfield - pixelmill.com
Frameworks
 Pre-Built Responsive and Fluid Grids
 Saves time and resources
 Many include extras
 i.e. Collapsing navigation
@EricOverfield - pixelmill.com
Framework Drawbacks
 May take time to learn framework
 Not always SharePoint friendly
 But
Might
- can
notsave
be the
a bunch
way “you”
of time
would do it
@EricOverfield - pixelmill.com
Twitter Bootstrap
Zurb Foundation
Skeleton
Less Framework
and so many more
@EricOverfield - pixelmill.com
Responsive
Frameworks
and
SharePoint
Coding
SharePoint
Push See
Let’s
Notifications
Responsive
a Comparison
and Responsive
Design
Design
 Responsive SharePoint at CodePlex
 Free, Open Source Responsive SharePoint Frameworks
 SharePoint 2013 Ready
 http://responsivesharepoint.codeplex.com
 SP Blueprint
 http://spblueprint.codeplex.com/
@EricOverfield - pixelmill.com
Mobile First
 Build Mobile interface first
 Forces us to concentrate on content
 Helps control some resources
 Mobile Interface not great for entering content
 May not be preferable with some development processes
 Not IE7/IE8 friendly
@EricOverfield - pixelmill.com
Mobile First In Action
@EricOverfield - pixelmill.com
Mobile First and IE8 / IE7
 Will only load mobile view
 Fix with CSS Media Queries
 JS Library: http://pxml.ly/zcw2jb2
 So we need to use JS?

 Or an IE8- stylesheet

@EricOverfield - pixelmill.com
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
 Temporary background image with columns
 Start with 300 pixel block
 Then 50 to 100 pixel columns through 1200 pixels total
@EricOverfield - pixelmill.com
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 (Responsive SharePoint?)
 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
@EricOverfield - pixelmill.com
There is no silver bullet
Build towards progress
Perfection does not yet exist
@EricOverfield - pixelmill.com
Resources
"Responsive Web Design" by Ethan Marcotte
http://pxml.ly/23fkmjd
Ethan Marcotte’s 20 Favorite Responsive Designs
http://pxml.ly/yqiyor
v5, the Responsive HTML5 Master Page for SharePoint 2010 by Kyle Schaeffer
http://pxml.ly/i3dbxre
SharePoint 2010 Responsive Web design Template by Luis Kerr
http://pxml.ly/xvr2ny
Responsive Frameworks for SharePoint 2010 and 2013
http://responsivesharepoint.codeplex.com
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
Zurb Foundation
http://pxml.ly/wcxkqv
Skeleton Framework
http://pxml.ly/t2gkrft
Less Framework
http://pxml.ly/y4wq8w
Implementing Off Canvas Navigation
http://pxml.ly/26ajefj
“Pro SharePoint 2013 Branding and Responsive Web Development”
(Apress – June 12th, 2013)
Order Your Copy
http://pxml.ly/zsqykd
@EricOverfield - pixelmill.com
Enhance SharePoint 2013
With Responsive Web Design
http://pxml.ly/EO-SP2013-Responsive
Thank You
Eric Overfield
@EricOverfield
ericoverfield.com
[email protected]
Special Thanks to our Platinum Sponsor
…and our Gold Sponsor

SharePoint 2013 and RWD

Transcript SharePoint 2013 and RWD

Directory