Webdesign | t3n News News, Infos, Tipps und aktuelle Artikel zu Webdesign 2014-09-16T07:51:04Z t3n Redaktion http://t3n.de/tag/webdesign 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.

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. 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 Webdesign 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
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 einen kleinen Viralerfolg gefeiert. Tom Arnold verglich professionelles , 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