Webdesign | t3n News News, Infos, Tipps und aktuelle Artikel zu Webdesign 2014-10-17T11:22:11Z t3n Redaktion http://t3n.de/tag/webdesign 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.

]]>
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
Photoshop fürs Webdesign: Muss das (noch) sein? http://t3n.de/news/photoshop-webdesign-geeignet-566839/ 2014-09-16T07:51:04Z
Photoshop ist ein mächtiges Werkzeug, das die Konkurrenz lange hinter sich gelassen hat und oft für so ziemlich jede Aufgabe im Design verwendet wird – auch für die Gestaltung von Webseiten.

ist ein mächtiges Werkzeug, das die Konkurrenz lange hinter sich gelassen hat und oft für so ziemlich jede Aufgabe im verwendet wird – auch für die Gestaltung von Webseiten. Aber ist das wirklich noch sinnvoll?

Bei der Frage nach dem perfekten Gestaltungs-Tool spalten sich die Design-Geister. Ob Photoshop, Fireworks (auch wenn es leider eingestellt wurde), Illustrator, Sketch oder sogar InDesign: Jeder hat seine persönliche „Nummer 1“ und arrangiert sich mit den programmeigenen Arbeitsweisen. Einige Webworker und Designer schwören sogar auf die Entwicklung im Browser, um den Designprozess zu verkürzen.

Für diejenigen allerdings, die eine strikte Designvorlage vor der Umsetzung bevorzugen, fällt die Wahl des geeigneten Tools häufig auf Photoshop. Warum auch nicht? Die Gestaltungsmöglichkeiten in Photoshop sind beinah grenzenlos, das Programm ist weit verbreitet und sehr benutzerfreundlich. Und doch eignet sich Photoshop deutlich schlechter als andere Lösungen für das Wichtigste im Webdesign: das Layout.

Das Problem? Photoshop-Dateien sind einfach riesig

Als Designerin im eigenen Unternehmen habe ich viel über die Nachteile von Photoshop im gelernt und bin deshalb aus persönlicher Vorliebe auf Illustrator umgestiegen. Diese Gründe haben mich dazu gebracht, meine Gewohnheiten über Bord zu werfen und Photoshop nur noch als Gestaltungshilfe für besonders schönes Eye-Candy auf Websites zu benutzen.

Das Problem? In einer Photoshop-Datei wird jede externe Grafik grundsätzlich eingebettet. So gehören Photoshop-Dateien, die 100 Megabyte oder mehr auf die Waage bringen, zum Alltag eines jeden Webdesigners, der mit dem Tool arbeitet.

Schwierig, den Überblick zu behalten – besonders im Team

Typische Dateistruktur mit Photoshop
Typische Dateistruktur bei einem Web-Projekt mit Photoshop.

Und: In einem Ordner häufen sich unzählige Dateien, die jeden Zustand der Seite aufzeigen. Für jedes Pop-Up, jede Aktion und jede Unterseite muss nicht selten eine eigene Datei angelegt werden. Ich habe schon häufig Ordner mit unzähligen Dateien erhalten wie „register.psd“, „register-error.psd“ und „register-confirmation.psd“, dabei haben sich dahinter, wie die Namen vermuten lassen, nur verschiedene Aktivitätszustände versteckt.

Die Übermittlung an Dritte ist so immer zeitintensiv und umständlich. Eine Alternative hierzu wäre das Speichern der einzelnen Elemente in separaten Ebenen und Ebenenkompositionen. Bei zunehmender Detailtiefe der jeweiligen Unterseite kann das aber schnell in einer aufgeblasenen und chaotischen Datei resultieren.

Die Wiederverwertbarkeit

Elemente, die sich auf allen Seiten wiederholen, können in Photoshop erst seit Kurzem global angepasst werden – dateiübergreifende Smartobjekten sind also nur den aktuellsten Versionen von Photoshop vorbehalten.

In anderen Programmen wie Adobe Illustrator können mit Symbolen dokumentübergreifende Bibliotheken für Elemente geschaffen werden, die zentral angepasst werden können. So resultieren Anpassungen an wiederverwendbaren Elementen nicht darin, dass mehrere Dokumente mühsam von Hand angepasst werden müssen. Ähnlich verhält es sich mit Adobe-InDesign-Musterseiten.

Zugriff auf Ebenen

Ein einfacher Klick reicht in Photoshop nicht aus, um ein Element auszuwählen. In kleinteiliger Arbeit muss das gewünschte Objekt per Rechtsklick oder über den Ebenen-Manager ausfindig gemacht werden.

Ja, Photoshop bietet Möglichkeiten, nach Ebenen zu suchen oder nach bestimmten Kriterien zu filtern, allerdings betrachte ich diese Funktionen als notwendigen Workaround für ein Problem, mit dem man sich in anderen Programmen gar nicht erst beschäftigen muss.

Gruppen und Ordner

Der Workflow in Photoshop macht manche, alltägliche Aufgaben eines Webdesigners manchmal sehr kompliziert. (Grafik: Julia Lindenberg)
Der Workflow in Photoshop macht manche, alltägliche Aufgaben eines Webdesigners manchmal sehr kompliziert. (Grafik: Julia Lindenberg)

Die Photoshop-Datei zum obigen Bild wird vermutlich aus verschiedenen Ordnern bestehen, die jeweils aus dem Inhalt eines Quadrats besteht. Das klingt nach einer logischen Ordnerstruktur, denn so ist es Möglich, die Quadrate im Ganzen zu verschieben. Was aber, wenn sich der Kunde überlegt, die Headline jedes Bereichs sieben Pixel nach oben verschieben zu wollen? Plötzlich macht die eben noch logische Ordnerstruktur keinen Sinn mehr und der Designer würde sich wünschen, lieber alle Headlines gruppiert zu haben. So aber muss jetzt aus jedem Ordner die eine Ebene selektiert und verschoben werden.

Auch wenn du ordentlich arbeitest und deine Datei mit Ebenenkompositionen und Smartobjekten gewissenhaft strukturierst und benennst, kann es passieren, dass deine Struktur für schnelle Design-Änderungen nicht geeignet ist.

Objektgrößen verändern und Elemente anordnen

Programme, die für Layout-Arbeiten optimiert sind, legen besonders viel Wert darauf, dass die Größe eines selektierten Objekts sofort ablesbar ist. In Photoshop aber muss zunächst die Ebene selektiert, das Objekt ausgewählt und das Info-Fenster geöffnet sein, bevor die aktuelle Größe erkennbar ist  – für mich zu viele Schritte für eine simple Information, die in der Layout-Phase wertvolle Zeit kostet. Ebenso verhält es sich mit dem pixelgenauen Positionieren verschiedener Objekte auf der Arbeitsfläche. Das Verschiebe-Werkzeug bietet zwar eine Pixel-Anzeige, aber kein Eingabefeld, um einen exakten Wert zum Verschieben zu verwenden. Hierfür muss das Transformieren-Werkzeug bemüht werden.

Grafiken aus Photoshop extrahieren

„Photoshop? Viele Arbeitsprozesse lassen sich in anderen Programmen schneller und bequemer realisieren.“

Kleine Grafiken aus einem Photoshop-Dokument zu extrahieren, gestaltet sich häufig als eine zeitintensive Beschäftigung. Zwar gibt es Tools, die speziell dafür ausgelegt sind, Elemente aus Photoshop-Dateien automatisch auszugeben. Diese benötigen zumeist aber eine strikte Ordnerstruktur, um ihre Arbeit korrekt ausführen zu können.

Das wiederum schränkt bei der Gestaltung ein und kostet Zeit. Zudem bieten Vektor-Programme wie Illustrator die Möglichkeit, beim Export eine Grafik in 200-prozentiger Größe auszugeben. Besonders bei Retina-optimierten Websites ist das unglaublich wertvoll. In Photoshop muss die Datei hierfür von vornherein in doppelter Größe angelegt werden, um später Unschärfen beim Hochskalieren zu vermeiden. Die vom End-Design abweichende Dokumentgröße kann während des Layouts auch unnötige Zeit für das Umrechnen der Werte ins Ziel-Layout kosten.

Keine Frage: Adobe gibt sich Mühe

Photoshop Layout Hilfe
Nutzer der Creative Cloud erhalten regelmäßige Updates, die Photoshop auch in Sachen Webdesign fiter machen sollen. (Screenshot: Julia Lindenberg)

Dass Photoshop schon lange nicht mehr ausschließlich als Bildbearbeitungsprogramm dient, ist offensichtlich. Adobe bemüht sich, mit Updates den Anforderungen der Designer gerecht zu werden. Die intelligenten Hilfslinien, die im Juni 2014 mit einem großen Update für alle Photoshop-CC-User verfügbar wurden, vereinfachen beispielsweise das Anordnen von neuen Objekten und Formen um ein Vielfaches. Die ursprünglich als Bildbearbeitungsprogramm konzipierte Allzweckwaffe wird immer mehr an die Anforderungen von Webdesignern angepasst.

Dennoch lassen sich viele Arbeitsprozesse in anderen Programmen schneller, bequemer und „wartbarer“ realisieren. Was nun der Grund dafür ist, dass sich ein Bildberarbeitungs-Programm als „Standard“ für Webdesign-Vorlagen etabliert hat, kann ich nur vermuten. Wahrscheinlich spielen hierbei die Verbreitung und Bekanntheit des Programms eine große Rolle, sodass sogar viele professionelle Dienstleister ihre Templates noch immer in Photoshop liefern und auch verlangen. Und: Die Kompatibilität von Photoshop-Dateien ist auch nicht außer Acht zu lassen. Während aktuelle Versionen von Programmen wie Illustrator oder InDesign nur noch mit erhöhtem Aufwand von älteren Versionen der Programme geöffnet werden können, kommen ältere Photoshop-Versionen meist problemlos mit Dateien aus neueren Versionen aus der Creative Cloud zurecht.

Auch das Lizenzmodell von Adobe dürfte seinen Teil dazu beigetragen haben. Während man heute für einen monatlichen Preis von unter 100 Euro die gesamte Suite zur Verfügung gestellt bekommt, mussten früher mehrere Tausend Euro auf ein Mal aufgebracht werden. Verständlich, dass die Wahl dann auf die insgesamt günstigere Allzweck-Waffe Photoshop gefallen ist.

Mit Gewohnheiten brechen

Natürlich mag es viele Webdesigner geben, die sehr geübt und schnell in der Bedienung von Photoshop sind und die über die von mir aufgezählten Nachteile nur lachen können. Die Frage bleibt: Wären sie in anderen Programmen noch effizienter und würde die Nutzer dieser Tools die Zusammenarbeit im Team oder mit Externen nicht noch erleichtern?

Es ist nicht unwahrscheinlich, dass Adobe in Zukunft noch mehr Verbesserungen für Webdesigner in Photoshop integrieren wird. Diejenigen, die sich schon jetzt nach einer Lösung für die oben genannten Probleme sehnen, sollten einen Blick über den Tellerrand hinaus wagen und einer der vielen Photoshop-Alternativen eine Chance geben. Ich benutze bisher Adobe Illustrator und bin sehr zufrieden – aber auch Sketch scheint eine interessante Alternative zu sein. Und bevor ich mich jetzt den Photoshop-Fans als Zielscheibe präsentiere, lasst mich noch eins sagen: Das Beitragsbild habe ich in Photoshop gebastelt. Ich liebe dieses Programm; nur nicht für Webdesign.

Und jetzt freue ich mich über eure Kommentare.

]]>
Julia Lindenberg
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
Storytelling, Modernes Webdesign und mehr: 7 neue Bücher und ein Video-Training, die ihr euch anschauen solltet http://t3n.de/magazin/neue-buecher-3-236790/ 2014-08-20T09:37:40Z
Aktuelle Literatur ist wichtig, um auf dem neusten Stand zu bleiben. Hier haben wir einige Bücher und ein Video-Training für euch rausgesucht, die neu auf dem Markt und einen Blick wert sind.

Aktuelle Literatur ist wichtig, um auf dem neusten Stand zu bleiben. Hier haben wir einige Bücher und ein Video-Training für euch rausgesucht, die neu auf dem Markt und einen Blick wert sind. t3n 37 content teaser

Storytelling

neue buecher storytelling Petra Sammer ist eine ausgewiesene Expertin für transmediales . Sie weiß, wie man mit den richtigen Geschichten eine Marke zur „Meaningful Brand“ ausbaut. In ihrem Buch schildert Sammer zunächst einmal die wesentlichen Komponenten einer guten Geschichte: Das Warum spielt dabei eine ebenso wichtige Rolle wie der Protagonist oder der Konflikt. Anschließend erklärt Sammer den Entwicklungsprozess einer Story: Wie Unternehmen die zu ihnen passenden Geschichten (der Zukunft) finden, wie sie mit Hilfe von Stories Wissen teilen, Emotionen wecken und Spannung über mehrere Kommunikationskanäle aufbauen können. Ihre praktischen Tipps sowie Informationen zur Geschichte und Wissenschaft des Storytellings sind nicht nur eine Bereicherung für diejenigen, die sich ohnehin schon für das Thema interessieren. Sammer schreibt auch für all die Kommunikationsprofis, für die Storytelling bislang noch neu ist.

  • Titel: Storytelling. Die Zukunft von PR und Marketing.
  • Autorin: Petra Sammer
  • Erscheinungsdatum: September 2014
  • Verlag/ISBN: O'Reilly/978-3-955618186
  • Preis/Umfang: 24,90 Euro/256 Seiten

Single-Page-Web-Apps

neue buecher single page web apps

Single-Page-Web-Apps (SPWA) tauschen die Inhalte einer App dynamisch aus, anstatt jede Seite neu zu laden. Der User merkt dies eigentlich „nur“ durch eine schnellere Ladezeit – für viele Shops und andere kommerzielle Angebote ein verlockender Vorteil. Und so gibt es bereits einige Frameworks, die die Implementierung von SPWAs erheblich vereinfachen. JavaScript-, HTML-5- und CSS-3-Kenntnisse vorausgesetzt, liefert das Buch von Heiko Spindler dafür eine gute Einführung sowie jede Menge Tipps und Tricks anhand praktischer Fallbeispiele. Dazu gehören zum Beispiel eine kleine Chat-Anwendung, ein kollektives Whiteboard, ein Spiel oder eine Single-Page-Web-App für Smartphones und Tablets.

  • Titel: Single-Page-Web-Apps
  • Autor: Heiko Spindler
  • Erscheinungsdatum: März 2014
  • Verlag/ISBN: Franzis/978-3-645-60310-2
  • Preis/Umfang: 30,00 Euro/288 Seiten

Things a Little Bird Told Me

neue buecher things a little bird told me

Die geniale Idee haben, die die Welt verändert, sie mit Leidenschaft und enormem finanziellen Erfolg verwirklichen – und dann auch noch zu den „Guten“ gehören und die Welt verbessern. Wer träumt nicht davon? Wie all das gehen kann, beschreibt Twitter-Mitgründer Biz Stone nun in seinem Buch „Things a Little Bird Told Me“, in dem er nicht nur die Geschichte des Nachrichtendienstes Twitter erzählt, sondern auch seine eigene. Zum Erfolg gehören laut Stone zwei entscheidende Faktoren: Das „Total Emotional Investment“, also absolute Leidenschaft und eine bedingungslos positive Grundhaltung, ebenso wie „Ideas“, also die richtig guten Ideen. Stone stößt auf geteiltes Echo: Die einen halten sein Buch für barocke Sozialromantik, die anderen sehen darin den Beweis, dass Business auch anders geht.

  • Titel: Things a Little Bird Told Me. Confessions of the Creative Mind
  • Autor: Biz Stone
  • Erscheinungsdatum: April 2014
  • Verlag/ISBN: Pan/978-1-447271116
  • Preis/Umfang: 19,80 Euro/240 Seiten

Erfolgreich auf YouTube

neue buecher erfolgreich auf youtube

Bewegtbilder werden immer wichtiger für gutes Online-Marketing. An erster Stelle steht hier YouTube, die größte und meistgenutzte Video-Plattform der Welt. Doch wie und mit welcher Strategie nutzt man YouTube am besten? Der Online-Redakteur und Texter Joachim Gerloff hilft mit seinem Buch genau hier weiter. Er erklärt zunächst die unterschiedlichen Video-Formate und wie man relevante Themen findet. Dann zeigt er, wie man die Videos technisch und für die Auffindbarkeit in der Suche optimiert. Er erklärt, wie sich Communities bei YouTube, Google+ sowie in anderen Sozialen Netzwerken, per E-Mail und über PR-Maßnahmen aufbauen lassen. Den Abschluss bilden ein ausführliches Kapitel über die quantitative und qualitative Erfolgsmessung sowie eines mit Best-Practise-Beispielen.

  • Titel: Erfolgreich auf YouTube. Social-Media-Marketing mit Online-Videos
  • Autor: Joachim Gerloff
  • Erscheinungsdatum: März 2014
  • Verlag/ISBN: mitp/978-3-8266-8193-6
  • Preis/Umfang: 19,99 Euro/224 Seiten

Modernes Webdesign

neue buecher modernes webdesign

Für den Berliner Webdesigner und Trainer Jonas Hellwig sind Technik, Konzeption und Gestaltung gleichwertige Bestandteile des modernen Webdesigns. In seinen Video-Tutorials geht er daher zunächst auf moderne Workflow-Konzepte ein, die diese Aspekte von Anfang an verbinden. Anhand von Praxisbeispielen zeigt er dann, wie man responsive, modulare Designs und Mobile-First-Ansätze entwickelt, moderne Gestaltungskonzepte realisiert und aktuelle Trends wie Flat Design, Rapid Prototyping oder Parallax Scrolling umsetzt. Dazu gibt Hellwig eine Vielzahl praktischer Alltagstipps: Welche typografischen Elemente, Gestaltungsraster und Navigationskonzepte gibt es, die sich geräteübergreifend den unterschiedlichen Bildschirmgrößen anpassen? Wie kann man Grafiken sowohl für hochauflösende Monitore als auch für mobile Devices optimieren? Und wie nutzt man den CSS-Präprozessor SASS?

  • Titel: Modernes , Video-Training
  • Autor: Jonas Hellwig
  • Erscheinungsdatum: Juli 2014
  • Verlag/ISBN: Galileo Computing/978-3-8362-3027-8
  • Preis/Umfang: 39,90 Euro/12 Stunden Spielzeit

Suchmaschinenoptimierung mit Google Webmaster Tools

neue buecher seo mit google webmaster tools

Google stellt mit den Webmaster Tools eine ganze Reihe kostenloser Dienste und Funktionen zur Verfügung, mit denen Seitenbetreiber ihre Website für die Crawler der weltweit führenden Suchmaschine optimieren können. Sich durch diesen Dschungel an Einstellungen und Optionen zu finden, ist allerdings keine leichte Aufgabe – kein Wunder, ist SEO doch eine komplette Berufsbranche. Wer sich dieser Herausforderung dennoch stellen möchte, dem liefert das Buch von SEO-Experte Stephan Czysch einen guten Einstieg: Welche Werkzeuge gibt es? Wie richte ich sie ein und wie teste ich die Settings? Welche Bedeutung haben Metabeschreibungen, Tags, Datenstrukturen, Keywords sowie Link-Optimierungen? Was sind die typischen Crawling-Fehler, die SEO-Einsteiger unbedingt vermeiden sollten – und was gibt es beim Google Index zu berücksichtigen? Der Autor widmet sich außerdem den Sicherheitsproblemen von Google, macht einen kleinen Ausflug zu den SEO-Tools der Suchmaschine Bing und zeigt anhand etlicher Fallbeispiele auf, worauf es in der praktischen Arbeit vor allem ankommt.

  • Titel: Suchmaschinenoptimierung mit Google Webmaster Tools. Webseiten mit kostenlosen Tools optimieren
  • Autor: Stephan Czysch
  • Erscheinungsdatum: Juni 2014
  • Verlag/ISBN: O'Reilly/978-3-95561-728-8
  • Preis/Umfang: 27,90 Euro/272 Seiten

AngularJS

neue buecher angularjs

Philipp Tarasiewicz und Robin Böhm sind beide Spezialisten für Enterprise-JavaScript, sind insbesondere an dem JavaScript-Framework AngularJS interessiert und haben ihre Expertise nun in einem Buch für Entwickler zusammengefasst, die bereits Kenntnisse in JavaScript, HTML und CSS mitbringen. Anhand eines zusammenhängenden Beispielprojekts führen sie schrittweise in die Arbeit mit dem clientseitigen Web-Framework AngularJS ein. Sie zeigen Konzepte und Techniken, mit denen JavaScript-Entwickler strukturierte, modulare und gut wartbare Web-Applikationen erstellen können. Die grundlegenden Konzepte des Frameworks wie Modules, Scopes, Controller, Services, Expressions und Filter werden ebenso erklärt wie anspruchsvollere Funktionen, etwa das automatische Auflösen von Abhängigkeiten zwischen Komponenten mittels Dependency Injection. Außerdem lernen die Leser, wie sie hilfreiche Werkzeuge wie Yo, Grunt, Bower und Karma verwenden und in ihren Workflow integrieren, um sich so die tägliche Arbeit zu erleichtern.

  • Titel: AngularJS. Eine praktische Einführung in das JavaScript-Framework
  • Autoren: Philipp Tarasiewicz, Robin Böhm
  • Erscheinungsdatum: Mai 2014
  • Verlag/ISBN: dpunkt Verlag/978-3-86490-154-6
  • Preis/Umfang: 32,90 Euro/354 Seiten

Web Hacking

neue buecher web hacking

Wer seine Web-Anwendung so sicher wie möglich machen will, muss im Grunde wie ein Hacker denken. Wie das genau geht, das will der Entwicker Manuel Ziegler in seinem neuesten Buch zeigen. Seit er 14 ist, beschäftigt er sich mit dem Thema Sicherheit. Kein Wunder also, dass er ausführliche Beschreibungen liefern kann, wie die wichtigsten Hacking-Methoden funktionieren und wie man sich davor schützen kann. Ziegler schildert verschiedene Angriffsmethoden, um ein Gespür für Sicherheitslücken zu vermitteln und beschreibt die Maßnahmen zu deren Abwehr: Wie knackt man Passwörter in Sekundenschnelle? Wie errät man typische Seitennamen eines Content-Management-Systems? Woran erkennt man DOS-Attacken? Ziegler widmet sich auch den Möglichkeiten der Geheimdienste, verschiedenen kryptografischen Verfahren und der Abwehr von Phishing-Attacken. Zusätzlich führt er in den Online-Playground ein, auf dem Leser eigene Erfahrungen sammeln können, und beschreibt Trainingsszenarien und -möglichkeiten.

  • Titel: Web Hacking. Sicherheitslücken in Webanwendungen – Lösungswege für Entwickler
  • Autor: Manuel Ziegler
  • Erscheinungsdatum: Juni 2014
  • Verlag/ISBN: Hanser Verlag/978-3-446-44017-3
  • Preis/Umfang: 29,99 Euro / 217 Seiten
]]>
Ilona Koglin
Webdesign-Guru Nils Pooker im Interview: „Man braucht ein dickes Fell“ [Sponsored Post] http://t3n.de/news/webdesign-guru-nils-pooker-561701/ 2014-08-12T09:16:32Z
Nils Pooker ist seit 14 Jahren Webdesigner. Eine Zeit, in der man viel erlebt. Im Interview plaudert der ehemalige Gemäldekopist anlässlich des bevorstehenden PHP-Summit jetzt aus dem Nähkästchen …

Nils Pooker ist seit 14 Jahren Webdesigner. Eine Zeit, in der man viel erlebt. Im plaudert der ehemalige Gemäldekopist anlässlich des bevorstehenden PHP-Summit jetzt aus dem Nähkästchen und erklärt, was Webdesigner außer einem dicken Fell noch brauchen.

image001 Nils Pooker war viele Jahre als Gemäldekopist selbstständig im Kunstbereich tätig und arbeitet seit 2001 als freier Webdesigner. Er ist Autor des Buches „Der erfolgreiche Webdesigner“ (Galileo Press). Wichtige Schwerpunkte seiner Arbeit sind die Themen Kundenkommunikation, Projektmanagement und Website-Konzeption. Im Interview spricht er über den Beruf des Webdesigners, damit verbundene Probleme und über Kunden aus der Hölle.

Frage: Nils, als selbständiger Webdesigner fühlst du dich auf allen Displaygrößen Zuhause. Oder?

Nils Pooker: Ja, das ist mittlerweile nicht nur guter Ton, Responsivität ist eine Standardanforderung für fast alle Webseiten. Natürlich muss man immer im Einzelfall prüfen, für wen welche Inhalte wie aufbereitet werden müssen. Für alle Displaygrößen, alle Systeme und alle Browser zu optimieren ist kaum zu realisieren, aber man sollte es wenigstens versuchen.

Frage: Welche technischen Herausforderungen sind die spannendsten, die in den letzten Jahren deiner Berufserfahrung hinzugekommen sind?

Nils Pooker: HTML5 und CSS3 waren technische Herausforderungen an die Kompetenzen der Webdesigner, aber die Herausforderungen an responsive Webseiten sind eher spannend zu nennen. Die Technik sehen weder Kunden noch Nutzer, aber mit Responsive ist wieder ein Aspekt hinzugekommen, bei dem alle mitreden wollen und von dem auch alle der festen Überzeugung sind, mitreden zu können. Das sind dann kommunikationstechnisch die echten Herausforderungen.

Frage: Sind das auch die mit dem größten Potenzial für Katastrophen?

Nils Pooker: Absolut. Auf dem Webkongress Erlangen habe ich den Zuhörern beispielsweise versucht klar zu machen, dass für Kunden die Abkürzung von Responsive Webdesign nicht RWD lautet, sondern SAIGA, denn es gilt immer nur die Prämisse „Soll auf iPhone gut aussehen“. Es muss vor allem auf dem coolen und teuren iPhone gut aussehen und die iPhone-Nutzer rufen auch an, wenn etwas nicht ihren Vorstellungen entspricht. Ganz selten hörst du etwas von der Darstellung auf Android-Smartphones. Und sollte jemals ein Kunde sagen, seine Webseite müsse auf dem Blackberry gut aussehen, dann wäre das die ultimative Thrillstory für den Kaminabend mit dem Urenkel.

Frage: Wie gehst du mit solchen „Katastrophen“ um, wenn es zum Beispiel heißt, dass das Porträtfoto auf dem Smartphone in der Mittagssonne so blass wirke?

Nils Pooker: Ruhig bleiben. Zumindest so lange, bis man den Telefonhörer aufgelegt hat. Dieses konkrete Problem lässt sich zum Glück noch auf die Hersteller abwenden, da kontere ich mit einem „vor über 40 Jahren auf den Mond fliegen, aber noch immer kein Display für die ganz normale Saharasonne zustande bringen“. Problematisch ist das nur dann, wenn ein überbelichtetes Handyfoto oder das High-Key-Portrait aus dem Studio für die Webseite übernommen werden muss, das schon unter Idealbedingungen kaum Kontraste zeigt.

Verweigert man die Annahme kommt der Hinweis, das würde schon gehen, baut man es ein, kommt der Anruf aus Palma de Mallorca, der Golfkumpel hätte auf das blasse Foto hingewiesen und das sei ja nun peinlich. In der Regel hilft aber die klare und sachliche Aufklärung, dass es keinen Königsweg für alle Eventualitäten geben kann. Ein moderner PKW mit ASP, ESP, Tempomat und sonstigem Schnickschnack verhindert ja nicht die Möglichkeit, trotzdem einen Verkehrsunfall bauen zu können.

Frage: Du bist als Webdesigner also eigentlich Kommunikationskünstler?

Nils Pooker: Genau. Das ist es auch, was viele Webdesigner und Entwickler nicht so schätzen, die Kundenkommunikation. Mir machte das immer Spaß, ich rede gern und ich finde es spannend, Menschen Dinge zu erklären. Ich bin auch davon überzeugt, dass eine hohe Kommunikationskompetenz gerade für selbstständige Webdesigner extrem wichtig ist.

Frage: Welche weiteren Stärken braucht man deiner Erfahrung nach noch im Webdesigneralltag?

Nils Pooker: Gelassenheit und Konsequenz. Das musste ich erst lernen. Ich bin seit 21 Jahren selbstständig, aber die Diskrepanz zwischen Kundenwünschen und Medienkompetenz auf der einen Seite und den Anforderungen an die Komplexität der Tätigkeit auf der anderen Seite gibt es wohl kaum in einer anderen Branche. Du sitzt und grübelst über eine schlanke, semantisch saubere Lösung im Frontend, im Hinterkopf immer der Gedanke, dass das ganze auch noch im CMS darstellbar bleiben und auf älteren IEs gut aussehen soll.

Dann erhältst du eine E-Mail mit dem Hinweis, dass die Frau des Prokuristen meine, die Farben seien ja viel zu kräftig oder viel zu blass, die müsse es übrigens wissen, weil sie mal ein halbes Semester Innenarchitektur studiert hätte vor 40 Jahren. Angesichts solcher Scharmützel an der Gardinenfront fragst du dich erstmal, ob die Semantik in der hinteren Ecke deines Codes nicht dein kleinstes Problem sein könnte. Aber dann atmest du durch, schreibst zurück, dass du dich später äußern würdest und frickelst am Code weiter. Man muss also ein dickes Fell haben und konsequent seinen Weg gehen.

Frage: Wird der Beruf des Webdesigners im Allgemeinen also eher unterschätzt?

Nils Pooker: Natürlich wird er das, aber das gilt ja für viele Berufe. Als Webdesigner haben wir einerseits das Problem, dass es noch nicht lange festgelegte Berufswege wie in anderen Branchen gibt, andererseits eignet sich die Webseite auf dem Monitor herrlich als Anlass, Geschmäcker und Meinungen zu kommunizieren. Immer und überall droht die erwähnte Gardinenfront. Programme, mit denen man ohne jegliche HTML-Kenntnisse mal eben eine Webseite basteln kann, gab es schon in den Anfangszeiten des Internets. Auf Grund dieser Tatsache galt ein Webdesigner auch sehr lange als eine Art Hobby-Computerkünstler.

Diese Wahrnehmung hat sich vor allem bei den kleinen Kunden gehalten, die ein Budget von 1.000 Euro als üppig ansehen, weil sie eben davon ausgehen, dass Webdesigner auch heute noch diese Programme verwenden. Jeden Abend zeigt auch die Fernsehwerbung, dass jeder mit dem richtigen Homepage-Baukasten ganz flott und sicher eine schicke Webseite zusammenklicken kann. Da sich die Anforderungen an professionelles Webdesign aber seit jenen 90ern extrem erweitert haben, muss man einschränken, dass der Beruf des Webdesigners zumindest heutzutage unterschätzt wird.

Frage: Auf dem PHP-Summit hältst du als Webdesigner eine Night Session … Wer kam denn auf die Idee?

Nils Pooker: Das waren Sebastian Bergmann, Stefan Priebsch und Arne Blankerts von thePHP.cc. Sie hatten meinen Artikel im Webkrauts-Adventskalender gelesen, das fiktive Tagebuch eines Webdesigners.

Frage: „Das Necronomicon des Webdesigns“ … Was möchtest du den Teilnehmern damit vermitteln?

Nils Pooker: Vieles von dem, was wir hier besprochen haben und was zum Alltag eines Webdesigners gehört. In erster Linie möchte ich das Auditorium natürlich unterhalten, ich mache seit 14 Jahren Webdesign und da wäre schon genug für einen abendfüllenden Vortag vorhanden, ich werde allerdings die besonders kuriosen und skurrilen Episoden herausfischen. Ich muss da nichts erfinden oder konstruieren, die Realität ist oft viel schräger als jede Fantasie.

Frage: Hand auf’s Herz: Würdest du es wieder tun? Wieder Webdesigner werden?

Nils Pooker: Ja, sonst würde ich es auch nicht mehr machen. Es gibt jeden Tag mindestens einen Moment, in dem ich am liebsten ein T-Shirt meiner Frau anziehen würde, auf dem steht „Ich schmeisse alles hin und werde Prinzessin“. Dann erinnere ich mich an die Zeit als Bildausstatter und Gemäldekopist, in der ich einmal Goldbronze ins fertige Bild malen sollte, weil das so lebendig wirken würde oder an den Überzug eines Gemäldes mit verdünnter schwarzer Farbe, weil dem depressiven Kunden die originalen Farben dann doch zu fröhlich waren. Sobald solche Erinnerungen auftauchen, tippe ich gern wieder Code, fluche über Adobe-Abstürze und nehme wieder die Telefonate von der Gardinenfront entgegen.

Webdesigner und Entwickler, jetzt für den PHP-Summit anmelden!

]]>
t3n Redaktion