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• kanwal@2toLead.com • 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• kanwal@2toLead.com • 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