a “new-ish” web design methodology addresses growing number of internet devices tailored...
TRANSCRIPT
SharePoint for any screen size: An in-depth look into building responsive web designRita Zhang, GEEric Overfield, PixelMill
SPC345
Software Architect, General Electric
Founder and Architect, SP.me
Author
Founder/SharePoint Branding/UI Lead, PixelMill
Speaker, Teacher, Advocate
Author, SharePoint Community Organizer
“Pro SharePoint 2013 Branding and Responsive Web Development” (Apress – June 2013)
About usRita Zhang Eric Overfield
Co-author: “Black Magic Solutions for White Hat SharePoint” (August, 2013)
What is Responsive Web Design and Why We Need It
Fundamentals of Responsive Web Design
Responsive Design Process
Join Responsive Web Design and SharePoint
You will learn…
What is Responsive Web Design
A “new-ish” 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*
Responsive web design
Important related buzzwords
ProgressiveEnhancement
GracefulDegradation
Adaptive Web Design
Responsive Web Design
Desktop First
Mobile First
Why We Need It
Screen size (viewport, proportions, resolution)
Functionality (clicks, hover, touch, swipe…)
Usability (can your site be used on any device?)
So many different devices
Demo
Responsive Web Design in Action
Fundamentals of RWD
The 3 pillars of responsive web design
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
Build and code mobile interface first
Helps control some resources
Forces us to concentrate on content
*Caveats for IE8
Mobile first
Demo
Mobile First – An Introduction Demo
How will your navigation adapt to different viewports
Responsive navigation may require thought
Consider real estate required for navigation
Multi-level SP OOTB Navigation relies on hover
Navigation
Floating Drop down
Off Canvas
Collapsing
Common mobile navigation
Demo
Collapsing Navigation
Let’s Build a RWD Site
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
Begin with site planning
What will be a part of the Master Page
How will Page Layout content be defined
How will you handle navigation?
Will you include the quick launch on all pages?
Always remember SharePoint
Demo
Responsive friendly wireframes and mockups
Time to Code it UpA HTML Prototype
Pre-built responsive and fluid grids
Saves time and resources
Many includes extras
i.e. collapsing navigation
Your own grid vs existing framework
May take time to learn framework
Not always SharePoint ready OOTB
Can save you a bunch of time!
Frameworks pluses and minuses
TwitterBootstrap
ZurbFoundation
LessFramework
Skeleton
Common frameworks
And so many more
Demo
A Responsive HTML Prototype
Joining RWDAnd 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 key components to SharePoint
Demo
Convert a responsive prototype to SharePoint
https://sprwd-public.sharepoint.com/
What is Responsive Web Design and Why We Need It
Fundamentals of Responsive Web Design
Responsive Design Process
Join Responsive Web Design and SharePoint
A quick review; we discussed…
IE8- does not recognize CSS3 Media Queries
Will only load mobile view
Common fixes: IE8- stylesheet JavaScript Libraries such as CSS3 Media Queries
http://pxml.ly/zcw2jb2
Caveats – mobile first and IE8 / IE7
IE8- Stylesheet<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css“ href=“/styles/styles-ie8.css” /><![endif]-->
JavaScript Library<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script><![endif]-->
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
Responsive frameworks and SharePoint
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.
Our practical tips to #SPRWD
"Responsive Web Design" by Ethan Marcottehttp://pxml.ly/23fkmjd
Responsive 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
ResourcesTwitter Bootstrap
http://pxml.ly/d3qbekqZurb Foundation
http://pxml.ly/wcxkqvSkeleton Framework
http://pxml.ly/t2gkrftLess Framework
http://pxml.ly/y4wq8wImplementing Off Canvas Navigation
http://pxml.ly/26ajefj
“Pro SharePoint 2013 Branding and Responsive Web Development” (Apress –
June 2013)
SharePoint for any screen size: an in-depth look into building responsive web design
Rita Zhang, GEEric Overfield, PixelMill
Thank You
MySPCSponsored by
connect. reimagine. transform.
Evaluate sessionson MySPC using yourlaptop or mobile device:myspc.sharepointconference.com
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.