Download - Responsive Web Design for SharePoint 2013
![Page 1: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/1.jpg)
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
![Page 2: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/2.jpg)
Not here to talk about Design
![Page 3: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/3.jpg)
2toLead
Responsive Web Design for SharePoint 2013
Because one size does not fit all!
![Page 4: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/4.jpg)
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
![Page 5: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/5.jpg)
![Page 6: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/6.jpg)
Agenda• History lesson• Top Responsive SharePoint Sites• New WCM features in SP2013• CORE Ingredients• Steps to convert your existing intranet• Resources
![Page 7: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/7.jpg)
2toLead
History Lesson
Look back to move forward
![Page 8: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/8.jpg)
Remember When?Launch your Browser to view a site and get this
![Page 9: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/9.jpg)
Above the Fold• Load a site and you have to
scroll• Important information should
be easily accessible
![Page 10: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/10.jpg)
Above the Fold
![Page 11: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/11.jpg)
Graceful Degradation
![Page 12: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/12.jpg)
Progressive Enhancement
![Page 13: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/13.jpg)
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
![Page 14: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/14.jpg)
![Page 15: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/15.jpg)
![Page 16: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/16.jpg)
Responsive Web DesignAdapting a website’s layout across multiple devices
![Page 17: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/17.jpg)
Adaptive Design• Intelligent design• Progressively improves site
based on screen size, device, orientation and platform features
![Page 18: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/18.jpg)
Why even bother?
It’s about adoption = conversion!
Unfriendly = more likely to leave
61%
Friendly = more likely to buy
67%
![Page 19: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/19.jpg)
Responsive Web Design
![Page 20: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/20.jpg)
2toLead
Responsive in SharePoint
Is it possible?
![Page 21: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/21.jpg)
Group Health Cooperative
![Page 22: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/22.jpg)
Marshfield Clinic
![Page 23: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/23.jpg)
2toLead
New WCM Features in SharePoint 2013
Embracing web design community
![Page 24: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/24.jpg)
Composed Looks• Allows you to configure
image, colors, site layout and fonts
• No longer work with Microsoft Office Themes
![Page 25: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/25.jpg)
Image Renditions
Create different image versions based on your needs
![Page 26: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/26.jpg)
Managed Navigation
Navigation can now be driven by the Managed Metadata term
![Page 27: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/27.jpg)
Device Channels
![Page 28: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/28.jpg)
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
![Page 29: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/29.jpg)
2toLead
CORE Ingredients
Recipe for #SPRWD
![Page 30: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/30.jpg)
Fluid Grid
![Page 31: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/31.jpg)
Fluid Grid
700 % 988 = 0.7085
70.85% of the total width
h1 { width: 70.85%; /* 700px / 988px = 0.7085 */}
![Page 32: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/32.jpg)
Media Queries
![Page 33: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/33.jpg)
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
![Page 34: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/34.jpg)
Flexible Media
![Page 35: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/35.jpg)
Flexible Mediaimg, embed, object, video { max-width: 100%;}
{
![Page 36: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/36.jpg)
Flexible Media
![Page 37: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/37.jpg)
Responsive Web Design
• Flexible Media• Media Queries• Fluid Grid
![Page 38: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/38.jpg)
2toLead
Convert Fixed to Responsive
Be Like Water
![Page 39: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/39.jpg)
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
![Page 40: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/40.jpg)
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
![Page 41: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/41.jpg)
Things to Consider• Cleaning up the padding, margin and container spacing issues• SharePoint styles for ribbon and other controls will need to be tested
![Page 42: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/42.jpg)
Older Browsers• Be Progressive Across All Browsers• HTML5Shiv• Browser Upgrade Notification• Consider leveraging Device Channels
![Page 43: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/43.jpg)
2toLead
Resources
Further research
![Page 44: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/44.jpg)
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
![Page 45: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/45.jpg)
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
![Page 46: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/46.jpg)
2toLead
Thank You!
with Great Power comes Responsibility
![Page 47: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/47.jpg)
![Page 48: Responsive Web Design for SharePoint 2013](https://reader035.vdocuments.site/reader035/viewer/2022062319/554c45c0b4c90570648b51e0/html5/thumbnails/48.jpg)
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