Gleich zwei Verkehrsgesellschaften haben in den letzten Tagen ihren Webauftritt relauncht. Gleich vorweg: Weder Duisburg noch München können an den unfreiwilligen Unterhaltungswert der LVB heranreichen (dt berichtete). Aber vermutlich bedauert das niemand auf Seiten der Verantwortlichen.
Großzügig präsentiert sich der neue von move:elevator betreute Webauftritt der DVG Duisburg. Die Hauptnavigation, ein Bühne, auf der Aktionen und Angebote gespielt werden können sowie das Formular zur Fahrplanauskunft bekommen jeweils viel Raum zugesprochen. Auf größeren Monitoren (ab 1280px) funktioniert das ausgezeichnet. Mit einer 1024er-Auflösung befindet sich die Auskunft im scrollbaren Bereich. Während das obere Drittel ausgewogen erscheint, fällt im unteren Segment die uneinheitliche Bildsprache auf. Mal werden Fotoelemente verwendet und mal sind Schaltflächen rein als Vektorgrafik angelegt, bei denen man sich nicht entscheiden konnte, ob man sie als Outline- oder als flächige Form darstellt. Auch der Spiegel-Effekt und die Typographie zeigen keinen einheitlichen Duktus.
Bei der Fahrplanauskunft hätte man sich auch bei Eingabe eine Liste der Suchvorschläge vorstellen können. Als Nicht-Ortskundiger ist man doch ziemlich hilflos, da auf der Startseite nicht einmal optional die Suche über eine Karte angeboten wird. Dennoch ein großer Sprung vom Vorgänger zum jetzigen Auftritt, das zeigt auch der folgende Screen:
Im Vergleich dazu klassischer zeigt sich die Website der Münchner Verkehrsgesellschaft. Der dreispaltige Aufbau und die Farbgebung fanden sich in dieser Form auch schon im Vorgänger. Veränderungen fanden eher im Detail statt. Die Gesamtbreite ist deutlich angestiegen. Von 750 Pixeln ging es rauf auf 1024. Kenner zucken jetzt, denn auf Monitoren mit einer Auflösung von 1024 Bildpunkten erscheint am unteren Rand ein unschöner horizontaler Scrollbalken. Wichtig: Wer für 1024 optimiert, sollte immer unterhalb der 1000er-Marke bleiben, so dass der Scrollbalken am rechten Rand noch dargestellt werden kann. Tschuldigung, dass ich Einige damit langweilige aber hier muss es mal gesagt werden. Tipp: Das 960er-Grid-System hat sich da besonders bewährt. 980 Pixel ist ebenfalls sehr verbreitet.
Auch bei der MVG würden Suchvorschläge die Auskunft beschleunigen. Nicht nachzuvollziehen ist, dass die Auskunft unter einer weiteren Domain ausgelagert ist und zudem in einem neuen Fenster erscheint. Wenn man schon relauncht, dann hätte man exakt hier ansetzen können/sollen. Die Aussage: „jetzt noch kundenfreundlicher“, wie es in der Pressemeldung heißt, bekommt dadurch einen Schuss vor den Bug. Und warum werden die Meldungen (www.mvg-mobil.de/…) einzig als PDF vorgehalten? Dem „Look and Feel moderner Internetangebote“ wollte man nachkommen. Die Richtung stimmt, aber auf dem Weg dorthin gibt es noch einige Strecken zu meistern.
- www.mvg-mobil.de
dvg-duisburg sieht bis auf den schwarzen Trauerrand rechts ganz pfiffig aus, ein bisschen überladen und gedrängt, aber das passt schon.
MVG ist halt genauso, wie man sich den Auftritt einer Verkehrsgesellschaft vorstellt: konservativ halt. Tut aber auch nicht weh – bis auf die knallschwarze Schrift auf hellblauem Hintergrund.
Merkt eigentlich niemand, das knallschwarze Schrift auf Monitoren nicht gut kommt?
Die Website der MVG gefällt mir sehr gut. Ich denke ein Großteil der Besucher wird sich hier sehr gut und sehr schnell zurecht finden.
Rätselhaft empfinde ich, wie du Achim, die “Optimierung” auf 1024 Pixel Breite. Es kann doch nicht sein das auf solch hohen Niveau vermeintliche Spezialisten ein derartiges Ergebnis generieren. Im kleinen 1×1 des Web ist ein horizontaler Scrollbalken bei einer derartigen Seite ein absolutes No Go! Die Zielgruppe der MVG sind sicherlich nicht Unserereiner die mit großen Bildschirmen durch die weiten des WWW ziehen.
Trotzdem eine gelungene Website.
PS: Witzig sind auch die Dreamweaver-Template-Tags im Quellcode. Für mich persönlich auch ein absolutes No Go :-)
Kurz und bündig:
MVG erscheint mir recht innovationslos, aber solide. Nichts aufregendes, muss es ja für deinen Verkehrsbetrieb auch nicht unbedingt sein. Auch wenn mir persönlich die Duisburger Seite deutlich besser gefällt, wirkt frischer und moderner.
Kleiner Tipp: Auch die mobile Seite der DVG ist ganz schick gemacht…
https://mobil.dvg-duisburg.de
Hilfe, Hilfe, die DVG erdrückt mich. Total überladen – ich frage, warum?
Bisher sehr gelungen finde ich den Auftritt des MVG sowie des VVS. Beide zeigen sich konservativ, durchdacht und kundenfreundlich. Was ich verabscheue ist die Site der Bahn.
Die angegebene URL ist NICHT die reguläre Website des MVV München.
Da ich zufälligerweise in Dachau geboren und im Großraum München aufgewachsen bin, weiß ich auch ganz “zufällig”, dass immer schon der MVV die Schnüre zieht. Der MVG ist irgendwann dazu gekommen, wahrscheinlich für Steuererleichterungen, Geldeinsparungen etc. weiß der Teufel / warum auch immer.
Deswegen ist die Bahnauskunft
des MVGdes MVV eben auch DORT zu finden, und nicht etwa beim MVG.cu, w0lf.
DVG sieht optisch besser aus, wirkt aber doch etwas arg großzügig. Kann mir nicht vorstellen, dass die Seite bei Notebooks so toll zu bedienen ist.
MVG solide aber nicht besonderes.
Aber wieso werden immer noch linksbündige Websites gemacht, das macht doch überhaupt keinen Sinn mehr bei solchen Designs… Stattdessen muss ich immer auf meinem 24″er den Kopf drehen weil alles irgendwo links passiert.
@ Patrick: Dann wäre die einfachste Lösung wohl, nicht mit maximierten Browser zu surfen. Hab ich persönlich auch immer so gemacht: Mit Webdeveloper auf 1280×1024 gesetzt, einmal zu gemacht und neu gestartet – fertig!
In der Vergangenheitsform, weil a) die letzte Festanstellung bald 1 1/2 Jahre her ist und b) ich daheim “nur” über einen guten alten Röhrenmonitor Marke EIZO verfüge. Da ich allerdings auch seit Jahren virtuelle Desktops (4 an der Zahl) nutze, wüsste ich gar nichts mit einem größeren Bildschirm (oder gar 2 davon) anzufangen ;)
Das “großer Bildschirm sein gaaanz toll, weil viel mehr Platz”-Phänomen ist wohl beschränkt auf Windows- und u.U. auch Macianer. Ich habe insgesamt 5120 x 4096 Pixel Platz zum Verteilen von Applikationen, und muss dafür noch nicht mal quer durch den Raum gehen, um meine Anwendungen wiederzufinden – ein Knopfdruck genügt! :D
cu, w0lf.
Fwolf und welche Person wollte das jetzt wissen?
@fwolf: Und was ist mit den Seiten wo ich mehr Platz haben will, bzw. bei denen mehr Platz sinnvoller ist? Soll ich bei jeder Website mein Fenster neu anpassen? Einfacher wäre es eben, wenn generell alle Seiten mit so einem symmetrischen Design zentriert dargestellt werden, das hat keinerlei Nachteile, machts dem Benutzer aber wesentlich einfacher.
Also bei der Münchner Verkehrsgesellschaft muss ich beim Logo immer wieder direkt hieran denken:
http://www.mvg-mainz.de
Jeden Effekt und Trend der vergangenen 10 Jahre untergebracht. Yeah! Mission accomplished! Schon langer nicht mehr etwas so mittelmäßiges gesehen.
Objektiv betrachtet ist die Seite der DVG kundenfreundlicher, da man mit Hilfe der 5 Hauptnavigationspunkten alles schnell findet. Bei der MVG wird man dagegen von insgesamt 13(!) gleichwertigen Links regelrecht “erschlagen” – ein absoltes No-Go im Web!
Auch persönlich gefällt mir die Seite der DVG besser, auch wenn an einigen Stellen etwas weniger Effekte nicht geschadet hätten. Aber die Aufteilung und die (inhaltliche) Gestaltung der Seite spricht mich sehr viel mehr an, vor allem die Startseite.
Wo seht ihr eigentlich einen horizontalen Scrollbalken, wenn man das Fenster auf 1024 Pixel Breite verkleinert?
@ Daniel: Du natürlich. Troll dich woanders herum, wennst nicht mal in der Lage bist, zwischen E-Mail-Adresse und Website-URL unterscheiden zu können. Mich bekommst du damit jedenfalls nicht so schnell mundtot ;)
@ Patrick: Wieso musst du deinen Browser permanent anpassen? Oder ist dein Betriebssystem so unfähig, dass die jeweilige Browser-Implementation sich nicht die Größe ihres eigenen Fensters merken kann? Ein kurzer Test unter Windows (XP SP3) und Linux (mit XFCE / KDE 4) mit Firefox 3.5 und Google Chrome 5 bestätigten das von mir beschriebene Verhalten – eben dass sich Browser im nicht-maximierten Zustand die eigene Fenstergröße “merken”, also in ihren Einstellungen abspeichern. Also sollte es bei dir auch keine Probleme geben – du darfst dann halt nicht mehr durchgehend mit maximiertem Fenster ins Netz.
Wenn dir das zuviel Arbeit ist (einmal Browser ausrichten, schließen, neu starten – und gut ist!), frage ich mich allerdings, warum du noch Kommentare in Weblogs verfasst, immerhin musst du dafür in ein Eingabefeld klicken, zahlreiche Tasten drücken, gar Absätze einfügen, anschließend noch eine Schaltfläche anklicken, ggf. noch ein CAPTCHA oder Rechenaufgabe beantworten, vorher noch deinen Namen und mindestens E-Mail-Adresse oder Website-URL einfüllen .. das hört sich für mich nach bedeutend mehr Aufwand an!
Was die Zentrierung des Hauptbereichs anbelangt: Das für sich genommen wäre natürlich nur ein erster Schritt – denn bei 1680 x 1050 Vollbildfenster mag das noch halbwegs gut aussehen, bei größeren Bildschirmen und somit höheren Auflösungen, z.B. 1980 x 1200, dürfte das Design indes eher dem sprichwörtlichen “Strich in der Landschaft” ähneln.
Ich habe dennoch mal testweise den CSS-Code in Firebug verändert und es sieht in der Tat besser aus. Warum übrigens die einzelnen Seitenbereiche absolut positioniert sein müssen (mit Z-Index et all), ist mir nicht klar, denn normale relative Positionierung funktioniert, zumindest im Firefox wunderbar (und im IE, selbst in der 6er Horroredition, habe ich bei anderen Projekten keine Nachteile entdecken können, Elemente relativ statt absolut zu positionieren). Screenshot dazu:
CSS dazu (nur die von mir eingefügten / bearbeiteten Attribute):
#header {
…
position: relative;
margin: auto;
}
#container {
…
position: relative;
margin: auto;
top: 7px;
}
Interessant ist übrigens, dass die Website mit 1000 Pixeln Breite genauso gut aussieht, und eine Umbaute in prozentuale Werte auch recht fix funktionieren sollte (getestet mit 95% Breite). Der einzige Part, bei dem es hakt, sind bei letzterem Test die Hintergrundelemente, aber auch die könnte man mit gängigen Techniken wie etwa CSS Sliding Doors problemlos in Form bringen.
Es wirkt daher auf mich so, als wäre die Website tatsächlich ursprünglich auf Basis eines liquiden bzw. elastischem Layouts entstanden und dann erst nachträglich in das jetzt sichtbare starre 1024er Format gepfercht worden.
cu, w0lf.
Es gibt natürlich gute Gründe für eine Links-Ausrichtung von Websites. Ist halt „nur“ eine Designfrage und wird ist das hier gern von Entwickler-Talk plattgewalzt. Otl Aicher würde sich angesichts zentriert wandernder Logos und Contents zumindest im Grabe umdrehen ;-)
Überraschend gut und für mich bisher nur von iPhone und Android bekannt ist bei der Termin/Zeitauswahl (ich spreche von DVG-Auftritt) der Schiebe-Regler für Stunden und Minuten. Sehr schick – das sollten sämtliche andere Verkehrsbetriebe ebenfalls auf ihren Auftritt übernehmen.