Lightbox richtig einbinden

Lightbox von Lokesh Dhakar ist das ursprüngliche und sicherlich auch bekannteste Lightbox-Skript. Es ist in JavaScript programmiert und hat die Aufgabe, kleine Vorschaubildchen beim Anklicken zu vergrößern und als Ebene über die Webseite zu legen. Der Vorteil ist, dass sich das vergrößerte Bild nicht in einer neuen Webseite öffnet und der Benutzer somit auch nicht nach jedem Bild wieder zurück navigieren muss. Und auch ganze Diashows lassen sich damit einrichten.

Da ich Anleitungen manchmal nur recht flüchtig lese, machte ich Fehler bei der Einbindung, sodass das Skript nicht funktionierte. Dabei ist auf der Webseite des Anbieters alles präzise erklärt. Trotzdem möchte ich hier die Vorgehensweise selbst einmal und in deutscher Sprache notieren – ja, genau, insbesondere für mich selber, damit sich das fürs nächste Mal bei mir einprägt. Learning by blogging, könnte man sagen.

Im Head-Bereich der HTML-Datei wird auf die CSS-Datei der Lightbox verwiesen, also beispielsweise:

<link rel="stylesheet" href="includes/lightbox.css">

Mehr gehört gar nicht in den Kopfbereich. Erst am Ende der HTML-Datei, vor dem schließenden Body-Tag, wird auf die JavaScript-Dateien verwiesen. Lightbox setzt JQuery voraus, und der Link zu dieser JavaScript-Bibliothek muss als erstes gesetzt werden. Erst danach kommt der Verweis auf die Lightbox-JavaScript-Datei. Beispiel:

<script src="includes/jquery.min.js"></script>
<script src="includes/lightbox.js"></script>

Der Flexbox-Frosch

Erinnert sich noch jemand an die Zeit, als man ein Web-Layout mit Tabellen hinfummelte? Ich habe da immer große Schwierigkeiten gehabt, den Quellcode zu durchblicken. Mit CSS in den Zweier-Versionen konnte man dann tabellenlose Layouts erstellen. Boxen konnten per CSS aneinander ausgerichtet werden, und der HTML-Quellcode war einfacher zu verstehen.

Und heute haben wir Flexbox. Besonders im Hinblick auf responsive Layouts ist das eine feine Sache. Und die aktuellen Browser verstehen das nun endlich auch; vor ein paar Jahren war das noch nicht der Fall. Bloß – einfach zu verstehen ist Flexbox nicht, wie ich finde. Doch es gibt ein Fröschlein, das einen an die Hand nimmt und der/dem interessierten Webdesigner/in in 24 Übungen die Geheimnisse eines Flexbox-Layouts näher bringt: Flexbox Froggy. Man muss zunächst diesen einen, später mehrere Frösche in ihre Teiche bugsieren. Und dabei wird einem dieses Flexbox-Zeug wesentlich klarer. Wirklich nett gemacht!

Flexbox-Fröschlein
(Aufs Bild klicken zum Vergrößern)

Im Webbrowser HTML-Seiten erstellen

Mit HTMLhouse lassen sich im Webbrowser HTML-Seiten erstellen und sofort anschauen. Wenn man mag, kann man sie auch publizieren. Es wird dann eine Zufallsadresse erzeugt, die man weitergeben kann, sodass sich bestimmte Personen die erstellte Seite anschauen können. Darüber hinaus ist es auch möglich, die Seite in der Form öffentlich zu machen, dass sie auf HTMLhouse präsentiert wird. Jeder andere Benutzer kann den Quelltext einsehen und auch verändern, allerdings die Änderungen nicht speichern.

HTMLhouse
(Aufs Bild klicken zum Vergrößern)

Sinn und Zweck von HTMLhouse ist es, einen einfach zu bedienenden Testbereich für HTML-Quelltexte zur Verfügung zu stellen. Man muss sich nirgends anmelden, somit werden auch keine persönlichen Daten gespeichert. Die erstellten Seiten werden im lokalen Speicherbereich des Browsers abgelegt, sodass man sie zu einem späteren Zeitpunkt weiter bearbeiten kann – vorausgesetzt, man benutzt denselben Browser auf demselben Computer und hat die Browserdaten, insbesondere den lokalen Speicher, nicht gelöscht. Kleiner Nachteil: Entfernt werden können einmal erstellte und publizierte Seiten nicht (Stand: April 2017).

HTMLhouse ersetzt keinen HTML-Editor und ist für die tägliche Arbeit einer Webdesignerin oder eines Webdesigners sicherlich ungeeignet, und dafür ist es auch gar nicht erschaffen worden. Wenn man hingegen dies und das ausprobieren oder Entwürfe etwa mit entfernten Kollegen teilen möchte, ist es eine gute Sache, und auch für Schulungszwecke kann ich es mir gut vorstellen.

Browser und Betriebssystem feststellen

Gelegentlich kommt es vor, dass Kunden einen Fehler oder ein seltsames Aussehen der für sie gestalteten Website melden. Zum Beispiel laufen Schriften in verschiedenen Browsern oder unter verschiedenen Betriebssystemen verschieden breit, wenn auch nur geringfügig. Und der Kunde meldet dann unschöne Zeilenumbrüche. Außerdem gibt es immer mal wieder Bugs in der einen oder anderen Browserversion.

Frage ich dann die Kundin oder den Kunden, welchen Browser sie oder er genau hat, kann mir oft genug keine Auskunft gegeben werden. Nun kann man zwar am Telefon durchgeben, wo diese Angaben zu finden sind – einfacher und schneller ist es aber womöglich, den Kunden zu bitten, folgenden URL aufzurufen: https://whichbrowser.net/. Dort werden Browser, Browserversion und Betriebssystem angezeigt, also etwa You are using Opera 39.0 on Windows 10.

Which Browser?

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)


Torsten Kelsch