Webdesign | t3n News News, Infos, Tipps und aktuelle Artikel zu Webdesign 2014-07-15T13:24:48Z t3n Redaktion http://t3n.de/tag/webdesign 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
Die 10 beliebtesten Artikel der Woche: Was gute Chefs ausmacht, Bitcoin-Wahnsinn und ein neuer Webdesign-Trend http://t3n.de/news/10-beliebtesten-artikel-woche-39-551246/ 2014-06-14T09:00:54Z
In dieser Rubrik stellen wir turnusgemäß die besten Artikel der letzten sieben Tage vor: Diesmal erfahrt ihr unter anderem, was man als Chef für Qualitäten braucht, was hinter den …

In dieser Rubrik stellen wir turnusgemäß die besten Artikel der letzten sieben Tage vor: Diesmal erfahrt ihr unter anderem, was man als Chef für Qualitäten braucht, was hinter den Polygon-Webseiten als neuen Webdesign-Trend steckt und wie ihr euren Mac mit einfachen Kommandozeilen entfesseln könnt.

1. Supr: Schickes und kostenloses SaaS-Shopsystem im Test

supr-macbook-adminDass einfache SaaS-Shopsystem Supr richtet sich an E-Commerce-Einsteiger und kleinere Online-Händler. Seit kurzem ist Supr komplett kostenfrei erhältlich – wir haben das Shopsystem für euch genauer unter die Lupe genommen.

Unser ArtikelSupr: Schickes und kostenloses SaaS-Shopsystem im Test

2. Von Diplomatie bis Führungsstärke: Das muss jeder Chef wissen

chef_boss_furhungsposition_infografikNicht jeder Mensch eignet sich für eine Führungsposition. Eine schicke Infografik zeigt euch, worauf es bei einem guten Chef ankommt.

Unser Artikel: Von Diplomatie bis Führungsstärke: Das muss jeder Chef wissen

3. Polygon-Webseiten: t3n erklärt den neuen Webdesign-Trend

Polygon DesignPolygon-Design-Websites können schick und modern, aber auch wie ein Cartoon wirken. Wir zeigen euch, was es mit dem Trend auf sich hat – inklusive gelungener Beispiele.

Unser Artikel: Polygon-Webseiten: t3n erklärt den neuen Webdesign-Trend

4. Keine Angst vor der Kommandozeile: Mit diesen 10 Befehlen entfesselst du das ganze Potenzial deines Mac

Schnellere Aufwachzeit aus dem Ruhezustand? Text aus der Schnell-Vorschau kopieren? Mit der Kommandozeile kein Problem. Sie mag auf dem Mac zwar auf Anfänger einschüchternd wirken, aber der Umgang mit dem Terminal von OS X ist gar nicht so schwer. Eine Einführung und zehn praktische Befehle für die Kommandozeile – nicht nur für blutige Anfänger.

Unser Artikel: Keine Angst vor der Kommandozeile: Mit diesen 10 Befehlen entfesselst du das ganze Potenzial deines Mac

5. Von den Großen lernen: 32 Styleguides führender Netzkonzerne auf einen Blick

styleguides_netzkonzerneStyleguides verraten uns, wie eine Marke optisch nach außen tritt und wie wir mit ihr umgehen. Eine willkommene Inspirationsquelle bietet eine Übersicht aus 32 solcher Styleguides von führenden Netzkonzernen.

Unser Artikel: Von den Großen lernen: 32 Styleguides führender Netzkonzerne auf einen Blick

6. Google-Power für Unternehmen: Mit Google My Business den Webauftritt bequem verwalten

google_my_businessGoogle macht sich hübsch für die Wirtschaft: mit dem kostenlosen Dienst „Google My Business“ können Unternehmen ihren Google-Aufritt ab sofort bequem und plattformübergreifend aufbauen und pflegen.

Unser Artikel: Google-Power für Unternehmen: Mit Google My Business den Webauftritt bequem verwalten

7. Wie gut sind deine Landing-Pages? Dieses Tool liefert Antworten

updated-adwords-landingpage-tool-teaserWordStream bietet mit dem „AdWords Landing Page Grader“ ein kostenloses Tool zur Bewertung von Landingpages an. Damit seht ihr beispielsweise, wie sich eure Landingpage im Vergleich zu denen eurer Konkurrenten schlägt.

Unser Artikel: Wie gut sind deine Landing-Pages: Dieses Tool liefert Antworten

8. Bitcoin-Wahnsinn: Wie wir einmal eine Story schreiben wollten und dabei 5.000 Euro verdient haben

Bitcoins im E-Commerce FeaturedMittlerweile hat vermutlich jeder auch nur ein bisschen digital-affine Mensch schon einmal von gehört. Aber nur ein Bruchteil dürfte wissen, wie genau Bitcoins funktionieren und wie man sie bekommt. Wir haben uns erkundigt, anschließend den Selbsttest gemacht und für knapp 10.000 Euro Bitcoins gekauft. Bisher entwickelt sich deren Wert recht positiv.

Unser Artikel: Bitcoin-Wahnsinn: Wie wir einmal eine Story schreiben wollten und dabei 5.000 Euro verdient haben

9. Medium: So cool arbeitet das Vorzeige-Startup aus San Francisco

Medium schickt sich an, die Blogger-Plattform der Zukunft zu werden. Die Zeichen stehen auf Erfolg – aber auch das Büro des Startups aus San Francisco weiß zu beeindrucken. Wir zeigen die besten Fotos.

Unser Artikel: Medium: So cool arbeitet das Vorzeige-Startup aus San Francisco

10. Schneller zum fertigen Artikel: 9 Schreib-Tools für Content-Marketeers

http://www.dahlstroms.comVon der Planung bis zum Verfassen eines Artikels kann einiges schief gehen. Wir zeigen euch neun Tools, mit denen ihr besser plant, Ablenkungen vermeidet und so schneller euer Ziel erreicht, großartigen Content zu liefern.

Unser Artikel: Schneller zum fertigen Artikel: 9 Schreib-Tools für Content-Marketeers

]]>
Daniel Hüfner
Polygon-Webseiten: t3n erklärt den neuen Webdesign-Trend http://t3n.de/news/polygon-webseiten-t3n-erklaert-547293/ 2014-06-09T10:30:05Z
Polygon-Design-Websites können schick und modern, aber auch wie ein Cartoon wirken. Wir zeigen euch, was es mit dem Trend auf sich hat – inklusive gelungener Beispiele.

Polygon-Design-Websites können schick und modern, aber auch wie ein Cartoon wirken. Wir zeigen euch, was es mit dem auf sich hat – inklusive gelungener Beispiele.

Polygone beziehungsweise Vielecke sind geschlossene Formen, die mindestens drei Seiten haben und die sowohl zwei- als auch dreidimensionale Formen darstellen können. In Videospielen begegnen uns zig Objekte und Umgebungen, die aus Polygonen geformt wurden. Doch auch die verschiedener Videospiele nutzen verschiedene, weit weniger komplexe Polygon-Strukturen. Aber nicht nur in Videospielen wie Watchdogs oder in den Interfaces der Abstergro-Computer von Asassin’s Creed begegnen uns in letzter Zeit solche Gebilde. Viele Websites springen auf den Design-Trend auf, und so hat sich ein weiterer Begriff – der des Polygon-Designs – manifestiert.

Einige werden das Polygon-Design mit dem Flat-Design in Verbindung bringen: Flache Formen, die zusammen genommen auch dreidimensionale Formen abbilden können. Aber stimmt das auch? Lasst euch von zehn Polygon-Websites inspirieren!

Midori Aoyama

Midori Auyama Screenshot
Midori Auyama nutzt Polygon Design für die Gestaltung der Webseiten. (Screenshot: Midori Auyama)

Der japanische DJ Midori Auyama nutzt auf seiner Startseite animierte Polygone und verfremdet damit auch sein eigenes Portrait.

Polygon-Webseite von Midori Aoyama

HotDot

Hot Dot
Hot Dot nutzt Polygon Design für die Gestaltung der Webseiten. (Screenshot: Hot Dot)

HotDot verlässt die zweite Dimension und setzt polygonförmige Gebilde ein – die ein wenig an matte Rubine erinnern – und scrollabhängig verschiedene Perspektiven ermöglichen.

HotDot Webseite

Filidor Wiese

Filidor Wiese
Filidor Wiese kombiniert Polygon-Design mit Retro-Grafiken. (Screenshot: Filidor Wiese)

Der Frontend- und Webentwickler Filidor Wiese verbindet Retro-Feeling mit modernem Polygon-Design, um seinen Arbeitsalltag als Animation darzustellen.

Filidor Wiese

Dare With Us

Dare With Us
Dare With Us nutzt Polygon-Design für Hintergrundillustrationen. (Screenshot: Dare With Us)

„Dare With us“ nutzt das Polygon-Design, um die Landingpage mit einer Weltkarte zu schmücken.

Webseite von Dare With Us

Saghafi Mokhtar

Saghafi Mokhtar
Saghafi Mokhtar kombiniert Polygon Design mit Fotos. (Screenshot: Saghafi Mokhtar)

Der Designer Mokhtar Zaghaft nutzt Polygon-Design-Elemente und kombiniert sie mit Fotos und einem Parallax-Effekt.

Webseite von Saghafi Mokhtar

Aires & Cintra Arquitetura

Aires & Cintra Arquitetura nutzt Polygon Design für Key Visuals und den Hintergrund. (Screenshot: Aires & Cintra Arquitetura)
Aires & Cintra Arquitetura nutzt Polygon Design für Key Visuals und den Hintergrund. (Screenshot: Aires & Cintra Arquitetura)

Aires & Cintra Arquitetura nutzt Polygone, um den Hintergrund seiner Webseite zu gestalten und setzt bei den Key-Visuals auf aus Polygonen bestehende Formen.

Aires & Cintra Arquitetura

Send Me To South Pole

Send Me To Northpole
Send Me To Southpole ist eine animierte E-Card im Polygon-Design. (Screenshot: Send Me To Southpole)

Bei „Send Me To South Pole“ kannst du mit deinem Facebook-Profilfoto in eine Polygon-Design-Postkarte integriert werden.

Send Me To South Pole

Made By Vadim

Made By Vadim
Made By Vadim setzt Polygon Design für sein Portrait und die Hintergrundgrafiken ein. (Screenshot: Made By Vadim)

Der russische Designer „Vadim“ setzt Polygone dezent im Hintergrund und markant für sein Profilfoto ein.

Made By Vadim

Hush Flow

Hushflow
Hush Flow kombiniert Polygon-Design-Illustrationen mit klassischen Illustrationen. (Screenshot: Hush Flow)

Die Landingpage der Kollaborations-Plattform „Hushflow“ nutzt ein Key-Visual im Polygon-Stil in Kombination mit klassischen Illustrationen.

Hush Flow Webseite

Sanissimo

Sanissimo Polygon Design
Sanissimo wandelt das Polygon Design etwas abund texturiert die jeweiligen Flächen. (Screenshot: Sanissimo)

Der Stil von Sanissimo tanzt in dieser Liste ein wenig aus der Reihe, gehört aber immer noch zum Polygon-Trend. Das Unternehmen setzt auf texturierte Polygone und erzielt so einen Scherenschnitt-Effekt auf der Webseite.

Santissimo Webseite

Fazit

Das „Polygon-Design" als Weiterführung des beliebten Flat-Design-Trends zu bezeichnen, scheint ein wenig weit hergeholt. Ja, es ist zweidimensional. Aber nein, es steht nicht alleine da und kann auch dreidimensionale Formen abbilden. Viel mehr geht es um die Erstellung von Gestaltungs-Konstanten und Grafiken mit Polygonen, um verschiedene Effekte in Kombination mit anderen Stilrichtungen zu erzielen.

Was haltet ihr von dem Trend?

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

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

t3n 36 content teaser

Social-Media-Marketing im B2B

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

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

Geheimnisse eines JavaScript-Ninjas

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

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

Foto und Video mit Raspberry Pi

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

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

Wie schätzt man in agilen Projekten

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

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

Digital Adaptation

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

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

Google Analytics

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

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

Think Content!

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

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

Responsives Design mit WordPress

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

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