Responsive Web Design (5)

Serie Responsive DesignIn den vorangegangenen Artikeln habe ich die drei Module der Responsive Design Technik erklärt, den Fluid Grid, die Media Queries und das Thema Fluid Images. In der Praxis ist der richtige Umgang mit den Modulen nicht immer ganz einfach. Es gibt ein paar kritische Punkte, mit denen man sich auseinandersetzen sollte.

Wer mit dem Smartphone eine Website aufruft, befindet sich in einer anderen Situation als jemand, der vor einem Desktop Rechner sitzt. Da ist einmal die Verbindungsgeschwindigkeit. Zwischen einer schnellen DSL-Anbindung und einem Funknetzwerk liegen Welten. Das heißt, beim Smartphone zählt jedes Byte, beim Desktop-Rechner in einer DSL-Umgebung sind Ladezeiten kein Thema mehr.

Mit dem Smartphone sucht man zudem nach anderen Informationen als vom Desktop-Rechner aus. Am Schreibtisch hat man die Muße, auch mal einen längeren Texte zu lesen. Hier werden auch die meisten Käufe in Online-Shops abgeschlossen. Am Smartphone kauft man seltener ein, man sucht statt dessen nach ganz bestimmten Informationen. Und möchte schnell zum Punkt kommen.
Weiterlesen Responsive Web Design (5)

Responsive Web Design (4): Fluid Images

Serie Responsive DesignIn dieser Serie ging es bisher um den Fluid Grid, das flexible Raster, das sich unterschiedlichen Bildschirmgrößen anpasst und um die Media Queries. Heute ist der letzte Baustein der Responsive-Design-Technik dran, die Fluid Images. Dadurch passen sich auch die Bilder ihrer Umgebung an.

Jeder Webdesigner kennt das: Passt ein Bild in der Größe nicht ins Layout, gerät alles durcheinander. Spalten und Texte verschieben sich und die Optik ist dahin. Das würde mit einer Website passieren, die zwar einen flexiblen Raster hat, aber alle Bilder nur in einer fixen Größe vorhält.

Weiterlesen Responsive Web Design (4): Fluid Images

Responsive Web Design (3): Media Queries

Serie Responsive DesignDer erste Teil dieser Serie gab eine kurze Einführung ins Thema Responsive Design. Im zweiten Teil habe ich das erste Modul dieser CSS-Technik, den „Fluid Grid“, vorgestellt. Im dritten Teil geht es um das Thema „Media Queries“.

Wie funktionieren Media Queries?

Media Queries sind Abfragen: Die Website fragt ab, wie groß der Monitor ist, den der Besucher vor sich hat. Ist es ein Desktop-Computer, ein Netbook oder ein Smartphone? Nachdem die Größe des Bildschirms festgestellt wurde, lädt der Browser ein dazu passendes Stylesheet. Das heißt, der Designer der Website hat mehrere Stylesheets hinterlegt. Je nachdem mit welchem Endgerät die Seite aufgerufen wird, erscheint ein anderes Layout.

Weiterlesen Responsive Web Design (3): Media Queries

Responsive Web Design (2): Der Fluid Grid

Serie Responsive DesignIm zweiten Teil dieer Serie geht es um die erste der drei Techniken, die zusammen das Responsive Web-Design ausmachen: Fluid Grids. Das Layout einer Website wird nicht mehr in einer fixen Größe angelegt, sondern die Elemente sind beweglich und passen sich wechselnden Bildschirmgrößen an.

Üblicherweise orientiert man sich beim Design einer Website an einem mittleren Wert für die Bildschirmgröße. Meist sind das 1024 x 768 Pixel. So kann die Seite auch auf kleineren Bildschirmen dargestellt werden und wer einen größeren Monitor hat, der hat sowieso keine Probleme.

1024 Pixel für alle?

Nach wie vor basieren die meisten Websites auf einem festen Raster, die Breiten sind fix.
In gewisser Weise ist es einfacher, mit festen Werten umzugehen. Nicht zuletzt deshalb, weil man damit die Illusion hat, das Erscheinungsbild der Website wäre auf jedem Endgerät dasselbe.
Kunden und Designer werden nervös bei dem Gedanken, dass ihre Seite nicht immer genau so aussieht wie auf ihrem Monitor im Büro.

Weiterlesen Responsive Web Design (2): Der Fluid Grid

Responsive Web Design (1): Einführung

Serie Responsive DesignIm ersten Teil dieser Artikel-Reihe geht es darum, was Responsive Web Design ist und wozu es gut ist. In den folgenden Teilen erkläre ich die einzelnen Techniken etwas genauerIm letzten Teil möchte ich das Thema in einen größeren Zusammenhang einordnen: Was bedeutet Responsive Design für das moderne Webdesign, wo gibt es Kritikpunkte, wie geht es weiter?

Was ist Responsive Web Design?

Responsive Design ist eine CSS-Technik, mit der man das Layout einer Website beweglich machen kann. Die Seite passt sich dann automatisch an unterschiedliche Bildschirmgrößen an. Ganz gleich, ob man mit dem Smartphone oder mit einem Desktop-Computer eine Website betrachtet, alle Inhalte bleiben gut lesbar.

Weiterlesen Responsive Web Design (1): Einführung

TYPO3-Projekt für Upgrade vorbereiten

Ein Redaktionssystem wie TYPO3 möchte in regelmäßigen Abständen aktualisiert werden, sonst leidet die Performance und vor allem die Sicherheit. Regelmäßige Upgrades sind also Pflicht.

1. Möglichkeit: Operation am lebenden System

Eine Möglichkeit ist, das Live-System direkt zu aktualisieren. Man lädt die neue TYPO3-Version hoch, setzt den Link auf den neuen Sourcecode, kopiert die neue index.php in das Verzeichnis des Projekts und aktualisiert  im Install-Tool die Datenbank-Tabellen. (Vorher sollte man unbedingt ein Backup erstellen und alle Extensions auf den neuesten Stand bringen.)
Das ist die Methode, die wahrscheinlich am häufigsten benutzt wird.

Was aber, wenn ein sehr umfangreiches Upgrade ansteht? Wenn man absolut sicher gehen möchte, dass die Website sich nicht für ein paar Stunden verabschiedet, während man hektisch im Hintergrund versucht, das Backend wieder sichtbar zu machen und Bugs zu finden?
Die .htaccess und localconf.php im Live-Betrieb hinzubiegen ist jedenfalls nichts für schwache Nerven.

Weiterlesen TYPO3-Projekt für Upgrade vorbereiten