Suchmaschinenfreundliche Zoom-Funktion

Zoom-Funktion mit PHP, CSS und Cookies

Bei den meisten Grafikbrowsern kann die Schriftgröße: mit den Kombinationen [Strg+Mausrad] oder [Strg +/-] eingestellt werden. Wir Haben uns allerdings eine Lösung gewünscht, bei der ein User auch bei seinem nächsten Besuch die von Ihm eingestellte Schriftgröße vorfindet. Des weiteren wollten wir eine Lösung, die auch die Veränderung von Layout-technischen Elementen (z.B. Grafik-Reiter) mit berücksichtigt. Um den Usern unserer Seiten die Schriftgröße individuell wählen zu lassen, haben wir uns für eine serverseitige Zoom-Funktion entschieden. Unsere Anforderungen an eine solche Funktion zur veränderung der Schriftgröße waren:

  • Die Funktion muß in mindestens 4 Stufen Schriften vergrößern bzw. verkleinern können
  • Es sollte möglichst kein JavaScript verwendet werden
  • Die Funktion sollte Suchmaschinenfreundlich sein, d.h. es sollte nicht z.B. mittels an die URL angehängtem Parameter doppelter Content erzeugt werden

Da die Einstellungen trotz oben genannter Bedingungen dem Client des Nutzers dauerhaft bekannt bleiben sollten, haben wir uns für den Einsatz von Cookies entschieden. Und zwar wird sowohl ein permanenter Cookie gesetzt, als auch - Falls das Setzen eines permanenten Cookies nicht möglich ist - ein Session-Cookie. Die Idee für das von uns verwendete System stammt von Mario Müller, im Artikel "Dynamische Schriftgröße mit PHP und CSS" ist das Verfahren genau beschrieben. Für unsere Bedürfnisse haben wir es allerdings leicht abgeändert.

Zuerst erstellen wir eine Datei fontsize.php:

<?php

/*
* nach einem gesetzten Cookie suchen
*/
if (!empty($_COOKIE['fontsize'])) {
$fontsize = $_COOKIE['fontsize'];
} elseif (!empty($_COOKIE['fontsizeR'])) {
$fontsize = $_COOKIE['fontsizeR'];
} else {
$fontsize = '0';
}

/*
* Schriftgröße soll geändert werden
*/
if (isset($_POST['font'])) {

if ($_POST['font']=='0') {
$fontsize = '0';
} elseif ($_POST['font']=='m1') {
$fontsize = 'm1';
} elseif ($_POST['font']=='1') {
$fontsize = '1';
} elseif ($_POST['font']=='2') {
$fontsize = '2';
}

/*
* Session-Cookie setzen, da die meist akzeptiert werden
*/
setcookie('fontsize', $fontsize, NULL, '/');
/*
* zusätzlich versuchen, dauerhaften Cookie zu setzen
*/
setcookie('fontsizeR', $fontsize, time()+60*60*24*365, '/');
}
?>

Diese inkludieren wir am Beginn jeder Seite

<?php include_once($_SERVER['DOCUMENT_ROOT'].'/fontsize.php'); ?>

Nun erstellen wir unterschiedliche Stylesheetdateien mit verschiedenen Schriftgrößen und binden diese an der passenden Stelle ebenfalls in jede unserer HTML/PHP-Datein ein.

<?php if(($fontsize=='0') || ($fontsize == '') || (!isset($fontsize))) { ?>
<link rel="stylesheet" type="text/css" href="/styles/default.css">
<?php } elseif($fontsize == '1') { ?>
<link rel="stylesheet" type="text/css" href="/styles/style_1.css">
<?php } elseif($fontsize == '2') { ?>
<link rel="stylesheet" type="text/css" href="/styles/style_2.css">
<?php } elseif($fontsize == 'm1') { ?>
<link rel="stylesheet" type="text/css" href="/styles/style_m1.css">
<?php } ?>

Alternativ hätten wir auch eine dynamische Stylesheetdatei schaffen können, die je nach gewählter Einstellung unterschiedliche Schriftgrößen darstellt. Mehr dazu finden Sie im Artikel von Mario Müller.

Jetzt müssen wir natürlich noch eine Möglichkeit für den User schaffen, die Schriftgröße zu ändern und den Cookie zu modifizieren. Das machen wir über Formulare mittels POST-Request (wir erinnern uns: Um Suchmaschinen nicht irre zu leiten wollen wir auf angehängte Parameter verzichten)

<?php if($fontsize=='1') { ?>
<form method="POST">
<input type="hidden" name="font" value="0">
<input type="submit" value="Schrift verkleinern">
</form>
<?php } elseif($fontsize=='2') { ?>
<form method="POST">
<input type="hidden" name="font" value="1">
<input type="submit" value="Schrift verkleinern">
</form>
<?php } elseif($fontsize=='0') { ?>
<form method="POST">
<input type="hidden" name="font" value="m1">
<input type="submit" value="Schrift verkleinern">
</form>
<? } ?>

<?php if($fontsize == '0') { ?>
<form method="POST">
<input type="hidden" name="font" value="1">
<input type="submit" value="Schrift vergrößern">
</form>
<? } elseif($fontsize == '1') { ?>
<form method="POST">
<input type="hidden" name="font" value="2">
<input type="submit" value="Schrift vergrößern">
</form>
<? } elseif($fontsize == 'm1') { ?> <form method="POST">
<input type="hidden" name="font" value="0">
<input type="submit" value="Schrift vergrößern">
</form>
<? } ?>

Bei Bedarf kann man mit Hilfe der zur Verfügung stehenden Variablen fontsize auch noch weitere Layoutanpassungen (z.B. Contentboxen vergrößern etc.) vornehmen.

Damit ist unsere Suchmaschinenfreundliche Zoom-Funktion schon fertig :-)

Frank Ristau, 6.7.2005

Ähnliche Artikel und Quellen


Artikel Suchmaschinenfreundliche ....

Bewerten Sie den Artikel Suchmaschinenfreundliche ....


RateRateRateRate - Bewertet: 4.255 auf der Skala 0 bis 5. Dies entspricht einer prozentualen Bewertung von 85.1% bei 1033 abgegebenen Stimmen.


Empfehlen und folgen:


Med-Kolleg bei Twitter












Den Beitrag "Suchmaschinenfreundliche ...." mit Facebook Kommentieren

   © 2003-2015 Med-Kolleg - med-kolleg.de - Suchmaschinenfreundliche Zoom-Funktion