Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing for the Office 365 Experience

9,740 views

Published on

As the focus shifts towards working in the “cloud” more and more businesses are utilizing Office 365 for their corporate intranets. This creates new challenges from a User Experience design. In this session we will dive into the methods for customizing an intranet built on Office 365. We will look at the options for customizing and how you can take these options further.

Published in: Technology
  • DOWNLOAD FULL. BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Designing for the Office 365 Experience

  1. 1. Designing for the Office 365 Experience Cathy Dew
  2. 2. Speaker Bio Cathy Dew  Consultant at Planet Technologies  Graphic Designer, Consultant and SharePoint MVP  Over 6 years of SharePoint branding experience  Author: SharePoint 2010: Six in One  catpaint1 on Twitter  www.sharepointcat.com
  3. 3. Agenda  Office 365 Options for Branding  Choosing Options  Customizing Master Pages  Design Manager  Custom Composed Looks  Create Packages  Deploy and Apply
  4. 4. Public or Intranet?  SPO    – Public Facing Composed Looks Custom Master/Custom CSS Custom Page Layouts  Intranet    Composed Look Custom Master Page Custom CSS
  5. 5. Picking the Right Option  Composed Looks  Design Manager  Custom Master/CSS/Page Layouts  Device Channels
  6. 6. Composed Looks  New      “Themes” for SharePoint 2013 Master Page Color Palette CSS Font Palette Background Image
  7. 7. Predefined Options
  8. 8. Customize a Predefined Option
  9. 9. Create Your Own Custom Look
  10. 10. Create Composed Look  Must      HTML file .Master file Preview File Spcolor file Spfont file  Can  have: have: Background Image
  11. 11. Create Custom Composed Look
  12. 12. Where to put files
  13. 13. Custom Composed Look
  14. 14. Create Custom Everything  Use the Design Manager to import an HTML site into SharePoint and apply it
  15. 15. Import HTML Site
  16. 16. Process to import HTML
  17. 17. Edit your Custom Master Page  HTML  file editing Through your desired program  Dreamweaver  in this demo Map drive to your machine  Or open Windows Explorer View
  18. 18. Master Page Gallery
  19. 19. Tips for Custom Master Page  If working with HTML file… Don’t touch the .master file  Editing the .master will invalidate the HTML file
  20. 20. Make use of Preview Pages  Create a couple custom Preview Pages of different site types.  Allows you to view your branding with content from different sites and pages.
  21. 21. Sample Preview Page
  22. 22. HTML Code Snippets • • • Customize the Look/Colo r/Behavior Copy the HTML Snippet Paste into HTML file in desired location
  23. 23. Look for Additions to HTML  On import the Design Manager will insert some <div>s to contain content and the head tags for SharePoint   Ribbon MainContentPlaceholder
  24. 24. Inserted HTML
  25. 25. Customize Master Page In this demo we will add a code snippet to the master page HTML file for our HTML converted file. We will show the file in the Preview page.
  26. 26. Publish & Apply Custom Master  In order to apply the custom designs you have created with publishing and the design manager  Publish all files  CSS  Page Layouts  Master Pages (HTML only)  Apply  the Master Page from the List Publishing only
  27. 27. Where to put files
  28. 28. Create Custom CSS  Reference a Custom CSS file with your Custom Master Page  <link href="style.css" rel="stylesheet" type="text/css" />
  29. 29. Take it Further with CSS  With the Color Palette you can use the palette colors in your Custom CSS files { /* [ReplaceFont(themeFont:”title”)] */ font-family: “Segoe UI Light”, “Segoe UI”, “Segoe”, Tahoma,Helvetica,Arial,sans-serif; /* [ReplaceColor(themeColor: “SiteTitle”)] */ color:#005050; }
  30. 30. How to apply in O365  Solutions    are still the best Apps can be created to house your branding Visual Studio Design Manager  Package  your Design Add to the Solution Gallery  Apply to Multiple Site Collections
  31. 31. Package Designs
  32. 32. Solution Gallery  Upload and Activate
  33. 33. Customize a Master & Page Layout with Design Manager & Tool of Your Choice Master pages, custom CSS, code snippets and more…
  34. 34. Thank you for attending! Cathy Dew, MVP @catpaint1 www.sharepointcat.com

×