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.

1. 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

2. Not here to talk about Design

3. 2toLead
Responsive Web Design
for SharePoint 2013
Because one size does not fit all!

4. 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

6. Agenda
• History lesson
• Top Responsive SharePoint Sites
• New WCM features in SP2013
• CORE Ingredients
• Steps to convert your existing intranet
• Resources

7. 2toLead
History Lesson
Look back to move forward

8. Remember When?
Launch your Browser to view a site and get this

9. Above the Fold
• Load a site and you have to scroll
• Important information should be
easily accessible

10. Above the Fold

11. Graceful Degradation

12. Progressive Enhancement

13. 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

16. Responsive Web Design
Adapting a website’s layout across
multiple devices

17. Adaptive Design
• Intelligent design
• Progressively improves site based
on screen size, device, orientation
and platform features

18. Why even bother?
It’s about adoption = conversion!
Unfriendly = more likely to leave
61%
Friendly = more likely to buy
67%

19. Responsive Web Design

20. 2toLead
Responsive in SharePoint
Is it possible?

21. Group Health Cooperative

22. Marshfield Clinic

23. 2toLead
New WCM Features in SharePoint 2013
Embracing web design community

24. Composed Looks
• Allows you to configure image,
colors, site layout and fonts
• No longer work with Microsoft
Office Themes

25. Image Renditions
Create different image
versions based on your
needs

26. Managed Navigation
Navigation can now be driven by the
Managed Metadata term

27. Device Channels

28. 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

29. 2toLead
CORE Ingredients
Recipe for #SPRWD

30. Fluid Grid

31. Fluid Grid
700 % 988 = 0.7085
70.85% of the total width
h1 {
width: 70.85%; /* 700px / 988px = 0.7085 */
}

32. Media Queries

33. 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

34. Flexible Media

35. Flexible Media
img, embed, object, video {
max-width: 100%;
}
{

36. Flexible Media

37. Responsive Web Design
• Flexible Media
• Media Queries
• Fluid Grid

38. 2toLead
Convert Fixed to Responsive
Be Like Water

39. Prepare Design for a Framework
1. Upload Framework
TIP: Good frameworks
– Twitter Bootstrap
– Skeleton
– Zurb Foundation
2. Add Framework to your
master page
3. Leverage Grid Based
CSS Framework

40. Make it Responsive
1. 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

41. Things to Consider
• Cleaning up the padding, margin and container spacing issues
• SharePoint styles for ribbon and other controls will need to be tested

42. Older Browsers
• Be Progressive Across All Browsers
• HTML5Shiv
• Browser Upgrade Notification
• Consider leveraging Device Channels

43. 2toLead
Resources
Further research

44. 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

45. 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
Available
on Amazon

46. 2toLead
Thank You!
with Great Power comes Responsibility

48. 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