Zum Ende des Jahres erscheint das dt im neuen Gewand. Der letzte nennenswerte Relaunch fand im März 2010 statt. Es war an der Zeit, das Design Tagebuch oberflächlich aufzufrischen und, was mir besonders wichtig ist, die Technik im Hintergrund auf den neusten Stand zu bringen.
Die neue Umgebung ist nicht nur dank Responsive Design auf mobile Endgeräte abgestimmt, sie ist auch performanter. Damit jede Seite schnell lädt, werden auf dem Smartphone Bilder in entsprechend kleiner Größe ausgegeben, Stichwort progressive Verbesserung. Auf dem Desktop und auf Tablets kommen entsprechend größere Bilder zum Einsatz.
Sollte etwas wider erwarten nicht funktionieren, freue ich mich über jeden Kommentar und jede E-Mail. Damit wirklich alles passt, muss ich in den kommenden Tagen alle Artikel und Seiten händisch anpassen. Es wartet also nach dem Relaunch jede Menge Arbeit auf mich.
Wünsche weiterhin frohes Schaffen.
Ein sehr gelungener Relaunch (bezogen auf das, was ich bis jetzt entdecken konnte). Kleiner Schönheitsfehler: Bei den “mehr” Links ist nur der Text ein Link, nicht die Box an sich, was das Klicken etwas schwerer macht als gewohnt.
Falls man sich auch nach Weihnachten noch was wünschen darf: Eine laufende Nummerierung der Kommentare wäre hilfreich.
Hmm, es ist sicher ne Gewöhnungssache, mir persönlich wirkt das Gelb, was beim Mouse-Over der Artikeltitel erscheint zu grell – und das Datum unter den Artikeltitel wirkt für mich auch sehr blass.
Ansonsten bin ich gespannt wie es sich in Zukunft anfühlt. Freut mich auch, das weiter der Schritt zum Responsive Design aktualisiert wird.
Guten Rutsch, frohes Werkeln. Grüße.
Das Scrollen in der mobilen Ansicht (Android, Smartphone) wirkt sehr abgehackt. Das stört mich schon etwas, weil man sonst ja flüssiges Scrollen (Anschubsen und dann anhalten) gewohnt ist.
progressive enhancement hat erstmal gar nichts nichts mit responsive images zu tun.
HILFE!!! Das Design ist sehr schön und frisch,
ABER warum kann man bei den Bilder nicht vor und zurück, wenn man die Bilder anschaut. BITTE wieder wie vorher machen mit “vor” und “zurück” !!!!!!!!!!!!!
@Andi Hm ja. Ich hätte auch gerne nummerierte Kommentare. Da nun die Kommentare auf Seiten umbrechen (pagination), lässt sich eine durchgehende Nummerierung nur mit erheblichem Aufwand bewerkstelligen. Hier musste ich einfach Preis/Aufwand und Leistung abwägen, sodass ich die Nummerierung außen vor lassen musste. Tipps diesbezüglich sind sehr willkommen.
@NetzBlogR Das Ruckeln ist mir auch schon aufgefallen. Kommt auf die Todo-Liste. Danke.
@ascsvds Kommt drauf an, was Du unter „responsive images“ verstehst. Das dt ist nun jedenfalls progressive enhanced » kleinerer Ausgabebildschirm = kleinere Bilder (nicht nur optisch).
@Raphael L. Die Blätterfunktion ist nun wieder verfügbar. War auch so geplant.
Das dt-Logo wäre in Retina-Auflösung noch schön.
Ansonsten finde ich die Änderungen schön und zeitgemäß umgesetzt.
diese empfehlen-/twittern/+1 -buttons sehen bei vergrößerung extrem hässlich aus… lieber css statt grafik, oder? ;)
progressive enhancement und graceful degregation beziehen sich auf die das vorgehen beim dokumentenaufbau bezüglich des jeweils vom browser unterstütze featureset. das von der größe des viewport abhängige laden von bildern, hat mit progressive enhancement nichts zu tun. bitte demnächst besser recherchieren.
Geht absolut in Ordnung. Die Schrift in den Kommentarfeldern könnte noch einen Tick größer oder deren Laufweite angepasst werden. Ansonsten muss ich auch als starkes Gewohnheitstier neidlos anerkennen: Einer der wenigen Relaunchs, bei denen ich auf den ersten Blick nicht direkt denke “Oh bitte das alte Design”. Sehr einfach, sehr schlicht, auf das Wesentliche reduziert. Was auffällt sind eigentlich nur Kleinigkeiten und stark vom persönlichen Empfinden abhängig.
@ascsvds Doch. Hat es, zumindest in erweitertem Sinne. Bitte nicht ein paar Fachtermini wichtiger nehmen als die Sache, um die es geht. „responsive images“ kann ja nur eine Zwischenlösung hin zum „picture element“ sein, an dem das W3C derzeit arbeitet.
Haptik ist per Definition auch mit taktiler Wahrnehmung verknüpft, wird im Kontext von digitalen Anwendungen jedoch auch gerne verwendet. Wer mag, kann auch dies bewusst falsch verstehen und als schlechten Stil abkanzeln.
Das Umbrechen der Kommentare erschwert meiner Meinung das Nachvollziehen der kommentierten Kommentare bzw. das Verfolgen einer (längeren) Diskussion. Schlauer wäre es dann, wenn man direkt kommentieren könnte – ohne “@…”, woraus sich eine sichtbare Struktur ergibt (siehe welt.de).
Finde ich.
Ich finde die Bedienung der Mediengalerie innerhalb eines Beiträge (auch schon beim Design#3) immer so nervtötend, sodass ich eigentlich ganz selten mal auf ein weiteres Bild klicke. Durch das neuladen der Seite und das fehlen einer Medienübersicht ist die Anzeige nicht nur extrem langsam, auch die Übersicht insgesamt geht verloren – insgesamt demotiviert dies.
Ich finde das responsive Redesign zum größten Teil gelungen. Was mir beim schnellen Testen der Seite mit verschiedenen Geräten (MBP u. iPhone 5) auffiel ist, dass viele Grafiken noch nicht für Retina optimiert sind und dass die letzte Werbung ganz unten noch nicht an das responsive Design angepasst ist. Auch wenn ich dem Flat Design Trend nicht abgeneigt bin, würde ich mir bei den Eingabefeldern bei den Kommentaren ein klein wenig Tiefe wünschen. Auf dem Smartphone besitzen diese Felder nämlich etwas Tiefe (innerer Schatten).
Applaus!
Fehlt nur noch die DIN als Webfont.
;-)
PS.: Ich würde die ähnlichen Beiträge unter die Kommentare stellen.
Find ich soweit gelungen. Die Dropdowns würde ich aber nochmal strukturieren und vereinfachen. Wird man ja quasi erschlagen. “Ähnliche Beiträge” vllt. noch etwas kleiner oder hinter die Kommentare, neben der News sind mir die Kommentare mit das “Wichtigste” und die will ich schnell “sehen”.
(+) Guter Gesamteindruck
(-) Die Kommentare sind zu tief, teilweise sind diese genauso interessant (oder sogar interessanter) wie die Beiträge selbst.
(-) Die Eingabefelder könnten etwas mehr Kontrast vertragen
DANKE!
Finds gelungen! Schönes, leichtes Design! Bravo.
Aber auch ich muß sagen: “Ähnliche Beiträge” BITTE unter die Kommentare ;)
Fehlt nur noch eine dt-App :)
Sieht schön und vor allem klar strukturiert aus, dadurch erwachsener als das bisherige Design.
Mir ganz persönlich sind aber, wie auch einigen anderen, (in der Desktop Version) die Empfehlungen zu “ähnlichen Beiträgen” etwas zu dominant. Sprich der komplette Bereich zwischen eigentlichem Eintrag und den Kommentaren etwas zu groß und dadurch gerät meiner Meinung nach das Kommentarsystem etwas in den Hintergrund.
Hier das ganze mal grob markiert: https://www.chris87.de/DT14.jpg
Davon abgesehen aber super!
Ich muss gestehen das gefällt mir wirklich gar nicht. Hübscher finde ich ihn nicht, nur flach, fad und irgendwie grobschlächtig, klotzig. Mag ja sein, dass nun die Wurstfinger an ihren Tablets besser zurecht kommen, zumindest am großen Schirm ist das aber nicht das wahre.
Aber bitte, Achim muss es gefallen, ist ja sein Blog.
Soweit sehr schön geworden, nur die Schriftart ist unter Chrome/Windows extrem ausgefressen und fehlerhaft. Das sieht eher unschön aus.
@pat-design: Das liegt leider an Google itself. Die Google Webfonts sehen im Chrome leider sehr grottig aus. Man hätte eigentlich genau das Gegenteil erwartet ;)
Ich fasse mich ein wenig kurz, da der erste Kommentar flöten ging:
1. Bitte darauf hinweisen, dass E-Mail obligatorisch ist (zum Thema flöten gehen)
2. Bitte die Schrift ändern. Sie ist sehr schlecht lesbar unter Windows 7 und fast aktuellem Firefox.
Ansonsten: gut, funktional, reduziert wie bisher. Die Performance kommt mir auf den ersten Blick besser vor, das ist auch sehr gut. Nicht ganz klar war mir jedoch, wie ich über die Navigation auf die eigentlichen Beiträge komme.
Ich komme jedenfalls gerne weiterhin vorbei :-)
PS: zu Punkt 2: Sorry, sorry: hatte kein cleartype eingeschaltet, war an fremdem System. Jetzt ist es viel besser, wenn auch immer noch stellenweise mit kleinen “Störern” versehen.
Gefällt mir optisch ausgesprochen gut. Eine technische Frage: Gibt es einen Grund, warum die semantischen Elemente von HTML5 nicht verwendet werden (header, main etc.)? Das Dokument ist ja als HTML5 ausgewiesen.
Ich würde gern mal wissen, wie es bei Dir in PS ausschaut – ich glaube, da gibt es dezente Differenzen zur tatsächlichen Ansicht (Windows Chrome + IE #irgendwas). Des weiteren: Dass man sich jetzt durch die Kommentare durchklicken muss, stört mich dezent, das liegt aber eher an den spanischen Leitungen, die sind sehr langsam, weswegen ich immer warten muss. Die “Ähnlichen Beiträge” sehen aus wie Werbung und ich hab im ersten Moment gar nicht gecheckt, dass man darunter noch was findet – außer weitere Werbung, die ich wähnte.
Was mich aber schon seit Jahren (und zwar genau seit der Anzahl Jahren, in denen ich das dt gerne und häufig studiere, wobei ich letztens eher wenig kommentiert habe, was aber auf einem anderen Blatt steht) wahnsinnig stört ist diese Studio-54-“Wortmarke” oben links. Die ist wirklich wahnsinnig unsexy. Willst Du nicht mal einen Contest unter den dt-Usern veranstalten, das Ding mal neu zu machen?
Insofern: Schlechtes fällt immer zuerst auf, das Gute bemerkt man im Idealfall nicht! Und komm bitte gut ins neue Jahr!
[…] designtagebuch.de: Relaunch dt 04 # […]
Ich weiß nicht warum, aber mir “juckt” es in den Augen, weil das dt-Logo nicht mehr zentralisiert ist.
Gibt es eine Begründung für die linksbündige Positionierung des Logos und der Hauptnavigation?
Dem Wunsch von R::bert, CL, Christoper und Tobi komme ich gerne nach. Die ähnlichen Beiträge befinden sich nun UNTERHALB der Kommentare. Bislang war es zwar auch im alten Design umgekehrt, mit der Verwendung von Teaser-Bildern in diesem Modul änderte sich jedoch die Gewichtung, sodass ich die Kritik, Artikel und Kommentare würden auseinandergerissen, gut nachvollziehen kann.
Als neuer Standard-Font kommt hier im dt nun die FF Milo in den Schnitten regular und medium zum Einsatz. Beim Testen im Webfonter gefiel sie mir dann doch einen Tick besser als die DIN. Damit sollte auch die Darstellung unter Windows verbessert sein.
Auch wenn es dafür jetzt wahrscheinlich schon zu spät ist, die JAF Facit* von Tim Ahrens ist auch eine empfehlenswerte DIN-Alternative, welche sich gerade bei längeren Lesetexten deutlich besser macht. Enthält sogar ein gebogenes l und komplexes g wie die hier ursprünglich verwendete ASAP.
*https://justanotherfoundry.com/pdf/JAF_Facit.pdf
@Achim: Auf dem iPad springt die Navigation beim Scrollem/Ziehen mit dem Finger statt direkt mitzugehen wie beim Scrollen per Maus.
So ein Problem hatte ich neulich beim Programmieren einer fixen Navigation auch und keine bessere Lösung gefunden, daher die Frage: ist dir dieses Verhalten auch schon aufgefallen und wenn ja: gibts dafür keine bessere Umsetzung?
Insgesamt würde ich sagen, gefiel mir das alte Design optisch besser. Aber da das ja kein qualifizierter® Kommentar ist, hier lieber ein paar konstruktive Vorschläge bzw. Beobachtungen:
Leider hat die Tastaturbedienbarkeit unter dem Redesign gelitten.
In der Hauptnavigation bleiben beispielsweise alle Menüeinträge markiert (getestet in Firefox), wenn man sie nacheinander mit der Tastatur markiert:
Die Suchfunktion ist gar nicht über die Tastatur zu erreichen.
Die Übersichtlichkeit der Kommentare geht leider mit der Pagination verloren, so ist es nicht leicht möglich, sich einen Überblick über die Diskussion und Interaktionen zwischen den Nutzern zu verschaffen.
Noch eine Sache die Kommentare betreffend: Die alte Version hatte eine schöne Live-Preview-Funktion, diese hat nun keine Vorschaumöglichkeit mehr. Es wäre schön, wenn Du hier noch etwas nachbessern könntest :-)
P.S.:
Da die Meldung keine Möglichkeit zur Interaktion bot, musste ich den Zurückbutton des Browsers benutzen und meine Eingabe war verschwunden (vermutlich aufgrund von JS-Manipulationen, die die Seite an den Formularen vornimmt).
Ich schreibe diesen Beitrag nun zum zweiten Mal. Nach meinem ersten Versuch habe ich folgende Fehlermeldung bekommen:
@R::bert Mir ging es gar nicht mal um eine größtmögliche Nähe zur DIN. Gerade im Fließtext ist sie mir zu technisch, zu kalt. Und in den Überschriften darf es gerne eine individuelle Note haben. Hier gefallen mir das „R“, das „W“, das „a“ und das „g“ der FF Milo besonders gut.
@Jan Joah… das Nachziehen der Navi ist vielleicht nicht super elegant, störend ist es jedoch auch nicht. Ich habe mich mittlerweile dran gewöhnt.
@Philipp Zugegeben: Das Navigieren mittels Tastatur habe ich im Zuge des Relaunchs nicht sonderlich priorisiert. Dass die Suche nicht ansprechbar ist, kommt mit auf die Todo-Liste. Danke auch für den Hinweis bezüglich des Kommentierens. Die Formularfelder „Name“ und „E-Mail“ haben nun, wie auch schon von gernleser gewünscht, den Zusatz „Pflichtangabe“.
@Jan
Das mit der Navigation liegt daran, dass im mobilen Safari die Website beim scrollen nicht direkt gerendert wird. So wird z.B. das “onscroll”-Event nicht beim scrollen ausgelöst sondern eben erst, wenn die Seite wieder still steht. Dadurch entsteht dieser Sprung. Umgehen kann man das nur, indem man die Navigation entweder komplett fixiert oder garnicht. Eine andere Möglichkeit wäre noch über eine Javascript-Bibliothek wie z.B. iScroll das Scrolling künstlich nachzubilden, davon ist aber aus Performance- und Kompatibilitätsgründen (z.B. zu Android) und der “Künstlichkeit” des Nachbaus abzuraten, da es eben kein natives scrollen mehr ist.
Was mich jedoch noch bei der Navigation stört ist, dass sie beim scrollen bereits halb verschwunden ist, dann aber nach doch noch oben fixiert ist. Da scheint irgendwas mit der Rechnung der Position nicht zu stimmen. Es scheint mir so zu sein, dass die Höhe der Navigation nicht mitgerechnet wird.
Ansonsten empfinde ich das Design als sehr schick, das mit den “Ähnlichen Beiträgen” wurde ja bereits angesprochen&behoben.
Find den Relaunch insgesamt ganz gut, was ich aber bis dahin eindeutig besser fand, ist die Anzeige aller Kommentare ohne Seitenwechselfunktion: weiter scrollen ist doch definitiv besser als klicken. Wenn man es bei der Paginierung lässt, sollte aber auf jeden Fall der Pagebrowser auch über den Kommentaren stehen. Gestern las ich an zweiter Stelle in den Kommentaren eine Replik von Dir, Achim, auf einen anderen Kommentar – allerdings nicht den drüberstehenden und hab mich gewundert wo der abgeblieben ist. Erst unten habe ich dann gerafft, dass die Kommentare mittlerweile auf mehr Seiten untergebracht sind. Auch zum Zurückblättern muss man dann aber eigens nach unten gehen, was im erwähnten Fall irgendwie unkomfortabel ist.
@Stefan Deinen Vorschlag, die Seitennavigation auch oberhalb der Kommentare zu setzen, habe ich gerne aufgenommen. Ein guter Einwand! Dank Dir.
Das Umbrechen der Kommentare auf Seiten ist vor allem ein Maßnahme zur Verringerung der Datenlast. Je größer die Anzahl an Kommentaren pro Seite, umso mehr gleichzeitiger Datenbankabfragen gibt es. Jeder Kommentar bedeutet bis zu 4 gleichzeitige Datenbankzugriffe (Name, Datum, Text, URL,). Bei 50 Kommentaren gibt es pro Besucher also allein aufgrund der Darstellung der Kommentare bis zu 200 Datenbankabfragen. In der Vergangenheit kam es immer wieder zu Serverüberlastungen. Mit dem Umbrechen der Kommentare auf mehrere Seiten möchte ich diesen Ausfällen gerne vorbeugen. Darüber hinaus gebe ich zu bedenken: Nicht wenige Leser interessieren sich nicht oder nur kaum für die Kommentare.
@Achim: Bist du sicher, dass es diese DB-Requests wirklich gibt? Du hast doch sicher irgendeine Art von Cache, sei es bei WordPress oder sei es als Reverse Proxy … dann gibt es diese Datenbankabfragen ja gar nicht :-)
@Philipp Seit etwa 3 Monaten ist das Plugin W3 Total Cache im Einsatz. Seitdem gab es keinen Serverausfall mehr. Toi, toi, toi.
Meines Wissens wird der Inhalt aus dem Cache geladen, solang die Website unverändert ist. Kommt ein neuer Artikel oder ein neuer Kommentar hinzu, erfolgt der Zugriff direkt auf die jeweiligen Tabellen der Datenbank.
@web: vielen Dank für den kleinen Exkurs! Ärgerlich dass es dafür keine elegantere Lösung gibt, bei den nativen Apps ist die Erfahrung eben angenehmer, da es dort nicht zur Verzögerung kommt.
@Achim: danke für die Antwort. Finde den Relaunch unabhängig von diesem grundsätzlichen iPad-Problem sehr gelungen. Glückwunsch!
@Achim: Dann brauchst du dir ja wegen der zusätzlichen Datenbankabfragen keine Sorgen machen, denn die werden ja nur ein einziges Mal gemacht, nämlich wenn der Cache erstellt wird. Ich würde außerdem davon ausgehen, dass unabhängig von der Anzahl der Kommentare nur eine Datenbankabfrage gemacht wird. Üblicherweise würde ein CMS, das wie WordPress eine relationale Datenbank verwendet, nur eine Abfrage stellen, um alle Kommentare, die zu einem bestimmten Eintrag gehören.
Für E-Mail, Name, Text, etc. müssen übrigens ohnehin nicht mehrere Abfragen gemacht werden, da die ja alle zusammen in einer Tabelle [1] liegen und deren Inhalte üblicherweise spaltenweise abgefragt werden, sodass man diese Daten gleich alle zusammen bekommt :-)
[1] https://codex.wordpress.org/Database_Description#Table:_wp_comments
Ich finde das Redesign soweit “ganz okay”, mehr aber nicht. Dies liegt aber auch daran, dass ich die Seite fast nur aufm Desktop lese und mir deswegen eine mobiltaugliche Version nie wichtig war (wobei es schon komisch war, dass es sie nicht gab).
Ich habe die alte Seite nicht so gut im Kopf, dass ich jetzt Stück für Stück alles auseinander nehmen kann was sich geändert hat – vielleicht kannst du ja wie auch bei anderen Relaunches ein Vorher-Nachher-Vergleich reinstellen?
Schade finde ich, dass fast der gesamte Content in schwarz-grau-weiß auftritt. Das dunklere Grau im Hintergrund und die gefühlt häufigere Verwendung von Rot als Kontrastfarbe wirkten ausgewogener und weniger angestrengt sachlich. Dazu passend: Das Suchfeld habe ich erst auf den zweiten Blick erkannt, empfinde ich als deutlich zu dezent und verstehe auch nicht warum die Textfelder von Kommentar und Suche nicht konsistent sind.
Nicht umsonst zeichnest du alle Jahre wieder besonders lesenswerte Kommentare aus – du kannst es dir wegen der Qualität der meisten Diskussionsbeiträge hier “leisten” (bzw. du bist in der glücklichen Position überhaupt so eine Auswahl treffen zu können). Und deswegen interessieren sich (Theoriefindung) auch überdurchschnttlich viele Leser für Kommentare. Die Pagination macht selbst aus so übersichtlichen Diskussionen wie dieser hier eine Qual. Ich glaube auch nicht, dass dies bei WordPress eine wirkliche Reduktion der Datenbankabfragen bringt.
Nachtrag: Das mobile Menü funktioniert im Desktop-Chrome nicht (schmales Fenster) und das Such-Icon scheint nicht richtig ausgerichtet zu sein (sowohl Desktop- als auch auf Handy-Chrome).
Vielen Dank für weitere Rückmeldungen!
Die Kommentare werden nunmehr in 20er Einheiten umgebrochen statt in 10er. Ich denke, das ist ein guter Kompromiss.
[…] Relaunch dt 04 | Design Tagebuch – Selten steht es selbst im Mittelpunkt, aber wenn sich das Design Tagebuch ein neues Outfit gibt, dann steppt in den Kommentaren schon mal der Bär. […]
Zur Kommentarnummerierung: Gibt es eine Möglichkeit, die Seitenzahl auszulesen, auf der sich der Kommentar befindet? Dann könnte man (vielleicht mithilfe von >ol<) eine Kombi-Nummer bilden à la #2-07 = Seite 2, Kommentar 7. Gut, natürlich kann man auch Datum und Uhrzeit verwenden, um sich auf einen Vorgänger-Kommentar zu beziehen.
Sehr schöne Überarbeitung des Designs, danke für die Verschiebung der weiteren Artikel ans Ende, wunderbare Schriftwahl (evtl. im Kommentarfeld noch etwas größer?).
Was hältst du von der Idee, dein Logo in der fixierten Navigation anzuzeigen? https://webkrauts.de/ macht das sehr schön.
Beim Kommentarfeld fehlt mir noch der Hinweis, wie/ob ich den Text formatieren kann. Also klappt *fett*, _kursiv_, +unterstrichen+ und wie füge ich einen verlinkten Begriff ein?
[Edit: Gut, Formatierungen klappen nicht, aber ich kann meinen Kommentar nachträglich bearbeiten, prima!]
[Edit2: Wie abonniere ich nachfolgende Kommentare?]
[Edit3: Oh, mein Beispiel-HTML-Tag wurde verschluckt. Kann ich vielleicht mit HTML formatieren?
@Gerhard: Viel zu kompliziert, CSS bietet selbst sie Möglichkeit eine Nummerierung zu jedem beliebigen Element hinzuzufügen und die Zählweise anzupassen. Alternativ einfach auf Serverseite zählen wäre noch einfacher…
@Achim Schaffrinna
Sehr herzlichen Danke so machts, doch wieder Spaß :D
So, nach einigen Versuchen habe ich es nun doch noch geschafft, fortlaufende Nummern für Kommentare auszugeben! Anon, mit CSS bzw. den Listen-Attributen kommt man in diesem Fall, da die Kommentare auf mehrere Seiten umbrechen allerdings nicht weiter. In diesem Fall wurde nun die comments.php-Datei um ein paar Code-Zeilen ergänzt.
@Gerhard Dank Dir für die Vorschläge. Einen Feed speziell für nachfolgende Kommentare gibt es nicht. Den allgemeinen Kommentar-Feed findest Du unter https://www.designtagebuch.de/comments/feed/
Das mit der HTML-Formatierung schaue ich mir gleich einmal an.
Ein animiertes Logo im Header, wie bei Webkrauts oder etwa bei t3n, ist das letzte, was ich hier sehen möchte. Sorry, aber ich finde es ganz furchtbar, weil aufdringlich.
Der Text im Kommentarfeld ist nun eine Spur größer.
Diese HTML-Formatierungen können verwendet werden:
strong
fett / b
kursiv / i
Bild einfügen per img src
@Achim (#49 ☺): Danke für die Nummerierung und die größere Kommentarschrift.
Wegen des Logos: Mir ging es dabei nicht um die Animation (da kann ich deine Abneigung sehr gut nachvollziehen), sondern um die Sichtbarkeit. Allerdings ist das Favicon ja dauerhaft im Blick und Über-Branding ist auch nicht schön.
Vielleicht magst du unter das Kommentarfeld noch etwas schreiben à la:
Formatierung: <b>fett</b>, <i>kursiv</i>, <blockquote>Zitat</blockquote>
Bilder: <img src=”link-zum-bild.jpg”>
Leider bekommt man keine Rückmeldung mehr, wenn der eigene Kommentar in die Moderationswarteschlange geschickt wird. Ich meine früher wurde der Kommentar zwar angezeigt aber es stand drüber: “Dein Kommentar muss erst freigeschaltet werden.”
Nun hat man Angst, dass der Kommentar verschwunden ist und erst beim zweiten Abschicken kommt: “Doppelter Kommentar wurde entdeckt. Es sieht stark danach aus, dass du das schon einmal gesagt hast!” Die Möglichkeit den eigenen Kommentar nachträglich zu bearbeiten entfällt damit natürlich auch…
Danke Anon für Deinen Vorschlag. Der Hinweis erscheint nun wieder.
Hallo Achim,
Glückwunsch zum Relaunch. Ist immer eine Menge Arbeit, um letztendlich die gleichen Inhalte in neuer Verpackung zu präsentieren. Mir gefällt das Design insgesamt recht gut, allerdings fallen mir aus Usability-Sicht ein paar Kleinigkeiten auf:
– Suche: Warum muss ich erst auf die Lupe klicken und komme dann in das Suchfeld? Das ist aus meiner Sicht ein Klick zu viel. Ich würde entweder auf die Suche komplett verzichten (da hast du bessere Zahlen, was deren Nutzung betrifft) oder direkt das Suchfeld in die sticky Navigation einbinden.
– Angeschnittene Teaser-Bilder auf der Übersichtsseite: Hier besteht aus meiner Sicht immer die Gefahr, dass (insbesondere) Logos unschön angeschnitten werden. Ein gutes Beispiel hierfür ist das Logo von “Swiss Re” (wird in der Übersicht nur als “Swiss R” dargestellt.
– Kontraste: Mir sind die Kontraste zu schwach. Beispielsweise der “Kommentar absenden” Button, auf den ich gleich klicken werde, ist mit weiß auf grau doch recht unscheinbar. Das betrifft auch die Abgrenzung der Werbeflächen, die Breadcrump und die Tags im Footer…
– SEO-Links: Ich weiß, dass sich auch ein Blog irgendwie finanzieren muss; aber müssen diese doch sehr (bezahlten?) offensichtlichen SEO-Links im Footer sein? Klar, möchte ich auch mal “günstig Urlaub buchen” oder “Weihnachtsdekoration” kaufen. Aber was interessiert mich der “Fast Trading Marketplace” DHGate? Meine Empfehlung: Raus damit, bevor Google auf den Trichter kommt und designtagebuch.de in die Sandbox packt…
Trotzdem: Danke für diesen tollen Blog und ich freue mich auf weitere spannende Beiträge…
Matthias
Hallo Matthias,
hab herzlichen Dank für Deinen ausführlichen Kommentar!
Dass bei der Suche nun ein Klick mehr erforderlich ist, stimmt so nicht ganz, denn nach Eingabe des Suchbegriffs erscheint dank Ajax direkt ein Suchvorschlag. Somit erübrigt sich in vielen Fällen der Mehrklick. Sofern man diesen tätigt, ist es in der Tat ein Klick mehr als bislang.
Angeschnittene Teaser-Bilder stören mich auch, sind aber letztendlich lediglich ein kleiner Schönheitsmakel, der der automatischen Verkleinerung von Bildern geschuldet ist und die ich in Kauf nehme. Tatsächlich statte ich gerade die meisten der über 1.800 Artikel nachträglich mit einem solchen Teaser-Bild aus, da die Funktion im dt neu ist und in der Vergangenheit beim Publizieren nicht berücksichtigt wurde. Du siehst also, ein angeschnittenes Teaser-Bild ist (für mich derzeit) noch das geringste Problem. Hier muss ich einfach den Aufwand im Auge behalten.
Der Kontrast bei den Schaltflächen ist recht gering, das ist richtig, meiner Meinung ist er jedoch ausreichend, schließlich ist durch die Nähe zum jeweiligen Feld eindeutig, welche Funktion damit verbunden ist. Zugegeben: das ist zum Teil auch so eine Geschmackssache, bei der man gerne anderer Meinung sein kann. Ich mags so wie es ist.
Die SEO-Links befanden sich bislang in der rechten Spalte, nun sitzen sie im Footer. Offen gesagt „stören“ sie überall, aber wie Du schon festgestellt hast: ohne Einnahmen kein dt. Entscheidender als Google ist, dass es Kunden gibt, die für derlei Links zahlen. Wüsste nicht, wo sie sonst hin sollten.
Mir gefällt die Seite echt gut so, allerdings hätte ich einen Kritikpunkt:
Auf der Startseite lässt sich unterhalb der Teaser immer nur das Wort “mehr” der Buttons anklicken, die farbige Fläche ist nur Deko.
Hier fände ich es besser, wenn die Fläche ebenfalls, ähnlich wie bei der Pagination, auswählbar wäre. Das ermöglicht nicht nur ein schnelleres zielen, sondern ist auch für mobile Endgeräte hilfreicher. :)
Auf Grund der langsamen Abarbeitung meiner/der vielen (nach den Feiertagen) RSS-Feeds erst heute entdeckt: Sehr gelungene Weiterentwicklung!
Habe die CSS-Klassen bei den „mehr“-Buttons angepasst, sodass nun auch die Fläche selbst verlinkt ist. Bist nicht der einzige gewesen, Markus, dem das negativ aufgefallen ist.
Herzlichen Dank für die Rückmeldungen.
Was mir beim Lesen gerade auffällt: Navigationsleiste geht mit – das ist ganz schick. Aber genau der Link, den ich vielleicht am meisten brauche, wenn ich am Ende eines Artikel bzw. der Kommentare angelangt bin, liegt nicht in der Navigationsleiste: nämlich der Link zur Startseite. Da muss ich wieder hoch zum Logo scrollen (wenn ich nicht die Zurück-Funktion des Browsers benutze). Oder sehe ich da was falsch?
Außerdem wird mir im Artikel zum neuen Logo der Stadtwerkeesen kein Kommentarformular unter dem Artikel angezeigt. Oder seh ich es einfach nicht?
Danke Stefan. Warum auch immer – die Kommentarfunktion war beim Beitrag „Stadtwerke Essen“ deaktiviert. Jetzt gehts wieder.
Und ich dachte… na… für die Stadtwerke Essen interessiert sich keiner ;-)
Es ist richtig. Sobald man scrollt, verschwindet das Logo und damit auch der Link zur Startseite aus dem sichtbaren Bereich. Hab da jetzt spontan keine Lösung für parat. Ginge sicherlich noch eleganter. Mit einer Scrollbewegung erscheint das Logo allerdings wieder, weshalb ich es an dieser Stelle mit der aktuellen Lösung gut sein lassen werde.
Falls es noch nicht erwähnt wurde: Auf Touch-Devices lassen sich die Oberseiten der Menüpunkte (Design Tagebuch, Themen, Lesetipps etc.) nicht aufrufen. Ein Tap öffnet/schließt hier nur das Dropdown.
Danke Hendrik. Das Problem ist mir bekannt. Komischerweise lassen sich die jeweiligen Seiten auf dem iPad im neuen Tab öffnen, nicht jedoch direkt. Muss ich mir die Tage noch einmal anschauen.
@Achim: Das ist so komisch nicht. “In neuem Tab öffnen” rufst du ja über einen lange gehaltenen Tap auf das Menüelement auf. Das entspricht einem Rechtsklick auf dem Desktop. Das Problem ist Folgendes: Auf dem Desktop wird das Dropdown per Mouseover geöffnet. Ein Mouseover-Event gibt es auf Touch-Geräten aber natürlich nicht, deshalb fängt dein Menü-Script dort den “Linksklick” (kurzer Tap) ab, um das Menü zu öffnen. Soweit, so gut. Damit man auf Touch-Geräten trotzdem an die Oberseiten kommst, müsstest du sie dort z.B. als zusätzlichen Menüpunkt im Dropdown hinzufügen.
Na ja es gibt natürlich schon Navigationslösungen, bei denen der erste Touch ein Dropdown öffnet, um nach einem zweiten Touch auf das gleiche Element auf die jeweilige Seite zu leiten, etwa wie bei ap.org. Ist halt eine Frage, welches Konzept man dem Vorzug gibt. Einen zusätzlichen Menüpunkt im Dropdown braucht es da nicht.
Klar, nur bisher schließt der zweite Tap ja den Dropdown wieder. Das Schließen müsstest du dann anders lösen – z.B. bei Tap außerhalb der Navigation. Ist letztlich immer ein Kompromiss.
Eins ist mir noch negativ aufgefallen:
Wenn man einen Kommentar bearbeiten möchte, ist die Editor-Box teils zerschossen und fügt sich überhaupt nicht ins Design ein.
Wenn man auf “Update” drückt wird zwar ein Update durchgeführt, allerdings muss man die Seite erneut laden damit die Änderung sichtbar wird. Besteht hier nicht die Möglichkeit die Seite automatisch zu refreshen oder das Update via Ajax durchzuführen?
Danke Markus. Zumindest optisch schauts nun etwas besser aus. Um die Änderungen sehen zu können, ist allerdings auch weiterhin ein Reload erforderlich.
[…] ich Ende letzten Jahres dem dt ein neues Interface verpasst hatte und es hier einen Relaunch gab, folgt einige Monate später die nächste Modernisierungsmaßnahme. Die Technik im Hintergrund […]