SlideShare ist ein Scribd-Unternehmen logo
1 von 22
3
New Interface
 Design style formerly known as “Metro”
   At least they didn’t change the name to a symbol …
 The Ribbon
   Something is always moving
   Focus on Content
 Site Settings
   Galleries vs Web Designer Galleries
   Look and Feel vs Look and Feel
 Navigation
   To Manage or not to Manage



                                                        5
The Ribbon




             6
Site Settings
 Galleries vs Web Design Galleries
   “Themes” is now theme asset storage
   “Composed Looks” use theme assets for themes
 Look and Feel vs Look and Feel
   How much more are they going to move on us?




                                                  7
Galleries vs Web Designer Galleries




                                      8
Look and Feel vs Look and Feel




                                 9
Navigation
 Managed Metadata Navigation
   Use the Term Store
   Use the Edit Button
   Finally cross site collection navigation?... Nope!
 Structured Navigation
   The navigation we all know and…love?




                                                        10
Design Manager




                 12
Device Channels
 Finally the answer to mobile we’ve been waiting for
   More Control, Less Headache
   Managed through Device Manager steps 2 and 7
 A Catch… or two
   Automatic Mobile Browser Redirection feature must be deactivated




   Can only be assigned to the Site Master page



                                                                      13
The SharePoint Parts
If there’s something weird and it don’t look good who you gonna call?


 Accessed through “Edit Master Pages” “Conversion Successful” link
 Snippets are rendered SharePoint controls similar to the beloved theming
 engine.
 Use the Snippet Gallery to insert Top Navigation, Left Navigation, Search, etc.
 Configure, Copy, Paste… That simple




                                                                                   16
You can still use SharePoint Designer…
 Or Not
   WebDav
     On Windows
     On OS X - Limitations
   Use the application you are most comfortable with
     NotePad++ - Windows Only
     Sublime Text 2 – Windows and OS X
     Coda – OS X

 For those resistant to change
   “Metro”
   No design and split view have been removed.
   Not much else appears to have changed

                                                       19
© 2012 Slalom, LLC. All rights reserved. The information herein is for informational purposes only and represents the current view of Slalom, LLC. as of the date of this presentation.
                     SLALOM MAKES NO WARRANTIES, EXPRESS, IMPLIED, OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Weitere ähnliche Inhalte

Was ist angesagt?

Your SharePoint 2013 Branding Initiation
Your SharePoint 2013 Branding InitiationYour SharePoint 2013 Branding Initiation
Your SharePoint 2013 Branding InitiationEric Overfield
 
Branding SharePoint from Prototype to Deployment - Workshop
Branding SharePoint from Prototype to Deployment - WorkshopBranding SharePoint from Prototype to Deployment - Workshop
Branding SharePoint from Prototype to Deployment - WorkshopEric Overfield
 
Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew
Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy DewMake SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew
Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy DewCathy Dew
 
Branding Deployment in Office 365 and SharePoint 2013/2016
Branding Deployment in Office 365 and SharePoint 2013/2016Branding Deployment in Office 365 and SharePoint 2013/2016
Branding Deployment in Office 365 and SharePoint 2013/2016Stefan Bauer
 
Branding Modern SharePoint
Branding Modern SharePointBranding Modern SharePoint
Branding Modern SharePointEric Overfield
 
Making Commerce, Webform & Group play nicely together - DrupalCamp Dublin 2017
Making Commerce, Webform & Group play nicely together - DrupalCamp Dublin 2017Making Commerce, Webform & Group play nicely together - DrupalCamp Dublin 2017
Making Commerce, Webform & Group play nicely together - DrupalCamp Dublin 2017Chandeep Singh Khosa
 
Sitecore Experience Accelerator (SxA)
Sitecore Experience Accelerator (SxA)Sitecore Experience Accelerator (SxA)
Sitecore Experience Accelerator (SxA)Ruud van Falier
 
Wd & im session a4 _creating a web page _april 08,2010
Wd & im session a4 _creating a web page _april 08,2010Wd & im session a4 _creating a web page _april 08,2010
Wd & im session a4 _creating a web page _april 08,2010Mahesh Panchal
 
Geek Business to Business(B2B) credentials
Geek Business to Business(B2B) credentialsGeek Business to Business(B2B) credentials
Geek Business to Business(B2B) credentialsGeek Creative Agency
 
Brand Your Community Using Less and Gulp
Brand Your Community Using Less and GulpBrand Your Community Using Less and Gulp
Brand Your Community Using Less and Gulpshujiui
 
Summit14 -T4.2: BadA$$ Career Sites - Nakamura
Summit14 -T4.2: BadA$$ Career Sites - NakamuraSummit14 -T4.2: BadA$$ Career Sites - Nakamura
Summit14 -T4.2: BadA$$ Career Sites - NakamuraJobvite
 
Lightning Bolt for Communities 101
Lightning Bolt for Communities 101Lightning Bolt for Communities 101
Lightning Bolt for Communities 101Salesforce Admins
 
AngularDay 2018 - Angular Elements
AngularDay 2018 - Angular ElementsAngularDay 2018 - Angular Elements
AngularDay 2018 - Angular ElementsMichele Stieven
 
SharePoint 2013 Client-Side Rendering (CSR) & JSLink Templates
SharePoint 2013 Client-Side Rendering (CSR) & JSLink TemplatesSharePoint 2013 Client-Side Rendering (CSR) & JSLink Templates
SharePoint 2013 Client-Side Rendering (CSR) & JSLink TemplatesMuawiyah Shannak
 
It takes a village: workflows to enable code/no-code collaboration - No Code ...
It takes a village: workflows to enable code/no-code collaboration - No Code ...It takes a village: workflows to enable code/no-code collaboration - No Code ...
It takes a village: workflows to enable code/no-code collaboration - No Code ...Webflow
 
No code customisations and solutions for SharePoint
No code customisations and solutions for SharePointNo code customisations and solutions for SharePoint
No code customisations and solutions for SharePointsharepointbaker
 

Was ist angesagt? (20)

Your SharePoint 2013 Branding Initiation
Your SharePoint 2013 Branding InitiationYour SharePoint 2013 Branding Initiation
Your SharePoint 2013 Branding Initiation
 
Branding SharePoint from Prototype to Deployment - Workshop
Branding SharePoint from Prototype to Deployment - WorkshopBranding SharePoint from Prototype to Deployment - Workshop
Branding SharePoint from Prototype to Deployment - Workshop
 
Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew
Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy DewMake SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew
Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew
 
Branding Deployment in Office 365 and SharePoint 2013/2016
Branding Deployment in Office 365 and SharePoint 2013/2016Branding Deployment in Office 365 and SharePoint 2013/2016
Branding Deployment in Office 365 and SharePoint 2013/2016
 
Branding Modern SharePoint
Branding Modern SharePointBranding Modern SharePoint
Branding Modern SharePoint
 
Making Commerce, Webform & Group play nicely together - DrupalCamp Dublin 2017
Making Commerce, Webform & Group play nicely together - DrupalCamp Dublin 2017Making Commerce, Webform & Group play nicely together - DrupalCamp Dublin 2017
Making Commerce, Webform & Group play nicely together - DrupalCamp Dublin 2017
 
Sitecore Experience Accelerator (SxA)
Sitecore Experience Accelerator (SxA)Sitecore Experience Accelerator (SxA)
Sitecore Experience Accelerator (SxA)
 
Wd & im session a4 _creating a web page _april 08,2010
Wd & im session a4 _creating a web page _april 08,2010Wd & im session a4 _creating a web page _april 08,2010
Wd & im session a4 _creating a web page _april 08,2010
 
SXA in action
SXA in actionSXA in action
SXA in action
 
Geek Business to Business(B2B) credentials
Geek Business to Business(B2B) credentialsGeek Business to Business(B2B) credentials
Geek Business to Business(B2B) credentials
 
Brand Your Community Using Less and Gulp
Brand Your Community Using Less and GulpBrand Your Community Using Less and Gulp
Brand Your Community Using Less and Gulp
 
Summit14 -T4.2: BadA$$ Career Sites - Nakamura
Summit14 -T4.2: BadA$$ Career Sites - NakamuraSummit14 -T4.2: BadA$$ Career Sites - Nakamura
Summit14 -T4.2: BadA$$ Career Sites - Nakamura
 
Lightning Bolt for Communities 101
Lightning Bolt for Communities 101Lightning Bolt for Communities 101
Lightning Bolt for Communities 101
 
AngularDay 2018 - Angular Elements
AngularDay 2018 - Angular ElementsAngularDay 2018 - Angular Elements
AngularDay 2018 - Angular Elements
 
SharePoint 2013 Client-Side Rendering (CSR) & JSLink Templates
SharePoint 2013 Client-Side Rendering (CSR) & JSLink TemplatesSharePoint 2013 Client-Side Rendering (CSR) & JSLink Templates
SharePoint 2013 Client-Side Rendering (CSR) & JSLink Templates
 
It takes a village: workflows to enable code/no-code collaboration - No Code ...
It takes a village: workflows to enable code/no-code collaboration - No Code ...It takes a village: workflows to enable code/no-code collaboration - No Code ...
It takes a village: workflows to enable code/no-code collaboration - No Code ...
 
Html5
Html5Html5
Html5
 
Wireframe
Wireframe Wireframe
Wireframe
 
S3 wireframe diagrams
S3 wireframe diagramsS3 wireframe diagrams
S3 wireframe diagrams
 
No code customisations and solutions for SharePoint
No code customisations and solutions for SharePointNo code customisations and solutions for SharePoint
No code customisations and solutions for SharePoint
 

Ähnlich wie Going "Metro": Branding for SharePoint 2013

Jornata llc sps baltimore 2012 - share point branding
Jornata llc   sps baltimore 2012 - share point brandingJornata llc   sps baltimore 2012 - share point branding
Jornata llc sps baltimore 2012 - share point brandingjcsturges
 
Branding 101 extended
Branding 101 extendedBranding 101 extended
Branding 101 extendedD'arce Hess
 
Lavacon 2014 responsive design in your hat
Lavacon 2014   responsive design in your hatLavacon 2014   responsive design in your hat
Lavacon 2014 responsive design in your hatNeil Perlin
 
5 Simple Actions to Make a Measurable Impact on Your Responsive Site
5 Simple Actions to Make a Measurable Impact on Your Responsive Site5 Simple Actions to Make a Measurable Impact on Your Responsive Site
5 Simple Actions to Make a Measurable Impact on Your Responsive Site5th Finger
 
What's new in SharePoint 2013 - Discover it
What's new in SharePoint 2013 - Discover itWhat's new in SharePoint 2013 - Discover it
What's new in SharePoint 2013 - Discover itBenjamin Niaulin
 
Umbraco Cape Town Meetup Presentation
Umbraco Cape Town Meetup PresentationUmbraco Cape Town Meetup Presentation
Umbraco Cape Town Meetup PresentationBluegrass Digital
 
Branding share point 2013
Branding share point 2013Branding share point 2013
Branding share point 2013Khoa Quach
 
Station Four: Web Redesign Presentation
Station Four: Web Redesign PresentationStation Four: Web Redesign Presentation
Station Four: Web Redesign Presentationcolberding
 
Design ♥ HTML5 – The Future of Mobile Editorial Design
Design ♥ HTML5 – The Future of Mobile Editorial DesignDesign ♥ HTML5 – The Future of Mobile Editorial Design
Design ♥ HTML5 – The Future of Mobile Editorial DesignJohannes Ippen
 
Mobilizing the User Experience
Mobilizing the User ExperienceMobilizing the User Experience
Mobilizing the User ExperienceNina McHale
 
Adapting to a Responsive Design at Untangle the Web on 29th July 2013
Adapting to a Responsive Design at Untangle the Web on 29th July 2013Adapting to a Responsive Design at Untangle the Web on 29th July 2013
Adapting to a Responsive Design at Untangle the Web on 29th July 2013Matt Gibson
 
Bootstrap for Beginners
Bootstrap for BeginnersBootstrap for Beginners
Bootstrap for BeginnersD'arce Hess
 
Branding SharePoint 2013
Branding SharePoint 2013Branding SharePoint 2013
Branding SharePoint 2013NIFTIT
 
Sp sat philly2019
Sp sat philly2019Sp sat philly2019
Sp sat philly2019Peter_1020
 
Progressive Enhancement
Progressive EnhancementProgressive Enhancement
Progressive EnhancementDan Sagisser
 
Going from Classic to Modern. 10 Things you must know before you commit
Going from Classic to Modern. 10 Things you must know before you commitGoing from Classic to Modern. 10 Things you must know before you commit
Going from Classic to Modern. 10 Things you must know before you commitspsnyc
 
Spsat nyc19 190621150118
Spsat nyc19 190621150118Spsat nyc19 190621150118
Spsat nyc19 190621150118Peter_1020
 
Ecommerce Mini Project / Group Project Coding
Ecommerce Mini Project / Group Project CodingEcommerce Mini Project / Group Project Coding
Ecommerce Mini Project / Group Project CodingHemant Sarthak
 
SharePoint 2013 Preview
SharePoint 2013 PreviewSharePoint 2013 Preview
SharePoint 2013 PreviewRegroove
 

Ähnlich wie Going "Metro": Branding for SharePoint 2013 (20)

Jornata llc sps baltimore 2012 - share point branding
Jornata llc   sps baltimore 2012 - share point brandingJornata llc   sps baltimore 2012 - share point branding
Jornata llc sps baltimore 2012 - share point branding
 
Branding 101 extended
Branding 101 extendedBranding 101 extended
Branding 101 extended
 
Branding 101
Branding 101Branding 101
Branding 101
 
Lavacon 2014 responsive design in your hat
Lavacon 2014   responsive design in your hatLavacon 2014   responsive design in your hat
Lavacon 2014 responsive design in your hat
 
5 Simple Actions to Make a Measurable Impact on Your Responsive Site
5 Simple Actions to Make a Measurable Impact on Your Responsive Site5 Simple Actions to Make a Measurable Impact on Your Responsive Site
5 Simple Actions to Make a Measurable Impact on Your Responsive Site
 
What's new in SharePoint 2013 - Discover it
What's new in SharePoint 2013 - Discover itWhat's new in SharePoint 2013 - Discover it
What's new in SharePoint 2013 - Discover it
 
Umbraco Cape Town Meetup Presentation
Umbraco Cape Town Meetup PresentationUmbraco Cape Town Meetup Presentation
Umbraco Cape Town Meetup Presentation
 
Branding share point 2013
Branding share point 2013Branding share point 2013
Branding share point 2013
 
Station Four: Web Redesign Presentation
Station Four: Web Redesign PresentationStation Four: Web Redesign Presentation
Station Four: Web Redesign Presentation
 
Design ♥ HTML5 – The Future of Mobile Editorial Design
Design ♥ HTML5 – The Future of Mobile Editorial DesignDesign ♥ HTML5 – The Future of Mobile Editorial Design
Design ♥ HTML5 – The Future of Mobile Editorial Design
 
Mobilizing the User Experience
Mobilizing the User ExperienceMobilizing the User Experience
Mobilizing the User Experience
 
Adapting to a Responsive Design at Untangle the Web on 29th July 2013
Adapting to a Responsive Design at Untangle the Web on 29th July 2013Adapting to a Responsive Design at Untangle the Web on 29th July 2013
Adapting to a Responsive Design at Untangle the Web on 29th July 2013
 
Bootstrap for Beginners
Bootstrap for BeginnersBootstrap for Beginners
Bootstrap for Beginners
 
Branding SharePoint 2013
Branding SharePoint 2013Branding SharePoint 2013
Branding SharePoint 2013
 
Sp sat philly2019
Sp sat philly2019Sp sat philly2019
Sp sat philly2019
 
Progressive Enhancement
Progressive EnhancementProgressive Enhancement
Progressive Enhancement
 
Going from Classic to Modern. 10 Things you must know before you commit
Going from Classic to Modern. 10 Things you must know before you commitGoing from Classic to Modern. 10 Things you must know before you commit
Going from Classic to Modern. 10 Things you must know before you commit
 
Spsat nyc19 190621150118
Spsat nyc19 190621150118Spsat nyc19 190621150118
Spsat nyc19 190621150118
 
Ecommerce Mini Project / Group Project Coding
Ecommerce Mini Project / Group Project CodingEcommerce Mini Project / Group Project Coding
Ecommerce Mini Project / Group Project Coding
 
SharePoint 2013 Preview
SharePoint 2013 PreviewSharePoint 2013 Preview
SharePoint 2013 Preview
 

Going "Metro": Branding for SharePoint 2013

  • 1.
  • 2.
  • 3. 3
  • 4.
  • 5. New Interface Design style formerly known as “Metro” At least they didn’t change the name to a symbol … The Ribbon Something is always moving Focus on Content Site Settings Galleries vs Web Designer Galleries Look and Feel vs Look and Feel Navigation To Manage or not to Manage 5
  • 7. Site Settings Galleries vs Web Design Galleries “Themes” is now theme asset storage “Composed Looks” use theme assets for themes Look and Feel vs Look and Feel How much more are they going to move on us? 7
  • 8. Galleries vs Web Designer Galleries 8
  • 9. Look and Feel vs Look and Feel 9
  • 10. Navigation Managed Metadata Navigation Use the Term Store Use the Edit Button Finally cross site collection navigation?... Nope! Structured Navigation The navigation we all know and…love? 10
  • 11.
  • 13. Device Channels Finally the answer to mobile we’ve been waiting for More Control, Less Headache Managed through Device Manager steps 2 and 7 A Catch… or two Automatic Mobile Browser Redirection feature must be deactivated Can only be assigned to the Site Master page 13
  • 14.
  • 15.
  • 16. The SharePoint Parts If there’s something weird and it don’t look good who you gonna call? Accessed through “Edit Master Pages” “Conversion Successful” link Snippets are rendered SharePoint controls similar to the beloved theming engine. Use the Snippet Gallery to insert Top Navigation, Left Navigation, Search, etc. Configure, Copy, Paste… That simple 16
  • 17.
  • 18.
  • 19. You can still use SharePoint Designer… Or Not WebDav On Windows On OS X - Limitations Use the application you are most comfortable with NotePad++ - Windows Only Sublime Text 2 – Windows and OS X Coda – OS X For those resistant to change “Metro” No design and split view have been removed. Not much else appears to have changed 19
  • 20.
  • 21.
  • 22. © 2012 Slalom, LLC. All rights reserved. The information herein is for informational purposes only and represents the current view of Slalom, LLC. as of the date of this presentation. SLALOM MAKES NO WARRANTIES, EXPRESS, IMPLIED, OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Hinweis der Redaktion

  1. Audience Identification# of Designers# of Developers# of DevsignersWho has experience Branding SharePoint 2010Who has seen / played with SharePoint 2013“Metro” is no longer “Metro” or is it?
  2. Metro… points out MS use of … as linksMicrosoft documentation still refers to Metro design style in a number of placesMetro has been referred to as Microsoft Design and Windows – UIV15.master default master pageCorev15.css almost double corev4More JavaScript – jsgrid – ~19k linesRibbonSite actions moved back to the right – note use of iconographyBrowse, Page, and Publish tabs behave differently on different pages at different times.Focus on content button removes left nav and header on the fly. Good for users!Site SettingsSlide 6Spy vs Spy joke… who is paying attention?NavigationManaged Metadata NavigationStructured Navigation
  3. New Game called “Where in the UI is Site Actions?”
  4. New to 2013That theme doesn’t mean what you think it themesTheme asset storageComposed LooksThis is where the themes are
  5. One of these things doesn’t look like the otherDesign Manger … get to that laterDevice ChannelsSite theme changed its name to Change the lookImport Design PackageImage Renditions
  6. Demo will cover steps 1, 2, 3, 4, and 7
  7. Snippets can be edited just like SharePoint controls in SharePoint 2010 Master PagesDesign Manager doesn’t do everything for you. It just attaches the base designSnippet Gallery uses a preview interface to configure and render HTML and provides a copy button all on one page
  8. Demo will cover inserting Top Navigation, Left Navigation, and Search snippets into the html master page
  9. Quick View of SPD 2013