Ratatatam

Responsive Websites bauen: Entwürfe sind nicht mehr meine Babys – ich hinterfrage im Sauseschritt

29.08.14

Die folgenden Webdesigns für meine Kunden Drübbelken und Luzia Hofmann setzen mal wieder auf WordPress. Gerade für kleinere Websites mit einem knappen Budget ist WordPress die erste Wahl. Vor allem auch, weil der Kunde sich schnell ins System einarbeiten kann. Wer ein bisschen Erfahrung mit der Pflege von Websites mitbringt, kommt sogar mit einer Schulung am Telefon aus.

kunde-drueb-desk00

Da mein Workflow von der Entwurfsphase bis zum CSS-Coding mittlerweile vollends auf responsives Webdesign ausgelegt ist, biete ich die Optimierung für Smartphones und Tablets für einen relativ geringen Aufpreis an – falls die Komplexität des Layouts und die Tiefe der Navigation sich in Grenzen halten. Auch wenn ich bereits einige Male den Aufwand unterschätzt habe, es widerstrebt mir schlicht, statische Websites zu bauen.

kunde-drueb-mobil00

Responsives Webdesign ist für mich ein Überbegriff für Design und Coding, welches für den mobilen Zusammenhang erstellt wird und sich nahtlos an Smartphones und Tablets anpasst, ohne an Qualität zu verlieren. Ich unterscheide nicht zwischen adaptivem und responsivem Webdesign. Das hat einen praktischen Grund: Es erleichtert mir die Kommunikation mit dem Kunden. Ihn interessieren diese Differenzierungen meistens nicht.

kunde-hexeratung-desk00

In den letzten Jahren achte ich stärker auf die Vorstellungen des Kunden. Ich nehme mir mehr Zeit für die Kommunikation im Vorfeld der Realisierung. Es geht nicht um meinen Geschmack, sondern um meine Erfahrung als Designer. Es geht um einen agilen Prozess, auch wenn das Projekt noch so klein ist. Diese Haltung hilft mir, sehr flexibel zu arbeiten und immer wieder die Kommunikation zu suchen. Es war nicht zuletzt die intensive Auseinanderersetzung mit dem UX-Design, die mein Selbstverständnis als Konzepter und Webdesigner verändert hat.

kunde-hexeratung-mobil00

Ein Bewusstsein für die Bedürfnisse und Ideen des Kunden zu entwickeln, geht einher mit der kontinuierlich gestellten Frage, ob die Zielgruppe auch abgeholt und sich wohlfühlen wird mit der neuen Website. Auch hier geht es nicht um meinen Geschmack und um das Festhalten an Entwürfen, die mir auf Anhieb gelungen erscheinen. Entwürfe sind nicht mehr meine „Babys“, sie sind eine Möglichkeit unter vielen.

Ich hinterfrage viel schneller, entsprechend schnell kann ich Ideen und Arbeiten auch wieder verwerfen und Lösungen finden, die alle glücklich machen. Das Schöne daran ist, es lohnt sich auch für alle. ;-)

Autor: Ralph Segert   Tags: , , , ,      

Behutsames Redesign für die mobile Zeit

15.08.14

Für die Rechtsanwältin Maria Schachten habe ich vor gut zehn Jahren eine einfache Website gestaltet. Sie enthielt ein Headerfoto von der Kundin und meine Portraitaufnahmen und tat ihren Dienst. Nun stand ein Redesign an. Da die Kundin mit dem alten Layout im Großen und Ganzen zufrieden geblieben war, sollten keine großen Änderungen vorgenommen werden und auf jeden Fall das Kopfbild gerettet werden. Leider stand es nur sehr klein zur Verfügung. Zum Glück gab es einen Weg, dieses akzeptabel zu vergrößern. Das Ergebnis:

redesign-raschachten01

Im Vergleich dazu das Layout aus dem Jahre 2003. Das Coding hatte mit tabellenfreiem Markup und einem sparsamen CSS die Jahre richtig gut überstanden. Bei der Arbeit fiel mir auf, dass ich gestalterisch in den letzten Jahren dazu gelernt habe. Ich habe eine sicherere Nase, was die Abstände und Proportionen betrifft. Insgesamt ist der Lernprozess noch beschleunigt worden durch die responsive Webzeit.

redesign-raschachten02

Responsivität für große und kleine Screens, mit angepasstem Headerbild für mobile Geräte:

redesign-raschachten03

Autor: Ralph Segert   Tags: , ,      

Entwurf und Umsetzung einer visuellen Identität

29.05.14

Im Herbst 2013 kam eine Freundin, die ich aus den Augen verloren hatte, auf mich zu. Sie stand vor einer Firmengründung mit zwei Partnern und suchte einen Print- und Webdesigner. Sie hatte sich unter anderem an eine Visitenkarte erinnert, die ich ihr 1999 erstellt hatte und suchte meine Kontaktdaten im Netz.

kunde-defakto-mobil01

Daraus ist eine spannende Zusammenarbeit geworden, die mir die Möglichkeit gab, eine visuelle Identität für ein Startup zu entwickeln, das sich in 2014 erfolgreich als Bildungsträger etabliert. Bevor es aber losgehen konnte, gab es für alle von uns viel zu tun. Ich bekam als Vorgabe für meine Arbeit den Firmenamen „defakto“ und den Slogan „…nach allen Regeln der Kunst“. Daraus habe ich im zweiten Anlauf ein Typo-Signet entwickelt, das sowohl die Sachlichkeit des Namens wie auch eine Anspielung auf den Claim enthält.

kunde-defakto-print01

Nachdem auch mein Farbvorschlag nach intensiven Diskussionen angenommen war – es gab immerhin drei Entscheider zu überzeugen -, stand die Vollendung der Geschäftsausstattung mit Visitenkarte, Briefbogen und Konzeptpapier an. Gar nicht so einfach war dabei, den doch recht langen Claim würdig unterzubringen.

Als nächstes begann meine Arbeit als Webdesigner. Es gab den Wunsch nach animierten Kacheln für eine Webpräsenz, die als imagebildende Website aufgebaut werden sollte. Ihre Hauptaufgabe ist, Aufmerksamkeit zu erregen und in aller Kürze über das Selbstverständnis und die Konzepte der Firma zu informieren. Das Ergebnis ist eine Website mit CSS-3D-Effekt und hohem Wiedererkennungseffekt. Sie funktioniert in der mobilen Variante ab einem festgelegten Breakpoint ganz ohne Animation, was Ressourcen schont.

kunde-defakto-desktop01

kunde-defakto-desktop02

kunde-defakto-mobil02

Responsive Dokumentations-Site

Der Kunde defakto GmbH brauchte danach für seine in kurzer Zeit akquirierten Bildungsprojekte eine Dokumentations-Site mit eigenständigem Layout und Ideen für die Informationsarchitektur. Also klärte ich mit dem Kunden die inhaltliche Struktur, was nicht so einfach war, da noch kaum Inhalte vorhanden waren. Aber wir hatten klug vorausgedacht. Danach entwarf und codete ich ein neues Layout und integrierte es in das bereits von mir eingerichtete CMS. So entstand defakto DOKU.

kunde-defakto-doku

Das eingesetzte CMS ist Expressionengine. Es organisiert zugleich die Inhalte der Imagesite. Für beide Sites reichte eine Installation. So ist der Kunde mit geringer Lernkurve in der Lage, sowohl die imagebildende Website als auch die inhaltsstarke Doku-Site zu pflegen. Nicht unbedingt eine Selbstverständlichkeit.

Zudem enthält defakto DOKU eine leicht zu aktivierende responsive Diashow mit Fotos aus den Projekten, die nur bei Bedarf im Inhaltsbereich erscheint. Sie braucht somit keinen Platzhalter, wenn es keine Fotos gibt. Das Script heißt übrigens LayerSlider und ich empfehle es guten Gewissens. :-)

kunde-defakto-mobil01

Autor: Ralph Segert   Tags: , , ,      

CSS3 in der Anschauung

19.01.12

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.

Autor: Ralph Segert   Tags:      

Überzeugendes ExpressionEngine

15.11.11

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.

Autor: Ralph Segert   Tags: , ,      

Spezialisten vom Fach

01.06.11

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. ;)

expressionengine für nexxtep

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.

Autor: Ralph Segert   Tags: , ,   1 Kommentar    

Nützliche jQuery Tools

23.05.11

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.

Autor: Ralph Segert   Tags: ,      

125 WordPress-Templates für ein Redesign

04.02.11

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.

Autor: Ralph Segert   Tags: , ,   2 Kommentare    

Schönes Webdesign für kleines Content Management

20.03.10

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!

 Website Seniorenheim Linz

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

Autor: Ralph Segert   Tags: , ,      

DJR 2010

17.12.09

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.

DJR 2010

Autor: Ralph Segert   Tags: ,   3 Kommentare    

Langsames und teures „Business“-Paket

19.10.09

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.

Autor: Ralph Segert   Tags: ,      

Mehrere Sidebars mit eigenen WordPress-Widgets

28.09.09

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:

widget01

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

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:

widget03

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

widget04

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

Autor: Ralph Segert   Tags: ,      

Google sucht Anker-Links

27.09.09

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!

Autor: Ralph Segert   Tags: ,      

Blogdesign und ein behutsames Redesign

27.09.09

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:

redesign-korrekturen-alt

redesign-korrekturen-neu

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. :-)

redesign-yogabasics-alt

redesign-yogabasics-neu

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. ;)

redesign-singleblog

Autor: Ralph Segert   Tags: , ,   2 Kommentare    

Auf CSS-Hacks wäre zu verzichten

01.09.09

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.

Autor: Ralph Segert   Tags: ,      

Argumente für ExpressionEngine

15.07.09

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.

Autor: Ralph Segert   Tags: , ,      

Das Prinzip Im eigenen Saft …

01.07.09

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
.

Autor: Ralph Segert   Tags: ,   1 Kommentar    

Serviceblog und neue Fotogalerie

21.06.09

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.

Autor: Ralph Segert   Tags: , ,      

Twitterbeute für Webdesigner und Netzfreunde

03.05.09

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:

Autor: Ralph Segert   Tags: , , ,      

Kleines Redesign

03.05.09

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.

Kleines Redesign

Autor: Ralph Segert   Tags: , , ,      

CMS Made Simple im Schnelldurchgang

28.04.09

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? ;-)

CMS Made Simple

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. ;-)

Templates

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.

Der Editor von CMS Made Simple

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.

Seiten in CMS Made Simple

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.

Autor: Ralph Segert   Tags: ,   8 Kommentare    


Ansichten:  ragini · Frank · aurora · Ping

Android Anleitung App Design Blogosphäre Bochum Buch CMS CMS Made Simple DJR Electropop ExpressionEngine Film Fotografie Fotolust Freiberufler Fussball GooglePlus Grafikdesign Icondesign Ingwer iPod Touch IT-Sicherheit Layout Leben Medien Musik Netz Politik Produkt Redesign responsive Webdesign Rezepte Ruhrgebiet Software Sprache Technik Teufel UX UX-Design Verpackungsdesign Videoanleitung Webdesign Webradio Wissen Wordpress

© 2017 Ralph Segert . Impressum