#060 – Pimp my Teamsite – Tipps für die Modern Page Layouts in Office 365
Dokumente, Listen, Termine, Bilder und und und… Was sich nicht alles auf einer Website befindet und die wichtigsten Informationen sind dann oft auch noch versteckt! In unserer heutigen Folge dreht sich alles um die Visualisierung eurer SharePoint Inhalte mit den Webparts der modern Pages. Damit könnt ihr schicke Startseiten für Teamwebsites gestalten, eurem Intranet ein neues Design verpassen und alle Inhalte in moderner und ansprechender Weise darstellen.
Daher bekommt ihr heute von uns einige Tipps zur Gestaltung, erfahrt, was es denn eigentlich alles für Webparts gibt, ob diese auch individuell anpassbar sind, und was uns in der Zukunft hier noch erwartet.
Bevor ihr anfangt eure SharePoint Seiten oder gar eine ganze Website zu gestalten, solltet ihr euch Gedanken über verschiedene Dinge machen.
Allgemeine Überlegungen zu eurem Design
Firmen Design
Habt ihr Vorgaben oder Corporate Design Richtlinien die ihr beachten müsst? Informiert euch vorher darüber, es gibt viele verschiedene Farben um den Look zu ändern und daran auch das Design eurer Seiten anzupassen. Wenn es aber nicht in euer Corporate Design passt ist es schade um die Arbeit.
Bilder
Klar, erst Bilder bringen Leben in eine Seite. Denkt aber hier auch immer daran, dass ihr die Bildrechte besitzen müsst. Also nicht einfach los googlen und alle Bilder verwenden. Wir haben gute Erfahrungen mit Bildpools gemacht. Sprecht doch mal mit eurer Marketingabteilung oder wo auch immer bei euch Bilder gekauft werden, ob so etwas nicht eingerichtet werden kann. Dann seid ihr auf der sicheren Seite.
Navigation
Wenn ihr einer Website ein neues Design verpassen wollt, dann macht euch auch Gedanken über eine sinnvolle Strukturierung der Navigation. Was ist wirklich wichtig und sollte damit in den Vordergrund gestellt werden, welche Anordnung macht Sinn usw.
Struktur
Überlegt euch oder probiert aus, wie es euch am besten gefällt und ihr eine modern Page aufbauen möchtet. Wenn ihr euren Favoriten gefunden habt, sollten sich einige Elemente in allen Seiten wiederholen. Ein Beispiel wären die Ansprechpartner. Wenn ihr diese gerne rechts oben haben möchtet, setzt diese auf jeder Seite dorthin, dass hilft allen, sich besser zurecht zu finden.
Der Seitenaufbau
Auf einer modernen SharePoint Seite habt ihr die Möglichkeit am Anfang der Seite ein Bilde oder ein Hero Webpart (dazu später noch mehr) einzufügen, das sich über die gesamte Breite der Seite zieht. Möchtet ihr dies nicht, kann dieser Abschnitt auch einfach gelöscht werden und ihr fügt einen neuen Abschnitt hinzu. Jedem Abschnitt könnt ihr ein Spaltenlayout zuweisen:
Bildquelle: nubospace.sharepoint.com
Bei Kommunikationsseiten habt ihr zusätzlich das Abschnittslayout Gesamtbreite. Dem Abschnitt können auch Hintergrundfarben zugewiesen werden, diese richten sich nach dem zuvor ausgewählten Seitendesign. Jedem Abschnitt könnt ihr dann beliebig Webparts hinzufügen.
Webparts in der Classic Experience und den Modern Pages
Beginnen wir mit einem kurzen Blick auf die Übersicht der Webparts und wenn wir schon dabei sind, schauen wir doch auch gleich mal, welche Unterschiede es zwischen den Webparts der Classic Experience und den Modern Pages gibt.
| Webpart | Classic | Modern | Tipps zur modern Page |
| Text hinzufügen | Mit dem Content Editor ist es möglich Texte hinzufügen und zu formatieren, Bilder direkt mit einzufügen oder den Inhalt mit HTML zu bearbeiten. | Mit dem Text Webpart könnt ihr Texte formatieren und Tabellen auf eurer Seite hinzufügen. Verschachtelte Tabellen werden noch nicht unterstützt | |
| Anzeigen einer Bibliothek | Sobald eine Bibliothek erstellt wird, wird auch ein Webpart erstellt, was ausgewählt werden kann. | Mit dem Webpart Dokumentenbibliothek kann eine Bibliothek der Website ausgewählt und der Inhalt (z.B. nur ein einzelne Ordner) und Ansicht die verwendet werden soll festgelegt werden. Es ist außerdem möglich, dass je nach Einstellung direkt in dem Webpart Dokumente hochgeladen werden, bearbeitet oder gelöscht werden. | |
| Anzeigen einer Liste | Wie bei einer Bibliothek wird auch beim Anlegen einer Liste automatisch ein Webpart erstellt, welches dann ausgewählt werden kann. | Mit dem modernen Listenwebpart kann eine Liste ausgewählt, der Titel angepasst, die Ansicht ausgewählt und sogar die Größe der Liste, also wie viele Elemente angezeigt werden sollen bestimmt werden. Wurden Spalten in der Liste formatiert, wird die Formatierung mit übernommen und dargestellt. | Hier kann super schön mit formatierten Spalten ein Cockpit für Projekte mit den verschiedenen Status aufgezeigt werden. |
| Anzeigen einer Datei | Page viewer | Der Datei-Viewer ermöglicht das einfügen und anzeigen von über 270 Dateitypen. Neben den bekannten Office-Dateitypen sind auch 3D-Modelle oder medizinische Bilder möglich.
Mit dem Webpart Einbetten ist es zusätzlich möglich, Inhalte aus anderen Seiten einzubinden. |
Perfekt um auf der 1 Seite das neue Modell in 3D darzustellen oder die neue Firmen Präsentation auf der Startseite des Marketing Teams zu zeigen.
|
| Personen Webpart | Contact details web part
|
Personen Webpart – hier gibt es die Möglichkeit detaillierte oder gekürzte Visitenkarten von Personen darzustellen. Die Bearbeitungsmöglichkeiten für Personen, die nicht in der AD angelegt sind, halten sich aber in Grenzen. Hier wird nur die E-Mailadresse angezeigt und es geht nicht weiter zu bearbeiten. | Super um Ansprechpartner gruppiert darzustellen. Mit der Möglichkeit den Titel des Webparts zu bearbeiten können so Gruppierungen vorgenommen werden. |
| Bilder anzeigen | Bilder können hier schon direkt mit dem Content Webpart eingefügt werden. Es gibt zusätzlich noch das Image Webpart und die Picture Library. | Mit den modern Pages haben wir eine Vielzahl an Möglichkeiten Bilder darzustellen. Neben dem bereits beschriebenen Datei-Viewer in dem sich Bilder anzeigen lassen, kann auch ein extra Bildwebpart oder eine Bildergalerie eingefügt werden. Außerdem gibt es das Hero Webpart, was uns bis zu 5 Bilder einfügen lässt. | HeroWebpart: schicker Einstieg in jede Seite! Das HeroWebpart mit bis zum 5 Kacheln hinter denen sich Links verbergen macht sich immer gut um schnell Aufmerksamkeit darauf zu lenken. Die Bilder können tolle Blickfänger sein und wie es so schön heißt, oft sagt ein Bild mehr als tausend Worte.
Webpart Layouts:
|
| Videos anzeigen | Media Webpart | Der Datei-Viewer kann Dateitypen wie .mov, .mp4, .WMV abspielen. Zusätzlich kann aber auch ein oder mehrere Videos aus Stream mit dem Stream Webpart eingebunden werden. Auch das Einbetten Webpart ermöglicht uns das darstellen von Videos und neu auch das YouTube Webpart, dazu später mehr. | |
| Termine anzeigen | Calendar | Gruppenkalender von Office365 Gruppen können eingebunden werden, genauso wie die Ereignislisten. Diese zeigen allerdings keine Terminserien an, was leider doch ein kleines Manko ist. | |
| Links | Neben der Möglichkeit über Links, dem Content Editor oder Announcements sind hier zur Gestaltung von Seiten vor allem die Promoted Links zu erwähnen. Diese stellen in Kachelform Links da. Bilder und Texte werden dabei in einer Liste gepflegt. | Auch bei den modernen Seiten gibt es neben dem einfachen Link, der Möglichkeit von Hyperlinks im Textwebpart eine neue und schöne Darstellmöglichkeit – die Quicklinks. Mit vielen verschieden Layout Varianten sind diese individuell einsetzbar! | OuickLinks – Der kleine Vielfältige Held. Egal ob als Liste, Kachel oder Schaltfläche die Quicklinks sind super und lassen sich eigentlich immer verwenden. Einsatzmöglichkeiten gibt es unzählig! Als Skala, nützliche Links zum Speiseplan, Organigramm oder zum Gebäudeplan. Durch die vielen verschiedenen Möglichkeiten das Webpart selbst zu gestalten und Bilder bzw. Icons mit zu verwenden, sind wir riesen Fan von diesem Webpart!
Webpart Layouts:
|
| Suchen nach und Inhalte anzeigen | Content query,
Content search
|
Das neue Webpart hervorgehobene Inhalte wurde noch einmal verbessert, dazu später mehr 🙂 aber das sei schon gesagt, es ist wirklich gut! | |
| News | Announcements | Mit dem News Webpart kann ausgewählt werden von welcher Seite die Nachrichten angezeigt werden, es können auch alle Seiten ausgewählt werden und es gibt vielfältige Darstellungsmöglichkeiten. | Immer Up-to-Date sein! Mit dem News Webpart könnt ihr die Neuigkeiten überall einbauen, denn durch die verschieden Webpart Layouts findet das Webpart auf jeder Seite seinen Platz.
Webpart Layouts:
|
| Aufgabenliste | Hier wird im Webpart Aufgabenliste, die Aufgaben mit Zeitstrahl angezeigt. | Leider noch nicht verfügbar. Auch der Zeitstrahl fällt in der modernen Aufgabenliste weg. Dafür gibt es das Planner Webpart. | |
| Seiten anzeigen | Site aggregator | SharePoint Online bietet uns mit dem Website Webpart die Möglichkeit die zuletzt angesehenen, beliebtesten oder seit neustem auch die häufig aufgerufenen Seiten des aktuellen Benutzers anzeigen zulassen. | Da es auch hier wieder verschiedene Layouts (Filmstreifen, Karten, Komprimiert) kann hiermit auch eine kleine Navigation zu den wichtigsten Webseiten erstellt werden. |
| Unterhaltungen anzeigen | Site Feed | Yammer Highlights aus Gruppen oder aus dem gesamten Unternehmen können per Webpart eingebunden werden. Außerdem gibt es auch hier eine Neuerung auf die wir später genauer eingehen. | Wir sind ja bekennende Yammer-Fans und finde es super, wenn dieses dann noch direkt auf der SharePoint Seite eingebunden wird. |
| Inhalte von anderen Seiten anzeigen | Page Viewer | Wie schon bei Videos, Bilder oder Dateien kann durch das Webpart Einbetten auch eine ganze Seite mit ihrem Inhalt angezeigt werden. | |
| Sammeln und Darstellen von Formularen | InfoPath Forms | PowerApps und Microsoft Forms |
Neuerungen 2019
Wir haben ja am Anfang des Jahres einen kurzen Blick auf die Neuerungen geworfen die uns 2019 erwarten. In unserem kurzen Video haben wir damals auch die verschiedenen neuen Webparts aufgezeigt und diese stellen wir euch jetzt genauer vor:
Yammer Conversations
Das Yammer Unterhaltungs-Webpart ergänzt das schon bekannte Yammer Highlight Webpart. Dieses ist schon länger verfügbar und kann gezielte Gesprächsfäden anzeigen. Mit dem neuen Unterhaltungs-Webpart ist es dann möglich gezielt Unterhaltungen auszuwählen, egal aus welcher Gruppe, welchen Users oder aus welchem Thema. Die Unterhaltung kann in eine SharePoint Seite, Webseite oder in einen News Artikel eingebunden werden und kombiniert euch so die Zusammenarbeit aus SharePoint mit den Unterhaltungen und sozialen Verbindungen von Yammer.
Personalisierte Webparts
Mit den personalisierten Webparts wird es möglich, für die einzelnen User konkrete Inhalte anzuzeigen, die für diese relevant sind. So ist der Inhalt der Webparts davon abhängig, wer angemeldet ist und je nach Benutzer werden unterschiedliche Informationen für diesen angezeigt.
Meine aktuellen Dokumente
Mit dem personalisierten Webpart sieht jeder Nutzer dann seine eigenen neusten Dokumente oder Nachrichten. Die Filtereinstellungen die vorgenommen wurden, werden dann für jeden Nutzer angewandt, sodass relevante Inhalte und Informationen für genau ihn angezeigt werden.
Meine häufig aufgerufenen Seiten
Das zweite personalisierte Webpart zeigt jedem Nutzer die Seiten an, die er häufig verwendet. Dies ist die gleiche Liste, die er in seiner eigenen SharePoint Homepage sehen wird.
Microsoft Stream
Das Webpart für Stream hat ein Update erhalten. Ihr habt jetzt die Möglichkeit, nach dem ihr einen Kanal hinzugefügt habt, die Videos nach Beliebtheit, Veröffentlichungsdatum, Aufrufen oder Likes zu sortieren. Und wenn die Videos über die SharePoint App angesehen werden, werden diese wie vorgesehen in der App wiedergeben.
Einfügen von Youtube Videos
Mit dem Webpart Youtube ist es möglich, einfach Videos einzufügen. Dafür benötigt ihr nur den von YouTube bereitgestellten Freigabelink, den ihr einfügt und schon ist das Video zum Streamen bereit.
Countdown Timer
3,2,1 oder so ähnlich :). Der Countdown Timer ermöglicht euch in Zukunft das Anzeigen von Zeiträumen bis zu einem bestimmten Ereignis. Egal ob es sich um die nächste Firmenvollversammlung, das nächste Fälligkeitsdatum eines Projektmeilensteins oder die nächste Produktvorstellung handelt. Ihr gebt das Datum und die Uhrzeit des Events an, fügt Text und Hintergrundbild hinzu und habt schon einen Countdown erstellt.
Quick chart
Alle Diagrammfans dürfen sich freuen, mit dem Quick Chart wird es möglich, den Inhalt von Listen schnell über ein ansprechendes und übersichtliches Diagramm darzustellen.
Codeausschnitt
Codeausschnitte mit richtiger Syntax einfach teilen. Entwickler können hierrüber in verschieden Programmiersprachen Codeausschnitte veröffentlichen.
Markdown
Mit diesem Webpart könnt ihr euch euren Codetext nebendran als klare HTML Version anzeigen lassen.
Webpart Verbindungen
Das SharePoint Framework (#SPFX) Update (v1.7) ist relevant für die Webparts und wie diese miteinander interagieren. Ihr könnt mehrere Webparts mit einander verbinden. Entwicklern ist es auch möglich, Anwendungen zu erstellen und SharePoint-Webparts als Registerkarte in Teams zu integrieren.
Durch das Verbinden von Webparts könnt ihr zum Beispiel an die Anzeige einer Dokumentenbibliothek eine Dokumentenvorschau hinzufügen.
Für die Administratoren unter euch
Es ist möglich, das Verwenden von Webparts die auf Inhalte außerhalb von Microsoft-Dienste zugreifen, zu verhindern. Diese Webparts könnt ihr über den PowerShell Befehl Set-SPOTenant -DisabledWebPartIds ausblenden.
Zusätzliche Webparts der modern Page
Wetter
Ein nettes Webpart um eure Seite aufzulockern. Außerdem haben wir die Erfahrung gemacht, dass grade bei Intranet Startseiten, dies für die Mitarbeiter eine Interessante Information ist.
Bindet euren Twitter-Accout ein um alle zu informieren, was das Unternehmen postet. Ihr könnt auch konkret nur einen Tweet einbinden.
Kindle-Vorschau
Mit dem Einbindungscode könnt ihr hier eine Sofortvorschau auf ein Kindel anzeigen lassen. Eine Möglichkeit so Lernmaterial für euren Weiterbildungsbereich zu bewerben.
PowerBI
Zeigt Berichte aus PowerBI an. Zahlen können motivieren 🙂
Websiteaktivität
Ihr möchtet wissen wie oft Webseiten angesehen werden? Dann fügt diese Webpart ein und ihr erhaltet eine schöne Übersicht.
Außer diesen Webparts könnt ihr mit der Trennline noch eine optische Formatierung eurer Inhalte auf euren Seiten vornehmen.
Ihr habt jetzt richtig Lust bekommen eure Seiten modern zu gestalten? Dann nichts wie los!
Sendet uns, bis zwei Wochen nach der Veröffentlichung dieser Folge, den Screenshoot eurer modern Page und gewinnt ein Fachbuch über Website Design. Wir freuen uns auf eure Screenshoots :). Schreibt uns natürlich auch wenn ihr Themenwünsche habt, diesen werden wir gerne eine Folge widmen!
Links:
