Webdesign und Programmierung

Webseitenmodell 2.5

Für meine Webseiten nutze ich kein fertiges Content-Management-System, sondern "code" noch selbst. Dabei hat sich ein "responsives Webseitenmodell 2.5" als am günstigsten herauskristallisiert.

Was bedeutet das? Responsive Webseiten passen sich dem möglichen Platz und/oder dem jeweiligen Endgerät an auf dem sie angezeigt werden. Dabei verschieben sich die Blöcke mit dem Inhalt oder werden je nach Endgerät auch mal gar nicht oder anders angezeigt. Normalerweise werden dann verschiedene Umschlagpunkte, meist definiert über die zur Verfügung stehende Browserbreite, festgelegt, wann sich die Darstellung anpassen soll. Zwischen diesen Punkten ist manchmal auch die Schriftgröße variabel und bspw. ein vielfaches eines hundertstels der Browserhöhe oder -breite. Dadurch ist der Eindruck auf jedem Bildschirm ein anderer.
Früher, als es noch weniger responsive Möglichkeiten in html und css gab behalf man sich oft damit einen zentrierten Bereich zu haben in dem der restliche Inhalt angezeigt wurde. Dieser Streifen war in der Breite fest und bspw. 960 Pixel breit. Auf größeren Bildschirmen hat man rechts und links einen ungenutzten Raum, auf einem kleineren einen Scrollbalken.

Bei großen Bildschirmen finde ich das Konzept dieses Streifens nicht verkehrt, da der Inhalt dadurch fokusiert wird. Um weiterhin responsiv zu sein gibt es dennoch zwei Zustände an denen man den Unterschied ob man es mit einem mobilen Endgerät oder einem klassischen Rechner und Bildschirm zu tun hat fest machen kann und der in meinem Konzept genutzt wird.
Die Unterscheidung zwischen "Landschafts-Modus" und "Portrait-Modus". In der Regel nutzt man Mobiltelefone im "Portrait-Modus" und Computer-Monitore im "Landschafts-Modus".
Damit auf den Mobilgeräten alles gleich aussieht wird nun der Inhalt relativ zur Breite des Browsers skaliert. Im "Landschafts-Modus" wird relativ zur eingestellten Schriftgröße skaliert.
Die "Komma fünf" kommt ins Spiel, wenn die Breite des zentralen Streifens als Vielfaches der eingestellten Schriftgröße mehr Platz benötigt, als zur Verfügung steht, bspw. bei einem kleineren Notebook. Dann wird die Schriftgröße so skaliert, dass der Inhalt genau in die vorhandene Breite passt.
Im Prinzip sind damit alle möglichen Nutzungsfälle abgedeckt ohne viele Umbruchszenarien einzukalkulieren. Am ehesten wird man bei einem Tablet zwischen den beiden Modi wechseln.

CSS vor Javascript

Wo immer möglich versuche ich eine reine CSS Lösung der Javascript-Lösung vorzuziehen. Vermutlich wird das Gros der Nutzer zwar Javascript aktiviert haben, so dass es keinen Unterschied macht. Ich finde es aber beruhigend zu wissen, dass es auch ohne funktionieren wird, da ich zwischendurch schon mal Javascript deaktiviere, um zu sehen, wie eine Seite dann aussieht oder ob sie noch funktioniert. Mein Chromebrowser auf dem Mobiltelefon hat es bspw. permanent deaktiviert.

Nichtsdestotrotz setzte ich Javascript/JQuery danach auch gerne mal als Sahnehäubchen oder zu Auflockerung ein. Beispielsweise bei den Igelpfoten die über den Bildschrim laufen.

Usability und weiteres Seitenlayout

Prinzipiell finde ich es vernünftig die zentrale Navigation ständig verfügbar zu halten, damit der Nutzer der Seite nicht lange suchen oder scrollen muss. Während ich früher noch mit Haupt- und Seitennavigation gearbeitet habe, verwende ich in meinem 2.5 Seitenkonzept nur noch Kopf- und Fusszeile. Dabei bleibt die Kopfzeile im Landschafts-Modus fixiert, wohingegen sie aus Platzgründen im Portrait-Modus durch ein "Hamburger-Menü" ausgetauscht wird.
Die Fusszeilen sind in beiden Modi sichtbar und enthalten redundante Verlinkungen oder solche die weniger im Fokus stehen.

SEO und Co

SEO ist nicht alles, aber ohne SEO ist alles nichts. So würde ich es kurz zusammenfassen.

Was ist SEO? Es ist die Abkürzung für "Search Engine Optimization". Dabei verteilt sich auf den ersten Blick ein Tropfen Wahrheit in einer großen Tasse Hokuspokus. Die Wahrheit dabei ist, dass Sie bzw. Ihr Programmierer es durch Optimierungen bei den Dingen die Sie beeinflussen können den Suchmaschinen so einfach wie möglich machen sollen gerade Ihre Seite zu finden, wenn man danach sucht. Es ist nichts falsches daran die Ladezeiten zu optimieren, Bilder orientiert am Inhalt des Seitentextes zu benennen oder wiederholt einzubauen worum es denn auf der entsprechenden Seite geht. Allerdings und jetzt kommt der Hokuspokus macht es dann, wenn alles optimiert wurde, wiederum nur die Masse aus. Wie häufig wird die Seite angefahren, wie oft woanders erwähnt, wie oft verlinkt?
Auch eine noch so optimierte Seite nutzt nichts, wenn Sie keiner kennt und nicht nach Ihr gesucht wird.

Vor drei Wochen habe ich eine Domain gestartet bei der ich versucht habe mich an SEO Vorgaben zu orientieren. Dabei war der Schlüssel im wahrsten Sinne die "Keywords". Gibt man bei Google "Fritzbox Ständer" ein findet man die Seite https://www.fritzbox-staender.de/ momentan auf Platz zwei. Auf Platz eins darüber ist nur eine Startnext-Kampagne zum selben Thema, die jedoch bereits ein Jahr länger im Netz steht.
Wenn Sie Beratung zum Thema SEO wünschen können Sie gerne eine Anfrage dazu stellen.