Sprite Generierung mit Glue

Glue ist ein auf Python basierendes kleines Command Line Tool das einem bei der Sprite Generierung behilflich ist.

http://glue.readthedocs.org/en/latest/index.html

Wenn man Glue einmal installiert hat reicht ein Aufruf von

glue input output

um aus einem Input Ordner aus Icons ein Sprite samt zugehörigem CSS File im Output Ordner zu erstellen.

Das sieht schon recht vielversprechend aus. Allerdings sind noch ein paar Anpassungen nötig. Zuerst einmal möchte man mittels Konfiguration Margins oder Paddings um bzw. in die Icons einfügen dass lässt sich einfach per Konfiguration erledigen:

$ glue input output --margin=5

Nun möchte man noch dass CSS Output optimieren und am Besten eine SCSS-Datei generieren. Dazu bietet Glue auch Konfigurationsmöglichkeiten. Im Speziellen ist es möglich ein SCSS Output zu erstellen und ein SCSS-Template mitzugeben um das generierte SCSS zu steuern. Glue bedient sich dabei der jinja Template Engine.

Ein einfaches SCSS-Template könnte z.B. so aussehen:

.my_sprite {
    background-image:url('{{ sprite_path }}');
    background-repeat:no-repeat;
    {% for image in images %}
    &.{{ image.label }}{{ image.pseudo }} {
        background-position:{{ image.x ~ ('px' if image.x) }} {{ image.y ~ ('px' if image.y) }};
        width:{{ image.width }}px;
        height:{{ image.height }}px;
    }
    {% endfor %}
    {% for r, ratio in ratios.iteritems() %}
    @include mq-retina() {
        background-image: url('{{ ratio.sprite_path }}');
        background-size: {{ width }}px {{ height }}px;
    }
    {% endfor %}
}

Ein Aufruf von

$ glue icons sprites --retina --scss-template=template-scss.jinja --scss --namespace= --sprite-namespace=ic --margin=5

generiert dann schon ein individuell angepasstes SCSS.

Das ganze lässt sich noch weiter optimieren. Ich empfehle bei Interesse ein Studium der Dokumentation

 

 

Responsive Design – Anti Patterns

  1. Denselben Content für alle Devices laden
    Viele responsive Seiten laden den gleichen Content über alle Devices hinweg. Zum Beispiel 1 CSS File das alle Media Queries behandelt oder Images für alle Auflösungen, Bilder werden in diesem Fall einfach runterskaliert.
    Beweis hierfür ist der HTTP traffic. Bei Seiten die den gleichen Traffic deviceübergreifend haben ist dies i.d.R. der Fall.
  2. Zusätzliche Assets laden
    Während das Laden der gleichen Assets für alle Devices die Unterschiede derselbigen ignoriert ist das Laden zusätzlicher Assets für mobile Geräte alles das was wir für “mobile experience” wissen. I.d.R. handelt es sich hierbei um zusätzliche CSS Anweisungen oder Image Sprites
  3. Images in der doppelten Größe laden
    Auch beliebt ist der Laden von Bildern in doppelter Größe die dann herunterskaliert werden um auch auf Retina Geräten scharf auszusehen.

Alle Punkte haben etwas gemeinsam:

  • Sie sehen die  Desktop Seite als die Basis, anstatt sich auf mobile first zu konzentrieren
  • Sie nutzen nicht die Vorteile oder gehen gewissenhaft mit den Limitierungen der einzelnen Plattformen um.
  • Sie versuchen das Problem exklusiv von der client Seite zu lösen.