Anzeige
Anzeige
UX & Design
Artikel merken

Scrollen unnötig: Wenn Webdesign sich anpasst

Es gibt viele Hindernisse, die den produktiven Einsatz neuer Webtechnologien verhindern oder hinauszögern. Neben den Browsern müssen auch Content Management Systeme die neuen Technologien unterstützen, ziehen aber oft nur verzögert nach. Eine zukunftsträchtige Technologie ist das „Responsive Webdesign“, mit dem sich die Inhalte einer Website an das jeweilige Interface anpassen. Der folgende Beitrag erklärt, wie man das flexible Design mit TYPO3 schon heute nutzt.

7 Min. Lesezeit
Anzeige
Anzeige

Die Nachfrage nach mobilen Webseiten steigt mit jedem Auftrag. Kaum ein Kunde, der nicht ein iPhone, iPad oder anderes Smartphone sein eigen nennt. Schon nach den ersten Gesprächen wird meist deutlich, dass der Kunde weniger eine mobile Webseite möchte, als vielmehr eine, die auf allen Geräten gut aussieht und funktioniert. An diesem Punkt kommt Responsive Webdesign ins Spiel, mit dem eben keine mobile Webseite für eine bestimme Auflösung erstellt wird, sondern eine für alle Geräte optimierte Webseite. Die Nachfrage nach einem Content Management System tritt dabei aber keineswegs in den Hintergrund, und so muss man einen Weg finden, wie man beides zusammen bringt.

Anzeige
Anzeige

Responsive Webdesign erlaubt es Webworkern nicht nur, eine mobil funktionierende Webseite zu erstellen, sondern vielmehr eine vom Endgerät und der Bildschirmauflösung unabhängig funktionierende Webseite auszuliefern. Die Inhalte werden zugänglicher, und lästiges Zoomen oder horizontales Scrollen gehören der Vergangenheit an. Möglich wird dies durch die Trennung von Inhalt und Design, sowie durch flexible Layouts, JavaScript und nicht zuletzt durch neue Webtechnologien wie CSS3. Wer allerdings denkt, dass es dabei nur um CSS3 Media Queries geht, liegt falsch.

Herausforderungen

Um Probleme lösen zu können, muss man sie zunächst kennen und verstehen lernen. So tauchen auf dem Weg zu einem flexiblen Design verschiedene Problemstellungen auf, die bei einem festen Layout mit Pixeln und einem eindeutigen grafischen Entwurf kaum Beachtung finden. Unabhängig vom verwendeten System sind dies die Darstellung der Navigationsstruktur, große Bilder, JavaScript-Effekte (Lightbox, Slider) oder eine DropDown-Navigation, die man schon bei der Konzeption bedenken sollte. Bei der Erstellung eines flexiblen Webdesigns besteht der größte Mehraufwand in genau diesen Punkten. Wenn man sie nicht von Anfang an berücksichtigt, wird man unter Umständen gezwungen, das ursprüngliche Konzept zu überarbeiten.

Anzeige
Anzeige

Die technischen Stolpersteine liegen hingegen meistens nicht in diesem Bereich, sondern stehen im Zusammenhang mit dem verwendeten System. Während Webdesigner bei der Template-Gestaltung in TYPO3 die volle Kontrolle haben und CSS-Frameworks wie YAML [1] oder 960gs [2] verwenden können, setzt TYPO3 für das Rendern der Inhaltselemente auf die bewährte System-Extension „css_styled_content“. Der durch diese Extension erzeugte Quelltext bleibt aber glücklicherweise das einzige durch TYPO3 verursachte Hindernis.

Anzeige
Anzeige

Ausnahmen können hier natürlich durch andere Frontend-Extensions auftreten. Insbesondere bei Extensions, die kein Template für die Ausgabe verwenden, ist die Anpassung äußerst schwierig bis unmöglich.

Inhalte für Responsive Design

TYPO3 gibt den Inhalt bei der Verwendung mit Bildern in festen Breiten und Höhen aus. Die Bilder enthalten dabei feste Angaben in Attributen. Die umliegenden Elemente, die hauptsächlich für das Umfließen der Texte und Abstände genutzt werden, erhalten feste Breiten mit Inline-Styles.

Anzeige
Anzeige

Bei der Verwendung eines flexiblen Layouts passen sich die Bilder im Inhaltsbereich nicht automatisch an – damit sind merkwürdige Fehldarstellungen quasi vorprogrammiert. Die einfachste Möglichkeit, um eine fehlerhafte Darstellung des Layouts zu vermeiden, ist das Setzen von „overflow:hidden“ für alle von TYPO3 zur Positionierung verwendeten Elemente. Bilder werden dann allerdings nicht skaliert, sondern abgeschnitten und können somit ihren Sinn und die Aussage verlieren.

Eine perfekte Lösung gibt es für diese Inhaltselemente leider nicht. Mit ein paar Kompromissen können aber gute, funktionierende Ergebnisse erzielt werden. Zunächst gilt es, die festen Breiten der umliegenden Container zu entfernen. Dafür lohnt sich ein Blick in den TypoScript Object Browser (Setup) und in in die Objekte „tt_content.image.20.imageStdWrap“, „tt_content.image.20.imageStdWrapNoWidth“, „tt_content.image.20.layout“ und „tt_content.image.20.rendering“. Dort sind die Breiten als Variablen in Wraps hinterlegt und können per Hand entfernt werden. Das hat natürlich Auswirkungen auf das Verhalten der Inhalte. Durch das Entfernen dieser festen Breiten kann es gerade bei mehreren Bildern in einem Inhaltselement zu einer falschen Darstellung kommen.

Der nächste Schritt ist die Anpassung des Stylesheets. Nach der Methode „Progressive Enhancement“ muss das CSS der „css_styled_content“ so aufbereitet werden, dass die meisten Fehldarstellungen in nahezu allen Browsern behoben werden. Dabei wird es allerdings kaum gelingen, alle nur erdenklichen Möglichkeiten abdecken. Geht man aber einen Kompromiss ein und legt fest, dass maximal zwei Bilder nebeneinander stehen sollen, ist auch hier eine Lösung möglich.

Anzeige
Anzeige

Zu guter Letzt definiert man die Breite der Bilder in Prozent und passt die Höhe an.

CSS
img,
embed,
object,
video {
 max-width: 100%;
 height: auto;
}

Listing 1

Da die Bilder noch immer einen Wert im Attribut „height“ haben, muss die Höhe neu definiert werden. Die genaue Funktionsweise von flexiblen Bildern beschreibt Ethan Marcotte im Blog „A List Apart“ [3].

Das Design ist jetzt flexibel und auch die Bilder passen sich an. Natürlich kann man Bildern in Kombination mit Media Queries weitere Verhaltensregeln zuweisen, so dass ein Bild im Text rechts bei einer Fensterbreite von unter 480px nicht breiter als 50 Prozent sein darf, damit der Text auch auf dem iPhone um das Bild herum fließt. Eine noch präzisere Darstellung erreicht man, wenn die Pixelwerte der Bilder von JavaScript in Prozentwerte umgerechnet werden. Eine Zusammenstellung von TypoScript-Konfiguration und CSS für „css_styled_content“ können Webworker bei Github herunterladen und an die eigenen Anforderungen anpassen [4].

Anzeige
Anzeige

TemplaVoila und die mächtigen flexiblen Inhaltselemente (FCE)

TemplaVoila bietet gegenüber dem Standard-Templating den Vorteil, dass es Inhaltselemente definieren kann. Einmal definiert, kann ein solches Inhaltselement auch von Redakteuren immer wieder verwendet werden und dabei Texte, Bilder und Links enthalten, die man sogar ineinander verschachteln kann. Mit diesem mächtigen Werkzeug ist der entstehende Quelltext wieder vollständig unter Kontrolle, und wer damit arbeitet, kann auch vollständig flexible Elemente anlegen – dies wäre mit den Standard-Inhalten nie möglich.

Für alles, was sich nicht direkt mit Inhaltslelementen von „css_styled_content“ umsetzen lässt, sind die flexiblen Inhaltselemente von TemplaVoila geeignet.

Auf einem Smartphone große Bilder zu laden und dann mit flexiblen Breiten auf das kleine Display zu skalieren, ist hingegen wenig sinnvoll. Die Ladezeiten erhöhen sich unnötig und gerade ohne WLAN macht sich das stark bemerkbar.

Anzeige
Anzeige

Scott Jehl hat mit „Responsive Images“ eine Lösung in JavaScript geschrieben und bereitgestellt, die zunächst die kleinere Version eines Bilds und bei entsprechender Bildschirmgröße die große Version lädt. [5] Die Anwendung ist denkbar einfach: Voraussetzungen sind, dass das JavaScript eingebunden, das Modul „mod_rewrite“ aktiviert und die .htaccess entsprechend der Vorlage erweitert wird. Einmal eingebunden, können Bilder auf der Webseite mit <img xsrc="small.jpg?full=large.jpg" > leicht für diese Weiche integriert werden.

Besonders für große Header oder Slider bietet sich diese Lösung an. Selbst wenn JavaScript deaktiviert ist, wird zumindest das kleine Bild geladen und angezeigt.
Auch diese Weiche für verschiedene Bildgrößen kann man unkompliziert mit flexiblen Inhaltselementen integrieren.

Abwärtskompatibilität

Fast alle modernen Browser unterstützen bereits CSS3 Media Queries und eignen sich für ein flexibles Layout. Besonders die vielen mobilen Endgeräte (iOS, Android) unterstützen die Technik und der Darstellung steht nichts im Wege. Lediglich der mobile Internet Explorer in Windows Phone 7 kommt hier oft nicht mit. Aber auch dafür gibt es einen Weg:

Anzeige
Anzeige
HTML
<!--[if IEMobile]>
 <link href="css/ie_mobile.css" rel="stylesheet" type="text/css" />
<![endif]-->

Listing 2

Mit Modernizr kann man zudem einen Browser auf die Kompatibilität mit Media Queries prüfen [6] und das Feature zum Beispiel mit einem jQuery-Plugin direkt ergänzen [7]. Solange auf ein festes Layout aufgebaut wird und nicht ausschließlich Media Queries zur Anwendung kommen, ist eine Abwärtskompatibilität sogar ohne die Verwendung von JavaScript gewährleistet.

Der Blick nach vorne

Für Oktober ist die TYPO3-Version 4.6 angekündigt. Bisher wurde Responsive Design aber weder für diese Version noch für zukünftige Versionen fest eingeplant. Wann TYPO3 diese Technik somit auch „out of the box“ bieten wird, lässt sich nur erahnen. Vermutlich werden sich die Entwickler nach der Fertigstellung der Version 4.6 dem Thema annehmen. Dann steht zumindest eine Überarbeitung von „css_styled_content“ auf dem Plan. Ob das allerdings auch die Entwicklung flexibler Layouts erleichtern wird, bleibt abzuwarten.

Lohnt sich der Aufwand?

Wer Kompromisse eingehen kann und nicht auf jede erdenkliche Möglichkeit der Inhaltsausgabe besteht, kann mit TYPO3 schon heute Responsive Design nutzen. Je nach Projekt sollten Webdesigner dabei circa 20 bis 50 Prozent mehr Aufwand im Bereich der Template-Erstellung einkalkulieren. Der Aufwand hängt jedoch stark mit den verwendeten Inhaltselementen, insbesondere JavaScript-Effekten, zusammen.

Anzeige
Anzeige

Kaum eine der neuen Techniken ist für Kunden und deren Zielgruppe so wahrnehmbar wie Responsive Design. Der Mehrwert für den Endnutzer ist enorm: Nicht nur das lästige Scrollen entfällt, oft geht auch eine Optimierung für Touch-Geräte einher. Ist die Hürde des verwendeten Content Management Systems erst einmal genommen, spricht nichts mehr gegen die produktive Verwendung: Das Stadium der „Spielerei“ ist zumindest in diesem Bereich überwunden und die Nachfrage wächst.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige