Webdesign | t3n News News, Infos, Tipps und aktuelle Artikel zu Webdesign 2014-10-28T13:24:17Z t3n Redaktion http://t3n.de/tag/webdesign WieWoWas? t3n-Leser fragten nach: Hootsuite-Alternativen, MRM-Tools, Responsive Webdesign, HTML5 und Google Analytics http://t3n.de/news/wiewowas-t3n-leser-fragten-nach-574816/ 2014-10-28T13:24:17Z
Für alle Fragen rund um die digitale Welt findet ihr auf t3n.de den Fragen-Bereich. Dort könnt ihr nach Lust und Laune alles aufs Tapet bringen, was euch ein Rätsel ist. Jeden Dienstag erscheinen …

Für alle Fragen rund um die digitale Welt findet ihr auf t3n.de den Fragen-Bereich. Dort könnt ihr nach Lust und Laune alles aufs Tapet bringen, was euch ein Rätsel ist. Jeden Dienstag erscheinen dann die interessantesten und brisantesten Fragen und Antworten der t3n-Community zusammengefasst in einem Artikel.In den Fragen dieser Woche geht es um Hootsuite- und Wunderlist-Alternativen, Responsive Webdesign, HTML5, Google Analytics und mehr.

1. Social-Media-Management-Tools

Hootsuite ist eines der beliebtesten Social-Media-Management-Tools. Gibt es auch gute Alternativen? Welche nutzt ihr und warum?

Zur Frage: Was ist die beste Hootsuite Alternative?

2. Bezahlbares MRM-Tool

Wir befinden uns gerade in der Gründungsphase eines E-Commerce-Projektes und arbeiten bereits mit einigen Tools. Was uns fehlt: Ein (bezahlbares) Marketing-Resource-Management-Tool, das uns eine zentrale Planung (Timetables, etc.) und Evaluierung (über KPIs, etc.) unserer Marketingaktivitäten ermöglicht. Gerne auch aus dem Bereich SaaS.

Was empfehlt ihr?

Zur Frage: Gibt es ein (bezahlbares) MRM-Tool für Start-ups? 

3. Responsive Webdesign-Einstieg

Ich habe mich in den letzten Tagen etwas näher mit Responsive Webdesign auseinandergesetzt und bin immer wieder über den Ansatz „Mobile First” gestolpert. Was würdet ihr empfehlen? Mit der Version für mobile Geräte zu beginnen und sich hochzuarbeiten oder andersrum anfangen?

Zur Frage: Responsive Webdesign-Einstieg: "Mobile First" oder "Desktop First"?

4. HTML5-Tags

HTML5 ist ja noch kein verabschiedeter Standard, sondern noch in der Entwicklung. Kann man die Tags trotzdem schon bedenkenlos einsetzen?

Zur Frage: Kann/sollte man HTML5-Tags schon heute einsetzen?

5. Google Analytics in WordPress integrieren

Ich habe eine WordPress-Installation und würde da gerne Google Analytics einbinden. Als Theme nutze ich Twenty Thirteen. Wie mache ich das am besten?

Zur Frage: Wie kann ich Google Analytics in WordPress integrieren?

6. Wunderlist-Alternative

Welche alternativen ToDo-Listen nutzt ihr? Setzt ihr auf kostenpflichtige oder kennt ihr gute Freeware?

Zur Frage: Was ist die beste Wunderlist-Alternative?

 

Tausch dich mit der Community aus: Stell deine Frage, oder lass die Anderen von deinem Wissen profitieren – auf t3n.de/fragen

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Melanie Petersen
Grafikpower für dein Projekt: Die 15 besten Seiten für kostenlose Icons und Icon-Fonts http://t3n.de/news/kostenlose-icons-finder-font-generatoren-574542/ 2014-10-28T09:19:20Z
Für Webdesigner sind Icons das sprichwörtliche Salz in der Suppe – sie machen ein Web-Projekt erst richtig individuell. Wer auf der Suche nach frischen, kostenlosen Icons ist, kommt an diesen …

Für Webdesigner sind Icons das sprichwörtliche Salz in der Suppe – sie machen ein Web-Projekt erst richtig individuell. Wer auf der Suche nach frischen, kostenlosen Icons ist, kommt an diesen Icon-Findern und Font-Generatoren auf keinen Fall vorbei.

Icons sind im Web allgegenwärtig – es wimmelt geradezu vor Icon-Sammlungen für jeden Anlass und Geschmack. Hier bei t3n haben wir euch schon kostenlose Icons wie die Iconmelon-Sammlung oder  Googles kostenfreie SVG-Icons vorgestellt.

Die Zeit, die Designer in die Auswahl geeigneter Symbole investieren, zahlt sich in der Regel aus – in Form von aussagekräftigen, persönlichen Webseiten mit dem gewissen Etwas. Doch nicht immer muss man die Tiefen des Netzes durchforsten, um den perfekten Satz Web-Icons für sein nächstes Projekt zu finden. Wir stellen euch die wichtigsten Icon-Finder, die massenweise Icon-Sets für euch aggregieren, sowie die populärsten Generatoren für Icon-Fonts vor.

1. Kostenlose Web-Icons finden mit GlyphSearch

GlyphSearch vereint populäre Icon-Sets in einer Suchmaske. (Screenshot: GlyphSearch)
GlyphSearch vereint populäre Icon-Sets in einer Suchmaske. (Screenshot: GlyphSearch)

Die Icon-Suchmaschine GlyphSearch lässt Nutzer nach Symbolen aus den Sammlungen Font Awesome, Glyphicons, IcoMoon, Ionicons und Foundation suchen – auch GitHubs Octicons sind mit von der Partie. Insgesamt kommen auf diese Weise über 1.000 Web-Icons zusammen, die man per Klick kopieren und in sein eigenes Webprojekt einfügen kann.

2. Flaticon – Der Klassiker unter den Icon-Findern

Bei Flaticons gibt es eine Fülle an kostenlosen Icons. Nett: Nutzer können sich die populärsten Icons der letzten Stunden anzeigen lassen. (Screenshot: Flaticons)
Bei Flaticons gibt es eine Fülle an kostenlosen Icons. Nett: Nutzer können sich die populärsten Icons der letzten Stunden anzeigen lassen. (Screenshot: Flaticons)

Den Icon-Finder Flaticon haben wir bei t3n schon mal im Detail vorgestellt. Nicht nur bietet der Dienst Zugriff auf mittlerweile fast 60.000 Icons, er ermöglicht es auch, über ein eigenes Photoshop-Plugin ohne den Umweg über die Flaticon-Website auf die gesamte Symbolsammlung zuzugreifen.

3. Iconfinder: Stattliche Anzahl frei verfügbarer Icons

Nicht nur, aber auch kostenlose Icons finden sich auf iconfinder.com. (Screenshot: Iconfinder)
Nicht nur, aber auch kostenlose Icons finden sich auf iconfinder.com. (Screenshot: Iconfinder)

Iconfinder behauptet von sich selbst, die größte Anzahl an Premium-Icons zur Verfügung zu stellen – über 340.000 hat der Anbieter mittlerweile in seiner Sammlung angehäuft. Der Dienst hat es trotzdem in unsere Sammlung geschafft, denn die Suchergebnisse lassen sich leicht nach „Free Icons“ filtern – und zurück bleibt immer noch eine beachtliche Anzahl verfügbarer Icons.

4. Icons Made in Germany: Iconmonstr

Iconmonstr ist ein Projekt des Münsteraner Entwicklers Alexander Kahlkopf. (Screenshot: Iconmonstr)
Iconmonstr ist ein Projekt des Münsteraner Entwicklers Alexander Kahlkopf. (Screenshot: Iconmonstr)

Bei Iconmonstr handelt es sich um ein Projekt des Münsteraner Entwicklers Alexander Kahlkopf. Bis heute haben sich auf der Plattform 2.630 in Schwarz-Weiß gehaltene Icons angesammelt, die allesamt kostenlos für private und kommerzielle Zwecke genutzt werden können.

5. Der erste Icon-Font-Generator überhaupt: IcoMoon

Der Klassiker unter den Icon-Font-Generatoren: IcoMoon.
Der Klassiker unter den Icon-Font-Generatoren: IcoMoon.

Bei IcoMoon handelt es sich um eine Web-App, mit der Nutzer eine Vielzahl an Icon-Sammlungen durchsuchen und eine beliebige Auswahl an Symbolen zu einem eigenen Icon-Font zusammenstellen können. Der Vorteil bei solchen Font-Generatoren: Webdesigner müssen nicht komplette Icon-Sets herunterladen beziehungsweise in ihr Web-Projekt integrieren, sondern können aus verschiedenen Sets genau die Symbole wählen, die sie verwenden wollen. Auf seiner Website gibt IcoMoon an, der erste Anbieter eines solchen Font-Generators überhaupt gewesen zu sein. Auch bei IcoMoon gibt es nicht nur kostenlose Icons – insgesamt finden sich laut den Angaben der Macher aber über 4.000 kostenlose und Open-Source-Icons in der Bibliothek.

6. Icon-Fonts generieren mit Fontastic

Fontastic will das Leben von Webdesignern nicht nur durch kostenlose Icons, sondern auch durch schnellere Workflows erleichtern. (Screenshot: Fontastic)
Fontastic will das Leben von Webdesignern nicht nur durch kostenlose Icons, sondern auch durch schnellere Workflows erleichtern. (Screenshot: Fontastic)

Auch Fontastic zählt zu den Icon-Font-Generatoren und eignet sich besonders gut für Designer, die sich noch mit dem Konzept vertraut machen wollen. Hier können sie aus einer Auswahl von über 9.000 Icons wählen – darunter GitHubs Octicons, Font Awesome, Streamline Icons oder die JustVector Social Icons –, oder auch eigene Icons importieren. In den nächsten Schritten werden die gewählten Icons gebündelt, bearbeitet und als eigene Font ausgegeben. Einzelne Icons lassen sich später mittels CSS anpassen, so dass nicht jedes Mal das ganze Set überarbeitet beziehungsweise neu herunter geladen werden muss. Einen ganz ähnlichen Dienst, das Tool Glyphter, haben wir euch übrigens an anderer Stelle schon vorgestellt.

7. Über 5.000 kostenlose Icons im DryIcons-Archiv

Bei DryIcons gibt es über 6.000 kostenlose Icons und Vektoren. (Screenshot: DryIcons)
Bei DryIcons gibt es über 6.000 kostenlose Icons und Vektoren. (Screenshot: DryIcons)

Bei DryIcons können Nutzer auf die über 5.000 kostenlosen Icons und mehr als 1.700 Vektorgrafiken zugreifen, die die Designer des DryIcons-Projektes aus Mazedonien seit 2007 kreiert haben. Die Sammlung enthält sowohl minimalistische Icons als auch Hochglanz- und saisonale Icon-Sets, die unter einer freien Lizenz bei Namensnennung der Urheber genutzt werden können.

8. FontCustom: Ein Font-Generator auf Ruby-Basis

Icon-Font-Generator auf Ruby-Basis. (Screenshot: FontCustom)
Icon-Font-Generator auf Ruby-Basis. (Screenshot: FontCustom)

Wer komplett unabhängig von vorgefertigten Icon-Sets sein will, sollte sich FontCustom anschauen: Das Ruby-basierte Web-Projekt lässt Nutzer aus ihren SVG-Dateien eigene Icon-Fonts erstellen – und das direkt über die Kommandozeile. Eine genaue Beschreibung des Workflows findet ihr in diesem Blogbeitrag.

9. Open-Source-Depot mit Usability-Schwächen: IconsPedia

Nicht immer gut fürs Auge: Die Plattform IconsPedia versammelt eine Vielzahl kostenloser Icons. (Screenshot: IconsPedia)
Nicht immer gut fürs Auge: Die Plattform IconsPedia versammelt eine Vielzahl kostenloser Icons. (Screenshot: IconsPedia)

Auch bei Iconspedia finden sich kostenlose Icons in Hülle und Fülle, die Seite selbst ist in Sachen Usability allerdings weniger empfehlenswert. Wer sich hier auf die Suche machen will, muss sich auf buntes 90er-Jahre-Design und verwirrend viele Werbebanner einstellen – zudem empfiehlt es sich, genau nach Lizenzen zu filtern, denn hier gibt es zum Teil auch Icon-Sets, die nur für private oder zumindest nicht-kommerzielle Zwecke freigegeben sind.

10. Font-Generator mit SVG-Import: Fontello

Fontello ähnelt anderen Icon-Font-Generatoren wie IcoMoon oder Fontastic. (Screenshot: Fontello)
Fontello ähnelt anderen Icon-Font-Generatoren wie IcoMoon oder Fontastic. (Screenshot: Fontello)

Bei Fontello handelt es sich um einen einfach zu bedienenden Icon-Font-Generator. Ähnlich wie bei IcoMoon oder Fontastic können Nutzer zwischen in einer großen Auswahl an frei verfügbaren Icon-Sets stöbern. Mit dabei: Font Awesome, Typicons, Modern Pictograms oder das Fontello-eigene Icon-Set Fontelico. Die Icons, die Nutzer wirklich verwenden wollen, können sie zu einem eigenen Package zusammenstellen. Bei Fontello bietet sich allerdings zusätzlich die Möglichkeit, eigene Icons beziehungsweise SVG-Dateien hochzuladen.

11. Freepik crawlt das Netz nach kostenlosen Icons und Grafiken

Kostenlose Design-Ressourcen spürt der Icon-Finder Freepik auf. (Screenshot: Freepik)
Kostenlose Design-Ressourcen spürt der Icon-Finder Freepik auf. (Screenshot: Freepik)

Freepik ist ein Icon-Finder im klassischen Sinne: Der Dienst durchsucht das Netz automatisiert nach kostenlosen Grafiken, Icons, Fotos und Vektoren für Webdesigner und gibt diese nach Kategorien geordnet für seine Nutzer aus. Parallel dazu erstellen aber auch einige Designer exklusive Dateien, die sich ebenfalls umsonst bei Freepik finden. Insgesamt kommen so laut Freepik über eine Million kostenfreie Grafik-Ressourcen zusammen.

12. Kostenlose Icons im IconArchive

Open-Source-Icons finden sich im IconArchive. (Screenshot: IconArchive)
Open-Source-Icons finden sich im IconArchive. (Screenshot: IconArchive)

Eine Menge kostenlose Icons finden sich bei IconArchive – Webdesigner sollten allerdings darauf achten, dass das gewählte Icon-Set auch tatsächlich zur kommerziellen Nutzung freigegeben ist. Entsprechende Suchfilter sind vorhanden. Zudem kann bei IconArchive in über 40 verschiedenen Kategorien von Business bis Vintage gesucht oder nach den neuesten oder beliebtesten Icons gefiltert werden.

13. Pictonic: Ein Font-Generator mit kostenlosen und kostenpflichtigen Icons

Nicht annähernd so viele kostenlose Icons wie Fontello oder IconFont: Der Font-Generator Pictonic. (Screenshot: Pictonic)
Nicht annähernd so viele kostenlose Icons wie Fontello oder IconFont: Der Font-Generator Pictonic. (Screenshot: Pictonic)

Bei Pictonic handelt es sich um einen weiteren Icon-Font-Generator im Stile von Fontello oder Fontastic. Wermutstropfen bei diesem Dienst: Nur 362 der verfügbaren Icons sind kostenlos, alle weiteren kosten 59 Cent. Größe, Farbe und Schattierung der Icons können sehr einfach angepasst und auch später noch verändert werden. In einer eigenen Showcase-Sektion kann man sich zudem durch Beispiele anderer Pictonic-Nutzer inspirieren lassen.

14. Font-Generator mit Herz: We Love Icon Fonts

We Love Icon Fonts ähnelt Diensten wie Fontello, Fontastic oder IcoMoon. (Screenshot: We Love Icon Fonts)
We Love Icon Fonts ähnelt Diensten wie Fontello, Fontastic oder IcoMoon. (Screenshot: We Love Icon Fonts)

Der Dienst We Love Icon Fonts beschreibt sich selbst als Google Web Fonts, nur speziell für Icon-Fonts. Hier sind verschiedenste Open-Source-Icon-Sets gebündelt, aus denen Nutzer ihre Favoriten in eine eigene Font exportieren können. Die Auswahl der verfügbaren Packages ist denen der anderen Icon-Font-Generatoren sehr ähnlich. Die personalisierte Icon Font wird per Embed-Code ausgegeben und kann dann via CSS angepasst werden.

15. Anspruchsvolles Icon-Font-Tool: Iconvault

Mit Iconvault lassen sich SVG-Sammlungen in Icon-Fonts umwandeln. (Screenshot: Iconvault)
Mit Iconvault lassen sich SVG-Sammlungen in Icon-Fonts umwandeln. (Screenshot: Iconvault)

Ähnlich wie FontCustom lässt auch der Dienst Iconvault seine Nutzer SVG-Dateien in personalisierte Icon-Fonts umwandeln. Iconvault erarbeitet Sammlungen von SVG-Dateien vollkommen automatisch in verschiedene Font-Formate und liefert sie zusammen mit einer Anleitung und Beispieldatei an den Nutzer zurück. Eine ausführliche Vorstellung von Iconvault findet ihr in diesem Artikel.

Wo sucht ihr am liebsten nach Icons für eure Projekte? Welchen Dienst haben wir vergessen? Wir freuen uns auf eure Kommentare!

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Lea Weitekamp
Macht Wired.de das Scrollytelling salonfähig? http://t3n.de/news/macht-wiredde-scrollytelling-573570/ 2014-10-22T12:14:02Z
Sie sind immer noch irgendwie in Mode: Scrollytelling-Websites. In diesem Artikel zeigen wir euch fünf Beispiele – und warum die deutsche Wired der eigentliche Gewinner ist.

Sie sind immer noch irgendwie in Mode: Scrollytelling-Websites. In diesem Artikel zeigen wir euch fünf Beispiele – und warum die deutsche Wired der eigentliche Gewinner ist. Bei allen Nachteilen, die scrolllastige Webprojekte haben, werden sie auch heute noch gerne eingesetzt. Die Folge sind oft Performance-Probleme, „Informations-Overkill“, schlechtes Handling durch stetiges Scrollen, fehlende Footer und Probleme beim Link-Sharing. Darüber hinaus rückt der Inhalt häufig in den Hintergrund, weil die Animationen die ganze Aufmerksamkeit auf sich ziehen.

Wir haben bereits mehrmals über Scrollytelling, aber auch von ScrollMagic berichtet – welches als Framework sicher zu den Besten gehört, um diese Art von Website umsetzen zu können. Wer vom Scrollytelling überzeugt ist, dem möchte ich die folgenden Inspirationen nicht vorenthalten:

Scrollytelling ist tot. Lange lebe Scrollytelling?

Scrollytelling-Websites werden teilweise als Heilmittel für den Journalismus gehandelt, weil Inhalte dadurch spannender und interaktiver vermittelt werden können. Publisher erhoffen sich, dass Leser für „spannenden“ oder „erlebbaren“ Inhalt lieber Geld ausgeben, als für klassische Formate wie ihr sie auch bei uns, oder auf anderen Portalen lesen könnt. Verlage wie beispielsweise die New York Times haben eigene Tools entwickelt, um Scrollytelling für Journalisten zugänglicher zu machen. Trotzdem treten Scrollytelling-Artikel nicht so häufig auf, wie es anfangs prophezeit oder erhofft wurde. Was ich persönlich aufgrund der Nachteile, die mit solchen Artikeln einhergehen, begrüße.

scrollytelling
Scrollytelling wie es sein sollte. (Screenshot: wired.de)

Vielmehr gibt es heute eine neue Entwicklung, nämlich einzelne Elemente des „klassischen“ Scrollytelling subtil anzuwenden. Ein positiver Versuch ist das neue Artikel-Layout der deutschen Wired. Hier wird der Text spaltenartig – allerdings nur mit einer Spalte – und teilweise asymmetrisch präsentiert, Zitate oder Bildergalerien unterstützen den Text, funktionieren aber auch alleinstehend und bekommen den ihnen gebührenden Whitespace. Egal ob Überschrift, Teaser oder einzelne Absätze, die Informationsblöcke sind leicht zu erfassen und machen zugleich auch einzeln etwas her. Das Scrollen selbst passiert eigentlich aus einem Feature heraus: die große Schriftgröße und der Whitespace. Dadurch entsteht zwar eine gewisse „Länge“ der Artikel, der Leser fühlt sich beim Scrollen aber nicht genervt, weil die Website künstlich in die Länge gezogen wird. Darüber hinaus verzichtet Wired.de auf überflüssige Animationen.

Wired.de, ein Vorzeigebeispiel

Sollte das Design der Wired-Artikel aus dem „klassischen“ Scrollytelling inspiriert beziehungsweise hervorgegangen sein, dann begrüße ich sie, denn: Einzeln wirken Stilmittel stärker, als wenn eine Website jeden Effekt wiedergibt, der bis dato entwickelt wurde. Wenn Scrollytelling-artige Websites den Journalismus retten können, dann nur so, wie es die deutsche Wired umzusetzen versucht: Die Vorteile von Scrollytelling nutzen, aber die Inhaltslänge kurz genug halten, um sicherzustellen, dass die Artikel lesbar sind und Performance-Probleme ausbleiben.

Wie denkt ihr über Scrollytelling?

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Mario Janschitz
Material Design: Google veröffentlicht 750 kostenfreie SVG-Icons http://t3n.de/news/google-material-design-icons-573630/ 2014-10-22T09:43:33Z
Google hat 750 SVG-Icons unter einer freien Creative-Commons-Lizenz veröffentlicht. Die Icons sind als Ressourcen für App-Entwickler gedacht, die Anwendungen im „Material Design“ erstellen wollen.

hat 750 SVG-Icons unter einer freien Creative-Commons-Lizenz veröffentlicht. Die sind als Ressourcen für App-Entwickler gedacht, die Anwendungen im „Material Design“ erstellen wollen.

Google stellt 750 Icons zur lizenzfreien Nutzung bereit. (Screenshot: Google)
Google stellt 750 Icons zur lizenzfreien Nutzung bereit. (Screenshot: Google)

Google: Schicke Icons zur kostenfreien Verwendung veröffentlicht

Googles neue Designsprache „Material Design“ zeigt sich bereits in Android 5.0 Lollipop. Aber auch Web-Apps sollen, wenn es nach Google geht, auf „Material Design“ setzen. Um App-Entwickler dabei etwas unter die Arme zu greifen, hat der Suchgigant jetzt 750 SVG-Icons unter einer freien Creative-Commons-Lizenz auf GitHub veröffentlicht.

Die Icons decken verschiedene Funktionen ab und sind zum überwiegenden Teil einfarbig gehalten. Ausnahmen bilden vor allem Icons, die Zwischenstände bei der Akkuladung oder der WLAN-Empfangsqualität darstellen sollen. Die Icons könnt ihr euch entweder über die GitHub-Seite von Google herunterladen oder mit den folgenden Befehlen direkt über die Paket-Manager Bower und NPM:

$ bower install material-design-icons
$ npm install material-design-icons

Google: Material Design Icons stehen als SVG- und PNG-Dateien bereit

Die Icons kommen als SVG-Datei jeweils in einer Größe von 24 und 48 Pixeln. Außerdem gibt es SVG- und CSS-Sprites von allen Symbolbildchen. Darüber hinaus gibt es die Icons als PNG-Dateien in verschiedenen Versionen für das Web, iOS oder andere Einsatzgebiete. Wer sich alle Glyphen in Ruhe anschauen möchte, kann dazu die Live-Preview-Seite der Icons nutzen.

Wem die Icons nicht zusagen, der sollte einen Blick auf unsere Artikel „Iconmelon: Hier findet ihr kostenlose SVG-Icons für euer nächstes Projekt“ und „Flaticon: Fast 13.000 kostenlose Vektor-Icons zum Download“ werfen.

via www.producthunt.com

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Kim Rixecker
Typografie im Webdesign: So kannst du Schriftarten kombinieren http://t3n.de/magazin/typografie-webdesign-235755/ 2014-10-17T11:22:11Z
Die richtige Schrift war schon immer ausschlaggebend für gutes Design. Seit Webfonts im Web typografische Vielfalt erlauben, stehen auch Webdesigner vor der Herausforderung, die genau passende …

Die richtige Schrift war schon immer ausschlaggebend für gutes . Seit Webfonts im Web typografische Vielfalt erlauben, stehen auch Webdesigner vor der Herausforderung, die genau passende Schrift auszuwählen. Dabei kommt es vor allem auch auf die richtige Kombination von Schriften an.

Der Webdesigner Gerrit van Aaken definiert Typografie als „die Kunst und Lehre der grafischen Gestaltung, die in irgendeiner Form mit Schriftzeichen zusammenhängt“. umfasst damit ein weites Feld und entscheidet maßgeblich über Eindruck und Nutzerfreundlichkeit einer Website. Oliver Reichenstein, Gründer bei der bekannten Agentur Information Architects, meinte bereits 2006: „Webdesign ist zu 95 Prozent Typografie“. Nachdem sich ab 2007 Webfonts durchgesetzt haben, hat die typografische Vielfalt im Web nochmals einen gehörigen Schub erhalten – Services wie Typekit oder Google Fonts sei Dank. Das bedeutet, dass Webdesigner zunehmend gute Kenntnisse zur Beurteilung einer Schrift brauchen.

Gefeierte Vielfalt

Stark vereinfacht kann Typografie zwei Ziele verfolgen: Sie ist entweder expressives Gestaltungsmittel oder ein reduzierter Informationsträger. Die erste Variante feiert die Schrift als Ausdrucksmittel und nutzt ihre gestalterische Kraft. Da die Leserlichkeit hier nicht im Vordergrund steht, eignet sich dieser Stil vorrangig für Websites mit wenig Text – oder solchen, die bewusst aus der Reihe tanzen möchten.

dms ae38b6038798102c74c79d038f96b037
Das Magazin „Literary Bohemian“ spielt mit einer expressiven Schriftkombination und versprüht so Reklame-Charme.
Expressive Schriftmischungen, wie auf der Website des Magazins „Literary Bohemian“, versprühen starken Retro-Charme und haben einen sehr plakativen Reklame-Charakter. Dieser Stil ist jedoch auch sehr experimentell und verlangt vom Gestalter einiges an Erfahrung – schließlich sollte man Fonts nicht einfach wild durcheinander würfeln.

Reduzierte Typografie

Im üblicher ist die reduzierte Typografie: Die Schrift wird eher als Mittel zum Zweck verwendet und nicht als zentrales Gestaltungselement. Wichtig ist dann, dass der Nutzer den Inhalt gut erfassen kann, die gewählten Schriften also gut leserlich sind. In diesem Fall sollten Webdesigner nicht zu viele Schriften verwenden – zwei oder drei Varianten dürften meist ausreichen. Der Leserlichkeit dient auch die Verwendung großer Typografie, die seit Jeffrey Zeldmans Manifest im Trend liegt.

dms dea6c7c3afba77dbb09b68ff2601d003
Auch der Webentwickler Peter Kröner achtet auf seiner Website auf eine gute Lesbarkeit seiner Texte und nutzt daher eine angenehm große Schrift.

Kontrast statt Konflikt

Kombiniert man Schriften miteinander, entsteht ein Schriftkontrast. Ob die Schriften zueinander passen, hängt von der richtigen Balance ab. Cameron Chapman bringt es in einem Artikel auf die Formel: „Kontrast ja, Konflikt nein“. Konflikte können dabei sowohl bei zu wenig als auch bei zu viel Kontrast entstehen. Sind die Schriften zu ähnlich, heben sie sich nicht genug voneinander ab. Die Auswahl wirkt zufällig, als habe der Designer aus Versehen eine falsche Schrift eingestellt. Ist der Kontrast zu stark, wirkt dies unprofessionell – die Schriften scheinen beliebig nebeneinander gesetzt. Eine stimmige Schriftmischung hat also genau den richtigen Kontrast.

dms c4abc24ab3e030871bf58e1dfb1c88cd
Der Kontrast zwischen den Schriften bestimmt die Harmonie – und auch, wie professionell ein Design wirkt (oben: zu wenig Kontrast, unten: zu viel Kontrast).
Der Spielraum dabei ist jedoch enorm, je nachdem, ob eher ein harmonischer oder ein extremer Eindruck gewünscht ist.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Björn Rohles
40 kostenlose WordPress-Themes für Responsive Design http://t3n.de/news/kostenlose-wordpress-themes-responsive-webdesign-376838/ 2014-10-14T16:30:24Z
Das Angebot an kostenlosen Templates für die eigene Website wächst stetig. Auch die Auswahl an Wordpress-Themes, die Responsive Webdesign unterstützen, ist inzwischen beachtlich.

Das Angebot an kostenlosen für die eigene Website wächst stetig. Auch die Auswahl an , die unterstützen, ist inzwischen beachtlich. Zur besseren Übersicht hier eine Auswahl von 40 kostenlosen und responsiven WordPress-Themes.

Responsive Design bei WordPress-Themes

Immer mehr Nutzer surfen über mobile Endgeräte im Internet. Ob unterwegs mit dem Smartphone oder auf der Couch mit dem Tablet: Neue Nutzungsgewohnheiten verändern die Anforderungen an Websites jedweder Machart. Mit einem responsiven WordPress-Theme verbessert ihr die Usability und Lesbarkeit eurer jetzigen und eurer zukünftigen Besucher.

Schon jetzt haben Notebooks und Smartphones den Desktop als beliebtesten Zugangsweg ins Internet hinter sich gelassen, wie die ARD/ZDF-Onlinestudie 2014 zeigt. Und auch der Anteil der Nutzer, die Internetinhalte über das Tablet abrufen, hat sich von 16 Prozent im Jahr 2013 auf 28 Prozent im Jahr 2014 gesteigert.

Vieles spricht daher für ein WordPress-Theme, das auch für mobile Endgeräte optimiert wurde.

40 WordPress-Themes für Responsive Design

Die folgenden WordPress-Themes sind durch Responsive Webdesign für alle Endgeräte optimiert. Wer auf eigene Faust eine responsive Website erstellen will, sollte sich stattdessen in die Einzelteile der folgenden Artikelserie einlesen:

  1. Responsive Webdesign, Teil 1: Layout- und Textdarstellung
  2. Responsive Webdesign, Teil 2: Das Navigationsmenü
  3. Responsive Webdesign, Teil 3: Darstellung von Galerien und Videos

1. Twenty Fourteen von WordPress

Responsive WordPress-Theme: Twenty Fourteen.
Twenty Fourteen, das diesjährige Default-Theme von WordPress, ist vollständig für responsive Websites ausgelegt. (Screenshot: Twenty Fourteen)

2. Twenty Thirteen von WordPress

Responsive WordPress-Theme: Twenty Thirteen.
Auch das 2013er WordPress-Theme Twenty Thirteen wartet mit responsiven Funktionalitäten auf. (Screenshot: Twenty Thirteen)

3. Codium Extend von CodeReduction

Responsive WordPress-Theme: Codium Extend. (Screenshot: Codium Extend)

4. Live Wire von Theme Hybrid

Responsive WordPress-Theme: Live Wire.
Das responsive WordPress-Theme Live Wire ist unter der Maßgabe Mobile First entwickelt worden. (Screenshot: Live Wire)

5. Pinboard von One Designs

Hinweis: Standardmäßig ist hier Infinite Scroll aktiviert, was mit einem Footer natürlich etwas unglücklich ist. Das kann in den Theme-Optionen umgestellt werden.

Responsive WordPress-Theme: Pinboard.
Responsive WordPress-Theme: Pinboard. (Screenshot: Pinboard)

6. Match von DoveThemes

Responsive WordPress-Theme: Match.
Schön für persönliche Webseiten: Das responsive WordPress-Theme Match. (Screenshot: Match)

7. Fictive von Automattic

Responsive WordPress-Theme: Fictive.
Das WordPress-Theme Fictive legt Wert auf Personalisierung – etwa durch Einbindung der Social Networks. (Screenshot: Fictive)

8. RestImpo von Tomas Toman

Responsive WordPress-Theme: RestImpo.
Das Theme RestImpo bietet unter anderem sechs vorgefertigte Farbschemata, 220 Schriftarten und Unterstützung für viele populäre Plugins. (Screenshot: RestImpo)

9. Superhero von Automattic

Responsive WordPress-Theme: Superhero. (Screenshot: Superhero)
Große Bilder und farbliche Akzente: Das kostenlose WordPress-Theme Superhero. (Screenshot: Superhero)

10. Spacious von ThemeGrill

Responsive WordPress-Theme: Spacious. (Screenshot: Spacious)
Spacious gehört zu den WordPress-Themes, die besonders aufgeräumt daher kommen. (Screenshot: Spacious)

11. Times von Rohit Tripathi

Responsive WordPress-Theme: Times. (Screenshot: Times)
Viele Content-News auf einen Blick: Das responsive Theme Times. (Screenshot: Times)

12. Radiate von ThemeGrill

Responsive WordPress-Theme: Radiate. (Screenshot: Radiate)
Mit Radiate holt ihr euch ein modernes WordPress-Theme im klaren Look ins Haus. (Screenshot: Radiate)

13. Perfetta von GavickPro

Responsive WordPress-Theme: Perfetta. (Screenshot: Perfetta)
Das Theme Perfetta wurde speziell für Gastronomen und Food-Blogger entwickelt. (Screenshot: Perfetta)

14. Influence von SiteOrigin

Responsive WordPress-Theme: Influence. (Screenshot: Influence)
Das Theme Influence bietet einen gewissen Hipster-Charme. (Screenshot: Influence)

15. Hemingway von Anders Norén

Responsive WordPress-Theme: Hemingway. (Screenshot: Hemingway)
Das responsive WordPress-Theme Hemingway kommt mit Vollbild-Header-Image und Parallax Scrolling. Fun Fact: Auch eine schwedische Übersetzung ist verfügbar. (Screenshot: Hemingway)

16. Baskerville von Anders Norén

Responsive WordPress-Theme: Baskerville. (Screenshot: Baskerville)
Baskerville kommt mit Widgets für Videos, Flickr und Dribbble. (Screenshot: Baskerville)

17. Wilson von Anders Norén

Responsive WordPress-Theme: Wilson. (Screenshot: Wilson)
Ein WordPress-Theme für Webworker: Wilson. (Screenshot: Wilson)

18. Lingonberry von Anders Norén

Responsive WordPress-Theme: Lingonberry. (Screenshot: Lingonberry)
Ein Hauch von Retina: Das WordPress-Theme Lingonberry bedient eure künstlerischen Ansprüche. (Screenshot: Lingonberry)

19. Pho von ThematoSoup

Responsive WordPress-Theme: Pho. (Screenshot: Pho)
Die Macher von Pho versprechen ein „leanes“ und schnelles responsives WordPress-Theme. (Screenshot: Pho)

20. Dice von Jens Törnell

Responsive WordPress-Theme: Dice. (Screenshot: Dice)
Responsive WordPress-Theme: Dice. (Screenshot: Dice)

21. Kubrick 2014 von John Wilson

Responsive WordPress-Theme: Kubrick 2014. (Screenshot: Kubrick 2014)
John Wilson hat einem Klassiker der WordPress-Themes ein responsives Update verpasst. (Screenshot: Kubrick 2014)

22. Adaption von Automattic

Responsive WordPress-Theme: Adaption. (Screenshot: Adaption)
Noch mehr responsive WordPress-Themes von Automattic – hier: Adaption. (Screenshot: Adaption)

23. Isola von Automattic

Responsive WordPress-Theme: Isola. (Screenshot: Isola)
Das WordPress-Theme Isola besticht durch seine Einfachheit. (Screenshot: Isola)

24. Bosco von Automattic

Responsive WordPress-Theme: Bosco. (Screenshot: Bosco)
Bei diesem responsiven Theme hat Automattic Wert auf außergewöhnliche Typographie gelegt. (Screenshot: Bosco)

25. Radar von wphigh

Responsive WordPress-Theme: Radar. (Screenshot: Radar)
Ein responsives WordPress-Theme im Flat-Desing-Stil: Radar. (Screenshot: Radar)

26. Forefront von Thomas Usborne (Child-Theme für GeneratePress)

Responsive WordPress-Theme: Forefront. (Screenshot: Forefront)
Responsive WordPress-Theme: Forefront. (Screenshot: Forefront)

27. Solon von aThemes

Responsive WordPress-Theme: Solon. (Screenshot: Solon)
Mit Solon nutzt ihr ein responsives WordPress-Theme, das persönlichen Blogs einen modernen Anstrich verleiht. (Screenshot: Solon)

28. Hudson von Michael Burrows

Responsive WordPress-Theme: Hudson. (Screenshot: Hudson)
Responsive WordPress-Theme: Hudson. (Screenshot: Hudson)

29. Eighties von Justin Kopepasah

Responsive WordPress-Theme: Eighties. (Screenshot: Eighties)
The Eighties are back! In Form eines Responsive-Themes für WordPress. (Screenshot: Eighties)

30. Editor von Array

Responsive WordPress-Theme: Editor. (Screenshot: Editor)
Ein besonders elegantes und minimalistisches WordPress-Theme findet ihr in Editor. (Screenshot: Editor)

31. Pictorico von Automattic

Responsive WordPress-Theme: Pictorico. (Screenshot: Pictorico)
Wer besonders viel mit Bildern arbeitet, sollte sich das responsive Theme Pictorico anschauen. (Screenshot: Pictorico)

32. Independent Publisher von Raam Dev

Responsive WordPress-Theme: Independent Publisher. (Screenshot: Independent Publisher)
Das Theme Independent Publisher erlaubt es euren Lesern, sich voll und ganz auf eure Texte zu konzentrieren. (Screenshot: Independent Publisher)

33. Ignite von Compete Themes

Responsive WordPress-Theme: Ignite. (Screenshot: Ignite)
Die Nutzer des WordPress-Themes Ignite loben vor allem den guten Support. (Screenshot: Ignite)

34. Drop von Compete Themes

Responsive WordPress-Theme: Drop. (Screenshot: Drop)
Responsive WordPress-Theme: Drop. (Screenshot: Drop)

35. Esperanza Lite von Qlue Themes

Responsive WordPress-Theme: Esperanza. (Screenshot: Esperanza)
Mit ihrem responsiven Theme wollen die Macher von Esperanza eine einfache, nahtlose Arbeitsumgebung für Blogger bieten. (Screenshot: Esperanza)

36. Hexa von Automattic

Responsive WordPress-Theme: Hexa. (Screenshot: Hexa)
Ein Hauch von Retro-Charme: Das responsive WordPress-Theme Hexa. (Screenshot: Hexa)

37. Ex Astris von Sarah Gooding (Child-Theme für Stargazer)

Responsive WordPress-Theme: Ex Astris. (Screenshot: Ex Astris)
Das responsive WordPress-Theme Ex Astris ist speziell für die Nutzer des Themes Stargazer entwickelt worden. (Screenshot: Ex Astris)

38. Zweig von Simon Vandereecken

Responsive WordPress-Theme: Zweig. (Screenshot: Zweig)
Wer es ein bisschen extravagant mag, kann sich vielleicht für das Theme Zweig begeistern. (Screenshot: Zweig)

39. Sorbet von Automattic

Responsive WordPress-Theme: Sorbet. (Screenshot: Sorbet)
Ein WordPress-Theme, das an den Sommer erinnert: Sorbet. (Screenshot: Sorbet)

40. Highwind von jameskoster

Responsive WordPress-Theme: Highwind. (Screenshot: Highwind)
Das schwerelose Design des responsiven Themes Highwind soll den richtigen Rahmen für eure Inhalte liefern. (Screenshot: Highwind)

Wir hoffen, dass wir euch einige neue Themes zeigen konnten. Übrigens: Bei der Erstellung eigener WordPress-Themes unterstützt euch diese t3n-Artikelreihe.

Kennt ihr weitere kostenlose WordPress-Themes, die responsive sind und hier nicht fehlen dürfen?

Letztes Update des Artikels: 12. Oktober 2014. Der Originalartikel stammt von Lars Budde.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Florian Brinkmann
Sticker UI Book: Das Stickeralbum für UX- und UI-Designer http://t3n.de/news/sticker-ui-book-stickeralbum-571138/ 2014-10-10T09:14:57Z
Wer sagt, dass Webdesign nicht auch analog funktionieren kann? Das Sticker UI Book, das derzeit auf Kickstarter sein Glück versucht, versüßt UX- und UI-Designern nicht nur den kreativen Prozess, …

Wer sagt, dass Webdesign nicht auch analog funktionieren kann? Das Sticker UI Book, das derzeit auf Kickstarter sein Glück versucht, versüßt UX- und UI-Designern nicht nur den kreativen Prozess, sondern auch den Austausch und die Dokumentation ihrer Ideen.

Sticker UI Book: Design-Ideen kritzeln, kleben, zeigen

Die meisten Kreativen greifen auch in Zeiten überdimensionaler Screens, Notebooks und Tablets zwischendurch auf Stift und Papier zurück, um ihre Ideen festzuhalten. Nicht nur geht das manchmal schneller, es hilft auch, gedankliche Bilder besser greifbar zu machen – für sich und andere, deren Feedback man einholen möchte.

Das Sticker UI Book bietet einen Ort für deine Skizzen und Ideen zum UI-Design. (Foto: Killer, Inc.)
Das Sticker UI Book bietet einen Ort für deine Skizzen und Ideen zum UI-Design. (Foto: Killer, Inc.)

So geht es auch Jennifer Williams und Brandy Bora. Die beiden User-Experience-Designerinnen aus Brooklyn haben sich unter dem Firmennahmen Killer, Inc. zusammen getan, um das Leben von Web Professionals mit ebenso spaßigen wie nützlichen Produkten zu versüßen. Nun haben sie ihr erstes Projekt auf Kickstarter gebracht: Ein Stickeralbum, mit dem sich der Webdesign-Prozess analog vorbereiten lässt. Und sich dabei ein bisschen so anfühlt wie früher auf dem Schulhof, als man Regenbogen- und Glitzereinhorn-Aufkleber mit seinen Freunden ausgetauscht hat.

Von Statusbalken bis WYSIWYG: Das Sticker UI Book liefert die wichtigsten Templates gleich mit

Das Sticker UI Book soll sowohl Studenten als auch angehenden und professionellen UX- und UI-Designern einen Ort für ihre Ideen geben. Dazu bringt es auf 48 Seiten diverse Vordrucke – etwa Smartphone, Tablet oder Website – mit, in die sowohl Sticker eingeklebt als auch Notizen eingetragen werden können. Daneben gibt es aber auch freie Seiten, auf denen man seiner Kreativität völlig freien Lauf lassen kann.

Die mitgelieferten Stickerbögen umfassen typische Elemente aus dem User-Interface-Design, zum Beispiel oft genutzte Icons, Ladebalken, Mediaplayer oder auch die WYSIWYG-Toolbar. Auch mobile Tastaturen und diverse Buttons sind mit von der Partie. Die Macher des Sticker UI Book haben die Sticker so gestaltet, dass sie nicht zu üppig und komplex sind, um Ideen weiter zu entwickeln und die Elemente in das eigene Gestaltungskonzept einzubinden.

Derzeit hat das Sticker UI Book bei Kickstarter etwas mehr als die Hälfte der anvisierten 12.500 US-Dollar eingenommen, im Erfolgsfall sollen die ersten Sets noch im Winter verschickt werden. Wer das Projekt unterstützen und sich für 25 US-Dollar ein Stickeralbum sichern will, hat noch 20 Tage Zeit, dies zu tun.

via www.fastcodesign.com

]]>
Lea Weitekamp
Responsive Webdesign für lau: Diese Website bündelt mehr als 500 Templates http://t3n.de/news/responsive-webdesign-fuer-lau-569426/ 2014-09-30T13:06:47Z
Du willst deine Website mit einem Responsive Webdesign versehen oder eine neue damit launchen? Dann solltest du einen Blick auf W3Layouts werfen. Die Website bündelt über 500 kostenlose …

Du willst deine Website mit einem versehen oder eine neue damit launchen? Dann solltest du einen Blick auf W3Layouts werfen. Die Website bündelt über 500 kostenlose Design-Vorlagen, gruppiert nach Themen und Branchen.

Responsive Webdesign: Große Sammlung mit thematischer Gruppierung

In Kategorien wie „Blogging Template“ „Interior and Furniture“ oder „Mobile App Templates“ bietet W3Layouts Zugriff auf über 500 Design-Vorlagen. Zu jeder Vorlage gibt es eine Demo, mit der man das Design vorab testen kann. Die kostenlosen stehen unter der Lizenz „Creative Commons Attribution 3.0 unported“, enthalten allerdings einen Backlink auf w3layouts.com, den man erst entfernen darf, wenn man 10 US-Dollar via PayPal spendet.

Neben vielen Responsive-Webdesign-Temples gibt es bei w3layouts.com auch einige UI-Kits.
Neben vielen Responsive-Webdesign-Temples gibt es bei w3layouts.com auch einige UI-Kits. (Quelle: w3layouts.com)

So oder so darf man die Responsive-Webdesign-Vorlagen von w3layouts für private und kommerzielle Projekte nutzen und sie bei Bedarf anpassen. Bei einigen Templates verlinkt w3layouts auch auf PSD-Dateien. Insgesamt eine sehr nützliche Sammlung für das nächste Website-Projekt, bei dem man ein Responsive Design nutzen möchte.

Responsive Webdesign für WordPress

Ist WordPress das CMS der Wahl, dann solltest Du einen Blick auf unseren Artikel zu Responsive-Webdesign-Templates für WordPress werfen.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Jan Christe
Die Basics des Responsive Webdesign [Infografik] http://t3n.de/news/basics-responsive-webdesign-568195/ 2014-09-22T09:08:10Z
Je schneller die Zahl der mobilen Internetnutzer steigt, desto dringender wird die Frage, wie sich Website-Inhalte auf verschiedenen Endgeräten optimal darstellen lassen. Ein möglicher …

Je schneller die Zahl der mobilen Internetnutzer steigt, desto dringender wird die Frage, wie sich Website-Inhalte auf verschiedenen Endgeräten optimal darstellen lassen. Ein möglicher Lösungsansatz ist – die wichtigsten Basics zeigt eine neue .

Responsive Webdesign: Grundvoraussetzung für die mobile Kommunikation

Nach den Analysten von Morgan Stanley wird die Zahl der mobilen Internetnutzer die der Desktop-Surfer noch vor Ende 2014 endgültig übersteigen. Auch in Deutschland ist der Trend eindeutig: Schon 2013 lag die Zahl der Internetnutzer, die von mobilen Endgeräten aus auf das Netz zugreifen, bei 51 Prozent – im Vergleich zu nur 37 Prozent im Vorjahr. In der Altersgruppe der 16–24-Jährigen stieg der Anteil der mobilen Internetnutzer innerhalb eines Jahres sogar von 59 auf 81 Prozent.

Wer das Internet nutzt, um seine Zielgruppen zu erreichen – und dabei nicht nur auf vorhandene Infrastrukturen wie Facebook setzt – sollte auf diese Entwicklung reagieren. Denn eine Seite, die aufgrund langer Ladezeiten und endlosem Scrolling für mobile Nutzer zur Tortur wird, konvertiert nicht – oder zumindest wesentlich schlechter als das Desktop-Pendant.

Einen Ausweg verspricht seit einiger Zeit das Responsive Webdesign, ein Gestaltungsprinzip, mit dessen Hilfe der Inhalt einer Website sich flexibel an die Gegebenheiten des jeweiligen Bildschirms beziehungsweise Endgerätes anpasst.

Infografik zeigt die Basics des Responsive Webdesign auf einen Blick

Einen Überblick darüber, wie genau Responsive Webdesign funktioniert und warum es sinnvoll ist, den eigenen Webauftritt entsprechend zu überarbeiten, liefert die folgende Infografik. Wer sich die wichtigsten Basics schnell noch einmal vor Augen rufen möchte oder einen Kunden oder Geschäftspartner vom Nutzen der Darstellungsform überzeugen muss, findet hier eine anschauliche Hilfestellung.

Zum Vergrößern der Grafik einfach auf den unten stehenden Ausschnitt klicken.

Ihr wollt selbst eine Website in Responsive Webdesign umsetzen? Dann findet ihr in unserer Artikelreihe Responsive Webdesign hilfreiche Tipps.

Responsive_Webdesign_Basics_Ausschnitt
Die Basics des Responsive Webdesign. (Grafik: Verve)

via blog.hubspot.com

]]>
Lea Weitekamp
WebTech Conference 2014: „Alle müssen ein Verständnis aufbauen, wie modernes Webdesign funktioniert“ [Sponsored Post] http://t3n.de/news/webtech-conference-2014-alle-567390/ 2014-09-17T13:20:27Z
Vom 26. bis 29. Oktober findet die WebTech Conference in München statt. Die Themen: Responsive Webdesign, Continuous Delivery, Dev-Ops. Im Vorfeld spricht Frontend-Entwickler und SVG-Anhänger Sven …

Vom 26. bis 29. Oktober findet die WebTech Conference in München statt. Die Themen: , Continuous Delivery, Dev-Ops. Im Vorfeld spricht Frontend-Entwickler und SVG-Anhänger Sven Wolfermann über die wichtigsten Kniffe im Responsive-Webdesign-Umfeld.

Zur WebTech Conference 2014: SVG-Crack Sven Wolfermann im Interview

Die WebTech Conference 2014 findet vom 26. bis 29. Oktober in München statt und beleuchtet eine Fülle technischer und methodischer Konzepte, die für den Erfolg im Web von großer Bedeutung sind. Neben ihrer Kompetenz für Responsive (mit HTML5) und JavaScript steht die Konferenz auch für moderne Architektur- und Methodenthemen wie agile Vorgehensweisen, Continuous Delivery und Dev-Ops. Sämtliche Themen werden von mehr als 60 erfahrenen Speakern diskutiert, unter anderem von Sven Wolfermann mit seinem Vortrag „SVG – weniger Pixel, mehr Fun“.

WTC Sven WolfermannSven Wolfermann ist freier Webentwickler mit Schwerpunkt Frontend-Entwicklung (HTML5/CSS3/RWD) und lebt in Berlin. Seit 2003 ist er mit seiner Firma „maddesigns“ für Agenturen und Firmen tätig. Sven arbeitet seit drei Jahren ausschließlich in Responsive-Webdesign-Projekten, hält Vorträge und leitet Workshops zum Thema RWD. Er hat ein Faible für Performance-Optimierung und ein Augenmerk auf UX und Accessibility. Zudem twittert er liebend gern unter @maddesigns. Im Interview steht er uns Rede und Antwort.

Frage: Sven, seit einiger Zeit schon stemmst du Projekte im Responsive-Webdesign-Umfeld. Wo liegen da – neben den Bildern – deiner Meinung nach die größten Probleme?

Sven Wolfermann: Es gibt natürlich eine Reihe von Problemen, die auf Webworker zukommen, wenn es um Responsive Webdesign geht. Das betrifft nicht nur Frontend-Entwickler im speziellen, sondern das ganze Team. Alle müssen ein Verständnis dafür aufbauen, wie modernes Webdesign funktioniert. Das zieht demzufolge einen veränderten agilen Workflow nach sich, um effizient zu arbeiten und Fehler möglichst früh im Designprozess erkennen zu können und zu beheben. Technisch ist vieles möglich, aber oft lassen sich Fehler im Konzept und im Design schwerer beheben. Probleme bereiten sicher die große Varianz der Bildschirme und ihre hohe Auflösung, aber auch Performance und Content-Strategie.

Frage: Sprites dürften vor allem wegen der verschiedenen Display-Auflösungen zu Problemen führen – aber wieso nicht einfach ein zweites Icon-Sprite anlegen?

Wolfermann: Um auf dem Retina-Screen optimale Bild-Icons anzuzeigen, war schnell eine Lösung gefunden: einfach die Bilder beziehungsweise Sprites doppelt so groß anlegen. Das Problem, dass die Icons dann trotzdem nur in einer „Ansichtsgröße” vorliegen, bestand allerdings weiter. Man kann also das Icon nicht an einer anderen Stelle noch mal größer oder kleiner verwenden. Die Größe ist in Pixel gemeißelt. Icon-Fonts, also Schriften á la Dingbats, die Symbole anstelle von Buchstaben und Ziffern haben, wurden bisher als ein adäquates Mittel für skalierbare Icons eingesetzt.

Frage: Und was spricht gegen Icon-Fonts?

Wolfermann: Icon-Fonts lösen viele unserer Probleme, bringen aber auch neue mit sich. Eines der nervigsten ist sicher die Positionierung der Icons. Dazu gesellen sich Probleme wie die Zugänglichkeit oder dass diese „Buchstaben” nur einfarbig sind. Was erschwerend hinzukommt ist die Ladezeit, besonders wenn man große Icon-Font-Bibliotheken lädt, von denen man aber nur eine Hand voll Icons verwendet. Darüber hinaus werden Schriften später geladen als andere Assets und – speziell in WebKit-Browsern – die Anzeige des Textes wird solange angehalten, bis die Schrift geladen ist. Gerade mobil kann das einige Sekunden in Anspruch nehmen. Nicht zu vergessen ist, dass der Fallback für Icon-Fonts kompliziert ist. Sicherlich alles lösbar mit gewissen Aufwand, aber gefühlt ist das immer nur ein „Hack” gewesen.

Frage: Gibt es keine umfassenden und brauchbaren Alternativen?

Wolfermann: Eine gute Alternative sind SVG-Sprites. Man stelle sich vor, man erstellt Sprites wie gewohnt, die Sprite-Grafik aber nicht als PNG, sondern (mit Vektordaten) als SVG. Die kann man dann wie gewohnt als background-image mit background-position einbinden. Man kann aber noch weiter gehen. SVG-Inhalte können in modernen Browsern auch direkt in HTML integriert werden. Das hat den Vorteil, dass wir auf die SVG-Elemente mit CSS und JavaScript zugreifen und so auch Veränderungen vornehmen könnten. So kann man nicht nur Transitions und Animationen verwenden, man kann auch die SVG-spezifischen Eigenschaften wie stroke mit CSS verändern.

Frage: Wie so oft, will man schon fast sagen, eilt das SVG-Format zur Hilfe. Wo liegen hier weitere Vorteile?

Wolfermann: SVG bietet zudem die Möglichkeit, auf ein einzelnes Element einer ganzen Datei zu referenzieren, also einen Inhalt woanders darzustellen. Über <use xlink:href="" /> können die Inhalte ganz einfach an anderer Stelle ausgegeben werden. Die Icons können dann natürlich mehrfarbig sein und sogar SVG-Effekte verwenden. Die Einbindung ist zudem barrierefreier und semantisch korrekt. Weiterhin ist die Positionierung der Icons zum Text wesentlich verlässlicher.

Frage: SVGs lassen sich also intern und extern referenzieren – wozu rätst du persönlich?

Wolfermann: Extern natürlich. Das ist wie bei CSS oder JavaScript – extern referenzierte Dateien lassen sich cachen. Genauso ist es mit SVG, die Datei wird nur einmal geladen und dann in den Browsercache geworfen. Wenn man den Code der SVG-Datei intern einbindet, lädt man den Overhead bei jedem Seitenaufruf. Außerdem muss man darauf achten, dass dann die Sprite-Ebenen im sogenannten <defs>-Bereich liegen, da er nicht im Browser angezeigt wird. Sonst hat man die Icons doppelt in der Seite.

Frage: Gibt es Möglichkeiten, das zu automatisieren?

Wolfermann: Wie so oft ist der beliebte Ausspruch von Webentwicklern „dafür gibt es doch sicher ein Grunt-Modul!?” auch hier zutreffend. SVG-Store bietet die Möglichkeit, aus einzelnen SVG-Dateien ein Icon-Sprite zusammenzusetzen. Grunt-Iconizer kann das ebenfalls – und noch mehr. Das bekannte Modul Grunticon wird demnächst auch die Option für diese SVG-Sprites haben. Außerdem gibt es bereits Gulp-Module. Und auch der Online-Service Icomoon bietet die Möglichkeit, aus den gewählten Icons ein SVG-Sprite oder ein Icon-Font zu erstellen.

Frage: Das klingt nach der perfekten Allround-Lösung, oder gibt es noch einen Haken?

Wolfermann: Das größte Problem ist, man ahnt es vielleicht schon, der Internet Explorer. Obwohl der IE in den letzten Jahren zu Chrome und Firefox aufgeschlossen hat, können IE9-11 keine extern verlinkten SVG-Elemente mit <use> laden. Die JS-Library SVG4Everybody hilft hierbei und stellt gleichzeitig noch den Fallback für Browser, die SVG nicht unterstützen bereit.

Frage: Was ist deiner Meinung nach nun das geringere Übel?

Wolfermann: SVG-Icons sind die bessere Wahl, da sie vielseitiger sind. Arbeiten aber Redakteure im , die dann „mal schnell einen Text mit Icons ausstatten sollen”, ist die herkömmliche Variante mit Icon-Fonts sicher besser. Man sollte also abwägen, es ist nicht zwingend ein Für und Wider, sondern eine gute Ergänzung zum jetzigen Vorgehen.

Grundsätzlich sehe ich das immer so: Wenn eine Technik für 90 Prozent der Browser super funktioniert und sie meine Arbeit leichter macht, setze ich sie auch ein. Wenn ich mir für zehn Prozent der Browser (oder je nach Projekt noch weniger) dann einen sinnvollen Fallback überlegen muss, ist das okay. Das hindert mich aber nicht daran, die restlichen 90 Prozent der Browser optimal zu bedienen.

WebTech Conference: Jetzt anmelden und Android-Tablet erhalten

Alle Teilnehmer der WebTech Conference erhalten freien Zugang zur parallel stattfindenden International PHP Conference – zudem erhält man bei Anmeldung bis 25. September ein Android-Tablet geschenkt und spart mit den Frühbucherpreisen.

Alle Speaker der WTC im Überblick!

]]>
t3n Redaktion