Design | t3n News News, Infos, Tipps und aktuelle Artikel zu Design 2014-04-13T11:28:43Z t3n Redaktion http://t3n.de/tag/design Glyphter: Blitzschnell zum eigenen Icon-Font – per Drag & Drop http://t3n.de/news/glyphter-drag-and-drop-icon-fonts-538515/ 2014-04-13T11:28:43Z
Icon-Fonts bieten viele Vorteile, die klassische Bild-Icons nicht bieten können. Die Erstellung solcher Fonts kann jedoch einiges an Zeit in Anspruch nehmen. Nicht mit Glyphter. Wir stellen dir das.. ...

Icon-Fonts bieten viele Vorteile, die klassische Bild-Icons nicht bieten können. Die Erstellung solcher Fonts kann jedoch einiges an Zeit in Anspruch nehmen. Nicht mit Glyphter. Wir stellen dir das kostenlose Online-Tool vor.

Icon-Fonts sind, wie der Name schon sagt, Schriftarten und bieten viele Vorteile gegenüber der Implementation von Icons als Bilder. Icon-Fonts lassen sich problemlos mit CSS stylen und sind verlustfrei skalierbar, sodass sie in einer beliebigen Größe verwendet werden können, ohne Qualitätsverluste hinnehmen zu müssen. So sehen sie auch bei HIDPI-, beziehungsweise Retina-Displays immer top aus.

Auch die Dateigröße lässt kaum Wünsche offen: Icon-Fonts brauchen nur einen Bruchteil des Speicherplatzes, den eine vergleichbare Lösung inklusive Retina-Fallback mit PNG-Sprites benötigten würde. Nur die Erstellung und Konvertierung solcher Fonts kann sich als relativ mühselig gestalten. Aber nicht mit Glyphter.

Glyphter: Weil einfach einfach einfach ist

Glyphter Interface Screenshot
Das Interface von Glyphter lässt keine Wünsche in Sachen einfache Bedienbarkeit offen. (Screenshot: Glyphter)

Glypher ist ein kostenloses Icon-Font-Tool, das via Drag & Drop ein Set von SVG-Grafiken zu einem Icon-Font konvertieren kann. Dafür zieht der Nutzer einfach Icons aus beliebten Icon-Sammlungen wie Font-Awesome und Batch oder eigene SVG-Icons in den Editor. Schon ist der Font zum Download bereit. Mit dem eingebauten Editor können einzelne Elemente der Icons verschoben, gedreht und in der Größe verändert werden.

Glyphter Editor Screenshot
Mit dem integrierten Editor lassen sich kleinere Änderungen an den Icons vornehmen. (Screenshot: Glypther)

Für die Verteilung der Glyphen nutzt Glyphter das Alphabet. So ist es im Vergleich zu anderen Icon-Font-Lösungen kinderleicht, Fonts später in die Webseite einzubinden. Dafür wird die maximale Anzahl von Icons, die der Font beinhalten kann, allerdings eingeschränkt. Ein weiterer Wermutstropfen des extrem einfach zu bedienenden Tools ist der Exporter. Er liefert den Font nämlich nur im TTF-Format.

Ansonsten bietet Glyphter alles, was du für die Erstellung von Icon-Fonts brauchst. Auf der Projektseite von Glyphter kannst du das Tool sofort testen.

Anspruchsvolle Glyphter-Alternative

Sollten diese Einschränkungen ein Problem für dich darstellen, solltest du einen Blick auf Iconvault als Glyphter-Alternative werfen. Zwar ist es nicht annähernd so simpel wie Glyphter, dafür nutzt es komplexere Codes, um auf die Icons zuzugreifen, wodurch deutlich größere Sammlungen möglich werden. Zudem liefert es die Schriften in allen Web-Formaten aus und generiert ein Style- und Cheatsheet für deinen Icon-Font.

]]>
Ilja Zaglov
Webfonts von Google Fonts bis Typekit: 6 Dienste im Vergleich http://t3n.de/news/webfonts-dienste-im-vergleich-538521/ 2014-04-12T10:13:40Z
Webfonts sind aus modernen Designs kaum noch wegzudenken. Wir stellen dir sechs ausgewählte Anbieter im Vergleich vor.

Webfonts sind aus modernen Designs kaum noch wegzudenken. Wir stellen dir sechs ausgewählte Anbieter im Vergleich vor.

Webfonts: Freiheit für Webworker

Lange Zeit waren Webworker „gefangen“ in den typischen Systemschriftarten wie Arial, Helvetica und Times. Dank der Webfonts hat sich das massiv geändert. Sie bieten Designern die nötigen Freiheiten, um schicke und beeindruckende Typografie einzusetzen und bieten Webworkern die Möglichkeit, die Designs unter Berücksichtigung aller technisch relevanten Aspekte umzusetzen.

Mittlerweile hat sich eine Menge an Webfont Diensten gebildet. Grund genug für uns, dir einen kleinen Überblick über ausgewählte Anbieter zu geben.

Google Fonts

Google Web Fonts
Google Web Fonts liefert zahlreiche Open-Source-Webfonts für deine Webseite. (Screenshot: t3n)

Google Fonts ist eine feste Größe unter den Webfont-Anbietern. Fonts ist eine Sammlung von Open-Source-Webfonts für deine Webseite. Die Auswahl ist für einen kostenfreien Dienst alles andere als schlecht und das Einbinden der Fonts ist ohne Registrierung blitzschnell und unkompliziert möglich.

Fontdeck

Fontdeck
Fontdeck bietet eine beachtliche Webfont-Auswahl mit Pay-What-You-Need Konzept. (Screenshot: t3n)

Wenn du nach einem Dienst suchst, bei dem du nur für das bezahlst, was du auch tatsächlich nutzt, dann ist Fontdeck wahrscheinlich der richtige Dienst für dich. Während der Entwicklungszeit deiner Webseite kannst du alle Fonts kostenlos einbinden und testen. Sobald das Projekt live geht, bezahlst du nur für die Fonts, die du brauchst. Die Preise variieren je nach Font und starten bei 2,50 US-Dollar pro Font und Jahr für eine Million Pageviews pro Monat.

Typekit

Typekit
Adobe's Typekit bietet eine große Auswahl an Webfonts zu äußerst günstigen Preisen.

Typekit ist der Dienst, der die Web-Font-Revolution gestartet hat und ist nicht umsonst die beliebteste Paid-Lösung für Webfonts. Mittlerweile gehört Typekit zu Adobe und hält eine riesige Auswahl an Fonts zu einem fairen Preis bereit. Die Kosten für die jährlich abgerechneten Abonnements richten sich nach Bibliotheksgröße (es gibt zwei zur Auswahl) und Pageviews. Mit einem aktiven Creative-Cloud-Abonnement kostet Typekit übrigens keinen einzigen Cent.

WebInk

WebInk
WebInk integriert sich in Tools wie Suitcase Fusion. (Screenshot: t3n)

WebInk ist ein Dienst von Extensis, dem Unternehmen, das auch hinter Stat-Of-The-Art Lösungen für die Verwaltung von Schriften steckt. So ist es möglich, die stattliche Font-Auswahl von WebInk über das WebInterface oder Software wie Suitcase Fusion 3 zuzugreifen. Das Preismodell von Webink ist ähnlich dem von Typekit. Du bezahlst eine jährliche Gebühr für eine bestimmte Anzahl von individuellen Besuchern pro Monat. Anders als bei Typekit stehen dir in jedem Paket alle Schriftarten der Bibliothek zur Verfügung.

Webtype

Webtype
Webtype bietet ausgewählte Webfonts mit Pay-What-You-Need Konzept. (Screenshot: t3n)

Webtype bietet mit etwas über 100 Fonts eine überschaubare Auswahl an Schriftarten. Dementsprechend rechnet der Dienst auch nur pro benutzter Schriftart ab. Jeder Font hat einen individuellen Preis, der sich je nach Nutzungsintensität gestaltet. Von 10.000 bis 20.000.000 Views kann hier das Hosting der Schriftart und der Preis zusammengestellt werden. Für größere Seiten werden auch Self-Hosted-Versionen der Schrift angeboten.

Edge Web Fonts

Edge Webfonts
Adobe Edge Webfonts bietet 500 kostenlose Webfonts für deine Webseite. (Screenshot: t3n)

Zurück zu Adobe. Mit dem kostenlosen Dienst Edge Web Fonts bietet Adobe über 500 gehostete Fonts für deine Webseite. Der Dienst basiert auf der Technologie von Typekit und lässt sich dementsprechend einfach benutzen. Außerdem arbeitet Edge Web Fonts mit anderen Adobe-Edge-Produkten zusammen und integriert sich nahtlos in die Entwicklungsoberfläche der jeweiligen Programme.

Alle Webfont-Dienste im Überblick

Google Fonts Fontdeck Typekit
Browser-Support IE 6+Firefox 3.5+Safari 3.1+

Chrome: 4.249+

Opera 10.5+

iOS 4.2+

Android 2.2

IE5+Firefox 3.5+Safari 3+

Chrome

Opera 10+

iOS

Android

Blackberry

IE6+IE (Mobile)WP8+

Firefox 3.5+

Safari 3.1+

Chrome 4+

Opera 10.54+

iOS 4.2+

Android 2.2+

BlackBerry Browser 10+

Schriftauswahl 500+ 1500+ ~1000
Einbinden über JavaScript und CSS CSS JavaScript und CSS
Hosting-Pakete - NormalEnterprise PersonalPortfolioPerformanceBusiness
Kostenloses Paket verfügbar Ja Während Entwicklung der Webseite Testversion / Kostenlose Vollversion für Creative Cloud Abonenten
Abrechnungszeitraum - Jährlich pro Font Jährlich
Einschränkungen - Pageviews Pageviews Webseiten Fonts pro Seite Font-Zugriff
Desktop-Nutzung Ja Nein Ja
Nutzung im Print / PDF Ja Nein Font abhängig
SSL Ja Ja Ja
WebInk Webtype Edge Web Fonts
Browser-Support IE6+Firefox 3.5+Chrome 4-5

Opera 11+

Safari 3.1+

Chrome für Android

iOS 4.2+

Blackberry 7+

Firefox 9+ für Android

IE5+Firefox 3.5+Chrome 4+

Safari 3.1+

Opera 10+

iOS 4.3+

Android 2.2+

BlackBerry 6+

IE6+IE (Mobile)WP8+

Firefox 3.5+

Safari 3.1+

Chrome 4+

Opera 10.54+

iOS 4.2+

Android 2.2+

BlackBerry Browser 10+

Schriftauswahl 1100 ~100 500+
Einbinden über CSS CSS CSS
Hosting-Pakete BasicProBusinessEnterprise SmallMediumLarge Kostenlos
Kostenloses Paket verfügbar Zur Entwicklungszeit 30 Tage kostenlos Ja
Abrechnungszeitraum jährlich jährlich -
Einschränkungen Besucher/Monat Pageviews -
Desktop-Nutzung Ja Nein Ja, mit Adobe Edge Produkten
Nutzung im Print / PDF Nein Nein Nein
SSL Ja Ja Ja

Welcher Dienst ist dein Favorit?

]]>
Ilja Zaglov
Designkonzept erklärt: Die Idee hinter den neuen Twitter-Profilseiten http://t3n.de/news/twitter-redesign-profilseite-design-539393/ 2014-04-10T08:47:03Z
Twitter hat die Profilseiten der Nutzer radikal überarbeitet. Jetzt verraten die Designer der Mikroblogging-Seite, was sie damit erreichen wollen.

Twitter hat die Profilseiten der Nutzer radikal überarbeitet. Jetzt verraten die Designer der Mikroblogging-Seite, was sie damit erreichen wollen.

Twitter: So sieht die neue Profilseite aus. (Screenshot: Twitter)
Twitter: So sieht die neue Profilseite aus. (Screenshot: Twitter)

Die neuen Profilseiten bei Twitter: Das wurde verändert

Die Meinungen zu den überarbeiteten Twitter-Profilen gehen auseinander: Während die einen es schon jetzt vehement ablehnen, freuen sich andere über das neue . Unser Kollege Moritz Stückler hat die Optik der neuen Twitter-Profile mit der von Facebook verglichen – und er hat damit nicht unrecht. Es gibt ein breites Header-Bild, das auf der linken Seite vom Profilbild des Nutzers überlagert wird. In dem Bereich finden sich auch die Nutzerstatistiken mit Angaben zur Follower-Zahl oder den Tweets.

Außerdem werden Tweets, welche die meisten Interaktionen anderer Nutzer hervorgerufen haben, jetzt etwas größer als die anderen dargestellt. Zusätzlich kann jeder Nutzer einen Tweet am oberen Rand des Profils festhalten, damit ihn jeder Besucher sofort sieht. Die Profilbesucher wiederum können die Timeline jetzt auch direkt filtern. Zur Auswahl stehen hier: Tweets, Fotos/Videos und Tweets samt Antworten.

Aber warum hat sich überhaupt dazu entschieden, die Profile zu überarbeiten? Immerhin kommen passionierte Nutzer des Mikrobloggingdienstes selten mit der Profilseite von Nutzern in Kontakt. Warum auch? Die eigentlichen Konversationen finden in unserer Timeline statt. Gegenüber der amerikanischen Technologie-Seite Wired versucht Dave Bellona, der Designer der bei Twitter für das Redesign zuständig war, diese Frage jetzt zu beantworten.

Ein Blick hinter die Kulissen: Das soll das Twitter-Redesign bewirken

Bellona weist zurecht daraufhin, dass die alten Profilseiten auf Twitter nicht wirklich einsteigerfreundlich waren. Immerhin leben wir in Zeiten, in denen Boulevard-Magazine mit einer gewissen Regelmäßigkeit über neue Tweets von Stars wie Lady Gaga oder Justin Bieber berichten. Sucht ein Fan dieser Künstler nach ihren Profilen auf Twitter dürfte er von den bisherigen Profilseiten recht enttäuscht sein. Im schlimmsten Fall sieht unser Beispiel-Fan nur Fragmente einer längeren Unterhaltung, die er kaum verstehen wird.

Das war laut Bellona auch die Ausgangsfrage: Wie kann Twitter für den Rest der Welt verständlicher werden? Die Antwort darauf soll die neue Profilseite sein. Auch weil jede Änderung daran wenig Einfluss auf die eigentliche Funktionalität hat. Die Designer sahen daher eine Chance, Twitter für außenstehende verständlicher zu machen, ohne bestehende Nutzer durch eine Änderung zu sehr zu irritieren. Somit erkennt der Microblogging-Dienst auch den Umstand an, dass manche Besucher niemals so weit kommen werden, eine eigene Timeline zu haben.

Wer die Seite nur gelegentlich besucht, um über eine Person oder ein bestimmtes Event auf dem laufenden zu bleiben, kann das über die neuen Profilseiten tun. Dank dem oben angehängten Tweet oder den Filtermöglichkeiten bekommen diese Nutzer ein aufgeräumtes, Magazin-ähnliches Layout, in dem sie sich viel schneller zurechtfinden werden. Gleichzeitig bleibt die Nutzungserfahrung für bestehende Hardcore-User davon größtenteils unverändert. Der Plan der Designer könnte aufgehen und dem Unternehmen mittelfristig neue, wenn auch oft recht stille Nutzer bringen.

]]>
Kim Rixecker
10 Apps für 'nen Zwanni: MacHeist Bundle bringt euch coole Tools zu einem günstigen Preis http://t3n.de/news/macheist-bundle-os-x-apps-539230/ 2014-04-09T11:28:58Z
Das Apple Design Award Bundle von MacHeist vereint zehn Programme im Wert von 1.786 US-Dollar für den Preis von 19,99 US-Dollar. Selbst wer kein Interesse an dem Paket hat, kann damit das...

Das Apple Design Award Bundle von MacHeist vereint zehn Programme im Wert von 1.786 US-Dollar für den Preis von 19,99 US-Dollar. Selbst wer kein Interesse an dem Paket hat, kann damit das Mindmapping-Werkzeug Scapple umsonst bekommen.

Apple Design Award Bundle: 10 prämierte Apps zu einem günstigen Preis. (Screenshot: MacHeist)
Apple Design Award Bundle: 10 prämierte Apps zu einem günstigen Preis. (Screenshot: MacHeist)

MacHeist: 10 Tools für einen unschlagbaren Preis

Die Idee, eine Sammlung von Programmen für einen günstigen Preis als Paket zu verkaufen und einen Teil der Erlöse zu spenden, wurde in den letzten Jahren unter anderem durch das Humble Bundle sehr populär. MacHeist überträgt das Konzept auf OS-X-Apps und verkauft mit dem Design Award Bundle zehn Programme für 19,99 US-Dollar. Zehn Prozent der Einnahmen werden dabei an gemeinnützige Organisationen gespendet. Als Käufer des Pakets könnt ihr selbst bestimmen, welche Organisation welchen Anteil bekommen soll. Zur Auswahl stehen dabei unter anderem der WWF oder das amerikanische Rote Kreuz.

Würdet ihr alle Programme aus dem Paket einzeln kaufen, würde euch das 1.786 US-Dollar kosten. Tatsächlich liegt der Verkaufspreis von acht der zehn preislich über den 19,99 US-Dollar, die das gesamte Paket kostet. Wer eines davon sowieso wollte, spart also in jedem Fall. Die Auswahl der Programme im MacHeist-Bundle reicht von der 2D-Animationssoftware Toon Boom Studio über die Buchhaltungssoftware AccountEdge Pro bis zur Video-Podcast-Lösung BoinxTV.

Hier die vollständige Liste der enthaltenen Programme:

MacHeist: Scapple gibt es zusätzlich für einen Share umsonst

Unabhängig von dem eigentlichen Software-Paket gibt es bei MacHeist auch das Mindmapping-Tool Scapple kostenlos. Dafür müsst ihr entweder dem Twitter-Account von MacHeist folgen und einen Werbe-Tweet für die Seite senden oder ihr liked die Facebook-Seite von MacHeist und teilt sie mit euren Facebook-Freunden. Das Angebot läuft nur noch bis zum 11. April 2014. Wer Interesse an dem App-Paket oder Scapple hat, sollte sich also beeilen.

]]>
Kim Rixecker
Prototypo: Online-Tool soll die Erstellung von Fonts radikal vereinfachen http://t3n.de/news/prototypo-open-source-font-editor-539174/ 2014-04-09T09:47:20Z
Prototypo soll ein extrem einfaches Online-Tool zur Erstellung von Schriftarten werden. Zur Vollendung des Open-Source-Werkzeugs suchen die Macher derzeit nach Unterstützung auf Kickstarter.

Prototypo soll ein extrem einfaches Online-Tool zur Erstellung von Schriftarten werden. Zur Vollendung des Open-Source-Werkzeugs suchen die Macher derzeit nach Unterstützung auf Kickstarter.

Prototypo: So sieht der Online-Font-Editor aus. (Screenshot: ByteFoundry / Kickstarter)
Prototypo: So sieht der Online-Font-Editor aus. (Screenshot: ByteFoundry / Kickstarter)

Prototypo: Font-Erstellung in ganz einfach

Mit Prototypo soll es extrem einfach werden, eigene Schriftarten zu erstellen beziehungsweise anzupassen. Dazu wählen Nutzer zunächst einen der vordefinierten Stile aus, um die Schrift anschließend anhand von mehr als 20 Parametern an die eigenen Vorstellungen anzupassen. Vor allem die monotonen Arbeiten bei der Erstellung soll Prototypo dem Nutzer abnehmen, damit er sich voll und ganz auf die visuelle Gestaltung konzentrieren kann.

Prototypo soll als Online-Tool realisiert werden. Zum jetzigen Zeitpunkt soll das Tool als Werkzeug zur Erstellung Font-Prototypen bereits funktionieren. Die fertige Software soll aber auch dazu dienen, zu erstellen, die keiner Überarbeitung in klassischen Font-Editoren mehr bedürfen und die somit direkt eingesetzt werden können. Die Idee ist simpel: Die Erstellung eines Fonts für eine Webseite soll so einfach werden, wie das Stöbern in einer Webfont-Bibliothek.

Prototypo: Macher suchen Unterstützer auf Kickstarter

Um ihr Ziel zu erreichen, suchen die Macher von Prototypo derzeit nach finanzieller Unterstützung auf . Wer das Projekt auf der Crowdfunding-Seite mit zwölf britischen Pfund unterstützt, soll ein Jahr lang Zugriff zu dem Tool auf den Servern der Macher erhalten. Die Beta-Version soll es dort ab Mai 2014 geben. Prototypo Version 1 soll dann im September folgen. Dazu sollen aber insgesamt 12.000 britische Pfund eingesammelt werden. Derzeit sind es knapp 5.500 britische Pfund.

Die Kickstarter-Kampagne läuft noch bis zum 9. Mai 2014. Übrigens werden Nutzer nach Vollendung des Projekts nicht auf den bezahlten Dienst der Macher angewiesen sein. Prototypo wird unter einer Open-Source-Lizenz entwickelt und der Quellcode findet sich auf GitHub. Sofern das Projekt die notwendigen Geldmittel zusammenbekommt, könnten interessierte Nutzer das Tool auch selbst hosten. Wer lieber anderen die Arbeit überlässt, der kann sich unseren Artikel „Fonts: 10 unserer Lieblings-Schriftarten für dein nächstes Design-Projekt“ anschauen.

]]>
Kim Rixecker
Redesign: Twitter wird bald wie Facebook aussehen http://t3n.de/news/twitter-neue-profilseiten-528246/ 2014-04-08T16:30:10Z
Nur wenige Tage nachdem Twitter ein kleines Design-Update ausgerollt hat, tauchen bereits erste Screenshots eines weiteren, tiefgreifenderen Redesigns auf. Die neue Optik erinnert dabei sehr stark an. ...

Nur wenige Tage nachdem Twitter ein kleines Design-Update ausgerollt hat, tauchen bereits erste Screenshots eines weiteren, tiefgreifenderen Redesigns auf. Die neue Optik erinnert dabei sehr stark an Facebook- oder Google+-Profile.

Twitter: Kleines Design-Update erst letzte Woche

Bisher hat sich optisch immer relativ stark von Konkurrenten wie und Google+ unterschieden. Daran änderte auch das neuste Facelift nichts, welches seit wenigen Tagen flächendeckend ausgerollt ist. Durch das neuerliche Update wurde hauptsächlich der optische Gesamteindruck etwas heller und „flacher“ gestaltet, Layout-Änderungen wurden dabei aber nicht vorgenommen.

Deutlich größere Header-Grafik und horizontale Anordnung der Beiträge

Mashable berichtet nun, dass einige Twitter-Nutzer nun mit einem vollkommen anderen konfrontiert wurden. Die neuen Screenshots zeigen ein experimentelles Design, das sehr stark an Facebook und Google+ erinnert. Es setzt unter anderem auf eine deutlich breitere Header-Grafik (1500 x 500 Pixel) und rückt das Profilbild des Nutzers in die linke Ecke. Im Header-Bereich erscheinen auch die Statistiken des jeweiligen Users, in horizontaler Anordnung. Darunter werden neue Beiträge nicht mehr nur vertikal untereinander angeordnet, sondern auch nebeneinander gesetzt, wie man es von Google+ bereits gewohnt ist.

Die neue Twitter-Profilseite erinnert stark an eine Mischung aus Facebook und Google+. (Quelle: mashable.com)
Die neue Twitter-Profilseite erinnert stark an eine Mischung aus Facebook und Google+. (Quelle: mashable.com)

Nur ein Experiment oder das nächste Twitter-Design?

Twitter hat das neue Design bisher nicht kommentiert, und nur eine kleine Anzahl zufällig ausgewählter Tester scheint das neue Design zu sehen. Ob es sich dabei nur um ein Experiment oder tatsächlich um das nächste Twitter-Design handelt kann man also momentan noch nicht wissen.

Update vom 8. April 2014: Inzwischen hat Twitter das Design-Update offiziell bestätigt, und kündigt in einem Blogeintrag an, dass die neue Optik in den kommenden Wochen für alle Nutzer erhältlich sein wird. Alle Nutzer die sich aktuell neu bei Twitter anmelden bekommen bereits das neue Design zu sehen.

via mashable.com

]]>
Moritz Stückler
SVGMagic: Automatischer SVG-Fallback für deine Webseite http://t3n.de/news/svgmagic-svg-fallback-out-of-the-box-535992/ 2014-04-06T08:11:31Z
SVG-Grafiken sind seit Responsive Webdesign und Retina-Display kaum hoch wegzudenken. Fall-Back-Lösungen sind jedoch ein hartes Stück Arbeit. Mit SVGMagic soll sich das ändern – wir zeigen euch w ...

SVG-Grafiken sind seit Responsive Webdesign und Retina-Display kaum hoch wegzudenken. Fall-Back-Lösungen sind jedoch ein hartes Stück Arbeit. Mit SVGMagic soll sich das ändern – wir zeigen euch wie.

SVGMagic: Fall-Back-Lösung für Browser ohne SVG-Unterstützung

Das SVG-Format hat in letzter Zeit ein wahres Comeback erfahren. Das teilweise für tot erklärte Vektor-Format erfreut sich spätestens seit Retina-Displays einer erhöhten Popularität, und auch für den Einsatz im als verlustfrei skalierendes Grafikformat sind SVG eine gute Wahl.

Wie bei vielen schönen Dingen im Web hat auch diese Technologie ihre Schattenseiten. Insbesondere der Support von älteren Browsern, aber auch einigen mobilen Plattformen, lässt hier zu wünschen übrig. Der technische und organisatorische Aufwand für Fallback-Lösungen überwiegt hier nicht selten die Vorteile, die mit dem Einsatz von SVG erzielt werden können.

Das jQuery-Plugin SVGMagic nimmt dir diese Probleme ab und leistet dabei ganze Arbeit. Es untersucht deine Webseite und liefert bei Bedarf vollautomatisch eine Fall-Back-Lösung für Browser ohne SVG-Unterstützung. Hierfür sammelt SVGMagic die URIs der SVG-Grafiken und sendet sie an eigene Server. Diese laden die Grafiken runter und erstellen PNG-Grafiken, deren URIs dann im Austausch an den Client zurückgeschickt werden.

SVGMagic Funktionsweise
SVGMagic untersucht deine Webseite und tauscht bei Bedarf SVG-Grafiken durch PNGs aus. (Grafik: SVGMagic)

Die verarbeiteten Grafiken werden auf den Servern von SVGMagic gespeichert, um später eine schnellere Verarbeitung zu ermöglichen. SVGMagic beschränkt sich dabei nicht nur auf Elemente im DOM, sondern kann zusätzlich Grafiken im Stylesheet deiner Webseite austauschen.

SVGMagic einbinden

Das Einbinden von SVGMagic ist äußerst simpel. Nachdem das jQuery-Plugin eingebunden ist, muss es beim Document-Ready-Event aufgerufen werden. Alles andere passiert automatisch.

$(document).ready(function(){
$('img').svgmagic();
});

Um Ladezeiten bei der Verarbeitung der SVG-Grafiken zu überbrücken, bietet das Skript zusätzliche Konfigurationsmöglichkeiten, wie das automatische Einbinden einer Preload-Grafik. Bei Bedarf kann sämtliche Kommunikation mit SVGMagic über https erfolgen.

$('img').svgmagic({
preloader: "/style/ajax-loader.gif",
secure: {true/false},
callback: placeTime
backgroundimage: true
});

SVGMagic ist eine sehr bequeme Lösung für Webworker, die den Aufwand eines eignen Fallbacks scheuen, aber dennoch nicht auf die Vorteile von SVG verzichten können oder wollen. Auf der offiziellen Webseite von SVGMagic kannst du dir selbst ein Bild von der Bibliothek machen. Eine ähnliche Lösung für automatisch generierte Responsive Images bietet dir Mobify.

]]>
Ilja Zaglov
App-Design für Frauen: „Bitte nicht pink!“ http://t3n.de/news/clue-geht-app-design-fuer-frauen-538189/ 2014-04-05T14:13:03Z
Mit „Clue“ hat Ida Tin eine Fruchtbarkeits-App entwickelt, die Nutzerinnen und Investoren gleichermaßen überzeugt. Dabei ist ihr eins besonders wichtig: kein Pink, keine Schmetterlinge und erst. ...

Mit „Clue“ hat Ida Tin eine Fruchtbarkeits-App entwickelt, die Nutzerinnen und Investoren gleichermaßen überzeugt. Dabei ist ihr eins besonders wichtig: kein Pink, keine Schmetterlinge und erst recht keine Einhörner. Wir haben Ida beim hy! summit in Berlin getroffen.

Quantified Self mit Clue: Für Frauen geht es nicht primär um Leistungssteigerung

Clue-Gründerin Ida Tin. Foto: Dan Taylor /  Heisenberg Media
Clue-Gründerin Ida Tin. Foto: Dan Taylor / Heisenberg Media

Seit dem App-Store-Debut im Juli 2013 hat Clue bereits Nutzerinnen aus 180 Ländern gewonnen. Clue ist eine Kalender-App, in der Frauen neben den Daten ihrer Periode zusätzliche Informationen zu ihrem Körper – Unwohlsein, Schmerzen oder Wohlbefinden – und zu ihrem Sexualverhalten festhalten können. Die App analysiert die eingegebenen Daten und lernt den Biorhythmus ihrer Nutzerin im Zeitverlauf immer besser kennen.

Mithilfe von Clue lassen sich so über kurz oder lang etwa Stimmungsschwankungen erklären oder die fruchtbaren Tage im Monat ermitteln. Auf diese Weise verhilft die App Frauen wieder zu mehr Körperbewusstsein. Und das, sagt Ida Tin, sei nicht besonders futuristisch, sondern nur in den letzten Jahrzehnten mit dem Aufkommen der Antibabypille in den Hintergrund getreten: „Das Beobachten unseres eigenen Körpers ist eine ganz alte Tradition.“

„Female Quantified Self folgt eigenen Regeln.“ 

Fruchtbarkeits-Tracker wie Clue oder Glow sind Quantified-Self-Apps, mit denen Nutzer ihre Körperfunktionen messen, analysieren und besser verstehen können.Im Prinzip logisch, dass es gerade in diesem Bereich auch geschlechtsspezifische Unterschiede gibt – die Körper von Männern und Frauen sind nun mal verschieden. Derzeit, so Tin, sei die Quantified-Self-Bewegung noch größtenteils männlich. Das liege auch daran, dass der in vielen Apps speziell hervorgehobene Leistungsvergleich Frauen nicht in derselben Weise anspreche: Vielen gehe es eher um Gesundheit und Wohlbefinden, statt um Leistungssteigerung und Wettkampf.

Schmetterlinge und Einhörner? App-Design für Frauen

Kein Pink: Das Design von Clue ist erwachsen und modern.
Kein Pink: Das Design von Clue ist erwachsen und modern (Grafik: Clue).

„Clue: Positiv, selbstbewusst, wissenschaftlich.“

Auch im Design bevorzugen Frauen oft andere Dinge als Männer. Wer jetzt aber an rosa oder lila Apps mit Blumen- und Tier-Applikationen denkt, schießt definitiv übers Ziel hinaus. Das sieht auch Ida Tin so: „Nur weil es für Frauen ist, muss es nicht pink sein. Haben wir etwa je nach einem pinken iPhone verlangt?“ Für die Macher von Clue war es von Anfang an wichtig, keine irgendwie gearteten Stereotype zu bedienen. Insbesondere, weil die App sich mit den ohnehin lange als Tabuthema behandelten, in einen schamvollen Kontext gestellten weiblichen Körperfunktionen beschäftigt, war klar: Das Clue-Design sollte weder heimlichtuerisch noch kleinmädchenhaft rüberkommen – sondern positiv, selbstbewusst und wissenschaftlich.

Ein weitere wichtige Maßgabe beim Design von Clue: die Dateneingabe so einfach und nutzerfreundlich wie möglich zu gestalten. Denn selbstlernende Apps, die mit jeder zusätzlichen Information besser funktionieren, müssen sich durch eine besonders gute Usability auszeichnen. Momentan werden die Daten übrigens nur lokal auf dem Smartphone der Nutzerin gespeichert, auf Wunsch der Userinnen nach zusätzlichen Sicherungsmöglichkeiten arbeitet Clue aber mittlerweile an einem eigenen Backend.

Merke: Nicht alles, was weiblich ist, ist pink

Was für Frauen eigentlich selbstverständlich ist, wird in der Welt der App-Entwicklung noch oft übersehen. Dabei gehören Frauen – sowohl als Early Adopter als auch als größte Nutzergruppe in den Sozialen Netzwerken und vielen App-Kategorien – längst zur primären Zielgruppe von Software-Entwicklern. Vielleicht honorieren die Nutzerinnen gerade deswegen, dass Clue nicht in Stereotypen denkt: „Keine blöden rosanen Blumen oder Herzchen“, bedankt sich eine von ihnen im App Store. „Ich wünschte mir, viel mehr Entwickler würden so arbeiten, wenn sie Software für Frauen designen.“

Clue: In Zukunft Kinderwunsch- und Verhütungshelfer

Derzeit hilft Clue vor allem Frauen mit Kinderwunsch, ihre fruchtbaren Tage im Monat zu erkennen. In Zukunft soll die App aber auch helfen, Schwangerschaften zu verhindern. Denn im Wunsch nach einer nicht-hormonellen Verhütungsmethode liegt die eigentliche Gründungsidee von Clue. „Ich habe mich gefragt: Warum müssen wir unseren Organismus mit zusätzlichen Hormonen belasten?“, erklärt Tin am Rande des hy! summit in Berlin. Viele Frauen vertragen „die Pille“ nicht. Und überhaupt sei es eigentlich ein Unding, dass sich die Verhütungsindustrie seit den 1960er Jahren quasi nicht weiter entwickelt habe. Die Disruption dieser Branche sei überfällig. Ihre Vision ist es, eine Alternative zur Pille zu entwickeln, die den Körper nicht belastet und durch eine pragmatische, einfache User-Experience überzeugt.

„Wir arbeiten schon an der Hardware.“

Bis dahin dauert es allerdings noch eine Weile. Um wirklich verlässliche Aussagen darüber treffen zu können, an welchen Tagen ungeschützter Sex wirklich „ungefährlich“ ist, braucht man weitere Daten wie etwa die Körpertemperatur – und hierzu wiederum ist Hardware vonnöten. Daran tüftelt das mittlerweile neunköpfige Team von Clue auch schon. Bis zur Marktreife wird es aber wohl noch eine ganze Weile dauern.

Warum Software für Frauen auch Männern das Leben erleichtert

In der Zwischenzeit sollen Nutzerinnen schon mal die Möglichkeit erhalten, ihre Clue-Daten auch mit ihren Partnern zu teilen. Was auf den ersten Blick befremdlich klingt, ist in Wahrheit eine der am meisten nachgefragten Neuerungen: „Wir haben verblüffend viele männliche Nutzer. Wenn Paare auf einmal verstehen, warum sie sich immer zu bestimmten Zeiten im Monat streiten, sorgt das für einen Aha-Effekt.“ Scheint so, als könne die Clue-App noch ganz andere Bereiche des Beziehungslebens beeinflussen.

]]>
Lea Weitekamp
Tempy.js: Blitzschnelle Client-Templates mit HTML5-LocalStorage http://t3n.de/news/tempyjs-clientseitige-templates-537231/ 2014-04-05T10:47:37Z
Es gibt viele verschiedene Möglichkeiten zur Realisierung von Client-Side-Templates. Tempy.js nutzt den LocalStorage, um die Aufrufe zu minimieren und die Performance zu steigern. Wir stellen es...

Es gibt viele verschiedene Möglichkeiten zur Realisierung von Client-Side-Templates. Tempy.js nutzt den LocalStorage, um die Aufrufe zu minimieren und die Performance zu steigern. Wir stellen es euch vor.

Das modulare Template-System Tempy.js

Bei der Entwicklung von Web-Apps suchen Webworker immer wieder nach einer Stellschraube, die zu einer besseren Performance beitragen könnte. Bei einer Web-App, die ich derzeit in meiner Agentur entwickle, boten vor allem clientseitige Templates eine Herausforderung. Das Ziel ist, ein modulares Template-System, das verschiedene App-Bestandteile asynchron neu rendern kann, zu realisieren. Hierfür bieten sich verschiedene Optionen an.

Option 1: Komplette HTML-Blöcke vom Server vorverarbeitet an den Client schicken. Das ist sicherlich am einfachsten zu realisieren, da clientseitig nur wenig Prozesslogik erfordert wird und die Template-Engine auf der Server-Seite alles unkompliziert erledigen kann. Jedoch kann man bei diesem Ansatz kaum Vorteile aus dem Caching der Templates ziehen, sodass der Client durch unnötig viele Daten und der Server durch unnötige Template-Verarbeitung zusätzlich belastet werden.

Option 2: clientseitige Templates über Script-Tag. Bei clientseitigem Templating ist es gängige Praxis, die jeweiligen Templates innerhalb eines Script-Tags mit dem Hauptdokument zusammen auszuliefern. So erspart man sich zusätzliche Aufrufe separater Templates und kann sehr schnell clientseitig auf die jeweiligen Templates zugreifen. Für ein komplexes System wird diese Lösung bei zunehmender Anzahl von Templates  auf Dauer jedoch unübersichtlich und irgendwann auch nicht mehr performant.

Option 3: clientseitige Templates über AJAX nachladen. Die Übertragung von Templates über AJAX zur Weiterverarbeitung in Template-Systemen wie Moustache oder Handlebars schien hier die beste Lösung zu sein. Die Templates können so kleinteilig wie nötig aufgesplittert werden und werden in der Regel nach dem ersten Aufruf  gecached. Diese Lösung ging jedoch nicht weit genug. Erst vor kurzem berichtete ich von basket.js, einer Bibliothek, die JavaScript in den LocalStorage des Browsers ablegen und so blitzschnell ohne zusätzliche Requests zur Verfügung stellen kann. Besonders auf mobilen Geräten soll so ein zusätzlicher Performance-Schub ermöglicht werden.

Diese Idee haben wir nun in der Bibliothek tempy.js in abgewandelter Form umgesetzt.

Das Konzept von Tempy.js

Tempy.js bietet im Zusammenspiel mit einer Server-Applikation eine schnelle Lösung für das Abrufen und Speichern von clientseitigen Templates. Die Bibliothek ruft Templates via AJAX-Request von einer PHP-Applikation ab und speichert sie im LocalStorage des Browsers. Ab dann stehen die Templates auf Clientseite sofort und ohne Kommunikation mit dem Server zur Verfügung, sodass auch Offline-Applikationen denkbar sind.

Template Ladezeit
Tempy.js: Der Aufruf von Separaten Templates kostet viel Mehr Zeit als die Übertragung in einem „Template Pack“. (Screenshot: t3n)

Ein weiterer Vorteil in der Aufteilung ist die Möglichkeit, Templates auf dem Server vorzuverarbeiten (zum Beispiel zu übersetzen) und zusammengehörige Templates bei einem Aufruf zu übertragen. Dazu aber später mehr.

Tempy.js benutzen

Tempy.js benötigt derzeit jQuery, um die nötigen Requests an den Server zu stellen. Nachdem jQuery und Tempy.js in die Web-App eingebunden sind, können mittels einer einfacher API Template-Dateien abgerufen werden.

Du kannst einzelne Templates oder mehrere Templates in einem Rutsch anfordern, ganz, wie deine Programmlogik es erfordert.

// Ein Template anfordern
var template1 = tempy.get({name:"template1"});
// Mehrere Templates anfordern
var templates = tempy.get(
{name:"template2"},
{name:"template3"},
{name:"template1"},
{name:"template4"}
);

Als Rückgabewert erhältst du den Template-String, den du an eine clientseitige Template Engine weiterreichen oder wie im unterstehenden Beispiel direkt ins Dokument einfügen kannst.

// Template einfügen, wenn ein Template angefordert wurde
$('#content').append(template1);
//Bestimmtes Template einfügen, wenn mehrere Templates angefordert wurden
$('#content').append(templates['template1']);

Um nicht unnötig viele Abhängigkeiten beim Aufruf im JavaScript festhalten zu müssen, bietet die serversetige Komponente von tempy.js die Möglichkeit, Template-Packs zu definieren. Bei jeder Anforderung eines Templates wird geprüft, ob für die Programmlogik weitere Templates benötigt werden und zusammen mit dem angeforderten Template mit nur einem einzigen Aufruf an den Client übertragen. Hierfür müssen nur die Abhängigkeiten in einer separaten Datei (pack.info) im JSON-Format hinterlegt werden.

{
"mainView":[
"template1",
"template2",
"template3",
"template4"
]
}

Fordert man nun also  das Template „mainView“ an, werden die dazugehörigen Templates template1, template2, template3 und template4 mit übertragen.

Tempy.js: API und Konfiguration

Tempy.js lässt sich über eine Reihe von Befehlen steuern.

  • tempy.get() ruft Templates ab
  • tempy.clear() überprüft ob veraltete Templates im LocalStorage hinterlegt sind
  • tempy.flush() löscht sämtliche Templates aus dem LocalStorage des Clients

Standardmäßig behält Tempy.js Templates für zehn Stunden im Cache und fragt Templates von der templateServer.php ab. Diese Werte können – wie auch das Storage-Prefix, das die Unterscheidung der Tempy.js-Daten von anderen Daten im LocalStorage ermöglicht – nach Belieben in der Bibliothek selbst angepasst werden, um es den eigenen Anforderungen anzupassen.

var storagePrefix = 'tempy-';
var defaultExpiration = 10;
var templateServer = "templateServer.php";

Für die Zukunft planen wir weitere Funktionen wie die Integration von JavaScript-Template-Engines und eine Require.js-Implementation von Tempy.js. Solange steht die aktuelle Fassung von Tempy.js zum Download auf GitHub zur Verfügung.

]]>
Ilja Zaglov
EyeQuant: Warum das neue Google-Design ein subtiler Geniestreich ist http://t3n.de/news/eyequant-neue-google-suchergebnisdesign-537921/ 2014-04-05T05:56:37Z
Google Redesign der Suchergebnisse wirkt auf den ersten Blick marginal, hat aber gewaltige Auswirkungen. Fabian Stelzer von EyeQuant erklärt in seinem Gastartikel, welche.

Google Redesign der Suchergebnisse wirkt auf den ersten Blick marginal, hat aber gewaltige Auswirkungen. Fabian Stelzer von EyeQuant erklärt in seinem Gastartikel, welche.

EyeQuant: Google hat sein Versprechen gehalten

Es ist offiziell: hat die Gestaltung seiner Suchergebnisseiten und Werbeanzeigen dem größten Redesign seit langem unterzogen. Das Unternehmen begründet den Schritt damit, dass das neue Design „die Lesbarkeit“ verbessere und insgesamt einfach sauberer aussehe, während die Neugestaltung der Anzeigen die „Erfahrungen auf verschiedenen Ausgabegeräten etwas einheitlicher erscheinen lassen“ soll.

Tatsache: Die AdWords-Anzeigen der Google-Desktop-Version sind jetzt identisch mit der mobilen Version, was in jedem Fall absolut sinnvoll ist. Wir vermuten jedoch, dass etwas mehr dahinter stecken könnte. In diesem Artikel werfen wir deshalb einen genaueren Blick auf das Redesign und seine Auswirkungen auf das Blick­- und Klickverhalten der Nutzer. Dabei entdecken wir Hinweise auf die eher inoffiziellen Gründe, aus denen Google die mit Abstand wichtigste Benutzeroberfläche des Unternehmens grundlegend verändert hat.

screen-shot-2014-01-15-at-10-17-38
EyeQuant hat sich auf simuliertes Eye-Tracking spezialisiert. (Grafik: EyeQuant)

Wer unsere Arbeit bei EyeQuant kennt, weiss, dass wir Computern mittels neurowissenschaftlicher Methoden und maschinellem Lernen beibringen, Designs wie Menschen zu sehen. In diesem Artikel werden wir EyeQuant verwenden, um ein besseres Verständnis dafür zu bekommen, wie Googles neues Design bewusst die Nutzer und somit natürlich auch die Klicks beeinflusst. Zwei Grundannahmen vorab:

  1. Es ist unwahrscheinlich, dass Google Änderungen dieser Art vornimmt, ohne den Effekt auf die AdWords-Klickrate vorab genau getestet zu haben. Wir gehen davon aus, dass das neue Design in diesem Punkt mindestens genauso gut (und wahrscheinlich sogar signifikant besser) abschneidet als das alte Design.
  2. Googles Motto ist nach wie vor „Don't Be Evil“. Das soll unter anderem verhindern, dass sich ein Interessenkonflikt zwischen den beiden wichtigsten Stakeholdern des Unternehmens entwickeln kann, den suchenden Nutzern und den zahlenden Werbetreibenden.

EyeQuant: Google landet einen Geniestreich

Wie sich schon durch die Überschrift vermuten lässt, denken wir, dass das Redesign ein absoluter Geniestreich. Hier unsere Begründung: Googles neue Anzeigen ähneln den organischen Suchergebnissen jetzt sehr viel stärker als zuvor und sind trotzdem klar als Werbung gekennzeichnet. Das Besondere: Die Anzeigen erzeugen jetzt sogar mehr Aufmerksamkeit als vorher. Hier hat Google einen echten Drahtseilakt hingelegt: Bei der Gestaltung von Anzeigen muss man sich in der Regel zwischen zwei Möglichkeiten entscheiden:

  1. Anpassung der Anzeige an den sonstigen Inhalt, um Banner-Blindness vorzubeugen, mit der durchaus in Kauf genommenen Möglichkeit „ungewollter“ Klicks.
  2. Die Anzeige wird auffällig gestaltet, um Blickbewegungen zu provozieren (im schlimmsten Fall mittels Animationen und Lärm ...).

Die erste Möglichkeit ist freilich attraktiv, allerdings geht sie oft auf Kosten der Sichtbarkeit der Anzeige. Die zweite Variante macht Anzeigen sichtbarer, kann aber in manchen Fällen dazu führen, dass Nutzer sie recht schnell wieder ausblenden.

Was Google mit dem neuen Design schafft ist relativ einmalig

  1. Die Anzeigen sind deutlich sichtbar als solche gekennzeichnet, eventuell sogar deutlicher als zuvor.
  2. Gleichzeitig mischen sich die Anzeigen optisch viel stärker unter die organischen Suchergebnisse. Aus ethischer Sicht ist das etwas zweifelhaft, insbesondere, weil Google ähnliche Ansätze beim Design von AdSense-Anzeigen seinerzeit verboten hatte. Gleichzeitig ist das Design „juristisch“ astrein (siehe Punkt 1): Alles ist deutlich und sauber gekennzeichnet.
  3. Der Hammer ist aber, dass das neue Layout trotz Punkt 2 deutlich mehr Aufmerksamkeit auf die Anzeigen zieht als das alte.
eyequant
Deutlicher strukturiert: Werbeeinblendungen von Google. (Grafik: EyeQuant)

Wir haben die Version aus dem ersten Quartal 2013 und die des neuen SERP-Layouts mit EyeQuant getestet, um herauszufinden, welche von beiden allein auf Basis des Designs mehr Aufmerksamkeit erzeugt. Da EyeQuant mit jeder Analyse komplett „frische“ Nutzer simuliert, sind Gewöhnungseffekte ausgeschlossen. Die folgenden Aufmerksamkeitskarten des alten und neuen Layouts zeigen die voraussichtliche Wahrscheinlichkeit eine Bereichs, innerhalb der ersten Sekunden wahrgenommen zu werden. Die lila markierten Bereiche zeigen dabei die drei oberen Anzeigen:

GTwv7BM
Alte Version im Vergleich zur neuen Version. (Grafik: EyeQuant)

Rein auf Basis der Gestaltung generiert das neue Design signifikant mehr Aufmerksamkeit für die Anzeigen. Insbesondere gilt das für die begehrte (und teure) erste Position, während bei den organischen Suchergebnissen keine negative Entwicklung festzustellen ist. Wieso das für Google sehr vorteilhaft ist, muss nicht erklärt werden.

Die Frage bleibt: wie hat Google das gemacht?

Wir konnten auf Basis wahrnehmungsphysiologischer Aspekte vor allem drei relevante „Hacks“ rekonstruieren:

  1. Die vergrößerte Schrift erzeugt fast immer mehr Aufmerksamkeit (es gibt hier allerdings eine Obergrenze ab der sich der Effekt umkehrt!).
  2. Der Luminanzkontrast zwischen Text und Hintergrund ist jetzt deutlich höher (Blau auf Weiß) als im alten Design (Blau auf dem typischen AdWords-Gelb). Kontrast ist einer der grundlegendsten und effektivsten Magnete visueller Aufmerksamkeit.
  3. Das Gelb in „Ad“ liefert zusätzlich regionale Farbkontraste zum Blau, ohne dabei aufdringlich zu sein – Letzteres wird durch einen niedrigen Luminanzkontrast zwischen dem Gelb und dem weißem Hintergrund erreicht.

Unser Fazit: Das Google-Redesign ist trotz aller Unkenrufe ein extrem cleverer Drahtseilakt. Der Gewinner ist Google, die mit dem neuen Design mehr Aufmerksamkeit, mehr Klicks und mehr Umsatz auf die Anzeigen leiten, ohne dabei in irgendeiner Weise „evil“ zu handeln.

]]>
Fabian Stelzer