Responsive Webdesign | t3n News News, Infos, Tipps und aktuelle Artikel zu Responsive Webdesign 2014-10-14T16:30:24Z t3n Redaktion http://t3n.de/tag/responsive-webdesign 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
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.

]]>
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
FocusPoint: jQuery-Plugin für fokales Cropping http://t3n.de/news/focuspoint-jquery-plugin-fuer-565810/ 2014-09-08T07:33:43Z
Der Einsatz von Bildern im Responsive Webdesign bringt einige Herausforderungen mit sich. FocusPoint hilft dabei, den wichtigsten Bildausschnitt immer im Vordergrund zu halten. Wir stellen das …

Der Einsatz von Bildern im bringt einige Herausforderungen mit sich. FocusPoint hilft dabei, den wichtigsten Bildausschnitt immer im Vordergrund zu halten. Wir stellen das jQuery-Plugin kurz vor.

Webseiten haben schon seit langem kein feststehendes Layout mehr. Mit Responsive Webdesign haben Webworker die Möglichkeit, hochdynamische Webseiten zu schaffen, die sich jeder Geräteklasse anpassen können. Die zahlreichen Möglichkeiten bringen aber auch einige Herausforderungen mit sich – eine davon ist der Umgang mit Bildern. Mit Responsive Images stehen serverseitige Techniken zur Verfügung, um Bilder der Gerätegröße anzupassen. Ein Problem behebt eine automatische Lösung jedoch meistens nicht: den Bildausschnitt.

Bilder in responsiven Webseiten können durch die Skalierung auf die entsprechende Viewport-Größe schnell ihre Wirkung verlieren und aus dem Kontext gerissen werden. Focalpoint.js sagt dieser Problematik den Kampf an.

Wie FocusPoint funktioniert

FocusPoint Beispiel
Ohne Fokuspunkt können Bilder in responsiven Layouts schnell aus dem Kontext gerissen werden. (Grafik: FocusPoint)

Die Grundidee von FocusPoint ist, den wichtigsten Punkt eines Bildes – den so genannten „focal point“ – immer sichtbar zu lassen, egal wie das Bild durch die Änderungen am Layout der Webseite skaliert werden sollte. Hierfür benötigt FocusPoint nur die Koordinaten dieses Punktes und arbeitet dann im Hintergrund, um sicherzustellen, dass er nie „ausgecroppt“ wird.

FocusPoint Koordinatensystem
FocusPoint errechnet ein koordinatensystem mit dem der Fokuspunkt des Bildesbestimmt werden kann. (Grafik: FocusPoint)

FocusPoint unterteilt das Bild mit zwei Achsen, die von der Mitte des Bildes ausgehen. So entsteht ein Koordinatensystem mit vier Bereichen. Durch Angabe von positiven (rechts, oben) oder negativen (links, unten) X- und Y-Werten kannst du jetzt den Fokuspunkt des Bildes bestimmen.

FocusPoint einsetzen

Für die Verwendung von FocusPoint brauchst du (1.9+) und die FocusPoint-JavaScript- sowie CSS-Dateien.

<link rel="stylesheet" href="focuspoint.css">
<script src="jquery.js"></script>
<script src="focuspoint.js"></script>

Mit dem nachfolgenden Markup kannst du die Größe des Bildes und die Position des Fokuspunktes definieren.

<div class="focuspoint"
data-focus-x="0.331"
data-focus-y="-0.224"
data-image-w="400"
data-image-h="300">
<img src="image.jpg" />
</div>

Das Setzen von data-image-w und data-image-h ist zwar optional, aber empfehlenswert, da das Koordinatensystem sonst erst dann berechnet werden kann, wenn das Bild geladen wurde, was dazu führen kann, dass der korrekte Bildausschnitt erst nach dem Laden sichtbar wird. Wenn dir die Berechnung des Fokuspunktes zu kompliziert ist, kannst du das Fokuspunkt Helper-Tool von FocusPoint benutzen.

Abschließend muss FocusPoint initialisiert werden. In der Regel würde das innerhalb der $(document).ready()-Funktion passieren.

$('.focuspoint').focusPoint();

Mit der adjustFocus()-Methode kannst du den Fokuspunkt jederzeit neu berechnen lassen. Das ist vor allem wichtig, wenn du ausgeblendete Elemente nach dem ersten Fokussieren sichtbar machst. Da diese Elemente keine Größe haben, wird der Fokuspunkt nicht korrekt sein. mit adjustFocus() behebst du dieses Problem.

Im GitHub-Repository von FocusPoint findest du das jQuery-Plugin und einige Beispiele für die Anwendung von FocusPoint.

]]>
Ilja Zaglov
PHP-basierte Foren sind sooooo 2000! NodeBB legt sich mit Platzhirschen wie vBulletin und phpBB an http://t3n.de/news/nodebb-nodejs-forum-557263/ 2014-07-15T13:24:48Z
Mit NodeBB existiert eine quelloffene Foren-Software auf Basis von NodeJS. Die moderne vBulletin-Konkurrenz kommt im responsiven Webdesign und unterstützt Theming und Plugins.

Mit NodeBB existiert eine quelloffene Foren-Software auf Basis von NodeJS. Die moderne vBulletin-Konkurrenz kommt im responsiven und unterstützt Theming und .

NodeBB: Die freie Foren-Software setzt auf NodeJS und Redis. (Screenshot: NodeBB)
NodeBB: Die freie Foren-Software setzt auf NodeJS und Redis. (Screenshot: NodeBB)

Open-Source: NodeBB ist eine Foren-Software auf NodeJS-Basis

Bevor Soziale Netzwerke wie Facebook oder Twitter einen Großteil der öffentlich geführten Diskussion im Web auf ihre Plattformen gezogen haben, waren es vor allem Web-Foren, auf denen über die unterschiedlichsten Themen diskutiert wurde. Mit am häufigsten setzten Forenbetreiber bisher auf die proprietäre Lösung vBulletin und die Open-Source-Software phpBB. Beide entstanden um das Jahr 2000 herum und wurden in programmiert.

Egal ob Nutzer proprietäre Software ablehnen oder der teilweise recht alten PHP-Codebasis verschiedener Foren-Software skeptisch gegenüberstehen, wirklich moderne Alternativen gibt es kaum am Markt. Eine Ausnahme ist NodeBB, eine Foren-Software auf NodeJS-Basis. NodeBB Stammt von einem gleichnamigen kanadischen Startup und steht unter der freien GPL-Version-3-Lizenz.

NodeBB: Die Foren-Software erlaubt bald auch Push-Benachrichtigungen über Pushbullet. (Screenshot: NodeBB)
NodeBB: Die Foren-Software erlaubt bald auch Push-Benachrichtigungen über Pushbullet. (Screenshot: NodeBB)

NodeBB: Das kann die NodeJS-Foren-Software

NodeBB unterstützt alle Funktionen, die man von einem Web-Forum erwarten würde. Außerdem lassen sich neue Inhalte in Echtzeit darstellen und das Foren-Frontend funktioniert dank responsivem Design auch auf mobilen Endgeräten ohne Probleme. Das eigentliche Aussehen des Forums lässt sich mittels Themes anpassen. Eine besonders große Anzahl fertiger Themes gibt es allerdings noch nicht.

Auch das Standard-Theme mit seinem an Pinterest angelehnten Look ist sicherlich nicht jedermanns Sache. In der kommenden Version 0.5.0 soll daher ein zusätzliches Theme beiliegen. Außerdem ist eine Unterstützung der Pusbullet-API geplant, damit Forenbetreiber ihren Nutzern Push-Nachrichten zukommen lassen können. Wer sich an der Weiterentwicklung der Open-Source-Software beteiligen will, kann das auf der GitHub-Seite von NodeBB tun.

Das Startup hinter der Foren-Software bietet außerdem Hosting-Pakete an. Die monatlichen Kosten dafür beginnen bei 35 US-Dollar. Wer sich zwar für eine moderne Foren-Software interessiert, aber lieber Ruby on Rails einsetzen will, sollte einen Blick auf unseren Artikel über Discourse werfen.

]]>
Kim Rixecker
Doodle-Alternative Survmetrics: So schön können Umfragen sein http://t3n.de/news/richtig-schicke-umfragen-survmetrics-556098/ 2014-07-08T09:05:47Z
Mit Survmetrics lassen sich leicht Online-Umfragen erstellen. Die können vor allem optisch überzeugen und funktionieren dank responsivem Design auch auf Tablets und Smartphones.

Mit Survmetrics lassen sich leicht Online-Umfragen erstellen. Die können vor allem optisch überzeugen und funktionieren dank responsivem auch auf und .

Mit Survmetrics lassen sich auf einfache Art und Weise ansehnliche Umfragen erstellen. (Screenshot: t3n)
Mit Survmetrics lassen sich auf einfache Art und Weise ansehnliche Umfragen erstellen. (Screenshot: t3n)

Schicke Online-Umfragen mit Survmetrics

Tools zur Erstellung von Online-Umfragen gibt es viele. Um sich von der Konkurrenz abzuheben, setzt Survmetric vor allem auf ein schickes Äußeres. Die Bedienung bleibt dabei kinderleicht. Der Nutzer benötigt keinerlei spezielle Kenntnisse. Dank Templates und vielfacher Anpassungsmöglichkeiten lassen sich im Baukastenprinzip dennoch sehr ansehnliche Umfragen erstellen.

Die Umfragen können bei Survmetrics aus mehreren Elementen bestehen. Beispielsweise könntet ihr mit einer Multiple-Choice-Befragung einsteigen und eure Kunden anschließend noch dazu anhalten, eine Bewertung zu einem Thema abzugeben. Außerdem könnt ihr auch geschriebene Text-Antworten annehmen oder die Teilnehmer der Umfrage über verschiedene Bilder entscheiden lassen.

Survmetrics: Umfragen im responsiven Design

Habt ihr eure Fragen erstellt, die Schrift, die Farben und die Bilder nach eurem Gusto angepasst, könnt ihr eure Umfrage innerhalb des Tools testen. Praktischerweise steht euch hier auch eine Smartphone- und Tablet-Ansicht zur Verfügung. So bekommt ihr einen Eindruck davon, wie sich das responsive Layout auf einem mobilen Endgerät machen wird.

Eure Umfragen könnt ihr direkt über ein soziales Netzwerk oder per E-Mail teilen. Außerdem könnt ihr euch einen Embed-Code für eure Website generieren. In der kostenpflichtigen Enterprise-Version gibt es auch die Möglichkeit, einen QR-Code zur Verteilung der Umfrage zu erstellen. Zur Auswertung wiederum stehen euch verschiedene Ansichtsoptionen zur Verfügung.

]]>
Kim Rixecker
Effizient, performant und wartbar: Praktische Techniken für Responsive Webdesign http://t3n.de/magazin/praktische-techniken-fuer-responsive-webdesign-einfach-234132/ 2014-06-30T08:46:32Z
In der Praxis ist Responsive Webdesign (RWD) oft eine Herausforderung. Mit entsprechenden Techniken können Designer aber effizientes, performantes und wartbares RWD realisieren, ohne Kompromisse bei …

In der Praxis ist (RWD) oft eine Herausforderung. Mit entsprechenden Techniken können Designer aber effizientes, performantes und wartbares RWD realisieren, ohne Kompromisse bei der User Experience einzugehen. Dieser Artikel fasst einige dieser Techniken zusammen.

Bei Responsive Webdesign geht es um eine ganzheitliche Betrachtung aller relevanter Interfaces. Für ein optimales Ergebnis auf allen Geräte stehen verschiedene Techniken zur Verfügung.

Icon Fonts

Mit der Vorstellung von Retina Displays ist die Auflösung von Grafiken zu einer Herausforderung geworden. Ein Lösungungsansatz besteht im Einsatz von mehreren Versionen einer Grafik – abhängig von der Bildschirmauflösung (PPI). Dieser Ansatz ist aber hauptsächlich beim Einbinden von Content-Grafiken mit serverseitigem Handling der Bildformate praktikabel und für die Gestaltung von responsiven User-Interfaces nicht empfehlenswert. Mit Icon-Fonts kann man dieses Problem umschiffen. Sie werden einfach als Schriften eingebunden. Da sie ebenfalls vektorbasiert sind, ist die Darstellung auflösungsunabhängig und der Einsatz im User-Interface entsprechend einfach. Gegenüber Einzelgrafiken haben Icon Fonts den Vorteil, dass der Browser lediglich eine Font-Datei und nicht zahlreiche Einzel-Icons laden muss. Das reduziert den Overhead-Traffic und ermöglicht die verlustfreie Skalierung und einfache Style-Anpassungen.

Focal Cropping

Beim Skalieren von Bildern rutschen manchmal wesentliche Elemente aus dem für den Benutzer sichtbaren Bereich. Das Motiv verliert so jeglichen Sinn. Es gibt verschiedene Ansätze, diese Probleme anzugehen. Focal Point ist einer davon, bei dem mit purem CSS ein für das Bild essenzieller Punkt definiert wird. Sollte das Bild beschnitten werden, fungiert dieser Punkt als Zentrum. Hierfür sucht man den Punkt des Bildes, der fokussiert werden soll, aus und gibt den Offset von der Mitte des Bildes via Klassendefinition an das Element weiter.

HTML

<div class="focal-point right-3 up-3">
<div><img xsrc="guy.jpg" alt=""></div>
</div>

Listing 1

Dateigröße gering halten: Compressive Images

Greift ein Webdesigner im Responsive Design nicht auf responsive Images zurück, wird im Zweifel an viele Geräte eine zu große Version der Grafik ausgeliefert. Daher sollte dieser zumindest sicherstellen, dass die Dateigröße möglichst gering ausfällt. Mit jpeg-Mini kann die Dateigröße von Bildern deutlich reduziert werden. TinyPNG bietet denselben Dienst für PNG-Grafiken und liefert optisch verlustfreie PNG-Grafiken mit bis zu 70 Prozent der ursprünglichen Dateigröße zurück.

Conditional Loading

Conditional Loading kann als Erweiterung zum Mobile-First-Ansatz gesehen werden. Das ausgelieferte Grundlayout beschränkt sich hierbei auf das für das Mobilgerät notwendige Markup. Durch eine Abfrage, die analog zu den im Stylesheet definierten Media-Queries erfolgen kann, wird dann zusätzlicher HTML-Code nachgeladen, der nur für das jeweilige Endgerät relevant ist. Richtig angewandt resultiert diese Technik in einer enormen Performance-Steigerung.

HTML/JavaScript

<div>
<p>Hier könnte ein Artikeltext stehen, der für alle Geräte dargestellt werden soll.</p>
</div>
<script type=“text/javascript“>
if($(window).width()>=600){
	$(‚body’).append(load_site_module(‚friendlist’));
}
</script>

Listing 2

Das obige Listing zeigt eine Beispielimplementierung für Conditional Loading, bei der in der Basis-Version der Seite nur ein Artikeltext ausgeliefert und bei entsprechender Bildschirmgröße zusätzlicher nur für diese Größe gedachter Content nachgeladen wird. Auf diese Weise werden nur die benötigten Komponenten für die jeweilige Gerätegröße geladen und müssen nicht im Stylesheet bedacht werden. Auch die zu übertragende Datenmenge und Renderzeit kann so spürbar reduziert werden.

Wie bei jeder Technik, gilt abzuwägen, wann der Einsatz sinnvoll ist. Zu viele nachgeladene Daten resultieren in übermäßigem HTTP-Overhead. Auch das Ausliefern von vollständig unterschiedlichen Inhalten für verschiedene Auflösungen sollte im Hinblick auf User-Experience und SEO mit Bedacht erfolgen.

Conditional CSS

Die Conditional-Loading-Technik funktioniert gut mit Pixelwert-basierten Media-Queries. Diese Abfragen können in einigen Szenarien jedoch ungenau sein, denn einige Browser berechnen den Scrollbalken für die screen-width unterschiedlich, sodass Pixelwerte Probleme bei der Gestaltung der Breakpoints für ein Design bereiten können. Die Lösung besteht im Einsatz von „em“-Werten. Diese lassen sich jedoch nicht ohne weiteres mit JavaScript abfragen, um dann die entsprechenden Inhalte und das Markup für diese Media Query nachzuladen.

Mit Hilfe von Pseudo-Klassen lässt sich allerdings auch dieses Problem umgehen. Wenn Webdesigner dem body-Tag des Dokuments ein Pseudoelement anhängen, können sie mit der content-Eigenschaft einen beliebigen und für JavaScript lesbaren Wert übergeben.

HTML/JavaScript

@media all and (min-width: 45em) {
body:after {
content: 'widescreen';
display: none;
}
}
var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
if (size == 'widescreen') {
// Load some more content.
}

Listing 3

Vertical Media Queries

Vertical Media Queries sind ein weiterer Schritt in Richtung „Mobile First“. Bei diesem Ansatz wird zunächst das gemeinsame Styling definiert und anschließend mit Media Queries um zusätzlichen Eigenschaften ergänzt. Das folgende Listing zeigt, wie man für zwei Breakpoints eines Designs unterschiedliche Überschriften-Styles definieren kann.

CSS

h1 {
font-family: Arial, Helvetica, sans-serif;
font-weight:normal;
}
@media screen and (min-width: 700px){
h1{
 font-size:18px;
  line-height:24px;
}
}
@media screen and (max-width:699px){
 h1 {
  font-size:14px;
  line-height:16px;
}
}

Listing 4

In vielen Fällen kann das in deutlich kürzerem und übersichtlicherem CSS resultieren – schließlich ist es einfacher, Elemente-Eigenschaften hinzuzufügen, als fertigen Layouts Eigenschaften wegzunehmen. Auch auf die Rendering-Geschwindigkeit dürfte sich diese Technik ab einer gewissen Komplexität des Stylesheets positiv auswirken.

responsive webdesign jpeg mini
Praktisch für Grafiken: Dienste wie JPEGmini ermöglichen eine deutliche Reduzierung von Bilddateien.

Media Queries Splitting

Die Arbeit mit Responsive Webdesign zwingt Webworker dazu, in vielen Dimensionen gleichzeitig zu denken und diese im CSS festzuhalten. Bei zunehmender Anzahl von Breakpoints und Gestaltungselementen nimmt die Komplexität des Stylesheets exponenziell zu und die Übersicht dementsprechend ab. Um nicht in endloser Suche nach den jeweiligen Code-Fragmenten zu verzweifeln, empfiehlt sich das Aufteilen von Media Queries. Teilt man das Styling für Artikel und Artikelübersicht in verschiedene Media Queries, resultiert das in einem deutlich besser wartbaren Code und mehr Übersicht bei notwendigen Änderungen.

Fazit

Responsive Webdesign ist ein spannender, aber vergleichsweise junger und sich ständig weiterentwickelnder Bereich, der Webworker noch sehr lange Zeit begleiten wird. Die in diesem Artikel beschriebenen Techniken sind erst der Anfang der zu erwartenden Entwicklung, die uns in Zukunft für die Gestaltung von responsiven und performanten Websites zur Verfügung stehen werden: eine notwendige Entwicklung in Anbetracht der sich ständig weiterentwickelnden Medienlandschaft mit verschiedensten Bildschirmgrößen, Formaten, Auflösungen und Endgeräten.

]]>
Ilja Zaglov
Responsive Design braucht gute Workflows: Tipps und Tools für die Prozessoptimierung http://t3n.de/magazin/responsive-design-prozess-tools-ansaetze-responsive-234137/ 2014-06-18T09:40:06Z
Responsive Design ist mehr als flexible Layouts und eine neue Content-Strategie. Damit bei der steigenden Komplexität wirklich gute Lösungen entstehen, ohne dass die Kosten explodieren, braucht es …

Responsive Design ist mehr als flexible Layouts und eine neue Content-Strategie. Damit bei der steigenden Komplexität wirklich gute Lösungen entstehen, ohne dass die Kosten explodieren, braucht es vor allem neue Denk- und Herangehensweisen: einen Responsive Workflow mit entsprechenden Tools.

Früher war die Web-Nutzung recht vorhersehbar: Ein Nutzer saß an seinem Schreibtisch vor dem Rechner – entweder im Büro oder zu Hause, aber auf jeden Fall mit konstanter Bandbreite. Vielleicht hatte er einen modernen Browser, vielleicht auch nicht. In der Regel blickte er aber auf einen großen Monitor. Diese Zeiten sind vorbei: User gehen heute überall und mit den unterschiedlichsten Geräten und Bandbreiten ins Internet. Vor allem global betrachtet gibt es Regionen, in denen die Menschen sogar ausschließlich per Mobilfunk im Internet sind, da die Festnetzleitung viel zu teuer ist. In beinahe jedem Fall gesellen sich jedoch zu den klassischen Desktop-Browsern mittlerweile mehrere mobile Plattformen und die unterschiedlichsten Browser.

Die Flut der Viewports

Dabei steigt allein die Menge der unterschiedlichen Bildschirmgrößen rasant: Ließen sich Smartphones, Tablets und Desktops bis vor zwei Jahren noch recht eindeutig definieren, so zeigte spätestens die Einführung des iPhone 5, dass es selbst im homogenen iOS-Lager unterschiedliche Bildschirmgrößen geben kann. Von Android ganz zu schweigen.

Im Tablet-Bereich gibt es noch mehr Varianz in der Ausgabengröße. So bieten die ersten Tablets 1.600 Pixel im Landscape-Modus – sind also größer als die meisten normalen Desktop- oder Notebook-Screens. Sicherlich kann man sich auf drei Stufen für die Haupt-Breakpoints einigen – also die Umbruchpunkte, an denen sich das Responsive Design einer neuen Größe anpasst. Aber diese Breakpoints sollten sich nach dem Inhalt richten, nicht nach den Geräten.

So ist es fast unmöglich, alle Eventualitäten im Vorfeld zu bedenken. Wer seine Website relaunchen will, kann sich ja zumindest seine bisherige Website-Statistik anschauen, um Rückschlüsse für die Planung und die Designentwicklung zu ziehen. Doch viele neue Projekte können nur auf Annahmen bezüglich Bildschirmgröße, Browser-Eigenschaften und Verbindungsgeschwindigkeit vertrauen.

Flexible Layouts erfordern flexiblen Workflow

Diese Ungewissheiten haben Folgen für Konzeption und Umsetzung von Websites. Der klassische Workflow stößt bei diesen komplexen Anforderungen schnell an seine Grenzen. Denn komplette Designs für mehrere Viewports in Photoshop zu gestalten, ist aufwendig, und auch die Umsetzung der Änderungswünsche von Kunden wird dadurch immer zeit- und kostenintensiver.

Dazu kommt, dass niemand wirklich alle Komplikationen in einem Responsive-Webdesign-Prozess vorhersehen kann: Neue Devices können erscheinen, Browser-Bugs in verschiedenen Betriebssystemen auftauchen. Diesen Mehraufwand muss letztlich eine Partei tragen – doch der Kunde möchte nicht zu viel bezahlen und der Dienstleister keine unbezahlte Arbeit verrichten. Schon bei der Angebotsformulierung kann das zu einem heiklen Punkt werden.

responsive design prozess style tiles
Das Online-Tool Style Tiles hilft dabei, möglichst früh Responsive Designs zu testen: Eine PSD-Vorlage unterstützt Designer beim Erstellen der Design-Kacheln. So lassen sich bereits mit wenig Aufwand Layouts erstellen.

Ein flexibler Workflow erleichtert es, auf möglichst viele Eventualitäten reagieren zu können und damit dem steigenden Aufwand zu begegnen. Bereits die Design- und Konzeptionsphase sollte flexibler gestaltet sein. Das bedeutet, dass Responsive-Web-Designer ihre Design-Kompositionen schon frühzeitig als HTML-Dummy umsetzen und testen, um nicht erst zum Schluss festzustellen, dass das Konzept so nicht funktioniert.

Es gibt mittlerweile auch immer mehr Tools, die einen solchen Prozess unterstützen: Mit Style Tiles können Designer beispielsweise Interface-Layouts bauen und dem Kunden zeigen, ohne viel Zeit in die Erstellung mehrerer Photoshop-Layouts stecken zu müssen. Auf diese Weise können Kreative modularer arbeiten und früh das Feedback ihrer Kunden zum Designkonzept erhalten.

Mobile First

Die Idee von „Mobile First” diskutieren Webdesigner schon länger. Dabei beginnt die Planung, Konzeption und Umsetzung mit dem Fokus auf mobile Geräte. Viele Designer missverstehen dies als Aufforderung, zunächst Designs für die kleinste Bildschirmauflösung zu erstellen (Smartphone First). Das ist zwar auch ein richtiger und wichtiger Ansatz, da man sich dabei auf das Wesentliche konzentriert, also auf die Frage: Welche Inhalte sind wichtig und gehören deshalb in den Sichtbereich (Viewport)?

Doch ist es aktuell schwieriger mit dem Design „Smartphone First“ zu starten. Einerseits haben Designer selten Erfahrung im „Design für Touch”, zudem können sich viele Kunden (noch) nicht vorstellen, wie sich das Design bis zur Desktop-Ansicht entwickelt. Entscheidend ist jedoch, dass die Designer von Anfang an die Bedienung per Touch im Hinterkopf haben.

Content First

Technisch gesehen sollte man hingehen von „Mobile first“ ausgehen – also die Styles erst für den kleinsten Bildschirm umsetzen und dann mit Hilfe von Media Queries für weitere Ansichten anpassen. Für die Konzeption des Contents ist der Mobile-First-Ansatz besonders wichtig. Der Grundsatz hierbei lautet: Je kleiner das Gerät, desto wichtiger ist es, die Inhalte möglichst schon am Anfang der Website zu zeigen.

Dazu muss der Designer aber bereits wissen, welchen Content es gibt – also in „Content First“ denken. Das heißt nicht, dass bereits zur Designphase die genauen Texte stehen müssen. Doch es sollte klar sein, welche Inhaltselemente es geben kann oder wird. Wer hier tiefer einsteigen möchte, dem sei das Buch „Responsive Design Workflow” von Stephan Hay empfohlen.

Designing im Browser

Durch die weitreichende Unterstützung von HTML5 und CSS3 lassen sich einige Design-Aufgaben mittlerweile auch direkt im Browser erledigen. Das hat gegenüber den herkömmlichen Layout-Programmen den Vorteil, dass das Prototyping im Browser meist schneller ist – und Änderungen ebenfalls: Mit HTML oder CSS kann man beispielsweise Logos viel schneller in allen Kompositionen austauschen als in Photoshop. Genauso sieht es zum Beispiel mit der Änderung der Schriftgrößen im gesamten Dokument aus.

Designer müssen Photoshop nicht komplett aufgeben. Für die ersten Schrift- und Layout-Kompositionen ist die traditionsreiche Software sicherlich eine gute Wahl (wie bei Style Tiles). Entscheidend ist jedoch, dass Designer ihre Entscheidungen gemeinsam mit ihren Entwicklern treffen und auch erst, wenn die Layouts im Browser tatsächlich funktionieren.

responsive design prozess thinkin tags
Thinkin' Tags ist ein Rapid-Prototyping-Tool, mit dem man entweder das CSS-Framework YAML4 nutzen kann, ein anderes Framework oder gar keines.

HTML-Prototyping: Edge Flow und Thinkin' Tags

Es gibt zwei Tools, die die Browser-Tauglichkeit von Layouts sicherstellen: Zum einen möchte Adobe den Responsive-Design-Prozess mit seinem neuen Tool „Edge Reflow” unterstützen (Preview ist derzeit noch kostenlos). Dabei handelt es sich um eine Art Hybrid bestehend aus Illustrator, Fireworks und Dreamweaver – nur mit wesentlich geringerem Funktionsumfang: Designer können ihr Web-Layout mit Hilfe simpler Elemente zusammenstellen und Reflow schreibt im Hintergrund den HTML- und CSS-Code. Dieser Code reicht zwar für die Browser-Vorschau, aber sicherlich nicht für die Produktivsysteme – Edge Reflow ist eben ein Design- und kein Entwicklungstool.

Einen Schritt weiter geht „Thinkin' Tags”, das neue Rapid-Prototyping-Tool des freien Entwicklers Dirk Jesse. Auch mit diesem kann ein Webdesigner seine Website oder Web-App visuell prototypen. Allerdings liefert Thinkin' Tags tatsächlich produktionsfähigen Code, der sich herunterladen lässt. Mit der Responsive-View lässt sich ein erstellter Prototyp zudem sofort in verschiedenen Viewport-Breiten testen. Obwohl sich das Tool noch im Alpha-Stadium befindet, hat es schon einen großen Funktionsumfang und ermöglicht bereits das Abspeichern und Verwalten von mehreren Projekten. Designer können Thinkin' Tags kostenlos testen.

Testing: Edge Inspect, Ghostlab und MIHTool

Trotz dieser Tools sollte man so früh wie möglich auf echten Geräten testen – und zwar nicht nur das Layout (brechen die Layout-Container wie erwartet um?), sondern auch die Funktionen und Performance. Letztere kann gerade auf älteren und schwächeren Geräten viel schlechter ausfallen als auf modernen Smartphones und Tablets. Ein sehr hilfreiches Tool für das Remote Testing und Debugging ist Adobes „Edge Inspect“, ebenfalls ein Produkt aus der Adobe Edge Familie (ursprünglich „Shadow“ genannt).

Mit dem Tool können Webdesigner ihre Layout-Entwicklungen vom Desktop-Browser (Chrome) aus gleichzeitig auf mehreren Geräten testen. Ghostlab oder MIHTool bieten ähnliche Funktionen. Wer keinen umfangreichen Park an mobilen Geräten hat, sollte sich nach einem „Open Device Lab” umschauen, indem man eine Website oder App auf zahlreichen Geräten testen kann.

Fazit

Die bisherigen Workflows funktionieren in den meisten Responsive-Webdesign-Projekten nicht gut: Mehr Flexibilität ist gefragt. Noch gibt es nur wenige Tools, die diesen Prozess tatsächlich hilfreich unterstützen. Doch sind es auch gar nicht nur die Tools, die sich ändern müssen. Viel mehr verlangen Responsive Designs und die immer komplexeren Anforderungen eines extrem heterogenen Device-Marktes, dass sich die Arbeitsabläufe in den Agenturen – also auch die Menschen – ändern. Das setzt vor allem ein neues (Selbst-)Verständnis voraus und den echten Willen, etwas Neues im Design-Prozess zu wagen. Dass das nicht von heute auf morgen funktioniert ist klar. Schließlich ist die Einführung neuer Prozesse ein ganz eigener Prozess.

]]>
Sven Wolfermann
Google Analytics, Responsive Webdesign mit WordPress und mehr: 8 neue Bücher, die in keinem Bücherregal fehlen sollten http://t3n.de/magazin/google-analytics-responsive-webdesign-wordpress-acht-neue-buecher-235859/ 2014-05-28T08:41:07Z
Aktuelle Fachliteratur kann man nie genug haben, und laufend erscheint spannender Lesestoff. Deshalb stellen wir euch hier acht neue Bücher unter anderem aus den Bereichen Technik, Marketing und …

Aktuelle Fachliteratur kann man nie genug haben, und laufend erscheint spannender Lesestoff. Deshalb stellen wir euch hier acht neue Bücher unter anderem aus den Bereichen Technik, und Design vor.

t3n 36 content teaser

Social-Media-Marketing im B2B

buecher social media marketing im b2b e1401265993813Social-Media-Marketing ist mittlerweile für die meisten Unternehmen eine selbstverständliche Notwendigkeit. Das heißt: für B2C-Unternehmen. „Im B2B-Sektor sieht die Sache noch ganz anders aus“, findet Online-Marketing-Berater und -Trainer Felix Beilharz. Und so hat er monatelang Unternehmen analysiert, Interviews geführt, Studien gewälzt und Best-Practice-Beispiele zusammengetragen: Über 400 Seiten sind so entstanden, die zeigen, wie sich auch Geschäftskunden mit Hilfe von Facebook, LinkedIn, Xing & Co. gewinnen und binden lassen. Darunter sind sowohl eher allgemeine Informationen zum Thema Social Media, die für Anfänger interessant sind, als auch Inspirationen und Hands-on-Informationen für Fortgeschrittene, die sich der Konzeption, Durchführung und Evaluation von B2B-Social-Media-Kampagnen widmen.

  • Titel: Social Media Marketing im B2B
  • Autor: Felix Beilharz
  • Erscheinungsdatum: April 2014
  • Verlag/ISBN: O'Reilly/978-3-95561-558-1
  • Preis/Umfang: 34,90 Euro/408 Seiten

Geheimnisse eines JavaScript-Ninjas

buecher geheimnisse javascript ninja e1401265984418John Resig ist vor allem als Autor der jQuery-JavaScript-Bibliothek bekannt. Sechs Jahre hat er an seinem neuen Buch gearbeitet – nach Resigs Angaben hat es deshalb so lange gedauert, weil er sich noch tiefer in die Materie einarbeiten wollte. So ist ein fundiertes und mit knapp 500 Seiten auch sehr umfangreiches Werk entstanden, das bewährte Methoden der Entwicklung einer JavaScript-Bibliothek, anspruchsvolle JavaScript-Features und browserübergreifende Programmierung zeigt. Es beginnt mit einer Einführung in die Grundlagen der JavaScript-Programmierung, geht weiter über Entwicklungsstrategien und praktische Lösungsansätze für JavaScript-Bibliotheken und endet bei der Pflege und Wartung zukunftssicheren Codes.

  • Titel: Geheimnisse eines JavaScript-Ninjas
  • Autoren: John Resig, Bear Bibeault
  • Erscheinungsdatum: Februar 2014
  • Verlag/ISBN: mitp/978-3-8266-9714-2
  • Preis/Umfang: 34,99 Euro/472 Seiten

Foto und Video mit Raspberry Pi

buecher foto video raspberry pi e1401265973901Was hat eine Digitalkamera mit Himbeerkuchen zu tun? Na klar: Mit der einfachen und kostengünstigen Platine Raspberry Pi können selbst Hobby-Fotografen heutzutage Aufnahmen machen, die mit menschlicher Motorik allein nicht machbar wären – beispielsweise einen fallenden Wassertropfen fotografieren. Mit einer Raspberry-Pi-Kamera, einem Fernauslöserkabel und einer Digitalkamera kein Problem. Ja, die Möglichkeiten seien dann sogar so umfangreich, sagt Autor Engelhardt, dass man sich schon einen Überblick verschaffen müsse. Und genau das möchte dieses Buch bieten: Ob Highspeed- und Zeitrafferaufnahmen, Kameraschlitten, Focus Stacking, Spezialeffekte oder gar der Einsatz mit versteckter Kamera. Schritt für Schritt führt Engelhardt in die Raffinessen der Fotografie per Kommandozeile ein. Viele Fotos, Beispiel-Codes und Schemazeichnungen helfen sanft über die schwierigsten Einstiegshürden hinweg.

  • Titel: Foto und Video mit Raspberry Pi
  • Autor: E. F. Engelhardt
  • Erscheinungsdatum: Januar 2014
  • Verlag/ISBN: Franzis/978-3-645-60314-0
  • Preis/Umfang: 30,00 Euro/242 Seiten

Wie schätzt man in agilen Projekten

buecher schaetzen in agilen projekten e1401265961402Kunden, die ihr Produkt agil entwickeln lassen, aber dennoch einen möglichst konkreten Kostenvoranschlag haben wollen: eine Herausforderung, vor der Agenturen immer wieder stehen. Der Agile-Coach Boris Gloger beschreibt deshalb in seinem Buch Schritt für Schritt, wie man die Voraussetzungen für gelungene Schätzwerte bekommt: saubere Impact- und Story-Maps, Prototypen und User Stories. Er erklärt, welche Schätzspiele effizient und sicher sind und wie sich die so ermittelten Aufwände skalieren, synchronisieren und evaluieren lassen. Damit liefert er Scrum-Mastern das Handwerkszeug, um ihre agilen Projekte noch erfolgreicher und effizienter zu gestalten.

  • Titel: Wie schätzt man in agilen Projekten
  • Autor: Boris Gloger
  • Erscheinungsdatum: April 2014
  • Verlag/ISBN: Hanser Fachbuch/978-3-446-43910-8
  • Preis/Umfang: 29,99 Euro/106 Seiten

Digital Adaptation

buecher digital adaption e1401265944675Die Digitalisierung hat längst alles erfasst, und für Firmen reicht es nicht mehr, „ein bisschen etwas“ zu ändern. Doch: „Als Web-Professional stellt man oft fest, dass Unternehmen eher ein Hindernis für den digitalen Erfolg sind als eine Hilfe“, meint Paul Boag. Er arbeitet seit 1994 im Web, ist Gründer der Agentur Headscape und Autor (@boagworld). In seinem neuen Buch „Digital Adaptation“ hat er deshalb zehn Forderungen an Unternehmen gerichtet: 1. eine eigenständige Digital-Business-Funktion implementieren, 2. ein internes Digital-Team aufstellen, 3. dieses zu eigenen Visionen und Strategien ermächtigen, 4. ihm eine erfahrene Führungskraft zur Seite stellen, 5. diese in die Top-Entscheider-Gremien aufnehmen, 6. als erstes digitale Lösungen suchen, 7. diesen Prozess beschleunigen, 8. radikal die Perspektive der Kunden einnehmen, 9. niemals meinen, man hätte ein fertiges Digital-Produkt, 10. und dies alles dann noch in eine Strategie gießen. Wie das nun so ganz genau gehen soll, beschreibt Boag ausführlich in seinem wunderschön gestalteten und illustrierten Buch.

  • Titel: Digital Adaptation
  • Autor: Paul Boag
  • Erscheinungsdatum: April 2014
  • Verlag/ISBN: Smashing Magazine/978-3-94454064-1
  • Preis/Umfang: 24,90 Euro / 178 Seiten

Google Analytics

buecher google analytics e1401265932631„Es ist immer wieder erstaunlich, wie viele Websites immer noch aus dem Bauch heraus gesteuert werden. Und es ist geradezu erschreckend, wie viele Werbemaßnahmen niemals auf ihren Erfolg hin untersucht werden“, meinen die Autoren dieses neuen Titels. Zu oft fehlt wohl die Kompetenz, die Analyse-Zahlen richtig zu erheben und/oder auszuwerten. Genau hier setzt das Buch an: Es führt einerseits Analytics-Anfänger in die grundlegende Arbeit mit dem Tool ein. Andererseits liefert es aber auch Informationen zu Erweiterungen und Features für fortgeschrittene Analytics-Nutzer. Damit beantwortet das Werk Fragen wie: Warum verlassen Besucher meine Seite? Welche Werbung bringt mir tatsächlich Kunden? Was suchen meine Nutzer und was teilen sie auf Twitter und Facebook? Wie kann ich meinen Bestellprozess optimieren? Oder: Welche Wege nehmen meine Besucher? Der dicke Wälzer dürfte somit Antworten zu allen drängenden Fragen liefern, sodass Website-Betreiber damit deutlich mehr aus dem Analytics-Tool herausholen können.

  • Titel: . Das umfassende Handbuch
  • Autoren: Markus Vollmert, Heike Lück
  • Erscheinungsdatum: April 2014
  • Verlag/ISBN: Galileo Computing/978-3-8362-2731-5
  • Preis/Umfang: 39,90 Euro/679 Seiten

Think Content!

buecher think content e1401265919363Mach gute Inhalte und alles wird gut! So einfach könnte die Botschaft des Content-Marketings lauten – und doch ist die Umsetzung oft so schwierig. Ein Blick in die Blogs, Online-Magazine, auf die Webseiten und Social-Media-Kanäle von Unternehmen reicht, um zu erkennen: Selbst wenn das Prinzip vielleicht in den Köpfen angekommen ist, realisiert ist es längst nicht überall. Das neue Buch von Miriam Löffler könnte dies ändern: Die gut 600 Seiten geben einen wirklich umfassenden Überblick über das, was für eine Content-Marketing-Strategie wichtig ist. Von der Bestandsaufnahme und dem Content-Audit über Planung, Produktion und Management bis hin zum Content-Controlling und -Marketing. Löffler liefert Tipps für die Ideenfindung, das Storytelling, die Suchmaschinenoptimierung und die virale Kraft von Inhalten. Sie gibt praktische Anregungen in Form von Best-Practice-Beispielen und Hilfestellung beim Web-Texten. Umfassender ließe sich das Thema wohl kaum darstellen.

  • Titel: Think Content! Grundlagen und Strategien für erfolgreiches Content-Marketing
  • Autorin: Miriam Löffler
  • Erscheinungsdatum: April 2014
  • Verlag/ISBN: Galileo Computing/978-3-8362-2006-4
  • Preis/Umfang: 29,90 Euro/627 Seiten

Responsives Design mit WordPress

buecher responsives design mit wordpress e1401265631974Alle reden von responsivem Design im Web. Und jeder Fünfte nutzt mittlerweile das CMS für die technische Umsetzung seiner Website – Tendenz steigend. Ein Buch über für WordPress-Themes sollte daher ein echter Knüller sein. Vor allem, wenn der Autor gestandener WordPress-Entwickler ist und bereits eine Reihe von Themes und Büchern zum Thema vorzuweisen hat, wie das bei dem Amerikaner Joe Casabona tatsächlich auch der Fall ist. Und so hat der dpunkt Verlag das Buch nur wenige Monate nach dem amerikanischen Debüt bereits übersetzt. Wen die zum Teil etwas holprige Übersetzung nicht stört, der findet in Casabonas Buch die geballten Informationen zum Entwicklungsprozess responsiver Themes, Navigationen, Bilder, Kommentare, Widgets, Plugins und vieles mehr. Casabona führt nicht nur in die Grundlagen ein, sondern schaut sich auch responsive Theme-Frameworks und Child-Themes an. Nicht zuletzt liefert der Buchautor Bucha auch noch einige praxisnahe Tutorials für responsive Galerien, Karten, Slider, Formulare und vieles mehr.

  • Titel: Reponsive Design mit WordPress
  • Autor: Joe Casabona
  • Erscheinungsdatum: April 2014
  • Verlag/ISBN: dpunkt Verlag/978-3-86490-177-5
  • Preis/Umfang: 26,90 Euro/196 Seiten
]]>
Ilona Koglin