nicht angemeldet
Hallo!
Also ich habe eine kleine Webseite gebaut und die ist erm groß :D Also genauer ist sie rund acht Megabyte groß, wenn man sie erstmals (mit leerem Cache) aufruft.
Sorry, aber dazu kann ich nur sagen, dass ist ungeachtet jedweder Argumentation definitiv viel zu groß für eine "normale" Webseite!
Was daran liegt, dass eine große Bannergrafik und eine große Hintergrundgrafik geladen werden, beide jeweils über 3MB groß (und ja ich hab die schon optimiert ;D)
Noch schlimmer - mehr als 6 MB, die nichts mit dem eigentlichen Inhalt zu tun haben ...!?
Ich bin auch allgemein recht zufrieden mit dem Layout, es ist ein bisschen oldscool, aber das ist schon okay, ich find's hübsch und ich komme damit klar, dass es pre-cache einen Moment dauert bis die Seite vollständig da ist, benutzbar ist sie von Anfang an.
Wie lange ist für dich denn "ein Moment"!?
Smartphone User mit EDGE ..., und tschüss! ;-)
Ein bisschen tuts mir aber leid um die Leute da draußen, die mit Volumen-Tarifen leben und die vielleicht nur 2GB oder sogar nur 100MB im Monat zur Verfügung haben. Ich würde also gerne eine Art minimierte Webseite anbieten (wobei RSS schon da ist...), bei der diese beiden Grafiken durch deutlich kleinere ersetzt werden.
Das würde ich dir generell empfehlen!
Für das Hintergrundbild, ist das noch sehr machbar einfach Medien-Gebundenes Stylesheet und wer mit dem Telefon kommt bekommt eine bedeutend kleinere Grafik ausgeliefert.
Wie stellst du denn per "Medien-Gebundenem Stylesheet" fest, "wer mit dem Telefon kommt"!?
Falls du den Medientyp "Handheld" meinst, muss ich dich leider enttäuschen. Die allermeisten Browser auf mobilen Endgeräten unterstützen diesen Medientyp nicht, sondern "reagieren" wie jeder Desktop-Browser nur auf "Screen".
Nicht erschlagen habe ich damit natürlich die Leute mit LTE-Routern oder Mobilfunk-Sticks an ihren Notebooks. Denn die lesen ja korrekterweise immernoch das screen-Sheet und nicht das handheld-Sheet.
Defakto ist es heutzutage nicht möglich, irgendetwas (sinnvolles) über die "Art der Internetverbindung" herauszufinden. Deshalb eingangs mein dringender Appell ...! ;-)
Nur mal ein Beispiel: Du kannst nicht bestimmen, ob ein Smartphone User deine Seite über GPRS oder bspw. ein WLAN aufruft.
Darüber hinaus das Banner... das ist einfach ein img-Element, ich erkläre gleich warum… und folglich ist das im HTML-Code und nicht im CSS und daher kann ich sie nicht einfach mit media-queries ersetzen... (hmm oder kann ich doch? Wenn ich 2 Grafiken setze und einmal dieses und einmal jenes display:none; ? Wird die Grafik dennoch geladen?)
Das Banner ist aus folgendem Grund ein IMG-Element und kein h1 mit background oder so...
#head_banner {
display:block;
max-width:100%;
max-height:333px;
min-height:100px;
}
> Anders gesagt: Die Grafik \*\*möchte\*\* gerne ihre volle Breite von 1.800 Pixel ausnutzen (wobei mir einfällt dass die Hälfte sicher ausreichte), wird durch die Breite des Browserfensters aber darin beschränkt. Ich finde das sieht gut aus und passt sich wunderbar dynamisch an und so fort. Ich wüsste nicht dass oder wie man mit CSS eine Hintergrundgrafik skallieren kann... sonst täte ich dies (das Bild ist ja eigentlich kein "Inhalt").
Auch hier sehe ich deine Vorgehensweise höchst skeptisch, denn nur wenn eine Grafik zum eigentlichen Inhalt gehört, ist IMHO das IMG Tag angebracht. Alles andere ist "Dekoration" und gehört ins CSS.
Das macht insbesondere auch für den Druck einen entscheidenden Unterschied.
> So, mein Gedanke war nun irgendeine Art von UA-Sniffing oder so, aber ich würde halt am Liebsten auch die Art der Verbindung (Mobil oder Kabel) ermitteln und so fort und aufgrund dessen dann die eine oder die andere Grafik anzeigen. Das kann Client- oder Serverseitig geschehen, das ist mir egal. Aber UA-Sniffing ist eben auch so... ew pfui und unzuverlässig und wie angedeutet auch eigentlich unzureichend.
UA Sniffing ist so ungefähr das Einzige, was du serverseitig tun kannst. Allerdings kannst du mit den so gewonnenen Informationen wenig bis gar nichts anfangen.
Eine weitere Möglichkeit ist per Javascript etwas über die Fähigkeiten des jeweiligen Browsers und der Hardware herauszufinden.
Ein Beispiel ist etwa [Modernizr](http://modernizr.com/).
> Daher bin ich allgemein auf der Suche nach einer Lösung für eine minimalistische(re) Webseite, wie macht man das 2013? Wie gesagt, media-query und dann dieses oder jenes Bild ein-/ausblenden kam mir gerade während ich diesen Beitrag schrieb, hilft mir aber nur wenn Browser so ein Bild wenn es nicht gezeigt wird auch wirklich nicht laden.
Siehe: [http://timkadlec.com/2012/04/media-query-asset-downloading-results/](http://timkadlec.com/2012/04/media-query-asset-downloading-results/)
Bei deinen "Mega-Grafiken" solltest du evt. auch mal über Möglichkeiten von [SVG](https://www.google.de/search?q=w3c+svg) nachdenken.
Bei sehr großen Hintergrundgrafiken (von denen ich prinzipiell immer abraten würde) böte sich ggf. auch noch die Möglichkeit an, diese in mehrere kleine(re) Teile zu zerlegen und per [multiple backgrounds](https://www.google.de/search?q=css+multiple+backgrounds) später wieder zusammenzufügen. So ließe sich die Downloadzeit wenigstens etwas verringern, da mehere Dateien parallel heruntergeladen werden können.
> Vielen Dank schonmal für alle Anregungen :)
Aber nochmal: Eine Webseite, und insbesondere eine Startseite, sollte ohne ganz triftigen Grund nicht größer als max. 1 MB sein!
Mehr als 6 MB für Dinge, die nicht zum Inhalt der Seite gehören, ist ein absolutes No-Go! Selbst in Zeiten von DSL + LTE widerspricht das allen Grundlagen von "gutem Webdesign".
Gruß Gunther
Matthias Apsel
Der Martin