Wer sich heutzutage im Internet präsentieren möchte, kommt um ein responsives Webdesign für seine Webseite kaum herum. Das Jahr 2014 war das „break-even“ Jahr, in dem zum ersten Mal in den USA gemessen wurde, dass mehr Internetnutzer mit einem Smartphone surfen, statt mit einem stationären PC oder Laptop/Netbook. Auch in Deutschland ist die mobile Nutzung deutlich angestiegen. 63% nutzen ein Smartphone für das Internet und 57% den PC.
Die Smartphone-Nutzer trotz der eindeutig ansteigenden Nutzung der mobilen Anwender zu ignorieren, könnte aus Sicht des Marketings ein Fehler sein.
In früheren Jahren neigte man dazu spezielle Webseiten ausschließlich für die mobile Nutzung anzubieten, zum Beispiel über eine separate Subdomain, wie es heute noch bei Wikipedia der Fall ist. Allerdings folgt daraus häufig, dass man zwei verschiedene Codebasen für das Layout pflegen muss.
Mit dem Erscheinen der Media Queries in CSS3 wurde es allerdings möglich, diese Codebasen in eine zu vereinen und sogenannte „Responsive Webseiten“ zu gestalten – Webseiten, die sich automatisch an die Größe des Displays anpassen.
Um nicht ständig das Rad neu zu erfinden, gibt es bereits umfangreiche Frameworks, die sich diese Techniken zu Nutze machen. Eines dieser Frameworks ist das weit verbreitete Twitter Bootstrap. Eine Alternative ist Foundation.
Bootstrap gibt es als vorgefertigte Distribution, bestehend aus CSS-, JavaScript- und Schriftarten-Dateien. Wir empfehlen aber jedem, den Bootstrap LESS Source-Code zu verwenden. Nicht nur weil man so die Bootstrap Variablen (Anzahl der Grids, Breakpoints, etc.) beliebig anpassen kann, sondern auch weil das Arbeiten mit LESS (oder SASS/SCSS, falls man das bevorzugt) wesentlich angenehmer und effizienter ist als das händische Schreiben von purem CSS. Selbst wenn man kein Framework nutzt, empfiehlt sich das Einsetzen von LESS oder SASS/SCSS.
Tipps zu responsivem Webdesign
Mobile First: In letzter Zeit liest man häufiger, dass man beim responsiven Webdesign auf das sogenannte „Mobile First“ Paradigma setzen sollte. Grob heißt das, dass man zuerst damit beginnt das Layout für die Smartphones zu entwickeln und es dann nach und nach den größeren Displays anpasst. Diese Vorgehensweise zwingt einen dazu, sich bei der Entwicklung gleich zu Beginn auf den Kerninhalt der Webseite zu fokussieren und die Seite nicht unnötig zu überladen.
Auf Flash sollte man komplett verzichten. Die meisten mobilen Browser bieten keinerlei Unterstützung für Adobe Flash. Da Smartphones recht neu sind, ist stattdessen die Unterstützung von modernen Schnittstellen wie HTML5 video/audio und den neueren JavaScript APIs viel besser als bei üblichen PCs, und man kann in der Regel darauf setzen, dass Smartphones diese beherrschen.
Vor kurzem wurde ich von einem Mitarbeiter auf diesen Artikel hingewiesen, der das Konzept der „Quantity Queries“ erklärt, mit dem es möglich ist, auf Listen oder ähnlichem zählbarem CSS Regeln anzuwenden, wenn diese Listen eine bestimmte Anzahl an Elementen über- oder unterschreiten. Zusätzlich gibt es für LESS sogenannte Mixins, die man in seinem Projekt einbinden kann.
Bootstrap kommt mit Schriftarten-Dateien, die es einem ermöglichen, kleine Icons mit einfachen CSS Klassen an beliebiger Stelle auf seiner Seite einzufügen. Wem diese nicht ausreichen, kann sich zusätzlich mit einer einfachen Zeile die Icons aus dem Font-Awesome Projekt einbinden:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">Bootstrap in TYPO3 (ab 6.2) benutzen
Als Erstes fällt mir natürlich das Bootstrap Package (Extension: bootstrap_package) ein, das bei TYPO3 auch bei der vorkonfigurierten Distribution „The official Introduction Package“ mitgeliefert wird. Dies bietet einen ganzen Satz Anpassungen für das TYPO3 Backend, u.a. vordefinierte Backendlayouts, Content Elemente wie das Bootstrap Carousel und Bootstrapspezifische Elemente und Klassen im Rich Text Editor. Außerdem kommt die Extension mit einem LESS Compiler. Dateien, die im page.IncludeCSS einer Seite mit der Erweiterung .less angegeben sind, werden automatisch von dem LESS Compiler zu CSS kompiliert und gecached. Somit ist es nicht mehr nötig einen lokal installierten LESS Compiler zu nutzen.
Wer den praktischen LESS Compiler nutzen möchte, aber nicht den kompletten Umfang des Bootstrap Packages, kann sich die Extension dyncss_less oder ws_less installieren (Ersteres hatte mir in letzter Zeit ein paar Probleme mit dem Caching bereitet). Bei der Einbindung des Bootstrap LESS Source Codes sollte jedoch darauf geachtet werden die Variable @icon-font-path auf den korrekten Webpfad des Ordners der von Bootstrap mitgelieferten Fontdateien zu setzen, da die erzeugten CSS Dateien unter Umständen im temporären Ordner landen und die standardmäßige relative Pfadangabe so nicht mehr richtig funktioniert.
Bei weiteren Fragen stehen wir gerne zur Verfügung.