Skip to content

Die neue Berliner Morgenpost

Berliner Morgenpost Relaunch

Die Berliner Morgenpost hat ihren Webauftritt einem Relaunch unterzogen und widersteht dabei dem Trend sich im Internet mit ONLINE-Anhängsel zu präsentieren. Besser noch – auf den bislang sehr dezent geführten de-Zusatz hat man sogar komplett verzichtet. Aufgrund dieses Einklangs in Bezug auf die Markenführung hat der Auftritt sofort einen Stein bei mir im Brett. Und es gibt weiteres Positives zu berichten.

Aufbau

Der Auftritt geht etwas in die Breite und hat statt 765 nun 830 Pixel. Platz für Werbung ist nach wie vor reichlich vorhanden. Gut, der Aufbau kann nicht wirklich überraschen. Das Zweispaltenprinzip samt horizontaler Navigationsleiste scheint im Nachrichtensegment fast schon gesetzt. Echte Freiheiten gibt es in in diesem aktuell sehr verbreiteten Nachrichtenkorsett offenkundig nur wenige als da wären das Farbkonzept, der Umgang mit Schriften, dem Linien- und Rahmenstil um Teaser von einander abzusetzen, sowie der Position und die Größe der Bilder.

Die Topnews erhält ein großzügig bemessenes Panoramaformat. Das kennt der Surfer von Spiegel ONLINE oder Sueddeutsche.de. Auch in der rechten Spalte findet sich ein horizontales Bildformat. Das gefällt.

Navigation

Die Position innerhalb des Auftritts wird sowohl in der Hauptnavigation, als auch im Brotkrumenpfad akkurat abgebildet. Grün ist weiterhin die primäre Link-Farbe. Neu hinzugekommen ist Rot in den verlinkten Titel der Artikel im Content. Nicht verlinkter Fließtext ist schwarz. Sehr konsequent hat man den Unterstrich als Rollover bei nahezu allen verlinkten Texten hinterlegt. Es findet sich jeder zurecht. Selbst die Aufbereitung des Suchergebnisses ist sehr gut.

Design

Zu den “Freiheiten” gehört unter anderem auch der Umgang mit dem Header, der neu geordnet wurde. Das Suchfeld rückt noch stärker in den Fokus. Das Logo ist im Vergleich zum Vorgänger verkleinert worden. Schade, denn gerade die vom Namen eingeschlossene Quadriga wirkt umso mehr, je größer sie abgebildet wird. Sehr gerne hätte ich das Logo zentriert im Header gesehen, die Suche und die Anzeigenmärkte rechts und links davon. Letztgenannte sitzen nun in einem brauen Balken oberhalb des Logos. Die Navigationsbalken wurden mit (altem) Apple’schen Verlauf ausgestattet. Wer will es den Machern mit Blick auf die Tristesse des Vorgängers verübeln, wenn man sich nun ein etwas modischeres Gewand überstreift.

Fazit

Schöner und aufgeräumter wenngleich auch ein wenig kompatibler. Wer sich umschaut findet ab und an noch einen Bug, aber die Kinderkrankheiten kennt jeder. In jedem Fall eine Verbesserung. In Bezug auf die medienübergreifende einheitliche Namensführung eine sehr angenehme Gegenbewegung zu mach anderen (ONLINE)Nachrichtenportalen.

Dieser Beitrag hat 15 Kommentare

  1. Relaunch und trotzdem 72 Fehler. Was treibt die Leute dazu, es einfach nicht zu schaffen, validierende Seiten zu erstellen? Erzähl mir keiner, dass es nicht ginge, das ist falsch und unprofessionell.
    Neben den Fehlern an sich ist es auch sehr trübselig, dass man es nicht geschafft hat, eine Titelvergabe der Links zu erstellen. Google, anyone?
    Access-Keys? Fehlanzeige … Eingeschränkte Menschen, die auf Hilfsmittel angewiesen sind, werden das „zu schätzen“ wissen.
    Randnotizen: Listen-Elemente verkommen zu Leeraum-Erzeugern. Viel zu viel Inline-Javascript. Stichwort Unoptrusive Javascript. Hierarchie der Überschriften Blödsinn. Startseite zählt 390 divs – beachtlich oder stümperhaft?

    Freilich, optisch macht die Seite etwas her. Wirkt schlicht und elegant. Die Spaltenbreite ist angenehm und vergrault den Leser nicht. Links sind insgesamt allerdings zu Kontrastarm zum normalen Lesetext und können leicht übersehen werden. Warum wurde die Unterstreichung der Links weggelassen?

    Sehr witzig fand ich diesen Kommentar und die Antwort darauf:

    Frage: Dietrich Steinbeck: Wie komme ich jetzt in Ihr Archiv?
    Antwort: Über die Suche rechts oben am Kopf der Homepage. Oder über diesen Link.

    Usability? Warum nicht einfach ein Link im Menü mit der Aufschrift „Archiv“ …?

  2. Welcher “normale” User schaut schon auf die Validierungsfehler? Sind außerdem “nur” fehlende End-Tags bei img und br und alt- und type-Attribute in Massen. Also nichts was den Ottonormaluser verschreckt. Gibt es eigentlich ein Add-on, dass den Firefox nur valide Seiten anzeigen lässt? :)

    Designtechnisch gibts aber meiner Meinung nach auch nict viel zu sagen, man sieht, dass man “sowas wie Spiegel” wollte und bekommen hat. Solide, aber eben schon mal gesehen.

  3. Kann mich dem nur anschliessen. Eine sehr gelungene Auffrischung. Spiegel in grün, auch das wird schnell klar. Ohne die Finesse Ajax wie spiegel.de oder kicker.de aber ok. Dazu kommen handwerkliche Fehler. Die Wichtigkeit der Validierung für den Normal-User hin oder her, die Fehler lassen auf handwerkliche Mängel schliessen. Da trifft HTML 4.0 auf XHTML transitional. Eine kurze Schulung würde den Erstellern helfen.

    “Schade, denn gerade die vom Namen eingeschlossene Quadriga wirkt umso mehr, je größer sie abgebildet wird. Sehr gerne hätte ich das Logo zentriert im Header gesehen, die Suche und die Anzeigenmärkte rechts und links davon. ”

    Wie soll das vom Platz her gehen bitte schön? Die Suche dann weiterhin rechts und links mit Werbung vor dem Logo beginnen. Ich denke nicht! Der Header ist auch mit dem Logo links harmonisch im Grid und handwerklich korrekt eingebaut. Amtlich sozusagen, mich wundert der Vorschlag echt.

    “Die Navigationsbalken wurden mit (altem) Apple’schen Verlauf ausgestattet.”

    Ein ganz normaler glossy-Verlauf, da hatte Apple früher (vor Juni 2007) keine Aktie drin und heute macht man es für gewöhnlich seidiger sanfter (silky smooth) wie auch https://www.kicker.de (vorbildlich da schon 2006 in dem Look) oder https://www.bbc.co.uk/ z.B.

  4. Wie soll das vom Platz her gehen bitte schön?

    So in etwa: Alternativer Morgenpost Header
    In diesem Aufbau wird zudem deutlich, wozu man sich “Anmelden” und “Registrieren” soll. Nicht etwa zum Anzeigenmarkt, wie es der aktuelle Aufbau suggeriert, sondern zum “Meine BM”-Bereich. Außerdem sind die Links in der oberen Meta-Leiste vereinheitlicht und grün angelegt. Der Braunton für Links des Anzeigenbereiches bleibt erhalten.
    Der Verzicht auf den braunen Balken lässt den Header nicht nur luftiger erscheinen, sondern das Logo wirkt zugleich von der Last über seinem Kopf befreit. Es ist auch nicht mehr zwischen zwei horizontalen Blöcken “gefangen”. Auch die Hauptnavigation im grünen Balken wird noch eindeutiger und leichter als solche erkannt, da es keine konkurrierenden Elemente mehr gibt.

    Ein ganz normaler glossy-Verlauf, da hatte Apple früher (vor Juni 2007) keine Aktie drin

    Aha…soso… hier die Navigationsleiste aus 2002 und 2001

  5. Zum ersten: Das Suchfeld ist dort deutlich zu klein. Dieses widerum ist mit Rundung und Lupe 1zu1 Apple-esque. Mit Werbung oder Submenü in Leserichtung vor dem Logo anzufangen halte ich persönlich für einen gestalterischen Kardinalfehler. Sicher sieht deine Alternative so in der Voransicht sehr gelungen aus, sie fügt sich nur abolut nicht zum 2 Spalten 2/3-1/3 Layout der übrigen Seite. Beim Weglassen der braunen Leiste könnte ich mich dir anschliessen, aber so findet eine doch angenehme Trennung zu RSS Feed etc. statt.

    Zum Zweiten: Die Navigationsleiste war bis 2007 (Juni bei .com / Herbst bei .de) ja so. Die Tabs bei Apple sind dann doch ein wenig anders ausgearbeitet. Der Verlauf im oberen Beispiel ist auch so halbiert für den Aqua-glossy Look (gerade horizontal ohne Lichtkurve), das stimmt schon, dennoch ist nicht jeder glossy Look wie er etwa sehr dezent bei der Morgenpost eingebracht gleich eine ‘Apple copycat’ sondern schlichtweg modern. Da wäre kicker.de eher der ‘Vater der Idee’.

    Ich gebe dir da im Prinzip recht, doch finde ich schickt es sich nicht mehr einen Look der Gang und Gäbe wurde seit Jahren, der sogar ausgearbeitet wurde fernab des Apfel-Konzerns und eben von jenen erneut aufgegriffen wurde in seiner nächsten ‘Evolutionsstufe’, weiterhin als Apple Eigentum zu bezeichnen. Und ganz ehrlich, den alten Look von Apple würde niemand mehr kopieren wollen, den neuen wohl aber viele. Man beachte dieses Beispiel https://www.checkoutapp.com/

  6. Angesichts der öfter auftauchenden OSX-Style-Suchefelder frag ich euch: wie baut ihr eure Formular-Felder, die üblicherweise vom Browser-UI festgelegt werden, in einem grafischen Entwurf und macht dabei dem Kunden klar, dass diese Elemente browserabhängig sind?

  7. Nicht lachen, ist nichts neues: Browser UI kann man mit CSS überschreiben. Sind doch nur bedingt browserabhängig, das Apple Lupen Suchfeld kommt außer in hoffentlich bald aufgelösten Browsern wie IE6 (beim Store sogar da) doch überall relativ ähnlich rüber. Klarmachen muss man da also nur wenig, vielleicht eher, dass Lucida Grande nur auf Apple oder Windows Safari erscheint oder die Apple Schriftglättung generell besser ist.

  8. sie fügt sich nur abolut nicht zum 2 Spalten 2/3-1/3 Layout der übrigen Seite.

    Sie fügt sich ausgezeichnet in den bestehenden Aufbau. Es gibt doch keine Regel, die einem vorschreiben würde, ein Header ließe sich NUR analog der Spaltenanzahl aufbauen. Das erscheint mir zu starr und reglementiert. Was geschieht mit Portalen, die unterschiedliche Spaltenaufbauten fahren? Siehe N-TV. Meinetwegen sag: “Mir gefällts linksbündig lieber als zentriert” das ist zwar rein subjektiv aber zumindest ehrlich. Eine zentrierte Header-Anordnung jedoch mit einem Verweis auf die Spaltenanzahl im Content wegbügeln zu wollen, halte ich jedoch für wenig stichhaltig. Mir ist aber auch klar, dass hier jeder einen eigenen Geschmack entwickelt hat.

    Mit Werbung oder Submenü in Leserichtung vor dem Logo anzufangen halte ich persönlich für einen gestalterischen Kardinalfehler.

    Schöner wäre sicherlich ein gänzlich freier Header. So weit so gut. Insofern ist der Alternativentwurf eine Kompromisslösung. “Kardinalfehler” ist mir ein zu pauschales Urteil, zumal Du keine Begründung vorlegst. Klar ist, dass man ohne eine Prioritätenliste nicht weit kommt. Was kommt in den Header, was ist Teil der Metanavi, was kommt in die Hauptnavi und was steckt man in den Footer? Wenn ich das Projekt begleitet hätte, hätte ich es “verschmerzen können”, wenn vor dem Logo Links stünden. Wenn man im Gegenzug einen klaren Header erhält und auf den braunen Anzeigenbalken verzichten kann, ist das ein kleines Opfer.

    Da wäre kicker.de eher der ’Vater der Idee’.

    :-))) Nur mal angenommen kicker.de hätte tatsächlich noch vor Apple in seinem Auftritt einen Glossy-Effekt in der Navi gehabt, was nicht der Fall war aber nur mal angenommen. Du glaubst doch nicht wirklich, dass der Einfluss eines deutschen Sportportals so weit reichen würde, dass ihm weltweit zigtausende Webdesigner nacheinfern. Stillprägend ist hier Apple gewesen.

  9. “Sie fügt sich ausgezeichnet in den bestehenden Aufbau.”

    Ich gebe zu, man kann mit deinem Entwurf leben, das Suchfeld wie erwähnt bleibt aber zu klein und undominant. Starr und reglementiert halte ich auch für Unsinn, die ‘Reglementierung’ Logo links als erstes oben für aber auch für alles andere als so schlimm, als das man sich unbedingt davon befreien müsste. Gleiches gilt für die braune glossy-Leiste, die macht mir auch gar nicht so viel Angst, auch sie räumt auf wie gesagt. Natürlich sind das alles persönliche Einschätzungen, aber ebenso wie deine.

    “Gestalterischer Kardinalfehler” hatte den Zusatz persönlich, also auch das nicht persönlich nehmen :)

    “Du glaubst doch nicht wirklich, dass der Einfluss eines deutschen Sportportals so weit reichen würde, dass ihm weltweit zigtausende Webdesigner nacheinfern.”

    Mal abgesehen dass nichts dergleichen gesagt wurde die Gegenfrage: Du glaubst doch nicht wirklich dass der Navi-Leiste-Look von Apple 2001, den man schon spätestens 2005 belächelt hatte, zigtausend Webdesigner wie Lemminge blind nachgelaufen sind bis endlich 2007 die Next-Generation erscheint? Ich empfehle hierzu Dan Cederholms Bulletproof Webdesign von 2005 wo er ganz nebenbei erklärt, neben herausragenden Techniken, wie man geschickt seidige Verläufe baut. Nur am Rande und zum Thema stilprägend.

    Der kicker.de Verlauf im Menü ist nicht mittig geteilt, er geht ‘seidig’ / ‘silky’ Farbton in Farbton über die gesamte Höhe. Das war bei apple wie gesagt bis 2007 nie der Fall. Da war es mehr Aqua mit Metapher Glas denn glossy mit Metapher ‘Schimmerndes Gewebe’. Nagel mich nicht fest auf diese kunterbunten Vergleiche. Es bleibt: kicker.de ist näher an der Morgenpost als Apple 2001. Zusammenhänge oder auch ‘Vater-Verwandschaften’ (wie dick muss man Ironie noch auftragen?) in der Entscheidung der Gestaltung schließe ich hierbei völlig aus.

    Was ich gesagt habe und erneut betone: der Ur-Look von Apple aus 2001 wurde von vielen mehr oder minder freien Gestaltern über Jahre hinweg erweitert und wurde zu so etwas wie Zeitgeist, Apple hat 2007 wiederum ein Stück auf diesen Zeitgeist draufgesetzt, sich auch vieler gängiger Fortschritte bedient. Hervorragend und erneut stilprägend, keine Frage. Ich weigere mich nur den Aufwand dieser Bewegung von 2001-2007 allein auf apple zu reduzieren bzw. jeden Teilnehmer zu einer ‘Apple-copycat’ umzudeklarieren.

  10. Also ich finde Achims Entwurf für den Header deutlich besser. Der goldene Balken über dem Header erinnert stark an die Printausgabe, dort findet sich diese Farbe seit der letzten Umgestaltung sehr oft, Achims Entwurf ist jedoch quasi die Sahnehaube.

    Seit dem ich vor einigen Wochen auf meinen Arbeitssystem von Win auf Mac umgestiegen bin, stelle ich übrigens fest, dass ja so ziemlich jeder aktuelle Webdesign Trend von Apple abgekupfert wurde. Und zwar nicht nur der Glossy Look, ich erinnere da mal an die AJAX-Load GIFs. Die kannte ich so vorher nur aus AJAX Applikationen, nachdem ich mein MacBook gestartet hatte, wusste ich woher dieser Look kam (Schon witzig, dass ein so wenig verbreitetes OS so Stilprägend im Web ist).

    Aber davon mal abgesehen: Der Relaunch war dringend nötig, die alte Seite war einfach viel zu überladen. Auch wenn es Spiegel.de sehr ähnelt: Muss man das Rad immer neu erfinden?! Der Gestaltungsspielraum bei einem solchen Nachrichtenportal ist halt immer begrenzt.

    Die XHTML Fehler sind ärgerlich, aber wer daran eine gute Webseite ausmacht, ist wohl einfach ein pingeliger Perfektionist.
    Die 390 DIVs werden wohl vor allem auch am CMS ihre Ursache haben. Ohne mir den Quelltext angesehen zu haben, vermute ich, dass dieses für jeden Block und Artikel eine eigene ID anlegt. So ist das nun mal. Die 0,2 s verlängerte Renderzeit sind verschmerzlich.

  11. Ich verstehe nicht warum man immer noch diese horizontal ausgerichteten Navigationen baut. Das ist bei Spiegel auch nicht optimal gelöst. Mal ganz davon zu schweigen, dass es wohl bald einen Relaunch gibt. Zumindest wurde ich als treuer Spiegel Leser um ein bisschen Zeit für eine Umfrage gebeten. Da wurde erläutert, dass man das Design verändern möchte.

    Auch Studien belegen, dass linke vertikal verlaufende Navigationen beliebter sind. https://webkonzepter.de/blog/?p=9

    Woher habt ihr die ganzen Zahlen über das CSS etc.? Z.B. “390 divs”? Gibt es da ein Tool was ich noch nicht kenne?

Schreibe einen Kommentar

Die Netiquette ist zu beachten. Vor dem Hintergrund einer transparenten, sachlich-fairen Debatte wird die Nutzung eines Klarnamens empfohlen.

Folgende HTML-Elemente können verwendet werden: <b> <i> <img src="bildurl"> <a> <blockquote>

An den Anfang scrollen