renephoenix.de

das neue Layout

Liebe Benutzer von Opera, FireFox, Mozilla und Co,

wie ihr seht, gibt es seit heute ein neues Layout. Ich hoffe, euch gefällt es. Falls es irgendwo noch kleine Schönheitsfehler gibt, so laßt es mich wissen. Ansonsten bin ich offen für weitere Vorschläge.

Liebe Benutzer des InternetExplorers,

wir ihr seht, gibt es heute kein neues Layout für euch. Euer Browser ist schlicht und ergreifend veraltet. Er kann die gängigen Standards (PNG, CSS), die mittlerweile fast 7 Jahre alt sind, nicht umsetzen.

Folgende Dingen beherrscht euer Browser einfach nicht:

  • Hover-Effekt (funktioniert beim IE nur auf das angesprochene Objekt, nicht aber auf die Kinder)
  • position:fixed; (festigt das Kopf und das Menu)
  • PNG mit Alpha-Kanal (halbtransparenz, Text schimmert unter dem Seitenkopf hervor)
  • negative Pixelabstände (left:-320px;)
  • Selektoren bei verschachtelten Tags (u.a. gezielter Einsatz der Bildnummer im Film)
  • :before / :after (Seitentitel, Bildnummer im Film, Kennzeichnung von Quelltext und Zitaten)
  • Attribut-bedingte Formate (sehr elegant beim Kalender)
  • min-height/max-height (in der Endfassung nicht mehr enthalten)
  • :first-child (das erste Element soll anders dargestellt werden, in dem Fall dieser Notizzettel)

Aber ihr habt natürlich die Möglichkeit, das neue Layout einmal zu betrachten.

Zwischen FireFox und Opera habe ich folgende Unterschiede festgestellt:

  • Bei Opera kann man ein :before um sich selber umbrechen. (»float«), geht bei Mozilla nicht. (sieht man)
  • FireFox reicht ein margin:auto, um daran auch bei position:absolute zentriert arbeiten zu können. Bei Opera funktioniert nur der Umweg über den prozentualen Außenabstand und der negativen Position.
  • FireFox beherrscht auch die Verwaltung mehrerer hover-Effekte auf einem Objekt. Das macht natürlich keinen Sinn, aber FireFox spielte mit, Opera nicht.

Zwei Screenshots aus der Bearbeitung:

Und mein Fazit zum Umbau: wenn man die Restriktionen des IE ausklammert, macht die Arbeit gleich doppelt so viel Spaß!

Bisherige Kommentare (21)

Kommentar von Pablo

Na ja, mir gefiel das alte besser... Das hat nicht so geruckelt beim scrollen. Aber technisch und designerisch ist das neue spitzenklasse.

Kommentar von René

Das mit dem Scrollen ist wahrhaftig ein Problem. Wahrscheinlich muß ich bei der variablen Transparenz doch ein paar Abstriche machen.

Kommentar von Phil

Ich finde das neue Design einfach hässlich.

Ich mag das braun nicht, ich mag die Navigation in Comic Sans nicht, ich mag die Verlagerung relevanter Inhalte in die Navigation nicht (Neue Beiträge/Kommentare/Trackbacks, Navigation, ...), ich mag das Druchscheinen des Inhalts durch den Header nicht (Gewollt? Opera 7.5), ich mag die Aufmachung als Filmstreifen in Verbindung mit der Farbgebubng nicht (zusätzlich kommt hinzu, dass ein Filmstreifen, wenn die Bilder »laufen« selber auch laufen muss --> die Löcher stehen aber still, wenn man im Content selber das Mausrad betätigt).

Das einzige, was ich mag, ist die Technik, die hier hinter steckt. Dafür ein dickes Lob. Für das Design aber ein Minus.

Just my two cents.

Kommentar von Pascal

Endlich mal was neues, gefällt mir ausgezeichnet.

Ach, lasst uns die IE-Nutzer doch vergessen, wer mit nem Dateibrowser surft, hat nichts besseres verdient :p

Kommentar von René

@Phil: diese Halbtransparenz ist gerade gewollt. Es ist als neues Feature gedacht. Und gerade das macht das Scrollen so schwer. Ich mache mir Gedanken, wie man das am sinnvollsten lösen kann.

zum Film: der scrollt mit. Opera scrollt allerdings mit 120 Pixeln, und genauso groß ist eine Sequenz in dem Film.

Zur Farbgebung: ich habe so lange einen Negativstreifen an den Bildschirm gehalten, bis etwa der Farbton übereinstimmte ;-)

zu ComicSans: ich wollte ne handschriftliche nehmen, aber da gibt es keine, die verläßlich überall drauf ist.

@Martin: in den Formularen gibt es noch kleine, unvalide Schnitzer. Und da würde das xhtml+xml sofort Crashs verursachen. Wenn der Fehler aber einmal beseitigt ist, werde ich diesen header setzen.

Kommentar von Matthias

Verdammt, jetzt bringst Du mich noch dazu, den IE zu benutzen :(
Ich finde das neue rein optisch auch nicht wirklich toll. Zwar ist es heller als das alte und benutzt viele tolle neue Techniken, doch wer braucht einen halbdurchsichtigen Header? Solange das beim Scrollen ruckelt benutze ich lieber den IE.
Und das alte Design fand' ich auch irgendwie übersichtlicher. Hier finde ich nichts mehr wieder

Kommentar von René

Wer Cookies nutzt, kann auch problemlos das alte Layout anschauen. Das ist nicht aus der Welt ...

Zur Übersichtlichkeit: ich wollte das ganze `aufräumen´. Das, was einst rechts war, liegt nun oben, die Struktur ist die gleiche.

Zu dem Scrollproblem mache ich mir Gedanken.

Kommentar von Matthias

> Wer Cookies nutzt, kann auch problemlos das alte Layout anschauen.
Guuuuuut. Aber die Benachrichtigung mit den neuen Kommentaren etc. klappt immer noch nicht richtig. Nach dem Lesen ist der Kommentar immer noch als neu deklariert

Kommentar von Martin

Ah, gut ^^ Das mit dem Content-Type habe ich auch gesagt, weil du wohl spätestens dann auch die Markup-Fehler bemerkt hättest ;-) Hat mir der Markup-Validator für Firefox (http://users.skynet.be/mgueury/mozilla/) ja sofort gezeigt. Kann man in den Kommentaren eigentlich irgendeine Art von Markup verwenden, um z. B. Links zu setzen?

Kommentar von René

@Matthias: diese Übersicht zeigt dir eigentlich nur an, was sich seit deinem letzten Besuch verändert hat. Es ist zumindest bisher nicht beabsichtigt, das diese beim Lesen entsprechend gebrandmarkt werden — aber es ist eine Idee.

@Martin: ein paar Grundelemente von HTML sind erlaubt. a, strong, em, ... dazu gibt es mal eine Übersicht, was möglich ist!

Kommentar von Matthias

> Also deine neue seite mit dem IE aufgerufen, schaut wirklich total witzig
> aus ;-)
Bei mir sieht sie mit dem IE genau wie vorher aus, also mit dem alten Layout!?!

@Rene: Ich dachte, das wäre aus den Foren übernommen aber mit Deiner Erklärung ist es logisch, dass sich die Anzeige dann beim Lesen natürlich nicht ändert.

Kommentar von Matthias

DARAUF bezog sich Marika, dass mus einem dummen wie mir ja gesagt werden ;D
Ich war nur direkt auf der »normalen« Seite, wo wie gesagt alles wie beim alten aussah.
Nur gut, dass man sich als Privatanwender so leicht aus der Affäre ziehen kann :)

Kommentar von Thiemo

Ich habe ein weiteres witziges Problem mit deinem neuen Design entdeckt: Wenn man auf langen Seiten mit den Bild-Tasten blättert, muss man immer wieder ein kleines Stück zurückblättern, weil das transparente Menü nicht in die Berechnung der Schrittweite mit einfließt (wie auch).

Kommentar von René

Das ist wahrhaftig ein kleiner unschöner Nebeneffekt ... aber effektiv wäre es ja ein Fehler im Browser (ich sage ja extra fixed und gebe Pixel dazu an)

Kommentar von René

zum Thema application/xhtml+xml: ich wollte es in einem anderen Projekt jetzt einsetzen. Das Werkzeug des Teufels bietet doch tatsächlich eine Downloadbox an ...

Kommentar von Marakesch alias Stefan the Bütte

>>Folgende Dingen beherrscht euer Browser einfach nicht:

>>    * Hover-Effekt (funktioniert beim IE nur auf das angesprochene Objekt, nicht aber auf die Kinder)

Hover geht unter IE auch nur bei Links.

>>    * PNG mit Alpha-Kanal (halbtransparenz, Text schimmert unter dem Seitenkopf hervor)

IE unterstützt keine 24 bit-png's, aber 8 bit schon. Wenn ich ein 24 bit-png mit halbtransparenz ime IE anzeigen lasse, dann nimmt er automatisch die Hinterfgrundfarbe. Mit Filter:Alpha für IE kann man das wieder ausgleichen.

>>    * negative Pixelabstände (left:-320px;)

Bei absoluter Positionierung hatte ich bisher kein Problem damit.

>>    * min-height/max-height (in der Endfassung nicht mehr enthalten)

Das war ein Hauptproblem meiner Seite. Dort musst Du den IE hacken. !important setzt der IE nur fehlerhaft um und nimmt automatisch den nächsten Wert -> height:100%;

min-height: 100%;
height:auto !important; /* moderne Browser */
height:100%; /* IE */

PS: Den Fehler mit dem Scrollen hab ich bei meiner ersten Seite auch gemacht. Die Addierung von Hinter- und Vordergrund bei Halbtransparenz brauch wohl zu viel Rechenleistung. Wenn du den Taskmanager aufmachst, siehst Du die Prozessorauslastung auf nahezu 100%, wenn Du schnell scrollst. Bei den lahmen Krücken der HTW-Labore ganz zu schweigen. Das ist die reinste Diashow. ;) Seitdem mache ich Halbtransparenz nur, wenn der Hinter- und Vordergrund beim scrollen auf gleicher Höhe bleibt.

Gruß,
Bütte

Kommentar verfassen

Freiwillige Angabe
Freiwillige Angabe
Der Text kann mit Textile formatiert werden, z.B. *fett* _kursiv_ "link":url. Wie das geht?
Wieviel ist 40 plus 2?

Bisherige Trackbacks (0)

Es wurde noch kein Trackback empfangen!