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.

Website B & E Software

Vor kurzem habe ich die neue Website von B & E Software fertig gestellt. Ein paar Features: WordPress wurde als CMS eingesetzt, auf der Homepage kommt der Nivo Slider zum Einsatz, die dynamische Schriftersetzung mit Cufón bindet die Schriftart Anivers ein und jCarousel Lite wurde für die Rotation der Kundenmeinungen in den Sidebars verwendet.

Link: http://be-software.de/

Mehrere dynamische Sidebars

Um eine widget-fähige Sidebar in WordPress zu aktivieren muss man zumächst in der functions.php den widget Bereich registrieren. Wenn man etwa 2 neue Sidebars haben möchte, sollte der Code so aussehen:


	< ?php  
         if (function exists('register_sidebar'))
	    register_sidebar( array(  
	        'name' => 'left-sidebar',  
	        'before_widget' => '<ul><li>',  
	        'after_widget' => '</li></ul>',  
	        'before_title' => '<h3>',  
	        'after_title' => '</h3>'  
	    ) );  
	    register_sidebar( array(  
	        'name' => 'right-sidebar',  
	        'before_widget' => '<ul><li>',  
	        'after_widget' => '</li></ul>',  
	        'before_title' => '<h3>',  
	        'after_title' => '</h3>'  
             ) );  
	?> 

Im Adminbereich kann man nun unter dem Menüreiter Design > Widgets die beiden neuen Sidebars sehen. Diese können jetzt nach belieben mit Widgets (bsp. Archiv, Kalender, Meta, Letzte Kommentare etc.) befüllt werden.
Um den Widgetbereich zu aktivieren, muss man den Code der dynamischen Sidebars in die aktuellen sidebar Dateien integrieren. Meist ändert man hierbei die sidebar.php.


< ?php 
	if (is_home() )
	{
          if ( function_exists('dynamic_sidebar')) 
           { !dynamic_sidebar('sb-blog') ;}
         }
	?>

< ?php if (!dynamic_sidebar("left-sidebar") ) : ?>  
// Standard-Sidebar erscheint hier 
< ?php endif; ?>  

< ?php if (!dynamic_sidebar("right-sidebar") ) : ?>  
// Rechte Sidebar erscheint hier... 
< ?php endif; ?>  

Der Code zwischen den PHP Tags wird angezeigt, falls kein besonderes Widget genutzt wird.

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.