Ratatatam » Webdesign

CSS3 in der Anschauung

Ralphs — Thu, 19 Jan 2012 21:17:42 +0000

CSS3 Click Chart ist eine schöne Idee, um sich von den tollen Möglichkeiten inspirieren zu lassen, die CSS3 dem Webdesigner bietet. – via Perun.

Überzeugendes ExpressionEngine

Ralphs — Tue, 15 Nov 2011 08:21:36 +0000

Für den Webdesign-Auftrag YourSupport waren die Stärken von ExpressionEngine 2 und die von segert.net gefragt. Nachdem ich das Screendesign erstellt und das Layout gecodet hatte, galt es, Lösungen für die unterschiedlichen Contentbereiche wie die Startseite, die Tour, die Preispakete und das Weblog zu finden. Trotz der verschachtelten und zweisprachig ausgelegten Inhaltsebenen und Navigationen kann der Kunde seine dynamische Website pflegen und ausbauen, ohne in die Templates oder nachträglich programmieren zu müssen. Für mich war das eine spannende Arbeit, die durch einige kleine aber wertvolle ExpressionEngine-Tipps des EE-Experten Oliver Heine bereichert wurde.

Spezialisten vom Fach

Ralphs — Tue, 31 May 2011 22:03:16 +0000

Die Arbeit für die nexxtep gmbh begann für mich nach der Gestaltung des Layoutentwurfs, denn der Entwurf war vorgegeben. Das ist für mich kein Beinbruch, kann ich doch ein schönes Layout respektvoll anerkennen und ebenso respektvoll in valides CSS umzusetzen. Ein wenig grafische Nacharbeit vom Segert fällt in solchen Fällen zwar immer an, aber die Hauptsache ist, daß man es nicht sieht. ;)

In der Folge habe ich ExpressionEngine aufgeschlagen und aus dem weißen Blatt ein editorfreundliches Backend für die Pflege einer zweisprachigen Site mit kleiner Stellenbörse geformt. Nebenbei habe ich auf sparsam wachsende URLs geachtet (das artet schnell aus in EE ;-), die Suche in Grenzen gewiesen und identischen Content auf die englisch- und deutschsprachige Site verteilt.

Im Gegensatz zu Oliver Heine, der mir freundlicherweise bei einem Problem beistand, bin ich kein alter EE-Hase mit PHP-Raffinesse und habe in letzter Zeit einige Male die Foren von ExpressionEngine in Anspruch genommen. Ich muss sagen, die Antworten ließen nie lange auf sich warten. Zudem erhärtete sich mein Verdacht, daß es wirklich auf alle Fragen eine befriedigende Antwort gibt. Das liegt wohl schlicht daran, daß EE so ungemein genial durchdacht ist.

Bevor ich aber anfange, EE zu predigen, möchte ich mich bei meinem Ansprechpartner Julian Heerdegen bedanken, der erfolgreich die Arbeit voranzutreiben verstand (zwischen zwei Entscheidern, einer Grafikdesignerin, einem Serveradmin und mir) und zugleich pragmatisch offen war für alternative Vorschläge.

Nützliche jQuery Tools

Ralphs — Mon, 23 May 2011 11:09:56 +0000

Jetzt will ich diese nützliche Site von Tero Piirainen aus Finnnland doch endlich einmal vorstellen, soviel Zeit muss sein ;-) Schön anzusehen und mit vielen netten nützlichen “most important user-interface components”, auch jQuery Tools genannt.

125 WordPress-Templates für ein Redesign

Ralphs — Fri, 04 Feb 2011 11:13:10 +0000

Was geschieht, wenn eine Agentur für “Integriertes Kommunikationsdesign” einen Website-Entwurf macht, ich diesen dann webgerecht umsetzen darf, um danach alles auf WordPress zum Laufen zu bringen? Man arbeitet länger als erwartet und darf sich ausgiebig üben in problemlösendes Denken. ;-) Gemeint ist hier das bereits zweite Redesign unseres Kunden Brinkmann_Dewert. Mein erstes Redesign war mittlerweile fast 7 Jahre alt und es bestand das Bedürfnis nach etwas ganz Neuem.

Zuerst habe ich den Layout-Entwurf webkompatibel gemacht. Er brauchte eine dauerhafte Hauptnavigation und einen Footer, die im ursprünglichen Entwurf nicht vorgesehen waren. Zudem galt es, den Entwurf schmaler anzulegen, damit er unter 1024 Pixeln ohne horizontales Scrollen sichtbar sei. Dazu musste ich das Layoutraster durchschauen und die Elemente und Abstände neu berechnen. Eine halbe Seite Additionen von Kästen, Buttons und Abständen standen da als Selbstbriefing geschrieben, bevor ich auch nur eine Klasse CSS schrieb. ;-) .

Die zweite Herausforderung: In den Buttons und Kästen sollte die neue Schrift des Logos erscheinen. So musste ich also einen Großteil der zahlreichen Layoutelemente als Grafiken anlegen. So entstanden fast 200 Grafiken allein für das Layout – die über 40 Fotos, die ich teilweise recherchiert und ausgewählt habe, nicht mitgezählt (die Portraits und Fotos auf der Startseite hat ein echter Profi gemacht). CSS-technisch galt es, diese Grafik-Armada geschickt in den Hintergrund zu verbannen und gleichzeitig möglichst viel Editierbares in WordPress zu belassen. Deutlich macht das die Seite der Mitarbeiter. Dort kann der WP-Admin die in Hover-Bereichen liegenden Daten der Mitarbeiter ändern, ohne ins Template zu müssen, das gleiche gilt für die fachbezogenen Team-Seiten, die übrigens eine nützliche Navigationsidee aus dem Büro Rempen zeigen.

Wie man sich beim Durchklicken der Site wird denken können, gab es einige CSS-Lösungen zu finden, die auch noch vom IE 6 verstanden werden wollten. So sollte sich zum Beispiel die Box mit den Home- und Zurück-Buttons nicht nur unabhängig von den eingepflegten Inhalten der Seite immer schön rechts unten anordnen (gut zu sehen auf der Seite Fachgebiete), sondern auch vertikal und bündig mitwachsen auf Seiten, die längere Texte haben. Das ging nicht ohne valide Tricks und einigen Conditional Comments, aber – wie alles im Layout – ohne Javascript.

Desweiteren war bei der WordPress-Integration darauf zu achten, die weit über 2500 rechtsrelevanten Artikel, die das fleissige Anwaltsteam seit 2003 gepostet hat, mit ins neue Layout zu übernehmen oder andersherum, die Layoutvorlage behutsam und stimmig zu erweitern und unter Aktuelles erreich- und navigierbar zu machen. Webdesigner, die alltäglich mit WordPress zu tun haben, werden sicher eine Ahnung davon bekommen, welche Aufgabe es im Hinblick auf die unterschiedlichen Contentbereiche war, das Search-Template in den Griff zu bekommen. :-)

Ich möchte mich an dieser Stelle herzlichst bei Heinz Klein bedanken, der sich für mich und segert.net stark gemacht hat bei der Vergabe des Auftrags. Zudem hat er mich bei der Arbeit mit zahlreichen Anregungen begleitet und fleissig und erfolgreich den Großteil der Inhalte eingeflegt.

Schönes Webdesign für kleines Content Management

Ralphs — Sat, 20 Mar 2010 17:24:16 +0000

Während Verena die Kunst des kleinen Icons ausübt, backe ich kleinere Brötchen und mache Redesigns mit Fotorecherche für den Kopfbereich und kundenfreundlicher WordPress-Implentierung, geschehen für das Seniorenheim der Verbandsgemeinde Linz. Schön war an der Arbeit, dass Perun mir den entscheidenden Tipp für ein PlugIn geben konnte, das dafür sorgt, dass eine Navigation mit Untermenüpunkten nicht dauerhaft geöffnet ist. Stattdessen soll nur das Submenü zu sehen sein, das ein Besucher aktuell geöffnet hat. Vielen Dank an Perun und seine schnelle Hilfe. Ich hatte zuvor vieles ausprobiert und auch zahlreiche PlugIns getestet, aber keines arbeitete wirklich im gewünschten Sinne. Aber auf das PlugIn Fold Page Menus bin ich nicht gestossen. Sachen gibts!

Ein weiterter Artikel zum Thema schönes Webdesign und WordPress als CMS: 125 WordPress Templates für ein Redesign

DJR 2010

Ralphs — Thu, 17 Dec 2009 16:38:28 +0000

Wie lange hatte ich dieses Redesign vor und wie oft hatte ich es nach hinten verschoben. Nun habe ich mir frech wech die Zeit genommen und mein DJR-BLog zu neuem Glanz verholfen ;-) – Es fehlen nun noch bestimmte Inhalte, dann kann das Bloggen fleissig weitergehen.

Langsames und teures “Business”-Paket

Ralphs — Mon, 19 Oct 2009 12:31:11 +0000

Heute (19.10.2009) habe ich die Website für einen Kunden fertiggestellt und bei der Arbeit mit WordPress festgestellt, wie langsam das “1&1 Business 5.0 Paket” im Vergleich zum Webhosting bei All-Inkl.com sein kann. Da wartet man schon mal ein paar Sekunden, bevor ein korrigierter Artikel abgespeichert ist und auch der Aufruf von WordPress-Seiten dauert langer als ich es gewohnt bin. Da hilft auch nicht das Augenwischer-Angebot von 6,99 für das “1&1 Business-Paket”. Schaut man nämlich mit Argus-Augen hin, sieht man das Kleingedruckte: 6,99 gilt nur 6 Monate, danach kostet das Paket 14,99. So wundert es mich auch nicht, dass 1&1 dem Kunden eine Mindestvertragslaufzeit von 12 Monaten abverlangt. Im Vergleich zum Paket All-Inkl-Privat Plus ist das 1&1-Paket zudem zu teuer. Mit einem monatlichen Preis von 7,95 spart man nicht nur Bares, sondern bekommt auch mehr Leistung: 25 statt 5 MySQL-Datenbanken, 10 GB statt 5 GB Speicherplatz, einmal abgesehen von der Zugriffsschnellligkeit und den wirklich sehr guten Support bei All-Inkl.com. Und wie jeder weiss, der etwas länger im Web unterwegs ist, ist kompetenter und schneller Support für Webhostingkunden bei 1und1 so gut wie gar nicht existent.

Mehrere Sidebars mit eigenen WordPress-Widgets

Ralphs — Mon, 28 Sep 2009 16:59:06 +0000

Das Blogdesign für Kunden hat mich endlich dazu gebracht, meine WordPress-Templates auf den neuesten Stand zu bringen. Das hieß vor allem, Widgets zu ermöglichen, denn die sind überaus praktisch für Kunden, die ihre Sidebars frei einrichten wollen. Bei der Arbeit habe ich gleich einen Weg gesucht, um Widgets an mehreren Stellen des Layouts platzieren zu können. So sollte das Widget für “Seiten” in einer Spalte im Footer stehen und die Tag-Cloud direkt daneben.

Um dies zu erreichen, ist es nötig, die Datei funktions.php etwas zu erweitern. Dort stehen ganz oben folgende Zeilen:

Diese Zeilen habe ich um folgende erweitert, bitte auf die gelbe Markierung achten.

Nun wird an die Stelle im Template (sidebar.php oder footer.php z.B.), in der Widgets eingefügt werden sollen, der blau markierte Code für die Sidebar 2 eingesetzt. Bitte darauf achten, dass in !dynamic_sidebar('sidebar2') die entsprechende Sidebar angegeben wird:

Falls nun keine Überschrift erwünscht ist, kann in diesem Code noch folgende CSS-Anweisung hineingeschreiben werden (blau markiert):

Bleibt die Frage, wie nun die neuen Sidebars mit den Widgets individuell gestaltet werden können. Dazu einfach in den Quellcode einer im Browser geöffnet WordPress-Site schauen und die entsprechenden CSS-Klassen in Erfahrung bringen (die werden von der Software automatisch eingefügt). Will man das Widget für Links anpassen, so passt man schlicht die Klasse .widget_links mit eigenen Werten an:

#sidebar .widget_links li { font-size: 11px; padding: 8px 30px 0 1px; }

Bleibt es bei einem Widget in einer Extra-Sidebar, reicht die Formatierung von a und ul und li. So habe ich im Footer des Singleblogs das Widget für “Seiten” folgendermassen mit Schaltflächen formatiert:

#sidebar2 a { text-align: center; display: block; padding: 8px 0 5px 0px; width: 273px; height: 28px; color: #e8c59e; border-bottom: 0; text-decoration: none; background: url(images/footer-button.gif) no-repeat 0 0; }
#sidebar2 a:hover { color: #f93; border-bottom: 0; text-decoration: none; background: url(images/footer-button-aktiv.gif) no-repeat 0 0; }

#sidebar2 ul { list-style: none; margin: 20px 10px 50px 0px; }

#sidebar2 li { letter-spacing: 1px; line-height: 21px; margin-bottom: -1px; }

Links zum Thema WordPress-Widgets

WordPress FAQ – Oft gestellte Fragen: Was sind Widgets?
Dr. Web: Was sind Widgets und wofür setzt man sie ein?
Datenschmutz: Ein Widget in mehreren WordPress Sidebars verwenden
WordPress Forum: Using sidebar widgets in multiple sidebars

Google sucht Anker-Links

Ralphs — Sun, 27 Sep 2009 20:22:21 +0000

Prima, als langjähriger Freund von Sprungadressen brauche ich mich nicht umstellen: “Anker-Links führen Nutzer gezielt zu relevanten Abschnitten einer Webseite”, schreibt Golem unter dem Titel: Google dringt tiefer in Webseiten ein. – Edit: Da fällt mir ein, dass mein erstes Weblog (2000), als Weblog-Software noch rar und wenig userfreundlich war, eine echte Anker-Lehre war. Permalinks kamen ohne das Gatterzeichen für Sprungadressen nicht aus. Himmel, war das eine Arbeit beim Posten!