Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Referenzen - meine Arbeiten

Machen Sie sich selbst ein Bild über meine Arbeiten:

Responsives, barrierefreies Dropdown-Menü

konsumentenverband.ch

Mein responsives, barrierefreies Dropdown-Menü und mein Suchscript im Einsatz.

Meine Leistung: Lieferung des angepassten Menü-Scripts, sowie des speziell konfigurierten Suchscripts.

Responsive Web Design (RWD)

www.aus-meiner-feder.at

Seit einigen Jahren betreue ich die Site der blinden Autorin und Accessibilty-Spezialistin Eva Papst hinsichtlich des optischen Erscheinungsbildes. Frau Papst erstellt das Markup (HTML, Inhalte), und ich bin für das Design verantwortlich. Im Wesentlichen also CSS und JavaScript. Optimale Lesbarkeit, angenehmes Lesen steht dabei im Vordergrund. Unter dieser Prämisse sind im Laufe der Zeit zuerst der Styleswitcher mit den Stilen "hell" und "dunkel" entstanden, und zuletzt auch ein spezielles Layout für Smartphones inklusive Schriftgrößenwahl.

Nochmal Responsive Web Design

www.praxis-wiesbaden.de

Eine Auftragsarbeit: Den in Jahren gewachsenen Webauftritt einer Arztpraxis mobile-friendly gestalten. Die Vorgabe: möglichst wenig/kein Eingriff in die gewachsene Struktur der Site. Die Aufgabe konnte mit purem CSS gelöst werden. Letztlich waren ca. 100 Zeilen zusätzlicher CSS-Code erforderlich. Wenn man weiß, wie es geht. ;-)

Ein "CMS" für Video-Clips

ds-naturfilm.de

ds-naturfilm produziert professionelle Zeitraffer- oder Spezialaufnahmen, verbunden mit hochpräzisen Kamerafahrten.

Bis zu 1000 kurze Demo-Clips sollen auf der neuen Website präsentiert werden. Dazu wurde eine Art CMS entwickelt, das es dem Inhaber ermöglicht, selbst die Video-Clips einschließlich passender Beschreibungstexte hochzuladen.

Das Design ist selbstverständlich responsive. Eingesetzt wurde das responsive, barrierefreie Dropdown-Menü, sowie eine speziell angepasste Version des Suchscripts.

Die Video-Clips werden ohne Flash mit dem HTML5 <video>-Element abgespielt. Damit werden auch Tablets und Smartphones mit iOS und Android Betriebssystem unterstützt.

Technische Details im Blog

Eine Web-Visitenkarte

www.taubblinden-assistenz.de

Eine Taubblinden-Assistentin TBA stellt sich vor. Natürlich barrierefrei.

Mein Chat wird dort zur Kommunikation mit potenziellen Kunden eingesetzt.

Eine Oldie Band

www.the-magics.de

Die Site zeigt, wie man Musik sinnvoll präsentiert.

Generell sollte Musik auf Webseiten mit äußerster Vorsicht eingesetzt werden. Stellen sie sich vor, sie schauen im Büro mal schnell auf die Seite Ihres Reisebüros (ich weiß, sollte man eigentlich während der Arbeit generell nicht tun). Und wenn dann plötzlich Musik losträllert, und alle Kollegen sich nach Ihnen umdrehen ...!

Aber eine Band will natürlich ihr Angebot demonstrieren. Und wie das korrekt gemacht wird, zeigt dieses Beispiel.

Features:

  • Musik und Videos als Live-Stream - und selbstverständlich mit der Tastatur bedienbar, also barrierefrei.
  • Unterschiedliche Arten, Fotos zu präsentieren.

Die Website einer taubblinden Frau

www.tbl-telefon.de

Taubblinde Menschen haben nur noch sehr wenige Möglichkeiten der Kommunikation. Der PC und das Internet sind für diesen Personenkreis wichtige, ja unentbehrliche Hilfsmittel.
Frau Pompe hat mit Hilfe meines Tutorials HTML erlernt, und ihre eigene Homepage erstellt. Auf ihrer Homepage verlinkt sie direkt zum Chat - ihr Ersatz für das Telefon, das sie auf Grund ihrer Hörbehinderung nicht nutzen kann. M. Pompe setzt meinen barrierefreien Chat ein, den sie mit Ihrem Screenreader bedienen kann.
Der Führhundfilm auf ihrer Seite ist ein Beispiel, wie man Filme barrierefrei im Internet anbieten kann:
Ohne Maus, also allein mit der Tastatur, bedienbar, Untertitel für Menschen mit Hörbehinderung, sowie eine Videobeschreibung für blinde Besucher.

Fotos vom Handy direkt auf die Großbildleinwand.

lichtrouten_js.html

Die Besucher einer in 4 Städten simultan laufenden Großveranstaltung schicken aktuelle Fotos vom Handy. Diese Fotos werden in Echtzeit in allen 4 Städten auf Großbildleinwand gezeigt.
Der Link hinter dem Bild führt zu einer (funktionierenden) Testinstallation.
Und wer Lust hat, das selbst zu testen: Einfach ein (Handy-) Foto (nur jpg-Format) an Lissabon(at)mms2web.org schicken, und die Seite nach ein paar Augenblicken neu laden.
Dahinter steckt natürlich die Technik von mms2web

Für eine ansprechende Präsentation wird Javascript engesetzt: Die neuesten Fotos werden horizontal gescrollt, am Anfang und am Ende der Präsentation wird sanft ein- und ausgeblendet (nur im IE - aber das ist in diesem Fall ausnahmsweise akzeptabel).

Ein Webauftritt, für PDAs optimiert (aber nicht nur!):

www.utilitas.de

Nur 10 kB "leicht", ohne auf ansprechendes Design zu verzichten, ist der Zugang auch mit Handy oder PDA bei kürzester Ladezeit sichergestellt.
Das Bild zeigt einen Screenshot vom MDA mit Windows CE.

Eine Möbelwerkstatt, die sich auf individuelle Lösungen spezialisiert hat.

www.aschauer-holzdesign.de

Bei diesem Webauftritt stand die Präsentation von Fotos im Vordergrund.
Bemerkenswert: ein schöner Einsatz von Bildwechsel onMouseOver

Schauen Sie sich bitte auch die weiteren Referenzseiten im Menü an.
Dort finden Sie unter anderem folgende Features:

  • Gästebuch
  • Kontaktformular
  • Zeitgesteuertes Anzeigen von Inhalten
  • Kleines Redaktionssystem:
    Sie selbst aktualisieren die Inhalte von jedem Internet-PC aus.
  • oder ein kleiner Newsbereich, von Ihnen zu pflegen
  • Filme einbinden
  • Newsticker