Logo von Mediengestaltung Torsten Kelsch

Besondere HTML-Symbole

Manchmal sucht man ja besondere Symbole fürs Webdesign. Um Ladezeiten gering zu halten, bietet es sich an, statt Bilderchen einzubinden, lieber HTML-Code zu benutzen. Ich hatte kürzlich nach einem freundlichen Symbol gesucht, mit dem ich gut hervorheben könnte, dass man meine Blogartikel gern kommentieren kann. Doch was käme in Frage? – Ich stieß schließlich auf einen riesigen Fundus von allerlei Zeichen, und zwar auf der wunderschön gestalteten Website einer Künstlerin namens Sabina Nore. Und da fand ich einen schräg nach unten gerichteten Bleistift – was könnte passender sein, als mit einem Stiftsymbol zum Kommentieren zu ermuntern!

Na gut, niemand wird versuchen, mit einem Bleistift einen Kommentar unter einen meiner Blogartikel zu schreiben. Eher kommt da wohl die Tastatur in Frage. Andererseits: Wenn ich auf meinem Smartphone Text eintippe, nehme ich nicht meine ungeschickten Finger direkt, sondern behelfe mir mit so einem – hm, nennen wir ihn mal: Hilfsstift. Dann passt das Symbol ja doch. Ich hoffe nur, es wird überall auch korrekt angezeigt …

Aus Word eingefügt

Viele Kunden lieben es, die Inhalte ihrer Webseiten selber zu pflegen. Der Einsatz eines Content-Management-Systems (CMS) hilft ihnen dabei und führt langfristig dazu, Kosten zu sparen, da ja nicht für jede Textänderung die Webdesignerin oder der Webdesigner beauftragt werden muss. Manchmal kommen allerdings Fragen auf oder der Text erscheint nicht so formatiert, wie die Kundin oder der Kunde sich das bei der Eingabe in den Texteditor des Systems vorgestellt hatte.

Und bei solchen Gelegenheiten stoße ich immer wieder auf die – mit Verlaub gesagt – Unsitte, dass Text aus Word oder einem anderen Textverarbeitungsprogramm kopiert und in den Editor des CMS eingefügt wurde. Das Problem dabei ist, dass auch alle Formatierungsanweisungen der Textverarbeitung mitkopiert werden. Man sieht das, wenn man in den HTML-Modus des Editors umschaltet. Und in diesem Modus muss ich arbeiten, um den Text wunschgemäß formatieren zu können – denn diese Texteditoren, wenn man sie im WYSIWYG-Modus (What You See Is What You Get) bedient, zerschießen leider ganz gerne mal die Formatierungen.

Hier ist ein Beispiel, was passiert, wenn man Text aus Word in den WYSIWYG-Editor eines Content-Management-Systems kopiert:

Bild: Aus Word eingefügt
(Aufs Bild klicken für Ausschnittsvergrößerung)

Man sollte also, wenn man denn seine Texte schon vorschreibt und nicht direkt in den Editor des CMS eintippt, immer als Reintext-Datei (Textendung .txt) abspeichern oder gleich einen Reintexteditor benutzen, also so was wie Notepad, da hier eben keine Formatierungsanweisungen mitgespeichert werden.

Hamburger-Menü klappte nicht unter iPad 1

Große Diskussionen gibt es darum, wie man im Sinne eines responsiven Webdesigns die Navigation für kleine Displays von Mobilgeräten umsetzen sollte. Es häufen sich Stimmen gegen die sogenannten Hamburger-Menüs – das sind diese drei übereinander geschichteten Balken, die eben ungefähr so aussehen wie ein Burger oder auch ein Sandwich.
Hamburger-Menü

Wenn man sie aber einsetzt, sollten sie natürlich auf allen Geräten funktionieren. Probleme kann es mit alten iPhones und iPads geben. Dort lässt sich das Menü unter Umständen gar nicht bedienen, öffnet sich also beim Tippen darauf nicht. Ein Kunde hatte mir gemeldet, dass dieses Hamburger-Menü mit seinem älteren iPhone nicht bedienbar war; ich konnte das Fehlverhalten mit einem iPad 1 nachvollziehen. Folgende Lösungen habe ich gefunden:
Fix CSS hover on iPhone/iPad/iPod
Super einfacher iOS Hover Fix

Word ist kein HTML-Editor

Es ist zwar schon eine Weile her, aber ich bin tatsächlich schon mal auf eine Website gestoßen, die mit Microsoft Word gebastelt worden war. Im Quelltext konnte man das in den Meta-Angaben erkennen. Und der Quellcode sah furchtbar aus: mit unsinnigen Angaben vollgepackt, unübersichtlich, einfach hässlich. Nun, eine Textverarbeitungs-Software, egal von welchem Hersteller, ist kein HTML-Editor, und so wird in aller Regel auch ein entsprechend schlimmer Quellcode erzeugt – vermutlich auch heute noch. Ein aktueller LibreOffice Writer allerdings kriegt sauberen HTML-Code hin, vorausgesetzt man erstellt ein HTML-Dokument.

LibreOffice Writer: HTML-Dokument

Der HTML-Datei, die man nach dem Speichern erhält, fehlen jedoch noch die CSS-Anweisungen für das Aussehen. Darüber hinaus verfügt das Programm über keine Syntaxhervorhebung, geschweige denn Codefaltung, Codevervollständigung oder sonstige Hilfen, die der Übersichtlichkeit dienen. Und eine komplette Website so erstellen zu wollen, wäre schon selbstquälerisch – eine knappe Infoseite, etwa »Hier entsteht in Kürze eine wunderbare Website«, kann man natürlich auf diese Art machen.

Freilich gibt es spezielle Editoren für HTML, CSS und Web-Programmiersprachen. Und wer sich mit diesen Dingen gar nicht befassen möchte, sollte halt ein Content-Management-System einsetzen, sich in ein Baukastensystem einarbeiten oder einen Webdesigner beauftragen – und hoffen, dass der in Word oder Writer höchstens das Angebot schreibt.

CSS: Die rätselhaften Kind- und Geschwister-Selektoren

Nun mache ich das schon so furchtbar lange mit dem Webdesign, nämlich etwa siebzehn Jahre (ja, ich kenne noch Frames und andere schreckliche Dinge), aber eine Sache will sich mir einfach nicht einprägen, und das ist die Sache mit den Kind-, Geschwister-, Nachfahren- und Nachbar-Selektoren. Ich weiß zwar, was das ist und wie die funktionieren, aber ich kann mir die Details nicht merken, etwa welches Zeichen man in der CSS-Datei für welchen Selektor angeben muss.

CSS: Die rätselhaften Kind- und Geschwister-Selektoren

Immer wieder muss ich nachschlagen. Wem es auch so geht: hier sind ein paar Links zu Seiten, auf denen das alles wunderbar erklärt ist, mal in Englisch, mal in Deutsch:

Es gibt zweifelsohne noch mehr gute Übersichten und Erklärungen, und meine Liste ist nur als persönliche Auswahl anzusehen. Wer mehr will: Nun, es gibt ja Suchmaschinen …

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.


Fatal error: Uncaught Error: Call to undefined function twentyeleven_content_nav() in /var/www/ud04_82/html/torstenkelsch.de/blog/wp-content/themes/mediengestaltung-tk/category.php:19 Stack trace: #0 /var/www/ud04_82/html/torstenkelsch.de/blog/wp-includes/template-loader.php(74): include() #1 /var/www/ud04_82/html/torstenkelsch.de/blog/wp-blog-header.php(19): require_once('/var/www/ud04_8...') #2 /var/www/ud04_82/html/torstenkelsch.de/blog/index.php(17): require('/var/www/ud04_8...') #3 {main} thrown in /var/www/ud04_82/html/torstenkelsch.de/blog/wp-content/themes/mediengestaltung-tk/category.php on line 19