Kategorie: Web-Design

Gut zu wissen: 5 Tips zur SEO

Beschäftigt man sich mit Webdesign, bemerkt man schnell, das das Geschäft weit über die Designarbeit hinausragt. Was verlangt wird ist mehr als das pure Look & Feel einer Website zu erstellen. Oft ist es wichtig, sich auch direkt um den Code fürs Front End zu kümmern.

Und das bedeutet, dass die Verantwortung der Suchmaschinenoptimierung (SEO) in die Hände des Webdesigners fällt. Dieses Thema geht jedoch am eigentlich Design Thema vorbei und fällt nicht zwingend unter die Kernkompetenzen eines Webdesigners.

Darum kommen hier ein paar nützliche Starter-Tips, die dem einen oder anderen unter euch helfen mögen. Viel Spaß! Kein Anspruch auf Vollständigkeit…

(mehr …)

Kategorien: Web-Design

Eine Site, viele Gesichter

Die Entwicklung von Websites bringt oft verschiedenste Probleme mit sich. Eines dieser Probleme: Die final umgesetzte und durchprogrammierte Site schaut im Browser irgendwie anders aus, als in der Entwicklungsumgebung.

Ansatz zur Problemlösung kann die Optimierung auf spezielle Browser sein. Doch derer gibt es viele. Wie schaut die Site in anderen Browsern aus, für die die Site nicht optimiert wurde? Welche Browser gibt es überhaupt und muss ich alle auf meinem Testsystem installiert haben?

BrowserShots. Check browser compatibility

BrowserShots. Check browser compatibility

browsershots.org schafft hier Abhilfe. Einfach Link zur Site (z.B. hochgeladen auf einen Testserver) eingeben, gewünschte Browser auswählen und staunen, wie entstellt die eigene Seite auf exotischen Browsern daherkommt – ganz ohne lästige Installation unbenötiger Browser. Versierte Anwender wählen noch Details wie Bildschirmgroße, Farbtiefe, Java-, JavaScript und Flash-Aktivierung aus.

Abschließend stehen die png-Screenshots als zip gepackt zum Download und Vergleichen bereit. So macht Optimierung Spaß!

Kategorien: Sonstiges Web-Design

PNG-Gamma-Bug (im IE) und die Lösung

links unverfälscht, rechts IE

links unverfälscht, rechts IE

Ab Version 7 kann der Internet Explorer mit transparenten PNGs umgehen. Allerdings besteht bei allen Versionen, auch im IE 8, ein weiteres Problem in Verbindung mit PNGs. Der IE interpretiert den hinterlegten Gamma-Wert in der PNG-Datei und stellt deshalb alle Grafiken ein wenig dunkler dar. Rechts habe ich ein Beispielbild hochgeladen. Je nach Monitor solltet ihr die Unterschiede erkennen.
Fairerweise muss man dazusagen, dass nicht direkt der IE die Ursache des Problems ist. Viel mehr ist das PNG-Format selbst die Wurzel allen Übels.

Wie kam es dazu?

Die Gamma Korrektur wurde eingeführt, um eine identische Darstellung von PNGs auf allen Plattformen (MAC, PC, …) zu ermöglichen. Wenn ein Bild alleine angezeigt wird ist alles OK. Verwendet man das PNG jedoch neben anderen Grafiken und Farben taucht ein neues Problem auf, welches deutlich unangenehmer als das Originale ist. Beispielsweise auf Webseiten sind die Farben nun uneinheitlich. Hier gibt es mehr Informationen, wie das Problem entstanden ist.

Lösung – TweakPNG

Wer PNGs in seinem Design benutzt, sollte daher den Gammawert aus den Bildern entfernen. Das geht ganz einfach mit dem Tool TweakPNG.

Öffnet das Bild mit dem Programm oder zieht es einfach per Drag&Drop in das Fenster. Nun seht ihr eine Übersicht aller Chunks. Dort einfach “gAMA” auswählen und löschen. Eigentlich könnt ihr alles löschen, was nicht als “critical” in der Spalte “Attributes” markiert ist.

Anschließend die Datei abspeichern und schon seid ihr fertig. Leider muss der Vorgang mit allen PNG-Dateien wiederholt werden.

Visuelle Rhetorik – How-To 1: Schrift und Gestaltungsraster

Dieses How-To zeigt den sinnvollen Einsatz eines Gestaltungsrasters in Verbindung mit Typografie. Dabei steht das dazu verwendete Programm (z.B. Adobe InDesign, Adobe Photoshop) weniger im Vordergrund als der Leitfaden zur Gestaltung einer schnell wirksamen textlichen Informationsdarstellung.

Beim Website-Erstellungsprozesses stößt man früher oder später auf die Frage, welcher Inhalt kommuniziert werden soll. Ist dieser Inhalt bei Websites meist unterschiedlich, so gilt für dessen Gestaltung umso mehr das Gesetz des Screen-Designs. Wichtiges Merkmal hierbei: Der Inhalt muss einfach und präszise zu erfassen sein – die Kommunikation muss schnell funktionieren. Teil 4 der Reihe “Visuelle Rhetorik” beschreibt, inwiefern Textgestaltung und Inhalt zusammenpassen müssen.

(mehr …)

Kategorien: Tutorials Web-Design

Sehr nützliches Tool zur Webseitenentwicklung – IETester

IETester ist ein sehr nützliches Tool für alle Webentwickler.
Das Programm beinhaltet die Versionen 5.5, 6.0, 7.0 und 8.0 des IEs.

Unter Windows kann standardmäßig nur eine Version des Internet Explorer installiert sein. Durch die Möglichkeit, verschiedene Versionen des Internet Explorers in Tabs zu öffnen, wird die Entwicklung von Webseiten deutlich vereinfacht.

IETester Homepage mit Download

Visuelle Rhetorik – Tutorial 1: Extraktion einer Farbpalette

Stimmungsbild für eine Website mit Thema Kaffee

Stimmungsbild für eine Website mit Thema Kaffee

Das Tutorial zeigt Vorgehensweisen zur Extraktion und Reduzierung eines Farbschemas mit Adobe Photoshop CS3, wie man es für die Erstellung einer Website benötigt.

Im Laufe eines Website-Erstellungsprozesses stellt sich üblicherweise die Frage nach der farblichen Gestaltung der Web-Präsenz. Das Farbklima soll letztlich auch zur Botschaft, zur Aussage und zur Stimmung der Präsenz passen und diese unterstreichen. Im Teil 4 der Reihe “Visuelle Rhetorik” wird beschrieben, inwiefern Stimmungsbilder zur Klima- und Farbschemafindung beitragen können.

(mehr …)

Kategorien: Tutorials Web-Design

Visuelle Rhetorik – Teil 4

Form und Farbe des Inhalts als Botschafter der Website.

Nach längerer Zeit persönlicher Abwesenheit folgt nun Teil 4 der Reihe. Ich habe mich entschieden, die Publikation über die Binnengliederung einer Website wegzulassen. Somit wird dies der vorerst letzte Teil der Reihe werden. Sollte der Wunsch nach Informationen über die Binnengliederung bestehen, kann ich einen entsprechenden Artikel natürlich nachliefern.

Die Website befindet sich nun in einem Stadium, in welchem die Eckpfeiler bereits gesetzt sind. Die Grenzen der Site sind gezogen. Was folgt, müssen Inhalte sein. Dabei soll nicht erklärt werden, wie man zu Inhalten kommt (denn diese sollten – wie wir wissen – längst feststehen). Vielmehr geht es um die Frage, wie Inhalte auf gestalterischer Ebene aufbereitet werden können. Wie kann Inhalt aussehen? Inhalt und Form müssen zusammenpassen und rhetorisch überzeugen.

(mehr …)

Kategorien: Web-Design

Visuelle Rhetorik – Teil 3

Die Navigation als Buchrücken der Website.

Nach längerer Pause ist es wieder soweit. Wie bereits in Teil 2 angekündigt, handelt dieser Teil der Reihe von Fragen und Gedanken zum Thema Navigation. Doch was ist bisher geschehen?

  • aus der Idee einer Website wurde ein zielgruppenfokussiertes Konzept
  • das Konzept besteht aus mindestens einer Kernbotschaft und berücksichtigt die Interessen der Zielgruppe(n)
  • die Interessen der Zielgruppen werden gemäß Pathos, Ethos und Logos bedient

Dem Verantwortlichen einer Webpräsenz ist klar geworden, was er mit der Site kommunizieren will, wen er damit erreichen will und wie er dies am Besten anstellt. Ihm ist klar, welche Inhalte er benötigt und wie die Site gestaltet sein soll. Doch es fehlt die Verbindung zwischen beiden Elementen. Wie müssen die Informationen erreichbar sein, damit der User sie auch findet? Wie lässt sich eine gute Erreichbarkeit der Informationen mit der Gestaltung vereinbaren, oder gar verknüpfen?

(mehr …)

Kategorien: Web-Design

Visuelle Rhetorik – Teil 2

Das Layout als Sprache der Website.

Im Teil 1 der Reihe haben wir erfahren, dass eine Website als Kommunikationsmittel direkt auf die Interessenten der Site ausgerichtet sein sollte. Nur so kann sie die Aufmerksamkeit der Leser im Dschungel des World Wide Web auf sich ziehen. Und erst dann kann der Leser zum Empfänger der Botschaft werden. Der Empfänger, sprich Webanwender, “hört” was die Website “zu sagen hat”.

(mehr …)

Kategorien: Web-Design

Visuelle Rhetorik – Teil 1

Die Website als Kommunikationsmittel.

Um eine funktionierende Website optimal zu gestalten, ist ein Grundverständnis des Kommunikationsmodells nötig. Im einfachsten Fall findet Kommunikation demnach immer zwischen einen Sender und einem Empfänger statt. Der Sender, beispielsweise eine Website, übermittelt Botschaften an den Empfänger. Der Empfänger nimmt die Botschaften auf, verwertet sie und anwortet im besten Fall.

(mehr …)

Kategorien: Web-Design

Visuelle Rhetorik

“Inhalte werden schnell vergessen. Doch der emotionelle Eindruck guten Designs bleibt stabil.”
Wolfgang Beinert, 2000, beinert.net

Eine gute Website ensteht nicht über Nacht. Viele Websites schauen traumhaft aus, sind aber inhaltlich völlig verschlafen. Zudem sind die Präsenzen oft nutzbar und gehen am Grundanliegen eines Users vorbei.

Deshalb liefern die regelmäßig folgenden Artikel allgemeine Tipps und Tricks, zum Einen was die Gestaltung visueller Medien betrifft, aber auch How-To’s für die praktische Umsetzung der Gestaltung.

Teil 1: Die Website als Kommunikationsmittel.

Teil 2: Das Layout als Sprache der Website.

Teil 3: Die Navigation als Buchrücken der Website.

Teil 4: Form und Farbe des Inhalts als Botschafter der Website.

Tutorial 1: Extraktion einer Farbpalette.

How-To 1: Schrift und Gestaltungsraster

Design is a good idea.

Kategorien: Web-Design