Beitragsbild: Halt Deine Schnauze, damit Du hörst, was ich jetzt sage!

Halt Deine Schnauze, damit Du hörst, was ich jetzt sage!

Vorgeschichte

Gestern entdeckte ich auf dem Gesichtsbuch ein Foto von Frl. Plastique, was mich irgendwie nicht losließ. Bei einem großen Internetversandhaus habe ich das T-Shirt dann wiedergefunden. Allerdings, ist es immer cooler, wenn man selbst etwas macht. Vorallem dann, wenn man von seinem besten Kumpel darauf hingewiesen wird, dass das vorgefertigte Shirt doch etwas albern wirkt, da dort steht: „Kinski halt Deine Schnauze, damit Du hörst, was ich jetzt sage“.Continue reading

Responsive Background animiert

Responsive Design: Interessante, animierte Hintergründe für Websites

Vorgeschichte

Gestern habe ich beschrieben, wie man gut skalierbare, schmale Hintergründe nach einer Technik von Robin erstellt. Heute möchte ich kurz darauf eingehen, wie man diese Hintergründe animieren kann, um einen noch interessanteren Effekt zu erzielen.

Hinweis

Die Demo ist bis jetzt nur im Chrome lauffähig. Er lief auch einmalig im Firefox 22, allerdings wirklich nur einmalig und dann niewieder.Continue reading

Responsive Background

Responsive Design: Interessante Hintergründe für Websites

Vorgeschichte

Das Design einer Webseite definiert sich durch viele Punkte. Neben gestalterischen Punkten wie bspw. sauberer Typografie, Layouting und Stringenz im Design zählen dazu genauso „physikalische“ Anforderungen der Marke Ladegeschwindigkeit und Responsiveness.
Im Design hatte ich in der letzten Zeit sehr stark damit zu kämpfen, dass mir meine Hintergründ Probleme bereitet haben. Dabei gibt es vorallem seit CSS3 zahlreiche Möglichkeiten und Sünden diesen Punkt zu gestalten. Vollfarben sind oftmals wenig interessant, ähnliches gillt für Farbverläufe. Bilder sind meistens groß, beeinflussen die Ladezeit gerade für mobile Geräte massiv und skalieren als Hintergründ nicht effektiv. Kommen also für Responsive Design nur eingeschränkt in Frage.

Was also tun?

Mein Mitbewohner Robin hat sich dazu eine sehr gute Technik ausgedacht, welche sowohl interessante Hintergründe bietet, als auch die Ladezeit schont. Mithilfe einer 300 × 300 Pixel Grafik und geschicktem Missbrauch Gebrauch des Kompressionsalgorithmus JPEG ist es ihm gelungen, genau diesen Effekt zu erzielen.Continue reading