Bachelorarbeit - uni-hamburg.de...• Redundanzen im HTML-Template behoben, • auf eine neue Typo3 Version gewechselt, • eine höhere Zuverlässigkeit und Flexibilität des Templates

Fakultät Design, Medien, Information Department Medientechnik

Faculty of of Design, Media and Information Department of Media Technology

Stanislav Seifert

Responsive Webdesign – Probleme und Lösungen beispielhaft erklärt am Webauftritt von

Netzdurchblick

Bachelorarbeit

Stanislav Seifert Matrnr. 2004341

Responsive Webdesign – Probleme und Lösungen beispielhaft erklärt am Webauftritt von

Netzdurchblick

Bachelorarbeit eingereicht im Rahmen der Bachelorprüfung im Studiengang Bachelor of Science Media Systems am Department Medientechnik der Fakultät Design, Medien, Information der Hochschule für Angewandte Wissenschaften Hamburg Erstprüfer: Herr Prof. Dr. Andreas Plaß Zweitprüfer: Dipl.-‐Wirtsch.-‐Inf. (DH) Herr Daniel Heid Abgegeben am 01. April 2014

Die Optik diese Bachelorarbeit basiert auf einer Word-‐Vorlage der HAW-‐Hamburg. Quelle: http://www.haw-‐hamburg.de/fakultaeten-‐und-‐departments/ti/fakultaetsservicebuero/abschlussarbeiten.html

Stanislav Seifert Thema der Arbeit Responsive Webdesign – Probleme und Lösungen beispielhaft erklärt am Webauftritt von Netzdurchblick Stichworte

Responsive Webdesign, Grid-‐System, HTML5, CSS3, Typo3, SASS, Compass, Grunt.js, Bootstrap 3 Framework, Responsive Image Rendering

Kurzzusammenfassung

Diese Bachelorarbeit befasst sich mit dem Relaunch der Website www.netzdurchblick.de. Aufbauend auf einer bereits reaktionsfähigen Umsetzung dieses Internetauftrittes wird in dieser Arbeit ein von Grund auf neuer, flexiblerer und zuverlässigerer Ansatz verfolgt. Neben einer deutlicheren Verbesserung der Website-‐Performance wird vor allem auch der Workflow für Entwickler optimiert, was den technischen Supportaufwand und die damit verbundenen Supportkosten senken soll.

Stanislav Seifert Title of the paper

Responsive Webdesign – Problems and solutions exemplary explained on the web-‐site Netzdurchblick

Keywords

Responsive Webdesign, Grid-‐System, HTML5, CSS3, Typo3, SASS, Compass, Grunt.js, Bootstrap 3 Framework, Responsive Image Rendering

Abstract

This bachelor thesis describes the re-‐launch of the Website www.netzdurchblick.de. Based on an already existing responsive implementation of this website a funda-‐mentally new, more flexible and reliable approach will be pursued by this bachelor thesis. In addition to the significant improvement of the website-‐performance es-‐pecially the workflow for developers will be optimized as well in order to reduce technical support effort and the associated costs.

I

Inhaltsverzeichnis

1 Einleitung ............................................................................ 1 1.1 Was ist Responsive Webdesign ..................................................................... 1

Wozu Responsive Webdesign? ............................................................................. 1 1.1.1 Desktop first vs. Mobile first ................................................................................ 2 1.1.2

Responsive Webdesign – Hauptbestandteile ........................................................ 3 1.1.3

1.2 Zielsetzung ..................................................................................................... 3 1.3 Fachliche Schwerpunkte ................................................................................ 4

2 Anforderungsanalyse ......................................................... 5 2.1 IST-Zustand ................................................................................................... 5 2.2 SOLL-Zustand ............................................................................................... 7

3 Konzept der Website .......................................................... 8 3.1 Seitentypen und Bereiche: netzdurchblick.de ................................................ 8

Startseite – Desktop .............................................................................................. 9 3.1.1

Unterseiten – Desktop ......................................................................................... 10 3.1.2

Startseite – Smartphone ...................................................................................... 12 3.1.3 Unterseiten – Smartphone ................................................................................... 13 3.1.4

Start- und Unterseite – Bildschirme zwischen Smartphone und Desktop .......... 14 3.1.5 Spezielle Seiten ................................................................................................... 14 3.1.6

4 Technische Umsetzung ..................................................... 15 4.1 Template – Vorlagen .................................................................................... 15 4.2 Frameworks .................................................................................................. 17

YAML4.1.2 ......................................................................................................... 17 4.2.1

II

Foundation 5 ....................................................................................................... 17 4.2.2

Bootstrap 3 .......................................................................................................... 17 4.2.3

4.3 Grid-System ................................................................................................. 18 4.4 Media Queries .............................................................................................. 22

Media Queries angewendet auf das Bootstrap 3-Grid-System ........................... 25 4.4.1

Media Queries angewendet auf die Schriftskalierung ........................................ 26 4.4.2

4.5 Flexible Bilder und Responsive Image Rendering ....................................... 28 Skalierung von Bildern ....................................................................................... 28 4.5.1

4.5.1.1 Hintergrundbilder – Background-Images ........................................................ 28 4.5.1.2 „Normale“ Bilder – IMG-Tag ......................................................................... 29

Responsive Images – Responsive Image Rendering .......................................... 30 4.5.2

4.5.2.1 Responsive Enhance ........................................................................................ 30 4.5.2.2 Picture Polyfill ................................................................................................. 31 4.5.2.3 Adaptive Images .............................................................................................. 32

4.6 Hilfreiche Tools für eine bessere Codeübersicht ......................................... 33 CSS Präprozessoren ............................................................................................ 33 4.6.1 SASS – Syntactically Awesome Stylesheets ...................................................... 34 4.6.2

4.6.2.1 Variablen .......................................................................................................... 34 4.6.2.2 Verschachtelung von CSS-Klassen (Nesting) ................................................. 36 4.6.2.3 Modularisierung des CSS-Codes (Partials/Import) ......................................... 36 4.6.2.4 Methoden (Mixins) .......................................................................................... 37 4.6.2.5 Vererbung (Extend/Inheritance) ...................................................................... 38 4.6.2.6 Operatoren ....................................................................................................... 39 4.6.2.7 SASS VS. LESS .............................................................................................. 39 4.6.2.8 SASS – Fazit .................................................................................................... 40

4.7 Grunt – Mehrere Tasks parallel ausführen ................................................... 40 Datei-Organisation .............................................................................................. 40 4.7.1

Konfiguration von Grunt .................................................................................... 41 4.7.2 Git – Version Control System ............................................................................. 43 4.7.3

4.8 HTML-Gerüst .............................................................................................. 43 ViewPort ............................................................................................................. 46 4.8.1

4.9 Spezifische Probleme von netzdurchblick.de .............................................. 47 Equal Height – Columns ..................................................................................... 47 4.9.1

Einklappen/Ausklappen spezifischer Columns .................................................. 48 4.9.2

III

5 Typo3 ................................................................................. 49 6 Testing ............................................................................... 53

6.1 Old Browser Support ................................................................................... 54 6.2 Performance ................................................................................................. 55

Datenmenge: Vorher – Nachher ......................................................................... 56 6.2.1

7 Fazit und Ausblick ............................................................ 57 7.1 Fazit .............................................................................................................. 57 7.2 Ausblick ....................................................................................................... 57

8 Literaturverzeichnis ......................................................... 58 8.1 Buchliteratur ................................................................................................. 58 8.2 Internetliteratur ............................................................................................. 58

9 Abbildungsverzeichnis ..................................................... 60

1

1 Einleitung

Der Webauftritt netzdurchblick.de1 wurde von Studenten der Fachrichtung Kommunikationsdesign ins

Leben gerufen und richtet sich an Kinder und Jugendliche um sie über die Grundlagen des Internets zu

informieren. Das Projekt wurde mit dem Content Management System (CMS) Typo32 aufgesetzt, um

Inhalte der Seite möglichst schnell, einfach und ohne Programmierkenntnisse editieren zu können. Im

Rahmen dieses Studienprojektes ist eine Kooperation zwischen den Studiengängen Kommunikations-

design und Media Systems entstanden, bei der die Kommunikationsdesigner ein Konzept sowie ein

Layout für verschiedene Auflösungen entwickelten. Im Anschluss wurde dieses Layout von meinem

Projektpartner (Benjamin Strilziw) und mir (Stanislav Seifert) im Rahmen eines Responsive Webde-

sign Projektes umgesetzt. An die Ergebnisse dieses Projektes soll diese Arbeit anknüpfen.

Um einen guten Einstieg in das Thema zu finden sollen vorab einige Begrifflichkeiten geklärt werden.

1.1 Was ist Responsive Webdesign Der Begriff Responsive Webdesign kommt aus dem Englischen und bedeutet übersetzt reaktionsfähi-

ges Webdesign. Gemeint ist damit ein Template für eine Website, welches i.d.R. aus HTML, CSS und

Javascript besteht und auf äußere Einflüsse adäquat reagiert. Somit ist die Anforderung an ein reakti-

onsfähiges Template, unabhängig von der Bildschirmgröße des Ausgabegerätes, Inhalte der Website

ordentlich, übersichtlich und strukturiert darzustellen. Die Erfahrung zeigt jedoch, dass ein reaktions-

fähiges Template gegenüber einem ursprünglichen „statischen“ Template deutlich komplexer ist und

die Umsetzung viel mehr Zeit in Anspruch nehmen kann.3

Wozu Responsive Webdesign? 1.1.1Aufgrund der Komplexität einer reaktionsfähigen Website lautet eine berechtigte Frage: „Warum soll-

te der Zusatzaufwand betrieben werden, eine Website reaktionsfähig umzubauen oder gar neu zu bau-

en?“ Ein reaktionsfähiges Template passt sich nicht nur an die Bildschirmgröße, sondern auch an die

Bildschirmverhältnisse eines beliebigen Ausgabegerätes an. Nicht zuletzt gehört auch die Anpassung

der Performance oder der Usability-Führung zur Funktion des reaktionsfähigen Templates.

2 Typo3: http://typo3.org, 11.03.14 3 Project Lifecycle Process: http://responsivedesign.is/strategy/rwd-process, 17.03.2014

2

Im Segment der Touchscreen Geräte wird der User beispielsweise mit einem anderen Bedienkonzept

konfrontiert als am Laptop. Statt der Maus ist der Finger das Hauptinstrument der Bedienung. Auf

diese und andere Veränderungen muss das Template reagieren können und gegebenenfalls alternative

Navigationsmodelle bieten. Auch andere Anpassungen, wie beispielsweise die Verbesserung der Les-

barkeit durch Veränderung der Schriftgrößen, werten das Surf-Erlebnis des Website-Besuchers erheb-

lich auf. Wird auf diese und andere Anforderungen an das Template Rücksicht genommen, so kann

die Verwendung der Website auf einem Smartphone oder Tablet deutlich angenehmer beziehungswei-

se in bestimmten Fällen auch überhaupt erst möglich gemacht werden.

Der Trend einer zunehmend mobilen Nutzung des Internets ist bereits heute schon gesetzt.4 Immer

mehr User gehen nicht nur unterwegs außerhalb der eigenen vier Wände über ihr Smartphone ins In-

ternet, sondern nutzen es auch zu Hause, z.B. auf der Couch alternativ zum Computer.5 In dem Fall,

dass ein User online einkaufen möchte und einen Online-Shop findet, der nicht reaktionsfähig opti-

miert ist, tendiert er wahrscheinlich dazu, einen Wettbewerber aufzusuchen, anstatt aufzustehen, um

den Kauf am Computer komfortabel abschließen zu können.5 Dadurch verliert der Onlineshop-

Betreiber potentielle Kunden und letztendlich Umsatz. Dieses Beispiel verdeutlicht die zunehmende

Wichtigkeit des Responsive Webdesigns, so dass der zusätzliche Aufwand für ein reaktionsfähiges

Template seine Berechtigung bekommt.

Desktop first vs. Mobile first 1.1.2Grundsätzlich lässt sich Responsive Webdesign in zwei Ansätze unterteilen. Diese heißen Mobile first

und Desktop first.6 Mobile first steht dabei für ein Template, das zuerst für mobile Geräte entwickelt

wird und zu einem späteren Zeitpunkt für größere Formate wie Tablet und Desktop optimiert wird.

Mobile first wird oftmals auch Content first genannt, da hier der Schwerpunkt auf den Inhalten und

nicht auf dem Design liegt. 7

Im Gegensatz dazu steht der Desktop first Ansatz. Hierbei wird mit dem Template-Entwurf für große

Bildschirme angefangen und anschließend Anpassungen für kleinere Geräte vorgenommen. Dieser

Ansatz ist designorientiert und bietet sich beispielsweise an, wenn ein bereits bestehendes statisches

Template reaktionsfähig umgebaut werden soll.

4 KANNENBERG, Axel: heise, http://www.heise.de/newsticker/meldung/Studie-Mobile-Internet-Nutzung-legt-in-Deutschland-weiter-zu-1806052.html, 25.02.2014 Statista: http://de.statista.com/statistik/daten/studie/256337/umfrage/prognose-zum-weltweiten-absatz-von-tablets-pcs-und-smartphones/, 25.03.2014 5 ZILLGENS, Christoph: Reponsive Webdesign, Carl Hanser Verlag München, 2013: S. 13 6 ZILLGENS, Christoph: Reponsive Webdesign: S. 61, BEZ, Roberto: heise, http://www.heise.de/developer/artikel/Die-Theorie-der-responsiven-Webseiten-2123587.html, 11.03.2014 7 ZILLGENS, Christoph: Reponsive Webdesign: S. 81

3

Wie an der Entwicklung beliebter CSS-Frameworks, welche in Kapitel 4.2 Frameworks behandelt

werden, heute zu erkennen ist, geht der Trend zur Zeit jedoch eindeutig in die Richtung des Mobile

first Ansatzes8.

Responsive Webdesign – Hauptbestandteile 1.1.3Ethan Marcotte unterteilt reaktionsfähiges Templating hauptsächlich in drei grundlegende Elemente 9:

• Flexibles Gestaltungsraster – Grid-System

• Flexible Bilder/Medien – Responsive Images

• MediaQuerys – CSS3 Modul

Das Grid-System stellt die Basis für ein Template Design dar und besteht aus vielen Container-Boxen,

welche anschließend mit Inhalt und Design gefüllt werden. Das Besondere an einem reaktionsfähigen

Grid-System ist, dass es auf seine Umgebung, also die Bildschirmdimensionen, reagieren kann, um

Inhalte besser darzustellen.

Bilder und andere Medien müssen sich wiederum an das Grid-System anpassen, indem sie runterska-

liert oder ausgeblendet werden. Über Skalierung oder Ausblendung eines Inhalts muss letztendlich

während einer Inhalts-Analyse und der damit verbundenen Priorisierung von Inhalten eine Entschei-

dung getroffen werden. Alternativ können ausgewählte Inhalte auch eingeklappt und somit nur tempo-

rär versteckt werden, um den Platz auf dem Bildschirm effizienter zu nutzen.

Media Queries sind ein CSS3 Modul, mit dessen Hilfe CSS-Stylesheets abhängig von einer Bild-

schirmauflösung gesetzt werden können. Diese Möglichkeit bietet dem Entwickler mehr Kontrolle

über ein Template, da es auf diese Weise für bestimmte Display-Gruppen gezielt optimiert werden

kann.

1.2 Zielsetzung Mit dem Relaunch von netzdurchblick.de sollen:

• ein effizienterer Workflow realisiert,

• Redundanzen im HTML-Template behoben,

• auf eine neue Typo3 Version gewechselt,

• eine höhere Zuverlässigkeit und Flexibilität des Templates erreicht und

• eine Performance-Verbesserung der Seite erzielt werden.

8 ZAGLOV, Ilja, t3n: http://t3n.de/news/webdesign-trends-2014-518425/, 25.02.2014 9 MARCOTTE, Ethan: Responsive Webdesign, Published by Jeffrey Zeldman, 2011, S. 9

4

1.3 Fachliche Schwerpunkte

Da der Schwerpunkt dieser Arbeit auf dem Thema Responsive Design liegt, werden neben projektspe-

zifischen Problemstellungen des netzdurchblick.de Templates auch unterstützende Tools wie CSS

Präprozessoren, Frameworks wie Bootstrap, Taskmanager, Grid-Systeme, Responsive Image Ren-

dering, Media Queries, Performance-Optimierung und Abwärtskompatibilität in älteren Browsern

behandelt. All diese Themen werden sowohl theoretisch in dieser Arbeit, als auch praktisch in der

Umsetzung eines realen Projektes behandelt.10

Frontend-Templating und die Einbindung in Typo3 liegen nah beieinander. Aufgrund dieser Tatsache

wird am Ende dieser Arbeit eine laufende Typo3 Installation vorhanden sein, die die Vorteile des

überarbeiteten Frontend-Templates aufzeigen soll. Aus Zeit- und Platzgründen werden jedoch nicht

alle relevanten Systeme, Konzepte und Techniken so wie z.B. Typo3 intensiv beleuchtet werden kön-

nen.

10 Netzdurchblick Development-Umgebung: http://pstud6.mt.haw-hamburg.de/, 17.03.13

5

2 Anforderungsanalyse

Da das Team von netzdurchblick.de als ein Kunde, der den reaktionsfähigen Umbau der Website netz-

durchblick.de beauftragt hat, angesehen werden kann, wird in dieser Arbeit von einem realen Kunden

ausgegangen.

2.1 IST-Zustand11 Wie bereits in der Einleitung erwähnt, ist netzdurch-

blick.de ein Internetratgeber, der das Ziel verfolgt,

Kinder und Jugendliche über Grundlagen im Internet

zu informieren. Um technisch zeitgemäß zu bleiben,

wurde vom Kunden seiner Zeit der Entschluss getrof-

fen, die Seite reaktionsfähig anzupassen. Im Grunde

genommen besteht der gesamte Webauftritt von netz-

durchblick.de aus nur zwei Standard-Templates: dem

Start- und Unterseiten-Template, welche anpassungsfä-

hig optimiert wurden. Wie diese Templates im Detail

aussehen und sich unterscheiden wird in Kapitel 3

Konzeption erläutert.

Durch die Tatsache, dass der netzdurchblick.de IST-Zustand während eines Studienprojektes mit einer

begrenzten Anzahl an Stunden entstanden ist, war aus Zeitmangel lediglich eine reaktionsfähige An-

passung der bis dahin statischen Templates möglich. Eine andere Vorgehensweise, wie z.B. ein kom-

pletter Umbau oder Neubau der Webseite, war in diesem Zeitraum nicht möglich. Als Konsequenz

dieser Tatsache konnten die Templates nicht ausreichend zuverlässig reaktionsfähig umgebaut werden.

Der Grund dafür war, dass die technische Grundlage von netzdurchblick.de auf einer stark verschach-

telten HTML-Struktur basiert und einige reaktionsfähige Anpassungen über direkte ID-Selektionen

umgesetzt werden mussten. Da sich IDs abhängig zu neu angelegten Spalten oder Inhalten ändern

können, ist dadurch an einigen Stellen eine fehlerhafte Darstellung der Seite nicht auszuschließen.

Dieses Risiko war jedoch mit dem Hinweis für Redakteure, dass keine neuen Inhalte auf der Startseite

erstellt sondern nur editiert werden dürfen, von Anfang an kommuniziert, um mögliche Darstellungs-

fehler zu vermeiden. Dennoch verliert die Seite durch diese Einschränkung für Redakteure an Flexibi-

lität und kostet zusätzliche Zeit in der Pflege. Durch das ständige Risiko einer fehlerhaften Darstellung

11 Netzdurchblick: http://netzdurchblick.de, 11.03.2014

Abbildung 1 - netzdurchblick.de Startseite

6

werden sich evtl. einige Redakteure darüber hinaus bei der Pflege der Daten unsicher fühlen und lang-

samer arbeiten.

Neben der Zuverlässigkeit muss bei reaktionsfähigen Websites wie netzdurchblick.de auch verstärkt

auf die Performance der Seite geachtet werden. In Detail beschreibt die Performance die Datenanzahl

und Datenmenge der gesamten Seite. Diese Größen sind letztendlich ausschlaggebend für die Ladezeit

der Website sowie den Traffic und die damit verbundene Auslastung des Servers. Durch die reaktions-

fähigen Anpassungen an netzdurchblick.de wurde die Seite jedoch anstatt „schlanker“ zu werden so-

gar noch etwas größer. Mit beispielsweise 1,1 Megabyte auf der Startseite ist der Webauftritt für mo-

bile Geräte wie Smartphones sehr groß. Hinzu kommt, dass durch die reaktionsfähige Erweiterung und

den damit verbundenen Anspruch einer neuen Navigations-Struktur, Redundanzen durch doppelte

Navigationsausgaben für die Mobile- und Desktopgröße im HTML entstanden sind.

Durch die reaktionsfähige Erweiterung von netzdurchblick.de, hat auch die Menge am CSS und Ja-

vascript-Code zugenommen. Dies hatte wiederum zur Folge, dass beispielsweise CSS-Dateien, wie

responsive.css mit 936 Zeilen oder anpassungen.css mit 1184 Zeilen, unübersichtlich geworden sind

und den Support der Seite für den Kunden zeitaufwändiger und somit teurer werden lassen.

Um die Nachteile der vorhandenen reaktionsfähigen Umsetzung von netzdurchblick.de aus Kunden-

sicht zusammen zu fassen, soll folgende Auflistung helfen:

• Das Anlegen neuer Inhalte, Spalten oder allgemeiner Container kann in der Praxis zu einer

fehlerhaften Darstellung der Seite führen.

• Das Gewicht der Seite ist deutlich zu groß und bringt lange Ladezeiten für Besucher mit sich.

• Der technische Supportaufwand der Seite und die damit verbunden Kosten sind zu hoch.

Aus den bisher gesammelten Fakten lässt sich das Resümee ziehen, dass eine reaktionsfähige Anpas-

sung einer statischen Seite zwar schneller als ein Relaunch der kompletten Seite umzusetzen wäre,

dennoch, je nach Zustand bzw. der Ausgangssituation des zu optimierenden Projektes, Fehleranfällig-

keit sowie höheres Supportaufkommen und andere Nachteile auftreten könnten.

Besonders der Punkt des zeitaufwändigen Supportaufkommens bringt bei einem Relaunch sehr viel

Verbesserungspotential mit sich. Doch bevor sich für einen Relaunch einer Website entschieden wird,

müssen auch die Konsequenzen betrachtet werden. Anders als bei Anpassungen muss bei einem Pro-

jekt-Relaunch wie netzdurchblick.de alles von Grund auf neu erstellt werden. Damit sind Punkte wie

eine neue Backend-Installation, Konfigurationen und Daten-Pflege bzw. Daten-Migration gemeint.

Diese Arbeitsaufwendungen nehmen natürlich viel Zeit in Anspruch, geben dem Entwickler im Ge-

7

genzug aber auch die Möglichkeit, eine komplett neue und saubere, auf Responsive Webdesign ausge-

legte Projekt-Struktur aufzubauen. Davon profitiert letztendlich auch der Kunde, indem laufende Sup-

portkosten gesenkt werden können.

2.2 SOLL-Zustand12 Alle im vorherigen Abschnitt genannten Problemstellungen des IST-Zustandes von netzdurchblick.de

können mit einem Relaunch der Seite behoben oder verbessert werden. Natürlich muss der Kunde

dafür zunächst einmal mehr Geld investieren, als es bei reinen Anpassungen der Templates der Fall

wäre. Dennoch rechnet sich diese Investition auf lange Sicht, da der Pflege- und Supportaufwand der

Website gesenkt wird. Auch das Besuchererlebnis profitiert von dieser Investition des Kunden, da die

Seite durch eine Optimierung der Performance schneller geladen werden kann.

Im Detail sind folgende Lösungen für den netzdurchblick.de IST-Zustand gefordert:

Durch den Relaunch von netzdurchblick.de sollen

• ein zuverlässiges Erscheinungsbild unabhängig von der Datenpflege ermöglicht werden.

• Quell-Dateien wie CSS oder Javascript besser strukturiert und eine bessere Code-Übersicht

gewährleistet werden. Allgemein soll der Workflow für Entwickler optimiert und das Sup-

portaufkommen minimiert werden.

• die Performance der Website verbessert werden, um Besuchern ein schnelleres Surferlebnis

bieten zu können.

• dem Redakteur mehr Flexibilität in der Beeinflussung des Erscheinungsbildes des Frontends

gegeben werden. Im Detail soll der Redakteur damit die Möglichkeit bekommen die Anord-

nung der Inhalts-Container über das Backend zu steuern.

• der günstige Zeitpunkt auch gleichzeitig für ein Typo3-Update genutzt werden.

12 Netzdurchblick Development-Umgebung: http://pstud6.mt.haw-hamburg.de , 11.03.2014

8

3 Konzept der Website

3.1 Seitentypen und Bereiche: netzdurchblick.de Der gesamte Webauftritt von netzdurchblick.de besteht aus zwei grundlegenden Templates: dem Start-

seiten- und Unterseiten-Template. Wie die meisten Template-Designs für CMS-Systeme ist auch die-

ses in klare Bereiche gegliedert (Abb. 2).

Abbildung 2 - Template Bereiche

9

Startseite – Desktop 3.1.1

Header

Der Header von netzdurchblick.de enthält das Logo und zwei Social-Media-Buttons zu Facebook und

Twitter.

Main-Navigation

Die Main-Navigation ermöglicht es dem User zwischen den einzelnen Kategorien zu navigieren. Als

Hover-Event oder Active-Zustand kommt ein kurzer Beschreibungstext zur jeweiligen Kategorie hin-

zu. Wenn keine Kategorie aktiv ist, zum Beispiel wenn sich der User auf der Startseite oder Suchseite

befindet, wird folgender Text angezeigt: „Fahre mit der Maus über die Buttons für mehr Informatio-

nen.“

Slider

Der Slider basiert auf dem jQuery13 Plugin Nivoslider14 und animiert Bilder, die über das Backend von

Typo3 gepflegt werden können. Der Slider findet nur auf der Startseite Anwendung, jedoch nicht auf

den Unterseiten. Im späteren Projektverlauf wird das Nivoslider-Plugin aus performancetechnischen

Gründen gegen das Bootstrap 3 Carousel ausgetauscht.

Main-Content-Container

Der Main-Content-Container ist der komplexeste und größte Bereich von netzdurchblick.de. Dieser

Bereich enthält weitere Unterbereiche, die in HTML-Container gegliedert sind. Diese stehen in Co-

lumns (Spalten) und Rows (Reihen), ähnlich wie bei einer Tabelle, zueinander. In Kapitel 4 Techni-

sche Umsetzung wird detailliert erklärt, wie sich Inhalts-Boxen in diesem Bereich abhängig von äuße-

ren Einflüssen verhalten.

Footer

Abschließend befindet sich im unteren Bereich der Seite der Footer, der eine Meta-Navigation und

verlinkte Logos zu den Partnern enthält. Die Partner-Logos sind der einzige Bereich im Layout, der

aus dem Site-Container bricht und rechts unten anknüpft.

13 Javascript Framework 14 NivoSlider: http://dev7studios.com/plugins/nivo-slider/, 11.03.2014

10

Unterseiten – Desktop 3.1.2Das Start- und Unterseiten Template unterscheiden sich prinzipiell nur in den Bereichen Main-

Content-Container und Slider.

Abbildung 3 - Unterseiten Bereiche, Kategorie PC-CHECK

Wie in Abbildung 3 zu sehen ist, ist der Slider auf der Unterseite nicht mehr vorhanden. Stattdessen

knüpfen Sub-Navigation und der Main-Content-Container direkt an die Main-Navigation an. Zudem

wird das Layout im Gegensatz zur Startseite in der ersten Ebene zweispaltig. In der linken Spalte wird

die Sub-Navigation und in der rechten Spalte der Main-Content-Container platziert. Der Main-

Content-Container geht somit nicht mehr über die volle Breite. Die in Abbildung 3 gezeigte Inhalts-

Box breitet sich über die volle Breite des Main-Content-Containers aus. Abbildung 4 hingegen zeigt

ein Konstrukt, in dem der Main-Content-Container mehrere Inhalts-Boxen enthalten kann.

Abbildung 4 – Main-Content-Container mit mehreren Inhalts-Boxen

11

Wie bereits an der Main-Navigation erkennbar ist, enthält jede Kategorie ihre eigene Farbgebung.

Diese Farbgebung findet sich im Unterseiten-Template – abhängig von der ausgewählten Kategorie –

wieder. So enthält beispielsweise die Kategorie „PC-Check“ die Basisfarbe Grün (Abb. 3). Die Kate-

gorie „Web Gesetz“ hat hingegen die Basisfarbe Orange (Abb. 5). Diese individuelle Farbgebung er-

streckt sich über alle Kategorien.

Abbildung 5 - Kategorie WEB GESETZ

12

Startseite – Smartphone 3.1.3Das Designkonzept für

Smartphone Geräte lässt

sowohl die Sub-Navigation

als auch die Suche hinter

einer Schaltfläche ver-

schwinden, welche sich per

Klick wieder öffnen lässt

(Abb. 7 und 8). Der Social

Media-Bereich im Header

verschwindet vollständig.

Auch die Farbgebung der

gesamten Seite verändert

sich von dunkelgrau zu

blau. In Abbilung 6 ist die

Startseite im Überblick zu sehen.

Die Logos der Partner wandern in den Seiten-Container

und verteilen sich gleichmäßig horizontal über die ge-

samte Breite.

Die Inhalts-Boxen brechen untereinander um und erscheinen in der

mobilen Version auf der Startseite eingeklappt. Beim Klick auf die Head-

line beziehungsweise auf den Pfeil einer Inhalts-Box klappt die jeweilige

Inhalts-Box wieder auf (Abb. 6 und 9).

Große Bilder wie die im Slider werden abhängig zur Bildschirmbreite

kleiner skaliert. Inhaltliche Bilder, die klein genug für alle Auflösungen

sind, behalten ihre ursprüngliche Größe. Auch die Textgröße wird, ab-

hängig von der Bildschirmbreite, beeinflusst.

Abbildung 7 - Smartphone Ansicht der Main-Navigation

Abbildung 6 - Mobilegerät Seitenübersicht

Abbildung 9 – Inhalts-Box aufgeklappt

Abbildung 8 - Mobilegerät Ansicht der Suche

13

Unterseiten – Smartphone 3.1.4Der Aufbau der Unterseiten verhält sich, wie bereits in der Desktopvariante, ähnlich dem Startseiten-

Aufbau. Den Platz des verschwundenen Sliders nimmt die Sub-Navigation ein. Direkt daran knüpft

der Main-Content-Container an, wobei alle Inhalts-Boxen untereinander brechen und nicht, wie auf

der Startseite, eingeklappt dargestellt werden. Abbildung 10 und 11 zeigen zwei Variationen einer

Unterseite.

In der Sub-Navigation (Abb. 12) lassen sich auch

tiefere Navigationsebenen darstellen. Enthält

eine Seite weitere Unter-

seiten, so klappen unter

dem Navigationsmenü weitere Navigationsflächen auf. Das ist bis zu einer Tie-

fe von drei Ebenen möglich. Klickt der User auf eine Navigationsfläche zweiter

oder dritter Ebene, so erscheint die Sub-Navigation auf der Zielseite für diesen

Punkt bereits geöffnet.

Abbildung 12 – Smartphone Navigation

Abbildung 10 - Unterseite mit einer Inhalts-Box

Abbildung 11 - Unterseite mit mehreren Inhalts-Boxen

14

Start- und Unterseite – Bildschirme zwischen Smartphone und Desktop 3.1.5Zwischen den Smartphone- und Desktopgrößen befindet sich die Tabletgröße. Für die Tabletgröße

war die Vorgabe des Designs offen. Letztendlich orientierte sich die Umsetzung für den IST-Zustand

an der technischen Ausführbarkeit der Anpassungen an netzdurchblick.de. Im SOLL-Zustand soll die

Verteilung der Inhalts-Boxen und somit das Erscheinungsbild der Seite über das Backend steuerbar

sein. Dadurch erübrigt sich ein spezielles Layout für die Tabletgröße.

Spezielle Seiten 3.1.6Basierend auf dem Unterseiten Template gibt es auf netzdurchblick.de eine Reihe an speziellen Seiten,

wie beispielsweise ein HTML 5 Spiel, ein Quiz, eine Sitemap oder ein Glossar. Diese Seiten werden

in dieser Arbeit allerdings nicht behandelt, da sie nicht in direkter Verbindung mit dem Templating

stehen, sondern für sich alleinstehende Anwendungen sind.

15

4 Technische Umsetzung

Zu Beginn eines Responsive Webdesign Projektes müssen in der Regel mehrere Instanzen durchlaufen

werden, bevor die technische Abteilung mit der Umsetzung beginnen kann. Genau deshalb beginnt

Responsive Webdesign bereits in der Konzeptions- und Design-Phase. Natürlich hat auch der Kunde

ein Wort mitzureden. Somit muss sicher gestellt sein, dass alle Instanzen in den Prozess mit einbezo-

gen werden. Bevor Templates reaktionsfähig gebaut wurden, waren Websites statisch. Dadurch war

nur ein Design-Entwurf notwendig, den die Entwickler möglichst exakt in HTML und CSS zu kopie-

ren versuchten.15 Da der heutige Markt immer mehr Endgeräte zum Internetsurfen bereitstellt, ist eine

Entwicklung von reaktionsfähigen Websites notwendig. Natürlich kann ein Designer nicht für unzäh-

lige Bildschirmgrößen verschiedenste Entwürfe machen. Daher werden meist nur grobe Designvor-

schläge für Mobile, Tablet und Desktop ausgearbeitet. Aus dieser Entwicklung ergibt sich folgende

Konsequenz: Layouts können und sollen nicht mehr pixelgenau zu einer Photoshop-Vorlage umge-

setzt werden. Trotzdem wird eine maximale Annäherung an eine grafische Vorlage angestrebt. Diese

Information ist auch für die Projektleitung überaus wichtig und notwendig. Da ein Kunde diese Fakten

nicht kennt, kann es schnell zu einem unzufriedenen Ergebnis aus Kundensicht kommen. Somit sollte,

anders als bei statischen Templates, der Workflow geändert und die Kommunikation zwischen Kunde,

Projektleitung, Designer und Programmierer ständig am Laufen gehalten werden. Beim Betrachten des

IST-Zustandes von netzdurchblick.de kann festgestellt werden, dass das Template in der Desktopauf-

lösung dennoch nahezu perfekt zur ursprünglichen statischen Umsetzung passt. Das liegt in diesem

Fall daran, dass sich an dem Template im Prinzip zum Ursprungszustand für die Desktopauflösung

nichts geändert hat und nur Anpassungen für kleinere Geräte mit geringerer Bildschirmgröße gemacht

worden sind. Somit ist festzuhalten, dass das Template des IST-Zustandes von netzdurchblick.de ge-

nau genommen ein Mix aus einem statischen und anpassungsfähigen Template ist.

4.1 Template – Vorlagen Frontend-Entwicklung ist in den letzten Jahren sehr komplex geworden. Der Grund dafür ist die zu-

nehmende Anzahl an Browsern und Browserversionen.16 Zusätzlich gibt es neue CSS3 Eigenschaften

und HTML5-Tags, die ältere Browser nicht mehr unterstützen. Zeitgemäße Templates müssen reakti-

onsfähig und trotzdem möglichst Browser abwärtskompatibel sein. Auch Animationen, Frontend-

Funktionen und Interaktionen sollen nach Möglichkeit ohne externe Browser-Plugins, wie z.B. Flash,

möglich sein. Um allen diesen Anforderungen an ein Template gerecht zu werden, ist ein Grundgerüst

15 ZILLGENS, Christoph: Reponsive Webdesign: S. 9 16 StatCounter: http://gs.statcounter.com/#browser_version-ww-weekly-200827-201327, 11.03.2014

16

durch eine Template-Vorlage sinnvoll. HTML5Boilerplate17 stellt genau zu diesem Zweck eine um-

fangreiche Universalvorlage zum Gestalten von Websites kostenlos zur Verfügung. Eine solche Temp-

late-Vorlage ist eine von Experten zusammengestellte Sammlung von Frameworks, Konfigurations-

Dateien und weiteren hilfreichen Dateien, die beispielsweise Cross-Browser-Normalisierung, Perfor-

mance-Optimierung und andere nützliche Features mitbringen. Natürlich ist HTML5Boilerplate längst

nicht mehr der einzige Anbieter, der Frontend-Pakete dieser Art anbietet. Eine weitere Anlaufstelle für

eine Template-Vorlage ist z.B. auch Initializr18. Initializr ist jedoch ein Vorlagen-Generator, der eine

Vorlage individuell nach den Anforderungen des Entwicklers zusammenstellt. Die Auswahl an

Frameworks, Polyfills19 und anderen Dateien ist bei Initializr zwar groß, aber durch die ständig wach-

sende Vielfallt an Technologien ebenfalls nicht vollständig.

Darüber hinaus gibt es noch viele andere ähnliche Anbieter. Dennoch sollte sich ein Entwickler die

Zeit nehmen, eine eigene Vorlage anzufertigen. Der entscheidende Vorteil dabei ist, dass durch eine

eigene Vorlage alle möglichen Präferenzen, Konzepte und Technologien berücksichtigt werden kön-

nen.

Für den netzdurchblick.de SOLL-Zustand wurde daher eine eigene Template-Vorlage erstellt und

darüber entschieden, ob der Einsatz von einem Framework grundsätzlich sinnvoll ist und wenn ja,

welches. Wie schon am Anfang dieser Arbeit erwähnt, wird in der Frontend-Endwicklung mit HTML,

CSS und Javascript gearbeitet. Da HTML erst mal nur eine Seitenbeschreibungssprache ist und den

Content im Prinzip nur strukturiert, macht hier der Einsatz von einem Framework keinen Sinn. Im

Gegensatz dazu ist CSS und besonders Javascript sehr viel umfangreicher. Hier kann der Einsatz von

einem Framework sinnvoll und sehr praktisch sein. CSS Frameworks bieten eine Sammlung von Klas-

sen, die in HTML-Tags als Attribute vergeben und somit nur noch benutzt werden müssen. In speziel-

len Bereichen wie einem Grid-System, das im nächsten Abschnitt behandelt wird, macht ein CSS-

Framework Sinn, unter anderem, weil dahinter ein bereits gut durchdachtes und geprüftes Konzept

von Experten steckt. Javascript ist im Gegensatz zu CSS, wie der Name schon sagt, eine Skriptspra-

che, die ursprünglich für dynamisches HTML entworfen wurde. Ein Framework für Javascript, wie

z.B. jQuery, kann als eine Art Programmiergerüst angesehen werden, dass z.B. das Selektieren von

Objekten erleichtert und Methoden für Animationen sowie Manipulationen und vieles mehr anbietet.

17 MANIAN, Divya, HTML5 Boilerplate Web Development, Published by Packt Publishing Ltd., 2012, S. 20 HTML5Boilerplate: http://html5boilerplate.com/, 26.02.2014 18 Initializr: http://www.initializr.com/, 11.03.2014

17

4.2 Frameworks Gerade in der heutigen Zeit, in der Templates sehr viel komplexer sein müssen als früher, sollte die

Entscheidung auf ein zuverlässiges und flexibles Framework fallen. Natürlich kann auch bei Null an-

gefangen und damit sehr projektspezifisch gearbeitet werden, was jedoch nicht wirtschaftlich wäre.

Zudem sind viele gute Frameworks flexibel genug, um ausreichend projektspezifisch arbeiten zu kön-

nen. Wenn die Einarbeitung in ein Framework erstmal erfolgt und das Konzept dahinter verstanden ist,

die Klassen und gegebenenfalls die Funktionen kennengelernt wurden, lässt sich mit einem Frame-

work, bei jedem weiteren Projekt, immer wieder viel Zeit einsparen.

Mittlerweile bieten sehr viele Anbieter, ob kostenpflichtig oder Open-Source, Frameworks an. Jedes

einzelne davon unterliegt besonderen Eigenheiten, Vorgehensweisen und Prinzipien. Daher fällt die

Entscheidung über das bestgeeignetste Framework sehr schwer. Durch die Fülle an Frameworks fehlt

die Zeit, jedes einzelne genau zu erforschen. Daher soll im Folgenden ein kurzer Überblick über die

derzeit drei erfolgreichsten CSS-Frameworks gegeben werden.20

YAML4.1.2 4.2.1YAML 4.121 ist ein kostenpflichtiges CSS Framework und liegt preislich bei € 59,00 pro Projekt. Die-

ses Framework enthält neben einem Grid-System viele vorabgestylte Web-Elemente wie Formulare,

Buttons und Icons. Das schlagkräftigste Argument für YAML4.1.2 ist, dass es in über 30 CMS-

Systemen wie Typo3, Joomla und Drupal einfach integriert werden kann.

Foundation 5 4.2.2Foundation 522 ist ein Open-Source Framework und liegt derzeit in der Version 5 vor. Das responsive

Framework basiert auf einem 940px breiten CSS-Grid und wird neben der Javascript Bibliothek „Zep-

to“ mit SASS-Dateien23 im CSS-Kern ausgeliefert. Durch den Vergleich zu anderen Frameworks ist es

sehr schlank und gilt als sehr einsteigerfreundlich.

Bootstrap 3 4.2.3Das Responsive Framework Bootstrap 324 ist, wie Foundation 5, ebenfalls ein Open-Source Frame-

work und erfreut sich derzeit größter Beliebtheit. Ursprünglich wurde es für Twitter entworfen, später

aber als eigenständiges Framework fortgeführt. Bootstrap 3 ist, neben Foundation 5, zur Zeit das be-

19 Ein Polyfill ist ein Script mit dessen Hilfe, eine fehlende Funktionen nachgerüstet werden kann. 20 GEBAUER, Tobias: http://www.the-webdesign.net/blog/die-besten-10-responsive-frameworks/, 25.03.2014 21 YAML: http://www.yaml.de, 11.03.2014 22 Foundation: http://foundation.zurb.com, 11.03.2014 23 SASS- und LESS-Dateien sind Dateien mit einer Speziellen CSS-Syntax für den Einsatz von CSS Präprozes-soren. Dazu mehr in Kapitel 4.6.1 – CSS Präprozessor. 24 Bootstrap 3: http://getbootstrap.com, 11.03.2014

18

kannteste Framework. Wie auch die bereits vorgestellten Frameworks wird es mit einem Grid-System

zum Download angeboten. Bootstrap 3 gibt es sowohl mit LESS- als auch SASS-Dateien im Kern

zum herunterladen. Zudem bietet das Framework eine große Sammlung an Oberflächenelementen wie

Navigationselemente, Tooltips oder Image-Slider, welche teilweise über eine auf jQuery basierte, in-

terne Javascript-Funktionalität erweitert werden können. Dabei erfreut sich Bootstrap 3 einer sehr

großen und lebhaften Community, was ein gutes Indiz für eine zukunftssichere Weiterentwicklung ist.

Nach der Auseinandersetzung mit den verschiedenen Framework-Angeboten ist die Entscheidung über

ein Framework für den Relaunch von netzdurchblick.de auf das Framework Bootstrap 3 gefallen. Aus-

schlaggebend war dabei das ausgefeilte Grid-System des Frameworks, die interne Javascript-

Bibliothek und der zur Verfügung gestellte CSS-Kern in SASS und LESS. Darüber hinaus lässt sich

Bootstrap 3 über eine Extensionssammlung bequem in Typo3 integrieren. Somit sind fast alle Anfor-

derungen an das neue netzdurchblick.de Template abgedeckt.

4.3 Grid-System Im vorherigen Kapitel wurde geklärt welches Framework für netzdurchblick.de ausgewählt wurde.

Darauf aufbauend wird in diesem Teilkapitel zunächst auf die allgemeine Logik hinter einem Grid-

System eingegangen. Anhand der daraus resultierenden Erkenntnisse wird weiterhin an das Konzept

des Bootstrap 3 Grid-Systems angeknüpft.

Wie bereits festgestellt wurde, gehört das Grid-System zu den drei Grundelementen des Responsive

Webdesign und hat die Funktion, aus einem ehemals „starren“ ein flexibles Template zu ermöglichen.

Am besten realisieren lässt sich das, indem das Template in relative Einheiten wie Prozente eingeteilt

wird. Um Pixel-Einheiten in Prozent-Einheiten umzuwandeln, dient folgende mathematische Formel:25

Zielgröße / Kontext * 100 = gesuchter Prozentwert

Die Zielgröße ist die Breite (in Pixel) einer Column, für die die Breite in Prozent gesucht wird. Der

Kontext ist die Breite (in Pixel) des Eltern-Elements zu der Column. Ausgehend von der netzdurch-

blick.de Startseite, die in der Desktopgröße eine Breite von 1000 Pixel hat, ergibt sich folgendes Sze-

nario (Abb. 13): Im Seiten-Container, der 1000 Pixel breit ist, befindet sich ein weiterer Container mit

der Klasse „row“. Dieser Container enthält wiederum zwei Column-Container mit der Klasse col. Die

Row im Seiten-Container nimmt mit 100 prozentiger Breite die Breite des Seiten-Containers an. Um

nun die Breiten der Column-Container in der Row zu errechnen, dient folgende Rechnung:

[500 Px / 1000 Px * 100 % = 50%]

25 ZILLGENS, Christoph: Reponsive Webdesign: S. 21

19

Abbildung 13 – Rows und Columns

500 Pixel bedeuten also im Kontext zur Row 50 Prozent. Da die Breiten im CSS nun in Prozent anstatt

in Pixel angegeben werden bleiben die Column-Breiten immer relativ zur Breite der Row. Wird die

Row kleiner, so werden auch die Columns in Relation zur Row kleiner.

Die hierarchische Struktur im HTML sieht wie folgt aus (Abb. 14):

Abbildung 14 – Row und Column HTML-Struktur

Tatsächlich ist es in der Praxis aufwändig und zeitraubend die Breite für jeden Container in Prozent

umzurechnen. Daher basieren die meisten Grid-Systeme wie auch Bootstrap 3 auf einem ähnlichen,

aber anderen Konzept zur Breitenberechnung. Für die Berechnung der Breiten in Prozent wird in der

Breiteneinheit Column gerechnet anstatt in Pixeln oder direkt in Prozent. Dabei basieren alle bisher

vorgestellten Frameworks, so auch Bootstrap 3, auf einem zwölfspaltigen Grid-System (Abb. 15).

Abbildung 15 – Zwölfspaltiges Grid-System

<div class=“container“>

<section class=“row“>

<div class=“col“ />Column 1</div>

<div class=“col“ />Column 2</div>

</section>

</div>

20

Da die Row in Abbildung 15, in der sich zwei Columns befinden, zwar 1000 Pixel breit ist, jedoch im

netzdurchblick.de Layout rechts und links ein Padding von 6 Pixel aufweist, muss von einer Breite mit

988 Pixel26 ausgegangen werden. Die rosafarbenen Streifen stehen für eine Columneinheit. Da das

Layout von netzdurchblick.de 8 Pixel Abstand zwischen den Inhalts-Containern fordert, hat jede Co-

lumneinheit sowohl rechts als auch links 4 Pixel Padding27. Wurde bisher noch nicht mit dem Box-

Model „border-box“ von CSS3 gearbeitet, fällt auf, dass die 4 Pixel Padding rechts und links auf die

Column Width aufaddiert werden. In diesem Fall würde die Breite der Columneinheiten nicht mehr

passen. Um diesem Problem entgegen zu wirken, gibt es die CSS3-Eigenschaft „box-sizing: border-

box;“. Diese CSS-Eigenschaft stellt das Box-Model so ein, dass Paddings nicht mehr auf die Breite

aufaddiert werden, sondern in die Breite verrechnet werden. Einfacher gesagt hat dann jede Column-

einheit anstatt 82,333 Pixel in der Breite nur noch 74,333 Pixel + 8 Pixel Padding.

Um zur Kernidee der Columneinheiten zurück zu kommen, muss erneut Abbildung 15 betrachtet wer-

den. Wie deutlich zu erkennen ist, verteilen sich zwölf Columneinheiten auf die volle Breite von

100%. Anders ausgedrückt stehen zwölf Columneinheiten stellvertretend für eine Breite von 100%.

Somit ergibt sich für sechs Columneinheiten eine Breite von 50% und für drei Columneinheiten eine

Breite von 25%. Aus diesem einfachen Konstrukt ergibt sich das Grid-System.

An diesem Punkt stellt sich die Frage, wie ein „krummes“ Pixelmaß von beispielsweise 82,333 Pixel

auf einem Monitor dargestellt werden kann. Schließlich gibt es keine drittel oder halbe Pixel. Browser

runden in einem solchen Fall gegebenenfalls auf oder ab. Somit würde im oben genannten Beispielfall

jede Column mit 82 Pixel Breite dargestellt werden. Was aber passiert mit dem restlichen Platz? Im-

merhin müssen insgesamt 100% erreicht werden. Die Rechnung [82 Pixel * 12 Columns] ergibt nur

984 Pixel. Eine Breite von 100% entspricht jedoch 988 Pixel. Was passiert also mit den vier Pixel

Differenz? Moderne Browser von heute erkennen dieses Problem automatisch und beheben es. Ältere

Browser hingegen lassen den Platz einfach frei. Das ist ein Problem, das erst einmal so hingenommen

werden muss.28

Durch das Verwenden eines zwölfspaltigen Grid-Systems für netzdurchblick.de können bestimmte

Column-Verhältnisse nicht dargestellt werden. Wenn die möglichen Kombinationen der Column-

Verhältnisse zueinander betrachtet werden, lassen sich im Prinzip nur folgende Szenarien realisieren:

26 [1000 - (2 * 6) = 988] 27 Container - Innen Abstand 28 ZILLGENS, Christoph: Reponsive Webdesign: S. 22

21

1 Spalte * 12 Columneinheiten = 100% Breite

2 Spalten * 6 Columneinheiten = 100% Breite





Oder eine Kombination wie z.B.: 4 Coleinh. + 3 Coleinh. + 3 Coleinh. + 2 Coleinh. = 100% Breite

Was passiert aber, wenn ein Konstrukt, wie auf der Startseite von netzdurchblick.de (Abb. 16), umge-

setzt werden muss?

Abbildung 16 – Startseiten Column Verhältnis

Keines der oben genannten Columnverhältnisse eignet sich für die Umsetzung dieses Konstrukts.

Würden die drei gleichgroßen Spalten rechts eine Columneinheit von drei bekommen, so wären nur

noch drei Columneinheiten übrig. Alle Spalten wären somit gleich breit. Eine Columneinheit von vier

für die linke Column wäre ebenfalls nicht zu gebrauchen. Schließlich bleiben dann nur noch acht Co-

lumneinheiten übrig, die sich nicht in drei gleichgroße Spalten einteilen lassen. Somit stößt das Grid-

System in diesem Fall scheinbar an seine Grenzen.

Um dieses Problem zu lösen, bieten sich

prinzipiell zwei Ansätze an. Bei dem ersten

Ansatz (Abb. 17) wird das Grid-System

verschachtelt. Dazu wird, wie im obigen

Beispiel, eine linke Spalte mit vier Colum-

neinheiten und eine rechte Spalte mit acht

Columneinheiten erzeugt. Abbildung 17 – Grid-System Verschachtelung

22

Die rechte Spalte enthält wiederum eine weitere Row, so dass hier erneut zwölf Columneinheiten ver-

fügbar werden. Somit würden die drei gleichgroßen Spalten mit jeweils vier Columneinheiten in einer

eigenen Row liegen.

Wie zu sehen ist, bietet diese Art der Verschachtelung des Grid-Systems eine elegante Lösung dieses

Problems. Dennoch existiert eine weitere Lösung, die eine Verschachtelung umgeht und somit die

gleichgroßen Spalten rechts nicht mehr in eine Gruppe bindet. Der zweite Ansatz erfolgt durch das

Erweitern des Grid-Systems auf mehr Spalten. Gut geeignete Werte neben zwölf Spalten sind auch 16,

18 oder 21 Spalten. Je mehr Spalten einem Grid-System zugrunde liegen, desto mehr Konstrukte be-

ziehungsweise Variationen lassen sich unverschachtelt darstellen. Im Falle von netzdurchblick.de

reicht es, wenn das Grid-System auf 18 Spalten erweitert wird. Schließlich lässt sich mit einem 18-

spaltigen Grid-System ein Konstrukt von 6+4+4+4 = 18 Columneinheiten darstellen. An welcher Stel-

le und wie genau eine Grid-Erweiterung gemacht werden kann, wird in Kapitel 4.4.1 Media Queries

angewendet auf das Bootstrap 3-Grid-System näher erläutert.

Die Verschachtelung von HTML-Elementen geht zu Lasten

der Flexibilität eines Templates. Daher wäre mit der ersten

Variante (Grid-System-Verschachtelung) beispielsweise eine

Darstellung der Spalten, wie in Abbildung 18 gezeigt, nicht

möglich, da die Spalten mit den Headlines „Downloads“,

„Comics“ und „Videos“ in einem eigenen Row-Container

liegen. Zumal das Ziel dieser Arbeit unter Anderem maxima-

le Flexibilität von dem Template fordert, kommt für netz-

durchblick.de Variante 2, mit der Griderweiterung, zum Ein-

satz.

Wie in Kapitel 4.8 HTML-Gerüst zu sehen sein wird, kommt die Verschachtelung des Grid-Systems

für bestimmte Inhalte dennoch zum Einsatz, allerdings nur dann, wenn Inhalte in einem Container

gruppiert werden können und nicht unabhängig voneinander stehen müssen.

4.4 Media Queries Um weiter auf die Funktionsweise des Bootstrap 3 Grid-Systems einzugehen, wird sich zunächst mit

dem Thema Media Queries auseinander gesetzt. Wie auch das Grid-System gehört das Thema Media

Queries zu den drei Grundelementen des Responsive Webdesign.

Abbildung 18 – Beispielfall: Column Kombination

23

Media Queries ermöglichen es im CSS bestimmte Parameter wie die Bildschirmgröße abzufragen und

anhand dieser Bedingung bestimmte CSS-Bereiche geltend zu machen. Somit ermöglichen es Media

Queries das Layout in bestimmte Grenzbereiche, beispielsweise nach Bildschirmgrößen, einzuteilen.

Diese Grenzbereiche werden Breakpoints genannt. Breakpoints können ein Layout an einem solchen

Grenzbereich z.B. von einem dreispaltigen in ein zweispaltiges Raster umbrechen.

Wichtig bei der Verwendung von Media Queries ist diese nicht zur Optimierung gezielter Geräte zu

missbrauchen, sondern lediglich eine Anpassung für eine Reihe an Geräten mit einer ähnlichen Bild-

schirmgröße zu erzielen.

Um einen Eindruck über Gerätegruppen bestimmter Bildschirmgrößen zu bekommen soll Abbildung

19 helfen.

Abbildung 19 – Responsive Webdesign 4 steps to consider 29

Die in Abbildung 19 gezeigte Grafik stellt eine Einteilung von Bildschirm-Geräten nach Auflösung

dar. Nach diesen oder ähnlichen Abstufungen sollten Media Queries daher geplant und strukturiert

werden. Im Groben ist eine Einteilung von Geräte-Gruppen in Smartphone, Tablet und Desktop also

ausreichend.

Bevor auf den Aufbau eines Media Queries im Detail eingegangen wird, muss jedoch eine grundle-

gende Frage aus Abschnitt 1.1.3 geklärt werden. Soll netzdurchblick.de gemäß Mobile first oder Desk-

top first aufgebaut sein? Für den Relaunch von netzdurchblick.de ist die Entscheidung auf Mobile first

gefallen. Mobile first ist ein wichtiger Ansatz für eine zukunftssichere und moderne Website.30 Zudem

ist das in diesem Projekt verwendete Framework Bootstrap 3 für den Mobile first Ansatz ausgelegt

und optimiert. Wie bereits erläutert, fängt das Mobile first Konzept zuerst mit der Auflösung für mobi-

le Geräte an. CSS-Bereiche, die das Template für größere Bildschirme optimieren, stehen dann in Me-

29 HP: http://h30499.www3.hp.com/t5/Apps-for-Mobile/Responsive-design-and-4-steps-to-consider/ba-p/6185309, 11.03.2014 30 ZAGLOV, Ilja, t3n: http://t3n.de/news/webdesign-trends-2014-518425/, 25.02.2014

24

dia Queries und überschreiben gegebenenfalls die default Smartphone-Stylesheets. Um einheitliche

Breakpoints zu gewährleisten, ist es ratsam, die eigenen Breakpoints für Media Queries mit denen des

Frameworks synchron zu halten.

In Abbildung 20 ist zu sehen, wie der Seiten-

Container von netzdurchblick.de definiert wird.

Die erste Klassendefinition .container steht dabei

als Default-Klasse und setzt den Seiten-

Container auf eine Breite von 100%.

Der nächste Abschnitt wird mit einem Kommen-

tar eingeleitet, der die Gerätegruppe beschreibt.

Mit der Syntax @media wird ein Media Query

begonnen. Darauf folgt eine Condition31 only

screen, mit welcher der CSS-Bereich nur für Bild-

schirme geltend gemacht wird. Mit einem and

können weitere Conditions verknüpft werden.

Abschließend folgt eine zweite Condition (min-

width: 768px), welche einen Geltungsbereich für

Geräte mit einer Auflösung 768px bis n px definiert.

Die Klasse des Tablet-Media Queries wird wiederum von der Klasse des Desktop-Media Queries

überschrieben. Das passiert allerdings nur dann, wenn der Bildschirm breiter als 992 Pixel ist und das

Desktop-Media Query im CSS unterhalb des Tablet-Media Queries steht.

Natürlich sind noch viele andere Conditions möglich. Die Wichtigsten sollen daher hier kurz genannt

werden:32

• Als Operator ist auch or möglich.

• Hoch-und Querformat sind über (orientation:portrait, landscape) abzufragen.

• Grenzen für Auflösungen können auch abwärts (max-width: 768px) gesetzt werden.

Diese Bedingung greift bei Auflösungen von 768px bis 0px.

• Sowohl (max-width: 768px) als auch (min-width: 768px) orientieren sich dabei an der Fenstergröße des

Browsers, wohingegen (max-device-width: 768px) und (min-device-width: 768px) von den Bildschirmdi-

mensionen des Gerätes ausgehen.

31 zu deutsch, Bedingung

// Smartphone .container { width: 100%; } // Small screen / tablet @media only screen and (min-width: 768px) { .container { width: 720px; } ... } // Medium screen / desktop @media only screen and (min-width: 992px) { .container { width: 992px; } ... } // Large screen / wide desktop @media only screen and (min-width: 1200px) { .container { width: 1140px; } ... }

Abbildung 20 - Media Queries Beispiel

25

Media Queries angewendet auf das Bootstrap 3-Grid-System 4.4.1Im Folgenden soll nochmal konkreter auf das Grid-System von Bootstrap 3 in Bezug auf Media

Queries eingegangen werden.33 In Abbildung 21 ist die Grid.scss-Datei von Bootstrap 3 zu sehen, die

bereits von zwölf Spalten auf 18 Spalten erweitert wurde.

Ein Methoden-Aufruf wie percentage() und die Ver-

wendung von Variablen $grid-columns ist hier nur mög-

lich, da es sich um eine SASS-Datei und nicht um

CSS-Dateien handelt. Präprozessoren wie SASS

werden ausführlich in Kapitel 4.6.1 behandelt.

$grid-columns ist eine Variable mit dem Wert 18, also

der Anzahl zugrundeliegender Columneinheiten für

100%. Die Methode percentage() hingegen tut nichts

anderes, als den Methoden-Parameter mal 100 zu

nehmen und das Ergebnis als Prozentwert zurückzu-

liefern. So ergeben sich für alle Columns von eins

bis 18 konkrete Breiten in Prozent.

Im Prinzip unterscheiden sich beispielsweise die

Klassen .col-xs-2, .col-sm-2, col-md-2 und .col-lg-2 nicht

untereinander. Die Klassen mit einer Wertigkeit von

zwei stehen alle stellvertretend für 11,111 Prozent.

Allerdings werden diese Klassen durch die Media

Queries mit den Kürzeln xs, sm, md oder lg nur für

bestimmte Bildschirmgrößen definiert. Indem nun

einem HTML-Element beispielsweise zwei oder drei Klassen, anstatt nur eine, zugewiesen werden,

kann eine Breitenangabe in Columneinheiten zu einer speziellen Bildschirmauflösung zugeordnet

werden. Das Kürzel -xs- steht dabei für Smartphone-Geräte, -sm- für Tablet-Geräte, -md- für Desk-

top-Geräte und -lg- für Wide Desktop-Geräte. Mit der letzten Größe Wide Desktop wird eine Seite wie

netzdurchblick.de in punkto Reaktionsfähigkeit nach oben begrenzt. Das ist beabsichtigt, da dieses

Verfahren folgenden Vorteil mit sich bringt: da Entwickler nicht wissen können, welche Bildschirm-

Größen in Zukunft unterstützt werden müssen, wird durch das Begrenzen der Reaktionsfähigkeit nach

oben auch gleichzeitig eine Reduzierung der Fehleranfälligkeit erzielt. Im Falle von netzdurchblick.de

bleibt die Seite bei einer Größe von 1200 Pixeln in der Breite fix und zentriert im Browser stehen.


// Extra small grid - Smartphone .col-xs-1 { width: percentage((1 / $grid-columns)); } .col-xs-2 { width: percentage((2 / $grid-columns)); } .col-xs-3 { width: percentage((3 / $grid-columns)); } ... .col-xs-17 { width: percentage((17/ $grid-columns)); } .col-xs-18 { width: 100%; } // Small grid - Tablet @media only screen and (min-width: $screen-sm) { .col-sm-1 { width: percentage((1 / $grid-columns)); } .col-sm-2 { width: percentage((2 / $grid-columns)); } .col-sm-3 { width: percentage((3 / $grid-columns)); } .... .col-sm-17 { width: percentage((17/ $grid-columns)); } .col-sm-18 { width: 100%; } } // Medium grid - Desktop @media only screen and (min-width: $screen-sm) { .col-md-1 { width: percentage((1 / $grid-columns)); } .col-md-2 { width: percentage((2 / $grid-columns)); } .col-md-3 { width: percentage((3 / $grid-columns)); } .... .col-md-17 { width: percentage((17/ $grid-columns)); } .col-md-18 { width: 100%; } } // Large grid – Wide Desktop @media only screen and (min-width: $screen-sm) { .col-lg-1 { width: percentage((1 / $grid-columns)); } .col-lg-2 { width: percentage((2 / $grid-columns)); } .col-lg-3 { width: percentage((3 / $grid-columns)); } .... .col-lg-17 { width: percentage((17/ $grid-columns)); } .col-lg-18 { width: 100%; } } Abbildung 21 – Bootstrap Grid SCSS Auszug

26

In Bezug auf die erste Row im Main-Content-Container der Startseite von netzdurchblick.de sieht das

wie folgt aus (Abb. 22):

Zusätzliche Klassen für die Smartphone-Größen können hier wegge-lassen werden, da alle Boxen in der Smartphone-Größe letztendlich untereinander stehen sollen. Das entspricht dem default-Verhalten des Grid-Systems von Bootstrap 3.

Media Queries angewendet auf die Schriftskalierung 4.4.2Abhängig vom Verhalten des Grid-Systems muss auch dafür Sorge getragen werden, dass die Schrift-

größe sich entsprechend anpasst. Bliebe die Schriftgröße immer gleich groß, so würde sie im Desktop

Bereich gut aussehen, für den Tablet und Smartphone Bereich jedoch zu groß sein. Immerhin muss bei

kleineren Auflösungen platzsparender gedacht werden. Um den Lesefluss stets angenehm zu erhalten,

wird eine Lösung benötigt, mit der die Schriftgröße global auf der Seite verändert werden kann. Wenn

die Schriftgröße für jeden Container zu einer Auflösung einzeln angepasst werden müsste, wäre dies

jedoch ein enormer Arbeitsaufwand. Daher werden - wie auch bei den Column-Breiten - relative Ein-

heiten benötigt. Neben der Prozenteinheit gibt es für diesen Anwendungsbereich die relative Einheit

„em“. Wie auch die Prozenteinheit geht die em-Einheit relativ vom Eltern-Element aus.

33 Bootstrap 3: http://getbootstrap.com/css/#grid, 11.03.2014

<div class=“container“> <div class=“row“> <div class=“ col-sm-12 col-md-6 “> Aktuelles ... </div> <div class=“ col-sm-6 col-md-4 “> Downloads ... </div> <div class=“ col-sm-6 col-md-4 “> Comics ... </div> <div class=“ col-sm-6 col-md-4 “> Vidoes ... </div> </div> </div>

col-sm-18 col-sm-6 col-sm-6 col-sm-6

col-md-6 col-md-4 col-md-4 col-md-4

Tablet

Desktop

Abbildung 22 – Grid Klassenstruktur

27

Mathematisch gesehen ist die em-Einheit nur ein Faktor zur Größenangabe des Eltern-Elements. Die

Formel zur Berechnung dieses Faktors sieht dabei wie folgt aus:34

Größe Kind-Element / Größe Eltern-Element = Faktoreinheit in em

Angewendet auf die Schriftgrößenberechnung von netzdurchblick.de, hat das HTML-Element in der

Smartphone Auflösung eine Schriftgröße von 137,5%. Das entspricht einer Schriftgröße von 22 Pixel.

Da für den Fließtext eine Schriftgröße von 12 Pixel erreicht werden soll, wird der Faktor em wie folgt

ermittelt:

12px / 22px = 0,545em | 12px abhängig von 22px, ergibt somit in em 0,545

Umgestellt kann mit dieser Formel natürlich auch aus einer em-Einheit wieder die Pixel-Einheit er-

rechnet werden.

Größe Eltern-Element * Faktoreinheit in em = Größe Kinder-Element

22px * 0,545em = 12px

Da sich die em-Einheit am Eltern-Element orientiert, müssen für netzdurchblick.de alle Schriftgrößen

in em umgerechnet und im CSS gesetzt werden. Ein hilfreiches kleines Tool, das die Berechnung et-

was erleichtert, ist unter http://pxtoem.com zu finden.

Wenn alle Schriftgrößen in em angegeben wurden, muss die font-size nur noch für das HTML-Root-

Element in den einzelnen Media Queries passend gesetzt werden. Da sich em-Einheiten auf ein Eltern-

Element beziehen und alle Eltern-Elemente, sofern sie nicht manipuliert wurden, die Schriftgröße vom

HTML-Root-Element erben, reicht diese Änderung global aus. In der Praxis kann es jedoch vorkom-

men, dass andere dazwischenliegende HTML-Elemente in der Schriftgröße manipuliert werden und

die geerbte Schriftgröße vom HTML-Root-Element überschreiben (Abb. 23). Um diesem Problem

entgegen zu wirken, wurde eine neue Einheit rem35 geschaffen.

Root-em ignoriert alle Zwischen-Elemente und bezieht sich di-

rekt auf das HTML-Root-Element. Somit ist eine Änderung der

font-size im HTML-Root-Element global für alle Elemente defi-

nitiv gültig.

34 MARCOTTE, Ethan: Responsive Webdesign: S. 20 35 ZILLGENS, Christoph: Reponsive Webdesign: S. 27

<div class=“eltern-elem“> <div class=“zwischen-elem“> <div class=“kind-elem“></div> </div> </div>

Abbildung 23 – HTML-Zwischen-Element

28

Selbstverständlich können em- und rem-Einheiten nicht nur für Schriftgrößen, sondern auch für alle

anderen Größen, wie z.B. Containerbreiten, genutzt werden. Das zu Anfang dieses Kapitels vorgestell-

te Framework Foundation 5 arbeitet beispielsweise anders als Bootstrap 3 auf Basis der rem-Einheit.

4.5 Flexible Bilder und Responsive Image Rendering Durch den Einsatz von Media Queries und einem Grid-System lässt sich ein reaktionsfähiges Templa-

te für netzdurchblick.de bereits fast umsetzen. Zu klären bleibt dennoch das Verhalten von Bildern in

reaktionsfähigen Templates. Dadurch, dass ein reaktionsfähiges Template kleiner werden kann, kön-

nen manche Bilder in ihrer Originalgröße nicht mehr in das Design passen. Je nach CSS-Einstellung

„overflow“ würden Medien entweder vom Grid-System angeschnitten werden (overflow: hidden) oder

aus dem Grid-System bzw. dem darin enthaltenen Inhalts-Container ausbrechen (overflow: visible).

Da der Initialwert der CSS-Eigenschaft overflow visible ist, tritt in der Regel der zweite Fall auf.

Damit Medien wie Bilder oder Videos weder abgeschnitten werden, noch aus den Grid Inhalts-

Containern herauslaufen, müssen diese ähnlich dem Grid-System an äußere Bedingungen des Templa-

tes angepasst werden. Wird die Bildschirmgröße kleiner, so müssen auch eingebundene Medien klei-

ner werden.

Skalierung von Bildern36 4.5.1Grundsätzlich wird in HTML zwischen Hintergrundbildern, welche über CSS eingebunden werden,

und normalen Bildern, die über ein HTML-Tag <img /> eingebunden werden, unterschieden.

4.5.1.1 Hintergrundbilder – Background-Images37 Für das netzdurchblick.de Template ist so ein Hintergrundbild z.B. hinter

dem Logo im Header zu finden (Abb 24). Hier wurde das Hintergrundbild

allerdings über die komplette x-Achte gekachelt. Somit ist die Grafik immer

genau so breit, wie das Browserfenster.

Eine andere Möglichkeit, Hintergrundgrafiken zu skalieren, bietet die CSS3-Eigenschaft „background-

size“. Der Initialwert von background-size ist „auto“. Dabei bleibt die Hintergrundgrafik in ihrer Ori-

ginal-Größe. Neben dem Initialwert „auto“ kennt background-size aber auch die Werte „Cover“,

„Contain“ oder „Breitenwert Höhenwert“, in Pixeln oder Prozenten angegeben. „Contain“ skaliert die

Grafik dabei proportional auf die volle Höhe des Containers, in den die Hintergrundgrafik eingebun-

den wird. „Cover“ verhält sich im Prinzip ähnlich, nur das nicht nach Höhe, sondern Breite des Con-

36 ZILLGENS, Christoph: Reponsive Webdesign: S. 27 37 MARCOTTE, Ethan: Responsive Webdesign: S. 58

Abbildung 24 – Hinter-grundbild Netzdurchblick

29

tainer proportional hochskaliert wird. Um die Hintergrundgrafik auf ein bestimmtes Verhältnis abhän-

gig vom Container zu skalieren, kann die Größe in „Breite und Höhe“ also z.B. „100% 50%“ angege-

ben werden. Natürlich kann hier auch wieder mit Pixel oder em-Einheiten gearbietet werden. So ein

Anwendungsfall tritt bei der Umsetzung von netzdurchblick.de jedoch nicht auf.

4.5.1.2 „Normale“ Bilder – IMG-Tag Wie bereits beschrieben, werden Bilder über das HTML-Tag <img /> eingebunden. Werden die Attri-

bute für Höhe und Breite im <img>-Tag leer gelassen, so liest der Browser die Metadaten der Grafik

aus und setzt die Grafik standardmäßig in der Originalgröße.

Seit einigen Jahren ist es möglich, die Größe von Medien über CSS zu manipulieren. Dadurch wird es

möglich, die Bildgröße über CSS reaktionsfähig zu beeinflussen.

Im Grunde genommen können alle Bilder global auf netzdurchblick.de wie folgt über CSS manipuliert

werden (Abb. 25).

Mit der CSS2-Eigenschafft „max-width“ ist es möglich, jedem Bild eine

Maximalbreite von 100% zuzuordnen. Durch die zusätzliche Eigenschaft

„height: auto“ verhält sich die Höhe des Bildes immer proportional kor-

rekt zur Bildbreite.

Beispielsweise enthält der netzdurchblick.de Slider

(Abb. 26) eine 980 Pixel breite Grafik. Wenn das

Fenster kleiner als 980 Pixel Breite gezogen wird,

überschreibt die CSS-Eigenschaft „max-width“ die

eigentliche „width“ von 980 Pixel auf 100%.

Das passiert erstens, weil die CSS-Eigenschaft „max-width“ eine höhere Wertigkeit hat als „width“

und zweitens, weil die relative Breite von 100% zur Browserbreite kleiner ist als die Originalbreite des

Bildes. Dies ist eine Standardlösung, um Bilder global anpassungsfähig zu manipulieren.38

Nachteile der CSS Bildskalierung

Ein klarer Nachteil dieser Lösung ist die Performanceauslastung. User, die die Website über ihr

Smartphone besuchen, müssen trotz der kleineren Bildschirmgröße hochauflösende Bilder herunterla-

den. Diese werden anschließend zwar über CSS auf die richtige Größe runterskaliert, jedoch bleibt die

Datenmenge des Bildes die gleiche.39

38 MARCOTTE, Ethan: Responsive Webdesign: S. 45 39 ZILLGENS, Christoph: Reponsive Webdesign: S. 195

img { max-width: 100%; height: auto; }

Abbildung 25 – CSS Bildskalierung

Abbildung 26 - Netzdurchblick Slider

30

Ein weiteres Problem stellen die unterschiedlichen Geschwindigkeiten, mit denen User die Website

besuchen, dar. Diese sind dem Server nicht bekannt. Beispielsweise wäre eine Unterscheidung zwi-

schen User A, der mit einer 3G-Geschwindigkeit surft, zu User B, der mit WiFi-Geschwindigkeit

surft, sinnvoll, um eine Entscheidung über die Qualität und die damit verbundene Datenmenge des

gesendeten Bildes zu treffen.

Manche Smartphones, wie z.B. neuere iPhone-Geräte, haben durch den Einbau eines Retina-Displays

eine doppelt so hohe Bildschirmauflösung wie herkömmliche Geräte mit der gleichen Bildschirmgrö-

ße. Solche Bildschirme fordern eine dementsprechend höhere Auflösung der Bilder. Das kann über die

Media Query Condition (min-device-pixel-ratio:2) abgefragt werden. Dies gilt jedoch nur für Hinter-

grundbilder und nicht für <img>-Tag Bilder.

Um die eben genannten Probleme nach Möglichkeit zu lösen, bieten einige Konzepte einen guten An-

satz. Drei dieser Konzepte sollen im Folgenden vorgestellt werden.

Responsive Images – Responsive Image Rendering 4.5.2Das Thema Responsive Image Rendering40 befasst sich mit dem automatisierten Skalieren und Able-

gen von Bildmaterial und der damit verbundenen Reduzierung der Datenmenge. Im Gegensatz zur

Skalierung der Grafik per CSS im Browser wird eine physikalische Kopie der Originalgrafik erstellt

und kleiner skaliert abgelegt. Da das netzdurchblick.de Template am Ende in Typo3 integriert werden

soll, kann an dieser Stelle vorerst geprüft werden, ob bereits Lösungen über eine Typo3-Extension

oder Typo3-Konfiguration existieren. Tatsächlich stellt Typo3 6.2 die Möglichkeit für systeminternes

Responsive Image Rendering41. Allerdings befindet sich Typo3 6.2 noch in einer Beta-Fassung42,

weshalb der Relaunch von netzdurchblick.de auf Typo3 6.1.7 umgesetzt wird. Somit kann diese Ty-

po3 interne Responsive Image Rendering Lösung noch nicht verwendet werden und es muss auf ande-

re Lösungen ausgewichen werden.

4.5.2.1 Responsive Enhance Das Konzept des Responsive Enhance ist rein Javascript basiert und wurde von Josh Emerson43 entwi-

ckelt. Im Prinzip bietet diese Lösung lediglich eine Unterscheidung zwischen einer Desktop- und

Smartphoneauflösung. Zwischenauflösungen für Tablets sind nicht möglich. Beim Responsive Enhan-

ce wird das <img/>-Tag wie folgt verwendet:

40 ZILLGENS, Christoph: Reponsive Webdesign: S. 198 41 WOLFERMANN, Sven: https://typo3.org/news/article/responsive-image-rendering-in-typo3-cms-62, 11.03.2014 42 Erst seit dem 25. März 2014 befindet sich Typo3 6.2 nicht mehr in der Beta- sondern in der Stable-Fassung. 43 ZILLGENS, Christoph: Reponsive Webdesign: S. 202 EMERSON, Josh: GitHub, https://github.com/joshje/Responsive-Enhance, 11.03.2014

31

<img id=“demo“ src=“img/reponsive-image-klein.jpg“

data-fullsrc=“img/reponsive-image-groß.jpg“ />

Standardmäßig wird das Bild als erstes immer in niedriger Auflösung geladen. Zusätzlich enthält das

HTML-Tag ein Attribut „data-fullsrc“, welches den Pfad zu einer größeren Version des Bildes enthält.

Anwendung findet dieses Attribut allerdings nur bei Bildschirmgrößen oberhalb eines angegebenen

Breakpoints.

Um das Konzept dieser <img>-Tag-Schreibweise nutzen zu können, muss im HTML-Header eine

Javascript-Datei namens „responsive-enhance.js“ eingebunden werden. Am Ende des HTML-

Dokumentes vor dem schließenden </body>-Tag muss zusätzlich ein Funktionsaufruf getätigt werden,

der wie folgt aussieht:

<script>responsiveEnhance(document.getElementById('demo'), 768);</script>

Zu sehen ist der Aufruf einer Javascript-Funktion „responsiveEnhance()“ mit zwei Parametern. Dabei

steht der erste Parameter für die ID des Bildes und der zweite Parameter für den angegebenen

Breakpoint, ab dem das Bild in groß nachgeladen werden soll. Reponsive Enhance bietet lediglich ein

Konzept für die Unterscheidung der Bildgröße im Frontend. Es befasst sich jedoch nicht mit der Abla-

gestruktur bzw. dem eigentlichen Image Rendering Prozesses im Backend. Mittels einer PHP-

Erweiterung könnte allerdings jedes hochgeladene Bild automatisch in einer verkleinerten Version des

Originals abgelegt werden.

4.5.2.2 Picture Polyfill Eine weitere Methode ist das von Mathew Marquis entwickelte Picture Polyfill44. Als Grundlage für

diese Methode dient das HTML5 Element <picture></picture>. Da dieses HTML-Element noch sehr

neu ist, wird es noch von keinem Browser unterstützt. Daher hat Mathew Marquis ein Picture Polyfill

entwickelt, das dieses HTML5-Tag für Browser nachrüstet. Das Picture Tag im Detail sieht wie folgt

aus (Abb. 27):

Abbildung 27 – HTML5 Picture Element

44 ZILLGENS, Christoph: Reponsive Webdesign: S. 212 MARQUIS, Mathew: GitHub, https://github.com/Wilto/picturefill-proposal, 31.03.2014

<picture alt="">  <source src="mobile.jpg" /> <source src="medium.jpg" media="min-width: 600px" /> <source src="fullsize.jpg" media="min-width: 900px" /> <img src="mobile.jpg" /> </picture>

32

Das sich im <picture>-Tag befindende <source>-Tag enthält dabei das Attribut media, über welches

ein Bild für eine bestimmte Bildschirmgröße definiert werden kann.

Wie auch beim Responsive Enhance ist dieses Konzept wieder nur eine Lösung für das Zuordnen ei-

ner Bildgröße zu bestimmten Bildschirmgrößen. Somit muss sich der Entwickler auch hier erst mal

mit der Ablagestruktur und Skalierung der Bildvarianten im Backend auseinander setzen.

4.5.2.3 Adaptive Images Im Gegensatz zu den zwei bisher vorgestellten Javascript basierten Ansätzen löst das von Matt Wilcox

vorgestellte Adaptive Images Konzept45 sowohl das Problem der automatisierten Skalierung im Ba-

ckend, als auch die Zuordnung der passenden Bildgröße zur Bildschirmbreite.

Das Adaptive Images Verfahren eignet sich für die Anbindung in ein CMS wie Typo3 und somit den

netzdurchblick.de Relaunch am besten. Der Grund dafür ist, dass das HTML-<img>-Tag und somit

der HTML-Output nicht angepasst werden muss.

Auf der Website http://adaptive-images.com stellt Matt Wilcox ein Download-Packet bereit, das eine

.htaccess-Datei, eine adaptive-images.php und eine Installations-Anleitung auf Deutsch enthält.

Die Funktionsweise von Adaptive Images ist eine Kombination aus Clientseitigen- und Serverseitigen

Abfragen. Zur Integration von Adaptive Images muss per Javasript zunächst ein Cookie erstellt wer-

den, das die aktuelle Bildschirmbreite des Ausgabegerätes an den Server sendet. Dieses Cookie muss

wie folgt erstellt werden (Abb. 28).

Abbildung 28 – Cookie per Javascript setzen, enthält Informationen zur Bildschirmgröße

Da das Cookie im Head des HTML-Dokumentes gesetzt wird, erhält der Server das Cookie bevor er

die angeforderten Bilder sendet. Nachdem der Server eine Anfrage bekommen hat, verarbeitet dieser

erst einmal die .htaccess-Datei. Hier findet der Server wiederum Instruktionen, die ihn an die Datei

adaptive-images.php weiterleiten, anstatt die angeforderten Bilder einfach auszugeben. Die Datei

adaptive-images.php liest aus dem gesendeten Cookie die Bildschirmauflösung des Ausgabegerätes

aus und vergleicht sie mit den Breakpoints, die vorher in der adaptive-images.php definiert wurden.

Natürlich macht es Sinn, die gleichen Breakpoints zu verwenden wie auch für die CSS-Media Queries.

Die adaptive-images.php prüft anschließend die Größen der einzelnen Bilder. Sobald eines der Bilder

45 ZILLGENS, Christoph: Reponsive Webdesign: S. 198 WILCOX, Matt: GitHub, https://github.com/MattWilcox/Adaptive-Images, 11.03.2014

<script type="text/javascript"> document.cookie='resolution='+Math.max(screen.width,screen.height)+'; expires=; path=/'; </script>

33

größer als die Bildschirmauflösung des Ausgabegerätes ist, legt die PHP-Datei eine kleinere Kopie der

Bilder im vorher angelegten Ordner „ai-cache“ an und sendet diese Kopie an den Client.

Die Integrierung dieses Konzeptes in den Webauftritt netzdurchblick.de gestaltete sich in der Praxis

jedoch etwas schwieriger. Erst nach Kontaktaufnahme zu dem Buchautor Christoph Zillgens und vie-

len Tests kristallisierte sich heraus, dass die Reinfolge der .htaccess-Anweisungen für Adaptive

Images in Kombination mit einer Typo3-Installation sehr wichtig ist. Die .htaccess-Anweisungen für

Adaptive Images müssen im Abschnitt „mod_rewrite.c“ direkt nach der Zeile „RewriteEngine On“

stehen, da ansonsten die Umleitung zu der adaptive-images.php nicht greift.

Funktioniert das Adaptive Images Skript aus irgendeinem Grund mal nicht, beispielsweise, wenn der

User Cookies im Browser deaktiviert hat, so greift die ganze Methode nicht und das Bild wird wieder

in Originalgröße ausgegeben. Somit ist auch an die Fallback-Lösung gedacht. Dadurch, dass das Coo-

kie die Bildschirmauflösung des Ausgabegerätes ausliest, bietet dieses Konzept ebenfalls eine Lösung

für das Problem der hochauflösenden Displays. Wird ein Bild von einem Iphone 5, welches physika-

lisch eine Bildschirmbreite von 320 Pixel, tatsächlich aber eine Auflösung von 640 Pixel hat, aufgeru-

fen, so wird von den tatsächlichen 640 Pixel ausgegangen und ein entsprechend hochauflösendes Bild

geladen. Natürlich spricht das wieder gegen die Ladezeit. Allerdings verfügen die meisten hochauflö-

senden Smartphones bereits über LTE, wodurch die notwendige Geschwindigkeit erreicht wird.

4.6 Hilfreiche Tools für eine bessere Codeübersicht Um den Workflow und die Projektübersicht effizienter zu gestalten, bieten sich einige Tools während

der Entwicklungsphase eines reaktionsfähigen Templates an. Daher werden im Folgenden drei mäch-

tige und sehr hilfreiche Tools, die für netzdurchblick.de zum Einsatz kommen, vorgestellt:

• CSS Präprozessoren

• Grunt.js

• Git

CSS Präprozessoren 4.6.1Je größer eine Website wird, desto schwieriger ist es, den Überblick über den CSS-Code zu behalten.

Stylesheets wiederholen sich, so dass die Masse am Quellcode zunimmt. Dadurch wird der Quellcode

unübersichtlich und der Aufwand, Anpassungen vornehmen zu können, nimmt stetig zu. CSS Präpro-

zessoren wie SASS oder LESS helfen dabei, diese Probleme in den Griff zu bekommen. Das in dieser

Arbeit verwendete Framework Bootstrap 3 ist sowohl für LESS als auch SASS zum Download

verfügbar. Ob nun SASS oder LESS der bessere CSS Präprozessor ist, genau das wurde noch vor einer

34

Weile in Blogs und Foren umstritten diskutiert46. Letztendlich sind sich beide Präprozessoren sehr

ähnlich, dennoch setzt sich SASS gegenüber LESS im Detail durch. Warum genau, wird an passender

Stelle im nächsten Kapitel erläutert.

SASS – Syntactically Awesome Stylesheets 4.6.2SCSS ist eine von SASS47 genutzte Metasprache, welche ein bequemeres und effizienteres Schreiben

von CSS-Dateien bietet. Mit Hilfe von SASS kann die Produktivität entscheidend verbessert werden.

Anstatt wie gewohnt .css Dateien zu erstellen, wird in SASS eine .scss Datei erstellt, die eine ähnliche,

allerdings aufgeräumte und komprimierte Syntax bietet. Der SCSS-Code wird beim Ausführen des

SASS Präprozessors in normales CSS übersetzt und minimized in eine CSS-Datei geschrieben. Durch

das Minimizen werden Zeilenumbrüche, Kommentare und Leerzeichen aus dem Dokument gelöscht,

so dass die Datenmenge der Datei kleiner wird. In eine SCSS-Datei kann auch normales CSS ge-

schrieben werden, dadurch wäre jedoch nichts gewonnen, da der eigentliche Nutzen von SASS somit

nicht zum tragen kommt.

SASS erlaubt Features einer Programmiersprache, welche CSS nicht erlaubt:

• Variablen

• Verschachtelung von CSS-Klassen (Nesting)

• Modularisierung des CSS-Codes (Partials/Import)

• Methoden (Mixins)

• Vererbung (Extend/Inheritance)

• Operatoren

4.6.2.1 Variablen Mit Hilfe von Variablen können beliebige Werte wie Farbwerte, Schriftarten, Schriftgrößen und

Schriftfamilien gespeichert und über den Variablennamen immer wieder verwendet werden.48 Das

bringt den Vorteil mit sich, dass nur ein einziger Wert verändert werden muss, wenn z.B. das Corpora-

te Design von blau auf rot geändert wird. Zudem muss bei der Einbindung bestimmter Farbwerte kein

exakter Hexadezimalcode rausgesucht werden. SASS nutzt für den Variablenzugriff das $ Symbol.

Für den Relaunch von netzdurchblick.de sind Variablen sehr hilfreich, da das Design gerade auch

durch die individuelle Farbigkeit jeder einzelnen Kategorie eine sehr große Farbvielfallt fordert. Ab-

bildung 29 zeigt den Einsatz einiger Variablen für netzdurchblick.de.

46 COYIER, Chris: http://css-tricks.com/sass-vs-less, 11.03.2014 47 CEDERHOLM, Dan: SASS FOR WEB DESIGNERS, Published by Jeffrey Zeldman, 2013, S. 15-19 SASS: http://sass-lang.com/guide, 11.03.2014 48 CEDERHOLM, Dan: SASS FOR WEB DESIGNERS: S. 42

35

Wie in Abbildung 29 zu sehen ist, können beispielsweise alle Abstände der Columns zueinander mit

nur einer Variablenanpassung global für die ganze Seite geändert werden.

Ein Beispielcode soll erläutern, wie eine Variable vom netzdurchblick.de SCSS-Code in CSS übersetzt

wird (Abb. 30).

Beispielcode:

/* erzeugter CSS-Code */ body { background-color: #D5EBF5; font-family: "Trebuchet MS",Verdana; ... }

/* SCSS */ $font-stack: "Trebuchet MS",Verdana; $blue-light: #D5EBF5; body { background-color: $blue-light; font-family: $font-stack; ... }

$font-stack: Helvetica, sans-serif; // Corporate Colors $container-bg-color: #9AC3E6; $grey-dark: #5A5A66; $grey-font: #666; $grey-light: #CDCDD1; $blue: #349ACC; $blue-light: #D5EBF5; $blue-dark: #015496; $green:#00B02F; $green-matt:#C0FDB7; $orange:#FC7204; $orange-matt:#FED4B6; $purple:#746EF4; $purple-matt:#D4C1DA; $red:#F40AA4; $red-matt:#FEB3E1; $green-dark:#047E84; $green-dark-matt:#56BCBC; $yellow:#F4B604; $yellow-matt:#F4DAB0; $white: #ffffff; $col-bg-color: $white; $black: #000; // Grid Elements $container-width: 1000px; $box-half-padding: $grid-gutter-width/2;

Abbildung 29 – SASS Variablenbezug zu netzdurchblick.de

Abbildung 30 – SASS Variablen in CSS

36

4.6.2.2 Verschachtelung von CSS-Klassen (Nesting) SASS ermöglicht eine ineinander verschachtelte Klassen-Syntax.49 Dadurch erübrigen sich lange Se-

lektor Pfade. Der Quellcode wird übersichtlicher und es muss weniger geschrieben werden. Mit dem

Zusatzzeichen „&“ vor einer Klasse kann ein Selektor dupliziert und erweitert werden. Diese Vorge-

hensweise findet in den SASS-Dateien von netzdurchblick.de, wie z.B. in der Navigation oft Anwen-

dung (Abb. 31).

4.6.2.3 Modularisierung des CSS-Codes (Partials/Import) Bei größeren Webauftritten wie auch netzdurchblick.de kann eine CSS Datei

sehr lang werden. Durch das Modularisieren in mehrere SCSS-Dateien kann

hier Ordnung geschaffen und eine bessere Codeübersicht erreicht werden. Eine

sinnvolle Modularisierung unterteilt zusammengehörige CSS-Klassen und IDs

in einzelne Dateien, die mit einem Underscore anfangen. Der Underscore teilt

dem SCSS Präprozessor mit, dass es sich bei dieser Datei um einen Partial

handelt. Letztendlich unterteilt sich der CSS-Code dadurch in mehrere kleine

Brocken, die beim Ausführen des Präprozessors wieder zu einer Datei zusam-

mengefügt werden.50 Für netzdurchblick.de sieht die CSS-Code Modularisie-

rung wie folgt aus (Abb. 32).

Im Ordner sass befinden sich drei Unterordner, die die SCSS-Dateien in mo-

dules, partials und vendor unterteilen.

SASS-Dateien, die sich im Ordner modules befinden sind keinem bestimmten Bereich von netzdurch-

blick.de zugeordnet. Die Dateien in diesem Bereich enthalten viel mehr allgemeine Komponenten wie

Variablen, Methoden und Font-Einbettung.

49 CEDERHOLM, Dan: SASS FOR WEB DESIGNERS: S. 36 50 CEDERHOLM, Dan: SASS FOR WEB DESIGNERS: S. 60

/* erzeugter CSS-Code */ nav ul { list-style: none; } nav ul li { display: inline-block; } nav ul li a { text-decoration: none; } nav ul li a:hover { font-weight: bold; }

/* SCSS */ nav { ul { list-style: none; li { display: inline-block; a { text-decoration: none; &:hover { font-weight: bold;

} } } } }

Abbildung 32 - SCSS Dateistruktur

Abbildung 31 – SASS Klassenverschachtelung

37

SASS-Dateien, die sich im Ordner partials befinden, sind hingegen in klare netzdurchblick.de Berei-

che unterteilt. Das Partial _mainnavi.scss enthält beispielsweise nur Stylesheets zur Hauptnavigation.

SASS-Dateien, die sich im Ordner vendor befinden, enthalten Dateien von anderen Institutionen, wie

z.B. Bootstrap oder dem Nivoslider Plugin.

Schlussendlich existiert neben den Ordnern noch eine SCSS-Datei namens main.scss im SASS-

Verzeichnis. Über diese Datei werden Partials in den SASS-Prozess eingebunden. Eine Datei, die sich

im SASS-Verzeichnis befindet, wird erst vom Präprozessor beachtet, wenn Sie in der Datei main.scss

importiert wurde.

Die main.scss von netzdurchblick.de sieht

final wie folgt aus:

Partials wie Fonts, Mixins und Variables müssen

direkt zu Anfang der main.scss eingebunden

werden, da spätere Partials von diesen Gebrauch

machen können.

4.6.2.4 Methoden (Mixins) Einige Stylesheets wiederholen sich oft im CSS und sind zudem noch mühsam zu schreiben. Für die-

ses Problem bieten Mixins eine Lösung.51 Einfach ausgedrückt, ist ein Mixin eine Methode mit einem

Rückgabewert. Wie auch bei Methoden, können beim Aufrufen eines Mixins Parameter übergeben

werden. Ein gutes Beispiel für die Nützlichkeit eines Mixins sind Vendor Prefixes für CSS3. Vendor

Prefixe werden benutzt, um CSS3 Stylesheets auf möglichst vielen Browsern korrekt darzustellen.52

51 CEDERHOLM, Dan: SASS FOR WEB DESIGNERS: S. 46 52 CEDERHOLM, Dan: SASS FOR WEB DESIGNERS: S. 52

/* CSS - style.css */ html, body, ul { margin: 0; padding: 0; } body { font-size: 100% Helvetica; background-color: #efefef; }

/* SCSS - _reset.scss */ html, body, ul { margin: 0; padding: 0; }

/* SCSS - base.scss */ @import 'reset'; body { font-size: 100% Helvetica; background-color: #efefef; }

@import "sass/vendor/bootstrap/sass-bootstrap"; @import "sass/modules/font"; @import "sass/modules/mixins"; @import "sass/modules/variables"; @import "sass/partials/reset"; @import "sass/partials/grid"; @import "sass/partials/grid_color"; @import "sass/partials/header"; @import "sass/partials/footer"; @import "sass/partials/content"; @import "sass/partials/mainnavi"; @import "sass/partials/subnavi"; @import "sass/partials/search"; @import "sass/partials/news";

Zur Verdeutlichung ein weiteres Bei-

spiel für den Ablauf des @import:

Abbildung 33 - SCSS Hauptdatei

Abbildung 34 - SCSS @import Beispiel

38

Abbildung 35 - SCSS Vendor Prefix Mixin

Für netzdurchblick.de kommen Mixins, z.B. für CSS3-Farbverläufe oder runde Ecken von Inhalts-

Containern, zum Einsatz. In SASS müssen Mixins für eigene Projekte häufig nicht einmal selbst ge-

schrieben werden, da die Erweiterung Compass unter anderem viele Vendor-Mixins mitliefert.

Erweiterungen

SASS lässt sich mit einem Framework namens Compass53 erweitern. Compass selbst ist eine Samm-

lung aus Mixins und Helper Funktionen. Für den Einsatz von Compass spricht z.B., dass Vendor-

Prefixe ständig weiterentwickelt werden und mit einem Update von Compass innerhalb von Sekunden

auf den neuesten Stand gebracht werden können. Für den Konkurrenten LESS gibt es eine Erweite-

rung wie diese nicht.

4.6.2.5 Vererbung (Extend/Inheritance) In einigen Fällen ist im CSS-Quellcode eine Gruppe von ähnlichen, aber nicht identischen Klassen

gewünscht. Um die Ähnlichkeiten im Code nicht wiederholen zu müssen, kann in SASS eine Klasse

mit den Basis-Stylesheets erstellt werden, von der andere Klassen erben können.54

Im folgenden Beispiel soll eine Gruppe von Klassen für System-Meldungen wie Warnungen, Errors

und Erfolgsmeldungen, definiert werden. Alle Klassen sollen ähnliche Stylesheets für Formatierungen

enthalten, aber unterschiedliche Farben zugewiesen bekommen.

53 CEDERHOLM, Dan: SASS FOR WEB DESIGNERS: S. 61 Compass: http://compass-style.org, 11.03.2014 54 CEDERHOLM, Dan: SASS FOR WEB DESIGNERS: S. 67

/* erzeugter CSS-Code */ .box1 { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } .box2 { -webkit-border-radius: 25px; -moz-border-radius: 25px; -ms-border-radius: 25px; -o-border-radius: 25px; border-radius: 25px; }

/* SCSS */ @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; -o-border-radius: $radius; border-radius: $radius; } .box1 { @include border-radius(10px); } .box2 { @include border-radius(25px); }

39

Abbildung 36 - SCSS @extend Beispiel

@extend findet jedoch keinen konkreten Anwendungsbezug in dem netzdurchblick.de Template.

Um einen weiteren Vorteil von SASS gegenüber LESS zu zeigen, dient folgende Erklärung:

Das @extend Konzept gibt es auch in LESS, allerdings werden in LESS durch das @extend lediglich

Stylesheets kopiert. Das ergibt letztendlich Redundanzen in der CSS-Datei und führt zu einer schlech-

teren Performance. Wie im oberen Code-Beispiel zu sehen ist, kopiert SASS in diesem Fall keine

Klassen, sondern stellt diese kommagetrennt zu den Stylesheets der Basis-Klasse.

4.6.2.6 Operatoren Operatoren erlauben Berechnungen von Breiten, Höhen und ähnlichen Größen direkt im SCSS-Code.

Zur Verfügung stehen folgende Operatoren: +,-,*,/ und %. Das Einsetzen von Operatoren ist zum Bei-

spiel für die Berechnung eines Grid-Systems sehr gut geeignet. Column-Breiten und -Höhen können

somit direkt im Quellcode durch Zuhilfenahme von Operatoren umgerechnet werden. Ein konkretes

Code-Beispiel für die Verwendung von Operatoren in SASS ist im Kapitel 4.4.1 Media Queries ange-

wendet auf das Bootstrap 3-Grid-System zu beobachten.

4.6.2.7 SASS VS. LESS Um ein letztes Mal auf den Vergleich von SASS und LESS einzugehen, soll auch für den Einsatz von

Operatoren ein Pro-Argument für SASS aufgezeigt werden. Sobald in LESS der Versuch gewagt wird,

zwei ungleiche Einheiten aufeinander zu addieren, wird ein falsches Ergebnis ausgeliefert. So würde

LESS beispielsweise bei der Aufgabe [100px + 2em] = 102px als Ergebnis liefern, SASS hingegen

eine ERROR-Meldung anzeigen. Somit bringt SASS eine CSS-Validierung von Haus aus mit. Wie zu

sehen ist, sind die Unterschiede zu LESS nicht gravierend, dennoch überzeugt SASS im Detail.

/* erzeugter CSS-Code */ .message, .success, .error, .warning { border: 1px solid #cccccc; padding: 10px; color: #333; } .success { border-color: green; } .error { border-color: red; } .warning { border-color: yellow; }

/* SCSS */ .message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { @extend .message; border-color: green; } .error { @extend .message; border-color: red; } .warning { @extend .message; border-color: yellow; }

40

4.6.2.8 SASS – Fazit SASS ist ein sehr hilfreiches Werkzeug, das das umfangreiche Templating von netzdurchblick.de

enorm erleichtert. Dennoch muss in Betracht gezogen werden, dass SASS gegenüber herkömmlichen

CSS Projekten erst erlernt und eingerichtet werden muss und somit gerade zu Anfang mehr Zeit in

Anspruch nimmt, als normales CSS. Dennoch lohnt sich der Einsatz von einem CSS Präprozessor,

aufgrund der in diesem Kapitel erläuterten Punkte, definitiv auf lange Sicht.

4.7 Grunt – Mehrere Tasks parallel ausführen Grunt.js55 ist ein Node-Taskmanager Modul, das sich über den Node.js56 Package Manager installieren

lässt. Node.js ist eine serverseitige Plattform für Netzwerkanwendungen, die sich insbesondere für die

Realisierung von Webservern eignet. Das Node-Taskmanager Modul Grunt macht es möglich, mehre-

re Prozesse gleichzeitig auszuführen. Im bisherigen Verlauf dieser Arbeit wurden bereits einige Tools

und Frameworks genannt. Um sie nochmal zusammenzufassen und in Erinnerung zu rufen, soll fol-

gende Liste helfen:

• SASS – CSS Präprozessor

• Compass – SASS-Erweiterung für Mixins und Helper Funktionen

• Bootstrap 3 – Framework, enthält unter anderem unser Grid-System

All diese Tools, Frameworks und weitere Erweiterungen stehen für Grunt.js als Plugin zur Verfügung.

Unter http://gruntjs.com/plugins können diese angeschaut und gegebenenfalls über ein Terminal in-

stalliert werden.

Datei-Organisation 4.7.1Um mit Grunt.js übersichtlich arbeiten zu können, muss im Vorwege eine sinnvolle Ordnerstruktur

überlegt werden. Abbildung 37 zeigt die Verzeichnisstruktur vom netzdurchblick.de Template. Grund-

sätzlich ist eine Unterteilung der Verzeichnisse in grunt und build sinnvoll und notwendig. Dabei ent-

hält der Ordner grunt alle taskmanagerspezifischen Dateien, wie z.B. SCSS-Dateien, Node-Module,

Grunt-Konfigurationsdateien und vieles mehr. Der Ordner build hingegen enthält neben Bildmaterial

und HTML-Dateien nur noch von Grunt generierte CSS- und JS-Dateien.

In Abbildung 37 sind im Template-Verzeichnis neben Ordnern auch Dateien zu finden. Die wichtigs-

ten davon sind Gruntfile.js, package.json und setup.sh.

55 GONZÁLEZ, Belén Albeza: Power-up Your Front-End Development with Grunt Table of Contents, 2013 Grunt: http://gruntjs.com, 11.03.2014 56 Node: http://nodejs.org, 23.03.2014

41

Die Datei setup.sh ist ein Shell-Script, die für Linux zunächst einmal

Node.js zur Verfügung stellen soll. Schließlich kann Grunt ohne Node.js nicht

funktionieren.

Die Datei package.json enthält hingegen Informationen über den Projektnamen,

die Version sowie andere Meta-Angaben und Informationen über verwendete

Grunt-Plugins mit Versionsnummer.

Durch die Verwendung einer package.json Datei lassen sich im Terminal mit

dem Shell-Befehl npm install über den Node Package Manager alle projektspe-

zifischen Node-Module herunterladen und installieren.

Die grundsätzliche Konfiguration für Grunt befindet sich in der Datei Gruntfi-

le.js. Diese soll im Folgenden detailliert betrachtet werden.

Konfiguration von Grunt 4.7.2

Abbildung 38 - Gruntfile.js, Konfiguration

Abbildung 37 - Datei Struktur Netzdurchblick

42

In Abbildung 38 ist ein Auszug der Datei Gruntfile.js zu sehen. Diese zeigt in den Zeilen 76 bis 82,

wie die von netzdurchblick.de verwendeten Grunt-Plugins geladen werden. Beispielsweise wird in den

Zeilen 78 und 79 der Präprozessor SASS und die Erweiterung Compass geladen. Zeile 80 hingegen

lädt ein Plugin namens concat. Dieses Plugin hat die Aufgabe, mehrere Javascript-Dateien in einer

Datei zu vereinigen. Das macht aus performancetechnischer Sicht Sinn, da eine Datei schneller gela-

den wird als mehrere. Warum das so ist, wird in Kapitel 6.2 Performance genauer erläutert. Weiterhin

wird in Zeile 81 das Plugin Uglify geladen, welches die Haupt-Javascript-Datei nach dem Zusammen-

führen minimized. Abschließend wird in Zeile 82, das Plugin watch geladen, welches einen Listener

auf Quellcode-Dateien setzt und den Präprozessor automatisch, bei Änderungen dieser, anstößt. Um

eine Vorstellung über die Konfiguration der Grunt-Plugsins zu vermitteln, wird im Folgenden nur auf

das Watch-Plugin detailliert eingegangen.

Die Konfiguration des Watch-Plugins beginnt in Zeile 45. In den Zeilen 48, 56 und 65 wird ein Liste-

ner auf SASS-Dateien in den Ordnern ['css/sass/*.scss', 'css/sass/**/*.scss', 'css/sass/vendor/**/*.scss']

und auf Javascript-Dateien im Ordner ['js/*.js'] und auf html-Dateien im Ordner ['../build/*.html'] ge-

setzt. Wenn sich nun beispielsweise etwas in den SASS-Dateien ändert, wird automatisch der SASS

Präprozessor angestoßen, so dass alle SCSS Dateien in CSS-Syntax zusammengeführt und minimized

werden.

In Zeile 50 wird zusätzlich der Task Compass angestoßen, der das SASS-Plugin ergänzt. Weiterhin

wird in den Zeilen 52, 61 oder 68 eine Option namens LiveReload gesetzt. Diese Option macht nach

der Installation des Browser-Addons LiveReload57 möglich, dass eine HTML-Template-Datei nach

dem Speichern von Änderungen automatisch neu geladen wird. Kleine Help-Features wie diese ma-

chen Grunt zu einem starken und zeitsparenden Tool.

Im letzten Abschnitt der Datei Gruntfile.js, ab Zeile 84, werden schließlich neue Tasks registriert, die

eine Gruppe von anderen Tasks wie SASS, Compass und Concat ausführen. Im Detail werden an die

Funktion registerTask zwei Parameter übergeben. Der erste Parameter in Zeile 85 besteht beispiels-

weise aus dem String dev, der zweite Parameter hingegen bekommt ein Array mit dem Inhalt ['watch',

'compass:dev', 'concat']. Der erste Parameter dev steht dabei für den Namen der Grunt-Prozessgruppe

und ist eine Abkürzung für Development. Der zweite Parameter ist ein Array, bestehend aus den Pro-

zessen, die in der Entwicklungsumgebung dev ausgeführt werden sollen.

57 CEDERHOLM, Dan: SASS FOR WEB DESIGNERS: S. 29 LiveReload: http://livereload.com/, 25.03.2014

43

Ausführen

Zum Ausführen der Development-Taskgruppe muss per Terminal in den Ordner grunt navigiert und

der Shell-Befehl grunt dev ausgeführt werden. Zeile 86 registriert die gleichen Tasks wie dev. Somit

wird im Terminal mit der Eingabe grunt das gleiche Ergebnis erreicht wie mit grunt dev. In der letzten

Zeile wird abschließend eine weitere Task-Gruppe prod für die Produktiv-Taskgruppe registriert. Die-

se führt ähnliche, jedoch etwas andere Prozesse aus, als die dev-Taskgruppe. Unter anderem werden

hier die Dateien nach dem Zusammenführen zusätzlich minimized. Das macht während der Entwick-

lungsphase mit der dev-Taskgruppe beispielsweise keinen Sinn, da die Fehlersuche durch den mini-

mizten Code unnötig schwieriger wird. Im Gegensatz dazu setzt wiederum die Produktiv-Taskgruppe

keinen Listener auf geänderte Dateien. Da beim Ausführen von grunt prod bereits alle Stylesheets für

die Produktivumgebung geeignet sein sollten, muss dieser Prozess in der Regel nur einmal ausgeführt

werden.

Git – Version Control System 4.7.3Durch die Modularisierung von SCSS-Dateien und der Einbindung externer Tools in den Workflow,

entsteht eine komplexe Ordnerstruktur. Um den Überblick über Änderungen im Projektverlauf zu be-

halten und die Template-Dateien für mehrere Entwickler zentral zu halten, eignet sich die Versions-

verwaltung von Git. Zu diesem Zweck sind die Daten auf der Git-Hoster Plattform GitHub zu finden:

https://github.com/StanislavSeifert/responsive_basis.git

Insgesamt befinden sich in dem Repository 3 Branches, der Master-Branch enthält dabei die allgemei-

ne Template-Vorlage. Der netzdurchblick.de_Responsive_Webdesign-Branch enthält hingegen bereits

konkrete netzdurchblick.de-Template-Daten. Der netzdurchblick.de2014_Typo3_Template-Branch

enthält wiederum netzdurchblick.de spezifische Daten nach der Integrierung in Typo3.

Der Ordner node_modules gehört zu den gitignore Daten und liegt somit nicht im GitHub-Repository.

Wie im Abschnitt 4.7.1 bereits erläutert, lassen sich die benötigten Node-Module mit Hilfe der packa-

ge.json über den Shell-Befehl npm install herunterladen und installieren.

4.8 HTML-Gerüst Das Konzept eines CSS Frameworks beeinflusst in der Regel bereits im Vorfeld die Struktur des

HTML-Codes in einem Template. CSS Frameworks wie Bootstrap 3 bringen, wie in Kapitel 4.3 Grid-

System erklärt, ein Grid-System mit sich, das eine spezielle HTML-Struktur im HTML fordert.

Einer der Ansprüche, der an diese Arbeit und den damit verbundenen Relaunch von netzdurchblick.de

gesetzt worden ist, ist die Verwendung von mehr HTML5-Elementen. HTML5 bringt neue <Tags>

44

und Attribute mit sich, die eine bessere Semantik des HTML-Codes versprechen. Der Vorgänger von

HTML5 ist HTML4, womit für Container-Elemente bislang nur das <div>-Tag zur Verfügung stand.

Unabhängig davon, ob ein Header, Footer oder Artikel-Element erstellt werden sollte, wurde in

HTML4 immer mit dem <div>-Element gearbeitet. In HTML5 ist hingegen eine Vielzahl an neuen

HTML-Tags hinzugekommen:58

• <section> Container-Element für eine Sektion,

• <article> Container-Element für einen Artikel,

• <aside> Container-Element für eine Seitenspalte,

• <nav> Container-Element für eine Navigation,

• <header> Container-Element für einen Seiten-Header,

• <footer> Container-Element für einen Seiten-Footer,

• <figure> Container-Element für ein Bild mit

• einer Bildunterschrift <figurecaption>

Wie die Anwendung von HTML5-Elementen auf das netzdurchblick.de Template im Detail aussieht

soll Abbildung 39 aufzeigen.

Jedes HTML5 Element grenzt einen deutlichen

Bereich der Seite ab und bekommt die Klasse

“row“ zugewiesen. Wie im Kapitel 4.3 Grid-System

beschrieben, besteht das Grid-System von

Bootstrap 3 aus Rows und Columns. Somit kristal-

lisiert sich heraus, wie das Grid-System in der gan-

zen Seite verankert ist.

Da alle Row-Elemente im Seiten-Container liegen

und der Seiten-Container wiederum mit einer fixen

Breite zentriert im Browserfenster steht, orientieren

sich die Row-Elemente an der Breite des Seiten-

Containers. Da alle Inhalte wie z.B. auch der Slider

jedoch in Columns unterteilt werden müssen und

wie in Abbildung 39 auf der Startseite über die volle Breite des Seiten-Containers laufen sollen, be-

kommen diese eine Breite von 18 Columneinheiten, was wiederum 100% in der Breite entspricht.

Schmalere Inhalte bekommen im Gegenzug weniger Columneinheiten zugeordnet.


Abbildung 39 – HTML5 Elemente bei Netzdurchblick

45

Um die bessere HTML-Struktur gegenüber dem früheren IST-Zustand des netzdurchblick.de Templa-

tes zu verdeutlichen, soll in Abbildung 40 ein Codeauszug vom alten Template dem neuen Template

gegenüber gestellt werden.

IST-Zustand SOLL-Zustand

Wie deutlich zu erkennen ist wirkt der Aufbau des HTML-Codes im SOLL-Zustand, auch durch den

sparsameren Einsatz von Containern, aufgeräumter und weniger komplex. Dennoch wird im Frontend

eine zuverlässigere und flexiblere Lösung geschaffen, die Seite reaktionsfähig darzustellen.

Im Gegensatz zum Startseiten-Template ist auf dem Unterseiten-Template von netzdurchblick.de im

Main-Content-Container eine verschachtelte Form des Grid-Systems zu finden. Somit handelt es sich

um ein Grid-System in einem Grid-System.

Abbildung 41 – Bootstrap 3 Grid-System Klassen bei Netzdurchblick

<div id="c7304" class="csc-default"> <div class="subcolumns"> <div class="c62l"> <span class="icon"> </span> <div class="subcl"> <div id="c7313" class="csc-default"> ... </div> </div> </div> <div class="c38r"> <div class="subcr"> <div id="c7312" class="csc-default"> <div class="subcolumns"> <div class="c33l"> <div class="c33l"> <div class="c33r"> </div> </div> </div> </div> </div> </div>

<section class="row"> <div class="col-md-6 col-sm-18"> <div class="toggle-box"> <div class="toggle-box"></div> <span class="icon"> </span> </div> </div> <div class="col-md-4 col-sm-6"></div> <div class="col-md-4 col-sm-6"></div> <div class="col-md-4 col-sm-6"></div> </section>

Abbildung 40 – HTML Struktur vorher, nacher

46

Abbildung 41 zeigt eine farblich zugeordnete Übersicht der gesetzten Klassen im Unterseiten-

Template. Wie zu sehen ist, befindet sich eine Row (hier grün-gelb markiert) in einer Column (hier rot

markiert), die sich wiederum in einer Row (hier blau markiert) befindet. Somit steht im Unterseiten-

Template der Main-Content-Container als eigenes Grid-System für sich. Zusätzlich kann in Abbildung

41 beobachtet werden, dass den Columns erneut mehrere Klassen zugeordnet wurden, um ein be-

stimmtes Verhalten in verschiedenen Auflösungen zu erzielen.

ViewPort 4.8.1Ein wesentlicher Bereich einer HTML-Datei ist der Dokumenten-Head. In dem Head einer HTML-

Seite werden nicht nur CSS-und Javascript-Dateien eingebunden, sondern auch Meta-Informationen

für die Seite angegeben. Für eine reaktionsfähige Website ist das <meta>-Tag ViewPort59 enorm wich-

tig. Ohne die korrekte ViewPort-Angabe in einem Template würden die Vorteile eines reaktionsfähi-

gen Templates gar nicht erst zum Tragen kommen.

Ist kein ViewPort angegeben, so wird eine Seite wie netzdurchblick.de ohne Anpassungen einfach auf

die Bildschirmbreite des Ausgabegerätes proportional runterskaliert. Da dies für reaktionsfähige

Templates nicht das gewünschte Verhalten ist, muss dem Ausgabegerät mitgeteilt werden, dass die

Website nicht breiter als der Bildschirm des Smartphones ist. Das geschieht über eine ViewPort-

Angabe im Head des HTML-Dokumentes. Standardmäßig sieht eine ViewPort-Angabe für reaktions-

fähige Templates wie folgt aus: <meta name="viewport" content="width=device-width">

Mit dieser Zeile ist die Bildschirmbreite des Ausgabegerätes maßgeblich für die Darstellung des

Templates. Der gesetzte Wert width=device-width in dem Attribut content teilt dem Ausgabegerät mit,

dass die Webseite genau so breit ist wie die Bildschirmgröße selbst. Besucht ein User beispielsweise

netzdurchblick.de mit einem iPhone 5 im Hochformat, so beträgt die Seitenbreite 640 Pixel, was den

Bildschirmdimensionen entspricht. Wenn der User das iPhone in ein Querformat (Landscape) dreht,

geht der ViewPort weiterhin von 640 Pixel in der Breite aus, obwohl durch das Drehen 960 Pixel in

der Breite zur Verfügung stehen. Damit der ViewPort in dieser Situation auf die neue Bildschirmbreite

reagiert, muss das Content-Attribut im ViewPort um den Wert initial-scale=1,0 erweitert werden.

Durch diesen Zusatz geht der ViewPort auch nach einer Drehung des Gerätes immer von 100% Bild-

schirmbreite aus. Natürlich kennt das <meta>-Tag ViewPort auch noch andere Einstellungen, wie z.B.

maximum-scale. Allerdings sollte auf diese Einstellung in der Praxis verzichtet werden, da dem User

damit die Möglichkeit genommen wird, bei Bedarf in die Webseite zu zoomen.

Der ViewPort von netzdurchblick.de sieht wie folgt aus: <meta name="viewport" content="width=device-width,initial-scale=1.0">

59 ZILLGENS, Christoph: Reponsive Webdesign: S. 47, S. 109

47

4.9 Spezifische Probleme von netzdurchblick.de Nachdem grundsätzliche Probleme des netzdurchblick.de Templates behandelt wurden, wird im Fol-

genden auf zwei netzdurchblick.de spezifische Problemstellungen eingegangen.

Equal Height – Columns 4.9.1Ein spezielles Problem, welches sich durch die Designvorgabe von netzdurchblick.de ergibt, sind an-

einandergereihte Inhalts-Container die, unabhängig vom Inhalt, in einer Reihe gleich hoch sein müs-

sen. Somit ist die Anforderung, den höchsten Column-Container einer Row zu finden und die restli-

chen Columns dieser Row auf dessen Höhe zu setzen. Prinzipiell gibt es für diese Problemstellung

sehr viele CSS und Javascript basierte Ansätze. Einige davon sollen kurz vorgestellt werden:

Einen interessanten CSS Ansatz für das Equal Height-Problem, bietet ein Konzept über die CSS-

Eigenschaft display:table. Dabei werden Inhalts-Container wie Tabellen behandelt. Da das von

Bootstrap 3 eingesetzte Grid-System mit dieser CSS-Eigenschaft jedoch in Konflikt gerät, kann dieser

Ansatz für den netzdurchblick.de Relaunch nicht verwendet werden.

Ein anderer Ansatz zur Lösung des Equal Height-Problems

wird in Abbildung 42 gezeigt. Mit Hilfe der CSS-Eigenschaft

margin wird der Container-Fuß soweit nach unten gedrückt,

dass dieser in fast jedem Fall immer tief genug ist.

Diese Lösung ist auf den ersten Blick verlockend, da sie sich leicht in das Grid-Sytem integrieren

lässt. Zu beachten ist, dass das spätere Debuggen des Layouts schwierig wird. Zudem ist dieser Ansatz

durch den fixen Wert von „margin:-99999px“ unschön.

Da es für das Equal Height-Problem keine vernünftige CSS-Lösung zu geben scheint, muss auf eine

Javascript basierte Lösung zurückgegriffen werden. Diese kann entweder selbst geschrieben oder über

ein passendes Javascript-Plugin verwendet werden. Da ein selbstgeschriebenes Plugin in der Regel

viel Zeit benötigt und auf Zuverlässigkeit getestet werden muss, ist in diesem Fall ein schlankes Ja-

vascript-Plugin wie jquery.EqualHeight.js mit nur 467 Byte Gewicht zu empfehlen. Zusätzlich spricht

für den Einsatz dieses Plugins, dass das jQuery Framework, welches von diesem Plugin benötigt wird,

bereits auf netzdurchblick.de vorhanden ist. Um dieses von Matt Banks60 zur Verfügung gestellte

Plugin zum Einsatz zu bringen, muss die Datei jquery.equalHeight.js in den Dokumenten-Head einge-

bunden und der Methoden-Aufruf .equalHeights(); auf betreffende Container angewendet werden. In

.row{ overflow: hidden; > [class*="col-"] > div{ margin-bottom: -99999px; padding-bottom: 99999px; } }

Abbildung 42 – Boxen gleicher Höhe CSS

48

der Regel würde ein Selektor wie $(“.row > div > div“) .equalHeights(); ausreichen, um alle Con-

tainer einer Row auf eine einheitliche Höhe zu bringen. Allerdings wäre das im Falle von netzdurch-

blick.de zu einfach gedacht, da es mehrere Row-Elemente gibt und das Skript somit nicht nur vom

höchsten Container einer Row, sondern der ganzen Seite ausgeht. Daher soll das Skript nur die Con-

tainer einer speziellen Row durchlaufen, auf eine einheitliche Höhe bringen und dann zur nächsten

Row springen. Hinzu kommt, dass das Script nur die inhaltlichen Columns im Main-Content-

Container auf eine gleiche Höhe bringen soll. Elemente wie Header, Footer und Slider sollen daher

ignoriert werden. Aus all diesen Gründen muss der Selektor für netzdurchblick.de vor dem Methoden-

Aufruf deutlich komplexer gesetzt werden (Abb 43). Um jede Row einzeln ansprechen zu können,

müssen alle Rows mit einer Schleife durchlaufen werden. Zudem muss der Selektor auf section.row

und nicht nur .row bezogen werden, um die selektierten Elemente auf Section-Elemente einzugrenzen.

Da der Slider auch in einem <section>-Tag eingebunden ist und hier keine Equal Height-Funktion

benötigt wird, kann mit der CSS-Condition div:not(.carousel) auch dieser Row-Selektor ignoriert

werden.

Abschließend muss der oben genannte Code-Abschnitt ein zweites Mal in einem $(window).resize()

Event gesetzt werden, um die Höhe der Inhalts-Container nach einem Browser-Resize61 neu zu be-

rechnen.

Einklappen/Ausklappen spezifischer Columns 4.9.2Ein weiteres netzdurchblick.de spezifisches Problem befasst sich mit dem Einklappen ausgewählter

Inhalts-Container in der Smartphone-Größe, um Inhalte zu priorisieren. Erst nach einem Klick auf die

Headline soll sich ein davon betroffener Inhalts-Container öffnen. Um diese Anforderungen zu be-

werkstelligen, musste eine zusätzliche Klasse, die toggle-box genannt wurde, erstellt werden. Diese

Klasse setzt das Kind-Element einer Column auf eine feste Höhe von 35px und schneidet den Rest

eines Inhalts-Containers mittels overflow:hidden ab. Im Javascript wird, passend zur Klasse toggle-

box, ein Klickevent definiert, welches die Höhe dieser Box per Klick zwischen height:35px und

height:auto umschaltet. Mit Hilfe dieser toggle-box Klasse hat ein Redakteur im Typo3 Backend somit

die Möglichkeit, jeden beliebigen Inhalts-Container in der Smartphone-Größe eingeklappt erscheinen

zu lassen.

60 BANKS, Matt: GitHub, https://github.com/mattbanks/jQuery.equalHeights, 11.03.2014 61 Veränderung der Browserbreite

var count_rows = $("section.row").length; for(var i = 0; i < count_rows; i++){ var equalHeightSelect = $("section.row:nth(" + i + ") > div:not(.carousel) > div"); equalHeightContentBoxes.equalHeights(); }

Abbildung 43 - jquery.equalHeight Selektor

49

5 Typo3

Sowohl aus Platzgründen als auch aufgrund der Tatsache, dass der Schwerpunkt dieser Arbeit auf dem

Thema Responsive Webdesign liegt, wird die Integrierung des netzdurchblick.de Templates in Typo3

Version 6.1.7 nicht im Detail behandelt.

Da eine Typo3 Installation und Konfiguration sehr viel Zeit in Anspruch nehmen kann, ist eine vor-

konfigurierte Basis-Installation hilfreich. Passend zum Schwerpunkt dieser Arbeit bietet das Typo3

Introduction Package von fedext.net62 ein gutes Starter-Package für reaktionsfähige Websites an. Das

Package ist für das Grid-System von Bootstrap 3 ausgelegt und liefert eine vorkonfigurierte Typo3-

Installation in der Version 6.1.7, die anschließend eingerichtet und angepasst werden muss.

Das Introduction Package basiert auf einer Extension Sammlung, die eine sehr flexible Verwaltung der

Inhalte im Backend möglich macht. Diese bietet neben verschiedenen Inhalts-Typen auch Bootstrap

Row- und Column-Elemente an.

Wie bereits am Anfang dieser Arbeit definiert worden ist, besteht der gesamte Webauftritt von netz-

durchblick.de prinzipiell aus nur einem Start- und Unterseiten-Template. Um eines dieser beiden

Templates im Typo3 Backend zu einer bestimmten Seite zuordnen zu können, stellt die für netzdurch-

blick.de konfigurierte Extension fluidpages mittels Flexforms bestimmte Eingabefelder in den Typo3

Seiteneigenschaften zur Verfügung (Abb. 45 und 46). Die Seiteneigenschaften sind nach dem Login in

das Typo3 Backend beispielsweise für die Startseite wie folgt zu erreichen (Abb. 44).

Abbildung 44 – Typo3 Seiteneigenschaften für Startseite

50

Startseite Unterseite

Abbildung 46 – Typo3 Einstellungen Unterseite

Wie den Abbildungen 45 und 46 zu erkennen ist, kann in den Seiteneinstellungen unter dem Reiter

Appearance eine Entscheidung über ein ein- oder zweispaltiges Layout getroffen werden, wobei das

zweispaltige Template standardmäßig mit einer Sub-Navigation ausgegeben wird.

Nachdem nun die Möglichkeit über das Hinzufügen einer Subnavigation zur Verfügung steht, soll im

nächsten Schritt gezeigt werden, wie Row und Column-Elemente im Backend platziert werden kön-

nen.

Da Row und Column-Elemente in Typo3 zur Gruppe der Inhalts-Typen zählen, sind auch diese Ele-

mente über einen Klick auf das Symbol im Seitenbereich erreichbar.

Abbildung 47 zeigt eine Einga-

bemaske, die Typo3 beim Anle-

gen eines neuen Inhalt-Elements

öffnet.

Durch die Verwendung der

fluidcontent Extension wurde hier

ein neuer Reiter Bootstrap im-

plementiert. Dieser Reiter enthält

Bootstrap 3 spezifische Elemente

wie z.B. Columns und Rows.

Beim Klick auf den Inhalts-Typ

Bootstrap: Column Row gelangt

der Redakteur in die Detailansicht

(Abb. 48).

62FEDEXT: https://fedext.net/overview/beginners-guide.html, 25.02.2014 UDRIOT, Fabien: GitHub, https://github.com/Ecodev/bootstrap_package, 25.02.2014

Abbildung 45 – Typo3 Einstellungen Startseite

Abbildung 47 – Typo3 Row – Element erzeugen

51

Abbildung 48 – Typo3 Detailansicht Inhalts-Typ Bootstrap: Column Row

In der Detailansicht findet sich wiederum direkt unter dem ersten Reiter General im Abschnitt Confi-

guration eine Möglichkeit, Columns für eine Row anzulegen. Hier hat der Redakteur die Möglichkeit,

mehrere Columns mit einer bestimmten Columnwertigkeit für die Breitenangabe, anzulegen.

In Abbildung 48 ist eine

Row mit fünf Column-

Elementen zu sehen, die in

der Desktop Größe sechs

Columneinheiten und in der

Tablet-Größe neun Colum-

neinheiten einnehmen. Ein-

facher gesagt, verhalten

sich die Inhalts-Container

in der Desktop-Größe drei-

spaltig und in der Tablet-

Größe zweispaltig. In das

zusätzliche Input-Feld mit

dem Label Additional CSS class names können zusätzliche Klassen für Columns gesetzt werden, wie

z.B. toggle-box um die Column für die Smartphonegröße einklappbar zu definieren. Das eben gezeigte

Row-Element stellt den Inhalt des Main-Content-Container in der netzdurchblick.de Unterseite PC-

CHECK dar:

Desktop Tablet

Nachdem eine Row im Backend erstellt wurde, können die einzelnen Columns weiterhin im Backend

editiert und mit weiteren Inhalts-Typen wie z.B. Text oder Text mit Bild gefüllt werden.

Abbildung 49 – Desktop Main-Content-Container

Abbildung 50 – Tablet Main-Content-Container

52

Da das Introduction Package von Fedex keine Möglichkeit bietet, mehrere Klassen zu einer Column

für das Verhalten bei verschiedenen Bildschirmgrößen zu platzieren, musste diese Funktion für das

Backend ergänzt werden (Abb. 51).

Eine Klassenzuordnung für die Smartphone-Größe wurde im Ba-

ckend absichtlich weggelassen, da alle Column-Elemente in dieser

Bildschirmgröße standardmäßig untereinander brechen und dies

dem gewünschten Verhalten des netzdurchblick.de-Templates

entspricht.

Über das eben gezeigte Backend-Konzept besteht nun die Möglichkeit, Inhalte flexibel in beliebiger

Formation darzustellen. Darüber hinaus ist die Formation für Tablet- und Desktop-Größen gezielt über

das Backend steuerbar.

Im netzdurchblick.de IST-Zustand konnten durch die CSS-Selektierung über feste IDs weder Inhalte

so flexibel wie jetzt erstellt, noch andere Formationen der Inhalte über das Backend erzielt werden.

Abbildung 51 – Columneinheiten im Backend zuweisen

53

6 Testing

Nachdem das netzdurchblick.de Template reaktionsfähig umgesetzt und in Typo3 implementiert wur-

de, kann es getestet werden.

Anders als vor einigen Jahren ist die Vielfalt an Browsern und Browserversionen heute sehr groß63. Da

viele Browser bestimmte Eigenheiten aufweisen oder Funktionen nicht unterstützen, kann sich die

Darstellung unterscheiden. Besonders schwierig ist der Browser Internet Explorer. Dazu wird ausführ-

licher im Kapitel 6.1 Old Browser Support eingegangen.

Die beste und zuverlässigste Lösung Tests für bestimmte Browser durchzuführen sind reale Testgerä-

te. Da einige Entwickler auf einem Mac entwickeln und somit nicht im Internet Explorer testen kön-

nen, wäre ein Testrechner, auf dem beispielsweise Windows mit einem Internet Explorer installiert ist,

hilfreich. Wenn ein solches Testgerät nicht zur Verfügung steht, muss auf andere Testmöglichkeiten

ausgewichen werden. Dazu kann eine virtuelle Maschine, wie Oracle VM VirtualBox64, mit dem ge-

wünschten Betriebssystem auf dem Arbeits-Rechner installiert65 oder auf Online-Plattformen, wie

http://netrenderer.de, zurückgegriffen werden, die Screenshots der Seitendarstellung in einer ge-

wünschten Internet Explorer Version liefern.

Browsertests sind allerdings nicht das einzige Thema, das beim Testing behandelt werden sollte. Eine

Testreihe auf verschiedenen Smartphone- und Tablet-Geräten ist ebenfalls ratsam, um das Verhalten

auf anderen Geräten zuverlässig bestimmen zu können. Auch hier bieten sich eine Reihe an Testing-

Möglichkeiten sowohl über Online-Plattformen, wie Responsivepx66 67 oder Responsive.is67, als auch

über interne Tools direkt im Browser an. Im Browser Firefox findet sich beispielsweise unter Extras >

Web-Entwickler > Bildschirmgröße testen ein eigenständiges Entwickler-Tool zum Testen reaktions-

fähiger Templates. Im Vergleich zu realen Testgeräten bietet diese Möglichkeit allerdings lediglich

einen Test in Punkto Bildschirmgröße an. Eine spezielle HTML-Rendering-Engine bestimmter Smart-

phone-Geräte kann dadurch jedoch nicht getestet werden. Zusätzlich können mit Browser Add-ons

63 StatCounter: http://gs.statcounter.com/#browser_version-ww-weekly-200827-201327, 11.03.2014 64 VirtualBox: http://mac.softpedia.com/get/System-Utilities/VirtualBox.shtml, 23.03.2014 65 TRUTA, Filip: http://news.softpedia.com/news/How-to-Run-Internet-Explorer-on-Mac-OS-X-391323.shtml, 25.03.2014 66 Responsivepx: http://responsivepx.com, 23.03.2014 67 ZILLGENS, Christoph: Reponsive Webdesign: S. 273

54

wie FireBug68 Informationen über Netzwerkdaten, HTML, Javasript, CSS und allgemeine Dom-

Elemente, im Blick behalten werden.

6.1 Old Browser Support Da unter anderem HTML5-Elemente und viele CSS3-Eigenschaften wie auch Media Queries erst ab

dem Internet Explorer 9 unterstützt werden, muss eine Entscheidung über Abwärtskompatibilität der

Website für alte Browser getroffen werden. Für den netzdurchblick.de SOLL-Zustand soll daher eine

reibungslose Funktionalität bis zur Internet Explorer Version 8 nachgerüstet werden. Nach aktuellen

Nutzerzahlen des Internet Explorers69 wäre damit eine ausreichende Abwärtskompatibilität sicher ge-

stellt.

Um Funktionen in einem Browser nachzurüsten, bieten sich verschiedene Pollyfills an. Auch das

CSS3-Modul Media Query kann über solche Polyfills per Javascript nachgerüstet werden. Dabei ist zu

beachten, dass jede weitere Javascript-Datei, die beispielsweise zum Nachrüsten von Funktionen für

ältere Browser eingebunden wird, auf Kosten der Seiten-Performance geht. Gerade für Mobile-User

muss eine Seite möglichst schlank gehalten werden, um lange Ladezeiten zu vermeiden und auch den

Server-Traffic zu entlasten. Da Bibliotheken wie html5shiv.js70 oder respond.js71, die HTML5-

Elemente und CSS3-Eigenschaften für den Internet Explorer 8 und älter nachrüsten, nur dann geladen

werden sollen, wenn ein Internet Explorer älter als Version 9 genutzt wird, können Conditional Com-

ments72 eingesetzt werden. Mit Hilfe von Conditional Comments lassen sich Dateien abhängig von

Browser und Browserversion laden. Im Folgenden ist die Einbindung der Pollyfills html5shiv.js und

respond.js im netzdurchblick.de Dokumenten-Head zu sehen:



Das Conditional Comment <!--[if lt IE 9]> gibt dabei an, dass die Dateien html5shiv.js und res-

pond.js nur dann geladen werden sollen, wenn es sich beim Browser um den Internet Explorer älter als

Version 9 handelt. Da der Internet Explorer in älteren Versionen als 9 auf keinem Smartphone vor-

kommt, wird diese Zusatz-Bibliothek nie von einem mobilen Gerät geladen.

68 FireBug: https://addons.mozilla.org/de/firefox/addon/firebug/, 23.03.2014 69 Statista: http://de.statista.com/statistik/daten/studie/158095/umfrage/meistgenutzte-browser-im-internet-weltweit/, 25.03.2014 70 HTML5SHIV: https://code.google.com/p/html5shiv, 11.03.2014 71 LEATHERMAN, Zach: GitHub, https://github.com/scottjehl/Respond, 11.03.2014 72 ZILLGENS, Christoph: Reponsive Webdesign: S. 109

55

6.2 Performance Die Performance-Optimierung einer Website ist ein Aspekt, der unglaublich vielschichtig ist und ab-

hängig von der investierten Zeit, immer besser gelöst werden kann. Dieser Prozess fängt bereits beim

Grafiker und der Auswahl des Dateiformates einer zu exportierenden Grafik an. Beispielsweise eignen

sich JPG-Dateien besser für Verläufe als Gif-Dateien. Gif-Dateien können im Gegenzug Transparenz-

en und Animationen darstellen. Zudem ist die Datenmenge von Gif-Dateien, abhängig von der Anzahl

verwendeter Farben, deutlich geringer.73 Im Fall von netzdurchblick.de wurden die verwendeten Bil-

der vom IST-Zustand in den SOLL-Zustand übernommen. Dennoch skaliert und komprimiert der

Workaround aus Kapitel 4.5.2.3 Adaptive Images Bilder im Toleranzbereich erneut herunter.

Um die Faktoren, bei denen eine Performance-Einsparung auf netzdurchblick.de betrieben wurde,

aufzuzeigen, soll folgende Liste dienen:

-‐ Das Nivoslider-Plugin wurde gegen das Bootstrap 3 „Carousel“ ausgetauscht, wodurch die

Einbindung eines zusätzlichen Plugins vermieden werden konnte.

-‐ Sowohl die Sub- als auch Main-Navigation wurde im netzdurchblick.de IST-Zustand doppelt

ausgegeben. Diese Redundanz wurde im SOLL-Zustand behoben.

-‐ Zudem wurden die Main-Navigations-Punkte als Grafiken gerendert ausgegeben. Da Grafiken

deutlich mehr Datenmenge als Texte enthalten, wurde das Menu im SOLL-Zustand dem grafi-

schen Menü per CSS sehr ähnlich gestylt.

-‐ Mehrere Dateien, wie CSS- oder Javascript-Dateien wurden in der Produktivumgebung je zu

einer Datei zusammengeführt und minimized.

-‐ Bilder wurden für mobile Geräte in kleineren Größen zur Verfügung gestellt.

-‐ Die Datenanzahl wurde beispielsweise für die Startseite von 70 auf 25 Dokumente reduziert.

Neben der Datenmenge ist die Datenanzahl einer Website bei der Performance-Optimierung ein sehr

wichtiger Aspekt.74 In der Spezifikation des HTTP1.1-Protokolls zum Übertragen von Daten wurde zu

gegebener Zeit festgelegt, dass kein Endanwendersystem mehr als zwei Verbindungen zum gleichen

Server machen darf, um den Server nicht zu überlasten.75 Daher werden Dateien bei einer Anfrage

nicht parallel, sondern paarweise nacheinander geladen. Je mehr Dateien angefordert werden, desto

häufiger müssen die Daten stückweise angefordert werden. Erschwerend hinzu kommt der Overhead76.

Erst wenn die ersten Dateien abgearbeitet sind, werden weitere Dateien berücksichtigt. Das kostet

wertvolle Zeit, die dem Besucher möglichst erspart werden soll. Aus diesem Grund macht es Sinn, alle

73 ZILLGENS, Christoph: Reponsive Webdesign: S. 333 74 ZILLGENS, Christoph: Reponsive Webdesign: S. 315 75 ZILLGENS, Christoph: Reponsive Webdesign: S. 317 76 Bearbeitungszeit des Servers

56

Javascript-Dateien in einer einzigen Javascript-Datei und alle CSS-Dateien in einer einzigen CSS-

Datei zusammenzufassen. Wenn der Gedanke der Datenzusammenfassung weiter fortgeführt wird,

können auch Bilder in sogenannten Sprites77 zusammengefasst werden. Zu beachten ist dabei, dass

sich dieser Ansatz schwer mit einem CMS-System in Verbindung bringen lässt, da Grafiken einzeln

gepflegt werden müssen. Aus diesem Grund wurden Grafiken für netzdurchblick.de nicht zusammen-

gefasst.

Datenmenge: Vorher – Nachher 6.2.1Abschließend soll gezeigt werden, wie sich die im netzdurchblick.de Relaunch betriebenen Bemühun-

gen auf das Gewicht der Seite auswirken. Mit einem Entwickler-Tool wie FireBug oder dem Timeli-

ne-Tool von Safari kann dazu die Datenmenge beider Typo3 Installationen des IST- und SOLL-

Zustandes verglichen werden. In der Desktop-Größe des SOLL-Zustandes enthält die netzdurch-

blick.de Startseite eine Datenmenge von 774 KiloByte. Mit diesem Ergebnis wurde über ein Drittel

der Datenmenge des netzdurchblick.de IST-Zustandes, die bei etwa 1.1 MegaByte liegt, eingespart.

Darüber hinaus liegt die Startseite von netzdurchblick.de in der Smartphone-Größe des SOLL-

Zustandes durch die Skalierung des Bildmaterials nur noch bei 620 KiloByte. Da eine gut besuchte

Website mehrere tausend Mal am Tag aufgerufen wird, summiert sich die Performance-Einsparung

mit diesem Ergebnis erheblich. Konkret bedeutet das, dass die Bearbeitungszeit von Dateien schneller

wird und somit mehr Speicher- und Prozessorkapazität für andere User frei sind.


57

7 Fazit und Ausblick

7.1 Fazit Wie im Verlauf dieser Arbeit ausführlich gezeigt wurde, hat das Thema Reponsive Webdesign viele

Facetten und kann beliebig weit ausgebreitet werden. Wichtig ist, dass ein konkreter Ansatz wie Mobi-

le first von Anfang an geplant und konsequent verfolgt wird. Zudem muss beachtet werden, dass be-

reits viele gut durchdachte Bibliotheken und Pollyfills vorhanden sind und Funktionalitäten oft nicht

neu entwickelt, sondern richtig ausgewählt werden müssen.

Rückblickend beläuft sich die Kernaussage dieser Arbeit darauf, dass durch den Aufwand eines Pro-

jekt-Relaunch wie bei netzdurchblick.de allgemein deutlich bessere Ergebnisse zu erwarten sind. Trotz

einer kleineren Datenmenge ist der SOLL-Zustand gegenüber dem IST-Zustand von netzdurchblick.de

deutlich flexibler und zuverlässiger umgesetzt worden. Redakteure haben nun die Möglichkeit, das

optische Erscheinungsbild von netzdurchblick.de über das Backend vereinfacht zu beeinflussen. Auch

beim Anlegen neuer Inhalte besteht im Gegensatz zum IST-Zustand von netzdurchblick.de keine Ge-

fahr mehr, dass das Erscheinungsbild der Website fehlerhaft wird. Durch die Modularisierung von

CSS-Dateien und den Einsatz von einem Präprozessor, wurde zudem eine bessere Codeübersicht ge-

schaffen, so dass zukünftiger Supportaufwand und damit verbundene Kosten gesenkt werden.

Darüber hinaus konnte durch den Relaunch von netzdurchblick.de gezeigt werden, dass das Frontend-

Templating heutzutage längst nicht mehr nur noch mit HTML, CSS und Javascript zusammenhängt,

sondern auch mit Hilfe von Programmiersprachen bzw. Plattformen, wie Node.js oder Ruby, effektiv

unterstützt werden kann.

7.2 Ausblick Das durch diese Arbeit erstellte Template und auch die Typo3-Installation werden dem Team von

netzdurchblick.de zur Verfügung gestellt und möglicherweise für einen realen Relaunch benutzt. Ob

und wann das umgesetzte Ergebnis dieser Arbeit zum Einsatz kommt, ist momentan noch schwer ein-

zuschätzen. Der Autor dieser Arbeit würde die Verwendung seiner hier niedergelegten Arbeitsergeb-

nisse begrüßen und unterstützend mitwirken.

58

8 Literaturverzeichnis

8.1 Buchliteratur

CEDERHOLM, Dan (2013): SASS FOR WEB DESIGNERS, New York: Published by Jeffrey Zeldman

MANIAN, Divya (2012): HTML5 Boilerplate Web Development, New York: Published by Packt

Publishing Ltd.

MARCOTTE, Ethan (2011): Responsive Webdesign, New York: Published by Jeffrey Zeldman

ZILLGENS, Christoph (2013): Reponsive Webdesign. München: Carl Hanser Verlag München

8.2 Internetliteratur

BANKS, Matt: GitHub, https://github.com/mattbanks/jQuery.equalHeights, 11.03.2014

BEZ, Roberto: 2014, Die Theorie der responsiven Webseiten, www.heise.de/developer/artikel/Die-

Theorie-der-responsiven-Webseiten-2123587.html, 11.03.2014

Bootstrap 3: http://getbootstrap.com, 11.03.2014

Bootstrap 3: http://getbootstrap.com/css/#grid, 11.03.2014

Compass: http://compass-style.org, 11.03.2014

COYIER, Chris: 2012, Sass vs. LESS, http://css-tricks.com/sass-vs-less, 11.03.2014

EMERSON, Josh: GitHub, https://github.com/joshje/Responsive-Enhance, 11.03.2014

FEDEXT: https://fedext.net/overview/beginners-guide.html, 25.02.2014

FireBug: https://addons.mozilla.org/de/firefox/addon/firebug/, 23.03.2014

Foundation: http://foundation.zurb.com, 11.03.2014

GEBAUER, Tobias: 2013, Die 10 besten responsive Frameworks, www.the-webdesign.net/blog/die-

besten-10-responsive-frameworks/, 25.03.2014

Grunt: http://gruntjs.com, 11.03.2014

HP: 2013, Responsive design and 4 steps to consider, http://h30499.www3.hp.com/t5/Apps-for-

Mobile/Responsive-design-and-4-steps-to-consider/ba-p/6185309, 11.03.2014

HTML5Boilerplate: http://html5boilerplate.com/, 26.02.2014

HTML5SHIV: https://code.google.com/p/html5shiv, 11.03.2014

Initializr: http://www.initializr.com/, 11.03.2014

KANNENBERG, Axel: 2013, Studie: Mobile Internet-Nutzung legt in Deutschland weiter zu,

http://www.heise.de/newsticker/meldung/Studie-Mobile-Internet-Nutzung-legt-in-Deutschland-weiter-

zu-1806052.html, 25.02.2014

LEATHERMAN, Zach: GitHub, https://github.com/scottjehl/Respond, 11.03.2014

59

LiveReload: http://livereload.com/, 25.03.2014

MARQUIS, Mathew: GitHub, https://github.com/Wilto/picturefill-proposal, 31.03.2014

Netzdurchblick Development-Umgebung: http://pstud6.mt.haw-hamburg.de/, 17.03.13

Netzdurchblick: http://netzdurchblick.de, 11.03.14

NivoSlider: http://dev7studios.com/plugins/nivo-slider/, 11.03.2014

Node: http://nodejs.org, 23.03.2014

Project Lifecycle Process: http://responsivedesign.is/strategy/rwd-process, 17.03.2014

Responsivepx: http://responsivepx.com, 23.03.2014

SASS: http://sass-lang.com/guide, 11.03.2014

StatCounter: 2013, Top 12 Desktop, Tablet, & Console Browser Version from W27 2008 to W27

2013, http://gs.statcounter.com/#browser_version-ww-weekly-200827-201327, 11.03.2014

Statista: 2014, Marktanteile der meistgenutzten Browserversionen weltweit im Januar 2014,

http://de.statista.com/statistik/daten/studie/158095/umfrage/meistgenutzte-browser-im-internet-

weltweit/, 25.03.2014

Statista: 2014, Prognose zum Absatz von Tablets, PCs und Smartphones weltweit von 2012 bis 2017

(in Millionen Stück), http://de.statista.com/statistik/daten/studie/256337/umfrage/prognose-zum-

weltweiten-absatz-von-tablets-pcs-und-smartphones/, 25.03.2014

TRUTA, Filip: 2013, How to Run Internet Explorer on Mac OS X,

http://news.softpedia.com/news/How-to-Run-Internet-Explorer-on-Mac-OS-X-391323.shtml,

25.03.2014

Typo3: http://typo3.org, 11.03.14

UDRIOT, Fabien: GitHub, https://github.com/Ecodev/bootstrap_package, 25.02.2014

VirtualBox: Oracle VM VirtualBox 4.3.10 Build 93012, http://mac.softpedia.com/get/System-

Utilities/VirtualBox.shtml, 23.03.2014

WILCOX, Matt: GitHub, https://github.com/MattWilcox/Adaptive-Images, 11.03.2014

WOLFERMANN, Sven: 2013, Responsive Image Rendering in TYPO3 CMS 6.2,

https://typo3.org/news/article/responsive-image-rendering-in-typo3-cms-62, 11.03.2014

YAML: http://www.yaml.de, 11.03.2014

ZAGLOV, Ilja: 2014, Webdesign-Trends 2014: Das erwartet Webworker im neuen Jahr,

http://t3n.de/news/webdesign-trends-2014-518425/, 25.02.2014

60

9 Abbildungsverzeichnis

Abb. 01 - netzdurchblick.de Startseite......................................................................................................5

Abb. 02 - Template Bereiche....................................................................................................................8

Abb. 03 - Unterseiten Bereiche, Kategorie PC-CHECK........................................................................10

Abb. 04 - Main-Content-Container mit mehreren Inhalts-Boxen...........................................................10

Abb. 05 - Kategorie WEB GESETZ.......................................................................................................11

Abb. 06 - Mobilegerät Seitenübersicht...................................................................................................12

Abb. 07 - Smartphone Ansicht der Main-Navigation.............................................................................12

Abb. 08 - Mobilegerät Ansicht der Suche..............................................................................................12

Abb. 09 - Inhalts-Box aufgeklappt.........................................................................................................12

Abb. 10 - Unterseite mit einer Inhalts-Box.............................................................................................13

Abb. 11 - Unterseite mit mehreren Inhalts-Boxen..................................................................................13

Abb. 12 - Smartphone Navigation..........................................................................................................13

Abb. 13 - Rows und Columns….............................................................................................................19

Abb. 14 - Row und Column HTML-Struktur.........................................................................................19

Abb. 15 - Zwölfspaltiges Grid-System...................................................................................................19

Abb. 16 - Startseiten Column Verhältnis................................................................................................21

Abb. 17 - Grid-System Verschachtelung................................................................................................21

Abb. 18 - Beispielfall: Column Kombination.........................................................................................22

Abb. 19 - Responsive Webdesign 4 steps to consider............................................................................23

Abb. 20 - Media Queries Beispiel..........................................................................................................24

Abb. 21 - Bootstrap Grid SCSS Auszug.................................................................................................25

Abb. 22 - Grid Klassenstruktur...............................................................................................................26

Abb. 23 - HTML-Zwischen-Elemente....................................................................................................27

Abb. 24 - Hintergrundbild Netzdurchblick.............................................................................................28

Abb. 25 - CSS Bildskalierung.................................................................................................................29

Abb. 26 - Netzdurchblick Slider.............................................................................................................29

Abb. 27 - HTML5 Picture Element........................................................................................................31

Abb. 28 - Cookie per Javascript setzen, enthält Informationen zur Bildschirmgröße............................32

Abb. 29 - SASS Variablenbezug zu netzdurchblick.de..........................................................................35

Abb. 30 - SASS Variablen in CSS..........................................................................................................35

Abb. 31 - SASS Klassenverschachtelung...............................................................................................36

Abb. 32 - SCSS Dateistruktur.................................................................................................................36

61

Abb. 33 - SCSS Hauptdatei....................................................................................................................37

Abb. 34 - Abbildung 34 - SCSS @import Beispiel................................................................................37

Abb. 35 - SCSS Vendor Prefix Mixin....................................................................................................38

Abb. 36 - SCSS @extend Beispiel.........................................................................................................39

Abb. 37 - Datei Struktur Netzdurchblick................................................................................................41

Abb. 38 - Gruntfile.js, Konfiguration.....................................................................................................41

Abb. 39 - HTML5 Elemente bei Netzdurchblick...................................................................................44

Abb. 40 - HTML Struktur vorher, nacher...............................................................................................45

Abb. 41 - Bootstrap 3 Grid-System Klassen bei Netzdurchblick...........................................................45

Abb. 42 - Boxen gleicher Höhe CSS......................................................................................................47

Abb. 43 - jquery.equalHeight Selektor...................................................................................................48

Abb. 44 - Typo3 Seiteneigenschaften für Startseite...............................................................................49

Abb. 45 - Typo3 Einstellungen Startseite...............................................................................................50

Abb. 46 - Typo3 Einstellungen Unterseite.............................................................................................50

Abb. 47 - Typo3 Row – Element erzeugen............................................................................................50

Abb. 48 - Typo3 Detailansicht Inhalts-Typ Bootstrap: Column Row....................................................51

Abb. 49 - Desktop Main-Content-Container..........................................................................................51

Abb. 50 - Tablet Main-Content-Container.............................................................................................51

Abb. 51 - Columneinheiten im Backend zuweisen.................................................................................52

Versicherung über Selbstständigkeit Hiermit versichere ich, dass ich die vorliegende Arbeit ohne fremde Hilfe selbststän-dig verfasst und nur die angegebenen Hilfsmittel benutzt habe. Hamburg, den _______________ __________________________

Documents

Bachelorarbeit - uni-hamburg.de...• Redundanzen im HTML-Template behoben, • auf eine neue Typo3 Version gewechselt, • eine höhere Zuverlässigkeit und Flexibilität des Templates