Homepage-Journal

An dieser Stelle wird versucht, die technische Entwicklung unserer Homepage zu dokumentieren. Das ist jetzt allerdings nichts für technologisch schwache Nerven! Wer nicht an HTML & Co interessiert ist, kann diese Seite gerne "vergessen"!

Ulf

11.10.2022

Inhaltlich ist die neue Homepage auf einem Stand, der eine Veröffentlichung rechtfertigen könnte. Allerdings wird noch etwas Zeit vergehen, bis der neue Name festgelegt wurde und eine entsprechende Domain zur Verfügung steht. Bisher habe ich mich nicht sehr intensive mit dem Thema "Responsive Webdesign" beschäftig, aber die dahinter stehenden Ideen sind für einen IT-gestählten Elektroingenieur bestechend konsequent und richtig. Bei responsive-webdesign.mobi war dazu am 11.10.2022 folgendes zu lesen.

Responsive Webdesign stellt eine aktuelle Technik zur Verfügung, welche es ermöglicht mit Hilfe von HTML5 und CSS3 Media-Queries das einheitliche Anzeigen von Inhalten auf einer Website zu gewährleisten. Hierbei wird das Layout einer Website so flexibel gestaltet, dass dieses auf dem Computer- Desktop, Tablet und Smartphone eine gleichbleibende Benutzerfreundlichkeit bietet und der Inhalt gänzlich und schnell vom Besucher aufgenommen werden kann.

"Form follows function" - beim Responsive Webdesign folgen Funktion, Design und Inhalt der jeweiligen Bildschirmauflösung des verwendeten Desktop, Tablet oder Smartphone.

Der Begriff "Responsive Webdesign" bedeutet im übertragenen Sinne "reagierendes Webdesign". Inhalts- und Navigationselemente sowie auch der strukturelle Aufbau einer Website passen sich der Bildschirmauflösung des mobilen Endgeräts an - es reagiert auf und korrespondiert mit der Auflösung des mobilen Endgeräts. Responsive Webdesign folgt dem Nutzer, und nicht wie gegenwärtig, der Nutzer den meist starr konstruierten Layouts konventioneller Websites und Online-Shops.

Die Vorteile von Responsive Webdesign zeigen sich in Statistiken und Trends zur Nutzung mobiler Endgeräte. Der steigende Marktanteil von Smartphones und Tablets wie iPhone und iPad erzwingen auch das Umdenken beim Gestalten von Webseiten. Wurde bis dato für eine Bildschirmauflösung von maximal 1000px Breite auf dem Computer-Desktop optimiert, muss heutzutage auf eine Vielzahl verschiedener Endgeräte Rücksicht genommen werden:

Smartphones Bildschirmauflösung (Breite): 320px bis 480px
Tablets Bildschirmauflösung (kurze Seite): 768px bis 1024px
Computer Bildschirmauflösung (Breite): 1024px + ....

Bei einer strikten Trennung von Mobil- und Desktop-Version der Website, also einer nicht responsive fähigen Website, entsteht ein erhöhter Pflegeaufwand von redaktionellem Content und Bildmaterial. Dazu kommt, dass die Website unter Umständen für zukünftige Tablet- oder Smartphone-Formate eine dritte oder vierte Version des Layouts benötigt.

Wer jetzt noch nicht verstanden hat, worum es geht, der besucht mit seinem Smartphone an besten einmal die Seite der "Guitar-Letters". Diese Internetpräsenz wurde seinerzeit im gültigen Standard der frühen 2000er erstellt und da gab es kaum internetfähige Telefone oder Tablets. Mit einem üblichen Computer ist die Nutzung dieser Seite auch heute noch kein Problem, aber mit einem Smartphone...

Unsere neue Homepage ist diesbezüglich schon ganz gut aufgestellt, aber ein paar Knackpunkte gibt es dennoch:

Die Skalierung ist noch nicht auf allen Bildschirmgrößen einwandfrei. Da ist also noch "Room for Improvement".
Der Hoover-Effekt des Hauptmenüs funktioniert noch nicht auf allen Bildschirmgrößen einwandfrei.
Änderungen in den beiden Menüs müssen händisch in allen Dateien eingepflegt werden. Es wäre gut, wenn die beiden Menüs in je einer Datei definiert werden und dann jeweils per Script automatisch von den einzelnen HTML-Seiten erstellt werden. Das schreit folglich nach einer Lösung in JavaScript oder PHP.