Notizen nach einem Clubabend mit Roman Heinzinger am 23.11.2017

Ich gestehe, dass ich schon mehrere Themen gekauft habe und mit keinem so wirklich zufrieden bin. Nehmen wir zum Beispiel das Thema „Alora“ mit dem die vorliegenden Seiten gestaltet werden. Dieses Thema verschlingt zum Beispiel alle Aufzählungszeichen. Aber es kostet immerhin 60 Euro. Jedes Standardthema tut das nicht, kann aber wieder viele andere Dinge nicht, die Alora so attraktiv machen. Es wird vielen anderen auch so gehen: die Suche nach dem ultimativen Thema kann eine Endlose sein.

Genaugenommen hat uns Roland bei seinem Vortrag einen revolutionären Vorschlag gemacht, obwohl er es nicht so ausgedrückt hat: „vergesst die Themen von WordPress und wählt ein Thema, das auf einem bewährten CSS-Framework aufbaut“.

CSS-Frameworks im Vergleich

Es gibt sehr viele solcher Frameworks , darunter die Platzhirschen: Bootstrap (bei den Usern) und FoundationClass (bei den Profis). Um es nicht all zu kompliziert zu machen, wählte Roman bei seinem Vortrag Bootstrap.

• 10 CSS-Frameworks im Vergleich
• 22 best responsive css-frameworks

Responsive Design, mobile first

Außerdem hat Roman als wichtigstes Kriterium beim Themenentwurf überhaupt das „Responsive Design“ genannt, weil die meisten Zugriffe auf Webseiten nicht mehr über PCs sondern über mobile Endgeräte erfolgen. Um sich hier einzulesen, besucht bitte die deutsche und englische Seite über „Responsive Design“ der Wikipedia. Und die Logik einer Seite orientiert sich zuerst am mobilen Layout („mobile first“), weil eben die Zugriffe von mobilen Endgeräten so häufig sind.

Wie war es bisher auf mobilen Endgeräten?

Zwar hatten die Smartphones immer auch einen Browser „an Bord“, aber die Freude beim Surfen klassischer Seiten war endenwollend, weil man die Inhalte nicht nur vertikal sondern auch horizontal verschieben musste, um alle Inhalte zu sehen und darüber hinaus waren alle Steuerelemente viel zu klein für die Touch-Bedienung.

Daher war der Browser am Handy anfangs bestenfalls ein Behelf. Große Webdienste boten daher entweder eine mobile Version ihrer Webseite an, die sich oft sogar automatisch aktiviert hat, wenn ein Handy als Endgerät erkannt wurde oder es gab (und gibt) für alles und jedes eine App, die in den meisten Fällen nichts anderes als die Webseite macht, aber alles in den verfügbaren Bildschirmplatz am Handy konfektioniert. Daraus sieht man, dass die Entwickler vor dem Problem mehrerer paralleler Entwicklungen gestanden sind: Webversion, mobile Version, App.

Die massiven Erweiterungen der Stilbeschreibungssprache CSS machten es möglich, dass eine Seite sich automatisch an das jeweilige Endgerät anpassen kann, wenn man die entsprechenden Anweisungen der Beschreibungssprache CSS verwendet. Das folgende Bild veranschaulicht diese Technik sehr gut:

By Tomáš Procházka – Autor, CC0, Link

Je nach Bildschirmbreite (und wie wir gelernt haben auch abhängig von der Pixeldichte) passt sich das Layout an („responsive“) und eine Seite muss nur mehr in einer einzigen Version entwickelt werden, eine besondere mobile Version oder eine App sind entbehrlich.

Diese Eigenschaft der „Responsiveness“ bieten mittlerweile praktisch alle Themen an. Aber jedes Thema erstellt sich seine StyleSheets ohne weitergehendes Konzept. Und hier haken die CSS-Frameworks ein. Sie lösen das Problem des Aussehens und der Responsiveness auf eine wiederverwendbare Art und Weise.

Was macht den Unterschied?

Was ist nun der Unterschied, wenn man ein Bootstrap-Thema wählt und nicht irgendein anders?

Jedes Thema muss für jedes Objekt am Bildschirm beschreiben, wie es auszusehen hat. Schriften, Abstände, Verhalten bei Bildgrößenänderung usw. Und das ist natürlich bei Bootstrap auch so.  Der Unterschied ist, dass alle diese beschreibenden Attribute bei Bootstrap offen gelegt sind, während sie bei allen anderen Themen völlig verschiedene Bezeichnungen haben können. Hat man sich also in ein konkretes Thema eingearbeitet und wechselt es, dann muss man bei herkömmlichen Themen alle diese Details neu erarbeiten, während bei bootstrap-Themen die Nomenklatur gleich bleibt.

Rolle des Webdesigners

Wenn man sich in die Lage eines Webdesigners versetzt, der verschiedene Installationen zu betreuen hat, dann wird er aus Gründen der Arbeitsökonomie immer versuchen, Dinge zu vereinheitlichen. Der Webdesigner hat verschiedenartige Installationen zu betreuen, zum Beispiel Joomla, WordPress oder Typo-3, die bisher alle völlig verschieden zu handhaben waren, auch, was das Design anlangt. Wenn aber die Designs alle auf demselben CSS-Framework beruhen, also etwa auf Bootstrap, dann kann der Designer dieselben Techniken auf allen Installationen anwenden, was ihm die Arbeit sehr erleichtert.

Einem Enduser könnte diese Situation egal sein, aber man kann den Eindruck gewinnen, als wären die boomenden CSS-Frameworks der Beginn vom Ende der klassischen Themenkonzepte.

Prognose

Gehen wir also davon aus, dass es also vorteilhaft ist, ein Thema zu wählen, das auf einem Framework beruht, könnte man sogar so weit gehen, zu prognostizieren, dass sich das Framework-Konzept durch die massive Benutzung durch die Entwickler in kurzer Zeit als ein Standard etablieren wird und alle anderen Themen früher oder später wegen Inflexibilität verschwinden werden.

Nun sind wir mehrheitlich Endbenutzer und keine Webdesigner. Dennoch wollen wir langfristig auf „das richtige Pferd“ setzten und das scheint nach dem von Roman Gehörten ein Bootstrap-Thema zu sein.

[wird fortgesetzt]

Franz Fiala

Franz war pensionierter HTL Lehrer (TGM), Präsident von ClubComputer, Herausgeber der Clubzeitung PCNEWS und betreute unser Clubtelefon und Internet Support. Er war leidenschaftlicher Rapid Wien Fan. Er ist leider Anfang Jänner 2024 nach langer schwerer Krankheit verstorben.