responsive web design for sharepoint 2013
DESCRIPTION
Responsive Web Design for SharePoint 2013 2003 called and they want their crappy web design back. In the last ten years, so much has changed in the design community that organizations are still asking for designs that are outdated both from a design perspective as well as from a best practices perspective. This session is focused on showing you the benefits of designing for multiple devices, resolutions and needs. We’ll look at the latest design trends, some of the latest and best SharePoint 2013 implementations and what steps you can take to bring your corporate intranet to 2013.TRANSCRIPT
Empty your mind, be formless. Shapeless, like water. If you put water into a cup, it becomes the cup. You put
water into a bottle and it becomes the bottle. You put it in a teapot it becomes the teapot. Now, water can flow
or it can crash. Be water my friend. - Bruce Lee
Not here to talk about Design
2toLead
Responsive Web Design for SharePoint 2013
Because one size does not fit all!
Kanwal Khipple• Co-Founder, 2toLead• [email protected] • 416-888-7777
• @kkhipple – personal twitter account• @SharePointBuzz – 10k followers receive latest SharePoint related tweets• LinkedIn – Let’s do business together! Connect with me professionally• Facebook – connect with me personally
Agenda• History lesson• Top Responsive SharePoint Sites• New WCM features in SP2013• CORE Ingredients• Steps to convert your existing intranet• Resources
2toLead
History Lesson
Look back to move forward
Remember When?Launch your Browser to view a site and get this
Above the Fold• Load a site and you have to
scroll• Important information should
be easily accessible
Above the Fold
Graceful Degradation
Progressive Enhancement
Separate Mobile Site• Two websites, one for your
desktop and one specifically for mobile
• Customers get automatically redirected to the best site for their device
Responsive Web DesignAdapting a website’s layout across multiple devices
Adaptive Design• Intelligent design• Progressively improves site
based on screen size, device, orientation and platform features
Why even bother?
It’s about adoption = conversion!
Unfriendly = more likely to leave
61%
Friendly = more likely to buy
67%
Responsive Web Design
2toLead
Responsive in SharePoint
Is it possible?
Group Health Cooperative
Marshfield Clinic
2toLead
New WCM Features in SharePoint 2013
Embracing web design community
Composed Looks• Allows you to configure
image, colors, site layout and fonts
• No longer work with Microsoft Office Themes
Image Renditions
Create different image versions based on your needs
Managed Navigation
Navigation can now be driven by the Managed Metadata term
Device Channels
WCM Highlights• Leverage the power of search by using
Content Search Web Part• Create your own BestBuy.com using
Catalogs• Content Editors can copy from Microsoft
Word and paste into SharePoint (cleaner markup)
• Configure friendly URL for terms• Search Engine site map
2toLead
CORE Ingredients
Recipe for #SPRWD
Fluid Grid
Fluid Grid
700 % 988 = 0.7085
70.85% of the total width
h1 { width: 70.85%; /* 700px / 988px = 0.7085 */}
Media Queries
Media Queries
CSS 2.1
<link rel="stylesheet" type="text/css" href="core.css“ media="screen" /><link rel="stylesheet" type="text/css" href="print.css" media="print" />
CSS 3.0
<link rel="stylesheet" type="text/css“ media="screen and (max-device-width: 480px)“ href=“custom.css" />
Media Type
Query containing media feature to inspect
Flexible Media
Flexible Mediaimg, embed, object, video { max-width: 100%;}
{
Flexible Media
Responsive Web Design
• Flexible Media• Media Queries• Fluid Grid
2toLead
Convert Fixed to Responsive
Be Like Water
Prepare Design for a Framework1. Upload Framework
TIP: Good frameworks– Twitter Bootstrap– Skeleton– Zurb Foundation
2. Add Framework to your master page3. Leverage Grid Based
CSS Framework
Make it Responsive1. Define your Viewport <meta name="viewport" content="width=device-width, initial-scale=1.0" />2. Modify CSS for media queries
3. Convert from Fixed to Fluid
Things to Consider• Cleaning up the padding, margin and container spacing issues• SharePoint styles for ribbon and other controls will need to be tested
Older Browsers• Be Progressive Across All Browsers• HTML5Shiv• Browser Upgrade Notification• Consider leveraging Device Channels
2toLead
Resources
Further research
Responsive Bootstrap Template• Ethan Marcotte’s book on demonstrates how you can
deliver a quality experience to your users no matter how large (or small) their display.
• http://responsivesharepoint.codeplex.com– Master page that has Twitter Bootstrap integrated
Book Author Pro SharePoint 2013 Branding and Responsive Web Development
• A complete guide to planning, designing, and developing modern, responsive websites and applications using SharePoint 2013 and open standards like HTML5, CSS3 and JavaScript
• 450 Pages • User Level: Intermediate to Advanced
Availableon Amazon
2toLead
Thank You!
with Great Power comes Responsibility
Kanwal Khipple• Co-Founder, 2toLead• [email protected] • 416-888-7777
• @kkhipple – personal twitter account• @SharePointBuzz – 10k followers receive latest SharePoint related tweets• LinkedIn – Let’s do business together! Connect with me professionally• Facebook – connect with me personally