Kategorien
Frontend: HTML5, CSS3, jQuery Linktipps

☞ Bilder als Data-URL: Ein Blick auf die Performance der Technik

Achtung: vermutlich war ich hier etwas voreilig mit Behauptungen, mehr dazu in den Kommentaren.

Sergej Müller hat das Einbinden von Bildern in CSS als Data-URL einem Performance-Test unterzogen Recommended Site. Sein Fazit:

Durch die Base64-Kodierung der Bilder hat sich der „Gewicht“ der Gesamtdatei nahezu verdoppelt. Das trägt dazu bei, dass der Server eine deutlich größere Menge an Daten zu übertragen hat – eine kostspielige Prozedur. Erst die GZIP-Komprimierung reduziert die Dateigröße erheblich und kann die Differenz der Ladezeiten auf ein Minimum verringern.

Ebenfalls nimmt der Browser mehr Zeit in Anspruch, um den Base64-Code zu dekodieren. Ein lokaler Vergleich der Dateien hat bestätigt, dass die Ausführung (das Laden entfällt, da lokal) des HTML-Codes mit Data-URLs stets um 30 ms hinterher hing. Bilder als Data-URL: Ein Blick auf die Performance der Technik

Das Base64 die Datenmenge nahezu verdoppelt war mir soweit sogar bewusst (Nachtrag: meistens handelt es sich nur um ein Drittel mehr), weswegen ich von Data-URLs bislang auch Abstand genommen habe. Der Vorteil nur eine Datei laden zu müssen ist laut diesem Test also eher eine Nullnummer, hinzu kommt ja auch noch die Zeit, die Bilddaten zu dekodieren.

Ändert sich dann doch mal eine Grafik muss diese im CSS aktualisiert werden und damit auch die komplette CSS-Datei beim Besucher neu geladen werden – inkl. der anderen Grafiken.

Kategorien
Linktipps

☞ Signika font

Signika is a sans-serif with a gentle character, developed for wayfinding, signage, and other media where clarity of information is required. It has a low contrast and tall x-height to improve readability of texts in small sizes as well as in large distances from the reader. The typeface comes with a wide character set supporting most of the Eurpoean languages, small caps, pictograms and arrows. The figures are designed as tabular. Being a typical signage typeface it is inspired by typefaces such as Ronnia, Meta, and Tahoma. All weights from Light to Bold have alternative Negative versions, optimised to solve the effect of juxtaposed positive and negative text setting, where the text in negative tends to look thicker.

Sieht sehr hübsch und lesbar aus. Und es gibt noch einen Icon-Font dazu. Gefunden bei esse est percipi.

Signika font

Kategorien
Linktipps

☞ The Brand New Printed Smashing Book: „The Mobile Book“ | Smashing Magazine

The future is mobile. As more and more people are turning to mobile devices, designers and developers are facing new challenges and opportunities. Web design has to adapt, but before it can do so, we have to do our homework first. We have to understand the new medium, discover the right techniques and tools, and be well-prepared before we start designing for it. The Mobile Book, our brand new printed book, serves exactly this purpose.

Das Smashing Magazine bringt Ende November/Anfang Dezember ein Buch übers mobile Web heraus, sowohl als Druck als auch für Kindle, iPad und anderes E-Reader-Gerät. Wer jetzt schon bestellt, bekommt nochmal 20 % Preisnachlass.

The Brand New Printed Smashing Book: „The Mobile Book“ | Smashing Magazine

Kategorien
Linktipps

☞ watched.li(ve) | knuspermagier.de

Nach nahezu unendlicher Wartezeit und ewiger Vertröstung von allen, die es gerne benutzen wollten ist es nun soweit. Die alpha-beta-sonstwas-Phase ist vorbei und watched.li kann nun endlich von jedem, der will benutzt werden!

Wenn ich jetzt noch wüsste, welche Folgen ich wovon schon gesehen habe …

<a href="http://knuspermagier project management online.de/2012-watched-live.html“ onclick=“__gaTracker(’send‘, ‚event‘, ‚outbound-article‘, ‚http://knuspermagier.de/2012-watched-live.html‘, ‚watched.li(ve) | knuspermagier.de‘);“>watched.li(ve) | knuspermagier.de

Kategorien
Linktipps

☞ Easy color contrast ratios | Lea Verou

However, I found that my workflow for checking a contrast ratio with them was far from ideal. I had to convert my CSS colors to hex notation (which I don’t often use myself anymore), check the contrast ratio, then adjust the colors as necessary, covert again etc. In addition, I had to adjust the lightness of the colors with a blindfold, without being able to see the difference my adjustments would make to the contrast ratio. When using semi-transparent colors, it was even worse: Since WCAG only describes an algorithm for opaque colors, all contrast tools only expect that. So, I had to calculate the resulting opaque colors after alpha blending had taken place. After doing that for a few days, I got so fed up that I decided to make my own tool.

Lea Verou hat ein Tool zur Farbkontrast-Kontrolle gebaut, dass ein paar mehr Eingaben als die bislang üblichen entgegen nimmt.

Easy color contrast ratios | Lea Verou

Kategorien
Linktipps

☞ noxoc.de – Set up a new Drupal site from the command-line with git and drush

Nils Riedemann:

Today I had to create a new Drupal installation and it has been a while that I had to create Drupal installation from scratch. So I thought about writing up this guide for future reference and find a way to create a complete new Drupal install entirely from the command-line to get as fast as possible to a state where I actually start working.

Hatte das mit Drush schon mal irgendwo aufgeschnappt. (Eins der Dinge die ich für Contao gerne hätte.) Ziemlich coole Sache jedenfalls und hier nochmal kurz und knapp erklärt.

noxoc.de – Set up a new Drupal site from the command-line with git and drush

Kategorien
Linktipps

☞ Complete List of HTML Meta Tags

Eine ziemlich lange Liste von gebräuchlichen und ungebräuchlichen Meta- bzw. Link-Tags. (via Jens Grochtdreis / Flocke.)

Complete List of HTML Meta Tags

Kategorien
Linktipps

☞ Andy Rutledge – Baseball Redux

Andy Rutledge mit einem weiteren Teil aus seiner Redux-Rubrik:

My friend used sports franchise websites as an example of the polar opposite of clean and minimal design in his answer. He was, of course, correct. I smiled at that fact and said, “You know, I wonder if a clean and minimal design would work for a sports franchise website. It would be interesting to see how or even if that could be done and still work.” We talked about it. He suggested that maybe I should give it a try.

Die Redux-Artikel von Andy Rutledge sind es im Grunde immer wert, gelesen und beachtet zu werden. Schon so manche Website ist ihm zum Opfer gefallen und wurde im Layout vereinfacht, verbessert und aufgehübscht.

Andy Rutledge – Baseball Redux