XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Site- und Layoutcheck (http://xhtmlforum.de/forumdisplay.php?f=77)
-   -   Layout Check wegen Grafiken und Ladezeit (http://xhtmlforum.de/showthread.php?t=52169)

andreak 08.06.2008 18:55

Layout Check wegen Grafiken und Ladezeit
 
Hallo Leute,
bin mir bei dem Entwurf nicht sicher, ob ich das so machen kann?

Unbenanntes Dokument

Zu viele Grafiken? Die Hintergrundspitze muss ich so groß kacheln, sie sieht sonst zu popelig aus. Vielleicht habt Ihr ja ein paar Ideen, wie ich die Ladezeit minimieren kann, ohne das Layout zu verändern?

Freue mich auf Feedback! Aber bitte kein's zum Thema selbst, :oops: ist alles sehr seriös!

mantiz 09.06.2008 16:58

Ich find' die Datenmenge ok. 51KB, meine Güte. :)

Je weniger, desto besser, aber soweit ich weiß sollte man auf jeden Fall unter 100kB bleiben und das bist Du locker. :)

Scheppertreiber 09.06.2008 16:59

*lechz* :)

andreak 09.06.2008 17:06

@ mantiz
vielen Dank, das beruhigt mich ein wenig! Normalerweise arbeite ich nicht mit so vielen Grafiken und bin auch nicht so der Photoshop-Freak, deshalb die Unsicherheit!

@Scheppertreiber
ich sagte in meinem Beitrag doch ausdrücklich "keine Kommentare zum Thema", oder bezieht sich Dein Beitrag auf Layout und Programmierung, dann sei's genehmigt? Falls Du dazu noch was auf Lager hast, bitte gerne!

Timo 09.06.2008 17:08

Code:

<div id="header"><img src="img/escordservice_head.jpg" width="900" height="170"></div>
Das Bild kommt in ne h1 und das Bild brauch einen alt-Text.

Zur Navi ist zu sagen:
Zitat:

Zitat von heiko_rs (Beitrag 296439)
Da empfohlen wird, zu Gunsten einer optimalen Website-Performance die Anzahl der HTTP-Anfragen zu reduzieren (sprich: durch möglichst wenig zu übertragende Dateien), bietet es sich an, alle Grafiken zu einer einzigen zusammenzufassen (die im vorstehenden CSS-Code schlicht "navi.gif" heißt), und den jeweils gewünschten Teil per background-position in den sichtbaren Bereich des dazugehörigen Links zu rücken. Weitere Vorteile dabei: Es ist keinerlei Preload für die Hover-Effekte mehr nötig, und die Dateigröße einer Grafik, die alle Zustände enthält, ist auch geringer als die Summe der entsprechenden Einzel-Grafiken (u.a. da es insgesamt nur einen Grafik-Header gibt).

Code:

<p>Willkommen,<br>
Auch ne Überschrift.

Das wars erst ma :)

inta 09.06.2008 17:21

Ich würde bei der Navigation die Outline entfernen, da du selbst einen Effekt setzt und die Outline etwas komisch aussieht. Im Footer springt der Text, wenn die Schrift der Links beim hovern fett wird. Da würde ich auch lieber ausschau nach einer anderen Hervorhebung halten.

andreak 09.06.2008 17:24

@Timo

Das mit dem Header-Bild ist klar.

Das mit der Navi nicht so ganz, meinst Du das so: Eine Grafik (z.B. navi.gif) über die ganzen Navigationspunkte erstellen und dann bei jedem Link im Hoover-Zustand die jeweilige Hoover-Grafik an die Stelle über der navi.gif platzieren (mit der jeweiligen background-position)?

Das mit dem "Willkommen" ist momentan nur Blindtext, das kommt noch, aber klar, wäre auch eine <h>.

Timo 09.06.2008 17:26

genau für jeden Link eine Grafik mit :link und :hover status. Und mit background-position nach unten oder links verschieben

andreak 09.06.2008 17:34

@Timo
klingt aber auch kompliziert! Wenn das dann nicht genau passt (was ja bei verschiedenen Browsern schon mal vorkommen kann), dann sieht man den Text doppelt. Meinst Du wirklich, dass sich das ladezeitenmäßig lohnt?

@inta
meinst Du mit "Outline" die Kontur um die Navigationspunkte? Die sollte ja gerade diesen weichen Effekt geben. Kannst Du mir das noch genauer erklären?
Mit dem Footer hast Du recht, das werde ich ändern! Danke

Timo 09.06.2008 17:35

Da gibts keine Differenzen zwischen Browsern bei background-position. Und es kommt kein hässliches "Loch" beim erstenmal hovern.


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:23 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023