StartseiteLink zurück zur Hauptseite,... >> - sie sind jetzt hier:  Webdesign, Usability, Layout und Grafiken 2

Teil 2 ... verschiedene Dinge und Informationen zum Thema "Webdesign"

Die erste Seite "Webdesign" wurde inhaltlich inzwischen zu groß und verursachte zu hohe Ladezeiten. Da aber immer mal wieder was dazu kommt, gibt es auch für diesen Bereich nun zwei Seiten.

über die Ladezeiten einer Internetseite

Vereinfacht gesagt: je schneller eine Webseite geladen ist, desto besser ist das für den Besucher der Seite. Ganz grosse Suchmaschinen ranken dann Seiten entsprechend solcher Ladezeiten. Und da gibt es fast unzählige sich vermeintlich für SEO-Experten haltende Leute, die im Internet mit den unterschiedlichsten Möglichkeiten für ein Optimum an Geschwindigkeit werben ... und die meisten davon wollen dafür dann auch noch ziemlich viel Geld. Gut, das zumindest die grösste und wohl auch bekannteste aller Suchmaschinen gute Tools für Ladezeitenmessungen schonmal ganz umsonst bereitstellen, anhand derer man gleich feststellen kann, WAS genau Ladezeiten hemmt. Gleichwohl sich mir doch die Frage stellt warum jede Optimierung im Zeitalter von Hochgeschwindigkeitsinternet immer noch um jedes eingesparte Byte ringt ... naja, hat wohl was mit der Gesamtmasse an Datenvolumen im Internet zu tun. Jedenfalls nutze ich das Tool Google-Speedtest um die Ladezeiten meiner Homepage zu optimieren bzw. um zu sehen, WO ich noch verbessern kann. Über den Link ziemlich unten im Nutzermenü gelangt man direkt zu diesem Tool. Meist sind es doch Grafiken und/oder Bilder, die die Ladezeiten hemmen, weil sie schlichtweg zu groß sind. Zufriedenstellende Ergebnisse deklarieren solche Test's aber leider immer nur erst dann, wenn Komprimierungen sich am Rande jeder Qualitätsgrenzwertigkeit bewegt ...was schade ist. Dann ist die Webseite zwar schnell, sieht aber möglicherweise dann scheisse aus, weil es an jeder Ecke an optischer Qualität fehlt. Kaheti.de wird sich auch nicht in Richtung 100% Optimierung bewegen, weil die Grenze zur Estetik einer Homepage auch für mich als Betreiber schnell überschritten sein kann.
Ein ziemlich großes Problem im Internet ist es jedoch, das sich gemessen an der Masse aller Seitenbetreiber nur wenige mit solchen Themen auseinandersetzen. Viele aus Unwissenheit... viele allerdings, weil ihnen schlichtweg egal ist, wie lange ein Nutzer auf eine Grafik warten muß, solange aber ein Kommerzangebot wahrgenommen werden kann. Auch in den privaten Bereichen gelangen schnell mal Bilder, Grafiken und Fotos unbedacht ins Internet, die nicht selten 1MB und mehr an Größe aufweisen. Solche Seiten haben in JEDEM Ranking natürlich überhaupt keine Chance, an den vordersten Plätzen gelistet zu werden. Auch wird man zukünftig solche Seiten nicht mehr besuchen, weil zu lange Wartezeiten den Besucher eher vergraulen, statt sie zum Verweilen einzuladen.
Facebook... bzw. soziale Netzwerke im Allgemeinen, sollen für so manchen SEO-Experten ein wichtiges Kriterium sein, für die Qualität einer Webseite, je mehr man somit sogenannten Follower hat. Völliger Humbug! Das "Folgen" nämlich sagt nichts über irgendwelche Nutzungsechtzeiten aus sondern zeigt nur, das irgendwer irgendwann mal auf einen entsprechenden Button geklickt hat. Nichts aber darüber, wie oft solch ein "Follower" tatsächlich die gelikte Seite auch nutzt oder weiterbewirbt. Auf solche sog. Folge-Buttons kann jeder auch aus Gefälligkeit klicken ohne sich die entsprechende Seite auch je tatsächlich angesehen zu haben. Also kein wirkliches Kriterium für gute Webseiten! Wenn man es genau nimmt, verursachen die "stolzen" Einbindungen solcher Followerzahlen nur zusätzliche Ladezeiten und die Scripte die man hierfür nutzt, sind dann auch noch fehlerhaft und man sich dann die Frage stellen muß, was nützen 1000 Follower, wenn die Seite anschliessend wegen zu hoher Ladezeiten oder Validierungsfehler ohnehin in jedem Ranking wieder nach hinten fällt? Kann man mal drüber nachdenken.

wie funktioniert das mit dem T-Rex?

Wenn man hier auf dieser Webseite auf den Button "Special-Effects" klickt, läuft am unteren Bildrand plötzlich ein T-Rex hin und her. Und DER ist auch noch animiert. Wie funktioniert DAS? Dabei handelt es sich natürlich um ein animiertes Gif bzw. um zwei Gif's die den T-Rex links oder rechtsgehend zeigen. Per javascript wird zunächst ein T-Rex in EINE Richtung laufend von einem Bildrand zum anderen transportiert ...am Ende (welches außerhalb des sichtbaren Bildschirmbereich liegt) angekommen, wird per javascript das Bild - also das animierte Gif ausgetauscht und dieses dann zurück transportiert. Die Transportgeschwindigkeit läßt sich so einstellen, so das sie mit den Gehbewegungen des T-Rex's fast übereinstimmt und es dann so ausschaut, als würde der T-Rex tatsächlich auf dem Sand hin- und herlaufen. Wenn man im Script die Grafik ändert, könnte man allesmögliche hin und herlaufen lassen.

Erforderliches Script: Download
Dieses script im Headbereich der Seite einfügen. Dann auf der Seite, auf der die Grafik erscheinen soll, folgendes Script einfügen:

Im html eingebunden wird die Grafik mit einem gewöhnlichem img-Tag
<img id="Deine ID" src="https://www..... Dein Pfad zu einem transparentem Pixel.png- oder.gif" width="1" height="1" alt="animierte Grafik" title="hier bewegt sich was" />
Die eigentliche Grafik und die Wechselgrafik (für die entgegen gesetzte Richtung - bei bspw. einem Auto) werden ja bereits im Javascript definiert. Über die ID die im Script (die hier im Beispiel noch Loewe heißt, weil anstelle des T-Rex's vorher ein Löwe als Grafik genutzt wurde) an die Grafik vergeben wurde, läßt sich sodann Position, Grösse u.s.w. bestimmen. Die für diese Webseite erforderliche CSS, sieht folgendermaßen aus:

Damit dieser auch immer am unteren Bildschirmrand herum läuft, ist position:fixed; vergeben. Damit orientiert sich seine Position immer am Bildschirmrand, in hiesigen Fall über "bottom:1px;" am unteren. Ich selber habe dieses javascript nicht erfunden, sondern per Internetfund übernommen. Die Werte, wie weit der T-Rex links und rechts aus dem Bildschirmbereich herausläuft, sind bei jetzt meiner Monitorbreite von 1280px willkürlich bestimmt. Bestimmend sind hierfür die Werte in den Bereichen: {left: "-400"} und {left: "+1680"}. Ich bin kein Javascriptkenner, aber soweit ich dieses Script verstehe, verschwindet der T-Rex auf der linken Seite um 400px außerhalb des Bildschirmes.... auf der rechten Seite dann - bestimmt durch die Auflösungsbreite - ebenfalls um 400px. Die letztere +Angabe (also wenn die Grafik wieder zurück kommt und den rechten Bildschirmrand erreicht) bezieht sich auf die tatsächliche Auflösungsbreite des Bildschirmes die um eben 400px (wie bereits erwähnt, ein willkürlich gewählter Wert) erhöht ist. Hat man z.B. eine feste Breitenauflösung von 1600px oder z.B. 1920px, so müsste man diesen +Wert um die Pixel, die die Grafik über den rechten Bildschirmrand hinaus reichen soll, erhöhen. Je höher man diese Werte bestimmt, um so länger dauert es an jeder Seite dann auch entsprechend lang, bis die Grafik schliesslich wieder erscheint. Die Geschwindigkeit bestimmen die Angaben "18000" ... hier müsste man ggfs. experimentieren. Das hier auf der Seite der T-Rex nur per Buttonklick für die Specialansicht erscheint, hat etwas mit der Gesamtansicht der verwendeten Spezialeffekte etwas zu tun, die per "An/Aus-Script" - auf Webdesign1 beschrieben, nur per Klick sichtbar und/oder eben unsichtbar werden. Also schon etwas komplizierter ... ist jedoch nicht zwingend erforderlich, wenn man eine Grafik permanent darstellen will. Dann reicht das hier beschriebene vollkommen aus.

Kaheti.de spricht ab jetzt mit Ihnen

Auf meiner Homepage ist es nun möglich, sich die inhaltlichen Haupttexte vorlesen zu lassen. Hierfür gibt es eine Erweiterte Steuerung im Benutzermenü, mit der Sie das Vorlesen pausieren oder ganz wieder ausschalten können. Beim Wechsel zu einem anderen Bereich, stoppt das Vorlesen automatisch und Sie können auf jeder Einzelbereichsseite erneut die dortigen Textinhalte vorlesen lassen. Umgesetzt wird die Vorlesefunktion mit einer recht einfachen Version diverser hierzu erhältlicher Javascripts. Es gibt nur EINE Stimmvariante, und Lautstärke Pitch und Rate lassen sich bei mir auch nicht einstellen. Das wäre vom Umfang an Designanpassung viel zu kompliziert geworden. Dennoch, diese Sprachversion jetzt hier bei Kaheti.de, erfüllt ihren Zweck sicherlich... sie liest vor, und darum geht es ja schlussendlich. Damit ist vielleicht auch ein weiterer Schritt in Richtung Barrierefreiheit getan, obwohl aus so mancher Richtung wohl auch grundsätzlich von solchen Einrichtungen abgeraten wird mit der Erklärung,.. das Blinde ohnehin den Einschaltbutton nicht finden würden, jedoch aber finden Blinde durchaus Accesskeys und können so, die Sprachausgabe in Gang setzen. Zudem gibt ja nicht nur Blinde, die grundsätzlich nichts sehen können, sondern eben auch Menschen mit eingeschränkten Sehfähigkeiten und die Probleme beim Lesen haben. Für diese Leute ist die Vorlesefunktion sicherlich eine gute Sache. Allerdings: Beachten Sie bitte was im Usermenü unter Info dazu geschrieben steht! Speech funktioniert NUR mit zumeist aktuellen Browsern und ist, was die Funktion anbelangt, auch Betriebssystemabhängig. Windows 7 zum Beispiel liest in der Homeversion nur in englisch vor.

Hier ist erstmal wieder Ende

Wenn Ihnen diese Webseite gefällt,
....sagen sie's bitte jemandem. Danke dafür

nach oben ▲