Your SlideShare is downloading. ×
0
Empty your mind, be formless. Shapeless, like water. If you put
water into a cup, it becomes the cup. You put water into a...
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
• @SharePo...
Agenda
• History lesson
• Top Responsive SharePoint Sites
• New WCM features in SP2013
• CORE Ingredients
• Steps to conve...
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
re...
Responsive Web Design
Adapting a website’s layout across
multiple devices
Adaptive Design
• Intelligent design
• Progressively improves site based
on screen size, device, orientation
and platform ...
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 Catalog...
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...
Flexible Media
Flexible Media
img, 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 Framework
1. Upload Framework
TIP: Good frameworks
– Twitter Bootstrap
– Skeleton
– Zurb Foundation
2...
Make it Responsive
1. Define your Viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
2. Mod...
Things to Consider
• Cleaning up the padding, margin and container spacing issues
• SharePoint styles for ribbon and other...
Older Browsers
• Be Progressive Across All Browsers
• HTML5Shiv
• Browser Upgrade Notification
• Consider leveraging Devic...
2toLead
Resources
Further research
Responsive Bootstrap Template
• Ethan Marcotte’s book on demonstrates how you can deliver a
quality experience to your use...
Book Author 
Pro SharePoint 2013 Branding and
Responsive Web Development
• A complete guide to planning, designing,
and d...
2toLead
Thank You!
with Great Power comes Responsibility
Kanwal Khipple
• Co-Founder, 2toLead
• kanwal@2toLead.com
• 416-888-7777
• @kkhipple – personal twitter account
• @SharePo...
Responsive Web Design for SharePoint 2013
Responsive Web Design for SharePoint 2013
Responsive Web Design for SharePoint 2013
Responsive Web Design for SharePoint 2013
Upcoming SlideShare
Loading in...5
×

Responsive Web Design for SharePoint 2013

10,520

Published on

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.

Published in: Design, Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
10,520
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
208
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide
  • 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.

  • User Experience Is At the Core of Everything We Do
    User Experience – The key to high user adoption and ROI
    Award winning SharePoint Development
    Multiple awards for both Internet and Intranet Sites Developed
    Full Lifecycle SharePoint Support
    In addition to 3 SharePoint MVP’s on staff, we offer comprehensive SharePoint Skills for all SharePoint project requirements.
    250+ SharePoint Project to-date
    Microsoft SharePoint TAP Program Member (SharePoint Wave 15)
  • View port
  • The concept, Graceful Degradation, was introduced as best practice for providing the best experience to users with the latest modern browser. For those that didn&apos;t have a modern browser, web designers would not provide equivalents. Visitors with the latest modern browser felt like first class citizens and interacted with the site as web designers intended. For those that did not have the latest web browser, they were at least given a web site that degraded gracefully to a lower level of functionality.
  • Progressive Enhancement, on the other hand, begins with the basic version of the site to ensure that it works on all browsers and then web designers can add enhancements specifically for modern browsers. Progressive Enhancement focuses on content first rather than functionality. This emphasis on content is much more important over Graceful Degradation as content is truly the only reason any one of us browse and/or build web sites in the first place. As a comparison, Graceful Degradation prioritized presentation and functionality before content and Progressive Enhancement prioritized content to the top of a web designers’ priority list.
  • Conventional approachCreating separate mobile sites and ensuring that they worked on a multitude of devices was popular for a while. However, as the sheer number of smart devices grew this approach simply became uneconomical. Web designers now had to consider the user experience for each variation of mobile device, browser, operating system and display resolution, and how to best take advantage of each combination. Further complicating matters, web design had to be completely reimagined for the keyboard and touch interface.
  • Coined by Ethan Marcotte in May 2010, is a technique for adapting a website’s layout across multiple devices.Responsive Web Design is all about building a web site that is resolution and device independent. It is an evolution of web design, rather than a revolution. Why? Primarily because the foundation of Responsive Web Design stems from two existing web design approaches: graceful degradation and progressive enhancement. The term, Responsive Web Design, was coined by Ethan Marcotte in the popular article on “A List Apart” [http://www.alistapart.com/articles/responsive-web-design/] as an approach which popularized the use of flexible grid layouts, flexible images and media queries into one unified methodology.
  • An example is you might have a side bar navigation on the desktop size version of the site, and then when viewed on a smartphone the menu becomes a select list to save space in the interface. Another example is you might offer functionally on mobile device not available on a desktop. Say you had a restaurant website - When it&apos;s viewed on a mobile device that&apos;s location aware with GPS, a panel appears saying &quot;Get directions to our restaurant from your location&quot;. Desktops don&apos;t know their location so it doesn&apos;t appear to them.&quot;Adaptive web sites are those that adapt their design, structure and content to best meet the needs of their users over time. This is usually achieved by reviewing statistical information about user behaviour (e.g., through analytics data) and enhancing the design and content in key areas to best meet users expectations. Responsive design is where a web site will respond to the capabilities of a user&apos;s technological capabilities to best meet the user&apos;s needs. That is to say, it will adapt to the screen size/resolution of the user&apos;s device, ability to use javascript, responsiveness to HTML5 and CSS3 technologies, etc. to ensure that the user experience is the best it can be.....&quot;
  • Friendly? A mobile friendly site makes me more likely to buy a product or use a service.Unfriendly If I don’t see what I’m looking for right away on a mobile site, I’ll quickly move on to another site.Mobile-friendly sites turn users into customersNot having a mobile-friendly site helps your competitors Non-mobile friendly sites can hurt a company’s reputation
  • Coined by Ethan Marcotte in May 2010, is a technique for adapting a website’s layout across multiple devices.Responsive Web Design is all about building a web site that is resolution and device independent. It is an evolution of web design, rather than a revolution. Why? Primarily because the foundation of Responsive Web Design stems from two existing web design approaches: graceful degradation and progressive enhancement. The term, Responsive Web Design, was coined by Ethan Marcotte in the popular article on “A List Apart” [http://www.alistapart.com/articles/responsive-web-design/] as an approach which popularized the use of flexible grid layouts, flexible images and media queries into one unified methodology.
  • http://www.topsharepoint.com/responsive-sharepoint-websites
  • Themes v3.0
  • Configure device channels to show different master pages per device channelEven different display templates based on the same design per device channel
  • The problem with fixed grids is that designs are typically based on pixels.They are not based off of the device resolutionLeverage CSS Frameworks like bootstrap
  • So here we have a picture of the Title. We want to give wrap that around a the Header 1 tag. However we don’t want to restrict it based on a pixel widthWe want it to relatively grow / shrink based on the full sizeMore info - http://alistapart.com/article/fluidgrids
  • In plain English, we’re asking the device if its horizontal resolution (max-device-width) is equal to or less than 480px. If the test passes—in other words, if we’re viewing our work on a small-screen device like the iPhone—then the device will load custom.css. Otherwise, the link is ignored altogether.Reference http://alistapart.com/article/responsive-web-design
  • Flexible images are also sized in relative units (up to 100%), so as to prevent them from displaying outside their containing element.
  • Flexible images are also sized in relative units (up to 100%), so as to prevent them from displaying outside their containing element.
  • Flexible images are also sized in relative units (up to 100%), so as to prevent them from displaying outside their containing element.
  • Get familiar with Design Manager
  • Define your Viewport &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;Modify CSS for media queriesConvert from Fixed to Fluid- Convert each div container to take advantage of the css framework
  • HTML5Shiv - it enables styling for HTML5 elements by non-HTML5 browsers such as IE 8 and older. Why is this a problem for HTML5 elements? Browsers typically won’t apply styling to elements that they don’t recognize.
  • Responsive SharePoint - Download: Bootstrap for SharePoint …responsivesharepoint.codeplex.com/re
  • Transcript of "Responsive Web Design for SharePoint 2013"

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

      Clipping is a handy way to collect important slides you want to go back to later.

    ×