webdesign klamonfra, professionelles und barrierefreies Webdesign

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


webdesign klamonfra

professionelles und barrierefreies Webdesign

Warum benötigt man ein professionelles Webdesign?

Gerade in der heutigen Zeit ist es immer wichtiger im Internet vertreten zu sein.

Viele Menschen benutzen das Internet, um sich vorab über einen bestimmten Dienstleistungszweig zu informieren. Sei es der nächste Restaurantbesuch, die Inanspruchnahme eines Handwerkers oder die Suche nach dem nächsten Urlaubsdomizil. Auch ich nutze besonders für die Urlaubsplanung das Internet und erhalte so wertvolle Tipps über den zukünftigen Urlaubsort, die Landschaft oder finde Informationen zu interessanten Wanderungen.

Die Werbung für Ihre Dienstleistung ist Ihr Internetauftritt!

Eine eigene Webseite im Internet ist die Werbung für eine Dienstleistung und ein Unternehmen. 24 Stunden am Tag, weltweit und das alles für vergleichsweise wenig Geld. Und eine ansprechende Webseite ist hierfür der erste wichtige Baustein, um neue Kunden zu gewinnen.

Wie habe ich meinen Freunden bei Ihrem Internetauftritt geholfen?

Zuerst folgte eine sachkundige Beratung und das Erfragen der individuellen Wünsche bei der Umsetzung. Den Inhalt, die Farben und die Bilder konnten Sie ganz nach Ihrem Belieben bestimmen. Ich sorgte dann für eine fehlerfreie Umsetzung, eine ansprechende Webgestaltung und eine entsprechende Suchmaschinenoptimierung. Ich habe Sie natürlich auch bezüglich einer barrierefreien Farbgebung beraten und die Bilder für den Webauftritt optimiert.

Referenzen von webdesign-klamonfra

Einige Beispiele meiner realisierten Arbeiten habe ich unter "Referenzen" zusammengestellt.

Zum Beispiel unsere eigene private Website, bei der sich alles um das Thema "Fotografie" dreht, oder die Website von unserem Freund Peter Allescher. Auf seiner Website findet man Interessantes zum Thema "Elektronische Daten Verarbeitung", und bei Bestattungen Schwarz wird man über die Dienstleistungen des Bestattungsunternehmen informiert.

Was sich sonst noch alles zum Thema Webdesign schreiben lässt, finden Sie auf den folgenden Seiten.


Tipps und Tricks für Webdesigner
beim Gestalten einer Website!

In den Rubriken "Codeschnipsel", "Optimierung" und "Tutorials" finden Sie ein paar Tipps und Tricks die mir beim Erstellen dieser Webseiten geholfen haben und ich erkläre ein paar technische Details dieser Website. Für mich sind diese Webseiten eine Zusammenstellung von umgesetzten und getesteten Techniken.

Ein Nachschlagewerk, das mir eine wichtige Hilfe ist.

Im Folgenden habe ich eine kleine Auswahl je Rubrik zusammengestellt.

Codeschnipsel für Webdesigner beim Erstellen einer Website

In dieser Rubrik beschreibe ich einige Codeschnipsel, die für die Webgestaltung hilfreich sein können.

Es fängt damit an, wie ich auf diesen Webseiten immer einen Scroll-Balken erzwinge, und warum es für die Besucher wichtig ist, dass das letzte Änderungsdatum einer Webseite in der Fußzeile aufgeführt wird.

Zur Realisierung meiner individuellen Tool-Tipps habe ich eine eigene Webseite geschrieben. Auch bei der Umsetzung einer Datumsanzeige ist genau erklärt, was es dabei zu beachten gibt.

Beim "Farbverlauf im Kopf der Webseiten" sind unter anderem auch die unterschiedlichen Vereinfachungen erklärt. Und für "das animierte Dreieck im Titel der Webseiten" sind verschiedene Möglichkeiten zur Darstellung eines Dreiecks beschrieben.

Natürlich wird die Website auch mit verschiedenen Browsern überprüft. Gerade der Internet Explorer verlangt bei den unterschiedlichen Versionen immer besondere Angaben bei den CSS -Anweisungen .

Weitere Tipps und Tricks für ein gutes Webdesign:

Tipps bei der Optimierung einer Website

Besonders für eine Suchmaschinenoptimierung ist ein durchdachtes Aufsetzen einer Website wichtig.

Zum Beispiel ist eine Aneinanderreihung von Sprungzielen nicht sinnvoll, und sollte daher durch senkrechte Trennlinien voneinander getrennt werden. Auf dieser Unterseite wird auch der Unterschied zwischen den Universalattributen "class" und "id", sowie die Pseudoklassen erklärt.

Um die Anzahl der Anfragen an den Server zu verringern, gibt es unter anderem die Möglichkeit CSS-Dateien zusammenzufassen. Das funktioniert natürlich auch bei JavaScripts. Mehrere Methoden der Komprimierung werden auf der Webseite "Wie komprimiere ich meine Dateien?" aufgeführt und verglichen.

Auch eine vernünftige und durchdachte Weiterleitung oder suchmaschinenfreundliche Adressen sind wichtige Themen bei der Optimierung von Webseiten.

Ein weiteres Thema ist ein dynamischer title-Tag, der immer mal wieder auf Webseiten, zum Beispiel bei Gästebücher, benötigt wird. Viele Tipps für Vereinfachungen bei den CSS-Dateien findet man schließlich noch auf der Seite "CSS-Optimierungen".

In dieser Rubrik finden Sie auch noch folgenden Hinweis:

Tutorials zur Präsentation seiner Bilder oder seinem Portfolio

Hier finden sich Beschreibungen zu dem Thema "Stilvolle Präsentation von Bildern und seinem Portfolio".

Alleine zum Thema Präsentation von Bildern in einer Diashow gibt es mehrere Tutorials. Angefangen hat es mit einer Diashow für beliebig viele Bilder, die mit einem JavaScript realisiert worden ist. Da aber nicht jeder in seinem Browser JavaScript freigegeben hat, ist noch ein Tutorial für eine kleine Diashow mit einem Fade-Effekt beschrieben. Hierbei erfolgt die Umsetzung mit Hilfe von keyframes. Bei der großen Diashow mit einem Fade-Effekt wird dann noch die Performance bei 25 Bildern getestet. Der vorläufige Abschluss erfolgte dann mit einer Diashow, die durch den Ken Burns Effekt die statischen Bilder durch Schwenkbewegungen animiert. Die Idee zu dieser Diashow ist durch eine Anfrage über das Kontaktformular entstanden, bei der nach solch einer Lösung von bewegten Bildern gesucht wurde.

Neben den Diashows kamen auch immer wieder Anfragen zu einer Realisierung von einem CSS3 Slider, bei denen ich verschiedene Varianten vorstelle. Daraus entwickelten sich dann optisch wunderschöne 3D Slider in Form eines Würfels, oder verschiedene Karussell-Slider. Und auch verschiedene Umsetzungen für einen Accordion-Image-Slider sind in einem eigenen Tutorial beschrieben.

Als Produktinformation auf einer Webseite bietet sich auch ein dreidimensionaler, rotierender Werbebanner an. Und eine kreative Lösung um eine Werbung zu platzieren ist ein Eselsohr zum Aufklappen.

Weitere Tutorials finden Sie sortiert nach Datum der Erstellung:

Vielleicht finden Sie ja etwas Interessantes für Ihre eigene Webgestaltung. Lassen Sie sich durch die Codeschnipsel und Tutorials, die ich zusammengetragen habe, animieren.


Bewertungen für diesen Webauftritt

Außerdem habe ich mit verschiedenen Analyse-Tools diese Website untersuchen lassen. Dabei widersprechen sich einige Tools bei den Analysen von Webseiten. Und was ist dann "richtig" oder "falsch"? Ich versuche ein wenig Licht ins Dunkle zu bringen. Unter Bewertungen finden Sie eine Übersicht von bekannten Analyse-Tools und welche Verbesserungen ich daraus für das Erstellen dieser Website erzielen konnte.

Zusammenfassung für ein professionelles Webdesign

Unter den Optimierungen habe ich auf einer separaten Seite mit dem Namen "Suchmaschinenoptimierung (SEO)" die wichtigsten Erkenntnisse aus den einzelnen Analysen zusammengetragen. Dort finden Sie dann Hinweise zum "title-Tag", "Meta-Description", "keywords", Überschriften und allgemeines zum Aufbau einer Seite.

<a href="login.php" title="Privater Login">Security (nur für Mitglieder)</a>

Newsletter

Zum Seitenanfang springen Λ