Die offensichtlichen Merkmale einer gelungenen Internetpräsenz, ansprechendes Aussehen und einfache Bedienung, stellen den Lohn einer gründlichen Planung dar. Die zugrunde liegende Technik und Strukturierung ist dabei ausschlaggebend.
Konzeptionell erscheinen mir folgende Punkte sehr wichtig:

  • schnelle Ladezeiten
  • fließend platzierte Inhalte
  • skalierbare Texte
  • gut strukturiertes Markup (XHTML)
  • Trennung von Struktur (XHTML), Inhalt (XHTML/DB) und Ausssehen (CSS)
  • Browserkompatibilität

Will der Unternehmer die Inhalte selber pflegen und nicht durch seine Agentur muß ein entsprechendes System geplant und realisiert werden. Das erhöht den anfänglichen Aufwand, mindert aber bei häufigen Änderungen/ Aktualisierungen die Kosten und eröffnet weitere Möglichkeiten.

Struktur und Gestaltung

In der angesprochenen gründlichen Planung berücksichtige ich beim Erstellen von Webseiten für Unternehmen folgende Punkte. Dies ist nur eine grobe Auflistung und repräsentiert nicht den erforderlichen Aufwand der einzelnen Punkte diese können je nach Anforderungen stark schwanken.

  • Sichtung der Mitbewerber zur Feststellung branchenüblicher Mindestanforderungen. Herausstellen von schwachen Elementen und diese beim eigenen Kunden stark verbessert implementieren. Abgrenzung von Konkurrenten definieren.
  • Planung und Konzeption des grundsätzlichen Aufbaus. Abwägung der technischen Lösung/ Realisation.
  • Strukturierung der zu präsentierenden Inhalte und Erarbeitung der Navigationsstruktur (Menüführung, Semantik) — Im Hinblick auf Benutzerfreundlichkeit (Usability).
  • Analyse erforderlicher Prozesse (beispielsweise: Produkte finden, nach Schlagworten suchen, Kontaktaufnahme zum Unternehmen etc.), diese konsequent und konsistent umsetzen.
  • Aufbereitung der Inhalte (Text, Bild, Audio, Video) für eine optimale Darstellung; Umfang, Kompatibilität, Mediengerecht (Farbraum, PPI), Kompression (Dateigröße).
  • Gestaltung (Corporate Design, Anmutung, Farbkonzept, Schriftenkonzept) nach Gesichtspunkten der Markenführung bzw. Corporate Identity; dabei werden sowohl eigene Styleguides erstellt als auch bereits vorhandene angewendet. Haptik/ Joy of Use stellt ebenfalls einen wichtigen Aspekt dar.
  • Die Suchmaschinenfreundlichkeit, welche bereits durch die gute Strukturierung der Inhalte (bei der Konzeption) begünstigt ist, wird noch weiter optimiert.
 

Präsentation

tooltip display

tooltip Anzeige des Artikelauszugs bei ruhendem Mauszeiger über einer Überschrift bei „Populäre Artikel“ in der Seitenleiste

Dieser Internetauftritt kann Ihnen bereits einen Eindruck vermitteln wie ich Gestalte und die Techniken einsetze. Anders als bei Unternehmensseiten kann ich mir allerdings die Eigenheit leisten und Nutzer des Internet Explorer restriktiver behandeln. Diese sehen einige Inhalte nicht oder nur teilweise, was allerdings auf die mangelhafte Implementation von W3C Standards seitens Microsoft™ zurückzuführen ist.
Der Auftritt basiert auf XHTML, CSS, PHP, MySQL und WordPress. Dem WordPress System werden die Inhalte mit differenzierten und durchdachten Abfragen entlockt. Beispielsweise die Journal Seite mit ihrer strukturierten Darstellung von Artikeln oder die tooltips die bei ruhendem Mauszeiger über Artikelüberschriften (ohne Artikeltext) einen kurzen Einleitungstext zeigen.

Statische Seite mit einigen CSS Finessen (XHTML, CSS, iFrame)

Ruchti & Blumenberg Webseite, Startseite

Startseite von Ruchti & Blumenberg – Car Sales International

Ruchti & Blumenberg Webseite, Fahrzeugübersicht

Übersicht über den Bestand der Fahrzeuge von Ruchti & Blumenberg

 
Ruchti & Blumenberg Webseite, Kontakt

Kontaktdaten, Hintergrund mit zwei Elementen (Farbverlauf und Gittermodelle von Autos) von Ruchti & Blumenberg

Internetauftritt für Fahrzeughändler Ruchti & Blumenberg — Car Sales International in Dietzenbach. Damit der Kunde seinen Fahrzeugbestand nur an einer Stelle pfegen muß ist die Seite einerseits einfach und statisch, bindet aber die Fahrzeugliste von mobile.de/‌RUCHTI_‌BLUMENBERG als iFrame ein.
Besonderheiten: Erstellung und Verwendung von zwei übereinander liegender Hintergründe (vertikaler Farbverlauf von Rot nach Schwarz und weiße Gittermodelle von PKWs). Die Gittermodelle behalten ihre Position relativ zum Browserfenster und der farbige Hintergrund bewegt sich mit der Seite (bei vertikalem Rollen/ Verschieben der Seite). Ausgefeilte CSS-Techniken ermöglichen dies, zusätzlich gibt es eine stehende Fußleiste. Der helle Hintergrund des Inhaltsbereichs ist semi-transparent.

Die Seite ist in allen weitläufig vorhandenen Browsern zugänglich (Mac/ WIn: IE ab 5.5, Safari, Firefox, Opera).

Dynamischer Webauftritt mit umfangreichem Produktkatalog (XHTML, CSS, PHP, MySQL, WordPress)

Metallbau Haus Webseite, Startseite mit Produktbeispielen und Ausschnitte der letzten Neuigkeiten

Startseite mit Produktbeispielen und Ausschnitten der letzten Neuigkeiten rund um den Betrieb

Metallbau Haus Webseite, Produktkategorien Übersicht

Produktkategorien Übersicht

 
Metallbau Haus Webseite, Artikel aus der Rubrik „Neuigkeiten“, in der Seitenleiste zwei zufällig sortierte Produktbeispiele

Artikel aus der Rubrik „Neuigkeiten“, in der Seitenleiste zwei zufällig sortierte Produktbeispiele

Internetauftritt der Metallbau Haus — Schlosserei & Kunstschmiede in Münster bei Dieburg. Neben Informationen rund um den Betrieb, einem integrierten Neuigkeiten Bereich wird eine große, weil vielseitige Auswahl an Produkten Besuchern präsentiert. Damit Stöbern und gezieltes Auffinden von Erzeugnissen gleichermaßen bequem erfolgen können, wurden die Produkte kategorisiert (maximal zwei Hierarchien) und mit Schlagworten (Eigenschaften) versehen.

Das Einpflegen der Inhalte erfolgt von Mitarbeitern der Metallbau Haus GmbH. Um dies möglichst einfach zu halten wurde das verwendete CMS (WordPress) massiv angepaßt. Neben einfachen, klar strukturierten Arbeitsabläufen für das Verwalten werden auch viele Schritte vom (Web-)Server abgenommen. Automatische Generierung der Bildgrößen, Mitarbeiter müssen lediglich ein Produktbild hochladen; autonomes Applizieren des Wasserzeichens, die Bilder müssen nicht für die Webseite zuvor extra mit einem Wasserzeichen versehen werden. Beide Vorgänge werden vom System im Hintergrund generiert.
Ein weiterer Vorteil eines solchen Systems ist unter anderem die Möglichkeit zufällig generierte Produktbeispiele in der Seitenleiste und der Startseite zu präsentieren.

Weiterer Umfang dieser Arbeit:

  • Umfangreiche Dokumentation mit bebilderten Arbeitsschritten
  • Tutorial Videos produziert um anhand von Bewegtbildern die Arbeitsschritte zu erläutern — der Kunde kann eins zu eins die benötigten Schritte nachvollziehen (auch nach mehreren Monaten, falls keine Erinnerungen mehr besteht)
  • Seite ist in allen weitläufig vorhandenen Browsern zugänglich (Mac/ WIn: IE ab 5.5, Safari, Firefox, Opera)
  • Statistik Auswertungen, ermöglichen der Firma gezielter ihre Kunden anzusprechen
  • logisch strukturiertes XHTML mit Ausrichtung auf Suchmaschinen Optimierung
  • Bildelemente der Seite: Favicon, skalierbare Navigation, Kopfbereich (Header), Hintergrund

Alle Stichworte

 (6)  (1)  (2)  (5)  (1)  (1)  (2)  (2)  (1)  (1)  (3)  (1)  (1)