t3n News Entwicklung

WebTech Conference 2014: „Alle müssen ein Verständnis aufbauen, wie modernes Webdesign funktioniert“ [Sponsored Post]

WebTech Conference 2014: „Alle müssen ein Verständnis aufbauen, wie modernes Webdesign funktioniert“ [Sponsored Post]

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.

WebTech Conference 2014: „Alle müssen ein Verständnis aufbauen, wie modernes Webdesign funktioniert“ [Sponsored Post]

(Quelle: WebTech Conference)

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!

2 Antworten
  1. von Peter Löbel am 17.09.2014 (19:45 Uhr)

    Es ist schon sehr schade. SVG wird zwar von fast allen neueren Browser recht ordentlich unterstützt fristet aber meist nur ein Schattendasein.

    Dabei ist SVG für spezielle Anforderungen fast unschlagbar.
    Gut, nicht gerade 100 Prozentig responsive, doch wo gibt es das schon zu 100%.

    Ein interessante Variantefür den Einsatz von SVG gibt es hier:

    http://www.flexible-editorial-design.com

    Antworten Teilen
  2. von smaster am 18.09.2014 (10:08 Uhr)

    Buy Essay Papers Online! Unique essay writing services!

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Responsive Webdesign
Responsive Webdesign: 18 kostenlose Tools und Extensions zum Testen deiner Seite
Responsive Webdesign: 18 kostenlose Tools und Extensions zum Testen deiner Seite

Beim Responsive Webdesign können Tools und Test-Werkzeuge viel Zeit sparen. Das einfache Umschalten zwischen Viewport-Größen vereinfacht die Arbeit enorm. Wir stellen euch 18 kostenlose Tools, … » weiterlesen

Responsive Design: Zehn kostenlose Webdesign-Templates
Responsive Design: Zehn kostenlose Webdesign-Templates

Das Web findet längst nicht mehr nur auf dem Desktop statt und so ist es kein Wunder, dass Responsive Design in aller Munde ist. Damit passen sich die Webseiten dem Endgerät des Besuchers an und … » weiterlesen

Für Touch, Tap und Fernbedienung: So geht Usability-Optimierung für Responsive Webdesign
Für Touch, Tap und Fernbedienung: So geht Usability-Optimierung für Responsive Webdesign

Wenn eine Webseite auf allen Geräten – vom Smartphone über den Desktop bis zum Smart TV – optimal dargestellt werden soll, kommt heute Responsive Webdesign zum Einsatz. Doch auch das beste … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?