SplashpagesSplashbooksSplashcomicsSplashgamesComicforumImpressumEntertainweb


In der Datenbank befinden sich derzeit 90 Artikel. Alle Artikel anzeigen...

Über die Entwicklung eines neuen Designs
Vom Frust, von der Lust und von der Verzweiflung am Entwickeln eines neuen Designs für Splashcomics.
Nun gut, ich bin professioneller Web-Designer, mache in meiner Arbeit neben einigem Anderen auch den Entwurf und die Ausfhrung von Designs fr Websites. Daneben bin ich auch Programmierer, schreibe derzeit meistens PHP-Anwendungen mit Datenbank Anbindung, so wie auch das System, das hinter den Splashpages steckt. Aber dennoch ist es gar nicht so einfach ein Design zu verndern, es eigentlich zu toppen, das so zeitlos war, wie das von Splashcomics. Es war, was man unter Webdesignern den groen Wurf nennt. Es wirkte trotz der sechs Jahre, die es nun auf dem Buckel hat, nie wirklich abgegriffen. Es lief damals keinem Trend hinterher und war - das ist der grte Witz dabei - in fnf Minuten unter der Dusche erdacht worden.

Da war es schon erheblich schwieriger das neue Design zu finden und schlussendlich umzusetzen. Im April 2006 habe ich mich dran gesetzt einen ersten Entwurf zu erstellen, den ich im Juni 2006 weiter komplettierte. Wie man an der folgenden Grafik sehen kann, war ich damit nicht mehr weit vom Endentwurf entfernt, aber es war alles zu brav, zu einfach, zu sehr auf Effekten von Photoshop aufgebaut, die schon x-mal verwendet worden waren. Das Grundlayout war gefunden.


ber Wochen hinweg bastelte ich nun an verschiedenen Effekten, bis letztendlich dieser Entwurf dabei entstanden war, der vom 21.07.2006 datiert:


Entscheidend war die Idee eines glasartigen Looks des Mens und der RSS-Buttons direkt darunter. Der Effekt besteht aus insgesamt vier Ebenen: Einer unteren Ebene mit schwarzem Rand, die den Schattenwurf hat. Zwei Farbverlauf-Ebenen, die gegenstzliche Farbverlufe haben und dadurch den Glaseffekt herstellen. Und einer vierten Ebene, die nur den weien Rahmen darberlegt. Ich muss ehrlich zugeben: Ich habe die Idee nicht selbst entwickelt, hier half ein Photoshop-Tutorial weiter. Man bemerke aber die lange zeitliche Distanz. Dazwischen gab es zahlreiche Versuche, die verworfen wurden und sehr viel Recherche auf Photoshop-Seiten, um die richtige Inspiration zu finden.

Schwierig war auch die Umsetzung. Wir waren uns einig: Barrierearmut - Barrierefreiheit besteht sowieso nie - sollte es sein. Das bedeutete mit DIV-Layern zu arbeiten, die aber durch die unterschiedlichen Reaktionen der Browser nicht gerade mein Lieblingswerkzeug sind. Die Arbeit am HTML-Unterbau begann am 10.08.2006 gegen 14:00 Uhr. Gegen 4 Uhr morgens sah das Endergebnis nicht gerade berauschend aus:


Am Schwierigsten war dabei die Positionierung der Formularelemente. Diese sind punkgenau ausgerichtet worden. Und manchmal kam auch die eigene Dummheit dazwischen. Der Layer fr den Login wollte einfach nicht komplett erscheinen. Bis ich irgendwann auf den Trichter kam: Ist der berhaupt lang genug? Nein, war er nicht. Bis dahin dachte ich immer nur: Der liegt einfach unter dem Login-Button.

Manchmal ist es aber auch die eigenartige Auslegung der Browser bei einigen CSS-Einstellungen, insbesondere beim MSIE. Etwas was beim Firefox lief, wollte nicht unbedingt folgsam beim MSIE sein. Aber auch der Umkehrschluss konnte des fteren gezogen werden.

Warum war das berhaupt so kompliziert? Nunja: Die meisten Layouts bestehen aus zwei Spalten und zwei Zeilen. Header und Inhalt als Zeile, im Inhalt dann eine Spalte fr die Navigation und den Inhalt. Splashcomics besteht aus fnf Zeilen, drei Spalten, die sich zum Teil auch noch berlappen und weitere Elemente innerhalb der Zeilen und Spalten beinhalten. So besteht das Suchfeld aus drei Elementen: Eingabefeld, Lupe und Hintergrund. Der Login hat sechs Elemente: Feld fr den Loginnamen, Feld fr das Passwort, Abschicken-Pfeil, Grafik fr den CF-Text, Grafik fr die Hilfe und der Hintergrundgrafik. Wir haben es hier also mit einem hochkomplexen Gebilde zu schaffen, fr das es keine Vorlage gibt. Dabei waren die Elemente oberhalb des Inhalts noch sehr einfach. Die waren ja starr in Hhe und Breite. Das Problem fing erst mit dem Inhaltsbereich an, der sich dynamisch verbreitern soll. Klingt einfach, ist es aber aufgrund der Problematik der verschiedenen Browser nicht.

Die HTML-Arbeiten waren schlussendlich am 11.8.2006 gegen 19 Uhr beendet. Zieht man die Pausen ab, stand der Unterbau in ca. 16 Stunden. brigens ging von dieser Zeit mindestens eine Stunde zum Testen mit den verschiedenen Browsern drauf. Dabei wurde die Site mit dem MSIE, Firefox, Konqueror und dem Opera getestet und dies erfolgte auf Windows XP und Linux Mandriva auf insgesamt vier Rechnern. Ein Apple-Test wurde dann noch am Abend von unserem Chefgrafiker gemacht. Auf allen Plattformen sieht die Site nahezu gleich aus.

Es gibt ein paar Unterschiede. Der MSIE und der Opera knnen zum Beispiel die abgerundeten Kanten der Ksten im Inhalt nicht anzeigen. Das geht nur im Firefox. Im MSIE ist die Linie zudem dicker als im Opera oder Firefox. Der Rest ist aber bis auf marginale Unterschiede in den dargestellten Schriftgrssen gleich.

brigens waren ein paar Designelemente schon im Laufe des 11.08.2006 zu sehen. Die Navigationspfeile waren gendert worden und auch das Logo. Beides ging im Laufe der Entwicklung nicht anders.

Ist dieses Design nun wieder ein groer Wurf? Wir wissen es nicht. brigens: Wenn ich von "wir" spreche, dann ist das nicht der Majestatis pluralis, sondern dann ist auch Henning Kockerbeck gemeint, dem anderen Chefredakteur von Splashcomics. Er hat immer wieder mit Rat und Tat zur Seite gestanden, hat die unterschiedlichen Designideen begutachtet und Vorschlge gemacht. Und er hat meine schlechte Laune ausgehalten whrend der Entwicklung des HTML-Unterbaus, wenn mal wieder etwas nicht so wollte. Wir waren dabei im stndigen Skype-Kontakt. Und bei ihm muss ich mich an dieser Stelle mal ganz herzlich bedanken :-) Zurck zum groen Wurf: Das kann man eigentlich nur in ein paar Jahren sagen. Hlt das Design auch weitere sechs Jahre durch, dann muss es wohl so gewesen sein. Wenn nicht, dann ... sollte es wohl nicht so sein ;-) Aber freilich hoffen wir, dass wir diesen Kraftakt nicht so schnell wiederholen mssen.


Persönlichen Bookmark setzen für diese Seite
Diese Seite als Bookmark bei Blinklist hinzufügen   Diese Seite als Bookmark bei del.icio.us hinzufügen   Diese Seite als Bookmark bei Digg hinzufügen   Diese Seite als Bookmark bei Fark hinzufügen   Diese Seite als Bookmark bei Furl hinzufügen   Diese Seite als Bookmark bei Google Bookmarks hinzufügen   Diese Seite als Bookmark bei Mister Wong hinzufügen   Diese Seite als Bookmark bei myYahoo hinzufügen   Diese Seite als Bookmark bei Netscape hinzufügen   Diese Seite als Bookmark bei Newsvine hinzufügen   Diese Seite als Bookmark bei Reddit hinzufügen   Diese Seite als Bookmark bei StumbleUpon hinzufügen   Diese Seite als Bookmark bei Technorati hinzufügen   Diese Seite als Bookmark bei Yigg hinzufügen  
Oder diesen Dienst benutzen: Social Bookmark Button

Artikel vom: 12.08.2006
Kategorie: Kolumne
Autor dieses Artikels: Bernd Glasstetter
Artikel als Podcast downloaden: Download (Gre: 1.38 MB - 2.659 Downloads)
Artikel als Podcast anhren:
«« Der vorhergehende Artikel
Der fröhliche Wochenrückblick - Teil 2
Der nächste Artikel »»
Neuer Lucky Luke: Interview mit Horst Berner
Benotung
Benotung: Keine Bewertung vorhanden
Benotung
Du kannst diesen Artikel hier benoten. Die Benotung erfolgt mit Sternen. Keine Sterne entsprechen der Schulnote 6. Fnf Sterne entsprechen der Schulnote 1. Oder schreib doch einfach einen Kommentar!
Schulnote 1Schulnote 2Schulnote 3Schulnote 4Schulnote 5Schulnote 6
Das sagen unsere Leser
Zu diesem Beitrag existieren noch keine Kommentare unserer Leser. Wenn Du möchtest, kannst Du einen Kommentar zu diesem Beitrag beisteuern. Klicke dazu hier...