Fotos und Grafiken werden immer für die Webseite optimiert. Nachdem JPEG über Jahrzehnte das Königsformat für Fotos war und Motive mit transparentem Hintergrund die Ladezeit ausdehnt, ist WebP das neue JPEG + PNG.
Viele Formular-Elemente widersetzen sich hartnäckig allen Annäherungen seitens CSS – sehen wir mal von border-radius und font-size für Eingabefelder vom vom Typ Text ab.
SVG-Grafiken aus Inkscape und Adobe Illustrator sind vollgepackt mit Attributen, die für die Anzeige in Webseiten nicht gebraucht werden und die Ladezeit verlängern. Wie läßt sich SVG optimieren?
Pseudo-Elemente wie ::before und ::after ersparen zusätzliche HTML-Elemente, aber früher galt, dass Javascript nicht auf Pseudo-Elemente wie ::before und ::after zugreifen kann, weil sie nicht im DOM liegen. Javascript querySelector und getComputedStyle bilden zusammen eine Lösung.
Webfonts lassen sich auf die Zeichen reduzieren, die tatsächlich benötigt werden, und dann wie Bilder als Base64 codieren. Dabei entsteht eine Zeichenkette, die direkt in die @font-face-Regel eingesetzt wird.
Ein Verlauf oder Gradient wird durch CSS background-image erzeugt, aber für Text hat CSS nur color zu bieten. CSS color hingegen weist einem Text Farbe zu, aber keinen Verlauf, denn gradient ist ein Wert für die Eigenschaft background-image
Brackets ist ein Code-Editor, programmiert in HTML und Javascript. Dennoch ist Brackets eine Desktop-Anwendung. Adobe hat das Projekt ins Leben gerufen, heute wird es von seiner eigenen Community auf Github weitergeführt.
Das SVG image-Element bettet Bilder in ähnlicher Weise wie das HTML-img-Tag in eine SVG-Grafik ein. Das Bild kann eine Bitmap (jpg, png, gif) oder eine weitere SVG-Grafik sein.
Wie beim Einbetten von Bildern in HTML bleibt bei PNG bzw. GIF die Transparenz im Bild erhalten.
CSS-Dateien entwickeln sich schnell zu einem brodelnden Hexenkessel. Sie wachsen, werden unüberschaubar und versanden in Redundanz. Wie behalten wir die Übersicht und wie finden wir das CSS above the fold?
Gibt es ein Gegenteil von Suchmaschinen-Optimierung? Bad Bots und Spider machen auf vielen Webseiten mehr als die Hälfte des Traffics aus und belasten einen Server in Stoßzeiten zusätzlich.
In XHTML gehörte das iframe-Tag zu den eher unerwünschten Elementen und wurde in einen eigenen Dokumententyp verbannt. Statt dessen bevorzugte XHTML das object-Tag. Mit HTML5 hat sich das Blatt zugunsten des iframe-Tags gewendet.
Formulare machen dem Benutzer mit mobilen Geräten das Ausfüllen schwer. Ohne besondere Auszeichnung durch angepasstes CSS sind die Eingabefelder mikroskopisch klein.
placeholder und label sind die wichtigsten Elemente bei der Gestaltung von Formularen, die dem Benutzer auf mobilen Geräten entgegenkommen.
Icon-Fonts funktionieren wie jeder ladbare Font, sie hören auf CSS color genauso wie auf font-size. Sie wirken auf dem großen Desktop-Monitor genauso glatt wie auf den kleinen Monitoren der mobilen Geräte.
