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

Enhance SharePoint 2013 with Responsive Web Design

on

  • 4,140 views

Learn all about SharePoint 2013 and how to a better front end with Responsive Design Strategies and techniques

Learn all about SharePoint 2013 and how to a better front end with Responsive Design Strategies and techniques

Statistics

Views

Total Views
4,140
Views on SlideShare
3,985
Embed Views
155

Actions

Likes
2
Downloads
69
Comments
0

3 Embeds 155

http://ericoverfield.com 118
https://twitter.com 36
http://list.ly 1

Accessibility

Categories

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…
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 is a plus
  • Mobile first can be difficult for traditional developers to embrace and goes against legacy design strategies / stakeholders
  • Will spend some time on this.
  • Mississippi Department of IT
  • Not solved yetI don’t like current JS fixesUse custom classes and JS for IE8For IE8 targeted projects, mobile first doesn’t make sense
  • 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

  • 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 (Flexible) Comparison Let’s Notifications Push See a Grid i.e. 860 / 940 ~= 91.489361% @EricOverfield - pixelmill.com
  • FlexibleSee a Comparison Let’s Media Push Notifications @EricOverfield - pixelmill.com
  • Media QueriesComparison Let’s Notifications Push See a 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 Revolution Who Cares? @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  Might notsavethe way “you” would do it But - can be a bunch of time @EricOverfield - pixelmill.com
  • Twitter Bootstrap Zurb Foundation Skeleton Less Framework and so many more @EricOverfield - pixelmill.com
  • Responsive Frameworks and SharePoint SharePoint Comparison Coding Responsive Design Design Let’s Notifications Push See a and Responsive  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? <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script> <![endif]-->  Or an IE8- stylesheet <!--[if lt IE 9]> <link rel="stylesheet" type="text/css“ href=“/styles/styles-ie8.css” /> <![endif]--> @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 eoverfield@pixelmill.com