Responsive Webdesign | t3n News News, Infos, Tipps und aktuelle Artikel zu Responsive Webdesign 2014-09-22T09:08:10Z t3n Redaktion http://t3n.de/tag/responsive-webdesign Die Basics des Responsive Webdesign [Infografik] http://t3n.de/news/basics-responsive-webdesign-568195/ 2014-09-22T09:08:10Z
Je schneller die Zahl der mobilen Internetnutzer steigt, desto dringender wird die Frage, wie sich Website-Inhalte auf verschiedenen Endgeräten optimal darstellen lassen. Ein möglicher …

Je schneller die Zahl der mobilen Internetnutzer steigt, desto dringender wird die Frage, wie sich Website-Inhalte auf verschiedenen Endgeräten optimal darstellen lassen. Ein möglicher Lösungsansatz ist Responsive Webdesign – die wichtigsten Basics zeigt eine neue Infografik.

Responsive Webdesign: Grundvoraussetzung für die mobile Kommunikation

Nach den Analysten von Morgan Stanley wird die Zahl der mobilen Internetnutzer die der Desktop-Surfer noch vor Ende 2014 endgültig übersteigen. Auch in Deutschland ist der Trend eindeutig: Schon 2013 lag die Zahl der Internetnutzer, die von mobilen Endgeräten aus auf das Netz zugreifen, bei 51 Prozent – im Vergleich zu nur 37 Prozent im Vorjahr. In der Altersgruppe der 16–24-Jährigen stieg der Anteil der mobilen Internetnutzer innerhalb eines Jahres sogar von 59 auf 81 Prozent.

Wer das Internet nutzt, um seine Zielgruppen zu erreichen – und dabei nicht nur auf vorhandene Infrastrukturen wie Facebook setzt – sollte auf diese Entwicklung reagieren. Denn eine Seite, die aufgrund langer Ladezeiten und endlosem Scrolling für mobile Nutzer zur Tortur wird, konvertiert nicht – oder zumindest wesentlich schlechter als das Desktop-Pendant.

Einen Ausweg verspricht seit einiger Zeit das Responsive Webdesign, ein Gestaltungsprinzip, mit dessen Hilfe der Inhalt einer Website sich flexibel an die Gegebenheiten des jeweiligen Bildschirms beziehungsweise Endgerätes anpasst.

Infografik zeigt die Basics des Responsive Webdesign auf einen Blick

Einen Überblick darüber, wie genau Responsive Webdesign funktioniert und warum es sinnvoll ist, den eigenen Webauftritt entsprechend zu überarbeiten, liefert die folgende Infografik. Wer sich die wichtigsten Basics schnell noch einmal vor Augen rufen möchte oder einen Kunden oder Geschäftspartner vom Nutzen der Darstellungsform überzeugen muss, findet hier eine anschauliche Hilfestellung.

Zum Vergrößern der Grafik einfach auf den unten stehenden Ausschnitt klicken.

Ihr wollt selbst eine Website in Responsive Webdesign umsetzen? Dann findet ihr in unserer Artikelreihe Responsive Webdesign hilfreiche Tipps.

Responsive_Webdesign_Basics_Ausschnitt
Die Basics des Responsive Webdesign. (Grafik: Verve)

via blog.hubspot.com

]]>
Lea Weitekamp
WebTech Conference 2014: „Alle müssen ein Verständnis aufbauen, wie modernes Webdesign funktioniert“ [Sponsored Post] http://t3n.de/news/webtech-conference-2014-alle-567390/ 2014-09-17T13:20:27Z
Vom 26. bis 29. Oktober findet die WebTech Conference in München statt. Die Themen: Responsive Webdesign, Continuous Delivery, Dev-Ops. Im Vorfeld spricht Frontend-Entwickler und SVG-Anhänger Sven …

Vom 26. bis 29. Oktober findet die WebTech Conference in München statt. Die Themen: , Continuous Delivery, Dev-Ops. Im Vorfeld spricht Frontend-Entwickler und SVG-Anhänger Sven Wolfermann über die wichtigsten Kniffe im Responsive-Webdesign-Umfeld.

Zur WebTech Conference 2014: SVG-Crack Sven Wolfermann im Interview

Die WebTech Conference 2014 findet vom 26. bis 29. Oktober in München statt und beleuchtet eine Fülle technischer und methodischer Konzepte, die für den Erfolg im Web von großer Bedeutung sind. Neben ihrer Kompetenz für Responsive (mit HTML5) und JavaScript steht die Konferenz auch für moderne Architektur- und Methodenthemen wie agile Vorgehensweisen, Continuous Delivery und Dev-Ops. Sämtliche Themen werden von mehr als 60 erfahrenen Speakern diskutiert, unter anderem von Sven Wolfermann mit seinem Vortrag „SVG – weniger Pixel, mehr Fun“.

WTC Sven WolfermannSven Wolfermann ist freier Webentwickler mit Schwerpunkt Frontend-Entwicklung (HTML5/CSS3/RWD) und lebt in Berlin. Seit 2003 ist er mit seiner Firma „maddesigns“ für Agenturen und Firmen tätig. Sven arbeitet seit drei Jahren ausschließlich in Responsive-Webdesign-Projekten, hält Vorträge und leitet Workshops zum Thema RWD. Er hat ein Faible für Performance-Optimierung und ein Augenmerk auf UX und Accessibility. Zudem twittert er liebend gern unter @maddesigns. Im Interview steht er uns Rede und Antwort.

Frage: Sven, seit einiger Zeit schon stemmst du Projekte im Responsive-Webdesign-Umfeld. Wo liegen da – neben den Bildern – deiner Meinung nach die größten Probleme?

Sven Wolfermann: Es gibt natürlich eine Reihe von Problemen, die auf Webworker zukommen, wenn es um Responsive Webdesign geht. Das betrifft nicht nur Frontend-Entwickler im speziellen, sondern das ganze Team. Alle müssen ein Verständnis dafür aufbauen, wie modernes Webdesign funktioniert. Das zieht demzufolge einen veränderten agilen Workflow nach sich, um effizient zu arbeiten und Fehler möglichst früh im Designprozess erkennen zu können und zu beheben. Technisch ist vieles möglich, aber oft lassen sich Fehler im Konzept und im Design schwerer beheben. Probleme bereiten sicher die große Varianz der Bildschirme und ihre hohe Auflösung, aber auch Performance und Content-Strategie.

Frage: Sprites dürften vor allem wegen der verschiedenen Display-Auflösungen zu Problemen führen – aber wieso nicht einfach ein zweites Icon-Sprite anlegen?

Wolfermann: Um auf dem Retina-Screen optimale Bild-Icons anzuzeigen, war schnell eine Lösung gefunden: einfach die Bilder beziehungsweise Sprites doppelt so groß anlegen. Das Problem, dass die Icons dann trotzdem nur in einer „Ansichtsgröße” vorliegen, bestand allerdings weiter. Man kann also das Icon nicht an einer anderen Stelle noch mal größer oder kleiner verwenden. Die Größe ist in Pixel gemeißelt. Icon-Fonts, also Schriften á la Dingbats, die Symbole anstelle von Buchstaben und Ziffern haben, wurden bisher als ein adäquates Mittel für skalierbare Icons eingesetzt.

Frage: Und was spricht gegen Icon-Fonts?

Wolfermann: Icon-Fonts lösen viele unserer Probleme, bringen aber auch neue mit sich. Eines der nervigsten ist sicher die Positionierung der Icons. Dazu gesellen sich Probleme wie die Zugänglichkeit oder dass diese „Buchstaben” nur einfarbig sind. Was erschwerend hinzukommt ist die Ladezeit, besonders wenn man große Icon-Font-Bibliotheken lädt, von denen man aber nur eine Hand voll Icons verwendet. Darüber hinaus werden Schriften später geladen als andere Assets und – speziell in WebKit-Browsern – die Anzeige des Textes wird solange angehalten, bis die Schrift geladen ist. Gerade mobil kann das einige Sekunden in Anspruch nehmen. Nicht zu vergessen ist, dass der Fallback für Icon-Fonts kompliziert ist. Sicherlich alles lösbar mit gewissen Aufwand, aber gefühlt ist das immer nur ein „Hack” gewesen.

Frage: Gibt es keine umfassenden und brauchbaren Alternativen?

Wolfermann: Eine gute Alternative sind SVG-Sprites. Man stelle sich vor, man erstellt Sprites wie gewohnt, die Sprite-Grafik aber nicht als PNG, sondern (mit Vektordaten) als SVG. Die kann man dann wie gewohnt als background-image mit background-position einbinden. Man kann aber noch weiter gehen. SVG-Inhalte können in modernen Browsern auch direkt in HTML integriert werden. Das hat den Vorteil, dass wir auf die SVG-Elemente mit CSS und JavaScript zugreifen und so auch Veränderungen vornehmen könnten. So kann man nicht nur Transitions und Animationen verwenden, man kann auch die SVG-spezifischen Eigenschaften wie stroke mit CSS verändern.

Frage: Wie so oft, will man schon fast sagen, eilt das SVG-Format zur Hilfe. Wo liegen hier weitere Vorteile?

Wolfermann: SVG bietet zudem die Möglichkeit, auf ein einzelnes Element einer ganzen Datei zu referenzieren, also einen Inhalt woanders darzustellen. Über <use xlink:href="" /> können die Inhalte ganz einfach an anderer Stelle ausgegeben werden. Die Icons können dann natürlich mehrfarbig sein und sogar SVG-Effekte verwenden. Die Einbindung ist zudem barrierefreier und semantisch korrekt. Weiterhin ist die Positionierung der Icons zum Text wesentlich verlässlicher.

Frage: SVGs lassen sich also intern und extern referenzieren – wozu rätst du persönlich?

Wolfermann: Extern natürlich. Das ist wie bei CSS oder JavaScript – extern referenzierte Dateien lassen sich cachen. Genauso ist es mit SVG, die Datei wird nur einmal geladen und dann in den Browsercache geworfen. Wenn man den Code der SVG-Datei intern einbindet, lädt man den Overhead bei jedem Seitenaufruf. Außerdem muss man darauf achten, dass dann die Sprite-Ebenen im sogenannten <defs>-Bereich liegen, da er nicht im Browser angezeigt wird. Sonst hat man die Icons doppelt in der Seite.

Frage: Gibt es Möglichkeiten, das zu automatisieren?

Wolfermann: Wie so oft ist der beliebte Ausspruch von Webentwicklern „dafür gibt es doch sicher ein Grunt-Modul!?” auch hier zutreffend. SVG-Store bietet die Möglichkeit, aus einzelnen SVG-Dateien ein Icon-Sprite zusammenzusetzen. Grunt-Iconizer kann das ebenfalls – und noch mehr. Das bekannte Modul Grunticon wird demnächst auch die Option für diese SVG-Sprites haben. Außerdem gibt es bereits Gulp-Module. Und auch der Online-Service Icomoon bietet die Möglichkeit, aus den gewählten Icons ein SVG-Sprite oder ein Icon-Font zu erstellen.

Frage: Das klingt nach der perfekten Allround-Lösung, oder gibt es noch einen Haken?

Wolfermann: Das größte Problem ist, man ahnt es vielleicht schon, der Internet Explorer. Obwohl der IE in den letzten Jahren zu Chrome und Firefox aufgeschlossen hat, können IE9-11 keine extern verlinkten SVG-Elemente mit <use> laden. Die JS-Library SVG4Everybody hilft hierbei und stellt gleichzeitig noch den Fallback für Browser, die SVG nicht unterstützen bereit.

Frage: Was ist deiner Meinung nach nun das geringere Übel?

Wolfermann: SVG-Icons sind die bessere Wahl, da sie vielseitiger sind. Arbeiten aber Redakteure im , die dann „mal schnell einen Text mit Icons ausstatten sollen”, ist die herkömmliche Variante mit Icon-Fonts sicher besser. Man sollte also abwägen, es ist nicht zwingend ein Für und Wider, sondern eine gute Ergänzung zum jetzigen Vorgehen.

Grundsätzlich sehe ich das immer so: Wenn eine Technik für 90 Prozent der Browser super funktioniert und sie meine Arbeit leichter macht, setze ich sie auch ein. Wenn ich mir für zehn Prozent der Browser (oder je nach Projekt noch weniger) dann einen sinnvollen Fallback überlegen muss, ist das okay. Das hindert mich aber nicht daran, die restlichen 90 Prozent der Browser optimal zu bedienen.

WebTech Conference: Jetzt anmelden und Android-Tablet erhalten

Alle Teilnehmer der WebTech Conference erhalten freien Zugang zur parallel stattfindenden International PHP Conference – zudem erhält man bei Anmeldung bis 25. September ein Android-Tablet geschenkt und spart mit den Frühbucherpreisen.

Alle Speaker der WTC im Überblick!

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

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

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

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

Wie FocusPoint funktioniert

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

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

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

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

FocusPoint einsetzen

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

NodeBB: Das kann die NodeJS-Foren-Software

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

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

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

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

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

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

Schicke Online-Umfragen mit Survmetrics

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

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

Survmetrics: Umfragen im responsiven Design

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

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

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

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

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

Icon Fonts

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

Focal Cropping

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

HTML

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

Listing 1

Dateigröße gering halten: Compressive Images

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

Conditional Loading

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

HTML/JavaScript

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

Listing 2

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

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

Conditional CSS

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

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

HTML/JavaScript

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

Listing 3

Vertical Media Queries

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

CSS

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

Listing 4

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

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

Media Queries Splitting

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

Fazit

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

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

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

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

Die Flut der Viewports

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

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

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

Flexible Layouts erfordern flexiblen Workflow

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

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

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

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

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

Mobile First

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

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

Content First

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

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

Designing im Browser

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

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

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

HTML-Prototyping: Edge Flow und Thinkin' Tags

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

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

Testing: Edge Inspect, Ghostlab und MIHTool

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

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

Fazit

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

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

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

t3n 36 content teaser

Social-Media-Marketing im B2B

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

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

Geheimnisse eines JavaScript-Ninjas

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

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

Foto und Video mit Raspberry Pi

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

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

Wie schätzt man in agilen Projekten

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

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

Digital Adaptation

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

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

Google Analytics

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

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

Think Content!

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

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

Responsives Design mit WordPress

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

  • Titel: Reponsive Design mit WordPress
  • Autor: Joe Casabona
  • Erscheinungsdatum: April 2014
  • Verlag/ISBN: dpunkt Verlag/978-3-86490-177-5
  • Preis/Umfang: 26,90 Euro/196 Seiten
]]>
Ilona Koglin
Grid – Eine einfache Einführung in Responsive Webdesign http://t3n.de/news/grid-responsive-webdesign-tutorial-544519/ 2014-05-24T11:42:17Z
Willst du schnell den Einstieg in Responsive Webdesign finden oder die Basics auffrischen? Mit diesem Tutorial ist beides kein Problem.

Willst du schnell den Einstieg in finden oder die Basics auffrischen? Mit diesem ist beides kein Problem.

Responsive Webdesign ist keine Zauberei: Dennoch ist die richtige Herangehensweise an die Herausforderungen einer responsiven Website eine Kunst für sich. Jeden Tag werden neue Techniken und Workflows für die Erstellung von Responsive-Webdesign-Projekten entwickelt und eingesetzt. Adam Kaplan bringt auf seiner Website ein wenig Ordnung in das Methoden-Chaos und erklärt grundlegende Sachverhalte im responsive Webdesign. Das Ergebnis ist nicht nur eine schicke, interaktive und responsive „Infografik“ sondern auch ein individuelles, responsives Grid für dein Projekt.

Display Fragmentierung
Die hohe Anzahl verschiedener Display-Größen und Auflösungen macht Responsive Webdesign zu einem Unverzichtbaren Werkzeug. (Grafik: Grid)

In seinem Mini-Tutorial erklärt Kaplan, für die, die es immer noch nicht mitbekommen haben, was es mit Begriffen wie Responsive Webdesign und Mobile First auf sich hat und gibt Einblick in die Arbeit mit Media Queries, Viewports und Normalizern und erklärt das Box-Model und wie man es am besten einsetzen kann. Im Anschluss lässt er die Kurzeinführung in die Entwicklung eines eigenen responsiven Grid-Systems münden.

Das Ergebnis ist eine neun Kilobyte große CSS-Datei, die eine grundlegende Vorlage für die Erstellung eines individuellen Mobile-First-Grid liefert, die du mit dem Wissen aus der Infografik ergänzen kannst.

Auf der Website von Grid erfährst du mehr. Im GitHub Repository von Grid kannst du den vollständigen Code des Projekts herunterladen.

]]>
Ilja Zaglov
Responsive Webdesign verkaufen: So sieht der optimale Workflow aus http://t3n.de/news/responsive-webdesign-verkaufen-545657/ 2014-05-18T15:33:10Z
Mit „Responsive Webdesign“ werden oft nur die technischen Komponenten in Verbindung gebracht – wie Breakpoints, Responsive Images und progressive Enhancement. Kein Wunder, dass RWD-Projekte zum …

Mit „Responsive Webdesign“ werden oft nur die technischen Komponenten in Verbindung gebracht – wie Breakpoints, Responsive Images und progressive Enhancement. Kein Wunder, dass RWD-Projekte zum Scheitern verurteilt sind. Denn ist deutlich mehr. Es ist eine (im Grunde gar nicht so) neue Sicht auf den Inhalt und benötigt vor allem ein komplett neues Vorgehensmodell. Und das will erst gelernt und anschließend verkauft werden.

Responsive Webdesign: Falsche Erwartungshaltung

Responsive Webdesign.
Responsive Webdesign: Jeder will möglichst schnell auf den Zug aufspringen.

Denn wie es bei Trends so ist, will jeder möglichst schnell auf den Zug aufspringen und daher muss selbstverständlich jeder Launch oder Relaunch in diesen Zeiten „responsive“ sein. Der Weg ist bei dieser Vorgehensweise aber leider nicht das Ziel und so werden Begrifflichkeiten vermischt, Hausaufgaben nicht bzw. nicht richtig gemacht, Kunden falsch beraten und insgesamt falsche Erwartungen gemacht.

Wenn wir uns das Internet und den Zugang dahin einmal vergegenwärtigen, stellen wir (für manche) erstaunliche Dinge fest: Es gibt immer mehr Zugangsgeräteklassen zum Internet: Desktop-Rechner, Laptop, Smartphone, Tablet, Phablet, Uhr, Navigationsgerät, Google Glass, Fernseher u.v.a.m. – nahezu alles, was ein Display hat, kann (und wird) internetfähig gemacht werden und wird auch aktiv genutzt.

Es gibt keinen definierten Zugangskontext mehr – so wird beispielsweise vermehrt mit dem Tablet oder Smartphone daheim auf der Couch oder aber auch während der Arbeitszeit gesurft, und das mit richtiger schneller Geschwindigkeit. Oder aber mit dem Laptop per Tethering unterwegs im Edge-Netzwerk. Aussage wie: „Wenn der User mit dem iPhone auf unsere Seite kommt, hat er nicht viel Zeit, da er ja mobil unterwegs ist“ sind mittlerweile komplett überholt. Egal wir groß das Display des Zugangsgeräts gerade ist – wir wissen nicht, wieviel davon gerade für die Anzeige der Website verwendet wird, der sichtbare Bereich entweder absichtlich oder programmatisch (z.B. durch Einbettung in andere Apps, wie z.B. Browser-Sicht innerhalb der Facebook App) eingeschränkt wird.

Wir können also keinerlei Voraussagen über die Nutzung unserer Website machen. Noch weniger Sinn macht es daher eine „Desktop-Seite“ zu entwickeln und anschließend eine „auf Mobil optimierte Seite“. Alles soll und wird eine Einheit werden – wir brauchen daher ganz schlicht eine Website, die sich an den zur Verfügung stehenden Platz anpassen – die also „responsive“ ist.

Der klassische Workflow im Responsive Webdesign

„Es geht nicht mehr darum, ein Design pixelgenau umzusetzen, es geht um den Kern des Internets“

Die RWD-Projekte lassen sich zurzeit in drei Kategorien einteilen. Neben denen, die den dahinterliegenden Prozess adaptiert haben, gibt es die, die die RWD gleichsetzen mit dem Ein- und Ausblenden von Elementen auf den verschiedenen Geräteklassen bzw. dem Verschieben von Content-Blöcken. Sicherlich führt dieser Ansatz zu einer „besseren“ Lösung – sie ist aber fern von „responsive“. Und die letzte Kategorie schließlich sind die Projekte, die Budget und Zeit auffressen und die am Ende postulieren, dass RWD entweder nicht funktioniert oder aber es keine Kunden dafür gibt, die „soviel“ Geld investieren müssen. Dabei ist RWD weder teuer noch schwierig – es benötigt „lediglich“ ein Aufbrechen jahrelang gelernter Prozesse.

Der erlernte und gelebte Workflow im Bereich Website-Erstellung ist allerorten gleich. Es werden Lasten und Pflichten ermittelt, anschließend werden die Anforderungen in ein hübsches Design verpackt. Nun erfolgt die Umsetzung des Designs in HTML/CSS und integriert dies ggf. in ein CMS. Schließlich kommt die Endabnahme – meist mit Pflichtenheft und Grafikdatei auf der einen Seite und dem Ergebnis (Website) auf der anderen Seite. Sind beide deckungsgleich, gilt die Arbeit als abgenommen.

Wo aber liegt das Problem in diesem Workflow, wenn man RWD machen will? Für RWD muss ein Umdenken auf allen Ebenen und bei allen Rollen (Entwickler, Management, Designer, Vertrieb, Kunde) stattfinden. Es geht nicht mehr darum, ein Design pixelgenau umzusetzen, es geht um den Kern des Internets – und zwar: Inhalte zielgruppengerecht in jedem zur Verfügung stehenden Medien optimal zu transportieren.

Der optimale RWD-Workflow ist agil

Der RWD-Workflow in seiner optimalen Ausprägung kann in zehn Abschnitte aufgeteilt werden. Je nach Projektgröße und Budget kann man den einen oder anderen Schritt auch weglassen, zusammenfassen oder minimieren – grundsätzlich wird damit aber die Qualität des Endergebnisses sinken. Alle nachfolgenden Schritte müssen zudem vom Kunden jeweils abgenommen werden.

  1. Entscheidungen – Festlegung aller RahmenparameterAm Angang muss man ganz klare Entscheidungen treffen – z.B. erstellt man eine Stakeholder-Matrix und legt fest, wer was entscheidet. Es darf dabei nur einen Entscheider für eine Sache geben. Man einigt sich zudem auf die wichtigsten Geräte und Browser, die später vollumfänglich getestet werden und auf die wahrscheinlich benötigten Breakpoints. Zudem erfolgt das Moodboard-Briefing und man erstellt natürlich das Wichtigste – den Vertrag.
  2. Content StrategyGetreu dem einzig richtigen und sinnvollen Motto im RWD – nämlich „Content first“ – fängt man nun an, den Content (sofern bereits vorhanden) zu sammeln, und zu bewerten. Dies führt zu einem Content Inventory, in dem alle Conten-Elemente eingetragen werden.
  3. Content WireframesMit Referenz aus dem Content Inventory können nun Content Wireframes erstellt werden, die die Position des Contents grob skizzieren. Dabei wird stets nach dem Prinzip „Mobile first“ vorgegangen. Nun geht man die in Schritt 1 vereinbarten Breakpoints durch und erstellt ähnliche Wireframes. Stellt man bereits hier fest, dass man mehr oder weniger Breakpoints benötigt, so kann man dies – ebenso vertraglich – an dieser Stelle ändern.
  4. Content erstellenHier wird nun jeglicher Content erstellt bzw. bereits vorhandener nach Prüfung genutzt. Dabei verwendet man nur Text und macht erste Auszeichnungen beispielsweise mit Markdown, AsciiDoc oder ReST. Diese werden dann mit einem geeigneten Konverter in pures Content-HTML (Text-Dummy) umgewandelt.
  5. Content-TestingDer Content-Dummy wird nun ausführlich getestet. Hier werden vor allem Menge, Verhältnis und Umbruch sichtbar.
  6. Moodboard / Style Tile Nun erfolgt die Illustration des visuellen Stils und der Stilrichtung mit Hilfe eines Moodboads oder besser eines Style Tiles. Damit entsteht bereits ein Look & Feel der Website und es werden einzelne Elemente (wie Farben, Überschriften, Textblöcke, Links, Listen, Abstände, Kästen, u.v.a.m) erstellt. Niemals allerdings ein Layout!
  7. Linear DesignAnschließend wird der Content-Dummy mit dem Basis-Design aus dem Style Tile angereichert. Dies geschieht anfangs noch linear. Erst hier ist nun also sichtbar, wie sich richtiger Content mit den richtigen Auszeichnungen verhält. Natürlich wird auch diese HTML-Datei in den vereinbarten Breiten und Browsern getestet.
  8. PrototypingJetzt sind alle Komponenten vorhanden, um einen richtigen Clickdummy aus dem Linear Design zu erstellen, der bereits das finale Layout umsetzt. Dieser entspricht idealerweise der späteren Website mit alle Funktionen und Elementen. Zusammen mit dem Kunden werden nun in einem iterativen Prozess alle Komponenten erarbeitet. Durch die Vorarbeit ist der Aufwand für das Testing nun deutlich kleiner.
  9. Geräte TestingWährend es in den vorangegangenen Schritten noch ausreichte, beispielsweise in Simulatoren zu testen, muss nun auf den realen Endgeräten getestet werden.
  10. ProduktionAn dieser Stelle ist der RWD-Prozess bereits zu Ende. Es wird nun ggf. die Integration in ein CMS oder Shop-System vorgenommen. Zudem wird die Backend-Programmierung und Integration in eventuelle Fremdsysteme vorgenommen.

RWD verkaufen

Während es „früher“ relativ einfach war, eine Website zu verkaufen, haben wir heute im RWD-Zeitalter ein leicht verändertes Portfolio. Der Beratungsanteil ist natürlich deutlich höher als früher, da einerseits dem Kunden Basis-Wissen in RWD mitgegeben werden muss. Zum anderen wird auch die Arbeit mit dem Kunden im RWD-Zeitalter intensiver, da der iterative Prozess engen Kundenkontakt voraussetzt.

Weiterhin werden Workshops einen großen Teil der Zusammenarbeit einnehmen – hier geht es vor allem um die Anforderungen, Entscheidungen, Inhalte, Wireframes, Clickdummy und die Prozesse generell. Als weiterer Bestandteil wird die Erstellung und Abstimmung von Mood Boards, Style Tiles und Linear Design Einzug in das Leistungsportfolio halten. Abschließend wird dann natürlich noch das Testing und die Produktion durchgeführt werden.

Nicht verkaufen allerdings sollte man die Erstellung und Umsetzung von PSD – oder generell von allen statischen Dokumenten und Layouts. Ebenso kann man RWD weder als AddOn auf einen bestehenden Auftritt „drauf setzen“ oder „später machen“.

Was kostet RWD?

Was kostet nun aber eine Website die dem Prozess des Responsive Webdesign folgt? Natürlich hängt die seriöse Beantwortung der Frage sicherlich mit der Größe und Komplexität der geplanten Website zusammen und vor allem – das ist wichtig – mit der Akzeptanz der Änderung des Prozesses. Hält man an der bisherigen klassischen Prozesskette kann man schnell auf 300 bis 800 Prozent der ursprünglichen Schätzung kommen - schlicht weil es nicht funktionieren kann.

Als Faustregel kann man zwischen 30 und 100 Prozent Mehraufwand bezogen auf alle Frontend relevanten Tätigkeiten zu einem Projekt ohne RWD ansetzen. Damit wird man immer günstiger fahren, als wenn das Projekt mit einer eigenen mobilen Website entwickelt wird. Aber – wie gesagt – immer vorausgesetzt man hat den RWD Prozess verinnerlicht und folgt diesem akribisch. Wichtig ist zudem diesen Prozess auch mit einem entsprechenden Vertrag abzusichern, der die agil Arbeitsweise zum Bestandteil hat.

Responsive Webdesign fängt also vor allem im Kopf an. Die Reduktion auf das Wesentliche zwingt alle Beteiligten die Pfade der letzten Jahre zu verlassen und eigentlich gar nicht so neue, bessere Wege zu gehen. Das Ergebnis ist es aber in jedem Fall wert.

Über die Autoren:

Florian Bender_webFlorian Bender ist langjähriger Kenner der Softwareentwickler-Szene und verfügt über ein exzellentes Netzwerk in die IT-Branche. Als Projektleiter des Entwickler-Events Developer Week, verbindet er Branchenwissen und neueste Trends aus den Bereichen .NET, Mobile und Web-Entwicklung zu einer Pflichtveranstaltung für Software Developer.

Patrick LorbacherlPatrick Lobacher ist Geschäftsführer der +Pluswerk GmbH, Consultant, Autor, Trainer, Programmierer, Speaker auf internationalen Kongressen und nicht zuletzt ein Digital Native bzw. liebevoll oft auch als Nerd bezeichnet. Patrick ist Referent auf der Developer Week am 14. bis 17. Juli 2014 in Nürnberg und spricht über Responsive Webdesign. Mehr Informationen: www.developer-week.de

]]>
t3n Redaktion