WordPress Websites for Engineers: Elevate Your Brand
Enhance SharePoint with Responsive Web Design
1. Enhance SharePoint
With Responsive Web Design
DEV 201
Eric Overfield
SharePoint Advocate and Enthusiast
PixelMill
SharePoint Fest Denver – March 18th - 20th 2013
2. 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 – May 2013)
ericoverfield.com
Order Your Copy
@EricOverfield
http://pxml.ly/226mwkj
3. 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
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. Fluid Grid – Flexible Media – CSS3 Media Queries
@EricOverfield - pixelmill.com
11. And Tomorrow?
Televisions?
Cameras? Who Knows?
Watches? Printers?
Game Devices? Toasters?
@EricOverfield - pixelmill.com
12. "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
13. How All Devices Differ
Screen Size
Functionality
Usability
@EricOverfield - pixelmill.com
29. Responsive Navigation
Floating
Drop down
Collapsing
Off Canvas
Others?
@EricOverfield - pixelmill.com
30. Hide and Cry
Overlay
Footer Navigation
Global Navigation
jQuery or no jQuery
No two projects are the same
@EricOverfield - pixelmill.com
31. Time to Code it Up
@EricOverfield - pixelmill.com
32. Frameworks
Pre-Built Responsive and Fluid Grids
Saves time and resources
Many include extras
i.e. Collapsing navigation
@EricOverfield - pixelmill.com
33. Framework Drawbacks
May take time to learn framework
Not always SharePoint friendly
@EricOverfield - pixelmill.com
34. Twitter Bootstrap
Zurb Foundation
Skeleton
Less Framework
and so many more
@EricOverfield - pixelmill.com
35. Mobile First
Build Mobile interface first
Forces us to concentrate on content
Helps control some resources
Mobile Interface not great for entering content
Considerations needed for page editing
Cross-site publishing in SharePoint 2013?
@EricOverfield - pixelmill.com
37. Build to the Design
not the Device
@EricOverfield - pixelmill.com
38. 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
40. 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
42. There is no silver bullet
Build towards progress
Perfection does not yet exist
@EricOverfield - pixelmill.com
43. 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
44. 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
50 Useful Responsive Web Design Tools For Designers
http://pxml.ly/hifruno
@EricOverfield - pixelmill.com
45. Enhance SharePoint
With Responsive Web Design
DEV 201
Thank You
Eric Overfield
@EricOverfield
ericoverfield.com
eoverfield@pixelmill.com
Notas del editor
Slides will be available from blog and twitterIn-depth look at SharePoint and we can apply RWD to SharePoint.Devs should be happy, we will walk through the process. Business users, you will see what is possible.Meat will be in the demosWho has already worked with RWD and SP? Thoughts? Scratch, framework, how did you do it?
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?
HTML MockupInclude bootstrapView resultConvert to gridInclude fluidNavigation types
Thank You!Don’t forget to check out my blog where you can download this presentation or the recording.Easiest way to get to the material I referenced