In Ihrem Browser ist entweder JavaScript deaktiviert oder Ihr Browser ist stark veraltet.
Ohne JavaScript kann diese Seite leider nicht fehlerfrei genutzt werden.

Webdesign

Responsive Design

 

Einen Webdesigner für die Erstellung einer Website zu beauftragen ist eine Entscheidung, die vielen schwerfällt. Doch bei der Erstellung und Gestaltung von Webseiten gilt es heutzutage vieles zu beachten. Das Meiste davon kann man als Privatperson ohne erweiterte Kenntnisse in Webdesign kaum stemmen.

Hier einige Beispiele:

Piktogramm: Responsive Design Responsive Design

Piktogramm: Mobile First Mobile First

Piktogramm: Barrierefreiheit Barrierefreiheit

Piktogramm: Suchmaschinenoptimierung (SEO) SEO

Responsive Design

  1. Gestaltung einer Website für alle Anzeigegeräte
    z.B. Monitor, Tablet oder Handy
  2. Die Website reagiert auf die Eigenschaften des Gerätes
    z.B. Displaygröße, Touchfunktion, Fähigkeiten
  3. Wird von Google seit 2015 als Rankingfaktor angegeben

 

Interessant für Dienstleister und Angebote, deren Seiten nicht nur mit Desktop-Computern, sondern auch mit mobilen Geräten besucht werden.

Hierunter fallen z.B. Fahr- und Schlüsseldienste oder Gastronomiebetriebe.

Mobile First

  1. Gestaltung neuer Designs mit Vorrang auf Mobile Anzeigegeräte
    Handys, Tablets, o.ä.
  2. Besondere Rücksichtnahme auf Einschränkungen mobiler Geräte
    z.B. eingeschränkte HTML5-Funktionalität, Darstellungsprobleme bei CSS3 und beschränkte Volumentarife

Früher wurden Webseiten vorrangig für Desktop-Computer mit großen Monitoren erstellt. Dann wurde auf die verstärkte Nutzung mobiler Geräte eingegangen, indem die Webseite auf kleine Displays angepasst wurde.

Unter "Mobile First" versteht man die genau umgekehrte Herangehensweise. Webseiten werden primär für mobile Geräte gestaltet und dann für die Anzeige auf Desktop-Computern Schritt für Schritt erweitert.

Dieser Ansatz ist für Betreiber von Webseiten interessant, die hauptsächlich bis ausschließlich mit mobilen Geräten besucht werden.

Hierunter fallen z.B. Unternehmen die Personenbeförderung anbieten oder Events veranstalten.

Barrierefreiheit

Für die Erstellung barrierefreier Webseiten gibt es zwei "Regelwerke":

  1. Barrierefreie-Informationstechnik-Verordnung – BITV 2.0
    Ergänzung des BGG von 2011
  2. Web Content Accessibility Guidelines - WCAG 2.0

Grundsatz: Jeder Besucher soll die gleichen Informationen erhalten können, auch wenn die Art der Informationsübermittlung variieren darf. So werden z.B. Textalternativen für Bild- oder Toninhalte zur Verfügung gestellt.

Während die WCAG lediglich eine Liste an Empfehlungen darstellt wird mit der BITV auch ein tatsächlicher gesetzlicher Zwang zur barrierefreien Umsetzung von Webseiten gegeben. Dieser gilt zur Zeit für "Träger der öffentlichen Gewalt", also Bundes- und Landesverwaltungsbehörden.

Allerdings ist zu erwarten, dass hier auf EU-Ebene noch nachgezogen wird. In England und den USA z.B. ist Barrierefreiheit bereits auch für Webseiten von Unternehmen pflicht (fällt dort unter das Anti-Diskriminierungsgesetz).

Suchmaschinenoptimierung (SEO)

Bei der Suchmaschinenoptimierung handelt es sich um den Vorgang, die Inhalte der Internetseite für Suchmaschinen aufzubereiten. Dies natürlich vorrangig mit dem Ziel, dass Suchmaschinen die eigene Seite vor einer fremden empfehlen und so mehr Besucher entstehen.

Es gibt drei Gundsätzliche Maßnahmen, die schnell zum Erfolg führen können

  1. Eine gut erstellte und fehlerfreie Seite
  2. Gute Inhalte mit hohem Informationsgehalt
  3. Gute Auszeichnung besonderer Inhalte mit weiterführenden Informationen

Mit diesen drei Grundmaßnahmen sind die Möglichkeiten für eine schnelle Platzierungsverbesserung jedoch fast schon aufgebraucht.

Maßnahmen, die hierüber hinaus gehen, erfordern in der Regel Geduld, kontinuierliche Nachbesserungen und gute Vorarbeit. Denn auch die Ausgangslage der Konkurrenz spielt eine große Rolle.

Falls Ihre Internetseite bei Suchanfragen gegen andere Unternehmen verliert, kann dies daran liegen, dass Ihre Konkurrenz einfach besser Optimiert hat. Doch häufig werden sogar Kataloge, wie die gelben Seiten, noch vor der eigenen Internetseite aufgelistet. In einem solchen Fall sollte dringend geprüft werden, wo die Probleme liegen, um sie zu beseitigen.

Formate und Kosten

Je nach Größe des Unternehmens, des Umfangs der Inhalte oder der gewünschten Nutzung gibt es das passende Format. Die Kosten für eine Website hängen immer vom Arbeitsaufwand ab, der ebenfalls von den vorgenannten Faktoren abhängt.

Ein kurzes Vorwort zu den Kosten des Webdesigns:

Ganz egal, in welcher Größenordnung sich Ihre zukünftige Webseite orientiert: Der Hauptaufwand beim Webdesign ist das Design. Hier fallen bei weitem die meisten Arbeitsstunden an, da es erst geplant, konzeptioniert, gestaltet und dann in mehreren Schritten angepasst werden muss.

Möchten Sie sich also Kosten sparen können Sie folgendes tun:

  • Sammeln Sie Informationen. Wenn Sie wissen, was Sie mit der Website erreichen, welche Inhalte Sie veröffentlichen und wen Sie damit ansprechen wollen, kann der Webdesigner Ihnen das passende Format bieten.
  • Haben Sie bereits Visitenkarten oder Flyer die als Design dienen könnten?
  • Gibt es innerhalb des Unternehmens ein durchgängiges Farbschema, an dem sich auch die neue Website orientieren könnte?
  • Wenn alles nichts hilft können Sie auch einfach im Internet nach Templates oder fertigen Designs suchen, um Ihrem Projekt eine Richtung zu geben.

Webvisitenkarten

Hierbei handelt es sich in der Regel um eine einseitige Webseite mit wenig Inhalt. Für viele verhält es sich so, dass für eine „richtige“ Webseite kein Bedarf besteht. Doch hier sollte man nicht zu voreilig urteilen.

Selbst, wenn Sie so viele Kunden haben, dass Sie keine Notwendigkeit für weitere Werbemaßnahmen sehen, kann eine Webvisitenkarte nützlich sein. Viele potentielle Kunden, so wie ich, sammeln keine Visitenkarten, haben kein kleines Büchlein mit Telefonnummern und auch keinen Kalender an der Wand. Wenn solche Menschen schnell einen Termin beim Zahnarzt machen wollen suchen sie im Internet nach der Telefonnummer. Muss man sich dann aber erst durch zig Webkataloge lesen, bis man den richtigen gefunden hat und dann ist dort nur eine alte, nicht länger genutzte Telefonnummer hinterlegt, kann dies schnell frustrieren! Eine eindeutig auf Sie oder Ihr Unternehmen ausgerichtete Webvisitenkarte könnte dem vorbeugen.

Umfang Webvisitenkarten:

  • In HTML5 erstellte, einseitige Website mit allen nötigen und wichtigen Kontaktinformationen
  • Mikrodatenauszeichnung für Suchmaschinen und Kataloge
  • vCard zum Download, z.B. für E-Mail Clients, Smartphones oder Software-Adressbücher
  • Erstellung im Responsive-Design (für verschiedene Geräte, Browser und Displays)
  • Keine Animationen / Scripte
  • Ohne HTML-Kenntnisse oder passende Software nur schwer eigenständig anzupassen

Solche kleinen Webseiten sind innerhalb weniger Stunden und damit schon für weniger als 100-200€ realisierbar.

Kleinere Webseiten

Hierbei handelt es sich um Internetseiten mit bis zu 10 statischen Unterseiten. Weshalb nur so wenige? Weil hier die Schmerzgrenze liegt, bis zu der die Seiten einzeln und ohne "Content Management System" erstellt werden können.

Statische Webseiten sind reine HTML-Seiten, deren Inhalte festgelegt und unveränderlich sind (von eventuellen Kontaktformularen oder ähnlichem, das in PHP und Co. programmiert werden müsste, mal abgesehen).

Umfang kleinerer Websites:

  • Bis zu 10 statische Seiten in HTML 4 oder 5
  • Kleinere Scripte (z.B. Kontaktformular, JS-Scripte / -Animationen) inbegriffen
  • Erstellung im Responsive-Design (für verschiedene Geräte, Browser und Displays)
  • Ohne HTML-Kenntnisse oder entsprechende Software nicht veränderbar
  • Änderungen an Seitenstruktur oder -namen sehr Aufwändig

 Derartige Websites liegen schon im Bereich von ungefähr 500€ - 1.000€ abhängig von Seitenzahl und Zusatzaufwand.

Standard Webseiten

Webseiten, ab einer gewissen Größenordnung oder bei bestimmten Verwendungszwecken werden für gewöhnlich nicht mehr statisch erstellt, sondern basieren auf sogenannten „Content Management Systemen“. Hinter diesem Begriff verstecken sich verschiedene Programme, mit denen es einem unbescholtenem Nutzer möglich ist, die Seite zukünftig auch selber zu verwalten, Änderungen durchzufühen oder neue Inhalte einzupflegen. Darunter fallen Blogs (wie z.B. WordPress), Foren oder auch reine Content-Seiten, die einfach zu umfangreich sind, als dass man alle Seiten einzeln per Hand erstellen wollte.

Für solche Content-Seiten nutze ich persönlich sehr gerne das CMS „Contao“. Hierbei handelt es sich um ein System aus deutscher Schmiede das Benutzerfreundlich und einfach zu verstehen ist und zudem auch eine Vielzahl an Erweiterungen bietet.

Gästebücher, Benutzerverwaltung, Blogs, Newsletter… mit Content Management Systemen ist dies dann auch für jedermann möglich. Allerdings versteckt sich hier dann auch ein besonderer Arbeitsaufwand, denn jedes CMS funktioniert anders. Designs und Templates müssen immer speziell für das gewählte System erstellt werden, was je nach System sehr aufwändig sein kann.

Umfang Standard Websites

  • Einfache Änderung und Erweiterung der Seiten und Inhalte ohne HTML-Kenntnisse
  • Animationen, Scripte und Formulare teilweise selbst anpassen
  • Benutzer- und Mitgliederverwaltung (abhängig von gewähltem System)

Seiten dieser Größenordnung kosten für Gewöhnlich zwischen 1000€ und 2000€.

Referenzen

Cover Bild: Monitor
Screenshot: www.pianoeforte.de Screenshot: www.berl-in-out.de

Unsere neue Website geht online!

An dieser Stelle geht ein herzlicher Dank an unseren Graphik und Webdesigner Guido Schrauwers für seine überaus kompetente, kreative und kooperative Arbeit.

 

Private Musikschule piano e forte

Guido Schrauwers hat innerhalb der letzten drei Jahre für unseren Verein und andere Projekte die Webseiten erstellt, betreut und unserem Web-Team mit Rat und Tat zur Seite gestanden - gerne nehmen wir hier Stellung zu seiner Qualifizierung.

Seine Arbeitsweise ist zuverlässig, professionell, von hoher handwerklicher Qualität und stets pünktlich. Besonders zu schätzen gelernt haben wir seine sozialen Fähigkeiten, Herr Schrauwers ist nicht nur höflich und zuvorkommend, gerade in Gruppen-Diskussionen um die Gestaltung und Problemlösung für unsere Web-Präsenzen hat er immer Geduld, Einfühlungsvermögen und großes Mediationstalent bewiesen - was immer wieder zu sehr guten Ergebnissen für uns geführt hat.

Wir freuen uns auch weiterhin auf die Zusammenarbeit mit ihm.

Victoria Eversmann

Art van Demon

Sites

Screenshot: loci-loft.de
Screenshot: Rollets.de
Screenshot: Piano e Forte Website
Screenshot: Art van Demon Berlin
Screenshot: Psychotherapie Malter
Screenshot: Berl- In/Out
Screenshot: Schlüsselnotdienst.biz
Screenshot: Detektei Schrauwers