102 Kilobytes, geht da noch was?

Wenn ich schon namentlich erwähnt werde, muss ich mich auch äußern.

tinypng.com hat yolo.png noch einmal rund 450 Bytes kleiner gemacht, das ist nicht viel, Kleinvieh macht aber auch Mist. In der Summe aller Grafiken kommen vielleicht ein-zwei kb zusammen.

Die ID #lang würde ich vom div auf den ul übertragen und den div rausnehmen.

<main> ist kein zweiter Body, so verwendest Du es aber. Statt der

Wow, also dein Input ist grundsätzlich immer bestens. Das ist ja tatsächlich einiges, was du gefunden hast. Nu kann ich wieder basteln. Vielen vielen Dank.

//E: Einiges konnte ich schon umsetzen, zu anderem hab ich noch fragen:

Matthes schrieb:

<main> ist kein zweiter Body, so verwendest Du es aber. Statt der

als Container für den Hauptinhalt solltest Du <main> nehmen, das wäre der richtige Verwendungszweck.

Aus dem Main mache ich quasi wieder einen div-da das semantisch korrekter wäre?

Matthes schrieb:

Die ID #lang würde ich vom div auf den ul übertragen und den div rausnehmen.

Das klingt super spannend, aber wie genau würdest du das machen? Wie würdest du den einzelnen Listenpunkt am schönsten klassifizieren?

Matthes schrieb:

(Btw: in Zeile 49 steht "nav a, span", gemeint ist aber sicher "nav span", oder?)

Das war so gewollt. Nav a und span sind dort gleichermaßen formatiert. "nav span" wird kurz danach noch einmal formatiert.

PS: Yehaw, 99,21kB !!!!!!!!!!!!

Xenotyp schrieb:
Wow, also dein Input ist grundsätzlich immer bestens. Das ist ja tatsächlich einiges, was du gefunden hast. Nu kann ich wieder basteln. Vielen vielen Dank.

Na, nicht zu viel Lob. Sonst werde ich noch #f00.

Xenotyp schrieb:
Aus dem Main mache ich quasi wieder einen div-da das semantisch korrekter wäre?

Genau. Obwohl es in meinen Augen ganz ohne umschließenden Container möglich wäre, so mache ich es lieber. Die Elemente muss man nicht umschließen, da nav und main als direkte Nachfolger des body völlig legitim sind und ausreichen. Du müsstest dann eben die Gestaltung des div auf nav und main verteilen.

Xenotyp schrieb:
Das klingt super spannend, aber wie genau würdest du das machen? Wie würdest du den einzelnen Listenpunkt am schönsten klassifizieren?

Wenn es ohnehin nur ein Listenpunkt ist, würde ich genaugenommen ganz auf eine Liste verzichten, den div weiterverwenden und Link mit Flagge direkt in den div aufnehmen.
Ansonsten ist der ul wie der umschließende div #lang ein normales Block-Objekt, d.h. Du kannst ihm alle Eigenschaften des div geben. Solange da kein anderer Inhalt hineinkommt, ist es unnötig, ul innerhalb des div zu verwenden.

Xenotyp schrieb:
Das war so gewollt. Nav a und span sind dort gleichermaßen formatiert. "nav span" wird kurz danach noch einmal formatiert.

Damit formatierst Du aber ausnahmslos alle span, auch die, die vielleicht irgendwann einmal im Text auftauchen. Da wäre beispielsweise weißer Text unpraktisch.

jpegmini.com holt aus dem zu einem jpeg konvertierten yolos.png noch einmal rund 2kb raus - und meinen gerade müden Augen fällt kein großer Unterschied auf.
Wenn Du die Fotos/Collagen als jpegs speicherst und den Zierrahmen als background-image eines umschließenden Elternelements integrierst, wären die drei Bilder rechts kleiner und der Rahmen müsste nur ein einziges Mal geladen werden. Das dürfte insgesamt zu einer geringeren Größe führen - allerdings zu einem weiteren Request, das müsste man abwägen.
Vielleicht den Rahmen ganz rausnehmen und den Bildern mit CSS3 Rahmen, Rundung und Schlagschatten verpassen?

Das media-Attribut des Stylesheets kannst Du auch noch entfernen, noch einmal 15 Zeichen weniger.

Für HTML brauchst Du übrigens für sogenannte void elements keinen abschließenden Slash. D.h. Du kannst sie bei img, link und Co. ebenfalls noch weglassen. Das macht in der Summe vielleicht auch noch einmal 20 Bytes aus.

tinypng.com verkleinert Dein favicon um satte 12 Bytes. Wenn sich das nicht bemerkbar macht, weiß ich auch nicht weiter.

Beim viewport-Meta kannst Du initial-scale=1 weglassen, weil Du width=device-width angibst, da skalieren die Browser ohnehin auf 100%.

Absätze innerhalb von

setzen ist semantisch korrekt und ist die sauberere Art, Abstände zu definieren. Zwei br hintereinander sind nicht schön. Allerdings ist die Lösung wahrscheinlich wieder größer, weil
(Slash kann wegfallen) nur vier Zeichen hat und die paragraphs wieder per CSS formatiert werden müssten - also lasse ich es nur als Kommentar zur Semantik stehen.

Jetzt gehe ich schlafen, gute Nacht!

Hi Xenotyp,
also ich denke schon, dass sich bei den Bildern noch was optimieren lässt.
Du hast die 3 Bilder in der Startseite als png eingebunden.
Als jpg eingebunden könntest Du jeweils ca 10 kb sparen - ohne dass ich große Unterschiede sehe - ich habs mal mit Deinen pngs probiert. Deine Bilder in der html haben zwar den abgerundeten schwarzen Rahmen, aber keine Transparenz - Bilderhintergrund weiss und Seitenhintergrund ist weiß)
Bräuchten sie Transparenz wäre png sinnvoll, aber sonst könntest Du mit jpg sparen.
Und die drei Bilder zu einem kombinieren, könnte requests reduzieren - was sich in Ladezeit bemerkbar macht - könnte jedoch von der Inhaltsoptimierung (SEO) nicht sinnvoll sein etc.
Grüße, Satyam

Matthes schrieb:

Na, nicht zu viel Lob. Sonst werde ich noch #f00.

Hexadezimal und verkürzt ausgedrückt, das muss ich mir merken.

Matthes schrieb:

Genau. Obwohl es in meinen Augen ganz ohne umschließenden Container möglich wäre, so mache ich es lieber. Die Elemente muss man nicht umschließen, da nav und main als direkte Nachfolger des body völlig legitim sind und ausreichen.

Ich glaube ich kann auf meinen jetzigen "Main-Container" nicht verzichten, wenn ich einen durchgehenden Schatten als Border erzeugen will. Es sei denn ich klemm die Navi irgendwie in den jetzigen Section-Container, das müsste ich mal ausprobieren. :]

Matthes schrieb:

Wenn es ohnehin nur ein Listenpunkt ist, würde ich genaugenommen ganz auf eine Liste verzichten, den div weiterverwenden und Link mit Flagge direkt in den div aufnehmen.

Die Liste wurde hier zugunsten des Hover verwendet. Teil einer Liste müsste die Flagge schon bleiben.

Matthes schrieb:

Vielleicht den Rahmen ganz rausnehmen und den Bildern mit CSS3 Rahmen, Rundung und Schlagschatten verpassen?

Das war sogar schon geplant, da dieser Photshopschatten in der der mobilen Version immer schlecht aussieht. Aber gut gesehen.

Matthes schrieb:

tinypng.com verkleinert Dein favicon um satte 12 Bytes. Wenn sich das nicht bemerkbar macht, weiß ich auch nicht weiter.

Ich hab alle PNGs die auf dem Space einmal via Tiny optimiert und hochgeladen. Kann es sein, dass Tiny jedes Mal aufs Neue eine weitere Farbe entfernt? Hab das eben noch einmal bei anderen Grafiken durchgeschaut, die auch bereits stark durch Tiny optimiert wurden. Er hört net auf zu verkleinern. Hat da wer Erfahrung, hört die Optimierung irgendwann auf? Ich war gerade etwas geschockt. Wenns immer noch gut ausschaut, werd ich einfach alle Grafiken noch 3 mal optimieren lassen.

Aber vielen Dank auch für die ganzen weiteren Ideen.

Satyam schrieb:

Und die drei Bilder zu einem kombinieren, könnte requests reduzieren - was sich in Ladezeit bemerkbar macht - könnte jedoch von der Inhaltsoptimierung (SEO) nicht sinnvoll sein etc.

Das hatte ich tatsächlich sogar schon umgesetzt, sah dann so ähnlich wie beim Hover-Effect der Navi aus. Habs später aber wieder ganz einfach gemacht. Da das den Quelltext ziemlich aufgeblasen hat, schließlich habe ich auf jeder Seite andere Bilder zur Illustration. Aber grundsätzlich ne geile Idee, steh selbst auf diese Möglichkeit Requests zu sparen.

Danke auch für den JPG Tipp. Ich glaube das wird wohl nötig, um noch mehr kB zu sparen. Leider ist G-Drive super langsam, da muss ich jedes Register ziehen.

Xenotyp schrieb:
Ich glaube ich kann auf meinen jetzigen "Main-Container" nicht verzichten, wenn ich einen durchgehenden Schatten als Border erzeugen will. Es sei denn ich klemm die Navi irgendwie in den jetzigen Section-Container, das müsste ich mal ausprobieren.

Main-Container weg, nav und section einen Schatten (border-top,-right und -left bzw. -bottom, -right und -left) geben und sie direkt aneinander positionieren.
Das ist semantisch schöner. Wenn es schon ein umschließender Container sein muss, dann ein div, der bewirkt keinerlei semantische Gruppierung.

Xenotyp schrieb:
Die Liste wurde hier zugunsten des Hover verwendet. Teil einer Liste müsste die Flagge schon bleiben.

Dann als letzten li des restlichen Menüs und ihn mit :last-child rechts positionieren?

Xenotyp schrieb:
Er hört net auf zu verkleinern. Hat da wer Erfahrung, hört die Optimierung irgendwann auf? Ich war gerade etwas geschockt. Wenns immer noch gut ausschaut, werd ich einfach alle Grafiken noch 3 mal optimieren lassen.

Der hört lange nicht auf, irgendeine Vereinfachung der Farben findet er immer. Ich würde es gar nicht häufiger durchlaufen lassen. Die erste Verkleinerung ist in der Regel die, bei der die Optik erhalten bleibt und wirklich nur unnötiger Ballast gekürzt wird. Alles andere verringert dann nur die Palette.

Ich habe die Bilder mal kombiniert und verkleinert, zusammen sind sie als jpeg nur 60kb groß. Mit CSS-Rahmen und -Schatten und als Sprite verwendet fallen da fast 20kb weg.
Datei im Anhang, Code hier.

[html]<style> <br />#pic a{display:block;width:240px;height:180px;border:1px solid #000; <br /> border-radius:7px;margin:10px;background-image:url(kombi2_mini.jpg); <br /> background-repeat:no-repeat; <br /> box-shadow: -2px -2px 2px 1px #ccc, 2px 2px 2px 1px #ccc;} <br />#jacky{background-position:0 -180px} <br />#bella{background-position:0 -360px} <br /></style>

[/html]

Manoman, was du dir immer eine Mühe machst, von dir lerne ich nie aus. Vielen Dank schon eimal für die vielen Codebeispiele. Leider hab ich heute wenig Zeit, das Ganze mal aus zu probieren. Aber so viel dazu, hab deinen Code schon einmal ein zu eins auf eine Testseite gebannt:

bit.ly/1eJuQIB

Und noch mehr Möglichkeiten:
Wenn Du nav.png und navbg.png zusammenfasst, sparst Du noch einen Request und die zusammengefügte Datei wird wahrscheinlich kleiner sein als die beiden einzelnen.
Einfach den navbg in ganzer Breite unten anfügen und die Hintergrundgrafik des

Ja wie geil ist das denn?! Ich bin zwar schon ein bisschen traurig, dass du ne noch geilere Navi aus meiner entwickelt hast, aber bei so tollen Ideen muss ich mich ja immer wieder bedanken. Ich hab in den paar Tagen hier mehr durch dich gelernt, als in einem Jahr Eigenstudium. Das ist total, super. :]

Wenn mich meine Arbeit und meine Freundin über das We einmal zur Ruhe kommen lassen, muss ich die Puzzleteile unbedingt zusammen führen, das wird Spitze!

Hier eben der einminütige Einbau deines Codes in eine Testseite:

bit.ly/1GboB6g

Nicht traurig sein, ohne Deine gute Vorarbeit hätte ich doch gar keinen Raum für Verbesserungen gehabt.

Es geht ohne grundlegenden Main-Container, siehe angehängten Ausschnitt.

Du musst die Container in die gleiche Größe bekommen und dabei Rahmendicke, Padding und ähnliche Späße angleichen.
Bei einem Border-Radius von 8px beim