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/