Ein responsives Webdesign mit Typo3 (Teil 6)

960x640 Landscape

Die Vorarbeiten für unser responsives Template mit Typo3 sind nun so gut wie abgeschlossen. Trotzdem ist unser Typo noch immer nicht wirklich responsiv. Würde man die Seite auf einem Tablet aufrufen, kämen unweigerlich Scrollbalken zum Einsatz oder die Seite wird so stark verkleinert, dass man hineinzoomen müsste um etwas lesen zu können.

Bevor ich aber zeige, wie man die Responsivität erreicht hier noch ein paar Grundüberlegungen.

Knackpunkte responsiver Designs sind zum einen die Menüs, die irgendwann an Grenzen stoßen und zum anderen Bilder, die:

  • in ihren Abmessungen sich an das Design und
  • in ihren Dateigrößen sich an die mögliche Übertragungsgeschwindigkeit anpassen sollten

Für Menüs gibt es zahlreiche Lösungen, die hauptsächlich auf JavaScript basieren. Hier erkennt das Script einen vordefinierten Breakpoint und gibt anstatt des normalen Menüs ein für den Screen modifiziertes aus.

Etwas schwieriger wird es schon bei den Bildern. Mittlerweile haben sich hier einige praktikable Workarounds entwickelt, da die W3C sich mit einem einheitlichen Standard immer noch schwer tut.

Persönlich gefällt mir die Source Set Technik. Bei dieser werden dem Img Tag anstatt einer Quelldatei einfach mehrere mitgegeben, die je nach definierter Auflösung des Viewports (Tablet, Smartphone, Desktop) das passende angesteuert wird. Theoretisch müsste man folglich nur verschiedene Auflösungen abspeichern und dem Img Tag (zusammen mit einem Script) die passenden Dateien zuordnen. Glücklciherweise bringt Typo3 ab der 6er Version bereits standardmäßig diese Möglichkeit mit und rechnet sich die nötigen Dateien und Größen selbst aus. Ein Bild in höherer Auflösung und Typo erledigt den Rest.

Ein Beispiel:

Ein normaler Image Tag würde so aussehen:

<img title="Fuerteventura" alt="Morro del Jable, Kanarische Inseln, Spanien" src="http://www.as-moll.de/fileadmin/_processed_/csm_Fuerteventura_c16eaebcbd.jpg">

Der modifizierte Tag sähe so aus:

<img title="Fuerteventura" alt="Morro del Jable, Kanarische Inseln, Spanien" srcset="fileadmin/_processed_/csm_Fuerteventura_7e99758b15.jpg 400w,fileadmin/_processed_/csm_Fuerteventura_a08b269b22.jpg 600w 2x,fileadmin/_processed_/csm_Fuerteventura_d489b6b3cd.jpg 480w,fileadmin/_processed_/csm_Fuerteventura_18be62f197.jpg 810w,fileadmin/_processed_/csm_Fuerteventura_1c1661a1f2.jpg 1210w" src="http://www.as-moll.de/fileadmin/_processed_/csm_Fuerteventura_c16eaebcbd.jpg">

Im srcset stehen mehrere Bilder und ihre Auflösungen, die je nach Breite des Displays geladen werden. Je kleiner der Bildschirm, desto kleiner das Bild, desto geringer die Speichergröße. Besonders kleine Viewports wie Smartphones etc. haben nicht immer WLAN zum Surfen.

Bleibt die Frage wie das HTML Template Größen erkennt. Hier nutze ich sogenannte Media Queries. Diese schachteln quasi Angaben entsprechend des eingestellten Viewports. Ein Beispiel:

body {
  color: #000;
}

Diese Angabe färbt den Body schwarz.

@media only screen and (min-width: 321px) and (max-width: 480px) {

body {
  color: #fff;
}

}

Diese Angabe färbt den Body weiß für eine Auflösung zwischen 321 und 480 Pixeln.

Bleibt die Frage welche Breakpoints man in der CSS definiert. Im Internet gibt es eine große Anzahl mit Analysen zu den am meisten verbreiteten Viewports. Basierend auf dieser Liste kristallieren sich daher folgende Auflösungen heraus:

  • 2.560 x 1.600
  • 2.048 x 1.536
  • 1.920 x 1.080
  • 1.280 x 7.68
  • 1.136 x 640
  • 1.024 x 768
  • 960 x 640
  • 320 x 240

Um diese Auflösungen später im Firefox auch wirklich testen zu können, nutze ich das „Firebug“ Add-on, welches einen komfortablen Umschalter mitbringt.

Firebug
image-297

Umschalter für den Firebug

3-2-1 … Responsiv

Gut. Der Weg ist also klar. Die größte Auflösung von 2.560 x 1.600 benötigt keinen eigenen Breakpoint, sondern nutzt die allgemein definierten Styles. Nummer zwei in unserer Liste und damit erster Breakpoint ist 2.048 x 1.536. Da unser Design aber laut CSS eine Standard Breite von 1.000 Pixeln aufweist:

.section {
    top: 10px;
    margin: 0 auto;
    width: 1000px;
    padding-top: 20px;
    margin-bottom: 100px;
}

beginnt unser erster Breakpoint eigentlich erst ab 1.024 Pixeln.

@media only screen and (min-width: 960px) and (max-width: 1024px) {

}

Der Bereich ist hier jedoch zwischen 1024px und der nächstkleineren Auflösung gewählt.

In die CSS schreiben wir jetzt alle relevanten geänderten CSS Angaben.

@media only screen and (min-width: 960px) and (max-width: 1024px) {

nav.nav-collapse {
	width: 550px;
	padding-right: 50px;
	}
	
.footer_nav {
    width: 940px;
	padding-right: 50px;
	}
	
.section {
    width: 940px;
	}

.left {
	width:628px;
	}
	
.box_form {
	width: 628px;
	}
	
.box_form_inv {
	width: 303px;
	}

}
1024x768 Landscape
image-298

1024×768 Landscape

Und in der Auflösung 960×640 Pixeln:

960x640 Landscape
image-299

960×640 Landscape

Hinzu kommen noch zwei weitere Breakpoints:

@media only screen and (min-width: 800px) and (max-width: 959px) {

nav.nav-collapse {
	width:480px;
    float:left;
	padding-left: 70px;
	}
	
.footer_nav {
    width: 780px;
	padding-right: 50px;
	}
	
.section {
    width: 780px;
	}

.left {
	width:478px;
	}
	
.right {
	width:254px;
	}
	
.box_form {
	width: 478px;
	}
	
.box_form_inv {
	width: 254px;
	}
	
aside {
	width: 250px;
	}
	
caption {
	font-family: 'Merriweather',serif;
	font-size: 0.8em;
	font-weight: inherit;
}

}

@media only screen and (min-width: 240px) and (max-width: 799px) {

nav.nav-collapse {
	width:480px;
    float:left;
	}
	
.footer_nav {
    width: 90%;
	}

.span_1_of_3, .span_2_of_3 {
	width: 100%
	}
	
.span_1_of_3 {
	margin-left: 0px;
	margin-top: 30px;
	
	}
	
.section {
    width: 95%;
	}
	
.box_form {
	width: 100%;
	}
	
.box_form_inv {
	width: 100%;
	}
	
}
	
	
caption {
	font-family: 'Merriweather',serif;
	font-size: 0.8em;
	font-weight: inherit;
}

}

Wichtig ist der Breakpoint zwischen 799px und 240px. Hier werden die beiden Spalten von nebeneinander auf untereinander angeordnet.

Zwei Spalten untereinander
image-300

Zwei Spalten untereinander

Der erste große Schritt zur Responsivität ist damit genommen. Im nächsten Tutorial kümmern wir uns zunächst um Bilder, die per SourceSet angepasst werden sollen.

Schreiben Sie einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.