17.12.2009
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.
Ralphs . 3 Anmerkungen . Trackback
19.10.2009
Heute habe ich die Website für den Kunden A-Z-Regale 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 (Partnerlink ;-) 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 gwohnt 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.
28.09.2009
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;
}
27.09.2009
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!
27.09.2009
Für unsere kleine Agentur schöner Websites und Icons ;) war es in den letzten Monaten besonders erfreulich, dass alte Webfreude und Bekannte auf mich zukamen, um mich als Webdesigner zu engagieren. So beauftragte mich Julian von Heyl, den ich seit Anfang 1997 kenne (als das Web noch übersichtlich war), um sein erfolgreiches Projekt korrekturen.de css-technisch und an den Webstandards orientiert auf den neuesten Stand zu bringen. Ich sollte es behutsam redesignen. Die folgenden Screenshots zeigen das Vor- und Nachher:

Silvio Fritsche haben wir um 2000 im Zusammenhang mit unserer Lomo-Leidenschaft im Netz kennengelernt. Er beauftragte mich, sein Blog Yogabasics umzugestalten. Neben den Wordpress-Templates kommen auch einige Grafiken in der Sidebar von mir. Auch hier zeigt das Vor- und Nachher, dass sich die Beauftragung durchaus gelohnt hat. ;-). Silvio ist zufrieden mit meiner Arbeit und gab mir kurz danach noch einen kleinen Folgeauftrag. So erstelle ich zur Zeit für sein nächstes Blog Yogatraumreisen eine Variante des Wordpress-Themes von Yogabasics. Dass ich für Freunde und engagierte Freiberufler sehr faire Preise mache, brauche wohl nicht näher ausführen. :-)

Lange habe ich Blogdesigns vorwiegend für private Projekte erstellt. Dass in letzter Zeit auch echte Aufträge hinzukamen, ist sehr erfreulich. Aktuell habe ich gestern das Redesign für das Singleblog fertiggestellt. Eine gewisse Ähnlichkeit des Footers von Yogabasics ist nicht zu leugnen, aber der des Singleblogs sieht anders aus und darauf kommt es an. Man muss ja das Rad nicht immer neu erfinden. ;)
Ralphs . 2 Anmerkungen . Trackback
1.09.2009
Als Freund sparsam eingesetzter Conditional Comments und konsequenter Vermeider von CSS-Hacks freue ich mich über den Artikel CSS-Debugging: CSS-Hacks versus Conditional Comments von Perun. Selten habe ich mehr als 4 abweichenden CSS-Anweisungen, bevorzuge aber trotzdem eine externe CSS-Datei, HTTP-Anfrage hin oder her.
15.07.2009
Es ist immer schön, wenn man nach einer Anfrage auf fertige Texte verweisen kann, die zudem noch allgemeinverständlich sind. Einer davon bietet nun in unserem Serviceblog eine Antwort auf die Frage, warum man sich bei der Planung von großen Websites mit ExpressionEngine beschäftigen sollte. ;) ExpressionEngine: Argumente für Entscheider.
1.07.2009
Dirk Jesse hat Interessantes über das neue Qualitätsbewusstsein auf Webworker-Ikonen-Sites zum Thema CSS und die Folgen angestossen, während ich dort die These verteidige, dass der neugierige Einsteiger hierzulande einfach noch nicht angemessen abgeholt wurde. ;)
Das Qualitätsbewusstsein bleibt auf der Strecke.
Ralphs . 1 Anmerkung . Trackback
21.06.2009
Das in einem Posting angekündigte Serviceblog auf segert.net ist schon etwas länger fertig und läuft wunderbar mit ExpressionEngine, nur hatte ich bis heute zu wenig Zeit für einen passenden Artikel. Nun steht aber steht ein Text namens Das Modul “Bilder-Galerie” in ExpressionEngine bereit. Er ist aus Begeisterung während der Erstellung einer neuen Fotogalerie entstanden. In der neuen Galerie werde ich nach und nach meine besten S/W-Fotos zeigen. In Kürze erscheint dort eine Reihe mit Musikern auf schwarzem Hintergrund, ich werde berichten. ;) Ansonsten möchte ich mich bei Carola und Oliver Heine bedanken, die mir während des intensiven Arbeitens mit ExpressionEngine den einen und anderen goldwerten Tipp gegeben haben. :-)
Edit: Das Modul kann auch wunderbar dazu bentzt werden, Bilder für Kunden zu präsentieren. Einfach eine eigene Galerie dafür anlegen und ruckzuck ausgewählte Fotos präsentieren. So mache ich es heute, um eine Reihe von Portraitfotos für eine Kanzlei zu zeigen.
3.05.2009
Nach ein paar Wochen twittern steht fest: Ich folge aus Zeitgründen nur Wenigen und mit Vorliebe jenen, die Fachlinks posten und das nicht allzuoft am Tag. Die interessanten Links sind in meinen Augen der größte Vorteil eines Twitter-Zugangs, Links, die ich beim Überfliegen der Postings entdecke. Und es gibt wahnsinnig viele da draussen, vor allem aus Übersee. Ich muss mehr denn je ein Selector sein, nicht nur am DJ-Pult. Denn die zahlreichen Blogs, die nichts anderes tun, als die besten Ressourcen in langen Postings vorszustellen (Tutorials, Scripte, Artikel, Fotos, Videos), verbreiten auch jede Menge Unergiebiges, um es einmal höflich auszudrücken.
Interessant ist auch, dass ich ergiebige Links eben auch bei jenen entdecke, die mir folgen, auch wenn manche es nur kurz tun, da ich nicht gerade ein fleissiger Kurznachrichtenticker bin. Wie dem auch sei, einen Teil der Beute möchte ich folgend kurz loswerden, auch wenn ich bereits einiges davon auf Twitter weitergereicht hatte. Ungeordnet und wie sie mir unterkamen:
3.05.2009
Ich habe das verlängerte Wochenende und das schöne Wetter intensiv dazu genutzt, das CMS ExpressionEngine für diverse neue Bereiche auf segert.net einzurichten. Das klappt bisher soweit ganz gut. Das sehe ich daran, dass ich bis zum frühen Morgen nach Lösungen suche und mit jedem kleinen Erfolg immer schlechter loskomme. Nur der Rücken meckert, aber da muss der durch. Konkreter: Wir möchten mit ExpressionEngine einen Servicebereich für Kunden verwalten, so z.B. ein getarntes Blog mit Screencasts für diverse Themen, die ich oft in mehr oder weniger langen Emails und Gesprächen zu vermitteln habe. Wie werden passende Videoanleitungen, auf die ich verweisen kann, Zeit und Worte sparen!
Nebenbei habe ich unserer Firmensite ein kleines Redesign gegönnt, um flexibler auf die neuen Inhalte und Erweiterungen unserer Site reagieren zu können. Bilde ich mir zumindestens ein.

28.04.2009
Wie ich kürzlich berichtete, habe ich mich für ein Redesign auf einen autodidaktischen Crashkurs für das Content Management System CMS Made Simple eingelassen. Über meine Erfahrungen mit dieser Open Source Software berichte ich folgend.
Anfänglich fand ich keinen Weg, meinen CSS-Code (ohne Hacks) für die Navigation zu integrieren. Nach nervenaufreibenden Versuchen beschloß ich, mich Schritt für Schritt in eines der integrierten Menülayouts einzuarbeiten und die Strukturierung des CSS zu durchblicken. Als diese Hürde überwunden war, ging die weitere Layoutanpassung schnell voran. Ein integrierter MenüManager hilft dabei, die im CMS enthaltenen Navigationen als valide Templates zu verwalten und individuell anzupassen. Viele Anforderungen an Navigationen für kleine bis umfangreiche Websites lassen sich damit abdecken. Aber Vorsicht, in diesen Templates herrscht PHP SMARTY und die CSS-Anweisungen sind darin eine unscheinbare Minderheit. ;-)
Schnell habe ich beim weiteren Ausprobieren komfortable Dinge entdeckt: Nutze Globale Inhaltsblöcke! Erstelle im Editor einen HTML-Footer mit Inhalt und speichere ihn als “globalen Inhaltsblock” ab. Lösche dann den Footer in Deinem Template und setze stattdessen einen Tag wie {global_content name=’footer’}.
Solche CMSms-Tags lassen sich als Platzhalter für viele Seitenelemente einsetzen: Für die Metatags, die Navigation, Stylesheets, Brotkrumennavi, für den Link zu einer druckfreundlichen Seite (die via CSS individuell angepasst werden kann) und viele mehr. Diese Tags muss man sich nicht im Netz zusammensuchen. Sie sind innerhalb des CMS aufgelistet und mit ihren Optionen erklärt. Wer ahnt, was möglich ist, wenn man das Prinzip „Tag“ ausreizt? ;-)

Wer mehrere Layouts innerhalb einer Installation verwalten will, wird sich sicher über den integrierten ThemeManager freuen. Erstelle via Copy and Paste ein neues Template, weise dem Template ein zuvor erstelltes Stylesheet zu und exportiere danach das Layout mit Hilfe des ThemeManagers, um es in eine andere mit CMSms verwaltete Site zu importieren. Das zeigt eindrucksvoll, dass ein aktueller Reizbegriff wie „Manager“ durchaus positive Assoziationen wecken kann. ;-)

Erfreulich – sowohl für den Webdesigner wie auch für den Kunden – ist der leistungsstarke Editor namens TinyMCE, der im WYSIWYG-Modus zur Höchstform aufläuft, das heißt zuverlässig arbeitet. Mit ein paar Klicks kann sich der Kunde auch unterschiedliche Layouts für Unterseiten anlegen, wie die Seite Termine recht gut zeigt. Pfiffig ist auch, dass die internen Links aus einem Drop Down Menu gewählt werden können. Auch zahlreiche Sonderzeichen lassen sich via Klick einfügen. Beschränkt der Admin die Rechte des Nutzers auf den – frei konfigurierbaren – Editormodus, liegt der intuitiven Aneignung der Website-Pflege kaum ein Stein im Weg.

Ob ich den Editor für die Inhalte einsetze oder als Gestalter das CSS und (X)HTML bearbeite, beide Arbeiten haben eine Kleinigkeit gemeinsam: Beim „Zwischenspeichern“ von Templates oder Inhalten bleibt der Editor dort, wo zuletzt die Schreibmarke stand. Nervtötendes Scrollen – vor allen, wenn die Seiten lang sind – fällt also weg.
Ein Bug des Editors trübt die Freude beträchtlich. Das wird beim Einfügen von Bildern aus der “Bildverwaltung” deutlich: Es fehlt oft das Icon für “Durchsuchen”, so dass der Pfad für ein Bild per Hand eingetragen werden muss (wer hat solche Pfade im Kopf?). Mit etwas Vorbereitung und Copy and Paste ginge das „Bild einfügen“ auch, würde aber für weniger ambitionierte Anwender ein großes Hindernis sein. Vielleicht gibt es aber in der vor kurzem erschienenen Version 1.5.4 (das ich noch nicht installiert habe) eine Bereinigung des Fehlers.
Noch ein Wort zum WYSIWYG-Editor TinyMCE: Der Admin kann ihn für seine Schützlinge konfigurieren. So läßt sich z.B. eine Werkzeugleiste freischalten, die das Einbinden von Tabellen für den Content erlaubt.
Website-Pflegende, die häufig neue Seiten anlegen, werden sich freuen, wenn Ihnen der Admin sinnvolle “Seitenvorgaben” eingestellt hat, die in jeder neuen Seite standardmässig ausgegeben werden. Das können Metatags und Layoutelemente oder diverse Optionen sein, so z.B. ob die Seite in den seiteninternen Suchergebnissen (yep, eine leicht zu aktivierende Suche gibt es auch) erscheinen oder im Menü angezeigt werden darf.

Wird eine neue Seite erstellt, läßt sie sich individuell und suchmaschinenfreundlich einrichten. Trage „Seitenspezifische Meta-Daten“ ein, bestimme ein „Titel-Attribut“ und lege eine Ziffer für den „Tab-Index“ fest, bestimme den Eigentümer der Seite und überlege Dir einen passenden “Seiten-Alias” für suchmaschinenfreundliche URLs. Ich habe längst nicht alle Einstellungen ausprobiert. Hier gilt: Nicht kleckern, experimentieren!
Ich habe das oben vorgestellte Redesign im Großen und Ganzen local erstellt und war gespannt, ob die Übertragung auf den Server der Kundin so problemlos funktionieren würde, wie es der Support beschreibt. Und in der Tat, wer sich an die Vorgehensweise hält, die Serverpfade etc. kennt und ein wenig mit PHPMyAdmin zurechtkommt, wird mit der Übertragung keine Probleme haben.
Zuguterletzt war ich gespannt, ob CMS Made Simple auch valides (X)HTML und CSS ausgeben würde. Nach einigen seltsamen Fehlern, die der Editor TinyMCE erzeugt hat (wahrscheinlich durch das Copy and Paste beim Inhalte einpflegen) gaben die Validatoren grünes Licht. ;-)
Fazit: CMS Made Simple eignet sich sehr gut für kleine bis mittelgroße Websites, die unabhängig von einem Webdesigner gepflegt und über mehrere Menüebenen erweitert werden können. Die Lernkurve für den Kunden ist recht niedrig, so dass aufwendige Schulungen wegfallen. Ein paar Lernvideos oder Support via Telefon würden reichen, wenn sich der Anwender nicht wie ein mittelprächtiger DAU anstellt. Ambitionierte Anwender wären in der Lage, auch unterschiedliche Layouts für verschiedene Inhalte einzupflegen. Zudem gibt es auch einen deutschsprachigen Supportbereich und das Forum der Community. Fragende sind dort sicher willkommen und Helfende erst recht.
Ralphs . 8 Anmerkungen . Trackback
27.04.2009
Vor einigen Wochen haben wir Frau Tanja Klein als neue Kundin gewonnen. Für ihre Site kleincoaching.de galt es ein Redesign zu erstellen. Das ging am letzten Wochenende online. Zuvor stellte sich heraus, das WordPress als CMS für ihre Ansprüche nicht ausreichen und dass für eine Lizenz von ExpressionEngine das Budget zu klein sein würde. So habe ich mich auf Wunsch der Kundin in das mir bis dahin unbekannte CMS Made Simple eingearbeitet. Ich werde in Kürze darüber berichten, ich habe schon einiges notiert und in Sätze gepresst. ;-)
Update 29.04. – Versprochen und gehalten: CMS Made Simple im Schnelldurchgang

Ralphs . 5 Anmerkungen . Trackback
5.04.2009
Okeh, anstatt hier lange Beiträge über Six Revisions zu schreiben, könnte ich die Ressource auch gleich twittern. Gesagt, getan. Für den schnellen Link ist Twitter ja nicht schlecht, für den schnellen Verkauf vielleicht auch nicht.
Ralphs . 2 Anmerkungen . Trackback
24.03.2009
Was Sie über CSS-Frameworks wissen sollten! kann ich Euch nicht genau sagen, die beiden Autoren Dirk Jesse und Nils Pooker wissen es aber ganz genau. Kleine Kritik am Rande: Das Lesen wird durch einen Mischmasch aus Deutsch und Englisch etwas erschwert. Ein “Essay” gewinnt durchaus durch die konsequente Wahl einer Sprache, auch wenn man zitiert. Das englische Original der Zitate läßt sich bei Bedarf durch Linksetzung jederzeit nachprüfen. – via pixelgraphix.
Ralphs . 1 Anmerkung . Trackback
3.01.2009
Ich habe zum Jahresende eine kleine Website für die Automotive Claim Consulting GmbH mit Portraitfotografie und kleiner Geschäftsausstattung fertiggestellt und einen zufriedenen Kunden gewonnen. Ansonsten haben wir es in diesen Fest- und Kaufrauschtagen ruhig angehen lassen und mit Familie und Freunden das Zusammensein genossen. Verena und ich haben zudem eine Reihe genialer französischer Filmklassiker von Chabrol, Bresson, Melville und Verneuil gesehen. Welt Welt und Dummheit Dummheit sein lassen, sich auf seine Arbeit konzentrieren und dabei das Netz locker links liegen zu lassen, das kann sehr erholsam sein. :-)
Ralphs . 3 Anmerkungen . Trackback
6.12.2008
Zum Thema New Dashboard Design für WordPress 2.7 kommentiert jemand radikal unzufrieden mit langer Leitung: “fifteen minutes with it and i hate it already. Von wegen, das große Meckern wäre eine besondere Eigenschaft der Deutschen! Das täuscht.
5.12.2008
Dennis Horn und Daniel Fiene, die Autoren von Das Podcast-Buch, haben nun Das Blogger-Buch geschrieben. Ich vermute, dass die beiden das gut gemacht haben für alle, die einen Einstieg suchen. Die Website zum Buch vermittelt eben diesen Eindruck. Vielversprechend erscheint auch das Buch Der erfolgreiche Webdesigner von Nils Pooker, welches Perun (der oberste Gott der slawischen Mythologie ist nicht gemeint ;) uns aus guten Gründen empfiehlt. Die Idee, den Beruf des Webdesigners aus der Perspektive eines Freiberuflers zu beschreiben, steht mir nahe, hatte ich die bereits vor einigen Jahren im Kopf, um dann keine Lust zu haben, für en Appel und en Ei ein Buch zu schreiben. Denn es is immer viel Arbeit dabei, ich erlebte das Ende 97 am eigenen Leib, als das Online ABC mit Hilfe eines geduldigen Lektors endlich in den Druck gehen konnte. Ich tendiere eh eher zur Prosa, das steht schon mal fest. Immerhin. °L°
Ralphs . 1 Anmerkung . Trackback
11.11.2008
Neu im Weblog-Layout-Angebot ist das Theme Ratatatam, eine in dezentem schwarz und weiß gehaltene Leseumgebung, die mir auch für längere Texte sehr gut geeignet scheint und zudem den neuen Blogtitel prägnant betont. Texte über Filme aus den 60er und 70er Jahren würden zum Beispiel zu diesem Layout sehr gut passen, so scheint es mir.
Ralphs . 8 Anmerkungen . Trackback
31.10.2008
Ich biete Silver Note und Dark Tab, damit sollte der Wunsch nach dunkler Bloganmutung gut bedient sein. Es folgt bald Tschichold, hell und freundlich. Schönes Wochenende.
28.10.2008
Style Switcher scheinen aus der Mode gekommen zu sein. Ich weiss gar nicht warum. Weil sie eh nicht genutzt werden? Kommt vielleicht drauf an. Wer es hier zum Beispiel lieber dunkel mag, kann sich das jetzt oben im Hauptmenü dauerhaft einstellen. Bitte einfach “Silver Note” wählen. ;-) Weitere Themes folgen, denn das ist eine schöne Art, um zu zeigen, welche Freude ich an schönen Weblog-Layouts habe. Unterstützt werde ich dabei vom Plugin Theme Switcher Reloaded, das sich problemlos einbinden und aktivieren ließ. Tja, guter Service erzeugt wiederum woanders guten Service, so ist das im Web. ;)

Ralphs . 2 Anmerkungen . Trackback