Logo von Mediengestaltung Torsten Kelsch

Universelles Box-Sizing mit Vererbung

Die CSS-Angabe box-sizing ist ein Thema für sich und soll in diesem Artikel nicht im Detail erklärt werden. Kurz gesagt, erleichtert sie den Umgang mit dem CSS-Box-Modell, weil man angeben kann, dass Ränder und Innenabstände nicht zur Gesamtbreite einer Box hinzugerechnet werden sollen. Dem Webdesigner wird so eine Menge Rechnerei und Fummelei erspart, etwa wenn mehrere Boxen nebeneinander in einen umgebenden Container passen sollen. Genau erklärt wird das alles in dem Artikel Box Sizing auf CSS-Tricks.

Wer mit CSS-Resets arbeitet, wird das Box-Sizing universell angeben wollen. Wie man das am geschicktesten bewerkstelligt, wird ebenfalls in dem oben genannten Artikel angegeben. Hier der Code:

html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}

Ich persönlich setze nicht so gerne universelle Angaben ein (die mit den Sternchen) – ich habe einmal gelesen, dass man das deswegen vermeiden sollte, weil es die Abarbeitung der CSS-Datei etwas verlangsamt. Nachgemessen habe ich das allerdings nicht.

WordPress-Plugin Optimus zur Bildkomprimierung

Das WordPress-Plugin Optimus verspricht eine verlustfreie Bildkomprimierung. Ich habe diese Software nicht ausprobiert, da ich sie nur für bestimmte Fälle für sinnvoll halte. Und zwar dann, wenn man sie bei einem Kunden einsetzt, der sich absolut gar nicht mit Bildbearbeitung auskennt und Fotos quasi unbearbeitet und unverkleinert in seine WordPress-Mediathek hochlädt.

WordPress verkleinert zwar selbst die Bilder automatisch und bietet sie dann in verschiedenen Größen an, aber sie sind auch dann oft noch zu »fett«, um schnell zu laden. Hier will Optimus in die Bresche springen. Wenn ich es richtig verstehe, bezahlt man (Stand: Februar 2015) 19 Euro pro Jahr für alle Eigenprojekte (Optimus HQ) oder 99 Euro pro Jahr für alle Kundenprojekte (Optimus HQ PRO). Der Vertrag verlängert sich nicht automatisch, sodass man nicht geknebelt wird. Es gibt auch noch eine kostenlose Version, die aber nur für Bilder bis 100 KB verwendbar ist.

Doch zurück zur Funktionalität des Programms: Das Bild wird verlustfrei komprimiert, indem die Metadaten entfernt werden, also die EXIF- und IPTC-Daten (was man allerdings auch abschalten kann). Die JPEG-Kompression wird allerdings nicht verändert, sodass das Bild in der ursprünglichen Qualität erhalten bleibt. Es kommt aber eine progressive Komprimierung zur Anwendung. Es stimmt zwar, dass diese die Dateigröße in aller Regel etwas verkleinert, aber sie dient eher folgendem Zweck: Dadurch, dass das Bild zunächst in einer sehr grobpixeligen Version dargestellt und in mehreren Schritten in immer feinerer Auflösung nachgeladen wird, sieht der menschliche Betrachter schon sehr früh etwas und hat den Eindruck, das Bild würde insgesamt schneller geladen werden (»gefühlte« Schnelligkeit könnte man das nennen).

Um aber wirklich kleine und webgerechte Bilder zu erhalten, sollte man sie schon vor dem Hochladen bearbeiten, und dann erübrigt sich natürlich so ein WordPress-Plugin wie das oben beschriebene oder ein ähnliches. Auch eine verlustbehaftete Komprimierung ist, wenn keine zu starke Kompressionsrate gewählt wird, kaum erkennbar. Was also die kleinste Bildgröße bei immer noch guter Qualität ergibt, sind drei kombinierte Faktoren, nämlich eine moderate verlustbehaftete Kompression, die Umwandlung in ein progressives JPEG und die Entfernung der Metadaten. Natürlich sollte man immer ein Original der ursprünglichen Datei behalten, das verkleinerte Bild also unter anderem Namen abspeichern. Sehr gute Ergebnisse erziele ich mit IrfanView und dem RIOT-Plugin. IrfanView ist erhältlich für das Windows®-Betriebssystem, und das Programm ist für private Zwecke kostenlos. Man kann aber einen Geldbetrag spenden. Gewerbliche Anwender dürfen das Programm nur nach Registrierung und Bezahlung von 10 Euro oder mehr verwenden – ein mehr als fairer Preis.

Fußzeile immer am unteren Ende der Seite

Für manche Webseiten-Designs ist es wünschenswert, dass die Fußzeile sich auch dann am unteren Ende des Browserfensters befindet, wenn der Seiteninhalt so spärlich ist, dass er – je nach Bildschirmgröße – das Browserfenster in der Höhe nicht füllt. Die Fußleiste hängt also sozusagen in der Luft.

Sticky Footer (1)
(Aufs Bild klicken zum Vergrößern)

Die Lösung für dieses Problem ist unter dem Begriff »Sticky Footer« bekannt. Der Fuß »klebt« also stets am unteren Rand des Browserfensters.

Sticky Footer (2)
(Aufs Bild klicken zum Vergrößern)

Man findet im Netz mehrere gute Anleitungen, wie man das mit CSS hinkriegt, sodass ich keine Notwendigkeit sehe, mit eigenen Worten eine weitere Anleitung zu schreiben. Statt dessen möchte ich gern auf den Artikel Sticky Footer – Fußleiste am unteren Ende der Website verweisen, den ich ganz besonders gut erklärt fand.

Schlecht anklickbare Radiobuttons

Im mobilen Zeitalter müssen Webseiten natürlich auch auf Mobilgeräten gut bedienbar sein, deswegen ist das responsive Webdesign heute gang und gäbe. Gestern stieß ich aber auf ein Problem mit einem Formular, das ich für eine Kunden-Website erstellt hatte: Die Radiobuttons (diese runden anklickbaren Schalter) reagierten auf meinem kleinen Test-Smartphone erst dann auf meinen Fingerdruck, nachdem ich die Ansicht extrem stark größer gezoomt hatte.

Nur leider lassen sich diese Schaltknöpfe per CSS nicht vergrößern, so wie man etwa die Schriftgröße einstellen kann, jedenfalls nicht ohne viel Gefummel und ohne Zuhilfenahme von Grafiken. Aber es gibt eine sehr, sehr einfache Lösung, auf die ich leider nicht selber gekommen bin. Man nimmt nämlich Labels zu Hilfe. Wie das genau geht, könnt ihr auf uxzentrisch genau nachlesen, in einem Artikel aus 2010. Vielen Dank für diesen guten Tipp an Marian Steinbach.

Radiobuttons mit Label

»Homepages« von Heise

Heute in der aktuellen c’t des Heise-Verlages entdeckt: Dieser Zeitschriftenverlag bietet auch die Erstellung und Betreuung von »Homepages« an. Eigentlich sollte dieser Computer-Fachverlag wissen, dass eine Homepage nur die Startseite einer Website ist, aber was soll’s – Provider und Webhoster bezeichnen ja zum Beispiel ihre Baukastensysteme auch als »Homepage«-Baukasten. Aber das nur am Rande.

Ich war neugierig, was Heise denn da so für Webdesign-Leistungen anbietet. Die Referenz-Websites sehen zum größten Teil ganz hübsch aus, und auch die Quellcodes, die ich mir angesehen habe, ließen keine Mängel erkennen. Allerdings, eine CSS-Datei mit fast 6000 Zeilen Code und einer Größe von etwa 165 KiB, wie ich sie in mehreren Beispielen vorfand, finde ich schon heftig. Ich selbst versuche immer, möglichst unter 25 oder wenigstens unter 30 KiB zu bleiben, was auch bei aufwändigeren Layouts durchaus machbar ist.

Ob Heise ein Content-Management-System einsetzt oder nicht, wird auf deren Website leider nicht verraten – in den Quellcodes der Referenz-Websites, die ich mir angeschaut habe, deutete jedenfalls nichts darauf hin. Also wird vermutlich kein CMS eingesetzt, was es den Kunden erschweren dürfte, ihre eigenen Inhalte zu bearbeiten. Natürlich gibt es immer mal Kunden, die sich sowieso nicht selbst kümmern wollen, sondern die Pflege der Agentur überlassen, und in diesen Fällen ist ein CMS auch nicht erforderlich. Nach meinen Erfahrungen sind diese Kunden aber in der Minderheit. Wie dem auch sei – die Leistungsbeschreibungen deuten darauf hin, dass Heise generell die Kunden ungern selbst agieren lassen möchte: »Und Ihr HTML Know-how aus eigenen Programmierversuchen können Sie getrost in Ihr Langzeitgedächtnis verschieben.« Aha. HTML ist also angeblich eine Programmiersprache. Puh, grober Fehler. Sechs! Setzen! HTML ist eine Auszeichnungssprache.

Ein weiteres großes Geheimnis wird um die Preise gemacht. Wenn man schon verschiedene Komplettpakete anbietet, sollte doch eigentlich auch gleich der Preis dabei stehen. Finde ich jedenfalls. Im Café sehe ich ja auch die Preise in der Getränkekarte oder an der Kuchentheke, ja sogar draußen auf einer Tafel. Aber bei Heise soll man anrufen, sich beraten lassen und/oder ein Angebot anfordern. Es ist klar, dass es Kundenwünsche gibt, die man nicht pauschal abrechnen kann – aber für die Standardleistungen, die man anbietet, kann man doch gleich die Karten in Form von Preisangaben auf den Tisch legen. Jedenfalls handhabe ich das so; bei mir kann man sich eine Preisliste für die gängigsten Leistungen herunterladen.

Fazit: Bei Heise Homepages bekommt man zweifelsohne eine professionell erstellte Website. Was mich aber stört, sind die Ungenauigkeiten in den Formulierungen und dass die Preise für die vorgestellten Leistungspakete nicht von vornherein genannt werden.

Kann ich … benutzen?

Manchmal stellt man sich als Webdesigner die Frage, in welchen Browsern bestimme CSS3-Stilangaben oder HTML5-Elemente überhaupt funktionieren. Um mal eben nachzuschauen, eignet sich die Website Can I use.

Ich finde zwar, die Übersichtlichkeit könnte verbessert werden, aber man kann den gesuchten Begriff in die große orange Suchleiste eingeben, und es gibt ja auch noch die Suchfunktion des Browsers.

Can I use … ?
(Aufs Bild klicken zum Vergrößern)

Jedenfalls werden die Ergebnisse tabellarisch dargestellt und sind teilweise mit Hinweisen versehen – zum Beispiel, um auf bekannte Bugs oder Schwächen in bestimmten Fällen hinzuweisen.

Can I use … ?
(Aufs Bild klicken zum Vergrößern)

Ratzfatz Website erstellen mit rukzuk?

Bitte auch den Nachtrag am Ende des Artikels lesen. Einige meiner Kritikpunkte und Fragen klären sich dort auf.

Und wieder mal ist ein neues Baukastensystem entstanden. Es heißt rukzuk und ich habe 2014 zum ersten Mal davon gehört, weil Flyeralarm dafür Werbung macht. Aber es kann natürlich auch schon älter sein.

Wie alle solche Baukästen wird auch hier versprochen, dass man schnell und einigermaßen mühelos zur eigenen Website kommt. Man kann sich einen kostenlosen Testzugang geben lassen, was ich letztes Jahr auch aus Neugierde getan habe. Und heute habe ich mir das noch mal kurz angesehen, um mich auch gleich wieder davon abzuwenden: Ich persönlich kann mit solchen Baukästen überhaupt nichts anfangen. Viel zu umständlich und unflexibel. Sie sind in aller Regel wohl für Laien gedacht, die über keine HTML- und CSS-Kenntnisse verfügen, aber sich gern eine eigene Website basteln möchten, und das ist völlig in Ordnung.

Warum sich rukzuk dann aber offensichtlich an Profis richtet, die verschiedene Pakete für eine monatliche Gebühr mieten können, ist mir jetzt ein wenig schleierhaft. Das Freelancer-Paket zum Beispiel bietet für 19 Euro im Monat 10 Projekte und 3 Live-Websites. Nur: was ist denn das für ein Webdesign-Freelancer, der zum Erstellen von Webseiten einen Baukasten benötigt und von HTML und solchem lästigen Zeug verschont bleiben möchte? Und der mit Grafikprogramm und Webeditor nicht umzugehen weiß? Also doch ein Baukasten für Privatleute? Nein, denn für die dürfte rukzuk zu schwierig zu bedienen sein bzw. eine zu lange Einarbeitungszeit erfordern. Aber es ist ja auch nach eigenen Angaben sowohl Design-Tool als auch Content-Management-System.

Ich kann mir also nur folgende Zielgruppe vorstellen: Grafikdesigner aus dem Printbereich, die auch Webdesign in ihre Angebotspalette aufnehmen möchten. Schwierig dürfte es nur dann werden, wenn sie mal an einen Kunden geraten, der sehr spezielle Wünsche hat. Da steht man mit den meisten Baukastensystemen dann wohl ziemlich auf dem Schlauch.

Übrigens: Mein Konto wieder platt zu machen, dazu habe ich im Kundenmenü keine Möglichkeit gefunden. Auch eine Art, potenzielle Kunden zu binden.

Nachtrag:
Der Produkt-Manager von rukzuk, Jakob Schröter, hat mir eine sehr nette E-Mail geschrieben und einige meiner Kritikpunkte aufgeklärt. Demnach richtet sich rukzuk vor allem an

Freelancer und Agenturen die keine Coding-Kenntnisse haben und bisher ihre Photoshop-Layouts von externen Entwicklern umsetzen und dann ein CMS integrieren lassen. Dieser Workflow braucht oft viel Zeit für die Kommunikation und Feinabstimmung; mit rukzuk können die Designer selbstständig Websites umsetzen und auch betreiben. Grafikdesigner aus dem Printbereich sind auch viele dabei.
Ein paar Sätze zu unserer Idee finden sich auch hier im Artikel:
https://webmagazin.de/mobile/photoshop-lugt-gestalte-webseiten-direkt-im-browser-gastbeitrag-2958000
und auf unserer Seite: https://rukzuk.com/de/Service/About/

Über unsere Modulentwicklung (http://developers.rukzuk.com/) können übrigens auch individuelle Kundenwünsche umgesetzt werden.

Und zur Löschung des Kontos:

Wir sind gerade dabei eine Löschen-Funktion in den Kundenbereich zu integrieren, diese wird in den nächsten Wochen freigeschaltet.

Navigation nur mit JavaScript?

Momentan bin ich damit beschäftigt, für eine Kundin die Website zu überarbeiten, die vor längerer Zeit eine Agentur für sie erstellt hatte. Das Design ist ausgesprochen hübsch, den Quelltext allerdings entschlacke ich und befreie ihn von einigen Fehlern. Doch was mir gerade noch aufgefallen ist: die Hauptnavigation auf der Startseite funktioniert nur mit im Browser eingeschalteten JavaScript. Schlimmer noch: ist es ausgeschaltet, sieht man weder das Hintergrundbild noch das eigentliche Navigationsmenü, sondern findet eine fragmentarische, fast leere Seite vor.

Nun kann man zwar sagen, dass ja heutzutage nur etwa – je nach Statistik – zwei Prozent aller Benutzer JavaScript deaktiviert haben. Aber wenn diese zwei von hundert Besuchern auf so eine Website stoßen, werden sie wohl ganz schnell wieder weg klicken. Im schlimmsten Fall hat man auf diese Weise zwei Interessenten verloren, die vielleicht Kunden geworden wären.

Eine Navigation zu bauen, die nicht wenigstens als Alternative eine reine HTML-/CSS-Lösung bietet, halte ich also auch in der heutigen Zeit für nicht sinnvoll.

HTML: Höhenangabe bei Bildern

Wenn man Bilder einbindet, kann man ja die Breite und Höhe angeben. Das hat den Sinn, dass der Browser diesen Platz beim Aufbau der Seite schon einmal reserviert. So kommt es bei der Anzeige während des Ladens nicht zu hässlichen Ruckeleffekten.

Nehmen wir mal folgenden Fall an: eine größere Anzahl von Bildern ist in einem Verzeichnis auf dem Webserver gespeichert, diese Bilder haben unterschiedliche Maße, eine Teilmenge wird durch ein PHP-Skript per Zufallsmodus geladen, und diese Bilder sollen zu guter Letzt – vielleicht aus ästhetischen Gründen – alle die gleiche Breite haben. Nun könnte man denken, etwa folgende Angabe im Image-Element sei die Lösung:

width="110" height=""

Die Breite soll also festgelegt werden und die Höhe sich proportional anpassen. Aber in manchen Browsern, zum Beispiel alten Internet-Explorern, funktioniert das nicht. Allerdings klappt es dann, wenn man die Höhenangabe ganz weglässt, also so:

width="110"

Prinzipiell wäre es eleganter, von Vornherein alle Bilder mit einem Bildbearbeitungsprogramm auf dieselben Abmessungen zu schneiden. Dann bräuchte auch der Webbrowser sich nicht die Mühe zu machen, sie zu skalieren. Das macht aber natürlich dann keinen Sinn, wenn die Bilder teils im Querformat, teils im Hochformat vorliegen.

Sieben Webdesign-Sünden

Gerade habe ich einen Artikel über sieben Webdesign-Sünden gelesen. Nun, sieben, das klingt nicht gerade viel. Bestimmt gibt es noch einige Fehler mehr, welche man machen kann, aber die in dem Beitrag beschriebenen Entgleisungen sind besonders schlimme Sünden. Die meisten Webauftritte sind ja schön, informativ und übersichtlich. Aber manchmal stößt man eben auch auf Websites, wo man erst mal gar nicht so richtig weiß, worum es geht und was der Betreiber uns eigentlich sagen will. Dies ist ein Punkt, der in dem Artikel gleich zuallererst genannt wird.

Doch insbesondere Punkt 6 hat mich angesprochen. Es geht um die Lesefreundlichkeit von Webseiten. Ich prangere ja oft genug zu kleine Schriftgrößen oder zu geringe Kontraste zwischen Schrift und Hintergrund an und noch ein paar Dinge mehr. Doch ich habe bisweilen das Gefühl, mit dieser Meinung alleine dazustehen. Wunderbar, dass ich mich in diesem Punkt irre und es Menschen gibt, die meine Ansichten teilen.

Hier der Artikel: Die 7 Website-Sünden.