Category Archives: Nutzerfreundlichkeit / Usability

So richten Sie Google Analytics ein

Wenn Sie auf der Suche nach einem kostenlosen aber dennoch leistungsstarken Statistik-Tool für Ihre Internetseite sind, dann sei Ihnen an dieser Stelle Google Analytics empfohlen. Mit diesem Tool können Sie umfangreiche Auswertungen zu Ihrer Internetseite erhalten. Auf Basis dieser Daten sind Sie in der Lage Ihre Internetseite hinsichtlich Nutzerfreundlichkeit (Usability) zu optimieren.

In diesem Video gehe ich mit Ihnen Schritt für Schritt die Einrichtung des Statistik-Tools durch. Danach steht Ihnen der Analyse des Besucherverhaltens Ihrer Internetseite nichts mehr im Wege und können unter anderen folgende Dinge auswerten:

  • Anzahl Besucher in einem frei wählbaren Zeitraum
  • Anzahl Seitenaufrufe pro Besuch und Zeitraum
  • Durchschnittliche Verweildauer der Besucher auf einer Internetseite
  • Detaillierte Angaben über die Besucher
    • Herkunft (Stadt, Land, Kontinent)
    • Suchmaschine, Suchbegriff
    • Verlinkte Internetseite
    • Browser, Betriebssystem, Bildschirmauflösung, etc.
  • Beliebteste Inhalte / Internetseiten und Absprungraten
  • Häufigste Ausstiegspunkte
  • Und vieles mehr

Code zur Einbindung von Google-Analytics:

<script src="http://www.google-analytics.com/urchin.js"
type="text/javascript"></script>
<script type="text/javascript">
   _uacct = "UA-xxxxxx-x";
   urchinTracker();
</script>

“UA-xxxxxx-x” ist Ihre Nutzer- bzw. Statistik-ID und muss durch Ihre eigene ersetzt werden!

15 – Grundlagen HTML & CSS: Eine Kontaktformular mittels PHP verschicken

Das ist die letzte Video-Lektion der Reihe „Grundlagen HTML & CSS“. In diesem abschließenden Video-Tutorial zeige ich Ihnen, wie Sie Ihr Kontaktformular mittels PHP funktionsfähig machen. So müssen die Inhalte der Formularfelder in Variablen übergeben und verarbeitet werden. Mit der PHP-Funktion „mail()“ generieren wir eine Email für den Absender und den Empfänger des Kontaktformulars.

Damit das Kontaktformular richtig verarbeitet wird, kommt es auf die richtige Reihenfolge der PHP-Anweisungen an. In diesem Video gehe ich auf diesem Problem kurz ein. Am Ende haben Sie steht Ihnen ein einfaches, funktionierendes, auf PHP basierendes Kontaktformular zur Verfügung.

Diesen einfachen Quelltext für ein Kontaktformular stelle ich Ihnen hier noch einmal kostenlos zur Verfügung. Das HTML-Gerüst für das Formular ist wie folgt aufgebaut:

<form method="post" action="kontakt.php">
  <table border="0">
  <tr>
    <td>Anrede:</td>
    <td>
      Herr: <input type="radio" value="Herr" name="anrede">
      Frau: <input type="radio" value="Frau" name="anrede">
    </td>
  </tr>
  <tr>
    <td>Vorname:</td>
    <td><input type="text" name="name"></td>
  </tr>
  <tr>
    <td>Nachname:</td>
    <td><input type="text" name="nachname"></td>
  </tr>
  <tr>
    <td>Email:</td>
    <td><input type="text" name="mail"></td>
  </tr>
  <tr>
    <td>Ihre Nachricht an uns:</td>
    <td>
      <textarea name="nachricht" cols="45" rows="15">
      </textarea>
    </td>
  </tr>
  <tr>
    <td></td>
    <td>
      <input type="submit" value="abschicken!!!">
      <input type="reset" value="DATEN L&Ouml;SCHEN">
    </td>
  </tr>
  </table>
</form>

Das PHP-Skript für die Verarbeitung des Kontaktformulars sieht wie folgt aus:

<?php
$anrede    = $_REQUEST['anrede'];
$mail        = $_REQUEST['mail'];
$name        = $_REQUEST['name'];
$nachname        = $_REQUEST['nachname'];
$nachricht        = $_REQUEST['nachricht'];

$empfaenger = "info@gordon-adams.com";
$absender = $mail;

$betreffwebmaster = "Kontaktanfrage ($name $nachname)";
$koerperwebmaster = "$name $nachname hat &uuml;ber die
Webseite http://www.gordon-adans.com/blog folgende
Kontaktanfrage gestellt: \n\n" .
"\n\n
Kontaktdaten: \n
\tName:    $anrede $name $nachname \n
\teMail:   $mail \n
\n\n" .
$nachricht;

$betreffkunde = "Ihre Kontaktanfrage bei gordon-adams.com/blog";
$koerperkunde = "Sie ($name $nachname) haben &uuml;ber die
Webseite http://www.gordon-adans.com/blog folgende
Kontaktanfrage gestellt: \n\n" .
"\n\n
Kontaktdaten: \n
\tName:    $anrede $name  $nachname \n
\teMail:   $mail \n
\n\n" .
$nachricht;

$abgesandt = "<br /><h1>Kontaktbest&auml;tigung</h1>
<p>Vielen Dank f&uuml;r Ihre Anfrage. Wir werden uns in
K&uuml;rze bei Ihnen melden.<br><br>Thank you for your
inquiry. We will get back in touch with you shortly!</p>";

mail("$empfaenger",
     "$betreffwebmaster",
     "$koerperwebmaster\n",
     "FROM: $absender\n");
mail("$mail",
     "$betreffkunde",
     "$koerperkunde\n",
     "FROM: $absender\n");
echo $abgesandt;
?>

Analog zu diesem Aufbau können Sie selbstverständlich weitere Felder einfügen oder ergänzen. Mit diesem Video-Tutorial ist diese Serie zu Ende.

Hinweis: Der gezeiget Code wurde an einigen Stellen für eine besser Anzeige umgebrochen. Entfernen Sie die Zeilenumbrüche, sodass die Anweisungen wieder in einer Zeile stehen. Dann wird das PHP-Skript wieder fehlerfrei ausgeführt!

14 – Grundlagen HTML & CSS: Erstellung eines einfachen Kontaktformulars

Unsere erste eigene Internetseite ist nun so gut wie fertig. Was noch fehlt ist ein Kontaktformular. In dieser Video-Lektion erstellen wir ein einfaches Formular. Nach dem Absenden des Formulars erhalten sowohl der Absender, als auch der Empfänger eine Email. Der Absender erhält in der Regel eine Bestätigungs-Email; der Empfänger eine Email mit allen Angaben des Formulars. Natürlich können Sie auch dem Absender alle gemachten Informationen in Kopie per Email zukommen lassen.

Neben dem versenden einer Bestätigungs-Email sollte dem Absender auch eine Bestätigung des erfolgreichen Versendens der Online-Anfrage am Bildschirm angezeigt werden. Der Grund dafür ist, dass der Versandt einer Email (auch der Bestätigungsemail) zeitlich verzögert erfolgen kann. D.h. nach dem absenden einer Anfrage, können durchaus fünf Minuten oder mehr vergehen, bis die Email endlich im Postfach eingeht. Die technischen Hintergründe dazu will ich an dieser Stelle nicht weiter erörtern. Wichtig ist nur, dass Ihnen diese Problematik bewusst ist.

Im Sinn der Nutzerfreundlichkeit / Usablity von Internetseiten ist es in jedem Fall wünschenswert, dem Benutzer einer Internetseite eindeutiges Feedback zu geben, ob etwas funktioniert hat und wenn nicht, was die Gründe dafür gewesen sind und wie dies behoben werden kann.

Die Nutzung von Kontaktformularen gegenüber einfachen Email-Adressen hat folgende Vorteile:

  • Auch Nutzer ohne eine eigene Email-Adresse können ein Formular ausfüllen und Ihnen somit eine Email zukommen lassen (sofern „Email“ kein Pflichtfeld ist)
  • Sie können Pflichtfelder vorgeben, also Angaben abfragen, die Sie in jedem Fall zur Bearbeitung und Beantwortung einer Anfrage benötigen. Bei einer einfachen Email sind Sie darauf angewiesen, dass der Absender von sich aus alle notwendigen Daten mitteilt.

In diesem Zusammenhang zeige ich Ihnen typische HTML-Formular-Felder. Dazu zählen unter anderen:

  • Input-Feld vom Typ „radio“
  • Input-Feld vom Typ „text“
  • Input-Feld vom Typ „submit“
  • Input-Feld vom Typ „reset“
  • HTML-TAG „Textarea“ für Nachrichteninhalte

404-Seiten – Wenn eine Ihrer Webseiten „nicht gefunden“ werden kann

Wenn ein Besucher Ihrer Webseite einen alten Link aufruft, der nicht mehr vorhanden ist, wird im Browser automatisch einen 404-Fehlerseite (http-Statuscode 404) aufgerufen. Dieser Fehler besagt, dass die aufgerufene HTML-Datei nicht vorhanden ist. Es handelt sich also um einen „toten Link“ oder einen „defekten Verweis“.

Dass Sie im Laufe der Zeit „tote“ bzw. „defekte“ Links unbewusst erzeugen lässt sich so gut wie nicht vermeiden. Wichtig in diesem Zusammenhang ist jedoch Ihren Besuchern eine vernünftige Statusmeldung an die Hand zu geben und Handlungsalternativen vorzuschlagen.

Mit dem Status-Code 404 können nur die wenigsten Besucher im Internet etwas anfangen. Hilfreich wäre daher die standardmäßig vorhandene Fehlerseite durch eine eigene zu ersetzen. Den Aufruf einer solchen 404-Fehlerseite können Sie mit Hilfe einer „.htaccess“ Datei im Wurzelverzeichnis Ihrer Domain, also dort wo auch die index.html Datei liegt, steuern / herbeiführen.

Inhalt der .htaccess-Datei:

ErrorDocument 404 /404.html

Wichtig ist dabei zu wissen, dass in diesem Fall davon ausgegangen wird, dass die anzuzeigende Fehlerseite den Namen 404.html trägt und sich im Wurzelverzeichnis befindet (/). Anders ausgedrückt wird die Seite wie folgt aufgerufen:

www.IhreDomain.de/404.html

Wenn die Fehlerseite sich in einem Unterverzeichnis aufhält, dann geben Sie dies in der .htaccess-Datei wie folgt an:

ErrorDocument 404 /Verzeichnis/404.html

Bitte achten Sie auch auf die Schreibweise der .htaccess-Datei. Diese schreibt sich klein und MIT einem Punkt vor der Datei-Bezeichnung!

Innerhalb der HTML-Seite 404 fügen Sie wie gewohnt Ihre Meldungen und Hinwesie, die Ihren Besuchern bei einem Fehler angezeigt werden sollen, ein. Das kann ein Hinweis auf die Webinterne Suche sein, falls sich ein Besucher beim aufrufen der Seite vertippt hat, oder ein Kontaktformular mit der Möglichkeit für den Besucher diesen Fehler zu melden und ggf. in diesem Zusammenhang sein Anliegen los zu werden. Es beiten sich also viele Möglichkeiten und Hilfestellungen, die man seinen Besuchern und potentiellen Kunden hier bereitsellen kann.

Fließtext in mehrere Spalten gleichmäßig verteilen

Mit CSS3 ist es möglich (wird es sein; denn CSS3 wird sowohl von den Browser als auch von den HTML-Editoren nicht vollständig unterstützt, da die Spezifikationen sich ständig ändern) Fließtext auf eine beliebige Anzahl von Spalten gleichmäßig zu verteilen; ähnlich wie man es von den Tageszeitungen her kennt und gewohnt ist.

Drei wesentliche Angaben sollten in einer entsprechenden CSS-Klasse enthalten sein, die die Anzahl der Spalten, die Spaltenbreite sowie die Abstände zwischen den Spalten definiert:

  • column-count (Anzahl der Spalten; Angabe nummerisch)
  • column-width (Breite der Spalte; Angabe in Pixel)
  • column-gap (Abstand zwischen den Spalten; Angabe in Pixel)

Eine beispielhafte Klasse für einen mehrspaltigen Text mittels CSS3:

div.spalten {
   /*Standard-Definition*/
   column-count: 3;
   column-gap: 20px;
   column-width: 200px;

   /*Definition für FireFox*/
   -moz-column-count: 3;
   -moz-column-gap: 20px;
   -moz-column-width: 200px;

   /*Definition für Safari*/
   -webkit-column-count: 3;
   -webkit-column-gap: 20px;
   -webkit-column-width: 200px;
}

Der entsprechende DIV-Container im HTML:

<div class= "spalten">
   Ein langer Fließtext, der dynamisch auf eine bestimmte 
   Anzahl von Spalten verteilt werden soll. Die Länge / 
   Höhe der Spalten ergibt sich automatisch aus der 
   Textlänge.
</div>

Das obige Beispiel erzeugt einen Container in dem der enthaltene Fließtext auf 3 Spalten verteilt wird, wobei jede Spalte 200 Pixel breit ist und der Abstand zwischen den Spalten 20 Pixel beträgt.