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.

To Do  Anzeigen-Modul  FAQ/Tipps

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

Wir empfehlen Ihnen vor der Veröffentlichung Ihrer Website und zur Überprüfung einzelner Unterseiten die Umsetzung der nächst genannten Schritte innerhalb Ihres TYPO3-Backends.

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
Exemplarische Verhaltensbeschreibung eines toujou-Elements

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

Exemplarische Bildbearbeitung im Image-Editor

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

Exemplarischer Textüberhang vor und nach der Bearbeitung im Quelltext

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 im Strukturbaum Ihrer Website öffent sich rechts neben dem Seitenbaum ein Anzeigefenster.
  • Wenn sie bereits eine Seite angeklickt haben (im Beispiel: Home), sehen Sie direkt eine Anzeige in der Breite Automatische Größe. Das bedeutet: Das Anzeigefenster passt sich dem zur Verfügung stehenden Platz in voller Breite an.
  • Sie können im Seitenbaum beliebig Seiten anzeigen lassen, indem Sie auf die jeweilige gewünschte Seite klicken.

Optionen innerhalb des Anzeigen-Moduls

  • Wenn Sie die volle Breite Ihres Bildschirms ausnutzen möchten, schließen Sie oben links die Anzeige der Modulliste sowie den Seitenbaum, indem Sie auf die Menü-Icons klicken.
  • Sie können darüberhinaus im Dropdown-Menü Breite vorkonfigurierte Pixelbreiten auswählen.
  • Zur Verfügung stehen Ihnen vordefinierte Breiten, die Ihnen einen Überblick über die Darstellungen Ihrer Website für verschiedene Computer-Bildschirme sowie Tablets und Handys im Hoch- und Querformat anzeigen.

Benutzerdefinierte Anpassung

  • Unten rechts im Fenster jeder angezeigten Seite befindet sich ein dreieckiger Pfeil.
  • Indem Sie diesen Pfeil bei gehaltener linker Maustaste in alle Richtungen ziehen, können Sie individuelle Größen für die Ansicht Ihrer Website testen.
  • Im Dropdown-Menü Breite können Sie verfolgen, welche Größe in Breite x Länge in Pixeln (px) Sie aktuell mit der Pfeiltaste angezeigt haben.

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.

Desktop-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 Menü zu finden.
  • Unter den Headlines werden erste Teasertexte sichtbar: Der »erste« Blick eines Besuchers ist also bereits signifikant anders als in der Desktopvariante.
Handy-Ansicht
  • Hier rücken Menü und Kontaktbutton enger zusammen
  • Die Bildinformationen des Headers verringern sich noch mehr als in der Tablet-Ansicht.
  • Die Subheadline wird zweizeilig, es ist weniger Text auf den ersten Blick sichtbar.

FAQ & wichtige Hinweise

❯ Was bedeutet Responsive Webdesign?
❯ Wie ist das Responsive Webdesign in toujou umgesetzt?
❯ Warum sollte ich meine Website auf ihr responsives Verhalten hin überprüfen?
❯ Was kann ich für den idealen Auftritt tun?
❯ Was ist konzeptionell für mobile Endgeräte zu beachten?
❯ Gibt es Tools, die mir bei der Optimierung helfen?
❯ Welche Rolle spielt die Performance meiner Website auf mobilen Endgeräten?
❯ Wie überprüfe ich die Performance meiner Website?

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:

https://developers.google.com/web/tools/lighthouse/.

Diese Webseite verwendet Cookies

Wir verwenden Cookies, um Inhalte zu personalisieren und die Zugriffe auf unsere Website zu analysieren. Weitere Informationen finden Sie in unserer Datenschutzerklärung.
OK