Fröhliche Weihnachtskarten gefällig?

Weihnachtskarten

Als Weihnachtsgeschenk für unsere Kunden gestalten wir jedes Jahr einen Satz Weihnachtskarten in fröhlichen Farben und mit optimistischen Mustern. 

Dieses Jahr haben wir 3 Sets à 6 Karten (DIN A6) übrig. Wer eines davon haben möchte, schreibt bitte bis zum 16. Dezember einen Kommentar zu diesem Beitrag. Dann gehen die Karten am Montag per Post auf den Weg. Der Versand ist kostenlos.
Wenn sich mehr als drei Leute melden, entscheidet das Los.

Also: Wer möchte fröhliche Weihnachtskarten?

Workflow bei Responsive Design Projekten

Seit wir Webseiten im Responsive Design machen, hat sich unser Workflow verändert. Es ist noch gar nicht lange her, da begann jedes Webprojekt mit Photoshop und Fireworks. Inzwischen kommt die Grafik erst viel später ins Spiel und der Browser spielt eine immer größere Rolle.

Wir haben zunächst das inhaltliche Konzept an den Anfang gestellt, erst danach kommt die Grafik an die Reihe. Der Abstimmungsprozess mit den Kunden ist dadurch einfacher geworden. Wir müssen nicht mehr so viel über Geschmacksfragen diskutieren und können gestalterische Entscheidungen an den Inhalten festmachen. Wir haben dadurch eine bessere Gesprächsbasis mit den Kunden und können uns besser verständlich machen.

Weiterlesen Workflow bei Responsive Design Projekten

Design-Wettbewerbe fair gestalten

Unter dem Motto „Das geht auch fair“ hat der Berufsverband der Kommunikationsdesigner (BDG)  einen Leitfaden herausgegeben, der sich mit der Ausgestaltung von Design-Wettbewerben befasst.

Teilnehmer sollten sich die Konditionen genau durchlesen und  erst danach entscheiden, ob sie eine Arbeit einsenden möchten. Der BDG hat vier Bereiche identifiziert, hinter denen sich allzuoft unfaire Bedingungen verbergen.

  1. 1. Muss der Designer allein sämtliche Haftungsrisiken übernehmen?
  2. 2. Tritt der Designer allein schon durch seine Teilnahme alle Rechte an seinem Werk ab?
  3. 3. Wie sind Vergütung und Nutzung geregelt? Hat der Designer das Recht namentlich genannt zu werden?
  4. 4. Ist die Jury bekannt und mindestens zur Hälfte mit Fachleuten (Designern) besetzt?

Mehr dazu auf der BDG-Webseite.

Bilder für Responsive Designs: Für jedes Gerät das richtige Bild

Bei langsamen Internetverbindungen sind nicht selten die Bilder der Showstopper in Sachen mobiler Nutzerfreundlichkeit.
Werden Bilder einfach nur verkleinert, muss auch ein Smartphone das 400 KB große JPEG laden. Angezeigt wird aber nur eine stark geschrumpfte Ansicht des Bildes, die eigentlich weniger als halb so viele KB hätte.

Dieses Problem betrifft übrigens nur gepixelte Bilder, also klassischerweise Fotos. Grafiken, Icons und dekorative Zutaten wie Schatten und Verläufe kann man bereits heute problemlos per CSS3, mit Iconfonts oder Grafiken im Vektorformat (SVG) lösen. Wenn also im Folgenden von Bildern die Rede ist, sind immer Fotos oder Scans gemeint.
Weiterlesen Bilder für Responsive Designs: Für jedes Gerät das richtige Bild

Klein und scharf: Iconfonts

Webdesigner arbeiten gern mit Symbolen. Eine kleine Lupe im Suchfeld, ein Pfeil, ein Warenkorbsymbol. Jedes dieser Symbole ist ein Bildelement, das entweder per image-Tag oder per CSS (background-image) eingebunden wird.

Diese Bildchen sind in der Regel sehr klein, nur ein paar Kilobyte gross. Dadurch fallen sie beim Laden der Seite kaum ins Gewicht. Naja, bisher war das so. Denn damit die Icons auf den neuen, hochauflösenden Displays nicht pixelig aussehen, sollte man solche Bilder in höherer Auflösung hinterlegen.
Ein Icon, das auf einer Fläche von 32×32 Pixel dargestellt wird, muss also doppelt so groß sein (64x64Pixel) um auf einem Retina-Bildschirm noch scharf auszusehen. Damit steigt die Datenlast, denn die Dateien sind auf einmal gar nicht mehr so klein.
Weiterlesen Klein und scharf: Iconfonts

Leser Fragen, die Netzialisten antworten (1)

Habt Ihr was gegen Facebook?

Jennifer V. fragt:

„Mir ist aufgefallen, dass ihr weder bei Facebook seid noch darüber schreibt. Ich würde gerne wissen warum und ob ihr etwas gegen Facebook habt und wenn ja was.“

Hallo, Jennifer,

das ist eine gute Frage. Mit diesem Punkt hadern wir schon ein ganze Weile, wir haben aber noch keine rechte Lösung gefunden. Es gibt drei Gründe für die Facebook-Abstinenz:

1. Kapazitäten
Es gibt dieses Blog, eine Website und unsere Twitteraccounts. Dies alles aktuell zu halten kostet Zeit. Zeit, die uns für andere Aktivitäten in sozialen Netzwerken fehlt.
Weiterlesen Leser Fragen, die Netzialisten antworten (1)

Responsive Images: Ladezeit sparen mit Vektorgrafiken (SVG)

Webseiten im Responsive Design haben einen schlechten Ruf, wenn es um die Performance geht. Nicht ganz zu unrecht, viele Seiten sind sehr datenlastig. Das liegt in der Regel an den Bilddaten, die auch auf hochauflösenden Displays gut aussehen sollen.

Es gibt vier einfache, aber sehr wirkungsvolle Methoden, Bilddaten schlank zu halten. Die Stichwörter dazu sind eine gute Bildkompression, CSS3-Effekte*, Iconfonts und das SVG-Grafikformat. SVG ist die Abkürzung für „Scalable Vector Graphics“.
[* Ein Artikel dazu erscheint demnächst]

Weiterlesen Responsive Images: Ladezeit sparen mit Vektorgrafiken (SVG)

Bilder für Responsive Designs effizient komprimieren

Gestern bin ich auf einen interessanten Artikel auf filamentgroup.com gestoßen, in dem es um das Problem der Bildgrößen im Responsive Design geht. Hier war ausnahmsweise nicht von Javascript- und PHP-Tricks die Rede, mit denen man Bilder in unterschiedlichen Größen ausliefern kann. Im Artikel geht es – ganz altmodisch – um Bildkompression.
Eigentlich ein alter Hut, aber einer, der es unbedingt verdient hat, aus der Mottenkiste geholt zu werden.

Bei Webseiten, die für möglichst viele Geräte und unterschiedliche Nutzungsszenarios funktionieren sollen, ist die Performance ein entscheidender Faktor. Eine Seite, die nur schleppend oder gar nicht lädt, macht den Besuchern keinen Spaß. Auch Suchmaschinen mögen lange Ladezeiten nicht. Gute Performance ist also ein essentieller Faktor für der Erfolg einer Seite. Weiterlesen Bilder für Responsive Designs effizient komprimieren

Media Queries: device-width & width – wo ist der Unterschied?

Über Media Queries kann man die Breite des Browserfensters (= width) und die des gesamten Bildschirms (= device-width) abfragen. Wobei in der Praxis meist nicht zwischen diesen beiden Werten unterschieden wird, sie werden in einen Topf geworfen.
Dazu trägt man im Viewport-Metatag im head der Seite folgendes ein:

meta name="viewport" content="width=device-with"

Diese Anweisung ist weit verbreitet, auch wir schreiben das so in unsere Themes. Aber genau genommen ist das ein Workaround: Nur wenn width=device-with dasteht, können Android-Geräte die Anweisung device-width überhaupt verstehen. Aber diese Methode hat auch ihre Nachteile. Weiterlesen Media Queries: device-width & width – wo ist der Unterschied?