Arbeiten mit toujou
Responsive & Mobile first: Seiten anzeigen/überprüfen
In toujou können Sie Ihre Seiten vor Veröffentlichung oder bei der Bearbeitung überprüfen, wie Sie es von TYPO3 gewohnt sind. Wir erklären Ihnen den Umgang mit dem Anzeigen-Modul und erläutern, wie Sie die Performance Ihrer Website prüfen und gegebenenfalls optimieren können.
Anzeigen/View
Links in der Menüleiste des Backends finden Sie das rote Icon Anzeigen/View. Mit einem Klick darauf können Sie Ihre Arbeit auf jeder Unterseite direkt in verschiedenen Größen überprüfen.
To-Do-Liste
Im unten beschriebenen Anzeigen-Modul überprüfen Sie
- die sinnvolle Reihung der Elemente
- den Bildbeschnitt/Fokus von Bildern auf kleineren Endgeräten
- die Absatz- und Zeilenumbrüche in Texten/Überschriften/Tabellen
Elementauswahl/-Anordnung
In den jeweiligen Verhaltensbeschreibungen (Beispiel: Content Card with Text left) einzelner Elemente können Sie das Verhalten von Bild zu Text oder von Text zu Text mit mehr als zwei Blöcken, Teaserkarten, Landkarten und so weiter nachlesen, ehe Sie sich für den Einsatz eines bestimmten Elements entscheiden.
Elemente in toujou sind in sich immer schlüssig und demnach für den Einsatz in verschiedenen Endgeräten optimiert. Ihre Prüfung besteht nun darin, die Kombination der von Ihnen gewählten Elemente zu überprüfen: Ist die Reihenfolge der Inhalte logisch? Beziehungsweise: Ist Ihr Content, der z.B. am Desktop von links nach rechts angeordnet wurde, responsiv von oben nach unten in der Reihung noch sinnvoll?
Tutorial: Elementbibliothek
Bildbearbeitung
Mit TYPO3 8.7 wurde das Bildbeschneidungswerkzeug im Backend erweitert, um mehrere Varianten an Bildausschnitten für jedes Bild zu erzeugen. In toujou laden Sie Bilder entsprechend nur einmal hoch und verwenden diese einzeln als Quelle für verschiedenste Elemente beliebig oft.
Im Image-Editor können Sie daher vier Beschneidungskonfigurationen für ein Bild definieren – jeweils für Widescreen, Desktop, Tablet & Smartphone.
Tutorials: Bildbearbeitung Dateiliste
Textbearbeitung
Überlange einzelne Worte in Texten, Tabellen oder Überschriften, die nicht von Haus aus umbrechen (Stichwort: Silbentrennung) oder ungewollte Zeilenumbrüche sind »Fehler«, die unter Umständen überhaupt erst in der mobilen Ansicht sichtbar werden. Diese korrigieren Sie mithilfe der Bearbeitung im Quelltext.
Tutorial: Quelltext
Anleitung Modul »Anzeige«
Arbeiten im Anzeigen-Modul
- Mit Klick auf das Icon Anzeigen in der Modulübersicht Ihrer Website öffnet sich rechts neben dem Seitenbaum ein Anzeigefenster.
- Wenn sie noch keine Seite angeklickt haben, werden Sie dazu aufgefordert.
Seite anzeigen/Erstansicht
- Klicken Sie im Seitenbaum eine Seite Ihrer Wahl. In unserem Beispiel: ein Blogbeitrag.
- Das Anzeigefenster zeigt Ihnen in der Regel die zuletzt gewählten Pixelmaße bzw. eine benutzerdefinierte Größe an.
- Mit der Einstellung Maximiert nutzen Sie den zur Verfügung stehenden Platz in voller Breite aus.
- Sie können im Seitenbaum jede beliebige Seiten anzeigen lassen, indem Sie auf die jeweilige gewünschte Seite klicken.
Optionen innerhalb des Anzeigen-Moduls
- Sie können im Dropdown-Menü oberhalb des Anzeige-Fensters vorkonfigurierte Pixelmaße auswählen.
- Zur Verfügung stehen Ihnen vordefinierte Maße, die Ihnen einen Überblick über die Darstellungen Ihrer Website für verschiedene Endgeräte im Hoch- und Querformat anzeigen.
- Wenn Sie die volle Breite Ihres Bildschirms ausnutzen möchten, blenden Sie oben links die Anzeige der Modulliste und/oder den Seitenbaum aus, indem Sie auf die Menü-Icons klicken.
Benutzerdefinierte Anpassung
- Wählen Sie im Dropdown-Menü die Einstellung Benutzerdefiniert.
- Geben Sie die gewünschte Größe in Breite x Länge in Pixeln (px) oben rechts in die Eingabemaske mit den aktuell angezeigten Werten ein.
- Der Bereich Benutzerdefiniert bleibt automatisch so lange gespeichert, bis Sie neue Maße eingeben.
- Sie können mittels dem Smartphone-Button links vom Dropdown-Menü zwischen Hoch- und Querformat Ihrer aktuellen Ansicht switchen.
Ansichten je Endgerät
Die Desktop-Ansicht kennen Redakteure und Webmaster, die mit der Website regelmäßig arbeiten, wohl am besten. Eine Überprüfung der mobilen Ansichten eignet sich in besonderem Maße in Hinblick auf die Platzierung von (Header-)Bildern, Texten, Buttons sowie die Anordnung von Elementen.
Hinweise für mobile Ansichten (Tablet/Handy): Je nach Ihrer individuellen Konfiguration im Theme-Modul wird der unten gezeigte Kontakt-Button mit Telefonhörer nur optional oben rechts angezeigt. Außerdem haben Sie die Möglichkeit, mittig im schwarzen Balken zwischen Menü und Kontakt Ihr Logo oder Ihren Seitentitel zu platzieren.
Computer-Ansicht
- Der Screenshot steht exemplarisch dafür, wie sich Ihre Seite für Besucher auf Widescreen-Bildschirmen sowie Laptops darstellt.
- Hier überprüfen Sie z.B., wie Logo, Headerbild, Navigation, Headline und Subheadline sich in der Breite 1280px auf Computer-Bildschirmen darstellen.
Tablet-Ansicht
Hier wird deutlich, wie sich toujou automatisch responsiv verhält:
- Das Verhältnis verkehrt sich vom Quer- ins Hochformat,
- die Navigation ist nicht mehr sichtbar, sondern ist fortan im »Burger-Menü« zu finden,
- der Teasertext bricht an einer früheren Stelle der Zeile um.
Smartphone-Ansicht
- Hier rücken Menü und Kontaktbutton enger zusammen
- Das Headerbild rückt verhältnismäßig weiter nach oben.
- Headline und Teasertext brechen nun (mehrfach) um und es ist Platz für die Subheadline, die vorher nicht sichtbar war.
FAQ & wichtige Hinweise
Was bedeutet Responsive Webdesign?
Responsive Webdesign bedeutet, dass auf Ihrer Website unabhängig vom Endgerät dieselbe URL und derselbe Code verwendet werden. Der entscheidende Unterschied besteht darin, nicht eine Desktopwebsite unter www.musterwebsite.de und ihre mobile Variante unter m.musterwebsite.de zu verwalten. Lediglich die Anzeige der Website wird an die jeweils verwendete Bildschirmgröße angepasst.
Wie ist das Responsive Webdesign in toujou umgesetzt?
toujou ist von Haus aus so programmiert, dass Sie als Redakteur/Webmaster in Sachen Webdesign nicht gefordert sind. Das bedeutet, dass Sie alle Einstellungen und das Einpflegen von Content nur einmal vornehmen müssen. Die von Ihnen genutzten Elemente und Theme-Settings passen sich automatisch – wie oben beschrieben – den Endgeräten an.
Warum sollte ich meine Website auf ihr responsives Verhalten hin überprüfen?
Dass Besucher sich Websites mehrheitlich mobil statt stationär anzeigen lassen, dürfte sich inzwischen herumgesprochen haben. Damit Ihre Inhalte sich nicht nur auf Smartphones, sondern auf allen verfügbaren Endgeräten ordentlich präsentieren, sollten Probleme wie zu kleine Texte, dicht beieinander liegende Klickflächen oder zu breite Inhaltsbereiche im Idealfall gar nicht mehr auftreten.
Was kann ich für den idealen Auftritt tun?
Die gute Nachricht: Durch die Elementstruktur in toujou sind die oben beschriebenen Probleme bei der mobilen Ansicht Ihrer Website nicht möglich. Ihre Aufgabe besteht darin, Ihren Content so aufzubereiten, dass er sinnvoll auf allen Endgeräten »funktioniert«. Hierzu haben wir die oben stehende To-Do-Liste mit Hinweisen und die Verknüpfung aller Schritte zu nützlichen Tutorials für Sie aufbereitet.
Was ist konzeptionell für mobile Endgeräte zu beachten?
Diese Disziplin hat selbstverständlich große Schnittmengen mit der Suchmaschinenoptimierung Ihrer Website sowie der Qualität Ihrer Texte und Medien. Nur so viel in Hinblick auf Platzierung von Überschriften, Buttons und weiteren Blickfängen: Bauen Sie Ihre Website so auf, dass Besucher das Erreichen ihrer Ziele problemlos durchführen können. Nehmen Sie sie beim Stöbern in Ihren Blogposts/News, der Abgabe von Rezensionen, dem Finden von Produkten, Adresse, Öffnungszeiten bis hin zur Kontaktaufnahme oder Kaufabschluss (Stichwort: Conversion) und so weiter an die Hand.
Gibt es Tools, die mir bei der Optimierung helfen?
Webrecherchen in der Suchmaschine Ihres Vertrauens werden Ihnen unzählige Gratis-Tools zur direkten Überprüfung der Website anbieten. Je nachdem, was Sie überprüfen möchten, suchen Sie sich aufgrund des (Über-)Angebots am besten dasjenige aus, das Ihnen im Handling bei der Arbeit mit der Website eine echte Hilfe sein kann.
Welche Rolle spielt die Performance meiner Website auf mobilen Endgeräten?
Der Großteil einer Website sollte so schnell wie möglich sichtbar ausgespielt werden. Im Fachjargon wird diese erste Ausspielung auf dem Bildschirm »First Contentful Paint« (FCP) genannt. Denn: Über die Hälfte der User springt bei Ladezeiten über drei Sekunden bereits wieder ab. Denken Sie hierbei nicht nur an Datenaufwände auf der Seite der Websitebetreiber, sondern auch an durchschnittliche Mobilfunkverbindungen auf Seiten des Empfängers.
Mit toujou sind Sie grundsätzlich nicht nur auf der sicheren Seite, sondern auch auf der schnellsten. Im »Chrome UX Report« vom September 2018 schnitt TYPO3 im Vergleich mit 23 weiteren Website-Systemen am besten ab. Quelle: https://discuss.httparchive.org/t/cms-performance/1468.
Wie überprüfe ich die Performance meiner Website?
Die Liste der Tools, die Ihnen beim Optimieren der Seite behilflich sein können, ist lang. Unter anderem unterstützt SIe der im Chrome-Browser von Google integrierte »Lighthouse Report«. Er gibt Ihnen Aufschluss darüber, an welcher Stelle (z.B. Größe von Dateien, Videoausspielung auf wichtigen Landing Pages etc.) womöglich Verbesserungsbedarf besteht. Rufen Sie dafür Ihre Seite in Chrome auf. Mit einem Rechtsklick öffnet sich ein Kontextmenü, in dem Sie Untersuchen anklicken, worauf sich rechter Hand ein Bearbeitungsfeld öffnet. Dort klicken Sie im obersten Menü den Reiter Audits an. Alles weitere wird Ihnen innerhalb des Audits oder hier erläutert: