Einen Augenblick Geduld...
Vorüberlegungen und technische Hintergründe zu dieser Webseite
Das dunkle Design gewinnt allgemein zunehmend an Bedeutung. Ich habe mich mit diesem Internetauftritt dazu entschieden sämtliche Seiten in einem dunklem Layout zu gestalten.
Natürlich hat die Verwendung von Schrift und Bildern vor dunklem Hintergrund auch einen ergonomischen und für mobile Geräte einen energiesparenden Aspekt. Für die digitale Bildbearbeitung und für Designer jedweder coleur ist der dunkle Hintergrund aber auch immer schon essentiell für eine neutrale Farbwiedergabe. So erhält das Licht auch seine grundlegende Funktionalität: hell zu sein, ohne dabei zu stören. Außerdem können wir uns so besser auf das fokussieren was erkannt werden will und soll.
Mir ist es wichtig, dass die Webseite auf sämtlichen Geräten "gut" aussieht und das enthält, was für das verwendete technische Medium des Betrachters optimal ist.
Ich habe viel Zeit dafür verwendet, die Anpassungen für sämtliche gebräuchlichen Bildschirmauflösungen vorzunehmen ("Responsive Webdesign").
Bedingt durch die geringere Auflösung von mobilen Geräten, wie z.B. Smartphones oder Tablets im Vergleich zu Desktop PC's sehen diese Seiten unterschiedlich aus.
Besonders bei der Startseite habe ich viel Energie für die optische Unterschiedlichkeit, bzw. Anpassung verwendet.
Startseite Desktop PC
Startseite Tablet
Startseite Smartphone
Den meisten zeitlichen Aufwand habe ich für die Programmierung im Hintergrund verwendet. Wie schon geschrieben ist die Anpassung an die unterschiedlichen Gerätegrößen des Betrachters sehr aufwendig.
Realisiert habe ich diese Anpassungen mit CSS (sog. "Cascading Style Sheets"). Dies sind kleine textbasierte Dateien, die z.B. den Abstand von Bildern und Texten, Hintergrundfarben, Größe, Anzahl und Abstand von Spalten, Schatten und einfache geometrische Körper erzeugen.
Zu den geometrischen Körpern gehören die orangenen Quadrate mit dem kleinen Themensymbol zu Beginn jeder Unterseite. Diese sind keine Pixelgrafiken, wie z.B. die bekannten JPG, PNG oder GIF-Bilddateiformate, sondern Vektorformate.
Dadurch lassen sich geometrische Figuren beliebig skalieren ohne selbst große Dateigröße zu produzieren und damit die Anzeige- bzw. Ladegeschwindigkeit einer Seite negativ zu beeinflussen.
Grundsätzlich habe ich die Webseite in HTML5 programmiert. Damit lässt sich zur Zeit sehr viel realisieren. Auch Animationen, Audiodateien und Videos lassen sich darin professionell integrieren.
Des Weiteren habe ich auf ein sog. "Bootstrap" zurückgegriffen, welches mir die wichtigsten und grundlegenden Formatierungen bot. Somit fängt man bei der Programmierung einer Webseite nicht ganz von vorne an.
Auch dies ist eine textbasierte Datei, die man im Klartext lesen und editieren kann. Dafür habe ich den Adobe Dreamweaver genutzt.
Zu HTML kommt noch Javascript hinzu, das ich für navigatorische und optische Zwecke auf der Webseite nutze, z.B. um ein Bild im Vektorformat mit einem Link zu versehen.
Von vorgefertigten Seiten, wie man sie bei Wordpress oder Typo3 findet bin ich gaaanz weit entfernt. Die richtige Flexibilität erhält man nur wenn man selbst "codet".
Ja, und da wären dann noch die bewegten Elemente auf der Webseite. Wer den Start der Webseite beobachtet hat, kann bei Nutzung eines Desktop PC's die Animationen und farblichen Veränderungen auf der Startseite entdecken. Diese habe ich mit "HYPE" realisiert.
Mittlerweile ist ja hinlänglich bekannt, dass Adobe Flash leider ständige Sicherheitslücken aufweist, die von den Programmierern durch Updates behoben werden müssen. Damals fand ich Flash auch toll und habe einiges damit realisiert, aber als Animationsprogramm für Webinhalte ist es mittlerweile abgelöst worden. Adobe sorgt auch für keine Updates mehr...
...ist auch immer ein Thema gewesen. Damit ist die Downloadgeschwindigkeit der Webseite gemeint. Also die Zeit, die verstreicht bis man den ersten erkennbaren Inhalt sieht. Im Zeitalter von "5G" ist das sicher nicht mehr so ein Thema wie ein paar Jahre davor.
Aber wenn man wie ich noch aus einer Zeit kommt, in der man analoge Modems genutzt hat, die mit 2400 oder noch mit 1200 Baud gesendet haben, hat man gelernt sparsam mit den Ressourcen umzugehen. D.h. die Dateigröße der Bilder mussten immer sehr klein sein und somit entsprechend komprimiert werden.
Ein Bild einer Digitalkamera sollte man nicht ohne es zuvor zu bearbeiten für eine Webseite nutzen. Allerdings gibt es Dienste, die diese Komprimierung automatisch vornehmen, z.B. Whatsapp.
Bilder, die über Whatsapp verschickt werden, werden immer automatisch komprimiert (und damit leider auch schlechter). Sie büßen somit bei einer Skalierung (Vergrößerung) stark an Qualität ein.
Ich habe mir überlegt, hierzu Tutorials im Laufe der Zeit auf meiner Webseite zu verfassen (siehe Tutorials).
Ich suche bei Webseiten immer "das gewisse Extra". Die von mir erstellten Webseiten enthalten z.B. generell eine Grußformel, die die Tageszeit auf der Startseite berücksichtigen. Auch finde ich es klasse, wenn bestimmte Elemente animiert werden und ausgesuchter Text mit Effekten versehen wird, z.B. die sog. "Parallaxing Effekte", die den Eindruck einer Dreidimensionalität vermitteln, in dem Bilder und Texte in unterschiedlichen Ebenen mit voneinander abweichender Geschwindigkeit beim Scrollen mit der Maus dargestellt werden. Diese Effekte lassen sich mit CSS und Javascript umsetzen und geben einer Seite die spezielle Note.
Ebenso interessant ist die Einblendung des aktuellen Datums. Das vermittelt zumindest den Eindruck, dass die Webseite auf dem neuesten Stand ist - genauso wie ein aktueller Copyrightvermerk.
