Dateigröße von Bildern ohne Verluste reduzieren

Dateigröße von Bildern ohne Verluste reduzieren mit ImageOptim

2014 waren Webseiten im Schnitt knapp unter 2MB groß, davon haben Bilder fast 64% ausgemacht. Die restlichen ~36% sind HTML, JS, CSS und Sonstiges. Das liegt zum einen daran, dass oft sehr viele Bilder verwendet werden, zum anderen daran, dass die Bilder nicht optimal abgespeichert worden sind. Es ist schon mal nicht schlecht, wenn man Bilder in Photoshop für Web speichert, aber das allein reicht nicht aus.

(mehr …)

Mehr lesen

Ungenutztes CSS entfernen mit uncss (gulp)

Google Chrome - Audits Tab

Die Größe von CSS-Dokumenten ist 2014 im Durchschnitt um 24% von 46kb auf 57kb gestiegen. Ein Anstieg um fast ein Viertel der Gesamtgröße ist echt nicht ohne. Natürlich könnte man sagen, dass sich CSS stark weiterentwickelt hat und wir viel mehr Möglichkeiten haben Aufgaben, die wir vorher mit Javascript gelöst hätten, mit CSS umzusetzen. Leider ist nur die Größe von Javascript-Dokumenten ebenfalls gestiegen, um 7% im Schnitt.

What surprises me most is CSS’s 11Kb rise. Responsive Web Design and CSS3 animations could account for some of this increase but there’s not been a drop in JavaScript.

http://www.sitepoint.com/average-page-weight-increases-15-2014/

Es handelt sich hierbei um eine negative Entwicklung der wir zumindest ein bisschen entgegenwirken können. Zuerst müssen wir erkennen, ob und warum unsere CSS Dateien so groß sind und schließlich was wir dagegen tun können.

(mehr …)

Mehr lesen

Unsere Websites sind zu fett: Optimierung der Frontend Performance

Frontend Performance optimieren

Wir befinden uns in einer Zeit, in der Performance eine sehr wichtige Rolle spielt. Zwar werden Bandbreiten immer größer und auf mobilen Geräten bekommt man auch schon beachtliche Downloadgeschwindigkeiten zusammen, aber nicht immer hat man die beste Übertragungsrate. Oft steht nur GPRS oder Edge (bspw. in der U-Bahn) zur Verfügung oder man befindet sich in einem öffentlichen WLAN, in dem die Geschwindigkeit deutlich gedrosselt wird.

(mehr …)

Mehr lesen

Gulp Grundlagen: Arbeitsabläufe mit gulp automatisieren

Gulp Grundlagen

Seit knapp drei Jahren ist Task-Automatisierung ein ganz großes Thema. Seinen Anfang hat alles mit grunt genommen. Bald folgten unter anderem auch gulp und brunch. Ganz egal für welches Tool man sich entscheidet, die Automatisierung von Arbeitsabläufen kann durchaus Sinn machen.
In einer Reihe von Artikeln will ich euch gulp und meine bevorzugten gulp-Plugins vorstellen. Alle gulpfiles, die ich in diesem Rahmen erstellen, teile ich auch auf GitHub.

Was dieser Artikel abdeckt

  • Gulp Grundlagen
  • Was ist gulp?
  • gulp installieren
  • gulp in einem Projekt integrieren
  • gulp-Plugins finden und installieren

Außerdem erstellen wir ein Projekt bei dem Less zu CSS kompiliert wird. Das fertige Beispiel kann man hier downloaden.

(mehr …)

Mehr lesen

Standortkoordinaten simulieren mit den Dev Tools in Chrome

Google Chrome Standortkoordinaten simulieren

Vor Kurzem ist mir in Chromes Dev Tools aufgefallen, dass man, neben dem Ausgabegerät und Medium, auch die Standortkoordinaten simulieren kann. Wenn man beispielsweise mit HTML5 Geolocation arbeitet und die Location der Benutzer erfasst, kann man alternative Koordinaten angeben, um so verschiedene Locations zu testen. Weil das ein gar nicht so unpraktisches Feature ist, habe ich ein kleines Beispiel vorbereitet.

Was dieser Artikel abdeckt

  • Google Maps mit der Google Maps API einbinden
  • Koordinaten einer Adressen herausfinden
  • Location mit HTML5 Geolocation erfassen
  • Marker in einer Google Map setzen
  • Standortkoordinaten simulieren

(mehr …)

Mehr lesen

Zwei Dateien in Sublime Text vergleichen

Zwei Dateien in Sublime Text vergleichen

Oft hat man zwei Versionen einer Datei und möchte schnell herausfinden, ob es Unterschiede gibt und an welcher Stelle im Dokument sich diese befinden. In Sublime Text kann man zwei Dateien sehr einfach vergleichen.

So vergleicht man zwei Dateien in Sublime Text

  1. Den Ordner in dem sich die beiden zu vergleichenden Dateien befinden in Sublime Text öffnen.
  2. Beide Dateien mit CMD bzw. Strg. + Klick markieren.
  3. Rechtsklick auf eine der markierten Dateien und „Diff Files…“ auswählen.

Dadurch wird ein diff-File erzeugt in dem die Unterschiede zu sehen sind. In meinem Beispiel werden, wenn es Unterschiede gibt, die Zeilen der style1.css in Rot dargestellt und die der style2.css in Grün. Gibt es keine Unterschiede, werden die Zeilen in weißer Schrift ausgegeben.

Mehr lesen

Buchempfehlung: Scott Jehl – Responsible Responsive Design

Scott Jehl - Responsible Responsive Design

Vor Kurzem habe ich Scott Jehls Buch „Responsible Responsive Design“ gelesen. Weil ich so begeistert davon war und viele neue Dinge lernen und mitnehmen konnte, habe ich hier die für mich wichtigsten Infos zusammengefasst.

Eine Rezension spare ich mir an dieser Stelle, aber es sei gesagt, dass dieses Buch für alle jene eine Pflichtlektüre ist, die viel mit Responsive Webdesign und Performance zu tun haben oder sich in dieses Thema einlesen möchten.

(mehr …)

Mehr lesen

Hintergrundbilder mit Pixel- oder Prozentwerten relativ zu egal welcher Kante positionieren

Background-position 3-4 Werte Syntax

Positioniert man ein Hintergrundbild mit Pixel- oder Prozentwerten, wird die linke obere Ecke des jeweiligen Elements als Referenzpunkt verwendet. Gibt man dem Element beispielsweise background-position: 20px 40px, bewegt sich das Bild um 20px nach rechts und 40px nach unten, ausgehend von der oberen bzw. linken Kante des Elements. Mit CSS2.1 konnte man nur relativ zu eben diesen Kanten positionieren und nicht beispielweise 40px von rechts und 20px von unten.

Mit CSS3 ist das aber schon seit einer ganzen Weile möglich. Dafür gibt es eine 3 bzw. 4 Werte Syntax. Man gibt zuerst die Seite an von der man ausgehen möchte und dann den Pixel- oder Prozentwert um den das Bild verschoben werden soll.

background-position: right 40px bottom 20px;

Lässt man den zweiten Wert weg, ist dieser standardmäßig auf 0.

background-position: right 40px bottom;

Alle aktuellen Browser beherrschen diese Schreibweise und viele schon seit mehreren Versionen. In Internet Explorer kann man diese Technik ab Version 9 anwenden. Ein Live-Beispiel gibt es in diesem Codepen zu sehen.

Mehr lesen