Neues Webdesign der eigenen Internetpräsenz

Das neue minimalistische, flexible Blog-Layout der Website hat ein ansprechendes hellgraues Farbschema erhalten und das Markup folgt den Regeln des Responsive Webdesigns. Die Website ist für unterschiedliche Geräte anhand nur eines CSS-Designs zugänglich. Durch CSS3 Media Queries passt sich das Webdesign an alle Bildschirmauflösungen und Formate so an, dass eine getrennte Entwicklung für unterschiedliche Geräte nicht mehr notwendig ist. Beispielsweise werden die Gegebenheiten der Endgeräte durch eine adaptive Reihung der Anzahl der Spalten, der Positionierung der Navigationselemente und der Größe der Bilder berücksichtigt.
Die Schriftarten werden dynamisch mit der Font-Replacement Methode @font-face eingebunden. Als Schriften wurden für das Design Megalopolis Extra (Logo) und Bebas Neue (Headings) und für den Fließtext das gängige Font-stack “Helvetica Neue”, Helvetica, Arial, sans-serif; verwendet.

CSS3 Animations

Für eine Photogalerie www.pm-ingridwolff.de/photogalerie/ habe ich einige Beispiele der CSS3-Eigenschaften Animation, 2d Transform und Transition realisiert. Die Elementbewegungen werden ohne Einsatz von JavaScript erreicht.

Am Besten sieht man die 3D Animationen in den neuesten Versionen der -webkit- basierten Browser Safari und Chrome. Firefox unterstützt nicht 3D Transform und in Opera sind leider bisher nur wenige Transform- und Transition-Eigenschaften verwirklicht.

Einen Überblick über die Browserunterstützung für CSS3 Funktionen gibt es hier: http://www.normansblog.de/demos/browser-support-checklist-css3/. Etwas ausführlicher in diesen Tabellen: http://caniuse.com/

Auch einen Blick wert: Microsofts Kampf gegen den Steinzeit-Browser IE 6 führt zu einer Website, auf der aktuell seine weltweite Verbreitung nachgerechnet wird: http://ie6countdown.com/

Arbeitspapiere des W3C zu CSS3-Animationen: http://www.w3.org/TR/css3-animations/

Aquamunda

Die Website Aquamunda befasst sich mit dem Thema der Membran-Wasserfilter zur sauberen Trinkwassergewinnung. Die Animationseffekte wurden diesmal nicht mit Hilfe von JavaScript realisiert, sondern das Interesse lag hier ein wenig auf den CSS3 Eigenschaften Transitions, Transform und Scale. Bewegung wird bei den Infokärtchen über die Wasserfiltertechniken beim Mouseover erzeugt (um 1 Sekunde verzögert drängen sie in den Vordergrund, vergrößern sich und ändern die Position). Die einzelnen Kärtchen sind so angeordnet wie ein Zylinder mit Filtern und die Durchnummerierung entspricht der zeitlichen Entwicklung der jeweiligen Membrantechnik.

Browserkompatibilität: Beste Darstellung in WebKit Browsern wie Safari und Chrome. Leider zeigt Firefox die easing Funktionen der Transition Timing Eigenschaften nicht so gut an, und Opera unterstützt bei der transform Funktion nicht den Wert rotate. Natürlich werden diese CSS3 Eigenschaften in IE 7 und IE 8 nicht dargestellt, trotzdem ist es möglich, die Inhalte der Website in diesen Browsern zu lesen.

Weblinks: http://www.w3.org/TR/css3-transitions/, http://www.w3.org/TR/css3-2d-transforms/

Update

Ich habe ein kleines Update in meine Website eingebettet: damit das Layout noch übersichtlicher geordnet ist, fußt es jetzt auf dem Grid-basierten CSS Framework „960 Grid System“ von Nathan Smith. 960 Grid wurde zunächst für ein schnelles Prototyping entworfen, wird aber nun häufiger als CSS Framework genutzt. Eine Breite von 960 Pixeln für das Layout ergibt sich durch die Annahme, dass die Bildschirmauflösung von 1024×768 Pixeln mittlerweile als Minimalstandard gilt, ferner wird der Scrollbalken hinzugezählt und links und rechts noch etwas Platz gelassen. Die Raster lassen sich in 12 oder 16 Spalten aufteilen. Die einzelnen Blöcke beginnen bei 60 Pixeln (12 Sp.) bzw. 40 Pixeln (16 Sp.) Breite und jeweils einem Margin von 20 Pixeln. Bei mir war es bis auf ein paar kleinere Anpassungen sehr gut übertragbar. Zunächst werden durch das reset.css von Eric Meyer alle Standard-Browsereinstellungen überschrieben und zurückgesetzt, dies war vor allem für die Darstellung im IE6 von Vorteil. Nachdem ich die Schriftgröße und ähnliches angepasst hatte, zeigt sich die Website jetzt ganz solide strukturiert.

Andere CSS Framework Alternativen wie Blueprint, jQuery UI, Elements, YUI Grids, The Golden Grid oder Yaml habe ich mir zwar angesehen, aber bin dann doch zu 960 Grid zurückgekehrt, weil es sehr schnell verwendbar war.

Während ich die Webseiten durchsucht habe, bin ich zufälligerweise auf ein interessantes Firefox Addon gestoßen. Den GridFox 1.2., mit ihm kann man schnell über jede beliebige Website ein Grid-Layout legen. Man kann die Firefox Extension auch modifizieren und andere Spalten und Abstände definieren.

Die Website mit dem Raster des Grid Layouts.

Die Website mit dem Raster des Grid Layouts.