heise.de im neuen Schmalbild-Design

Deutschlands größtes Nachrichtenportal für IT-News, heise.de erstrahlt seit heute in einem neuen Design. Als Positiv sind die hellen Farben und das endlich valide XHTML/CSS anzusehen (die bisherige tabellenbasierte Struktur war einfach nur peinlich für ein IT-Portal).

Negativ finde ich jedoch die feste Seitenbreite, und dass das ganze dann auch noch linksbündig ausgerichtet ist - dadurch befindet sich die Werbung bei höheren Auflösungen in der Mitte des Bildschirms! Laut Jürgen Kuri soll bald eine Vollbild-Version nachgereicht werden. Wer dies nicht erwarten kann (und Opera verwendet), kommt folgendermaßen schon heute zu einer solchen Ansicht:

  1. Die Datei heisecss.txt herunterladen und in 'heise.css' umbenennen
  2. heise.de aufrufen, Rechtsklick auf die Seite und 'Edit Site Preferences' auswählen
  3. Auf das Tab 'Display' wechseln
  4. Unter 'My style sheet' die heruntergeladene Datei auswählen
  5. 'OK' drücken und fertig

Die CSS-Datei überschreibt einige der vorgebenen Anweisungen, um die Seitenbreite auf 100% zu bringen (für den rechten Rand werden dabei 375px reserviert). Nebenbei entfernt es auch noch den Banner über der Seite.

Für Verbessungen bin ich jederzeit offen!

Update: Für Firefox gibt es eine ähnliche Lösung.

Update 2: Den Teaser stark zusammengefasst und einen Workaround für das von cycore beschriebene Problem eingebaut.

Update 3: Heise hat eine Reihe von Änderungen vorgenommen, welche die ursprünglichen Korrekturen obsolet werden lassen. Aber ein paar Kleinigkeiten gibts da doch noch, und deshalb hier meine heise2.css. Entfernt ein paar Werbebanner, reduziert den Platzverbrauch des Top-Teasers und macht besuchte Artikel in der Übersicht besser erkennbar.

Comments

danke - sehr nützlich!

Vielen Dank für die Erlösung der fixed-width-Seuche.
Leider passt das Stylesheet noch nicht ganz, siehe http://www.heise.de/mobil/newsticker/foren/S-Anruf-statt-Parkschein/foru...
Da wird der linke Rand abgeschnitten. Gibt es dafür auch eine Lösung?

Yeah! Grosse Sache! Funktioniert wunderbar, endlich wieder lesbare Newsmeldungen :D

Vielen Dank!

cycore: Ich hab für die Klasse 'forum_content' einen margin-left eingefügt. Damit klappt das nun auch. Danke für den Hinweis!

Vielen Dank für die 'heise.css'! :-) Dieses neue Design geht ja gar nicht... da ist Dein CSS echt die Rettung in der Not -- Danke, Danke, Danke! :-)

Eine kurze Frage noch: Hast Du vielleicht noch einen Tipp, wie man den Schriftgrad zusätzlich anpassen könnte? Der Schriftgrad des neuen Designs erscheint bei mir nämlich um einiges kleiner. Gerade behelfe ich mir bei Opera noch mit der Plus-Taste des Nummerblocks, um den Schriftgrad wieder anzuheben. Wäre aber fein, wenn das auch automatisch ginge. :-)

Vielen Dank! :-)

Das ist meine bisherige Anpassung - für Opera:

http://www.schriner.de/files/heise.css

Gefällt mir auch sehr gut. Allerdings hast du genau wie ich ein paar Probleme mit den vielen Floating-Elementen, z.B. auf http://www.heise.de/mobil/newsticker/foren/S-Anruf-statt-Parkschein/foru... oder den Seiten der iX.

Am besten wäre, wenn Heise eine ganz einfache, minimale Strukturierung der Seiten vorgeben würde und dann einen Wettbewerb um das beste CSS machen würde ;-)

Uah, jetzt meint heise wohl auf einmal, die Dringlichkeit aller Schlagzeilen durch Fettschrift hervorheben zu müssen... :P

Ich hab mich als CSS-Noob ein bisschen durch die CCS-Referenzen gewühlt und versucht, die Schrift wieder auf Normalschrift zu stellen - leider ohne Erfolg.

Hat jemand vielleicht eine Idee, wie das mit der Normalschrift hinzukriegen ist? Dafür (nochmals) schon mal vielen Dank! :)

Blizz: Die Schriftgrößen sind glücklicherweise alle relativ angegeben, daher ist eine globale Änderung sehr einfach.

Füg in die CSS-Datei die folgende Definition hinzu:

body {
font-size: 16px !important;
}

Welche font-size dir am besten gefällt, musst du einfach ausprobieren.

Sehr nervig, dass man das nun schon selbst "reparieren" muss... Schade, dass sich heiße so auf "stylish" tunen muss.

Edit Cybso: Ich hab mir erlaubt, deinen Link zu korrigieren - ob mit www oder ohne weiß man an dieser Uni nie ;-)

Vielen Dank für den Tipp mit der Schriftgröße, Cybso! Jetzt passt bei mir wieder alles. :-)

Ich hab eine neue CSS-Datei erstellt, welche das überarbeitete neue Layout nur noch geringfügig korrigiert (siehe Update 3). Darin gibts auch eine Anweisung, um die Fettschrift aus dem Topteaser zu entfernen (das '!important' ist der wichtige Zusatz, der dir möglicherweise fehlte. Er sagt aus, dass diese Anweisung nicht durch lokale Eigenschaften überschrieben werden kann). Kannst auch nur den Teil übernehmen, wenn du möchtest, aber ich hab seit gestern mit den ursprünglichen Modifikationen einige neue Probleme im Forum - scheinbar wurde dort umgebaut.