Enhance SharePoint 2013 with Responsive Web Design
Upcoming SlideShare
Loading in...5
×
 

Enhance SharePoint 2013 with Responsive Web Design

on

  • 7,667 views

Enhance SharePoint 2013 with Responsive Web Design session held at SharePoint Saturday Los Angeles 2013.

Enhance SharePoint 2013 with Responsive Web Design session held at SharePoint Saturday Los Angeles 2013.

Statistics

Views

Total Views
7,667
Views on SlideShare
5,949
Embed Views
1,718

Actions

Likes
3
Downloads
150
Comments
2

7 Embeds 1,718

http://www.scoop.it 1564
https://twitter.com 96
http://ericoverfield.com 45
http://di.dk 8
http://cc.bingj.com 2
https://myalice.nsynergy.com 2
https://mysite.nsynergy.com 1
More...

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Excellent presentation & summary.
    Thanks, Eric!
    Are you sure you want to
    Your message goes here
    Processing…
  • Very nice presenttion about making SharePoint responsive.
    I'm also working with responsive branding for SharePoint, let me introduce our work, take a look at http://bindtuning.com/
    We have a tunning tool where you can fully customize a theme for SharePoint and besides being responsive the theme include a lot of features.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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
  • http://www.wcu.edu/ceap/houghton/edelcompeduc/ch1/ch1palmframes.html
  • http://www.mequoda.com/articles/digital-magazine-publishing/web-usage-prediction-when-mobile-and-desktop-collide/
  • 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?
  • 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

Enhance SharePoint 2013 with Responsive Web Design Enhance SharePoint 2013 with Responsive Web Design Presentation Transcript

  • With Responsive Web Design Eric Overfield SharePoint Advocate and Enthusiast PixelMill Enhance SharePoint 2013
  • 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
  • Push NotificationsLet’s See a ComparisonFluid (Flexible) Grid @EricOverfield - pixelmill.com i.e. 860 / 940 ~= 91.489361%
  • @EricOverfield - pixelmill.com The Grid – In Action
  • 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
  • Planning For Responsive Design @EricOverfield - pixelmill.com
  • Our Responsive Goals  Single site  Serve a variety of Viewports @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  Static Navigation vs. SharePoint Navigation
  • 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 to Code 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 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  Considerations needed for page editing  Cross-site publishing in SharePoint 2013?
  • 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]> <sciprt src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script> <![endif]-->
  • 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 @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  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 progress Perfection does not yet exist There is no silver bullet @EricOverfield - pixelmill.com
  • Resources "Responsive Web Design" by Ethan Marcotte http://pxml.ly/23fkmjd 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.com css3-mediaqueries-js http://pxml.ly/zcw2jb2 @EricOverfield - pixelmill.com Responsive Frameworks for SharePoint 2010 and 2013 http://responsivesharepoint.codeplex.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 2013)
  • With Responsive Web Design Enhance SharePoint 2013 Thank You Eric Overfield @EricOverfield ericoverfield.com eoverfield@pixelmill.com