Ansichten eines Informatikers

Das neue Webseiten-Design

Hadmut
2.2.2017 20:06

Das meiste ist geschafft.

Jetzt habe ich ungefähr mal das umgesetzt, was ich mir so vorgestellt habe. Im Sommer habe ich es ja schon mal mit Flex-Design versucht, weil das auf soooo vielen Webseiten zu modernem Barriere-freiem und Mobilgeräte-geeignetem Design sooo empfohlen wird. Und das sei wichtig, weil Google einen sonst im Google-Suchindex ganz hinten einsortiert, wenn einer vom Handy aus was sucht und die Seite nicht Handy-konform ist. Wollte ich ursprünglich auch so machen, hat sich aber als dafür untauglich herausgestellt.

Jetzt habe ich es doch wieder mit Float-Spalten gemacht, aber eben aufgeräumt und neueren CSS-Strukturen (geht allerdings auf älteren Handy-Browsern nicht immer).

Was mir jetzt vor allem daran gefällt ist, dass ich die drei Ziele, die ich hatte, fast oder ganz erreicht habe. Denn die grundsätzliche Methode, auf Handys die volle Textbreite zu nutzen und oben einen Top-Balken hinzunageln (an dessen Maßen ich noch etwas feilen muss), gibt’s ja schon, wird von vielen Zeitungsseiten so angeboten, die ich mir natürlich angesehen habe. Aber alle haben das so umgesetzt, wie es mir nicht gefällt:

  • Ich will nicht für verschiedene Browser verschiedene Seiten ausliefern, wie viele Server das machen (und dann mitunter den URL mit m. statt www. anfangen lassen). Ich liefer an alle Browser die gleiche Seite und das gleiche Style-Sheet aus.

    Sogar nur noch eines. Denn mit dem alten Design hatte ich (so war es halt Stand der Technik, als ich das geschrieben habe) sogar zwei Style-Sheets, eins für Bildschirm, eins zum Drucken. Jetzt sind vier verschiedene Bildschirmbreiten und das Aussehen beim Drucken in einem Style-Sheet untergebracht (@media-Direktiven).

  • Ich will auch nicht das Handy-Design als Standard-Design und das dann auf Bildschirmbreite aufblasen.
  • Ich will keine Javascript-Orgien.

    Eigentlich wollte ich die Seiten ganz Javascript-frei halten. Habe ich fast geschafft. Für die beiden Buttons oben links und rechts waren zwei kleine Funktionsaufrufe wie onclick="document.body.classList.toggle('showleftmenu');" erforderlich, das ist alles.

    Der Rest ist allein in CSS geschrieben.

    Dafür ein Dank an Jekyll und dessen SASS-Prozessor, denn ohne die wäre das nicht vernünftig und wartbar zu schreiben gewesen.

Ein paar Kleinigkeiten müssen noch gefeilt werden und über die Farben muss ich nochmal grübeln, aber die wesentliche Arbeit ist gemacht. Alles, was jetzt noch zu tun ist, gibt keine Rätsel auf oder müsste erst gelöst werden, sondern beruht auf einfachen, naheliegenden Änderungen. Mit den Proportionen, Abständen usw. bin ich noch nicht ganz happy, aber jetzt lasse ich es erst mal ein paar Tage liegen, weil man sich es ja mit etwas Abstand und nach ein paar Tagen nochmal anschauen soll.

Der nächste Schritt, geplant für dieses Jahr, ist dann, WordPress rauszuschmeißen und das durch ein System zu ersetzen, das möglichst weitgehend statische Webseiten erzeugt. (Deshalb auch das Ziel, nicht nach Browsern zu unterscheiden.)