Icon-Fonts aus SVG erstellen

Sonderzeichen werden heute dank der Webfonts zuverlässig angezeigt, selbst exotische Symbole wie Yin Yang und ein Schneemann kommen mit so umfangreichen Fonts wie Droid (sehen wir einmal von IE8 ab) auf den Monitor.

Anstandsregeln für PDFs in Webseiten

Eingebettete PDFs sind beliebte Downloads in Webseiten – in erster Linie beliebt in Marketing und Kommunikationsabteilungen und den Kollegen, die für die Redaktion des Internetauftritts zuständig sind. Meine Kunden hingegen flehe ich auf Knien an: Lasset ab vom PDF auf der Homepage oder behandelt es besser. Aber wie bindet man ein PDF richtig ein und was muss ein PDF mitbringen?

Sieben Wege, SVG in HTML-Seiten zu setzen

SVG als Standalone ist klasse. Der Clou von SVG ist, dass es sich als Komponente in die wohlbekannten Techniken des Webdesigns integrieren läßt.

Formular – Eingabefelder : Datum, Email, Suche

Wenn Formulare auf mobilen Geräten landen, sind die wiederspenstigen Eingabefelder eine Bremse:

Immer wieder umschalten zur numerischen Tastatur, weil Ziffern, Sonderzeichen oder Emailadressen eingegeben werden. Mit neuen Input Types bringt HTML5 Komfort in HTML-Formulare.

@font-face – Fonts in Webseiten einbetten

Seitdem die modernen Browser @font-face in wunderbarer Harmonie unterstützen, können ladbare Fonts mit ausreichender Sicherheit in Webseiten eingebettet werden.

MathML: Formeln in HTML

MathML ist die Markup-Spache für mathematische Formeln und Ausdrücke. MathML gibt es seit 1997, aber für die nächsten 15 Jahre unterstützte kein Browser das Markup für Formeln. So verkümmerten das Formel-Markup im besucherfreien N-Raum.

Gleich mittenrein

Positionieren mit float oder display:inline-block?

Positionieren mit float ist der Standard im Webdesign. float ist aber auch die häufigste Ursache für Kopfschmerzen und Schwindelgefühl.

Directors Cut: 10 Tipps für Email-Newsletter 2018

Natürlich wäre es schön, wenn der Newsletter genauso elegant wirkt wie die Webseite. Aber ein Emailprogramm ist kein Browser und Email ist keine Webseite.

CSS mask: Bilder maskieren

CSS mask image bringt Masken und Freistellpfade für alle Bitmap-Formate für HTML-Elemente.

HTML table mit border-radius und border-collapse

Wenn die HTML-Tabelle bei border-radius partout keinen abgerundeten Rahmen zeigen will, ist wahrscheinlich border-collapse: collapse schuld.

CSS hyphens – Silbentrennung – Strichlein Strichlein ganz an Rand

Mit CSS3 hyphens ist die Silbentrennung in HTML-Seiten auf leisen Sohlen eingeschlichen: Endlich trennen Firefox und Safari, Chrome (nur unter Mac OS), IE11 und Edge Silben schmerzlos.

Google Fonts

Google Webfonts hat schon 2010 aufgegriffen, was Webdesigner interessiert und eine gewaltige Sammlung von Schriften für Webseiten zusammengestellt.