Tags ‘Tools’

HTML Texte mit CSS formen

Webdesign | Sonntag, 14.03.2010 | Noch kein Kommentar

Das Layout von HTML Fließtext ist auf den meisten Websites eine recht langweilige Angelegenheit. Gerne würde mancher Webdesigner auf die aus dem Printbereich bekanten Layoutmöglichkeiten zurückgreifen. So ist es beim Desktop-Publishing kein Problem, etwa runden Text um ein rundes Bild herumfließen zu lassen. Bei Verwendung der CSS-Eigenschaft float fließt der Text zwar um das Bild herum, allerdings wieder in eckiger Form. Das verwundert nicht, denn Websites bestehen nun mal aus viereckigen Kästen, die übereinander, nebeneinander oder ineinander gestapelt werden.

Mehr lesen … »

Mouse-Tracking: Dem Besucher über die Schulter schauen

Webdesign | Sonntag, 07.02.2010 | Noch kein Kommentar

Je nach Zielsetzung einer Website soll der Besucher entweder möglichst ausgiebig das Angebot nutzen oder zu einer konkreten Handlung (etwa einer Bestellung) gelotst werden. Dies gelingt nur, wenn die Bedienoberfläche auf die Bedürfnisse und Fähigkeiten des Nutzers so abgestimmt wird, dass er sie schnell und einfach nutzen kann. Die Fachbegriffe hierfür lauten User Experience Optimization (kurz UXO) und Web-Usability (Benutzerfreundlichkeit). Beide Schlagwörter haben sich parallel durchgesetzt, verfolgen aber die gleiche Intention: Sie definieren die Bedürfnisse der Anwender als vorrangiges Ziel bei der Entwicklung von Websites. Ausgefallene Designs und sonstige Spielereien sind hingegen zweitrangig. Ein Paradebeispiel für die Umsetzung dieser Vorgaben liefert Amazon: Das Design ist alles andere als ansprechend oder innovativ. Es wurde der Zielsetzung - das suchen und bestellen von Artikeln - vollkommen untergeordnet, welches selbst unerfahrenen Surfern mühelos gelingt.

Mehr lesen … »

CSS-Eigenschaften plattformübergreifend visualisieren

Browser, Webdesign | Samstag, 02.01.2010 | Noch kein Kommentar

Wer Informationen über den DOM-Zweig eines CSS-Elementes sucht, kann nicht immer auf Firebug zurückgreifen. Insbesondere auf betagteren Systemen bzw. mobilen Lösungen kann der zusätzliche Ressourcenverbrauch des Firefox-Plugins als störend empfunden werden. Mehr lesen … »

Neu laden des Browserfensters automatisieren

Browser, Webdesign | Samstag, 26.12.2009 | 1 Kommentar

Viele Webentwickler benutzen bei der Erstellung des Codes ihren Lieblingseditor, überprüfen aber dennoch die Änderungen permanent in ihrem Webbrowser. Das führt dazu, dass ein ständiges hin- und herspringen zwischen Code-Editor und Browser erfolgt. Dabei sind stets mehrere Schritte notwendig: Zunächst speichert man den Code im Editor, wechselt dann zum Webbrowser und aktualisiert schließlich den Inhalt der Seite. Zwar lässt sich die Prozedur durch die Verwendung von Tastenkürzeln erheblich beschleunigen, dennoch kostet jede Wiederholung Zeit und Nerven.

Mehr lesen … »

Bildschirmauflösungen online testen

Browser, Cross-Browser-Test, Webdesign | Freitag, 18.12.2009 | 1 Kommentar

Die Bildschirmauflösung entscheidet darüber, welche Bestandteile einer Webseite sichtbar sind, ohne dass der Nutzer mit der Maus scrollen muss. Dieser sog. Betrachtungsausschnitt sollte mit Bedacht gewählt werden. Leider lehrt die Erfahrung, dass viele Besucher “scrollfaul” sind. Sobald man auf einer Website nach unten scrollen muss, verliert man bestimmte Nutzer. Ein interessantes Beispiel für den Einfluss des richtig gewählten Ausschnitts erläuterte kürzlich Bruno Bowden, Senior Software-Entwickler bei Google anhand eines Google-internen Beispiels: Als man bei Google Earth den Download-Button um 100 Pixel nach oben verschob, ist die Zahl der Personen, die sich den Dienst runtergeladen haben, prompt um zehn Prozent gestiegen. Vermutlich hatten diese zehn Prozent zuvor den Button schlichtweg übersehen. Das Beispiel verdeutlicht die Relevanz, alle essenziellen Informationen im Betrachtungsausschnitt möglichst vieler Besucher zu platzieren. Das deckt sich auch mit den Ergebnissen einer Studie, nach der 80 Prozent der Besucher sich primär auf den obersten Bereich einer Website fokussieren. Die Häufigkeit der verwendeten Bildschirmauflösung lässt sich übrigens bei diversen Statistikdiensten nachlesen.

Um das Aussehen einer Website bei verschiedenen Auflösungen auszutesten, greifen viele Webdesigner auf das Firefox-Plugin Web Developer zurück (Siehe Menüpunkt “Größe”). Eine internetbasierte Alternative bietet ViewLike.us an. Einfach rechts oben die URL eingeben und in der Menüleiste eine der sieben gängigsten Bildschirmauflösungen auswählen. Als Besonderheit kann man zusätzlich noch die exotischen Auflösungen des iPhone und des Wii-Browsers testen. Einen ähnlichen Ansatz verfolgt auch Seite resizeMyBrowser. Bedenken sollte man allerdings, dass beide Dienste nicht auf den Nettobereich des Browserfensters widerspiegeln. Auch Besonderheiten der verschiedenen Browserversionen bleiben unberücksichtigt. Für eine grobe Orientierung sind beide Online-Tools aber auf jeden Fall nützlich.

Etwas anders geht der Dienst Google Browser Size an die Problematik heran. Er blendet eine überlagernde Grafik ein, die anzeigt, welcher Bereich der Seite bei gängigen Fenstergrößen sichtbar ist. Grundlage für die Einschätzung, welcher Anteil der Websurfer Seitenelemente in einem bestimmten Bereich ohne zu scrollen findet, sind statistische Auswertungen von google.com. Die Bedienung ist simpel: Einfach die URL der eigenen Webseite oben in das Textfeld eingeben und auf “Go” klicken. Zusätzlich kann man noch durch einen Klick auf “Opacity” der Transparenzgrad der überlagernden Grafik verändern. Leider funktioniert der Dienst im Moment nur bei linksbündigen, nicht zentrierten Seiten.

Einen ähnlichen Ansatz verfolgt schließlich Where Is The Fold?. Auch hier wird eine überlagernde Grafik eingeblendet für gängige Auflösungen bei maximierten Browserfenster. Auch diese Vorgaben sollten nur als grober Richtwert interpretiert werden, da Symbol-, Adress- und Statusleisten je nach Browser-Einstellungen der Besucher unterschiedlich viel Platz einnehmen.