Webdesign | t3n News News, Infos, Tipps und aktuelle Artikel zu Webdesign 2014-08-20T09:37:40Z t3n Redaktion http://t3n.de/tag/webdesign 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
Webdesign ist wie Hecke schneiden: Eine Twitter-Geschichte über lästige Kunden http://t3n.de/news/webdesign-hecke-schneiden-561361/ 2014-08-07T06:30:19Z
Ein deutscher Webdesigner hat mit einem spannenden Tweet einen kleinen Viralerfolg gefeiert. Tom Arnold verglich professionelles Webdesign, vor allem die Absprache mit Kunden, mit dem Schneiden einer …

Ein deutscher Webdesigner hat mit einem spannenden Tweet einen kleinen Viralerfolg gefeiert. Tom Arnold verglich professionelles Webdesign, vor allem die Absprache mit Kunden, mit dem Schneiden einer Hecke und erntete anschließend viel Beifall von seinen Kollegen.

Webdesigner schneidet seine Hecke: Twitter rastet aus

Tom Arnold ist ein erfahrener deutscher Webdesigner und Gestalter und bloggt und twittert gerne nebenher. Im Laufe dieser Woche widmete er sich ausnahmsweise mal nicht seiner Arbeit, sondern schnitt seine Hecke im Garten. Danach setzte er einen Tweet ab, in dem er beschreibt, wie einfach das Schneiden der Hecke doch sei, ganz im Gegensatz zu seiner Webdesign-Tätigkeit.

Kurz darauf fingen die ersten Follower von Arnold an, die nervigen Aspekte des Webdesigner-Daseins auch auf die Heckenschneiderei zu übertragen. Nervige Kunden, ungenaue Spezifikationen, Besserwisserei und Änderungen in letzter Sekunde sind dabei wiederkehrende Themen. Herausgekommen ist ein ganzer Haufen von wunderbar komischen Tweets, die fast jedem Kreativarbeiter mit Kundenkontakt mindestens ein Schmunzeln ins Gesicht treiben sollten.

Die besten Tweets hat Arnold inzwischen in seinem Blog übersichtlich zusammengefasst. Es treffen aber nach wie vor noch neue, lustige Tweets bei ihm ein, so dass sich auch ein Blick auf sein Twitter-Profil lohnt, wenn man noch nicht genug von dem Vergleich bekommen hat. Arnolds Kollege Jens Grochtdreis hat außerdem einige der besten Reaktionen in einem Storify-Stück zusammengefasst – ebenfalls lesenswert.

via twitter.com

]]>
Moritz Stückler
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
Modernes Metro-Design: Website-Gestaltung mit flexiblen Rastern http://t3n.de/magazin/website-gestaltung-flexiblen-rastern-modernes-234640/ 2014-07-14T08:05:56Z
Microsofts Metro-Design ist einer der großen Designtrends 2013. Denn Metro eignet sich nicht nur für Applikationen, sondern auch für modernes Webdesign. Wir zeigen Grundlagen und beschreiben, wie …

Microsofts Metro-Design ist einer der großen Designtrends 2013. Denn Metro eignet sich nicht nur für Applikationen, sondern auch für modernes . Wir zeigen Grundlagen und beschreiben, wie einfach Variationen Metro-inspirierter Web-Gestaltung umsetzbar sind.

Eigentlich müsste dieser Beitrag damit beginnen, dass es so etwas wie Metro-Design gar nicht gibt. Der Begriff „Metro“ wurde von mit Windows Phone 7 als Code-Name für die neuen Designprinzipien eingeführt, später jedoch in „Microsoft Modern UI“ umbenannt. In einigen Artikeln zum Thema vermuteten Autoren Schwierigkeiten mit der Metro AG als Grund für die Änderung. So richtig durchgesetzt hat sich die Bezeichnung „Modern UI“ unter Webdesignern jedoch nicht, daher bleibt es in diesem Beitrag bei dem eingebürgerten Begriff „Metro“.

website gestaltung metro design windows phone
Microsofts Windows-Phone-Store verwendet ein Metro-Raster mit Content-Bereichen in drei verschiedenen Größen.

Mehr als nur Flat Design

Microsofts Metro-Designsprache steht in letzter Zeit häufig in Verbindung mit einem der zentralen Design-Trends 2013: Flat . Es verzichtet auf dreidimensional wirkende Gestaltungsmittel wie Schlagschatten oder Texturen, die eine materielle Oberfläche nachbilden möchten. „Authentically digital“ nennt Microsoft das – warum sollte ein digitales User Interface auch so tun, als wäre es analog?

Was bei der Reduzierung auf Flat Design häufig vergessen wird: Metro-Design lebt auch von anderen Stilelementen, wie beispielsweise von einer klaren Typografie und reduzierten Icons. Typisch ist auch das strenge Raster, das den Nutzer bei Windows 8 begrüßt – eine inspirierende Grundlage für die Gestaltung von Websites.

Die Grundlagen

Regelmäßige Kästen mit klar umgrenzten Kanten und Ecken sowie relativ geringen Abständen prägen das Metro-Raster. Microsoft unterteilt das Design in 20 mal 20 Pixel große Einheiten, die wiederum in 16 Subeinheiten von je 5 mal 5 Pixel unterteilt sind. In der Praxis findet sich ein Aufbau der Content-Bereiche aus mehreren Metro-Kästen oder Subeinheiten. Als Zwischenraum empfiehlt Microsoft 10 Pixel innerhalb zusammenhängender Gruppen. Detailinformationen liefern die Metro-Richtlinien.

Webdesigner müssen sich nicht sklavisch an diese Werte halten. Nichts spricht gegen andere Abstufungen oder sogar ein flexibles Raster. Wichtig ist eher die Grundidee: Das Metro-Design lebt von seiner gleichmäßigen Geometrie und basiert damit auf der modernen Design-Tradition, insbesondere dem Weimarer Bauhaus und dessen reduziertem, funktionalem Design.

website gestaltung metro design pulco
Pulco nutzt kräftige Farben, auffällige Bilder sowie flexibel angeordnete Elemente, um das strenge Metro-Raster aufzulockern.

Flexibilität in geordneten Bahnen

Bei aller Strenge ermöglichen Metro-Raster bemerkenswerte Flexibilität. Mit Hilfe der regelmäßigen, geometrischen Werte lassen sich recht einfach visuelle Hierarchien aufbauen. Dazu kombiniert man einfach die Kästchen verschiedener Größe miteinander – der Windows-Phone-Store arbeitet etwa mit drei unterschiedlich großen Kacheln.

Der Windows-Phone-Store soll mit seinen unterschiedlichen Icons die Vielfalt der Apps unterstreichen – und dieses wild zusammengewürfelte Aussehen passt gut zu der Aussage, die der Store vermitteln möchte. Geht es jedoch eher um ein einheitliches Erscheinungsbild, dürfte dies zu bunt sein. In sich stimmiger wirkt das Metro-Design mit kräftigen Farben und aussagestarken, aber stilistisch ähnlichen Bildern, wie bei der Website von Pulco, einer französischen Fruchtsaft-Marke.

website gestaltung metro design future of webdesign
Freie Kacheln und überraschender Weißraum geben dem Metro-Raster von „Future of Web Design“ eine interessante Optik.

Ein farbenfrohes Overlay über den Bildern gibt den Kacheln zusätzlich eine spielerisch-interaktive Navigationsfunktion. Schließlich führen die Rechtecke in verschiedenen Höhen dazu, dass die einzelnen Spalten nicht so regelmäßig aussehen. Pulco möchte einen frischen, leichten, unbeschwerten Eindruck hinterlassen – dazu passt ein etwas lockerer Umgang mit dem Metro-Raster besser als die strengere Variante aus dem Windows-Phone-Store.

Um ein Metro-Raster visuell aufzulockern, können Designer auch einzelne Kacheln frei lassen oder nicht jede Kachel vollflächig umranden – der unerwartete Weißraum kann ein interessantes Spiel mit den Inhalten erlauben. Beide Ideen zeigt die Website der Konferenz „Future of Web Design“. Die Seite zeigt auch, wie sich die Usability optimieren lässt, wenn mehrere Kacheln ein Thema behandeln: Die einheitliche Farbgebung der Zahlen 20 und 13 macht deutlich, dass diese beiden Kacheln zusammengehören.

website gestaltung metro design nowy theater
Durch den Versatz der Raster-Kästchen bricht die Website des Nowy Theaters das strenge Metro-Raster auf.

Inspirierende Metro-Varianten

Metro ist ein Designstil, der hervorragend zu modernen Themen passt. Er lässt sich aber auch als Inspirationsquelle für andere Zwecke anpassen. Mut ist gefragt, denn Designstile sind schließlich kein Selbstzweck.

Wem der geometrisch-funktionale Aufbau des Rasters zu streng ist, der kann zum Beispiel die Spalten oder auch einzelne Kacheln verschieben, wie dies etwa auf der Website des polnischen Nowy-Theaters aus Warschau geschehen ist. Diese Gestaltung wirkt schon wesentlich freier als das klassische Metro-Raster – das überdeckte Gesicht im Hintergrund ist allerdings gewöhnungsbedürftig und wirkt ungewollt.

website gestaltung metro design the kings of summer
Mit klar abgegrenzten Kacheln liefert die Film-Seite „The Kings of Summer“ eine abwechslungsreiche Gestaltung.

Eine weitere Variante verzichtet komplett auf die Zwischenabstände, wie es die Website zum Film „The Kings of Summer“ vormacht. Dabei sollten sich die einzelnen Kacheln gut unterscheiden, damit die Grenzen deutlich bleiben – dann können einzelne Elemente sogar bedenkenlos andere Bereiche überlappen, ohne dass das Design unordentlich wirkt.

Eine weitere Variante arbeitet mit Comic-Assoziationen. Die Gestalter der United Pixel Workers (unitedpixelworkers.com liefert aktuell einen 503-Fehler) setzen auf Sprechblasen-Kacheln: Ein einfaches Dreieck genügt, um die Zuordnung von Text- zu Bildkacheln klarzustellen.

website gestaltung metro design pixel workers
Kleine Sprechblasen-Nasen zeigen auf einen Blick, welche Content-Kästchen auf der Seite der United Pixel Workers zusammengehören.

Responsive Metro-Design

Responsive Webdesign ist mit Recht einer der wichtigsten Trends der letzten Jahre und das Metro-Design ist darauf gut vorbereitet. Kacheln lassen sich leicht neu arrangieren, sobald sich die Bildschirmgröße ändert – die Nutzererfahrung und die Gestaltung bleiben dabei gleich. Ein gutes Beispiel dafür ist die Website der App-Entwickler von Etch Apps. Je nach Display-Größe wird die Anordnung, Position und Größe der Kacheln verändert, ohne dass der Gesamteindruck leidet. Unnötige Kacheln können dabei auch wegfallen: Etch Apps macht das beispielsweise bei der großen farbig hinterlegten Kachel mit dem Logo, auf die sie auf Handy-Displays komplett verzichten – das Logo bleibt in der linken oberen Ecke der Navigation erhalten und ist daher als eigene Kachel nicht zwingend notwendig.

website gestaltung metro design etch apps
Die Kachel mit dem Logo verschwindet auf Smartphone-Bildschirmen, so dass nur ein kleines Logo am linken oberen Bildschrimrand verbleibt.

Fazit

Metro-Raster sind ein flexibles Gestaltungsmittel für Websites, die einen modernen Look brauchen. Bisweilen können Metro-Designs jedoch auch etwas streng wirken. Dann schaffen Varianten Abhilfe, die freier mit dem Grundraster umgehen, etwa indem sie mit unterschiedlichen Höhen oder mehreren Kacheln für einen Inhalt spielen und somit interessante Effekte erzielen. Nicht zuletzt spielen Metro-Raster ihre Stärken im Responsive Webdesign aus, denn die Inhalte lassen sich relativ einfach neu anordnen.

]]>
Björn Rohles
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
Chrome 38: Googles Browser bekommt eine responsive Ansicht für Webdesigner http://t3n.de/news/google-chrome-38-canary-553829/ 2014-06-26T12:39:27Z
Die experimentelle Canary-Version des Chrome-Browsers bringt eine sichtlich überarbeitete Version des Smartphone-Emulators mit. Damit lassen sich nicht nur verschieden Geräte emulieren, Designer …

Die experimentelle Canary-Version des Chrome-Browsers bringt eine sichtlich überarbeitete Version des Smartphone-Emulators mit. Damit lassen sich nicht nur verschieden Geräte emulieren, Designer bekommen auch alle verfügbaren Breakpoints der Seite angezeigt.

Chrome 38 Canary: Die experimentelle Version des Browser bietet einige spannende Funktionen für Designer und Entwickler. (Screenshot: t3n)
Chrome 38 Canary: Die experimentelle Version des Browser bietet einige spannende Funktionen für Designer und Entwickler. (Screenshot: t3n)

Chrome 38 Canary: Emulator mit neuen Funktionen

Die Entwicklertools von erlauben bereits seit längerem unterschiedliche Geräte zu simulieren, um beispielsweise das Aussehen einer responsiven Website auf einem iPhone oder iPad zu testen. Im experimentellen Canary-Build von 38 wurde dieses Features noch einmal deutlich überarbeitet.

Wie bisher stehen verschiedene und Tablets zur Verfügung. Wählt ihr eines davon aus, werden die Bildschirmgröße und der User-Agent des entsprechenden Gerätes simuliert. Neuerdings kann zusätzlich auch die Geschwindigkeit eines Mobilgeräts nachgeahmt werden. Zur Auswahl stehen GPRS, EDGE, G3, WLAN und DSL.

Chrome 38 zeigt im Canary-Build Breakpoints auf einem Raster an

Es ist jetzt auch möglich, sich alle verfügbaren Breakpoints einer Website anzeigen zu lassen und per Mausklick zwischen ihnen hin und her zu wechseln. Die Seite wird auf einem Raster angezeigt, was eine willkommene Hilfe für Designer sein dürfte.

Übrigens ist Chrome 38 als Canary-Build jetzt auch unter OS X als 64-bit-Version verfügbar. Da es sich bei den Canary-Builds um experimentelle Versionen des Browsers handelt, eignet sich die Software leider noch nicht für den Produktiveinsatz.

via etoxin.net

]]>
Kim Rixecker
Conversions steigern mit One-Pagern: Storytelling im Webdesign http://t3n.de/magazin/conversions-steigern-one-page-design-storytelling-233910/ 2014-06-26T10:08:22Z
Menschen lieben Geschichten und von diesem Umstand können Unternehmen, Dienstleister und Inhalte-Anbieter auch online profitieren. Allerdings ist das aufgrund etablierter Mechanismen im Web gar …

Menschen lieben Geschichten und von diesem Umstand können Unternehmen, Dienstleister und Inhalte-Anbieter auch online profitieren. Allerdings ist das aufgrund etablierter Mechanismen im Web gar nicht so einfach, denn Layout und Struktur von Websites haben sich in den letzten Jahren kaum verändert. Eine der wenigen Ausnahmen ist das One-Page-Design. Dieses ist wie gemacht, um eine Geschichte beispielsweise rund um ein Produkt zu spinnen – eignet sich allerdings nicht für jede Website und birgt im Bereich SEO besondere Herausforderungen.

Websites sind häufig ähnlich wie ein Print-Medium aufgebaut. Der Besucher muss in der Regel von Seite zu Seite springen, um für ihn interessante Inhalte zu finden. Bei einer One-Page-Website – auch Single-Page-Website genannt – werden hingegen alle für den Besucher relevanten Informationen auf einer einzigen langen und scrollbaren Seite präsentiert.

one page design conversions putzengel
Die Putzengel setzen auf One-Page-Design und Parallax-Scrolling. Die Navigation links begleitet den Nutzer beim Scrollen, zeigt stets an, wo er sich befindet, und erlaubt auch die direkte Auswahl eines bestimmten Bereichs der Website.

Diese Struktur kann nicht nur die Navigation erleichtern, sondern ermöglicht auch eine narrative Anordnung der Inhalte – also als in sich schlüssige Geschichte.

One-Page-Design – Vor- und Nachteile

Eine One-Page-Website besteht aus einer einzigen HTML- oder dynamisch generierten Webseite. Navigiert wird in der Regel entweder durch vertikales oder horizontales Scrollen. Zusätzlich ist auch eine herkömmliche Navigation möglich. Jedoch führt ein Klick auf entsprechende Buttons nicht dazu, dass eine neue Seite geladen wird. Stattdessen springt der Nutzer zu der entsprechenden Stelle auf der Single-Page-Website.

Zu den Vorteilen von One-Page-Design gehört unter anderem, dass der Besucher Informationen auf nachvollziehbarere Weise aufnehmen kann. Betreiber einer Business-Website können ihre Produkte oder Dienste direkter präsentieren und dank responsiver Web-Technologien erlaubt One-Page-Design eine gleichbleibende Bedienung über Geräte-Grenzen hinweg. Dazu kommt im mobilen Umfeld mit der Scroll-Navigation ein für dieses Nutzungsszenario besonders geeignetes User-Interface.

Nachteilig am One-Page-Design ist, dass sich dieser Ansatz nicht für jede Art von Website eignet. Bietet man als Seitenbetreiber viele Informationen in unterschiedlichen Kategorien an, ist One-Page-Design die falsche Wahl. Man sollte außerdem bedenken, dass die Nutzererfahrung besonders bei mobilen Besuchern umso mehr leidet, je mehr Inhalte man auf seiner Seite unterbringt. Dies resultiert schließlich auch in längeren Ladezeiten.

one page design conversions bigcartel
Anbieter von Produkten und Diensten sollten nur auf ein Single-Page-Design set- zen, wenn ihr Sortiment sehr überschaubar ist. Im besten Fall hat man nur ein Produkt oder eine Dienstleistung im Portfolio. Beim Online-Shop bigcartel sind es eine Handvoll Produkte.

Ein häufiges Argument, das gegen One-Page-Design ins Feld geführt wird, dreht sich um die SEO-Tauglichkeit entsprechender Websites. So viel vorab: One-Page-Websites sind nicht per se ungeeignet für SEO. Richtig umgesetzt und mit einem engen Keyword-Fokus kann der Single-Page-Ansatz in Bezug auf SEO durchaus einschlagen.

Für wen lohnt das One-page-Design?

One-Page-Websites sind häufig visuell beeindruckend und erfreuen sich seit einiger Zeit besonders bei Designern und Freiberuflern großer Beliebtheit. Bevor man sich für diesen Ansatz entscheidet, sollte man sich als Website-Betreiber jedoch fragen, ob ein Single-Pager wirklich sinnvoll ist.

one page design conversions browser awareness day
Die Website zum Browser Awareness Day zeigt, was mit One-Page-Decsign in Sachen Storytelling alles möglich ist. Große Bilder gepaart mit einer sehr einfachen Navigation leiten den Lesern auf einfache Art und Weise durch die Geschichte.

Inhalte lassen sich am Besten vermitteln, wenn man eine dazu passende Geschichte erzählt. One-Page-Design ist genau dafür wie gemacht, denn es eröffnet die Möglichkeit, dem Besucher seine Botschaft klarer, übersichtlicher und überzeugender zu präsentieren. Der Nutzer muss sich die Informationen nicht mühsam selbst zusammen suchen, sondern erhält alle relevanten Informationen auf einer Seite gebündelt.

Anbieter von Produkten und Dienstleistungen können mit dem Einsatz von One-Page-Design Conversions steigern, denn der Nutzer lässt sich mit diesem Design-Ansatz optimal leiten. Ein One-Page-Design erzählt im besten Fall eine Geschichte, ist einfach gehalten, geradlinig und führt den Besucher zum gewünschten Ziel: der Conversion. Für Anbieter von Produkten und Dienstleistungen kann ein Single-Pager daher durchaus Sinn machen. Allerdings eignet sich dieser Ansatz in der Regel nur dann, wenn man ein einzelnes Produkt oder eine einzelne Dienstleistung bewerben will.

Möchte man unterschiedliche Produkte auf seiner Website anbieten, ist One-Page-Design eher ungeeignet. Das trifft auch für andere Inhalte zu. Wer seinen Besuchern viele unterschiedliche oder sehr umfangreiche Inhalte präsentieren möchte, stößt mit einer Single-Page-Website schnell an die Grenzen.

Besonderheiten bei der Entwicklung

Auch wenn viele Regeln herkömmlicher Websites in Bezug auf Design und Entwicklung auch bei Single-Pagern gelten, gibt es einige Besonderheiten, die man berücksichtigen sollte. Bilder nehmen beim One-Page-Design beispielsweise eine noch wichtigere Rolle ein und sie lassen sich auch ganz anders als auf herkömmlichen Websites einsetzen. Nicht selten finden sich Single-Pager, die ein Hintergrundbild aufweisen, das sich über die gesamte Höhe oder Länge der Website zieht.

Höhe oder Länge deshalb, weil One-Page-Design sich auch gut eignet, um eine vertikale Ausrichtung durch eine horizontale zu ersetzen. Mit einer horizontal scrollbaren Website kann man seine Besucher überraschen – sollte den Nutzer aber in jedem Fall beispielsweise durch Pfeile oder einen kurzen Hinweis auf die ungewohnte Bedienung hinweisen. Außerdem ist es in diesem Zusammenhang wichtig, die Seite für die gängigsten Bildschirmgrößen zu optimieren.

Single-Page-Websites sind zudem besonders geeignet für Parallax Scrolling. Darunter versteht man, dass sich einzelne Bildebenen unterschiedlich schnell bewegen. Dies vermittelt dem Betrachter einen Eindruck von Tiefe. Der Effekt ist aus der physischen Welt bekannt, beispielsweise wenn beim Blick aus dem Fenster eines Autos nahe Objekte sich deutlich schneller zu bewegen scheinen als weit entfernte Objekte.

Egal ob vertikaler oder horizontaler Single-Pager – sollten darauf achten, Kontaktinformationen prominent zu platzieren. Zumindest wenn der primäre Fokus der Website ist, neue Kontakte zu generieren, sollte das Layout diesem Umstand Rechnung tragen. Beim One-Page-Design sollten sich diese Informationen daher nicht wie oft üblich ganz unten befinden, sondern direkt beim Aufruf der Seite sichtbar sein. Eine andere Möglichkeit besteht im Einsatz einer „Travelling Navigation“ – einer Navigationsleiste, die auch beim Scrollen stets sichtbar bleibt.

Die Umsetzung von One-Page-Design erfordert häufig den Einsatz von Ajax, CSS3 und JavaScript. Wer seine Website nicht komplett selbst entwickeln möchte, findet online auch diverse Themes für unterschiedliche CMS. So stehen beispielsweise für WordPress eine ganze Reihe von durchdachten und schicken Themes zur Verfügung.

Vorsicht SEO

one page design conversions every last drop
Every Last Drop ist eine interaktive Website, die über den Wasserverbrauch im Alltag aufklärt. One-Page-Websites eignen sich besonders für derartige Kampagnen und Informationsportale. Die Bilder verändern sich in diesem Fall dynamisch.

Technisch gesehen gibt es viele Gründe, die für eine herkömmliche Website mit vielen Unterseiten sprechen. Der wichtigste dürfte SEO sein. Betreiber einer herkömmlichen Website können für jedes noch so spezielle Thema eine eigene Unterseite anlegen – was in Sachen Suchmaschinenoptimierung aufgrund der vielen crawlbaren Inhalte sinnvoll ist. Dazu kommt, dass interne Links extrem wichtig für die Suchmaschinenoptimierung sind. Dessen sollten sich Seitenbetreiber bewusst sein, bevor sie sich für einen One-Pager entscheiden. Das heißt allerdings nicht, dass One-Page-Design per se ungeeignet für SEO ist. In bestimmten Fällen kann dieser Ansatz sogar die bessere Wahl sein. Single-Pager eignen sich beispielsweise vorzüglich für Pay-per-Click-Kampagnen, als Landing-Page oder für Gewinnspiele. Eine One-Page-Website mit einem sehr engen Themenfokus kann eine herkömmliche Website in Sachen SEO sogar ausstechen.

Für die erfolgreiche Optimierung muss das entsprechende Keyword im Title-Tag, den Meta-Tags, den ALT-Tags für Bilder und den Link-Title-Tags enthalten sein. Der Schlüssel zum Erfolg liegt oft in der maximalen Wiederholung des Keywords über die komplette Site hinweg, ohne es dabei zu übertreiben. Eine gut designte One-Page-Website verfolgt ein durchdachtes Multimedia-Konzept und führt so oftmals zu einer längeren Verweildauer des Besuchers – was ein weiterer SEO-Ranking-Faktor ist.

one page design conversions e book
Wie gut Storytelling mit One-Page-Design funktioniert beweist der interaktiver Trailer für das E-Book De Vriend eindrucksvoll.

Mischstrategie

Möchte der Seitenbetreiber trotz der genannten Einschränkungen im Bereich Keywords flexibel bleiben, kann er für seine Website auch eine Misch-Strategie fahrenund muss nicht gänzlich auf One-Page-Design verzichten. Denkbar wäre beispielsweise eine Landing-Page, die im One-Page-Design gehalten ist und zusätzlich von einem Blog mit einzelnen Beiträgen zu unterschiedlichen Themen unterstützt wird.

Fazit

One-Page-Design ist nicht universell zu empfehlen. Möchte man aber eine Website zu einem einzigen Thema, einem einzelnen Produkt oder einer Dienstleistung aufsetzen, bietet One-Page-Design viele Vorzüge. Besonders im Bereich kann ein Single-Pager aus Marketingsicht sehr sinnvoll sein. Website-Betreiber, die einen sehr engen Keyword-Fokus verfolgen, können darüber hinaus mit einem Single-Pager auch beim Thema SEO punkten.

]]>
Sébastien Bonset
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