Blog-Layout

Weil schon Fragen reinkommen… [Nachtrag]

Ich bin mal wieder dran gegangen, das Layout zu erneuern. Ich hatte das im Sommer schon mal angegangen und das verwendet, was in der Web-Literatur und von den Gremien immer empfohlen wird, um ein Design automatisch an verschiedene Bildschirmgrößen und Handys anzupassen, nämlich ein Flex-Layout. Hatte ich gewählt, weil man dazu ohne JavaScript auskommt. Mir hätte das gepasst, gab aber so viele Beschwerden, dass ich es wieder abgeschaltet habe. Dann hat mir die Zeit gefehlt.

Jetzt gehe ich das nochmal etwas anders an, wobei ich es aufgegeben habe, ganz ohne JavaScript auszukommen. Sie pfriemeln zwar ständig an HTML herum, aber irgendwie kommen sie da nicht so zu Potte, dass es ganz ohne geht. Ich habe mich zwar noch ein bisschen aufgeschlaut, was die @viewport und @media-Einstellungen angeht, was vieles erleichtert, aber so ganz gereimt geht’s noch nicht. Als ich mich das letzte Mal mit den @media-Einstellungen beschäftigt habe, hieß es noch, dass man die Einstellungen für verschiedene Bildschirmbreiten nur anhand von Pixel-Werten unterscheiden kann. Das ist aber ziemlicher Unsinn, denn die einen haben einen großes Billig-Tablet oder einen Notebook, das auf 10 oder 13 Zoll mit 1024 oder 1366 Pixel Breite daherkommt, während der andere ein Teures Handy hat, das auf 5 Zoll mit 2560 Pixel ankommt. Inzwischen geht das aber auch mit der Zeichenbreite als Einheit, womit es auf die tatsächliche Bildschirmauflösung nicht mehr ankommt, sondern darauf, wieviele Zeichen auf die Breite passen.

Momentan habe ich eigentlich noch gar nichts umgebaut, sondern eher das alte Layout an CSS3 und HTML5 und einen anderen Macro-Prozessor angepasst. Das alte Layout habe ich irgendwann mal vor ca. 10 Jahren erstellt und mir dazu damals einen eigenen Macro-Prozessor geschrieben, der auch gleich Graphiken für Menus und sowas erstellt hat. (Bisher waren die Menüboxen rechts mit Hintergrundgraphiken gemacht, jetzt sind sie in CSS3) Das war aber im Laufe der Jahre alles so langsam verfilzt und veraltet, weshalb ich das jetzt erst mal komplett neu für einen anderen Makroprozessor umgeschrieben habe (Jekyll). Meinen eigenen alten wollte ich nicht mehr aktualisieren, zumal mir die Makrosprache SASS dazu sehr gut gefällt.

Bisher habe ich also erst mal die alten Strukturen nachgebaut, was schon verdammt viel Arbeit war, bis ich das schrittweise alles mal auseinandergenommen, getrennt und einzeln geputzt habe. Ein zentraler Punkt dabei war, dass ich sämtliche Maße ersetzt habe (noch nicht ganz fertig, bisschen feilen muss ich noch), weil ich bisher alles in Pixeln gemessen hatte (CSS Maß px), was vor 10 Jahren eben so üblich war, aber mit der Veränderung der Hardware (siehe oben) einfach nur noch Murks ergibt, weshalb ich jetzt alles an der Zeichengröße bemessen habe. Wenn man unterschiedliche Zeichengrößen im Browser auswählt (oder Bildschirme mit verschiedenen Auflösungen) sollte das (hoffe ich) eigentlich immer alles proportional stabil bleiben und uabhängig davon sein, wieviel Pixel der Bildschirm breit ist oder für ein Zeichen verwendet wird.

Es ist erstaunlich, aber obwohl die Webseite so simpel (und eigentlich altmodisch/veraltet) aussieht, war ich doch ziemlich lang damit beschäftigt, das alte Dickicht auseinanderzunehmen und aufzuräumen. Sehr gelegen kam mir dabei, dass es inzwischen ordentliche Elemente zur Seitenstrukturierung gibt. Immer wieder beschweren sich Leute, dass meine Webseiten miserable aussehen, wenn man sie in Facebook verlinkt und die dort ein Vorschaubild generieren. Mir hat zwar mal jemand eine Anleistung geschickt, die lief aber darauf hinaus, dass man das Vorschaubild selbst erzeugt und angibt, wo es zu holen ist. Ich habe jetzt aber ehrlich gesagt gar keine Lust, zu jeder Webseite ein Vorschaubild zu produzieren, nur damit es bei Facebook geleckt aussieht. Wenn die was sind, beachten sie zumindest die neuen Seitenstrukturierungselemente. Dafür sind die nämlich da.

Was ein anderes Problem aufwirft. Dummerweise eines, das ich nicht mehr finde. Mich hatte mal ein Sehbehinderter angeschrieben, der mich um irgendwas gebeten hatte, weil sein Gerät, mit dem er sich Webseiten so in riesengroß anzeigen lassen kann, damit er sie noch lesen kann, damit nicht klarkommt. Ich hatte das auch mal geändert, ich weiß nur nicht mehr, was das war, und muss das wieder raussuchen.

Ein Leser beschwert sich gerade, dass die Links beim drüberhovern in Barby-Rosa erscheinen.

Pfff.

Ich hatte das noch nicht detailliert ausgepriemelt, sondern mit

$brand-color:	     hsl( 50deg,80%,50%)
$link-color:         adjust-hue($brand-color,180deg)
$hover-color: 	     adjust-hue($brand-color,270deg)
$visited-color:	     darken($link-color, 15%)

berechnet, denn es gibt ja so verschiedene Ansätze und Formeln, wie man sich seine Farben berechnet, damit sie sich im Farbkreis gleichmäßig verteilen und damit für das Auge angeblich harmonisch aussehen. Etwa weil sie komplementär sind oder als Dreieck im 120°-Winkel stehen oder bei vier Farben mit 90°. Soll ja wichtig sein, dass man bei allen Farben die Helligkeit und Sättigung gleich hält und nur die Farben varriiert. Deshalb habe ich es mit den Funktionen in SASS gemacht, damit das automatisch ausgerechnet wird.

Aber wenn’s stört: Ich probier einfach mal ein paar andere Farben aus.

Ich werde sowieso noch ein paar Sachen ändern und ausprobieren, denn mit dem Umschreiben des ganzen Senfes auf einen aktuellen und funktionsfähigen Makroprozessor und auf CSS3/HTML5 habe ich jetzt wenigstens mal die Grundlage, um überhaupt wieder sauber und systematisch Änderungen vorzunehmen.

Nachtrag

Es kommen gerade Hinweise und Beschwerden rein.

Einer schreibt, dass ihm jetzt auf dem Handy die Schrift zu klein ist, was sicherlich damit zusammenhängt, dass ich die Breite der Textspalte jetzt in Zeichen und nicht mehr in px angebe. (Noch ein paar Tage Geduld, das will ich noch ändern, das schaffe ich aber heute nicht mehr.)

Ein anderer weist darauf hin, dass die Einheit px nicht Bildschirmpixel, sondern Norm-Pixel für 96dpi bezeichnet.

Ist halt so ne Sache. Früher ging das damit ganz gut, als die Leute alle am PC saßen. Heute wird das aber schwierig mit den Mobilgeräten, es wird empfohlen, sowas wie

@viewport
   width:		device-width
   zoom:			1

reinzunehmen, damit die Einheiten des Layouts usw. auf die tatsächliche Bildschirmgröße bezogen werden.

Ich habe damit mal vor ein, zwei Jahren rumprobiert, bin aber zu völlig uneinheitlichen Ergebnissen mit verschiedenen Geräten gekommen. Anscheinend wird es jetzt mit modernern Browsern aber wieder besser und einheitlicher, weil die jetzt alle auf HTML5 trimmen.

Es gibt Leute, die sich mit sowas ständig herumschlagen, dazu habe ich aber keine Lust.

Ich werde in den nächsten Tagen das Layout noch so verändern, dass für Mobilgeräte das Seitenmenü rechts wegfällt und für den Text einfach gar keine Vorgaben gemacht werden, sondern das Gerät das selbst nach den Nutzereinstellungen bearbeiten soll.