Beiträge

Webdesign: Wie Ihre Website optimal auf Farbenblindheit eingestellt ist

/1 Kommentar/in /von

Bei der Konzeption und Umsetzung eine Website müssen viele Faktoren beachtet werden. Dazu zählen nicht nur inhaltliche Aspekte oder die gelungene Durchführung einer Suchmaschinenoptimierung. Auch die Optik und Struktur besitzen facettenreiche Eigenschaften und führen einige Stolpersteine mit sich. Diese haben wir zuletzt in einem Artikel zum Thema „Barrierefreies Webdesign“ vorgestellt. In diesem Artikel wollen wir nun das Thema Farbenblindheit bzw. Farbfehlsichtigkeit näher beleuchten. Denn die Sehschwächen zählen zu den häufigsten Gründen, weshalb User die Optik einer Website nicht einwandfrei genießen können. Experten schätzen, dass etwa fünf bis zehn Prozent der Bevölkerung unter den Symptomen leiden. Männer sind dabei wesentlich öfter betroffen als Frauen. Was können Websitebetreiber also tun, um dieser Erscheinung entgegen zu wirken?

Worauf muss ich beim Webdesign achten?

Wer eine Website vorausschauend plant, kann in wenigen Schritten eine Internetpräsenz schaffen, die User – ob mit oder ohne Farbenblindheit – ästhetisch anspricht. Zu den häufigsten Störungen zählen unter anderem die Rot-Grün sowie die Gelb-Blau-Schwäche. Den beiden Farbsehschwächen gleichermaßen gerecht zu werden, ist nicht leicht. Deshalb sollten sich Websitebetreiber nicht zu stark unter Druck setzen, denn alle Symptome kann man nicht berücksichtigen. Jedoch können Farben in entsprechenden Kombinationen ausgewählt und starke Kontraste für eine attraktive Optik genutzt werden. Wichtige Elemente wie Diagramme sollten zudem farbunabhängig gekennzeichnet sein. So können Missverständnisse bei der Rezeption von vornherein vermieden werden. Für die Umsetzung eines neuen Konzepts stehen Webdesignern nützliche Tools zur Verfügung.

Diese Tools helfen bei der Gestaltung

Eine Vorstellung, wie ein Besucher mit Farbsehschwäche die eigene Website wahrnimmt, vermittelt die Website colorfilter.wickline.org. Einfach die URL der entsprechenden Website eingeben, einen Farbfilter wählen und schon wandelt der Simulator die Farben so um, wie sie Farbenblinde je nach Leiden sehen. Ebenfalls hilfreich ist das Tool ColorSchemeDesigner. Mit ihm können die verschiedenen Typen der Farbenblindheit mithilfe einer Farbpalette simuliert und unterschiedliche Farbekombinationen getestet werden. Dabei stehen diverse Optionen wie monotone, komplementäre bis hin zu analogischen Farbkombinationen zur Wahl.

Wie geeignet bestimmte Farbzusammensetzungen für Farbenblinde sind, lässt sich auch mit dem Accessibility Color Wheel überprüfen. Das Tool orientiert sich an den Vorgaben des WCAG 1 und WCAG 2 (Web Content Accessibility Guidelines) und ermöglicht es, jeweils die Farben für den Vorder- und den Hintergrund der Website festzulegen.

Anschließend demonstriert die Anwendung, wie unterschiedlich die Farben bei verschiedenen Formen der Farbenblindheit wahrgenommen werden. Dank der Einstellungsmöglichkeit von Vorder- und Hintergrundfarben erschließt sich dem User, wie stark der Kontrast wirkt und ob er für Farbenblinde ausreicht.

Im Vergleich dazu zeigt es die Farbtöne, wie sie Menschen ohne Einschränkungen sehen. Hier kann übrigens mit Farbcodes gearbeitet werden, dadurch lassen sich Farbtöne von Corporate Designs punktgenau analysieren.

Mit diesen nützlichen Tools können Webdesigner Internet-Seiten sowohl vor dem Bau einer Internetpräsenz als auch beim Re-Design dezente Anpassungen vornehmen. Das steigert den Genuss des Internetsurfens für Farbenblinde und erhöht für KMU gegebenenfalls die Zahl potenzieller Kunden.

Weitere Infos (externe Seiten):

Sie haben die Ideen – Wir liefern die Lösungen!

/in /von

In den Ideenschmieden rund um den Globus entstehen täglich neue Ansätze, um die Präsentation von Webseiten neu zu erfinden und mit der fortschreitenden Entwicklung der Webtechnologien sowie der damit einhergehenden wachsenden Vielzahl an Möglichkeiten für vollkommen neue Lösungsansätze machen das Internet und alle unmittelbar verbundenen Bereiche zu einer Branche im ständigen Wandel im Zeichen des Fortschritts.

Für die Weiterentwicklung ihres eigenen Projekts haben sie eine schlagende Idee für die Erweiterung der Funktionalität ihrer Webseite, etwa der Neugestaltung ihres des Eingangsportals ihrer Webseite, einer Erweiterung ihres Online-Shops oder eines Katalog-Plugin für ihre Produkte, aber das Know-How zur Umsetzung fehlt ihnen dabei?

Wissen was – aber nicht wie? Kein Problem! Die Austrianweb Group hilft kompetent!

Leider kommen die preislichen Vorstellungen von etablierten Agenturen der neuen Medien und die finanzielle Leistungsfähigkeit bereits bei der Erstellung eines unverbindlichen Kostenvoranschlages selten auf einen Nenner und auf der Strecke bleibt der Kleinunternehmer, der zwar eine grandiose Idee hat, aber keine Partner zur Umsetzung dieser Projekte für seine Webpräsenz findet.

Dieser Engpass, das Missverhältnis zwischen Angebot und Nachfrage, hat sich gerade in der unteren bis mittleren Schicht der privaten Unternehmen zu einem solchen Grad ausgebildet, das man schon von einer gewissen Hemmung bei der Innovationsfähigkeit dieser Unternehmensschicht sprechen kann, welche künstlich durch den Overhead an Kosten und Investitionshöhen gravierende Ausmaße angenommen hat und von uns daher folgerecht erkannt wurde und mittlerweile einen erfolgreichen Geschäftszweig zur Zufriedenheit beider Parteien bildet.

Hohe Leistung und Qualität bei moderaten Kosten – Realistische Projektplanung ohne ausufernde Budgets

Als Unternehmen des österreichischen Mittelstands, welches in der alltäglichen Anwendung von Webtechnologien sein Tätigkeitsfeld findet war es daher nur folgerichtig, uns für die Wünsche mittelständischer Unternehmer zu öffnen. Ab-seits der Marktlogik, für bestehende Nachfragen ein Angebot zu schaffen, sehen wir vom emotionalen Standpunkt dazu angehalten, auch für kleinere Betriebe mit geringer finanzieller Leistungsfähigkeit das Tor zum weltweiten Datennetzwerke Internet zu öffnen.

Für die Abdeckung solcher Anfragen haben wir uns in der Austrianweb Group darauf eingerichtet, zu verträglichen Preisen die Umsetzung kleiner und mittlerer Zusatzfunktionen und Module für ihre Webseite anzubieten. Wir arbeiten dabei mit gängigen Technologien, Methoden und Konzepten in Scriptsprachen wie Java, Javascript, AJAX, welche nahtlos in ihre bestehenden Systeme eingebettet werden.

Alle gängigen Systeme sind uns sympathisch – Ihre Ideen sind unsere Herausforderung

Als klassischer Anbieter für Internetdienstleistungen fasst Austrianweb neben der Planung und Erstellung von Webseiten nach ihrem Wunsch bei einer Vielzahl anderweitiger Services. Dabei decken wir eine Vielzahl moderner Plattform-CMS ab, von WordPress, über Joomla bis zu einem ausgewachsenen Typo3-System bringen wir jedes System in nahezu jeder stemmbaren Größe nach ihren Wünschen ins Internet. Unser Standbein, liegt bei der On- wie Off-Page Optimierung von Webseiten. Die Suchmaschinenoptimierung ist gerade im international globalisierten Wettbewerb eine mächtige Waffe für die Lenkung von Kundenströmen und der Erweiterung der eigenen Reichweite für Unternehmen, Produkte oder Marken.

Wir beraten sie gerne unverbindlich und gehen auf ihre Anfragen stets detailliert und vor allem ergebnisorientiert ein und schaffen durch unsere Exzellenz in diesem Fach eine Expertenstellung, welche ihnen bei der Konzeption ihrer Ideen ein mächtiges Werkzeug ist. Wir freuen uns über jeden neuen Interessenten und begrüßen Sie auch in Zukunft auf unserer Webpräsenz!

Austrianweb – Sie haben die Ideen – Wir bieten ihnen die Lösung!

Mobiles Webdesign – Tipps und Tricks zur Umsetzung

/1 Kommentar/in /von

Die Rezeption vom Websites auf mobilen Endgeräten gewinnt für das allgemeine Surfverhalten immer mehr an Bedeutung. Diese Entwicklung sollte vor allem von Unternehmen berücksichtigt werden, die auf eine starke Online-Präsenz bauen. Denn auch sie werden von potenziellen Kunden zunehmend über Smartphones und Tablet-PCs besucht. Um eine optimale Darstellung zu erzielen und den Besuch über mobile Endgeräte für die User so komfortabel wie möglich zu gestalten, gilt es das Webdesign anzupassen. Doch was sind hierbei die wichtigsten Faktoren? Wie bringt man eine Website auf den neusten Stand in puncto mobiles Webdesign?

Gut zu wissen: die essentiellen Grundlagen

Ein entscheidender Faktor bei der Darstellung von Seiten auf mobilen Geräten ist das responsive Webdesign. Dieses zeichnet sich durch flexible Strukturen im Websiteaufbau aus, was eine einwandfreie Anpassung an mobile Geräte überhaupt erst ermöglicht. Das betrifft unter anderem die Rastersysteme sowie das Framework und Layout. Die Website passt sich automatisch an die Breite des Bildschirms an und liefert so die beste Wiedergabe der Inhalte. Beim traditionellen Webdesign war es noch nötig, mehrere Versionen der Website zu entwickeln, um den verschiedenen Bildschirmauflösungen gerecht zu werden. Das responsive Webdesign ist demnach eine große Erleichterung für die professionelle Außendarstellung von Unternehmen.

Die dominierenden Betriebssysteme auf mobilen Geräten sind Google Android OS und Apple iOS. So stark die Systeme auch miteinander konkurrieren, beide setzen auf HTML5 mit CSS3. Die Programmier- und Stylesheet-Sprachen werden in Zukunft zu den wichtigsten Tools im Webdesign. Des Weiteren wird Flash in naher Zukunft ausgemustert, da der Adobe Flash Player für mobile Geräte nicht mehr verfügbar ist. Stattdessen werden Javascript-Plugins wie jQuery die notwendigen Zutaten für eine schicke Website ergänzen. Eine große Auswahl an jQuery-Plugins helfen bei der Gestaltung innovativer mobiler Websites. Bei der Neuentwicklung von Internetauftritten ist die Verwendung dieser drei Bestandteile empfehlenswert, denn sie bieten breitgefächerte Möglichkeiten für kreative Ideen und die beste Kompatibilität in der Darstellung.

Inspiration bei Technik und Optik

Auch bei der Optik gibt es bemerkenswerte Trends: So kommen immer öfter externe Fonts zum Einsatz, etwa über das Angebot von Google. Ein weiterer Trend sind zentrierte Header. Diese eignen sich hervorragend für den universellen Einsatz auf Desktop Browser und mobile Browser, da sie auch bei einer geringen Auflösung von Smartphones ihre Wirkung entfalten. Gleichzeitig werden sie immer öfter mit einer Call-to-Action ausgestattet. Diese Aufforderung zur Handlung locken Mobilnutzer bequem zur Kontaktaufnahme mit dem Anbieter. Dadurch kann die Konversionsrate enorm gesteigert werden. Neben einem attraktiven Webdesign und informativen Inhalte sorgt ergänzend die Suchmaschinenoptimierung für Traffic. Beim mobilen Computing kommt es darauf an, eine möglichst hohe „User Experience“ zu schaffen. Dies gelingt unter anderem durch kurze Aktionswege und optische Reize. Mit den aktuellen Trends können diese Ansprüche sehr gut erfüllt werden.

Weitere Infos (externe Seiten):

[related-links]

Was sind Google Web Fonts und wo und wie wendet man sie an ?

/in /von

Google standardisiert das Internet – Das ist eine Erkenntnis, der man sich nur schwerlich entziehen kann. Durch eine Vielzahl an Projekten und der Mitarbeit in vielen Gremien hat das Unternehmen seit seiner Gründung Mitte der 1990er für eine klare Standardisierung des Internets in vielen Belangen, von der Definition von HTML bis hin zur Einführung neuer Technologien zur Darstellung multimedialer Inhalte gewirkt, zum Vorteil aller.

Dieses Ziel, neue Standards zu setzen, hat sich auch in den Google Webfonts niedergeschlagen: Wo früher einheitliche Fonts verwendet wurden, ermöglicht der Service den Gestaltern heute die Nutzung einer Breiten Palette von Schriftarten bei der Gestaltung ihrer Webseiten, ohne dabei Plattform-gebundene proprietäre Fonts nutzen zu müssen, die die Gestaltung gerade dynamisch generierter Inhalte beeinflussen würde.

Was sind also Google Webfonts, so im genauen? Google stellt mit diesem Projekt eine Reihe zur kostenlosen Verwendung freier Fonts zur Verfügung die sie bei der Gestaltung ihrer Webseite nutzen können. Seit sich die CSS3-Funktion „@font-face“ auch bei Mozilla Firefox durchgesetzt hat, erlebt diese eine wahre Hochphase, da es durch diesen Befehl möglich ist, extern und ohne Zutun des Nutzers möglich ist, externe Schriftarten in das eigene Design einzubinden und so auch dynamische Texte in Schriftarten einzubinden, die gar nicht lokal beim User vorliegen, sondern nach Bedarf, hier bei den Quell-Repositories von Google nachgeladen werden.

Der Vorteil liegt vor allem bei der Lizenzierung der Schriftarten: Da viele kommerzielle Fonts nicht für die Bereitstellung durch ebensolche Funktionen wie „@Font-Face“ vorgesehen sind, stößt Google in eine Marktlücke, in der sie eigene Fonts verbreitet, über deren Lizenzierung das Unternehmen sicherstellt, dass sie frei verwendet werden können, ohne dabei den Designer mit untragbaren Lizenzgebühren zu belasten. Hierfür spricht auch das Motto von Google Webfonts: „Making the web beautiful“ – „Wir machen das Web schöner“

Das trifft durchaus zu, denn durch die mehr als 500 Fonts, die Google in diesem Projekt zur Nutzung bereit stellt, bietet sich eine große Fülle an gestalterischen Möglichkeiten, die auch von der Community genutzt werden, wie die Vielzahl an Adobe Photoshop Plug-Ins sehr deutlich beweist. Das Programm, das aktuell den faktischen Standard in Sachen Webdesign darstellt – da in allen größeren Agenturen als Werkzeug für das Design von Internetseiten genutzt, ermöglicht es durch diese Plug-Ins, valide Google Webfonts in die Gestaltung einzubinden und später korrekt bei der Darstellung als fertige Webseite auszugeben.

Damit die Datenübertragung besonders gering bleibt – viele Fonts haben in ihren mindestens 3 Formaten für die unterschiedlichen Plattformen durchaus ein Volumen an 1 Megabyte und mehr – werden die Fonts an der Schnittstelle Seitens Google komprimiert übertragen und erst auf dem Zielgerät entpackt: So ist ein schneller Seitenaufbau garantiert und die Verwendung von Webfonts nicht nur auf die Theorie beschränkt, die an den nicht überall verfügbaren Breitbandanschlüssen scheitert. Besonders gut arbeitet in diesem Zusammenhang das Projekt mit dem hauseigenen Browser Google Chrome zusammen, der sich nach und nach zum eindeutigen Marktführer auf allen x86- und x64-Plattformen entwickelt und damit das Tempo und die Richtung für die Konkurrenz vorgibt, seit der Mozilla Firefox durch einige Projektfehler vom Schnellstarter Chrome abgelöst wurde.

Die Google Webfonts sind aber nicht nur auf stationären Geräten Verfügbar: Durch die Google Fint API wurde es ermöglicht, die Schriftarten auch ebenso einfach in die beliebten Apps der Mobilen Geräte auf der Plattform Android einzubinden, denn die Gestaltung der Mini-Programme auf den mobilen Begleitern erfolgt im Regelfall ebenfalls durch das hochaktuelle CSS3, und die API stellt eine konkrete Möglichkeit da, die Corporate Identity auch in den mobilen Angeboten ihrer Kunden und Projekten zu gewährleisten. Das funktioniert so gut, das es sogar auf der Konkurrenzplattform iOS funktioniert, da die API intelligent auf die verwendete Plattform reagiert und so auch für die Apple-Nutzer stets den richtigen Font unkompliziert bereitstellt und sich so ganz neue Möglichkeiten in der Gestaltung mobiler Anwendungen und Webseiten ergeben.

Die Zielsetzung, der Quasi-Standard der Branche bei der Einbindung von systemfremden Schriftarten zu werden, ist noch nicht ganz erreicht, doch scheint in Anbetracht der massiven Vereinfachung der Zugänglichkeit und vor allem des langfristigen Hostings der Schriftarten durch Google nur noch eine Frage der Zeit zu sein, da die vielen Nischenlösungen, wie etwa das eigene Hosting von Free Fonts entfällt und schlichtweg auf das Angebot von Google zurück gegriffen wird, denn eines ist sicher: An Rechenleistung und Speicherplatz mangelt es dem Internetriesen Google ganz sicher nicht. Das lässt auf einen neuen, einfachen Webstandard vorausblicken, der das Internet eben doch ein wenig schöner machen wird, ganz nach dem eigenen Motto für Google Webfonts.

SEO-Wording: Stolpersteine erkennen und umgehen

/in /von

Eine der wichtigsten Komponenten bei der Suchmaschinenoptimierung sind die redaktionellen Inhalte. Ob Meta-Daten, Website-Inhalte oder Bildbeschriftungen: Durch den Einsatz relevanter Keywords können sämtliche Texte für eine bessere Sichtbarkeit bei Google & Co. genutzt werden. Bei der Auswahl und der Verwendung von Keywords gibt es jedoch einige Stolpersteine, die auf den ersten Blick unwichtig erscheinen, die aber die Resultate von SEO stark beeinflussen können. Deshalb wollen wir die Fallen einmal ins Bewusstsein rücken und verdeutlichen, wie geringfügig diese erheblichen Fehler sein können.

1. Zuviel Fachwissen bei der Keyword-Wahl

Bei der Wahl der Schlagwörter sollten SEO-Manager nicht nur mit dem eigenen Fachwissen herangehen. Vielmehr sollten die Begriffe aus Sicht des Kunden gewählt werden. Wonach suchen diese, um auf Ihre Leistungen zu stoßen? Welche abweichenden Laienbezeichnungen wählen sie gegebenenfalls für Ihre Produkte? Die Keywords sollten so klar und unkompliziert wie möglich sein. Fachtermini und Marketing-Begriffe können sich kontraproduktiv auf den Besucher-Traffic auswirken. Die Zielgruppe ist beim Aussuchen der Keywords der entscheidende Faktor. Dabei spielen auch Altersgruppe, Region und Bildungsstand der Kunden eine Rolle.

2. Überschriften für SEO ungenutzt lassen

Textüberschriften werden von Website-Betreibern häufig bei der Suchmaschinenoptimierung übersehen. Dabei bieten die h1-, h2- und h3-Überschriftenattribute ein großes Potenzial für das Ranking. Sie werden von den Suchmaschinen wie alle Texte gecrawlt und helfen dabei, die Inhalte nach ihrer Wichtigkeit zu sortieren. Suchbegriffe können hier also hervorragend untergebracht werden. Aufgrund ihrer hohen Funktionalität erhalten Überschriften von den Robots sogar eine höher Gewichtung als die beigefügten Textabsätze auf der Seite. Der Einsatz lohnt sich also! Pro Seite sind ein bis maximal zwei eingebaute Schlagwörter in den Überschriften ratsam.

3. Meta-Keywords unterschätzen

Experten streiten über die aktuelle Bedeutung von Meta-Keywords: Einige behaupten, sie hätten in den letzten Jahren an Bedeutung verloren. Andere hingegen messen den Meta-Keywords nach wie vor eine wichtige Rolle bei. Fakt ist: Es ist recht unkompliziert, die Schlagwörter einzufügen, und schaden kann die Maßnahme auf keinen Fall. Deshalb sollten KMU sie trotz aller Uneinigkeit ruhig anwenden. Zu beachten ist bei den Meta-Keywords, das sie genutzten Schlagwörter bereits auf der Seite vorkommen. Die Meta-Keywords dienen als eine Art Zusammenfassung der Seiteninhalte. Werden nun völlig irrelevante Schlüsselwörter eingesetzt, dann werten die Suchmaschinen diese schnell als Spam.

4. Viele Tippfehler, zu wenig Schreibvarianten

Auf einer Website gilt es, Schussel- und Schreibfehler zu vermeiden, denn Buchstabendreher und ähnliches verhindern, dass die eigene Website bei Suchanfragen gefunden wird. Bei der Schreibweise von Wörtern empfiehlt es sich außerdem, flexibler zu sein. Vor allem bei Fremdwörtern wie „Portemonnaie“ gibt es zahlreiche Schreibvarianten, die bei Suchanfragen relevant sind. Eine Dehnung der Rechtschreibung im Online-Bereich erfordern auch Komposita. Werden mehrteilige Substantive in der deutschen Grammatik gewöhnlich durch einen Bindestrich miteinander verbunden, so hat sich im World Wide Web zunehmend eine lockere Schreibart durchgesetzt. Immer öfter sieht man Wortbildungen wie „Social Web Profile“ statt „Social-Web-Profile“. Diese Entwicklung begründet sich auch in der Suchmaschinenoptimierung, da User bewusst oder unbewusst die komfortabelste Eingabe wählen.

Wer diese Stolpersteine erkennt und aus dem Weg räumt, der kann die OnPage-Optimierung seiner Webpräsenz effizient gestalten.

Barrierefreies Webdesign: Das gilt es zu beachten

/in /von

Bei der Gestaltung einer Website denken KMU nur selten an Menschen mit Behinderungen. Doch auch User mit kognitiven oder körperlichen Störungen surfen im Web, häufig selbstverständlich mit dem Intention, Produkte und Leistungen zu erwerben. Zu den Einschränkungen zählen etwa Farbenblindheit, Taubheit, motorische Störungen in der Sehkraft oder auch Konzentrations- und Lernschwierigkeiten. Um diesen potentiellen Kunden den Besuch auf einer Unternehmens- oder Produktwebsite zu erleichtern, sollten beim Webdesign die sogenannte Web Accessibility berücksichtigt werden. Darunter versteht man den Zugang bzw. die Rezeption von Webinhalten. Die Accessibility lässt sich bereits mit einfachen Mitteln umsetzen. Doch nach welchen Vorgaben sollten sich Webdesigner richten?

Guidelines für barrierefreie Webseiten des W3C

Wer sich mit behindertengerechtem Internet-Surfen auseinandersetzt, der kommt an einem Gremium nicht vorbei: dem W3C. Das „World Wide Web Consortium“ regelt die Standards für barrierefreies Webdesign und hält diese in den Web Content Accessibility Guidelines (WCAG)2.0 fest. Dieses Regelwerk ist in vier Prinzipien unterteilt, die als Fundament dienen:

1. Wahrnehmbar – Informationen und Bestandteile von Websites müssen so präsentiert werden, dass der Benutzer sie wahrnehmen kann.

Dieses Prinzip fordert unter anderem Textalternativen zu nicht Nicht-Text-Inhalten wie ASCII-Art oder Emoticons, damit dem Benutzer die Wahl zur Content-Rezeption bleibt. Diese Alternativen können zum Beispiel Braille oder eine Großschrift sein. Rein dekorative Nicht-Text-Inhalte sollten so implementiert werden, dass assistierende Techniken diese problemlos ignorieren können. Bei Audio- oder Videoinhalten empfehlen sich Untertitel oder die Übersetzung in Gebärdensprache.

2. Bedienbar – Alle Bestandteile der Website inkl. Navigation müssen für die Benutzer bedienbar sein.

Dieser Punkt bezieht sich vor allem auf die Verfügbarkeit aller Funktionen über die Tastatur. Darüber hinaus sollten Zeiteinteilungen vermieden werden, um den Benutzern genügend Zeit zu gewähren, die Inhalte der Website zu studieren. Blinkende oder anderweitig animierte Elemente sollten die Option beinhalten, diese pausieren lassen können. Insgesamt ist eine flexible, aber einfache Website-Struktur empfehlenswert.

3. Verständlich – Informationen und Bedienung der Website müssen für die Benutzer verständlich sein.

Hier wird noch einmal die inhaltliche und funktionale Struktur von Webpräsenzen angesprochen. Beträgt etwa der redaktionelle Teil einer Website ein Leseniveau, das über eine niedrige, sekundäre Schulbildung hinausreicht, dann sollte eine zweite, versimpelte Variante bereit gestellt werden. Dabei sind Fremdwörter, Abkürzungen oder ähnliches zu vermeiden. Das Prinzip der Einfachheit gilt auch für die Navigation der Seite sowie integrierte Widgets etc.

4. Robust – Alle Informationen müssen so robust sein, dass verschiedene Benutzeragenten inklusive assistierender Technik diese interpretieren können.

Ein weiteres Kriterium ist die Kompatibilität der Website mit Benutzeragenten und assistierenden Techniken. Die Umsetzung bezieht sich vor allem auf die Syntax der Seite sowie auf verschiedene Skripte und Werte. Für die meisten Aspekte der vier Prinzipien stehen übrigens diverse Analyse- und Erkennungs-Softwareprogramme als Unterstützung zur Verfügung.

Wie sollte eine barrierefreie Website aussehen?

Eine Website im Sinne einer hohen Web Accessibility zu entwickeln, muss sich nicht negativ auf die Optik auswirken, ganz im Gegenteil. Eingebettet in ein durchdachtes Gesamtkonzept, fügen sich die Maßnahmen für barrierefreies Surfen einwandfrei in die Webpräzenz und das (Corporate) Design ein. Um diese Herausforderung glänzend zu meistern, ist die enge Zusammenarbeit zwischen Designer und Programmierer unverzichtbar. Es gilt genau zu klären, wie sich Design mit den WCAG 2.0 vereinen lässt und welche behindertengerechten Techniken notwendig sind.

Im Anschluss können noch Mittel zur Steigerung der Sichtbarkeit wie Suchmaschinenoptimierung integriert werden. Die Investition in eine barrierefreie Website lohnt sich, da diese nicht nur die Kundenreichweite erhöht, sondern auch ein Stück weit unternehmerische Social Responsibility demonstriert.

Weitere Infos (externe Seiten):

[related-links]

Robots.txt – Anweisungen für Suchmaschinen

/in /von

Mit der Datei robots.txt können Anweisungen an Suchmaschinen übermittelt werden, um diesen das Auslesen von Webverzeichnissen zu gestatten oder zu verbieten. Die Anweisungen gelten für das gesamte Webprojekt. Alternativ müsste jede HTML-Datei in den Metatags entsprechende Hinweise liefern, was jedoch nur für die jeweilige Datei und gegebenenfalls Verweise Gültigkeit hat. Die robots.txt muss im Wurzelverzeichnis der Domain abgelegt werden.

Textdatei mit Datensätzen

Als reine Textdatei kann die robots.txt mit jedem Editor erstellt und bearbeitet werden. Die Anweisungen für die Webcrawler der Suchmaschinen werden in Datensätzen definiert. Im ersten Teil eines Datensatzes erfolgt die Angabe, für welche Suchmaschine die Anweisung gilt. Die Crawler werden mit User-Agent angesprochen. Im zweiten Teil des Datensatzes kann dem angesprochenen Crawler ein Verbot ausgesprochen werden. Ein Verbot wird mit Disallow eingeleitet und gilt immer für das angegebene Verzeichnis und alle Unterverzeichnisse. Soll das Verbot für mehrere Suchmaschinen gelten, werden diese untereinander aufgeführt. Die robots.txt könnte also folgendermaßen aussehen:

User-agent: Suchmaschinen-Crawler a
User-agent: Suchmaschinen- Crawler b
Disallow: /template/
Disallow: /privat/

Jeder Einleitung folgt ein Doppelpunkt und ein Leerzeichen. Im obigen Beispiel wird den Crawlern der Suchmaschinen a und b ein Verbot für die Verzeichnisse /templates und /privat erteilt. Enthält die robots.txt mehrere Datensätze, werden diese durch eine Leerzeile voneinander getrennt. Sollen pauschal alle Robots angesprochen werden, geschieht dies mit dem Zeichen *:

User-agent: *
Disallow: /templates/
Disallow: /privat/

Alternativ zu ganzen Verzeichnissen kann auch für bestimmte Dateien in einem Verzeichnis ein Verbot erteilt werden. Zu diesem Zweck wird der Pfad inklusive der Datei angegeben. Sind alle Verzeichnisse der Domain betroffen, geschieht dies mit

User-agent: *
Disallow: /

Es wird also jeglichen Crawlern das Indizieren sämtlicher Verzeichnisse der Domain untersagt.

Sinn der robots.txt

Mit den Verboten, bestimmte Verzeichnisse auszulesen, soll in erster Linie erreicht werden, dass nur relevante Inhalte in den Suchmaschinen gelistet sind. Dies ist beispielsweise sinnvoll, wenn ein Verzeichnis ausschließlich Template-Dateien für den Internetauftritt enthält, die keinen informativen Wert haben. Auch wenn, wie in obigem Beispiel, der Inhalt des Verzeichnisses /privat nicht gelistet werden soll, kann das über die robots.txt gesteuert werden. Die Suchmaschinen werden somit nach Möglichkeit frei von irrelevanten oder unerwünschten Inhalten gehalten.

Zugriffe ausdrücklich erlauben

Für die Erlaubnis, Domaininhalte zu indizieren, gibt es keine Definition. Allerdings ist es möglich, einem bestimmten Crawler den Zugriff auf alle Verzeichnisse zu gestatten:

User-agent: Suchmaschinen-Crawler c
Disallow:

Die fehlende Angabe hinter Disallow gestattet dem Suchmaschinen-Crawler c die Indizierung aller Verzeichnisse und Unterverzeichnisse.

Grenzen der robots-txt

Seriöse Suchmaschinen halten sich an das “Robots-Exclusion-Standard-Protokoll”. Dieses regelt, dass die Crawler beim Auffinden einer Webseite zunächst die Datei robots.txt auslesen. Eine Garantie dafür gibt es allerdings nicht, auch können auf diese Weise keine Inhalte vor Zugriffen geschützt werden. Diesem Zweck dient beispielsweise der Verzeichnisschutz über die Datei .htaccess.

Die wichtigsten Webdesign-Trends im Jahr 2012

/1 Kommentar/in /von

Auch im neuen Jahr gibt es spannende Trends zum Thema Webdesign, die KMU nicht verpassen sollten. Viele der neuen Technologien optimieren die Anwendung von Websites auf mobilen Endgeräten wie Tablet-PCs oder Smartphones. Den Durchbruch erlebte das mobile Surfen im vergangenen Jahr, in diesem setzen die Webdesign-Trends die endgültige Etablierung durch. So werden Unternehmen auch von unterwegs für ihre (potenziellen) Kunden optimal erreichbar. Die wichtigsten Tools stellen wir nun im Folgenden vor.

1. Responsive Web Design

Beim dieser Technik passt sich der Inhalt von Websites automatisch dem verfügbaren Sichtfeld respektive Bildschirm an. Horizontales Scrollen gehört damit der Vergangenheit an, was nicht nur für den mobilen Bereich praktisch ist. Die Technik funktioniert natürlich auch bei Desktop-Rechnern mit großem Screen. Dieser kann dank des Responsive Web Designs den Bildschirm nun noch effizienter genutzt werden, denn auch bei Verkleinern und Vergrößern des Browserfensters wird der Hauptinhalt der Seite formell angepasst.

2. Infografiken

Informationen in bunte Grafiken zu verpacken war bereits in 2011 ein angehender Trend. In 2012 wird sich dieser voraussichtlich noch verstärken. Denn die originelle Form der Präsentation hilft dabei, selbst komplizierte Inhalte verständlich darzustellen. Deshalb eignen sich Infografiken auch als Marketing-Tool für KMU, etwa um den Kunden den Nutzen der Dienstleistung nahe zu bringen. Gleichzeitig lenken die Grafiken mit ihren ansprechenden Designs die Aufmerksamkeit auf sich und wirken dabei professionell und aufwändig, was sich wiederum positiv auf die Unternehmensdarstellung auswirkt.

3. CSS3 / Html 5 löst Flash weiter ab

Mit der Etablierung von CSS3 und Html 5 kündigte sich das Unausweichliche bereits an: Flash stirbt langsam aber sicher aus. Das liegt nicht nur an den Vorteilen von CSS3 und Html 5, sondern auch an der zukünftig eingeschränkten technischen Durchführbarkeit von Flash. So kündigte Adobe kürzlich an, Flash für mobile Geräte nicht mehr weiter zu entwickeln. Damit ist der Weg frei für alternative, bessere Möglichkeiten. Zudem lässt sich Flash nur schlecht für die Suchmaschinenoptimierung nutzen, was im Bereich Internet-Marketing ein K.O.-Kriterium ist. Es sprechen einige Gründe für die Ausmusterung der Flash-Technologie und dem breit gefächerten Einsatz der neuen Methoden.

4. Big Vector Art

Die großflächigen Illustrationen, die früher eher im Kunst- und Freizeitsektor Verwendung fanden, werden zunehmend für das Branding von Unternehmen interessant. Ein Beispiel hierfür ist Mozilla. Das Unternehmen hat sein Image mithilfe der farbigen Comic-Figuren aufgebaut. Die Vektoren-Kunst transportiert ein trendiges und jugendliches Bild, das dank talentierter Grafik-Künstler völlig individuell auf das Unternehmen zugeschnitten werden kann. Ein solches Maskottchen besitzt einen hohen Wiedererkennungswert und ist deshalb ein ideales Instrument für Werbestrategen.

5. Single Page Websites

Auf konventionellen Websites werden die Inhalte auf mehreren Unterseiten präsentiert. Anders beim Trend der Single Page Websites. Wie in einer PDF-Datei werden die individuell gestalteten Unterseiten auf einer einzigen dargestellt. Durch Scrollen oder einer Navigation erreicht der Nutzer den angebotenen Content. Diese Art Webdesign wird aktuell von großen Marken wie Nike oder Adobe genutzt und ist auch für KMU eine interessante Gestaltungsform.

Die aktuellen Webdesign Trends machen Spaß und bieten zahlreiche Möglichkeiten, dem eigenen Webauftritt einen frischen Anstrich zu verleihen.

Welche Trends können Sie erkennen?

Weitere Infos (externe Seiten):

[related-links]

Webdesign: Kostenlose Tools für einen effizienteren Workflow

/in /von

Der Beruf des Webdesigners vereint alle Facetten der digitalen Kreativität. Die Möglichkeiten sind so mannigfaltig, dass man sich schnell in detailverliebte Kleinigkeiten verzetteln kann. Doch Zeit ist Geld, und gerade branchenfremde KMU, die die ersten Schritte auf diesem Terrain wagen, sind oft auf kleine Helferlein angewiesen. Aber auch erfahrene Webdesigner können einzelne Schritte vereinfachen, um Schaffensprozesse zeitlich zu optimieren. Für straffere Arbeitsabläufe und einen verbesserten Workflow sorgen viele nützliche Tools im Internet – und etliche stehen darüber hinaus kostenlos zur Verfügung! Von diesen wollen wir heute einige vorstellen.

1. Color Scheme Designer

Mit diesem Tool können individuelle Farbschemata für Websites kreiert werden. Zur Auswahl stehen diverse Farbkonzepte wie mono, komplementär oder analog. Die Farbtöne können sowohl zufällig als auch nuancengenau gewählt werden. Zudem bietet der Color Scheme Designer einige nützliche Zusatzfunktionen: So können unter anderem die Farbpaletten für Farbblinde angepasst werden oder ein Test-Layout erstellt werden. Außerdem stehen unterschiedliche Export-Optionen, etwa als Html+CSS-, XML- oder Text-Datei, zur Verfügung. Ein Download ist nicht notwendig, denn beim Color Scheme Designer handelt sich um einen frei zugänglichen Webdienst.

2. BgPatterns

Schicke Hintergründe für den Internetauftritt lassen sich mit dem Tool BgPatterns generieren. Diverse „Segeltuch“-Muster als Untergrund und eine umfassende Bilder-Auswahl für die Musterung geben den Hintergründen ihren speziellen Look. Natürlich steht auch eine breite Auswahl an Farben bereit. Ergänzt wird die Vielfalt durch kreative Funktionen. Die Musterungen können stufenlos skaliert werden und die die Bilder rotiert. Eine Vorschau-Funktion stellt die Musterentwürfe auf der jeweiligen Website dar. BgPatterns ist ein reiner Onlinedienst, jedoch ermöglicht eine Download-Funktion die Sicherung der eigens gestalteten Muster.

3. Ajax Load

Der Ajax Load Gif Generator hilft bei der schnellen Erstellung von dynamischen Lade-Icons. Der Webdesigner kann dabei aus einer umfangreichen Sammlung von Icons wählen und daraus in wenigen Klicks ein eigenes kreieren. Anschließend erfolgt der Download als GIF-Datei und schon steht das individuelle Lade-Icon für den Einbau in die Website zur Verfügung.

4. Lorem Ipsum Generator

Häufig entsteht das Layout einer Website noch vor den Texten, mit denen es schließlich gefüllt wird. Um dennoch ein Gefühl dafür zu bekommen, wie das geplante Schriftbild auf der Website wirkt – und gegebenenfalls zu überprüfen, wie viel Text notwendig ist – werden Blindtexte eingesetzt. Mit dem Lore Ipsum Generator ist es ganz leicht, die Platzhalter zu erstellen. Einfach die Anzahl der Wörter, Buchstaben oder Absätze angeben und schon generiert das Tool einen kostenlosen Blindtext. Der Service steht sowohl als Online- als auch Download-Angebot zur Verfügung. Die Nutzung ist also auch offline möglich.
Neben diesen nützlichen Instrumenten gibt es noch unzählige weitere Angebote, die im Netz kostenlos oder gegen eine kleine Gebühr erhältlich sind. Für Webdesigner lohnt es sich ein wenig zu stöbern und einfach mal bei Google nach entsprechenden Schlagworten zu suchen. Wofür gibt es schließlich die Suchmaschinenoptimierung?

Viele Tools sind hervorragend umgesetzt und einfach zu bedienen. Sie können Layoutern und Designern viel Arbeit bei Detailarbeiten abnehmen, um sich wesentlichen Aufgaben zuwenden zu können.

Dafür gilt allen Entwicklern solcher Tools ein herzlicher Dank!

Weitere Infos (externe Seiten):

[related-links]

Crossmedia: Print trifft auf Web 2.0

/1 Kommentar/in /von

Werbung in Presse, TV und Radio sind bewährte und etablierte Werbemittel für KMU – gelten aber auch als konventionell. Warum traditionelle Wege also nicht aufbrechen und mit zukunftsweisenden Medien verbinden? Die neuen Internettechnologien machen das möglich und bringen neuen Schwung in die Werbung. Der Trend heißt „Crossmedia“ und verbindet Print, Bewegtbild, Ton und Internet zu einem innovativen Konzept. Im Mittelpunkt dieses Artikels stehen die Kanäle Print und Online, denn die Mischung zwischen dem traditionell statischen Instrument und dem digital dynamischen ist für Werbetreibende besonders reizvoll. Die Verknüpfung der beiden gegensätzlichen Techniken mag kompliziert und teuer klingen, erweist sich bei näherer Betrachtung jedoch als gut durchführbar und finanziell überschaubar.

Wie funktioniert die Print-Online-Verknüpfung?

Am Anfang einer crossmedialen Kampagne mit Print und Internet steht eine klassische gedruckte Anzeige für ein Unternehmen bzw. ein Produkt. Dabei kann es sich um eine Zeitungsannonce, ein Plakat, T-Shirt oder sonst irgendeinen ebenen Druckartikel handeln. In dieser Anzeige ist ein „Link“ eingebaut, den der Verbraucher einlesen kann. Dafür benötigt er immer ein Smartphone mit integrierter Kamera. Die Kamera dient als Aufnahmegerät für den „Link“ in der Anzeige und dieser Link verweist auf eine Website. Eine Unternehmenswebsite ist für die Umsetzung von Crossmedia also unverzichtbar. Hier werden Landingpages eingerichtet, auf die der Kunde weitergeleitet wird, wenn er die Werbung mit dem Smartphone „scannt“. Damit gelingt der Sprung von der analogen in die digitale Welt.

Welche Tools verbinden Print und Online?

Nun zu den Tools: Das mittlerweile bekannteste ist der QR-Code. Diese „Stempel“ können recht einfach mit entsprechenden Generator-Programmen hergestellt werden. Viele davon sind sogar kostenlos im Web erhältlich. Die QR-Codes werden auf das Plakat, Shirt, Werbeschreiben gedruckt und können vom Kunden mithilfe der Smartphone-Kamera und eine Code-Reader-App eingelesen werden. Etwas eleganter ist das Angebot von Kooaba. Der Anbieter verknüpft Bilder mit Informationen, so dass hier ein Anzeigen-Motiv als „Link“ dient und ein Code überflüssig wird. Weniger spektakulär aber ebenso zielführend ist es, den URL zur gewünschten Landingpage auf das Werbemittel zu drucken. Bei den Landingpages sollten übrigens auch auf Suchmaschinenoptimierung geachtet werden, da die User auch über Google & Co. auf die Website gelangen können.

Interaktion hoch zwei: Crossmedia im Social Web

Die Verknüpfung von Print und Web durch technische Raffinessen fordert den Verbraucher spielerisch zur Interaktion auf. Zudem wird eine schnelle Reaktion ausgelöst, da die Response-Aktion des Kunden direkt nach der Wahrnehmung der Printwerbung erfolgt, indem er den Code oder die Anzeige scannt. Wer den Dialog zwischen Unternehmen und Kunden noch verstärken will, verlinkt auf eine Social-Media-Präsenz. Das kann zum Beispiel eine Twitter- oder Facebookseite sein, die dem KMU wiederum keine direkten Kosten verursachen. Dadurch wird der Kunde unmittelbar in die Kommunikation eingebunden und erhält die Möglichkeit, Teil der Community zu sein. Das stärkt einerseits die Kundenbindung und vermittelt andererseits Transparenz. Crossmedia bietet einen reichhaltigen Pool mit innovativen Marketing-Instrumenten, die die Grenzen zwischen einzelnen Werbemitteln sprengen und damit eine Reichweite über die von einzelnen Medien hinaus ermöglichen.

Auch ist es möglich User an die Projekte zu binden indem man Sie z.B. dazu bringt selber erstellte Videos hochzuladen. Das können Action Aufnahmen aus einer Helmkamera sein oder aber auch nur einfache Fotos. Der User findet sich dann online (bei Ihnen) wieder und motviert eventuell auch andere Personen dazu interaktiv zu werden.

Natürlich muss das ganze in Ihr Konzept passen!!!

Weitere Infos (externe Seiten):

[related-links]

Augen auf bei der Wahl des Webhosting-Angebots!

/1 Kommentar/in , /von

Bevor eine Website überhaupt gelauncht werden kann, benötigt der Betreiber eine Domain sowie die Möglichkeit, die Internetpräsenz aufzubauen und zu verwalten. Den dafür verwendeten Webspace bezieht man in der Regel über einen Webhosting-Provider. In diversen Paketen können Interessenten unterschiedliche Leistungen einkaufen, die von der Domain-Registrierung über den Aufbau der Website bis hin zum Monitoring, also der technischen Überwachung des Servers, reichen. Beim Webhosting wird virtueller Raum „gemietet“, den man nach seinen Wünschen einrichten kann – ähnlich wie bei einer Wohnung. Doch die Auswahl an Webhosting-Anbietern ist groß und das technische Know-how der User oft nur lückenhaft. Wie findet man also auch als Laie das passende Angebot? Worauf gilt es bei der Wahl zu achten?

Kleine vs. große Webprojekte – die Anforderungen variieren

Für jedes Projekt gibt es die richtigen Paket-Angebote – man muss nur wissen, worauf es ankommt. Das beginnt etwa bei der Qualität der Netzwerkverbindung. Je größer der Webauftritt und je umfangreicher die multimediale Einbindung von Video, Sound oder Echtzeitkommunikation, desto wichtiger ist eine hohe Übertragungsrate. Nur mit einem angemessenen Traffic-Volumen ist die korrekte Darstellung und Nutzung einer komplexen Website möglich. Deshalb ist es empfehlenswert, im Vorfeld zu eruieren, mit welchen Netzknoten der Provider verbunden ist. Zu den größten zählen aktuell Amsterdam (AMS-IX) und Frankfurt (DE-CIX). Wenn es um die Wahl zwischen einem Angebot mit kostenlosem oder kostenpflichtigem Webspace geht, wählen seriöse KMU das kostenpflichtige. Bei den kostenlosen Paketen werden Werbebanner eingeblendet, und die haben auf einer Unternehmenswebsite nichts zu suchen. Zudem haben die der Website-Inhaber meist keine Kontrolle hat über die eingeblendeten Anzeigen, so dass Themenrelevanz nicht zwingend gegeben ist. Aber egal ob relevant oder nicht – Text- und Display-Anzeigen sind ein No-Go für seriöse Firmen-Websites.

Weiterhin stellt sich die Frage: Eigener Server oder Shared Hosting? Auch hier ist der Umfang des geplanten Webauftritts entscheidend. Für eine kleine Website mit statischen Inhalten ist Shared Hosting eine preiswerte und unkomplizierte Variante. Wer jedoch umfassende Einstellungen und Instrumente einbinden möchte, für den ist das Shared Hosting in den Funktionen zu eingeschränkt. Ein eigener Server ist zwar kostspieliger, bietet jedoch viel mehr Freiheiten für individuelle Konfigurationen.

Die Suchmaschinenoptimierung bei der Wahl bedenken

Die Wahl des richtigen Webhostings kann sich sogar auf die Suchmaschinenoptimierung auswirken. Etwa wenn die Domain eine eigene IP erhält – und das ist nicht bei jedem Provider gewährleistet. Bei Shared-Hosting-Angeboten beispielweise teilen sich viele Websites eine IP. Domains mit eigener IP werden von Google jedoch höher angesehen, was sich wiederum positiv auf das Ranking auswirkt. Aber ein eigene IP Adresse zu haben kostet wirklich viel Geld. Achten Sie also lieber darauf das Ihr Hoster eine IP Adresse zuweist die noch nicht “überlaufen” ist.

Mit einem eigenen Server können sogar mehrere eigene IP-Adressen eingerichtet werden. Zusammenfassend gilt es also, sich über die eigenen Anforderungen des Webprojekts klar zu werden. Des Weiteren lohnt es sich, wie bei allen Produkten, auch bei der Wahl des Webhosting-Providers einen Vergleich anzustellen. Dabei sind nicht nur die technischen Details wichtig, sondern auch die Serviceleistungen des Anbieters. Von kostenlosen Angeboten sollten KMU Abstand halten und lieber in eine professionelle Lösung investieren. Diese muss nicht zwingend technisch komplex sein, sondern ist dem Projektumfang entsprechend zu wählen.

Das die Hard- und Software des Hosters dem heutigen Stand der Technik entsprechen soll brauchen wir wohl nicht erwähnen.

Fragen Sie auch nach Backupmöglichkeiten und sicherheitstechnischen Einstellungen!

Wärmstens empfehlen können wir World4You als Hoster.

Weitere Infos (externe Seiten):

[related-links]