WEBVTT - generated by Video Portal TU Dortmund 1 00:00:00.320 --> 00:00:04.000 Herzlich willkommen zum heutigen Vortrag Themen im Fokus 2 00:00:04.000 --> 00:00:07.000 am 13.01.2025. 3 00:00:07.080 --> 00:00:10.480 Heute geht es um die Gestaltung von Webseiten 4 00:00:10.880 --> 00:00:15.040 und zwar Webseiten in unserem TYPO3 System an der TU Dortmund. 5 00:00:15.040 --> 00:00:16.000 Dies bedeutet, 6 00:00:16.000 --> 00:00:20.480 dass grundsätzlich der optische Rahmen bei unseren Websites vorgegeben ist. 7 00:00:20.600 --> 00:00:24.360 Sprich das ist ja der eigentliche Sinn und der Zweck eines Content 8 00:00:24.360 --> 00:00:28.280 Management Systems, dass der gestalterische Rahmen vorgegeben 9 00:00:28.280 --> 00:00:32.920 ist und Redakteure und Redakteurinnen im Kern nur noch Inhalte einpflegen. 10 00:00:33.160 --> 00:00:38.520 Allerdings ist auch da zu beachten: Wenn man Inhalte auf eine Webseite bringt, 11 00:00:38.680 --> 00:00:42.000 muss man auch da gestalterische Grundlagen im Auge behalten. 12 00:00:42.320 --> 00:00:45.480 Und das Kernziel sollte immer sein, 13 00:00:45.800 --> 00:00:49.880 dass die Informationen, die man dort auf die Seite bringt, Text und auch Bild, 14 00:00:50.040 --> 00:00:54.920 von den Betrachtenden der Seite, also den Personen, die auf die Seite kommen, 15 00:00:55.080 --> 00:01:00.000 möglichst optimal, schnell und gut erfasst und gelesen werden können. 16 00:01:00.000 --> 00:01:01.000 Das sollte eigentlich immer 17 00:01:01.000 --> 00:01:04.000 unser gestalterisches Ziel sein, wenn wir redaktionieren. 18 00:01:05.000 --> 00:01:07.000 Und wie erreichen wir dieses Ziel? 19 00:01:07.000 --> 00:01:10.000 Man kann im Kern sagen durch eine Optimierung der Blickführung. 20 00:01:10.000 --> 00:01:12.000 Die Blickführung, die kann man so beschreiben: 21 00:01:12.000 --> 00:01:16.000 Das ist der Weg, den mein Auge auf der Seite zurücklegt. 22 00:01:16.000 --> 00:01:19.000 Und dieser Weg, den mein Auge zurücklegt, der kann dann durch 23 00:01:19.000 --> 00:01:22.000 bestimmte Elemente und bestimmte Dinge beeinflusst werden. 24 00:01:22.000 --> 00:01:25.000 Zum Beispiel durch sehr prägnante Elemente. 25 00:01:25.000 --> 00:01:27.000 Das können unter anderem sein, Überschriften, weil 26 00:01:27.000 --> 00:01:31.000 die sind ja vom Schriftgrad her größer als der eigentliche Fließtext. 27 00:01:31.000 --> 00:01:34.000 Die haben in der Regel auch noch mal eine andere Farbigkeit. 28 00:01:34.000 --> 00:01:38.000 Aber auch Bilder lenken meinen Blick auf sich oder auch 29 00:01:38.000 --> 00:01:41.000 farbige Buttons, andere Strukturen wie Kacheln und Akkordeons. 30 00:01:42.000 --> 00:01:45.000 Wir haben natürlich auch neben diesen prägnanten Elementen die Möglichkeit, 31 00:01:45.000 --> 00:01:50.000 durch Gruppierungen und Strukturierungen von Elementen den Blick zu lenken. 32 00:01:50.000 --> 00:01:53.000 Das bedeutet, wenn ich zum Beispiel einen Fließtext und eine Überschrift habe 33 00:01:54.000 --> 00:01:58.000 und ich rücke die optisch zusammen - das kann man relativ leicht machen, 34 00:01:58.000 --> 00:02:01.000 indem man den beiden Elementen den selben Layoutbereich 35 00:02:01.000 --> 00:02:06.000 in unserem System gibt, damit sie beide vor einem weißen Hintergrund stehen - 36 00:02:06.000 --> 00:02:10.000 dann werden diese Elemente als Gruppe wahrgenommen 37 00:02:10.000 --> 00:02:15.000 und dementsprechend von meinem Auge auch so gewertet, als wäre es eine Gruppe. 38 00:02:15.000 --> 00:02:16.000 Und man weiß sofort, 39 00:02:16.000 --> 00:02:19.000 das ist jetzt eine Themengruppe, die irgendwie zusammengehört. 40 00:02:20.000 --> 00:02:24.000 Ich habe dann mal ein Beispiel für eine gute Blickführung mitgebracht, 41 00:02:24.000 --> 00:02:27.000 und zwar eine gute Blickführung einmal auf Seitenebene. 42 00:02:27.000 --> 00:02:31.000 Da muss ich einmal vorweg sagen, sämtliche Beispielseiten, Beispiele 43 00:02:31.000 --> 00:02:34.000 und auch Inhalte, Texte und Bilder, 44 00:02:34.000 --> 00:02:37.000 sind nicht aus dem Live-System genommen worden. 45 00:02:37.000 --> 00:02:40.000 Das sind keine real existierenden Seiten. 46 00:02:40.000 --> 00:02:44.000 Die Bilder habe ich aus unserem zentralen Bilderpool und auch sämtliche Texte, 47 00:02:44.000 --> 00:02:48.000 die wir hier sehen, sind mittels Text-KI automatisch erzeugt worden. 48 00:02:49.000 --> 00:02:52.000 Das heißt auch da kein Anspruch auf Richtigkeit oder Korrektheit. 49 00:02:53.000 --> 00:02:56.000 So, wir sehen jetzt hier einmal ein Beispiel für die Blickführung 50 00:02:56.000 --> 00:02:57.000 auf Seitenebene. 51 00:02:57.000 --> 00:02:59.000 Und hier sehen wir schon 52 00:02:59.000 --> 00:03:02.000 das Auge fährt in erster Instanz einmal von oben nach unten 53 00:03:02.000 --> 00:03:06.000 die entsprechenden Überschriften im ersten Block der Seite ab, 54 00:03:06.000 --> 00:03:10.000 springt dann zu den Bildkacheln und fährt dann von links nach rechts 55 00:03:10.000 --> 00:03:15.000 die einzelnen Bildkacheln ab, um dann zu guter Letzt einmal unten auf dem Akkordeon 56 00:03:16.000 --> 00:03:20.000 zu verweilen und da die einzelnen Akkordeonitems durchzugehen. 57 00:03:20.000 --> 00:03:23.000 Und man sieht hieran auch schon sehr schön, dass einerseits natürlich die 58 00:03:24.000 --> 00:03:28.000 Überschriften unseren Blick leiten, weil die sind ein bisschen größer dargestellt, 59 00:03:28.000 --> 00:03:30.000 meistens auch in einer anderen Farbigkeit, 60 00:03:30.000 --> 00:03:33.000 aber auch die Bilder ziehen den Blick auf sich 61 00:03:33.000 --> 00:03:37.000 und auch Strukturelemente wie zum Beispiel das Akkordeon sorgen dafür, 62 00:03:37.000 --> 00:03:39.000 dass die Blickführung beeinträchtigt wird. 63 00:03:39.000 --> 00:03:41.000 An dem Beispiel kann man sehr schön sehen, 64 00:03:41.000 --> 00:03:45.000 dass die Nutzung unserer Seitenlayouts, um den einzelnen Segmenten 65 00:03:45.000 --> 00:03:48.000 unterschiedliche Hintergrundfarben zu geben, 66 00:03:48.000 --> 00:03:52.000 auch dazu dient, um die einzelnen Inhalte in Gruppen zu fassen. 67 00:03:52.000 --> 00:03:55.000 In dem Fall weiß ich zum Beispiel, sobald ich auf die Seite schaue: “Gut, 68 00:03:55.000 --> 00:03:57.000 dieser gesamte erste Block mit weißem Hintergrund, 69 00:03:57.000 --> 00:04:01.000 das wird ein thematischer Block sein”, genauso wie die fünf Bildkacheln 70 00:04:01.000 --> 00:04:05.000 einen thematischen Block bilden und auch genauso wie das Akkordeon unten 71 00:04:05.000 --> 00:04:08.000 wiederum vor weißem Hintergrund einen thematischen Block bildet. 72 00:04:09.000 --> 00:04:13.000 Dann haben wir auch noch ein Beispiel für eine eher ungünstige Blickführung, 73 00:04:13.000 --> 00:04:16.000 die mir bei uns in unserem System schon an der ein oder anderen 74 00:04:16.000 --> 00:04:17.000 Stelle begegnet ist. 75 00:04:17.000 --> 00:04:21.000 Und zwar haben wir die Elemente Text und Bild, rechts oder links, 76 00:04:21.000 --> 00:04:23.000 und die werden mitunter auch schon mal gerne 77 00:04:23.000 --> 00:04:28.000 so abwechselnd eingebunden, wie wir das hier auf dieser Seite sehen können. 78 00:04:28.000 --> 00:04:32.000 Das mag auf den ersten Blick vielleicht noch dazu dienen, 79 00:04:32.000 --> 00:04:34.000 die Seite in irgendeiner Form aufzulockern, 80 00:04:34.000 --> 00:04:37.000 aber wenn man sich wirklich mal die Blickführung anschaut, dann sehen wir: 81 00:04:37.000 --> 00:04:40.000 das Auge ist hier auf dieser Seite wirklich gezwungen, 82 00:04:40.000 --> 00:04:45.000 relativ häufig hin und her zu springen, den Blick nach rechts und links zu wenden. 83 00:04:45.000 --> 00:04:48.000 Und das ist natürlich auch dann für das Auge anstrengend. 84 00:04:48.000 --> 00:04:50.000 Das erleichtert auch nicht unbedingt 85 00:04:50.000 --> 00:04:54.000 die Art und Weise, wie die Inhalte hier auf dieser Seite aufgenommen werden. 86 00:04:54.000 --> 00:04:58.000 Es gibt auch eine ungünstige Blickführung, 87 00:04:58.000 --> 00:04:59.000 wenn wir uns nicht auf der 88 00:04:59.000 --> 00:05:03.000 Seitenebene befinden, sondern das Ganze runterbrechen und uns 89 00:05:03.000 --> 00:05:08.000 die Ebene der Inhaltselemente anschauen, also wirklich in das Kleinteilige schauen. 90 00:05:08.000 --> 00:05:11.000 Da habe ich auch zwei Beispiele mitgebracht. 91 00:05:11.000 --> 00:05:15.000 Einmal ein Fließtext mit zu vielen Textfettungen. 92 00:05:15.000 --> 00:05:19.000 Textformatierungen wie Textfettungen / kursiv setzen von Text, 93 00:05:19.000 --> 00:05:23.000 sind natürlich auch immer sehr beliebt, um dann entsprechend Texte zu gliedern 94 00:05:23.000 --> 00:05:25.000 und zu strukturieren. 95 00:05:25.000 --> 00:05:28.000 Aber wir sehen schon an dieser Stelle, es wurden natürlich relativ 96 00:05:28.000 --> 00:05:29.000 viele Textfettungen genutzt. 97 00:05:29.000 --> 00:05:34.000 Auch da kippt das Ganze eher in so einen negativen Auswuchs, 98 00:05:35.000 --> 00:05:37.000 dass ich mit dem Auge wirklich springe 99 00:05:37.000 --> 00:05:41.000 und aufgrund der Menge an Textfettungen gar nicht genau fokussieren kann. 100 00:05:41.000 --> 00:05:43.000 Was ist denn jetzt wichtig? 101 00:05:43.000 --> 00:05:46.000 Und springe zwischen den einzelnen Textfettungen mit meinem Auge hin und her. 102 00:05:46.000 --> 00:05:50.000 Und das erschwert dann im Umkehrschluss wieder die Lesbarkeit dieses Textes. 103 00:05:51.000 --> 00:05:51.000 Aber auch 104 00:05:51.000 --> 00:05:52.000 wenn wir uns auf der Ebene von Bildern 105 00:05:52.000 --> 00:05:56.000 befinden, kann man einen Fehler begehen, indem man zum Beispiel bei der Auswahl 106 00:05:56.000 --> 00:06:01.000 der Bilder ein Bild einbindet, was einfach die anderen überstrahlt. 107 00:06:01.000 --> 00:06:03.000 In diesem Beispiel 108 00:06:03.000 --> 00:06:04.000 habe ich jetzt einfach mal 109 00:06:04.000 --> 00:06:07.000 in der fünften Kachel bei den finanziellen Unterstützungsmöglichkeiten 110 00:06:07.000 --> 00:06:12.000 ein sehr prägnantes Bild eingebunden, was rot leuchtet, 111 00:06:12.000 --> 00:06:16.000 wirklich sehr ins Auge fällt, und man merkt schon, dass der Blick 112 00:06:16.000 --> 00:06:17.000 des Betrachters 113 00:06:17.000 --> 00:06:21.000 unweigerlich immer wieder auf dieses sehr prägnante Bild zurückfällt. 114 00:06:21.000 --> 00:06:23.000 Das heißt, es überstrahlt die anderen. 115 00:06:23.000 --> 00:06:24.000 Man spricht hier an dieser Stelle 116 00:06:24.000 --> 00:06:28.000 auch von einer Bildwelt und die Bildwelt sollte einheitlich sein. 117 00:06:28.000 --> 00:06:30.000 Das heißt, die Bildwelt ist die Sprache, 118 00:06:30.000 --> 00:06:32.000 die alle Bilder auf meiner Webseite sprechen, 119 00:06:32.000 --> 00:06:35.000 und die sollten eine gemeinsame Sprache sprechen. 120 00:06:35.000 --> 00:06:36.000 Es ist ungünstig, zum Beispiel 121 00:06:36.000 --> 00:06:40.000 normale Fotografien und Comiczeichnungen zu mischen, es sei denn, 122 00:06:40.000 --> 00:06:43.000 es ist ein bewusstes Gestaltungsmittel einen Bruch herbeizuführen. 123 00:06:44.000 --> 00:06:47.000 Aber in der Regel sollte man wirklich darauf achten, wenn man Bilder einsetzt, 124 00:06:48.000 --> 00:06:50.000 dass diese schon eine gemeinsame Sprache sprechen 125 00:06:50.000 --> 00:06:55.000 und alle ungefähr gleich gewichtet auf der Seite eingebunden werden. 126 00:06:55.000 --> 00:06:59.000 So, aus diesen ganzen Beispielen kann man natürlich auch bestimmte Regeln ableiten. 127 00:06:59.000 --> 00:07:01.000 Grundsätzlich - Regel Nummer eins -: 128 00:07:01.000 --> 00:07:04.000 die Inhalte sollten strukturiert werden und auch gruppiert werden. 129 00:07:04.000 --> 00:07:07.000 Das kann man auf der einen Seite auf Elementebene machen, 130 00:07:07.000 --> 00:07:09.000 sprich wie wir das gerade gesehen haben, 131 00:07:09.000 --> 00:07:11.000 klassisch bei Texten durch Textformatierung, indem 132 00:07:11.000 --> 00:07:15.000 wir sagen, wir ziehen eine Überschriftenstruktur in unsere Texte ein, 133 00:07:15.000 --> 00:07:19.000 wir nutzen Auflistungen immer da, wenn es sinnvoll ist, eine Auflistung zu nutzen. 134 00:07:19.000 --> 00:07:22.000 Und wir binden Zeilenumbrüche in unsere Texte ein. 135 00:07:22.000 --> 00:07:26.000 Ich sehe ja in regelmäßigen Abständen auf unseren Auftritten 136 00:07:26.000 --> 00:07:27.000 wirklich sehr lange Texte. 137 00:07:27.000 --> 00:07:31.000 Und da einen Zeilenumbruch an guter Stelle einzufügen ist 138 00:07:31.000 --> 00:07:35.000 ein sehr gutes Mittel, um die Lesbarkeit dieses gesamten Textblocks zu erhöhen. 139 00:07:36.000 --> 00:07:39.000 Und auf der anderen Seite, wenn wir uns von dieser sehr 140 00:07:39.000 --> 00:07:43.000 kleinteiligen Ebene wegbewegen - auf Seitenebene -, können wir allen voran 141 00:07:43.000 --> 00:07:46.000 unsere Layoutbereiche dazu nutzen, um die Seite zu strukturieren. 142 00:07:46.000 --> 00:07:51.000 Aber wir können natürlich auch lange Texte durch entsprechende Inhaltselemente, 143 00:07:51.000 --> 00:07:51.000 wie zum Beispiel 144 00:07:51.000 --> 00:07:54.000 ein Akkordeon oder auch Text- und Bildkacheln, ein bisschen auflockern, 145 00:07:54.000 --> 00:07:58.000 so dass das Ganze nicht so überfüllt und überladen aussieht. 146 00:07:58.000 --> 00:08:01.000 Regel Nummer zwei: Wenn es denn sinnvoll ist, Bilder nutzen. 147 00:08:01.000 --> 00:08:04.000 Bilder transportieren auch immer Stimmungen und Inhalte. 148 00:08:05.000 --> 00:08:08.000 Sie werten meinen Text und meine Zeit damit auf, lenken 149 00:08:08.000 --> 00:08:09.000 den Blick auch auf sich, sind 150 00:08:09.000 --> 00:08:12.000 ein gutes Mittel, um die Blickführung zu beeinflussen und, 151 00:08:13.000 --> 00:08:16.000 wie wir gerade auch schon gesehen haben, wichtig dabei ist einfach, 152 00:08:16.000 --> 00:08:19.000 dass man da auf eine einheitliche Bildwelt achtet. 153 00:08:19.000 --> 00:08:20.000 Und zu guter Letzt Regeln 154 00:08:20.000 --> 00:08:24.000 Nummer drei: ich habe es jetzt mal genannt “die Balance wahren”. 155 00:08:25.000 --> 00:08:29.000 Das heißt immer, wenn ich irgendeine meiner gestalterischen Regeln einsetze, 156 00:08:29.000 --> 00:08:32.000 sollte ich einfach darauf achten, dass ich es dabei nicht übertreibe. 157 00:08:33.000 --> 00:08:35.000 Beispiel: Lange Fließtexte auf einer Seite sollten, 158 00:08:35.000 --> 00:08:39.000 wenn möglich aufgelockert werden durch, wie wir das gerade schon gesagt haben, 159 00:08:39.000 --> 00:08:43.000 entsprechende Inhaltselemente oder Bilder oder entsprechende Textformatierungen. 160 00:08:44.000 --> 00:08:48.000 Wenn ich Textformatierungen einsetze, sollten diese maßvoll eingesetzt werden. 161 00:08:49.000 --> 00:08:53.000 Wir erinnern uns an das Beispiel mit den sehr häufig vorkommenden Textfettungen, 162 00:08:53.000 --> 00:08:57.000 die den Text dann einfach schlechter lesbar gemacht haben 163 00:08:57.000 --> 00:08:59.000 und eigentlich genau das bewirkt haben, was sie vermeiden sollten. 164 00:08:59.000 --> 00:09:03.000 Auch zu viele gleiche Elemente auf einer Seite sollten vermieden werden. 165 00:09:03.000 --> 00:09:06.000 Wenn wir jetzt eine sehr lange Seite haben und binden dort 20 Kacheln 166 00:09:06.000 --> 00:09:09.000 ein, ist es wieder einfach unübersichtlich 167 00:09:09.000 --> 00:09:12.000 wegen der Menge der Kacheln, die auf der Seite sind. 168 00:09:12.000 --> 00:09:15.000 Und grundsätzlich sollte man sich auch immer fragen: 169 00:09:15.000 --> 00:09:16.000 wäre es nicht vielleicht besser, 170 00:09:16.000 --> 00:09:19.000 Inhalte einfach auf mehrere Unterseiten aufzuteilen? 171 00:09:19.000 --> 00:09:23.000 Im Zweifelsfall kaufe ich mir dadurch einfach eine bessere Übersichtlichkeit ein 172 00:09:24.000 --> 00:09:28.000 und mache damit alle Inhalte einfach besser erfahrbar und auch besser 173 00:09:28.000 --> 00:09:29.000 wahrnehmbar. 174 00:09:29.000 --> 00:09:32.000 So, wir haben jetzt noch drei verschiedene Anwendungsbeispiele. 175 00:09:32.000 --> 00:09:37.000 Dazu wechsle ich einmal in unser Frontend und schließe Powerpoint. 176 00:09:40.000 --> 00:09:41.000 Beispiel Nummer 177 00:09:41.000 --> 00:09:44.000 eins ist eine ganz normale Contentseite. 178 00:09:44.000 --> 00:09:47.000 Und zwar haben wir einmal eine nicht optimierte Seite hier. 179 00:09:47.000 --> 00:09:49.000 Wir sehen schon, wir haben zwar eine Überschrift, 180 00:09:49.000 --> 00:09:52.000 haben aber einen sehr langen Fließtext zu Beginn. 181 00:09:53.000 --> 00:09:55.000 Haben eine Auflistung an dieser Stelle 182 00:09:55.000 --> 00:09:59.000 und dann folgt wieder ein relativ langer Fließtext-Block. 183 00:09:59.000 --> 00:10:02.000 Und diesen Text habe ich jetzt einmal hier 184 00:10:03.000 --> 00:10:06.000 entsprechend optimiert für eine bessere Blickführung. 185 00:10:06.000 --> 00:10:08.000 Und wir sehen schon, das ist das Beispiel, 186 00:10:08.000 --> 00:10:12.000 was wir bereits initial einmal gesehen hatten hier in diesem Vortrag. 187 00:10:12.000 --> 00:10:16.000 Wir haben den einleitenden Text in drei Abschnitte unterteilt, die jeweils 188 00:10:16.000 --> 00:10:19.000 noch mal eine kleine Überschrift spendiert bekommen haben. 189 00:10:20.000 --> 00:10:23.000 Dieser einleitende Block steht vor einem weißen Hintergrund, 190 00:10:23.000 --> 00:10:25.000 so dass dieser gesamte 191 00:10:25.000 --> 00:10:28.000 einleitende Block erst einmal wesentlich luftiger / aufgelockerter daherkommt, 192 00:10:29.000 --> 00:10:32.000 aber auch einfach ein bisschen leichter wahrnehmbar ist. 193 00:10:32.000 --> 00:10:34.000 Man weiß sofort: “Worum geht es?”, “Was sind die Themen?” 194 00:10:34.000 --> 00:10:37.000 und kann an der gewünschten Stelle, wenn man möchte, direkt einsteigen. 195 00:10:38.000 --> 00:10:41.000 Die Auflistung mit den jeweiligen Verlinkungen haben wir 196 00:10:41.000 --> 00:10:46.000 anstelle einer reinen Textauflistung hier als Bildkacheln realisiert. 197 00:10:48.000 --> 00:10:50.000 Und zu guter Letzt haben wir den letzten Textblock 198 00:10:50.000 --> 00:10:55.000 in vier verschiedene Akkordeonitems eingegliedert, weil sich das ganz gut 199 00:10:55.000 --> 00:10:58.000 anbot, so dass auch da einerseits die Seite ein bisschen kürzer wird, 200 00:10:59.000 --> 00:11:02.000 aber man sich auch dort wieder etwas leichter zurechtfinden kann. 201 00:11:05.000 --> 00:11:10.000 Dann habe ich als weiteres Beispiel eine Übersichtsseite mitgebracht. 202 00:11:10.000 --> 00:11:13.000 Auf dieser Übersichtsseite sehen wir jetzt erst mal so einen klassischen Aufbau. 203 00:11:14.000 --> 00:11:17.000 Ich erlebe Übersichtsseiten oftmals in unserem System so, 204 00:11:17.000 --> 00:11:22.000 dass sie entweder nicht befüllt sind oder sehr rudimentär befüllt sind. 205 00:11:22.000 --> 00:11:25.000 Es gibt sicher viele Auftritte, die das schon sehr gut machen. 206 00:11:25.000 --> 00:11:28.000 Ich sehe aber auch leider immer wieder Auftritte, 207 00:11:28.000 --> 00:11:32.000 wo diese Übersichtseiten tendenziell etwas stiefmütterlicher behandelt werden. 208 00:11:33.000 --> 00:11:36.000 Und hier in diesem Beispiel zeige ich einfach mal eine Übersichtsseite, 209 00:11:36.000 --> 00:11:40.000 die man eigentlich für die meisten Anwendungsfälle sehr gut nutzen kann. 210 00:11:40.000 --> 00:11:42.000 Diese Übersichtsseiten sollen ja letzten Endes 211 00:11:42.000 --> 00:11:44.000 einfach nur eine grobe Übersicht bieten. 212 00:11:44.000 --> 00:11:47.000 Was finde ich hier und welche Unterseiten gibt es hier unter dieser Seite? 213 00:11:48.000 --> 00:11:52.000 Dementsprechend haben wir hier eine Überschrift, einen einleitenden Text 214 00:11:52.000 --> 00:11:55.000 und die vier Unterseiten sind 215 00:11:55.000 --> 00:11:58.000 mit dem gleichnamigen Inhaltselement “Unterseiten” realisiert worden, 216 00:11:59.000 --> 00:12:01.000 sodass wir dann noch hier diese vier Kacheln haben. 217 00:12:01.000 --> 00:12:01.000 Und von diesen 218 00:12:01.000 --> 00:12:04.000 Kacheln kann man relativ leicht auf die jeweiligen Unterseiten abspringen. 219 00:12:05.000 --> 00:12:10.000 Die Seite so ist relativ leicht redaktionell zu erstellen. 220 00:12:10.000 --> 00:12:13.000 Man braucht eine Überschrift, einen kurzen Text und ein Inhaltselement. 221 00:12:14.000 --> 00:12:18.000 Sie bietet aber den großen Vorteil, dass sie für mich als menschlichen 222 00:12:18.000 --> 00:12:22.000 Betrachter eine wirklich freundliche und übersichtliche Struktur bietet. 223 00:12:23.000 --> 00:12:25.000 Und für alle externen Suchmaschinen 224 00:12:25.000 --> 00:12:29.000 gibt es ein bisschen Text auf der Seite, eine Überschrift, sodass auch die wissen: 225 00:12:30.000 --> 00:12:32.000 “Worum geht es auf der Seite?”, “Was ist der Kontext?” 226 00:12:32.000 --> 00:12:35.000 und “Sollte ich diese Seite vielleicht in meinen Suchindex aufnehmen?”. 227 00:12:36.000 --> 00:12:37.000 So, zu guter Letzt haben wir 228 00:12:37.000 --> 00:12:41.000 dann noch einmal ein Beispiel für eine Startseite. 229 00:12:42.000 --> 00:12:44.000 Die Startseite ist letzten Endes die erste Seite, 230 00:12:44.000 --> 00:12:48.000 die Seitenbetrachtende sehen, wenn sie auf Ihrem Auftritt landen. 231 00:12:48.000 --> 00:12:50.000 Dementsprechend sollte man hier auf diese Seite 232 00:12:50.000 --> 00:12:54.000 auch ein kleines bisschen mehr Mühe verwenden, 233 00:12:54.000 --> 00:12:58.000 um die entsprechend auch ansprechend und übersichtlich zu gestalten. 234 00:12:58.000 --> 00:13:01.000 Wenn wir jetzt einmal von oben nach unten schauen: wir hätten hier oben 235 00:13:01.000 --> 00:13:04.000 als allererstes einmal den Seitenheader. 236 00:13:04.000 --> 00:13:06.000 Da würde ich einfach alle bitten: 237 00:13:06.000 --> 00:13:12.000 Wir liefern die Auftritte mit entsprechend vordefinierten Seitenheadern aus. 238 00:13:12.000 --> 00:13:15.000 Die sind in der Regel gangbar. Das kann man so machen. 239 00:13:15.000 --> 00:13:18.000 Aber die sehen auch nicht immer sehr schön aus. 240 00:13:18.000 --> 00:13:22.000 Das heißt, nutzen Sie die Möglichkeit, mit einem wirklich aussagekräftigen 241 00:13:22.000 --> 00:13:27.000 und schönen Headerbild Ihre Besucher und Besucherinnen thematisch abzuholen. 242 00:13:27.000 --> 00:13:30.000 Wenn es die Webseite irgendeines Bereichs zum Beispiel 243 00:13:30.000 --> 00:13:31.000 ist, würde sich 244 00:13:31.000 --> 00:13:34.000 das Gebäude des Bereichs anbieten oder irgendein themen- und kontextbezogenes 245 00:13:34.000 --> 00:13:36.000 Bild, was letzten Endes dann widerspiegelt, 246 00:13:36.000 --> 00:13:40.000 worum es in dem jeweiligen Bereich oder auf der jeweiligen Webseite geht. 247 00:13:40.000 --> 00:13:43.000 Also das sollte man an der Stelle auf jeden Fall nutzen 248 00:13:43.000 --> 00:13:46.000 und da ein aussagekräftiges Headerbild einziehen. 249 00:13:46.000 --> 00:13:47.000 Dann haben wir hier 250 00:13:47.000 --> 00:13:51.000 optional - den muss man nicht nutzen, aber man kann ihn nutzen - unseren Störer. 251 00:13:51.000 --> 00:13:56.000 Der Störer ist wirklich dafür gedacht, um außer der Reihe bestimmte Seiten 252 00:13:57.000 --> 00:13:58.000 in den Vordergrund zu rücken. 253 00:13:58.000 --> 00:14:03.000 In dem Fall ist das einmal die Teamseite, die ich hier beispielhaft genommen habe, 254 00:14:03.000 --> 00:14:06.000 um dann dieses Thema quasi noch mal in den Fokus zu rücken. 255 00:14:07.000 --> 00:14:10.000 Was auf jeden Fall auf keiner Startseite fehlen darf, 256 00:14:10.000 --> 00:14:14.000 ist einerseits eine Hauptüberschrift, die die Seitenbesucher willkommen heißt 257 00:14:15.000 --> 00:14:17.000 und auch ein entsprechend einleitender Text, der mir 258 00:14:17.000 --> 00:14:21.000 als Seitenbesucher sagt: “Ich bin jetzt auf dieser Seite. 259 00:14:21.000 --> 00:14:22.000 Das ist das Thema dieser Seite. 260 00:14:22.000 --> 00:14:23.000 Darum geht es hier.” 261 00:14:23.000 --> 00:14:27.000 Das heißt, dieser Text soll einfach sein, Besucher und Besucherinnen abholen 262 00:14:28.000 --> 00:14:30.000 und sie in das Thema und in den Kontext einführen. 263 00:14:30.000 --> 00:14:34.000 Thema und Kontext ist auch passend für das Inhaltselement, was dann an 264 00:14:34.000 --> 00:14:37.000 nächster Stelle hier auf unserer beispielhaften Startseite kommt. 265 00:14:38.000 --> 00:14:39.000 Unsere Themenkacheln. 266 00:14:39.000 --> 00:14:42.000 Themenkacheln, man kann auch Bild- oder Textkacheln 267 00:14:42.000 --> 00:14:48.000 nutzen, sind eine sehr gute Möglichkeit, um die zentralen Seiten des Auftritts hier 268 00:14:48.000 --> 00:14:51.000 auf der Startseite noch mal zu bewerben und in den Fokus zu rücken. 269 00:14:51.000 --> 00:14:54.000 Eine Startseite hat, wie man immer so schön sagt, einen Portalcharakter. 270 00:14:54.000 --> 00:14:58.000 Das heißt es dient als Portal, über das ich auf die Seite komme. 271 00:14:58.000 --> 00:15:01.000 Es dient aber auch als - sozusagen - Portal, 272 00:15:01.000 --> 00:15:05.000 um mich dann weiterzuleiten auf die eigentlich wichtigsten Themen. 273 00:15:05.000 --> 00:15:06.000 Also eine Startseite sollte 274 00:15:06.000 --> 00:15:10.000 mich im besten Fall einmal willkommen heißen, mir das Thema an die Hand geben. 275 00:15:10.000 --> 00:15:12.000 Worum geht es auf der Seite? 276 00:15:12.000 --> 00:15:15.000 Und sollte mir ein Übersicht dieser Themen geben. 277 00:15:15.000 --> 00:15:19.000 Und ich muss in der Lage sein, mit einem Klick in diese Themen einzusteigen. 278 00:15:20.000 --> 00:15:24.000 Was auf einer Startseite auch immer Sinn macht, wenn man sie denn hat, 279 00:15:24.000 --> 00:15:25.000 sind Newsbeiträge 280 00:15:25.000 --> 00:15:27.000 oder auch Veranstaltungen. Deswegen habe ich sie hier 281 00:15:27.000 --> 00:15:30.000 auf dieser exemplarischen Seite auch einmal eingebunden. 282 00:15:30.000 --> 00:15:33.000 Da gilt es dann immer so ein bisschen im Hinterkopf zu behalten: 283 00:15:33.000 --> 00:15:37.000 Wenn man News-Plugins auf Startseiten nutzt, egal ob für Veranstaltungen 284 00:15:37.000 --> 00:15:41.000 oder Newsbeiträge, dann sollte man die Anzahl der dargestellten News oder 285 00:15:41.000 --> 00:15:46.000 Veranstaltungen eingrenzen auf maximal acht. 286 00:15:46.000 --> 00:15:48.000 In dem Fall sind es sogar nur vier. 287 00:15:48.000 --> 00:15:52.000 Das heißt die Startseite ist nur dafür gedacht, einen groben Überblick zu liefern 288 00:15:52.000 --> 00:15:56.000 und dementsprechend müssen hier und sollen hier auch gar nicht alle 289 00:15:56.000 --> 00:15:57.000 Newsbeiträge dargestellt werden. 290 00:15:57.000 --> 00:15:59.000 So, und wenn wir schon hingehen und 291 00:15:59.000 --> 00:16:03.000 reduzieren oder begrenzen die Anzahl dieser Newsbeiträge, 292 00:16:03.000 --> 00:16:05.000 dann sollten wir auch hingehen 293 00:16:05.000 --> 00:16:07.000 und hier noch einen entsprechenden Button spendieren, 294 00:16:07.000 --> 00:16:12.000 mit dem man dann auf eine Seite gelangt, wo dann wirklich alle Newsbeiträge 295 00:16:12.000 --> 00:16:14.000 oder auch Veranstaltungen dargestellt werden. 296 00:16:15.000 --> 00:16:18.000 Und das sind erst mal die meist vorkommenden Seiten bei uns im System, 297 00:16:18.000 --> 00:16:21.000 die Startseite, Übersichtsseiten und auch normale Contentseiten. 298 00:16:21.000 --> 00:16:25.000 Und wir haben jetzt einmal gesehen, anhand von Beispielen, 299 00:16:25.000 --> 00:16:29.000 wie man für diese Seiten die Inhalte am besten aufbereitet und einbindet.