SEO freundliche Auflösungsweiche

onkelseo · #1 20-07-2007, 09:34

Nachdem ich mich eine Ewigkeit rumgeärgert hab bis ich dieses banale Script beisammen hatte post ichs mal hier.

Mein Problem: Ich wollte eine Weiche haben die mir Abhängig von der verwendeten Bildschirmaulösung verschiedengroße Bildersets in einem frei definierbaren Bereich meiner Seite lädt bzw. ersetzt. Gerade bei Templates die eigentlich ein geslictes Bild sind (z.b. Fireworks) denke ich mir das das praktisch ist, da man hier normalerweiße an die Auflösung gebunden ist in der man das Ganze erstellt hat (oder man alles doppelt und dreifach anpassen und neumachen muss)

Weiters wollte ich keine Variablen in der URL haben, keine Metarefreshs oder dergleich Scherze.

Meine Lösung sieht nun wie folgt aus:

<script LANGUAGE="JavaScript">
var ScreenRes = window.screen.availWidth;
var ScreenHeight =window.screen.availHeight;

Erstmal die Auflösung ermitteln - height ist eigentlich unnötig aber wer weiss wozu mans noch braucht..

function resizer()
{
if(ScreenRes<1100)

wenn die Breite kleiner 1100 ist dann will ich die kleine Variante meiner Bilder geladen haben

{
document.getElementById("checkimg").innerHTML = document.getElementById("checkimg").innerHTML.repl ace(/.png/g, "_small.png");

Hier wird alles innerhalb eines Elements gelesen welches die id checkimg hat, und anchließend werden alle .png Bilderendungen die dort vorkommen durch _small.png ersetzt.
}
}

</script>

so nun noch das script laden

<body onload='resizer();'>

und irgendeinen Bereich definieren wo das Script seine Arbeit tun soll

<div id='checkimg'>

content, content etc. tete

</div>

Vorteil an dem Ding ist das die Seite auch bei abgschaltenem Javascript funktionstüchtig bleibt, der User bekommt halt nur die Standardvariante der Bilder zu sehen bekommt. Kann auf jeden Fall noch verfeinert werden das Teil. Prinzipiell bräuchte man das Ganze auch nicht innerhalb einer Funktion zu haben. Da ich aber dem User später noch Buttons zur Verfügung stellen will mit denen er die Funktion manuell auslösen kann (groß oder klein schalten) hab ichs erstmal so gelöst.

Das Ganze nochmal am Stück:

<script LANGUAGE="JavaScript">
var ScreenRes = window.screen.availWidth;
var ScreenHeight =window.screen.availHeight;
function resizer()
{
if(ScreenRes<1100)
{
document.getElementById("checkimg").innerHTML = document.getElementById("checkimg").innerHTML.repl ace(/.png/g, "_small.png");
}
}
</script>

<body onload='resizer();'>

<div id='checkimg'>

content, content etc. tete

</div>

Gibt noch den einen oder anderen Schönheitsfehler, aber ich hab jetzt erstmal genug...

Hier ist die Seite für die ich das Ding gebastelt habe (mein zukünftiges basisbyte Design) - einfach mit verschiedenen Auflösungen die Seite besuchen (1024*768, 1280*1024) um es (hoffentlich funktionierend) zu sehen. Hab s bis jetzt nur mit Firefox 2.0 getestet

http://www.basisbyte.de/index.php/?template=new

Um übrigens einfach und schnell große Mengen an Bildern zu resizen empfiehlt sich Imagemagik convert (Pinguin, keine Ahnung obs das auch für Windows gibt)

Hier ein schnelles Shellscript das die Aufgabe übernimmt (war seeeehr hilfreich für die 1600 Bilder ausm letzten Urlaub...

)

#!/bin/sh

echo "---START RESIZING---"
echo "this may take some time"

for i in *.png
do
convert $i -geometry 75%\! ~/Voller Pfad zum Bilderordner von home weg/`basename $i .png`_small.png
done

echo "---RESIZING FINISHED---"

Man kann damit auch Massen an Bildern schnell automatisiert umbennen, nachbelichten etc.

So denn jetzt geh ich zwei, drei Stunden an der Matratze horchen...

uRMel · #2 20-07-2007, 14:03

Hallo,

Dein Script ermittelt nur, wieviel Platz einem Fenster theoretisch zur Verfügung steht und überprüft nicht, wie groß das Fenster tatsächlich ist. Wenn ich also mein Fenster auf einem Bildschirm mit hoher Auflösung einer kleinen Größe fahre (der Fall wird nicht so selten sein), werden die Bilder zu groß für mein kleines Fenster sein.

Zudem kann ich ja die Größe meines Fensters ändern, während ich auf der Seite bin. In diesem Fall wird Dein Script die Größe der Bilder ebenfalls nicht anpassen.

Gruß,
uRMel

onkelseo · #3 20-07-2007, 18:46

Danke für deine konstruktive Kritik,

Nun, die tatsächliche zur Verfügung stehende Auflösung lässt sich per Javascript ermitteln (hab gestern der Faulheit halber den ersten Befehl genommen der mir eingefallen ist). Das muss ich noch ändern, für den reinen Funktionstest war das hinreichend.

Um nun auch die Auflösung dynamisch anzupassen wenn die Seite verkleinert wird könnte man einfach mittels width prozentual die Größe der Bilder/Tabelle etc. angeben, was ich aber nicht machen wollte da das schlicht grottig aussieht. Das empfiehlt sich nur bei Designs bei denen das Design von Hause aus darauf ausgrichtet ist - dieses Script soll primär das Problem der Auflösung bei Designs beheben die eigentlich ein festes Bild sind das in Tabellen aufgestückelt wurde. Ergo -> Fireworks etc.

Eine Verschönerungsmöglichkeit fällt mir gerade ein - die stellt für mich glaub ich auch den idealen Kompromiss der angesprochenen Punkte dar:

Wenn das Fenster angefasst und verkleinert (oder vergrößert) wird, werde ich einfach die Funktion nochmals auslösen lassen, damit das Script abhängig von der finalen Auflösung/ eine der zutreffendsten vordefinierten Auflösungen anwählt. Um das ganze dann auch noch schnell geht werde ich nochwas basteln damit die Bilder vorgeladen werden, das ist zwar suboptimal vom Datenstransfer her - hier könnte ich nebenbei noch prüfen lassen was die maximal vermutlich verwendete Auflösung sein wird - also mit der bisherigen Größenabfrage arbeiten - und dann nur die Varianten abwärts vorladen lassen die = oder kleiner dieser Größe sind.

onkelseo · #4 20-07-2007, 21:18

So, nun die verbesserte Version mit den oben besprochenen Punkten (außer dem Preloader)

<script LANGUAGE="JavaScript">

//--die sind z.Zt. eigentlich notwendig ich lasse sie aber mal für den späteren Preloader gleich stehen

var ScreenRes = window.screen.availWidth;
var ScreenHeight =window.screen.availHeight;

//--

var z ="";
var k ="";
function resizer()
{
var x,y;
if (self.innerHeight) // all except Explorer
{
x = self.innerWidth;
y = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
// Explorer 6 Strict Mode
{
x = document.documentElement.clientWidth;
y = document.documentElement.clientHeight;
}
else if (document.body) // other Explorers
{
x = document.body.clientWidth;
y = document.body.clientHeight;
}
if(x<1100 && z<1)
{
document.getElementById("checkimg").innerHTML = document.getElementById("checkimg").innerHTML.repl ace(/.png/g, "_small.png");
z = 1;
k="";
}
else if(x>1100 && k<1)
{
document.getElementById("checkimg").innerHTML = document.getElementById("checkimg").innerHTML.repl ace(/_small.png/g, ".png");
z = "";
k=1;
}
}
</script>

und in den Bodytag muss nun das folgende rein

<body onload='resizer();' onresize='resizer();'>

Themen-Optionen	Thema durchsuchen
Druckbare Version zeigen Diese Seite per E-Mail verschicken	Thema durchsuchen: Erweiterte Suche
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Erstellt von	Forum	Antworten	Letzter Beitrag
Fun-Contest Sexiest SEO	Loewenherz	Stammtisch	4	14-07-2007 22:04
Suche Praktikum (SEO, Online-Marketing)	-=nX=-	Geschäftspartner gesucht	0	26-05-2007 15:55
SEO gesucht !!!	brutos	Geschäftspartner gesucht	0	03-11-2006 15:52
[b] PR 3 bis 5 - Werbung, Webdesign, Seo	cm-seo	Geschäftspartner gesucht	0	02-10-2006 15:01
Suche Mode, VoIP, SEO Links	-omc-	Geschäftspartner gesucht	0	23-12-2005 16:37