Ein wirklich brauchbares Freeware-Tool – danke an die Hersteller ClerverStat.

Ähnliche Beiträge

• Adobe Browser Lab
• Suchmaschinenoptimierung (SEO)
• Der gescannte Text

• Windows XP
  • Chrome 3.0
  • Firefox 2.0
  • Firefox 3.0
  • Firefox 3.5
  • Internet Explorer 6.0
  • Internet Explorer 7.0
  • Internet Explorer 8.0
• Mac OS X
  • Firefox 2.0
  • Firefox 3.0
  • Firefox 3.5
  • Safari 3.0
  • Safari 4.0

Direkt zur Anwendung: Adobe Browser Lab

Über Adobe Browser Lab

Dreamweaver Erweiterungen: Part 1 & Part 2

Ähnliche Beiträge

• Free Monitor for Google
• 12 Animationen für Flash CS4
• Adobe Premiere Elements – Color Expert
• CSS 3-Unterstützung der Browser
• Icons helfen bei der Orientierung

Das schön am mobilem Web ist, dass es schon seit 1997 WAP als Übertragungsprotokol und WML als Sprache gibt. Aber leider hat sich dieses nicht wirklich durchgesetzt. Seit Oktober 2001 gibt es jetzt XHTML-MP als neue Sprache für das sogenannt WAP 2.0. Damit lassen sich theoretisch ganz gut Websites für mobile Endgeräte bauten. Und um das ganze auch noch nett aussehen zu lassen, gibt WCSS.

Mobile Web Best Practices 1.0

Das deutsche W3C hat dieses Jahr ein kleinen Guide herausgebracht, welches die wichtigsten Praktiken im Umgang mit dem mobilem Web herausstellt. Ich habe hier diese Punkte aufgegriffen und die dahinter stehenden Aussagen mal mit meinen eigenen Worten versucht zu erklären:

Gestalten für das Eine Web

Durch die kleineren Displays gerade für bei den Mobiltelefonen muss nicht nur das Design dementsprechend angepasst werden, sondern auch der eigentliche Inhalt. Durch diese Übergreifende Optimierung der Inhalte schafft man es die Kosten für die Erstellung zu minimieren und gleichzeitig mit Ausgabemedien zu unterstützen, was wiederum mehr Besucher auf die Seite bringt.

Einhalten der Webstandards

Ich habe keine Ahnung wie viele unterschiedliche Mobiltelefone es weltweit gibt. Aber ich glaube fast jedes hat seine eigene Spezifikation. Ich glaube es ist noch schlimmer als bei den verschiedenen Browser, es gibt einfach noch keine Normierung. Gerade deshalb sollte man sich als Designer unbedingt an die aktuellen Standards halten und valide Dokumente erzeugen. Denn nur so kann man eine technische Zugänglichkeit gewährleisten.

Vermeiden von Problemen

Durch die unterschiedlichen Displaysgrößen von Mobiltelefonen ist es fast ausgeschlossen mit festen Designs zu arbeiten. In den meisten Fällen kommt man mit flexiblen Designs die sich an der Breite des Displays orientieren besser klar. Das einspaltige Layout ist z.B. heutzutage ein sehr beliebtes Design. Man sollte aber auch Popups, Frames (auch IFrames) und Image Maps vermeiden da diese in den seltensten Fällen vernünftig funktionieren.

Beachten der Gerätelimits

Gerade die Unterstützung von zusätzlicher Web-Technologie kann bei vielen Geräten nicht vorausgesetzt werden. Viele unterstützen z.B. kein JavaScript. Was zur Folge hat, dass auch keine Cookies unterstützt werden. Selbst der Einsatz von speziellen Schriftarten kann schon zu Problemen führen, wenn diese im Gerät nicht installiert sind.

Optimieren der Navigation

Alle z.Z. auf dem Markt befindlichen Geräte besitzen keine Maus. Die Navigation erfolgt in den meisten Fällen über die Tastatur oder einen Touchscreen. Man sollte deshalb auf eine möglichst einfach zu bedienende Navigation achten. Durch die Vergabe von Tastatur-Nummer für wichtige Sprungziele und Funktionen kann die Benutzbarkeit deutlich erhöht werden. Auch sollten Einstiegseiten eine möglichst einfach einzugebende URI haben und Verlinkungen zu anderen Ressourcen eine Angabe über das Format enthalten.

Prüfen von Grafik & Farben

Nicht jedes Grafikformat was im Internet funktioniert kann auch auf mobilen Ausgabegeräten angezeigt werden. Hinzukommt, dass bei einigen Geräten zu große Grafiken einfach nicht angezeigt werden. Deshalb sollte man immer einen aussagekräftigen Alternativtext mit angeben. Auch ist zu beachten, dass Handys und PDAs sehr häufig im Freien benutzt werden und dadurch feine Nuancen im Bild verloren gehen.

Minimieren der Größe

Klar sollte sein, dass jeder Gewinn bei der Reduzierung von Dateigrößen zählt. Also sollte man nicht nur die Grafiken und zusätzlichen Ressourcen möglichst klein halten sondern auch die eigentliche Inhaltsseite und das dazugehörige CSS. Alles was nicht unbedingt gebraucht für die Formatierung gebraucht wird, sollte auch am besten gar nicht erst mit zum Endgerät übertragen werden.

Sparen am Datentransfer

Zusätzliche vermeidbare Übertragungen sollte man auf jeden Fall unterbinden. Zum Beispiel sind clientseitige, automatische Weiterleitungen auch über den Server regelbar. Auch können Verbindungen zu externen Ressourcen, z.B. Wetterbericht, sehr langsam sein und sollten deshalb vermieden werden.

Helfen bei Nutzereingaben

Freie Nutzereingaben können gerade bei Handys sehr umständlich sein. Besser ist es in diesem Zusammenhang wenn man hier mit Vorgaben arbeitet. Dadurch hält man die Tastendrücke relativ klein. Bei Formularfeldern hilft es den Benutzer ungemein, wenn es eine eindeutige, aussagekräftige Beschriftung existiert.

Planen für mobile Nutzer

Anders als beim Surfen über den normalen PC, wo man sich manchmal von einer Seite zur nächsten treiben lässt, wollen die Benutzer des mobilen Webs schnell und gezielt zu ihren Informationen. In den meisten Fällen wissen sie schon wo sie die Information finden, z.B. Bahnauskunft. Deshalb sollte der Inhalt bei mobilen Angeboten immer eine klare, nutzungsorientierte Sprache haben, der Seitentitle kurz und aussagekräftig sein, wichtige Inhalte von den weniger Wichtigen stehen und die Ablenkung von eigentlichen Inhalt möglichst gering ausfallen.

Ähnliche Beiträge

• Alle Türchen von 2007 sind offen
• Dreamweaver-Schulung für den Solar Verlag
• Transcending CSS
• Little Boxes
• Das Website Handbuch

Internetbenutzer sind meist auf der Suche nach Informationen. Sie haben dabei aber nur sehr wenig Zeit. Deshalb scannen sie die HTML-Seite nur nach wichtigen Schlagwörtern. Vergleichbar ist das mit dem Betrachten eines Plakates beim Vorbeifahren und zwar auf der Autobahn.

Dieser Artikel richtet sich besonders an die Redakteure von Websites, denn meistens wird der Text nicht vom Webdesigner oder -entwickler geschrieben sondern vom Kunden bzw. von einem Mitarbeiter des Kunden. Klar versucht man als Auftragnehmer erstmal die Texte zu überarbeiten also mediengerecht aufzubereiten, aber später, gerade bei einem CMS, ist das Sache des Kunden selbst.

Schreibstil & Wortwahl

Wählen sie ihren Schreibstil mit Bedacht. Nichts ist schlimmer als die falsche Wahl der Worte. Es sollte klar sein, dass ein Text für eine Klassik-Website eine andere Zielgruppe hat, als die von einer Jugendzeitschrift. Und deshalb sollte auch der Schreibstil dem angepasst sein. Aber wie kann man nun den Stil der Zielgruppe herausfinden? Am besten versucht man sich in die Situation der Zielgruppe hineinzuversetzen. Das gelingt am besten in dem man sich mit Zeitungen und Zeitschriften der Zielgruppe besorgt. Auch hilft es immer wieder Sendungen im Fernsehen bzw. im Radio zu verfolgen. Nach einer relativ kurzen Zeit bekommt man ein gutes Gespür für die richtigen Worte.

Doch aufgepasst, wenn man sich nicht genau in dem Metier auskennt merken das die Leser recht schnell. Dann lieber jemanden Fragen der aus der Szene kommt oder einen neutralen Stil benutzen.

Leser sind Suchmaschinen

Ähnlich wie eine Suchmaschine die Text nach Schlüsselworten absucht, machen das die Leser auch. Wenn der Leser also die HTML-Seite scannt, dann sucht er nach Wörtern die zu seiner Suchen passen. Ein kleines Beispiel: Geht man im Internet auf die Suche nach einem guten Sommerurlaub, dann sind Worte wie Reise, Urlaub, Sonne aber auch exclusiv, billig, allinclusive wohl am ehesten passend.

Wenn diese Worte dann auch noch möglichst früh im Text erscheinen ist die Chance dass der Betrachter weiterliest sehr hoch und das wollen wir doch eigentlich erreichen oder? Um solche Begriff im Text noch etwas mehr an Bedeutung gewinnen zu lassen, kann man sie zusätzlich entweder fett oder kursiv erscheinen lassen. Dann fallen sie noch mehr auf und Suchmaschinen finden diese Worte auch noch bedeutender. In diesem Zusammenhang sind auch Auflistungen sehr praktisch. Sie vermitteln in einer schnellen Übersicht alles wichtige.

Satzbau

Ich weiß zwar dass ich dazu neige ellenlange Sätze zu bilden. Und ich weiß auch dass das Falsch ist und nicht dem entspricht was ich hier gleich schreiben werden. Aber…

Das Lesen am Bildschirm ist sehr anstrengend und man sollte deshalb sich möglichst kurz halten. Das beinhaltet natürlich auch die Länge des Satzes selbst. Je kürzer der Satz ist um so einfacher kann er gelesen werden. Hinzu kommt noch, dass er dadurch auch verständlicher wird. Um z.B. die Verständlichkeit eines Text zu ermitteln gibt es den Lesbarkeitsindex von Rudolf Flesch und über einen kleinen Test kann man relativ gut heraus finden für welches Niveau der Text geschrieben ist.

Der kurz Einstieg

Jeder Text (Aufsatz) den wir schreiben hat einen klaren Aufbau. Einleitung, Hauptteil und zum Schluss eine Zusammenfassung. Bei Texten für das Internet sollte man aber so nicht unbedingt schreiben, denn dann würde man erst alles lesen müssen um das Ergebnis des Textes zu bekommen. So viel Zeit habe leider nur sehr Wenige die im Internet etwas suchen. Deshalb sollte man den Aufbau in etwa umkehren. Als erstes sollte man mit einer Zusammenfassung des Inhaltes beginnen und dann diese Zusammenfassung erklären. Die Leser im Internet wollen immer erst wissen um was es geht um dann genaueres zu erfahren. Aber selbst bei der ausführlichen Erklärung der einleitenden Zusammenfassung sollte man sich kurz halten. Steve Krug, einer der führenden Uability-Experten, schrieb in seinem Buch “Don’t make me think! Web Usability: Das intuitive Web” folgendes: Streichen Sie die Hälfte der Wörter auf jeder Seite, und kürzen Sie dann den Rest um die Hälfte. Ein recht wahre Aussage finde ich.

Was gehört nur alles in eines Text und was nicht. Am besten versuchen sie die wichtigsten W-Fragen zu beantworten: wer, was, wie, wann, wo, warum und aufblähende Füllworte wie: schon, übrigens, also, noch, demnach zu vermeiden.

lebendig schreiben & positive Gefühle wecken

Auch hier bin ich nicht unbedingt der Beste. Mit dem lebendigen Schreiben ist vor allem das Vermeiden eines Passives gemeint. Schreiben sie lieber in einer aktiven Form. Man sollte eher dem Leser direkt ansprechen, z.B. “drücke hier um den Download zu starten”. Auch helfen konkreten Beispielen, die in der Vergangenheit passiert sind, dem Leser besser sich in das Geschehen hineinzuversetzen. Bei einer Referenzliste könnten z.B. Zitate von zufriedenen Kunden neben den Projekten stehen. Dadurch wirken die Beispiele lebendiger und näher. Zugleich bekommt der Besucher der Website ein positiveres Gefühl beim Lesen, was oft zu einer glaubwürdigeren Darstellung der gesamten Website verhilft.

Ähnliche Beiträge

• Suchmaschinenoptimierung (SEO)
• Website – The Lakeside Heritage Society
• Website – Q’uchu
• Website – Watermelon Ministries
• Free Monitor for Google

In den letzten Jahren hat ein Umdenken stattgefunden, in dem man immer mehr das optische Design von der inhaltlichen Struktur trennt. Nicht nur das man jetzt fast ausschließlich mit externen CSS-Dateien arbeitet. Sondern man versucht auch den Inhalt in seiner Bedeutung zu strukturieren. Das ist die Semantic.

Das Branding

Fast jede Website besitzt einen Titel. Bei Firmen ist dies fast immer gleichgesetzt mit dem Firmennamen. Zusätzlich besitzen solche Titel auch immer ein Motto oder Slogan, die sogenannt Tagline. Der Site-Titel sollte, weil es sich ja um eines der wichtigsten Elemente auf der ganzen Website handelt, auf jeden Fall in einen <h1>-Tag gelegt werden. Bei der Tag-Line handelt es sich dann meist um eine Art Zitat, auch wenn es nicht immer eine Quelle dazu gibt. Also sollte man dafür den <blockquote>-Tag benutzen. Beide Elemente können dann wunderbar mit einen <div>-Kontainer gruppiert werden.

Die Navigation

Es gibt verschiedene Arten von Navigationen. Für mich gibt es 3 wichtige Navigationen.

Inhaltsnavigation

In ihr werden alle Inhalte die auf der Website präsentiert werden abgebildet und gruppiert. Ähnlich wie in einer Dokumentation oder einem Buch sollte die verschiedenen Inhalte einem roten Faden folgen. Weswegen ich für eine geordnete Liste plediere.

Servicenavigation

Neben den reinen Inhaltsseiten gibt es weitere Seiten auf der Website die sich um die Kommunikation, Bedienung der Website und dem Rechtlichen kümmern. Hier meine ich z.B.:

• Startseite,
• Kontakt,
• Imperssum,
• Inhaltsverzeichniss,
• Hilfe,
• Glossar und
• Stichwortverzeichniss.

Hier benutze ich meistens eine ungeordnete Liste.

Pfadnavigation

Gerade bei komplexeren Websites bzw. Website mit einer Verschachtelungstiefe von mehr als 2 Ebenen sollte der Betrachter über eine Brotkrümelspur, wie bei Hänsel und Gretel, zur Startseite also nach hause gebracht werden. Dabei eignet sich eine ungeordnete, ineinander verschachtelte Liste am besten.

Der Inhalt

Der Inhalt sollte auf jeden Fall mit dem Seitentitel beginnen und über der <h2>-Tag als zweit wichtigstes Element definiert werden. Alle weiteren Strukturierungen sind dann je nach Inahlt abhängig. Die häufigsten verwendeten Tag sind in diesem Zusammenhang:

• <p>,
• <img>,
• <ul>, <ol>, <dl>,
• <blockquote>,
• <table> und
• <form>

Die Seiteninformationen

Meistens legt man solche Informationen an das Ende der HTML-Seite. Dazu gehören z.B. das Copyright, ein rechtlicher Hinweis, Kontaktmöglichkeiten und vielleicht ein paar Bedienmöglichkeiten, wie:

• “nach oben” und
• “Seite drucken”

Ähnliche Beiträge

• Beschriftung von Containern
• Dreamweaver-Schulung für den Solar Verlag
• Transcending CSS
• Little Boxes
• Das Website Handbuch