Upload
eric-overfield
View
107
Download
2
Tags:
Embed Size (px)
DESCRIPTION
One of the hottest topics in Web Design over the last few years has been Responsive Web Design (RWD). The theory of one site structure for current web devices, including tablets and smartphones, has also attracted SharePoint developers, but the complexity of RWD has been a stumbling block. In this session we will start with an overview of what is Responsive Web Design followed by an in-depth look into the process of applying a responsive design on SharePoint 2013. We will then dive into the code and learn how to create a SharePoint site that is both responsive and attractive.
Citation preview
TH22 - Enhance SharePoint 2013 With Responsive Design
Eric OverfieldPixelMill – USA@ericoverfield
About Me
“Pro SharePoint 2013 Branding and Responsive Web Development” (Apress – June 2013)
Co-author: “Black Magic Solutions for White Hat SharePoint” (August, 2013)
Founder/SharePoint Branding/UI Lead, PixelMill
Speaker, Teacher, Advocate
Author, SharePoint Community Organizer
You will learn…• What is Responsive Web Design and Why We Need
It
• Fundamentals of Responsive Web Design
• Responsive Design Process
• Join Responsive Web Design and SharePoint
What is Responsive Web Design
Responsive Web Design• A web design methodology– Addresses growing number of Internet devices
• Tailored experience to any device– Limits resizing, panning and scrolling
• The Key: All devices load the same page*
Why we need it
So many different devices• Screen size (viewport, proportions, resolution)
• Functionality (clicks, hover, touch, swipe…)
• Usability (can your site be used on any device?)
Responsive Web Design in Action
Demo
Fundamentals of RWD
The 3 pillars of RWD
Fluid Grid – Flexible Media – CSS3 Media Queries
A fluid grid
Flexible media
Flexible Images Flexible Video Proportional Text
Media queriesIn-Line Media Query:
<link rel="stylesheet" media="screen and (min-width: 768px)" href=“tablet.css" /><link rel="stylesheet" media="screen and (max-width: 599px)" href=“small.css" />
Media Query in style sheets:
@media screen and (min-width: 786px) { body { font-size: 1.3em; }}@media screen and (min-width: 992px) { body { font-size: 1.6em; }}
Device ability to handle orientation
@media screen and (orientation: landscape) { .landscape { width: 30%; float: right; }}
Beyond the Pillars
ProgressiveEnhancement
GracefulDegradation
Adaptive Web Design
Responsive Web Design Desktop FirstMobile First
Related terms
Mobile first• Build and code mobile interface first
• Mobile friendly – progressively enhance
• Forces us to concentrate on content
• *Caveats for IE8
Mobile First – An Introduction Demo
Demo
Navigation• How will your navigation adapt to different viewports
• Responsive navigation may require thought
• Only basic SharePoint OOTB navigation is RWD friendly
• Multi-level SP OOTB navigation relies on hover
Example RWD Navigation - Collapsing
Demo
Strategy for a RWD Site
Begin with site planning• This should be familiar
– Start with content / site purpose– Sitemap– Information Architecture
• What’s different– Wireframing – including for mobile devices– High fidelity mockups – including for mobile devices
• Design to the extremes, then fill in the gaps
Always remember SharePoint
• What will be a part of the Master Page
• How you will you handle navigation?
• Current navigation on all pages?
• How will Page Layout content be defined?
Code a RWD SiteA HTML Prototype
Custom grid vs existing framework
• Pre-built responsive and fluid grids
• Saves time and resources
• Many include extras
• i.e. collapsing navigation
Common frameworks
• Twitter Bootstrap
• Zurb Foundation
• Skeleton
• Less Framework
Framework pluses and minuses
• May take time to learn framework
• Not always SharePoint ready OOTB
• Can save you a bunch of time!
A Responsive HTML Prototype
Demo
Joining RWDAnd SharePoint
Convert key components to SharePoint
• Distill page into Master Page and Page Layout(s)
• Fix framework to work with SharePoint– Or use pre-converted RWD framework for SharePoint
• Add SharePoint controls, snippets and navigation
Convert a responsive prototype to SharePoint
https://sprwd-public.sharepoint.com/
Demo
A quick review• What is Responsive Web Design and Why We Need
It
• Fundamentals of Responsive Web Design
• Responsive Design Process
• Join Responsive Web Design and SharePoint
Responsive frameworks and SharePoint
• Responsive SharePoint at CodePlex– Free, open source responsive SharePoint Frameworks– SharePoint 2013 Ready– http://responsivesharepoint.codeplex.com
• SP Blueprint– SharePoint 2013 responsive framework– A lean, custom grid– http://spblueprint.codeplex.com
My practical tips to #SPRWD
• Use a prebuilt framework (SharePoint ready)• Set project budget, deliverables and expectations accordingly• Develop for the real world (will mobile users need to edit
pages?)• Don’t break SharePoint*• Mobile first (with caveats)• Be sure you are very comfortable with CSS/HTML• Test, and test, and test some more• Train content authors! RWD relies on groomed content
Resources"Responsive Web Design" by Ethan Marcotte
http://pxml.ly/23fkmjdResponsive Frameworks for SharePoint 2010 and 2013
http://responsivesharepoint.codeplex.comSP Blueprint
http://spblueprint.codeplex.comhtml5shiv
http://pxml.ly/uzcz32Modernizr
http://modernizr.comcss3-mediaqueries-js
http://pxml.ly/zcw2jb2Sample Office 365 SharePoint Online demo
http://sprwd-public.sharepoint.com
Twitter Bootstraphttp://pxml.ly/d3qbekq
Zurb Foundationhttp://pxml.ly/wcxkqv
Skeleton Frameworkhttp://pxml.ly/t2gkrft
Less Frameworkhttp://pxml.ly/y4wq8w
Implementing Off Canvas Navigation http://pxml.ly/26ajefj
“Pro SharePoint 2013 Branding and Responsive Web Development” (Apress – June 2013)
TH22 - Enhance SharePoint 2013 With Responsive Design
Thank YouEric Overfield
PixelMill – USA@ericoverfield