Über das segert.net weblog
Das segert.net weblog schrieb ich zwischen Oktober 2003 und Dezember 2007 mehr oder weniger intensiv. Weiter mit dem Blogging geht es auf ralph-segert.de.
ralphs
Redesign: Elastisches segert.net 2.0
19. Januar 2007 um 13:35Kaum zu glauben, aber wahr, das Redesign unserer Agentursite segert.net ist in trockenen Tüchern, unsere alte und von Kunden doch recht oft gelobte Website ist somit in Rente gegangen. Das fluide Design hat mich eine schlaflose Nacht gekostet. Ich denke, es hat sich gelohnt, vor allem, weil nun keine Navigationslinks mehr bei Skalierung der Schrift das grafische Drumherum überlagern. Einen Nachteil sehe ich aber darin, dass die Zeilenbreite je nach Browserbreite und Monitorauflösung die Lesbarkeit des Textes erschwert, so dass ich überlege, das elastische Layout des Contentbereichs durch eines zu ersetzen, das mit Skalierung der Schriftgröße wächst. Was meint Ihr?
Wichtig an der neuen Site war uns auch, dass sich Besucher mit wenig Zeit möglichst schnell ein Bild über unsere Dienstleistungen verschaffen können. Ich denke, das ist uns gelungen, da nun nur noch sieben Klicks nötig sind. Zudem ist der Text auf ein Minimum reduziert worden, sollen doch die grafischen Beispiele die Überzeugungsarbeit leisten. ;-)
Das Flash-Showcase auf der Startseite werde ich Kürze noch überarbeiten, ich hatte am Ende nicht mehr die Geduld, auch eine Auswahl unsere Arbeiten für den Print zu zeigen. Das ist meistens auch etwas schwerer, wenn der Platz dafür recht begrenzt ist.
Nachtrag am 28. Januar: Nicht das jemand einen falschen Eindruck bekommt, es gibt ein Redesign des Redesigns. ;-)
Zur Startseite | Zur Suche .
19 Kommentare | Kommentar schreiben
1. Sabine am 19. Januar. 2007 um 14:05
Also ich fürchte, diese Kreation wird nicht so hoch gelobt werden. Von der Grafik her schaut sie uralt aus. Ich als potentieller Kunde würde gar keine neueren Techniken dahinter vermuten. Gefällt mir persönlich wirklich gar nicht. Sorry.
2. andreas am 19. Januar. 2007 um 14:33
Also, mir gefällt’s. :) Nur das Flash-Dingens ist etwas grobschlächtig.
3. Alex am 19. Januar. 2007 um 16:22
Also, was mir so spontan auffällt:
+ recht angenehme Farben
- oben zu viel Weiß
- die drei Buttons ruckeln beim hover
- Web-Button: erinnert eher an Recycling-Symbol
- Icon-Button (Zahnräder): suggeriert “Einstellungen” oder “Admin-Bereich”
- welches sind die “7 Klicks”? Ich zähle 3 Buttons und 5 Navigationspunkte
- was soll das Flash (stört mehr als es nützt bzw wirkt fehl am Platz). Wozu die Knöpfe (Pause/Play)? Es scheint sich jedenfalls nichts merkliches zu tun.
- die Navigationsleiste bleibt gleich beim Klicken der darüber liegenden Buttons - seltsam. Sind die Buttons also die Subnavigation?
- Insgesamt wirkt Seitenstruktur unnachvollziehbar. Z.B verbirgt sich unter dem Button “Web” im Prinzip das selbe wie unter “Kunden”
- Kunden-Liste: ohne Links und ohne Wert
- insgesamt ein bisschen arg wenig Inhalt/Text, wirkt ein bisschen wie eine Testseite oder Design-Vorlage
…alles natürlich IMHO
4. axel am 19. Januar. 2007 um 16:35
Der erste Eindruck: mittelprächtig. Also nochmal drüber. /Auffällig: All die schönen Dinge in so Särgen. Alles wird ähnlich, verwechselbar. / Die Bildchen in der Kopfnavi flackern bei mir (DSL via Sat). / Ein Flash geht, ein Doppelflash geht nicht. / Die Referenzen nach ganz oben verwirrt mich. / Es braucht wohl noch eine Nacht.
5. roland am 19. Januar. 2007 um 16:37
“das elastische Layout des Contentbereichs durch eines zu ersetzen, das mit Skalierung der Schriftgröße wächst.”
Interessiert mich persönlich - hast du irgendeinen Link, wo ich mir mal ansehen könnte, wie man das macht (Anleitung oder Beispiel).
6. Ralph am 19. Januar. 2007 um 16:53
Roland, meinst Du das elastische Layout oder die Skalierung? Zum Thema “fluides design” finde ich den Artikel von Björn Seibert zum Einstieg empfehlenswert: Herausforderung elastische Layouts. Ein echtes Tutorial ist mir bisher nicht bekannt.
Bei der oben erwähnten Umwandlung setze ich einfach den width-Wert des Containers nicht als Prozentwert, sondern als em-Wert. Sollte eingetlich ohne große Probleme klappen.
7. Klaus am 19. Januar. 2007 um 17:04
Hmmm… die Symbole erinnern tatsächlich an Recycling (was ja wohl nicht beabsichtigt ist) und an “Technisches” (nicht an Icons).
Persönlich finde ich den Header zu dominant.
Die Liste mit den Kunden bitte verlinken. Das zappelnde Flashteil ist auch so mein Ding.
Aber: schöne, angenehme Farben, aufgeräumte Darstellung ;-)
8. Ralph am 19. Januar. 2007 um 17:12
Ich danke den Kritikern für die Anregungen. An den Navi-Icons werden wir noch arbeiten. Wenn Verena etwas mehr Zeit hat, lassen wir uns etwas spezielles einfallen. Das Flash werde ich verfeinern, die Übergänge und so, das wird schon. Das Flackern der Navi-Icons ist hier nur beim ersten Laden der Grafiken zu beobachten. Koennte mit JavaScript verhindert werden, ich bevorzuge aber CSS-Hover.
9. Christian am 19. Januar. 2007 um 22:58
> Das Flackern der Navi-Icons ist hier nur beim
> ersten Laden der Grafiken zu beobachten.
> Koennte mit JavaScript verhindert werden, ich
> bevorzuge aber CSS-Hover.
und warum flackert das? Tauscht Du beim Hover das Hintergrundbild aus?
Das kann man schön dadurch vermeiden, dass man ein größeres Bild anlegt, in dem beide Zustände nebeneinaner liegen und man beim Hover die Position des Bildes ändert…
10. Iris am 20. Januar. 2007 um 01:02
Das Flackern beim ersten Laden der Hover-Grafiken könntest Du auch mit CSS verhindern. Dazu müsstest Du nur alle Grafiken bereits beim Aufruf der Seite mitladen.
Ich hab’ das oft so gemacht, dass ich die Grafiken für die Links im Normalzustand als Background in die Listenpunkte (li) gepackt hab’ und die Hover-Grafiken als Background der Links (a) definiert hab’. Für den Normalzustand verschiebst Du die Grafiken aus dem sichtbaren Bereich, indem Du für die background-position negative Werte (logischerweise mindestens in der Größe der Grafik) setzt. Für den Hover-Zustand (a:hover) verschiebst Du die dann einfach wieder auf 0 0 (quasi wie einen Vorhang vor die backgrounds der Listenpunkte).
Ich hoffe, Du hast verstanden, wie ich das mein’. In CSS wär’s leichter zu erklären ;o).
11. at am 20. Januar. 2007 um 07:22
Hätte ich nicht gewusst, dass es deine Seiten sind, hätte ich auf eine Kanzlei oder Praxis getippt.
12. Ralph am 20. Januar. 2007 um 12:51
Na Gott sei Dank nicht Apotheke! Warum Kanzlei, Praxis?
13. Ralph am 20. Januar. 2007 um 12:58
Iris, danke, kann ich nachvollziehen. :)
14. Connie am 20. Januar. 2007 um 13:55
warum um aller Welt wird denn der ganze Krempel zweimal angezeigt?
WebDesign
IconDesign
etc.
alles zweimal untereinander auf der Seite?
Oder hab ich da was nicht verstanden?
Hast du deine Seite mal mit Opera angesehen??
Gruss, Connie
15. Ralph am 20. Januar. 2007 um 14:10
Opera? Aber sicher. In Opera (Mac) ruckeln die Navigrafiken nicht. *g*
Was meinst Du mit “alles zweimal”? Auf der Startseite? Das Sonderflash dort ist nun wech. ;-)
16. at am 21. Januar. 2007 um 08:58
“Warum Kanzlei, Praxis?”
Die Farben, die Aufteilung, das Signet, die Schriftgestaltung, die Icons, die dezenten Verläufe — alles sehr seriös, um nicht zu sagen: humorfrei, und darum bemüht, niemandem auch nur ein Haar zu krümmen. “Geschmacksneutral” klingt sicher böse, ist natürlich gar nicht so gemeint, trifft es aber — meiner Meinung nach. Und ironischerweise kann ich mit den Elementen, die das am ehesten auffangen könnten, am wenigsten anfangen: Die Icons vor den Überschriften wirken willkürlich, und vor allem sind es zu viele.
Wie gesagt, für eine Praxis oder Kanzlei prima, für euch eher nicht.
17. Ralph am 21. Januar. 2007 um 14:42
Das mit den Icons vor den Überschriften stimmt. Sind seit gestern weniger und werden mit 2 neuen Icons fürs Hauptmenue auch bald sinniger eingesetzt werden. Status also noch: work in progress. ;-)
Meine Frage von oben: Ist das elastische Layout für den Textbereich zuviel des Guten, lieber feste Breite? Bisher gab es diesen Wunsch nur einmal per Email.
18. at am 21. Januar. 2007 um 18:09
Generell bevorzuge ich zwar schmalere Textspalten, die sich an der Schriftgröße orientieren — also eigentlich ebenfalls elastisch –, aber bei euren Seiten fällt das letztlich kaum ins Gewicht: Ihr verwendet entweder harte Umbrüche, etwa im Impressum, eine staccato-artige Referenzliste und insgesamt kaum Fließtext. Visuell ragen diese langen Zeilen dann allerdings umso mehr aus dem Raster, auch wenn sie den Lesefluss meines Erachtens kaum stören.
19. Sam am 22. Januar. 2007 um 22:43
Nur um keine Verwechslung aufkommen zu lassen, die erste Sabine bin nicht ich…hahah
Aber ich gib jetzt trotzdem meinen Senf dazu. Eure Seite, die jetzt in Rente ist, war villeicht noch nicht reif dafür, da ich diese viel besser fand. Sie war genauso übersichtlich und leicht zu navigieren. Fand ich jedenfalls. Technisch gesehen läuft die neue im Safari ordentlich, aber optisch finde ich sie nicht so innovativ, aber das kann auch an der Farbe liegen. Das alle Arbeiten untereinander stehen, finde ich gut.
Ich hab zwar keine Ahnung vom Web, aber ich tendiere zu einem statischen Textblock, der sich an die kleinste Monitorbreite orientiert, so braucht man nichts “elastisches” und der Text sieht auch bei 21 Zoll und mehr noch gut und leserlich aus. Dann ist eben rechts und/oder links freier Platz.
Lange Zeilen finde ich nicht gut. ;-)