Freigeben über

Leitfaden zum Branding für SharePoint Online-Portale

  • Artikel

Die Fähigkeit, ein benutzerdefiniertes Branding auf ein Portal anzuwenden, spielt eine wesentliche Rolle; in diesem Artikel erhalten Sie eine Übersicht über die Brandingoptionen und die bewährten Methoden für das Branding.

Hinweis

Obwohl dieser Leitfaden in erster Linie auf SharePoint Online abzielt, gilt er größtenteils auch für Portale, die in einer lokalen SharePoint-Umgebung gehostet werden.

Was Sie nicht tun sollten

Die folgende Liste enthält die wichtigsten Dinge, die Sie beim Anwenden eines Brandings auf Ihr Portal nicht tun sollten.

Don’ts:

  • Außerkraftsetzen des Brandings der Office 365 Suite-Leiste.
  • Anpassen des Brandings für persönliche Websites.
  • Standardmäßiges Implementieren Ihres benutzerdefinierten Brandings mithilfe von benutzerdefinierten Gestaltungsvorlagen.

Brandinganforderungen und allgemeine Grundsätze

Organisationen wünschen sich in der Regel, dass ihr Portal einzigartig ist. Benutzerdefiniertes Branding kann hilfreich sein, um die Unternehmensmarke und -werte zu fördern, deshalb ist eine Lösung für benutzerdefiniertes Branding für Unternehmensportal so wichtig.

Typische Brandinganforderungen beim Erstellen von benutzerdefinierten SharePoint Online-Portalen

  • Anpassen des Aussehens:

    • Implementieren Sie ein benutzerdefiniertes Farbschema.
    • Zeigen Sie ein benutzerdefiniertes Logo an.
    • Passen Sie das Aussehen der Anmeldeseite an.
    • Ändern Sie das Aussehen der Navigationssteuerelemente.

  • Anpassen des Layouts:

    • Ändern Sie das gesamte Layout von Informationen auf Seiten.
    • Gestalten Sie das Portal „dynamischer“.
    • Zeigen Sie eine benutzerdefinierte Fußzeile an.

  • Hinzufügen weiterer Funktionen:

    • Passen Sie das Verhalten der Portalnavigation an.
    • Fügen Sie benutzerdefinierte Steuerelemente (Webparts) auf Seiten hinzu.

In den folgenden Abschnitten wird besprochen, wie Sie diese Anforderungen erfüllen können.

Allgemeine Grundsätze

Denken Sie über die folgenden allgemeinen Grundsätze beim Branding von Portalen in einer SharePoint Online-Umgebung nach:

  • Der SharePoint Online-Dienst wird ständig verbessert. Für den Dienst bereitgestellte Updates können sich auf die DOM-Struktur (Dokumentobjektmodell) von vordefinierten Seiten und die Inhalte von vordefinierten Dateien (z. B: Gestaltungsvorlagen) auswirken. Entwickler müssen dies beachten und sollten nicht auf nicht unterstützte Anpassungsansätze zurückgreifen (z. B. die Position von bestimmten Elementen in der DOM-Struktur der Seite).

  • Passen Sie keine Gestaltungsvorlagen an. Updates für den Dienst können sich auf die Struktur von vordefinierten Gestaltungsvorlagen auswirken. Wenn Sie eine benutzerdefinierte Gestaltungsvorlage implementiert haben, indem Sie die Inhalte einer vordefinierten Gestaltungsvorlage kopiert haben, müssen Sie weiter überwachen, ob diese vordefinierte Gestaltungsvorlage nicht aktualisiert wird, und diese Änderungen erneut in Ihrer benutzerdefinierten Gestaltungsvorlage implementieren. Andernfalls verhalten sich einige SharePoint-Funktionen möglicherweise nicht korrekt, wenn die benutzerdefinierte Gestaltungsvorlage verwendet wird. Aus diesem Grund führt das Anpassen von Gestaltungsvorlagen zu zusätzlichen Risiken und Wartungskosten, und es wird empfohlen, dies, wenn möglich, zu vermeiden.

  • Angepasstes Branding von persönlichen Websites (OneDrive for Business-Websites) wird nicht unterstützt. Sie können benutzerdefinierte Farbschemas über Brandingeinstellungen auf Office 365-Mandantenebene anwenden). Beachten Sie, dass dies für die standardmäßige moderne Benutzeroberfläche von OneDrive for Business gilt.

  • SharePoint Online-Portale müssen als Teil des gesamten Office 365-Ökosystems betrachtet werden. Deshalb weist jedes Portal nun eine Office 365 Suite Bar auf, deren Anpassung nicht unterstützt wird (weitere Informationen finden Sie im Abschnitt Office 365 Suite Bar).

  • Bei der Planung des Brandings und der Struktur Ihrer Navigationskomponenten ist es wichtig, die Empfehlungen in den Navigationslösungen für SharePoint Online-Portale zu befolgen.

  • Beim Erweitern der Portalfunktionalität über benutzerdefinierte Steuerelemente (Webparts) ist es wichtig, die Empfehlungen im Leitfaden zur Leistung für SharePoint Online-Portale zu befolgen.

  • Es gibt wesentliche Unterschiede zwischen den Brandingansätzen für klassische und moderne Websites und Seiten. Informationen zu modernen Websites und Seiten finden Sie unter Anpassen von modernen Teamwebsites und Anpassen von modernen Websiteseiten.

Anpassen des Aussehens

Es gibt verschiedene Arten vordefinierte Möglichkeiten zum Anpassen des Aussehens von SharePoint-Portalen:

  • Administratoren können das Office 365-Design für einen ganzen Mandanten anpassen.
  • Ein benutzerdefiniertes Design kann auf eine bestimmte Website angewendet werden.

Diese Techniken können verwendet werden, um die erforderlichen Farben abzurufen und eine flexible Farbgestaltung über unterschiedliche Portalwebsites hinweg zu ermöglichen. Wenn Sie mehr Flexibilität benötigen, empfehlen wir, dass Kunden mit einer vordefinierten Gestaltungsvorlage (seattle.master) beginnen und ein benutzerdefiniertes Design anwenden und/oder die benutzerdefinierten CSS-Einstellungen der Website (Web.AlternateCSSUrl) verwenden, um die erforderlichen CSS-Dateien zu verknüpfen. Ein benutzerdefiniertes Logobild kann mithilfe der Web.SiteLogoUrl-Eigenschaft festgelegt werden.

Diese Methoden werden in den folgenden Artikeln und PnP-Beispielen veranschaulicht:

Halten Sie sich beim Entwickeln benutzerdefinierter CSS-Dateien für SharePoint an die folgenden Empfehlungen:

  • Beschränken Sie das Außerkraftsetzen vordefinierter CSS-Klassen.
  • Verwenden Sie die Web.AlternateCssUrl-Eigenschaft, um benutzerdefinierte CSS-Dateien einzuschließen.
  • Überschreiben Sie nicht das Branding der Office 365 Suite Bar, da dies zu einer nicht zusammenhängenden Erfahrung führt, wenn Benutzer weg vom Portal navigieren.

Office 365-Anmeldeseite

Kunden können ein Unternehmensbranding auf die Office 365-Anmeldeseite anwenden. Dieser Prozess wird unter Hinzufügen Ihres Unternehmensbrandings zur Anmeldeseite von Office 365 beschrieben.

Office 365 Suite Bar

Die Anweisungen für die Suite Bar aus der Sicht von Microsoft lautet wie folgt:

  • Die Suite-Leiste ist eine Navigationskomponente auf Mandantenebene, mit der sich Benutzer ganz einfach zwischen allen Office 365-Diensten bewegen können.
  • Ihre Portalanwendung ist nicht im Besitz der Suite Bar und sollte sich auch nicht so verhalten.
  • Behandeln Sie die Suite Bar wie die Browsersymbolleiste: sie ist nicht Teil Ihrer Anwendung.
  • Sie können die Suite Bar ändern/konfigurieren, aber nur auf Mandantenebene und nur über die Office 365-Administratorseiten.
  • Verwenden Sie keinen Code, um die Suite Bar innerhalb Ihrer Anwendung zu ändern (zu verschieben/auszublenden).
  • Verwenden Sie Aspekte der Suite Bar nicht wieder in Ihrer Anwendung (z. B. das App-Startfeldsymbol).
  • Wenn Sie zu viel nachdenken, werden in Zukunft mit großer Wahrscheinlichkeit unerwartete Probleme auftreten.

Anpassen des Layouts

Wenn das Anpassen des Layouts von SharePoint-Portalen besprochen wird, ziehen Entwickler häufig das Erstellen einer benutzerdefinierten Gestaltungsvorlage als erste Option in Erwägung. Benutzerdefinierte Gestaltungsvorlagen werden zwar immer noch unterstützt, wir empfehlen diesen Ansatz jedoch aufgrund der zuvor erläuterten Gründe nicht. Benutzerdefinierte Gestaltungsvorlagen führen langfristig zu zusätzlichen Risiken und Wartungskosten.

Entwickler sollten sich über alternative Ansätze Gedanken machen, über die das Layout von SharePoint-Portalen angepasst werden kann. Zu diesen zählen:

  • Implementierung von benutzerdefiniertem CSS.
  • Verwenden von benutzerdefinierten Seitenlayouts.
  • Implementierung von allgemeinen Brandingelementen (z. B. "Fußzeile") durch Einfügen von clientseitigen Skripts (dieser Ansatz wird im nächsten Abschnitt erläutert).

Durch eine Kombination dieser Ansätze können Sie Ihr gewünschtes SharePoint-Portallayout erzielen, ohne benutzerdefinierte Gestaltungsvorlagen zu entwickeln.

Die folgenden PnP-Beispiele und Lösungen auf GitHub veranschaulichen, wie dies erreicht werden kann:

Hinzufügen von Funktionen

Durch Einbetten clientseitiger Skripts in den Seiten können Sie das Aussehen und die Funktionalität des Portals weiter anpassen. Dieser Ansatz kann beispielsweise zum Anpassen von Navigationssteuerelementen, zum Hinzufügen von Kopfzeilen und Fußzeilen zu allen Seiten des Portals oder zum Implementieren anderer benutzerdefinierter UI-Blöcke verwendet werden.

Die folgenden Methoden können zum Einbetten von JavaScript verwendet werden:

  • Fügen Sie eine benutzerdefinierte Aktion auf der Ebene der Website oder der Websitesammlung hinzu. Dadurch kann die Ausführung eines Teils des JavaScript-Codes auf allen Seiten der Website oder der Websitesammlung ausgelöst werden.

  • Fügen Sie ein Inhalts-Editor- oder Skript-Editor-Webpart auf einer Seite hinzu, indem Sie tatsächlichen JavaScript-Code verwenden oder eine Verknüpfung zu einer JavaScript-Datei erstellen. Auf diese Weise kann die Ausführung von JavaScript-Code auf einer bestimmten Seite ausgelöst werden.

  • Schließen Sie JavaScript-Code oder eine Verknüpfung zu einer JavaScript-Datei in den Inhalt einer Seitenlayoutdatei ein. Auf diese Weise kann die Ausführung von JavaScript auf allen Veröffentlichungsseiten ausgelöst werden, die diese Seitenlayoutdatei verwenden.

Hinweis

Der Ansatz mit der benutzerdefinierten Aktion funktioniert nur auf klassischen Seiten und auf den aktuellen Veröffentlichungsportalen.

In den folgenden PnP-Beispielen wird veranschaulicht, wie das Einbetten von JavaScript erzielt werden kann:

Hinweis

Beim Erweitern der Portalfunktionalität mithilfe von JavaScript ist es wichtig, die Empfehlungen im Leitfaden zur Leistung für SharePoint Online-Portale zu befolgen.

Bereitstellen von Brandingobjekten

Der letzte Schritt bei der Implementierung einer Brandinglösung ist das Bereitstellen von Brandingobjekten. Dazu gehören in der Regel Bild-, CSS- und JavaScript Dateien.

Es gibt mehrere Möglichkeiten, um diese Dateien bereitzustellen:

  • Veröffentlichen von Dateien in individuellen Websitesammlungen. In diesem Fall kann jede Websitesammlung ihre eigene Version von Brandingobjekten verwenden. Der Zugriff auf Dateien wird mithilfe der standardmäßigen SharePoint-Sicherheitsmechanismen gesteuert. Für die Aktualisierung von Dateien müssen Sie diese jedoch in jede Websitesammlung erneut hochladen.

  • Veröffentlichen von Dateien in einer Bibliothek in einer Websitesammlung (zentraler Speicherort). In diesem Szenario können alle Websitesammlungen die neueste Version von Brandingobjekten verwenden. Aktualisierte Dateien müssen nur an einen Speicherort hochgeladen werden. Administratoren müssen sicherstellen, dass Benutzer aller Websitesammlungen Zugriff auf die an dem zentralen Speicherort veröffentlichten Dateien haben.

  • Veröffentlichen von Dateien im CDN (Webanwendung, Azure CDN oder Office 365-CDN). In diesem Fall können alle Websitesammlungen die neuste Version von Brandingobjekten verwenden. Aktualisierte Dateien müssen nur an einen Speicherort hochgeladen werden. Mithilfe von CDNs kann die Leistung verbessert werden, die Inhalte werden jedoch außerhalb von SharePoint gespeichert, deshalb können Objekte nicht mithilfe der standardmäßigen SharePoint-Sicherheitsmechanismen geschützt werden (mit Ausnahme der privaten CDN-Funktion von Office 365, die Dateien in einem CDN schützen kann).

Das PnP-Bereitstellungsmodul kann zum Bereitstellen von Brandingobjekten in SharePoint-Bibliotheken verwendet werden. Wenn Sie die Office 365-CDN-Funktion verwenden, werden die Dateien automatisch im CDN bereitgestellt. Wenn Sie alternative CDN-Lösungen verwenden, wird ein benutzerdefinierter Bereitstellungsansatz zum Veröffentlichen von Dateien in CDNs benötigt.

Weitere Informationen zu CDNs finden Sie unter:

Siehe auch