Gastartikel: Top Ten der Webdesign Fehler
Hallo meine lieben Leser. Heute gibt es eine kleine Premiere auf meinem Blog: Den ersten Gastartikel. Er wurde verfasst von Marianne, einer Mitarbeiterin von twago. Ich bin der Meinung, dass er auch für meine Leser ganz interessant ist. Und mal sehen, ob ich selbst keinen der Fehler bei meiner Website begangen habe. Aber hier nun der Artikel.
Bei den Milliarden Webseiten die man im World Wide Web finden kann, gibt es Seiten, die einen wahren optischen Genuss darstellen und auf denen man gern verweilt. Jedoch gibt es auch Millionen Seite, die man nicht gern besucht und schnell wieder vergisst. Es gibt unzählige Fehlerquellen bei der Erstellung einer Webseite. Hier werden im folgenden 10 vorgestellt.
- Worum geht es hier?
Innerhalb von ein paar Sekunden sollte dem Besucher bewusst sein, worum es auf der Seite geht. Schnell sollte für den Leser klar sein, warum er auf der Seite Zeit verbringen sollte. - Texte mich nicht zu!
Versuchen Sie unbedingt große Textblöcke zu vermeiden. Leser möchten sich zwar informieren, aber sie möchten auch unterhalten werden. Die Seite sollte scannbar sein, für alle die nur nach einzelnen Informationen suchen. - Was steht da?
Die Wahl der Schriftart, aber auch die Schriftgröße sollten wohl durchdacht sein und vor allem lesbar. Natürlich gibt es sehr viele Schriftarten, die ordentlich was her machen, jedoch hilft es nicht, wenn diese nicht komfortable für den Leser sind. Eine gute Lösung für das Problem der passenden Schriftgröße ist, wenn der Besucher die passende Größe selbst bestimmen kann. - Autsch! Das tut ja weh…
Meiden Sie weitestgehend besonders grelle und scharfe Farben. Die gewählten Farbkombinationen sollten auch nach 10 Minuten noch keine Kopfschmerzen verursachen. Das Farbkonzept sollte sich an der Farbwirkung und der Stimmung, die sie dem Leser vermitteln möchten, orientieren. - Wo ist denn nur?
Neben einem ansprechenden Design, muss eine gute und übersichtliche Navigationsstruktur den Leser auch zur gewünschten Seite führen und nicht verwirren. Spielen Sie nicht mit der Geduld des Besuchers. - Ach nein, nicht das auch noch!
Gehen Sie vorsichtig mit Flash-Elementen um. Nicht jeder Besucher mag Intros und die damit verbundenen Ladezeiten. Gekoppelt mit Musik, kann das zu einem Schreckmoment beim Besucher führen, der vielleicht nicht in der passenden Umgebung ist, um diese Mühe wertzuschätzen. Sollten Sie dem Leser doch etwas für seine Ohren bieten wollen, lassen Sie ihm dennoch die Wahl, durch das Klicken des „Play“-Buttons. - Das sieht ja komisch aus!
Stellen Sie frühzeitig sicher, dass Ihre Webseite auch mit allen gängigen Browsern richtig anzeigt wird. Nicht alle Browser können alle CSS Elemente oder Programmiersprachen in der neusten Version wie gewünscht und erhofft darstellen. Optimieren Sie die Webseite für die am meist genutzten Browser. - Hört das den gar nicht mehr auf?
Vermeiden Sie zu lange Seiten. Leser scrollen nicht gern auf endlosen Seiten um nach den gewünschten Inhalten zu suchen. Die Seiten sollten kurz gefasst und gut strukturiert sein. - Ich find das einfach nicht!
Machen Sie es dem Besucher leicht und ermöglichen Sie es ihm, mit Hilfe eines Suchfensters auf der ganzen Seite nach Inhalten suchen zu können. - Nicht noch mehr Werbung!
Vorsicht ist geboten, bei der Anzahl der Werbeschaltungen auf der eigenen Seite. Ihre Leser werden den ganzen Tag mit Werbung konfrontiert, von daher sollten Sie die Nerven Ihrer Besucher nicht überstrapazieren. Zu viele Werbeflächen wirken abschreckend und verärgern den Besucher.
Natürlich könnte man diese Liste noch um einige Fehlerquellen erweitern. Doch viel wichtiger ist, dass man mit wenigen Schritten viele Dinge auf einer Webseite wesentlich verbessern kann.
Ich hoffe der Artikel hat euch gefallen. Wenn ihr auch mal ein Thema für einen Artikel habt, den ihr gerne schreiben möchtet, aber selbst keinen Blog habt, auf dem ihr ihn veröffentlichen könnt, dann her damit. Wenn es thematisch passt werde ich ihn gerne für euch veröffentlichen.
Google Chrome Frame ab sofort auch ohne Adminrechte nutzbar
Vor über einem Jahr hatte ich euch in dem Artikel Blog oder Website fit machen für den IE6 ja berichtet, wie man mit Hilfe des Plugins Google Chrome Frame dem Internet Explorer 6 die Welt von HTML5 eröffnen kann.
Das Problem ist aber meistens, das genau die Nutzer, die noch den IE6 verwenden, in einem Unternehmen sitzen. Diese können oft nicht selbst auf einen neuen Internet Explorer wechseln und da sie auch keine Berechtigung haben, Software zu installieren, können sie auch das Plugin nicht verwenden. Wie heute unter anderem bei Golem nachzulesen war, hat Google dieses Problem jetzt lösen können.
Mit der aktuellen Entwicklerversion ist kann jeder Nutzer, der nur über eingeschränkt Rechte verfügt Google Chrome Frame verwenden. Somit können Anwendungen, die noch den IE6 voraussetzen weiter genutzt werden und der Nutzer profitiert auf modernen Seiten gleichzeitig von den neuen Funktionen von HTML5, sofern die notwendigen Angaben im HTML-Quellcode gemacht wurden.
Es bliebt zu hoffen, dass möglichst viele Nutzer von dieser Möglichkeit erfahren und wir somit dem überfälligen Ende des IE6 vielleicht etwas näher kommen. Ich überlege zumindest, allen meinen IE6 Nutzern demnächst einen dezenten Hinweis zu geben, was ihnen mit dem Internet Explorer 6 entgeht, und was sie stattdessen sehen könnten.
Webdesign mit unzähligen Usability-Sünden
Ich habe ja schon viele Website gesehen, denen ein zeitgemäßes Layout fehlt. Auch waren einige dabei, die noch immer nicht verstanden haben, wieso man keine Framesets mehr einsetzen sollte. Aber was mir heute zufällig vor Augen gesetzt wurde, das hat selbst mich vom Hocker gehauen.
Ich war gerade mit dem Google Chrome Browser im Web unterwegs, als mir auf einer Seite angezeigt wurde, dass ein notwendiges Plugin fehlt. Normalerweise wird mir dann gesagt, dass das Windows Media Player Plugin fehlt, weil mal wieder eine Seite eine proprietäres Audio- oder Videoformat nutzt. Aber nein, heute war es mal das Java-Plugin. Entweder hat mein Chrome dieses Plugin wirklich nicht installiert oder aber es hängt damit zusammen, dass heute das immerhin 24. Update für Java 6.0 installiert wurde. So langsam nervt das auch. Zumal bei dem Update dann zu allem Überfluss auch noch mein Malware-Scanner Alarm geschlagen hat. Aber zurück zur Website und der Usability-Sünde schlechthin.
Stackoverflow: Helfen und helfen lassen mit Suchtpotential
Mein letzer Artikel ist schon etwas länger her. Hiermit möchte ich euch gerne verraten, wieso ich meinen Blog in den letzten Tagen nicht so oft aktualisiert habe. Beruflich und auch privat stieß ich oft auf Probleme oder Fragen, die mir die Webcommunity beantworten konnte. Sehr oft landete ich dabei auf stackoverflow.com und ich habe dort auch oft genau die richtige Antwort gefunden. Stackoverflow ist aber nicht nur ein weiteres Expertenforum sonder es geht einen Schritt weiter und wird damit zur ultimativen Frage- und Antwort-Plattform für Entwickler aller Art. Woran das liegt möchte ich hier kurz beschreiben:
RewriteRule mit Leerzeichen in der Zieladresse
Auf einer Seite die ich betreue wurde ich vor kurzem vor die Aufgabe gestellt eine RewriteRule in der .htaccess zu definieren, die auf eine PDF zeigt, die ein Leerzeichen im Dateinamen enthält. Das war gar nicht so einfach rauszufinden und selbst im sehr guten Forum von modrewrite.de konnte ich keine geeignete Lösung finden.
In URLs werden Leerzeichen einfach mit der Zeichenkette %20 ersetzt, aber das alleine führt noch nicht zum Erfolg. Da das Prozentzeichen ein spezielles Zeichen in Rewrite Rules darstellt muss es mit einem Backslash escaped werden. Eine funktionierende Rewrite Rule mit einem Leerzeichen könnte also wie folgt aussehen:
RewriteEngine on RewriteRule ^kurzer-dateiname.pdf$ dateiname\%20mit\%20Leerzeichen\%20.pdf
Wer also den Dateinamen nicht ändern kann um Leerzeichen zu ersetzen (z.B. durch Unterstriche) kann mit dieser Regel trotzdem einen schöneren/kürzeren Dateinamen über die .htaccess anbieten.
Das war es auch schon. Heute gibt es mal nur einen kurzen Artikel, aber viel mehr gibt es auch nicht dazu zu sagen. Außer vielleicht, dass ihr niemals versuchen solltet ein Leerzeichen in der Zieladresse zu verwenden, da sonst die gesamte .htaccess ungültig wird und der Server einen 500 Fehler für jede Seite zurückliefert.
Ich hoffe der Tipp konnte euch weiterhelfe. Kommentare sind wie immer gern gesehen!
Tutorial: Drag-and-Drop mit Scriptaculous – Teil 2: Droppables
Nachdem wir uns in Teil 1 des Tutorials mit der Draggable Klasse beschäftigt haben, wenden wir uns heute seinem Bruder der Droppables Klasse zu. Mit ihr können wir auf ein aufgenommenes Element reagieren. Eine typische Anwendung sind Einkaufkörbe auf Online-Shops. Ich möchte daher einen einfachen Einkaufswagen demonstieren.
Der Quellcode für dieses Beispiel
Zuerst einmal wieder der Quellcode für dieses Beispiel. Ich werde wie auch schon im ersten Teil des Tutorials die wichtigen Zeilen etwas genauer erklären. Die Zeilen 1-34 enthalten das grundlegende Gerüst der HTML-Seite sowie die Stylesheets, auf die ich nicht näher eingehen möchte:
Assoziatives Array als HTML Tabelle ausgeben
Sehr häufig wird gefordert ein assoziatives Array als HTML Tabelle auszugeben. Ich nutze hier sehr oft die implode() Funktion, um dabei mit möglichst wenig Quellcode zu dem Gewünschten Ergebnis zu kommen. Da ich meine Lösung wirklich sehr schön und genial einfach finde, wollte ich euch kurz die Funktion präsentieren. Als auszugebendes Array nehmen wir das MySQL-Debugging Array aus meinem vorherigen Artikel MySQL unter PHP debuggen mit einer eigenen MySQL Klasse.
function array_to_table($a){
$t='<table>';
$t.='<tr><th>'.implode('</th><th>', array_keys($a[0])).'</th></tr>';
foreach($a as $row){
$t.= '<tr><td>'.implode('</td><td>', $row).'</td></tr>';
}
return $t.='</table>';
}
// Ausgabe der Tabelle
echo array_to_table($mysqli->queries);
MySQL unter PHP debuggen mit einer eigenen MySQL Klasse
Bei einem meiner Projekte kam es zu ungewöhnlich langen Ladezeiten eines Formulars. Da hier allerdings auch sehr viele Datenbankabfragen ausgeführt werden müssen und dabei auch noch die Werte per COUNT() gezählt werden wunderten mich die Zeiten nicht wirklich.
Nun wollte ich natürlich wissen, welche Abfrage dabei besonders viel Zeit in Anspruch nimmt um dann gezielt optimieren zu können. Ich setze in dem Projekt auf die MySQLi Klasse von PHP. Da ich hierbei die Klasse objektorientiert nutze, war es sehr einfach möglich diese zu erweiterten. Eine Möglichkeit wäre es natürlich gewesen eine eigene Funktion zu schreiben, aber in diesem Fall hätte ich auch alle Skript anpassen müssen, in denen ich eine Query ausführe. Daher habe ich mich dazu entschlossen einfach die query() Funktion von MySQLi zu überschreiben. Hier ein stark vereinfachtes Beispiel, wie so etwas aussehen könnte:
Das Bermudadreieck des Internet Explorer – Oder: Wo zum Teufel ist mein Ordner hin?
Heute bin ich mal wieder auf ein sehr faszinierendes Problem mit dem Internet Explorer gestoßen. Meine erste Vermutung war mal wieder ein Programmierfehler im vielgeliebten IE6, aber der Fehler trat auch im Internet Explorer 7 auf.
Ich nutze in einem Projekt absolute Pfade in allen Dateinamen, Links und Formularen. Nun hatte ich aber im einem Formular dummerweise das Gleichheitszeichen nach dem Short Open Tag in PHP vergessen. Mein Formular sah also in verkürzter Form wie folgt aus:
<form action="<? ABSOLUTER_PFAD ?>form.php"> ... </form>
Tutorial: Drag-and-Drop mit Scriptaculous – Teil 1: Draggable
Heute möchte ich mein angekündigtes Tutorial über Drag-and-Drop starten. Das Ziel dieses Tutorials ist der Nachbau einer dynamischen Newsseite, wie ich sie in meinen Artikel Öffentlich-rechtlich und vorbildhaft – So muss eine Web 2.0 zu Olympia aussehen vorgestellt habe. Da eine solche Seite mit vielen verschiedenen Techniken zusammengesetzt ist, werden wir immer kleine Teile auf dem Schritt zur fertigen Seite nachvollziehen.
Im ersten Teil geht es um die Grundlage einer Seite mit Drag-and-Drop. Wir verwenden für dieses Tutorial die Drag-and-Drop Funktionalität von Scriptaculous, welches eine Erweiterung des Prototype Frameworks ist. Um die hier gezeigten Funktionen selbst nachprogrammieren zu können benötigt ihr also zuerst einmal die beiden Frameworks.
