Responsive Webdesign | t3n News News, Infos, Tipps und aktuelle Artikel zu Responsive Webdesign 2016-01-04T11:31:55Z t3n Redaktion http://t3n.de/tag/responsive-webdesign Responsive Webdesign: 18 kostenlose Tools und Extensions zum Testen deiner Seite http://t3n.de/news/responsive-webdesign-tools-380139/ 2016-01-04T11:31:55Z
Beim Responsive Webdesign können Tools und Test-Werkzeuge viel Zeit sparen. Das einfache Umschalten zwischen Viewport-Größen vereinfacht die Arbeit enorm. Wir stellen euch 18 kostenlose Tools, …

Beim können Tools und Test-Werkzeuge viel Zeit sparen. Das einfache Umschalten zwischen Viewport-Größen vereinfacht die Arbeit enorm. Wir stellen euch 18 kostenlose Tools, Browser-Extensions und Bookmarklet dafür vor.

Responsive Webdesign: Tools für die Viewport-Vorschau

Wenn man sein Website-Layout alle paar Sekunden aktualisieren und gleichzeitig für verschiedene Ausgabegrößen testen will, ist man mehr mit dem Ändern des Browserfensters beschäftigt als mit den eigentlichen Anpassungen. Zum Glück aber gibt es etliche Tools zum Testen von Responsive Webdesign: Online-Tools, Browser-Erweiterungen und Bookmarklets.

Sie alle haben ihre Vor- und Nachteile, die wir uns für euch angeguckt haben. Und sollten wir euren Favoriten vergessen haben: Ergänzt ihn doch einfach in den Kommentaren. Wir überarbeiten diesen Artikel regelmäßig und freuen uns über jeden Tipp!

1: Am I Responsive?

Das Responsive-Webdesign-Tool „Am I Responsive?“ mit einem Test der t3n-Seite.
Responsive-Webdesign-Tools: „Am I Responsive?“ mit einem Test der t3n-Seite.

Das Tool „Am I Responsive?“ von Justin Avery gehört zwar nach wie vor zu den intuitivsten Test-Tools, die es gibt, hat aber auch einen entscheidenden Nachteil. Nach Eingabe der URL spuckt die Seite das Layout in nur vier Größen aus: Desktop (1600 x 992 Pixel), Laptop (1280 x 802 Pixel), Tablet (768 x 1024 Pixel) und Mobile (320 x 480 Pixel). Diese Größen zeigen schon: Das letzte Update des Tools ist ein paar Jahre her, genau genommen fünf. Inzwischen gibt es also etliche neue Viewport-Größen, die Am I Reponsive nicht mehr abdeckt. Nette kleine Spielerei: Die vier Devices, die euch als Apple-Geräte angezeigt werden, könnt ihr per Drag & Drop auf dem Bildschirm hin- und herschieben. Wenn ihr euch übrigens für die Entstehungsgeschichte des Tools interessiert – die hat Avery hier aufgeschrieben.

2: #deviceponsive

Das Tool #deviceponsive bei der Arbeit.
Das Tool #deviceponsive bei der Arbeit.

Ähnlich schlicht wie „Am I Responsive?“ kommt auch #deviceponsive von Javier Rivera daher. Alle Ausgabegrößen werden einfach untereinander angezeigt, im Header der Seite könnt ihr zudem die Hintergrundfarbe festlegen oder ein eigenes Logo einbinden, um die Screenshots anschließend zu teilen. Testen könnt ihr Seiten bei diesem Tool für folgende Größen: Macbook (1280 x 800 Pixel), iPad portrait (768 x 1024 Pixel), iPad landscape (1024 x 768 Pixel), Kindle portrait (600 x 1024 Pixel), Kindle landscape (1024 x 600 Pixel), iPhone portrait (320 x 480 Pixel), iPhone landscape (480 x 320 Pixel), Galaxy portrait (240 x 320 Pixel) und Galaxy landscape (320 x 240 Pixel). Einige Größen mehr als Am I Responsive – dennoch ist die Auswahl auch hier beschränkt.

3: Responsive Web Design Testing Tool

Das „Responsive Web Design Testing Tool“ von Matt Kersley.

Beim Online-Test-Tool von Matt Kersley gibt man die URL der zu testenden Website ein und bekommt dann fünf Vorschauvariationen angezeigt: kleine Smartphones, iPhone, kleine Tablets, iPad angezeigt. Auch das ist nicht gerade üppig, für einfache Tests aber genügt das Tool. Wer es lieber als Bookmarklet einsetzen will, kann die von Ben Keen bereit gestellte Lösung dafür nutzen.

4: Responsinator

Der Responsinator – ein weiteres Tool, um Responsive Webdesign zu testen.

Der Responsinator von Tama Pugsley und Andy Hovey bietet nach Eingabe der eigenen Website-URL zwölf vordefinierte Vorschauvarianten für die gängigsten Endgeräte iPhone, iPhone Plus, iPad, Kindle und Android-Geräte. Auch Responsinator ist neben der Webversion als Bookmarklet verfügbar.

5: Demonstrating Responsive Design

Demonstrating Responsive Design.

Jamie Reynolds hat mit Demonstrating Responsive Design ein Online-Tool entwickelt, mit dem man nach Eingabe der eigenen Website-URL eine schicke Vorschau in allerdings auch nur fünf Endgerätgrößen erhält. Jamies Tool ist trotzdem besonders gut für die schnelle Präsentation von Responsive Websites für Kunden geeignet, da sich zwischen den Geräten schnell hin- und herschalten lässt.

Auf der zweiten Seite haben wir weitere Tools für euch unter die Lupe genommen, unter anderem Responsivepx, ResizeMyBrowser und Screenfly.

]]>
Florian Blaschke
Für Touch, Tap und Fernbedienung: So geht Usability-Optimierung für Responsive Webdesign http://t3n.de/news/usability-optimierung-responsive-webdesign-665010/ 2015-12-17T11:03:09Z
Wenn eine Webseite auf allen Geräten – vom Smartphone über den Desktop bis zum Smart TV – optimal dargestellt werden soll, kommt heute Responsive Webdesign zum Einsatz. Doch auch das beste …

Wenn eine Webseite auf allen Geräten – vom Smartphone über den Desktop bis zum Smart TV – optimal dargestellt werden soll, kommt heute Responsive Webdesign zum Einsatz. Doch auch das beste Design ist nicht automatisch nutzerfreundlich. Damit eine responsive Seite auch bei der Usability punktet, muss die Navigation konsistent sein und die unterschiedlichen Eingabemethoden müssen berücksichtigt werden. Worauf Designer und Entwickler achten müssen, erklärt Simon Loebel, COO der UDG United Digital Group.

Navigation konsistent gestalten

Das Responsive Webdesign sollte konsistent sein, damit sich der User auf Desktop oder Mobilgerät zurechtfindet. (Grafik: Shutterstock)
Das Responsive Webdesign sollte konsistent sein, damit sich der User auf Desktop oder Mobilgerät zurechtfindet. (Grafik: Shutterstock)

Entscheidende Faktoren für gelungenes Responsive Webdesign sind die Wiedererkennbarkeit und die Konsistenz des Designs. Aufgrund der unterschiedlichen Bildschirmgrößen werden Layout und die Anordnung des Contents von Auflösung zu Auflösung anders dargestellt. Zentrale Elemente wie zum Beispiel Logos und Farbwelten sollten dennoch einheitlich bleiben. Idealerweise findet sich der User in allen Viewports zurecht, ohne dabei den Aufbau sowie das Navigations- und Contentschema neu erlernen zu müssen.

1. Navigation

Eine in der Bedienung konsistente Navigation ist aufgrund der unterschiedlichen Platzverhältnisse schwer für alle Bildschirme und Viewports umzusetzen. Deshalb sollte in erster Linie darauf geachtet werden, dass die inhaltliche Taxonomie und Benennung der Navigation auf allen Geräten hinweg konsistent bleibt, während sich der funktionale Aspekt der Navigation unterscheiden kann.

2. User-Interface-Elemente

Neben Logo und Farbwelt sollte auch das Design der User-Interface-Elemente möglichst einheitlich sein. So wird gewährleistet, dass der Nutzer einen Button oder einen Link als solchen erkennt, egal welchen Viewport er betrachtet. Auch die Funktion der Elemente sollte einer möglichst großen Konsistenz unterliegen, wobei hier Anpassungen an die Anforderungen der Viewports und Eingabemethoden sinnvoll sind. Beispielsweise müssen alle Funktionen und Informationen auf einem Gerät mit Touchbedienung auch ohne Mouse-Over erreichbar sein.

3. Content und Funktion

Smartphone-Nutzer möchten mit ihrem Gerät Zugriff auf alle Funktionen und Inhalte haben, die eine Webseite auf dem Desktop bietet. Auch wenn Funktionen und Inhalte auf verschiedenen Endgeräten unterschiedlich angeordnet sind und präsentiert werden, sollten diese den Nutzern auf allen Viewports verfügbar sein.

4. Struktur

Auf kleineren Viewports ist es schwierig, komplexe Strukturen darzustellen. Deshalb kann es je nach Fall sinnvoll sein, Verschachtelungen auf einer Seite aufzulösen und gegebenenfalls auf mehrere Seiten zu verteilen. Alternativ sollten vor allem für die kleinen Viewports passende Symbole gewählt werden, die eine Verschachtelung auf einer Seite verdeutlichen. Gute Möglichkeiten sind Akkordeons oder Reiter. Deutliche visuelle Hierarchieebenen in Headlines sowie Trennlinien zwischen Inhaltsblöcken heben die Struktur weiter hervor.

Eingabemethoden berücksichtigen

Gern vergessen aber trotzdem wichtig: In Zeiten von Smart-TVs werden Websites auch oft per Fernbedienung bedient. (Grafik: Shutterstock)
Gern vergessen aber trotzdem wichtig: In Zeiten von Smart-TVs werden Websites auch oft per Fernbedienung bedient. (Grafik: Shutterstock)

Die Bandbreite der Geräte zur Betrachtung von Websites nimmt weiter zu. Zu den bereits weit verbreiteten Desktop-PCs, Tablets und Smartphones kommen heutzutage Smartwatches und Smart-TVs. Das bedeutet, dass – zusätzlich zu den Anforderungen an Darstellungsgröße und Layout der Inhalte – die jeweilige Eingabemethode des Device berücksichtigt werden muss.

In Bezug auf die gängigen Geräte zur Betrachtung von Websites kann zwischen drei grundsätzlich unterschiedlichen Eingabemethoden unterschieden werden:

  • Maus- und Tastatur-Eingabe: Diese Methoden der Eingabe sind üblicherweise auf Desktop-PCs und Laptops verfügbar.
  • Finger-Eingabe und virtuelle Touch-Tastatur: Vor allem auf mobilen Geräten wie Smartphones und Tablets erfolgt die Eingabe direkt durch den Finger des Nutzers.
  • Fernbedienung und virtuelle Non-Touch-Tastatur: Für Smart-TVs müssen neue Eingabemethoden in Betracht gezogen werden. Da sich der Markt an ausgefeilten Fernbedienungen mit Laser, Touch-Rad oder Joystick erst noch entwickelt, sollte bei der Bedienung des Interface am TV-Gerät von eingeschränkten Eingabemethoden, nämlich einer klassischen Fernbedienung nur vier Pfeiltasten und einer Bestätigungstaste, ausgegangen werden.

Die Größe des Betrachtungsgeräts sowie der übliche Abstand des Nutzers zum Gerät haben Einfluss auf die Auflösung und sollten auch bei der Gestaltung und Programmierung von Websites bedacht werden.

]]>
Simon Loebel
30 kostenlose WordPress-Themes für Responsive Design http://t3n.de/news/kostenlose-wordpress-themes-responsive-webdesign-376838/ 2015-11-13T09:11:24Z
Das Angebot an kostenlosen Templates für die eigene Website wächst stetig. Auch die Auswahl an Wordpress-Themes, die Responsive Webdesign unterstützen, ist inzwischen beachtlich.

Das Angebot an kostenlosen für die eigene Website wächst stetig. Auch die Auswahl an , die unterstützen, ist inzwischen beachtlich. Zur besseren Übersicht hier eine Auswahl von 30 kostenlosen und responsiven WordPress-Themes.

Responsive Design bei WordPress-Themes

Immer mehr Nutzer surfen über mobile Endgeräte im Internet. Ob unterwegs mit dem Smartphone oder auf der Couch mit dem Tablet: Neue Nutzungsgewohnheiten verändern die Anforderungen an Websites jedweder Machart. Mit einem responsiven WordPress-Theme verbessert ihr die Usability und Lesbarkeit eurer jetzigen und eurer zukünftigen Besucher.

Schon jetzt haben Notebooks und Smartphones den Desktop als beliebtesten Zugangsweg ins Internet hinter sich gelassen, wie die ARD/ZDF-Onlinestudie 2014 zeigt. Und auch der Anteil der Nutzer, die Internetinhalte über das Tablet abrufen, hat sich von 16 Prozent im Jahr 2013 auf 28 Prozent im Jahr 2014 gesteigert.

Vieles spricht daher für ein WordPress-Theme, das auch für mobile Endgeräte optimiert wurde.

30 WordPress-Themes für Responsive Design

Die folgenden WordPress-Themes sind durch Responsive Webdesign für alle Endgeräte optimiert. Wer auf eigene Faust eine responsive Website erstellen will, sollte sich stattdessen in die Einzelteile der folgenden Artikelserie einlesen:

  1. Responsive Webdesign, Teil 1: Layout- und Textdarstellung
  2. Responsive Webdesign, Teil 2: Das Navigationsmenü
  3. Responsive Webdesign, Teil 3: Darstellung von Galerien und Videos

1. Twenty Sixteen von WordPress

Das neue Theme für WordPress 4.4. (Screenshot: WordPress.org)
Das neue Theme für WordPress 4.4. (Screenshot: WordPress.org)

Funktioniert erst ab WordPress 4.4

2. Twenty Fifteen von WordPress

Das Standard-Theme des letzten Jahres. (Screenshot: WordPress.org)
Das Standard-Theme des letzten Jahres. (Screenshot: WordPress.org)

3. Chosen von Ben Sibley

Das WordPress-Theme Chosen bietet große Bilder. (Screenshot: WordPress.org)
Das WordPress-Theme Chosen bietet große Bilder. (Screenshot: WordPress.org)

4. Aperture von Michael Van Den Berg

Richtet sich an Fotografen: Aperture. (Screenshot: WordPress.org)
Richtet sich an Fotografen: Aperture. (Screenshot: WordPress.org)

5. Silvia von Theme Junkie

Ebenfalls ein interessantes Theme für Fotografen. (Screenshot: WordPress.org)
Ebenfalls ein interessantes Theme für Fotografen. (Screenshot: WordPress.org)

6. bootcake von imranemu

Schlicht und Orange kommt Bootcake daher. (Screenshot: WordPress.org)
Schlicht und Orange kommt Bootcake daher. (Screenshot: WordPress.org)

7. Libretto von automattic

Schicke Typo für Schreiber bietet Libretto. (Screenshot: WordPress.org)
Schicke Typo für Schreiber bietet Libretto. (Screenshot: WordPress.org)

8. Plain Blog von NavThemes

Das Plain-Blog-Theme ist recht schlicht mit farblichen Akzenten. (Screenshot: WordPress.org)
Das Plain-Blog-Theme ist recht schlicht mit farblichen Akzenten. (Screenshot: WordPress.org)

9. azeria von teFox

Azeria legt den Fokus wieder auf Bild-Präsentation. (Screenshot: WordPress.org)
Azeria legt den Fokus wieder auf Bild-Präsentation. (Screenshot: WordPress.org)

10. BadJohnny von ThemeVan

BadJohnny legt den Fokus auf den Text. (Screenshot: WordPress.org)
BadJohnny legt den Fokus auf den Text. (Screenshot: WordPress.org)

11. SoSimple von fervillz

Der Name sagt alles: Hier geht es schlicht zu. (Screenshot: WordPress.org)
Der Name sagt alles: Hier geht es schlicht zu. (Screenshot: WordPress.org)

12. Libre von automattic

Das Theme richtet sich an Vielschreiber und setzt den Fokus entsprechend. (Screenshot: WordPress.org)
Das Theme richtet sich an Vielschreiber und setzt den Fokus entsprechend. (Screenshot: WordPress.org)

13. Polymer von grvrulz

Polymer hat sich von der Design-Sparche Material Design inspirieren lassen. (Screenshot: WordPress.org)
Polymer hat sich von der Design-Sparche Material Design inspirieren lassen. (Screenshot: WordPress.org)

14. Kent von BinaryMoon

Kent bietet neben dem schlichten Inhaltsbereich auf der rechten Seite ein großes Bild auf der linken. (Screenshot: WordPress.org)
Kent bietet neben dem schlichten Inhaltsbereich auf der rechten Seite ein großes Bild auf der linken. (Screenshot: WordPress.org)

15. Publication von automattic

Publication bringt eine prominente Sidebar mit zwei Spalten mit. (Screenshot: WordPress.org)
Publication bringt eine prominente Sidebar mit zwei Spalten mit. (Screenshot: WordPress.org)

16. Gazette von automattic

Gazette bietet eine große Grid-Ansicht von letzten Beiträgen im Header-Bereich. (Screenshot: WordPress.org)
Gazette bietet eine große Grid-Ansicht von letzten Beiträgen im Header-Bereich. (Screenshot: WordPress.org)

17. Readit von modernthemesnet

Readit-Theme. (Screenshot: WordPress.org)
Readit-Theme. (Screenshot: WordPress.org)

18. Cerauno von automattic

Dieses Theme nutzt wirklich die komplette verfügbare Breite. (Screenshot: WordPress.org)
Dieses Theme nutzt wirklich die komplette verfügbare Breite. (Screenshot: WordPress.org)

19. Oria von Vlad

Oria stellt die Beiträge auf der Startseite in einem Masonry-Layout vor. (Screenshot: WordPress.org)
Oria stellt die Beiträge auf der Startseite in einem Masonry-Layout vor. (Screenshot: WordPress.org)

20. Canard von automattic

Canard bietet einen schicken Bereich für Featured-Beiträge. (Screenshot: WordPress.org)
Canard bietet einen schicken Bereich für Featured-Beiträge. (Screenshot: WordPress.org)

21. Flat von YoArts

Flat verzichtet auf alles Räumliche. (Screenshot: WordPress.org)
Flat verzichtet auf alles Räumliche. (Screenshot: WordPress.org)

22. Apex von Ben Sibley

Apex setzt auf große Beitragsbilder und eine klare Typo. (Screenshot: WordPress.org)
Apex setzt auf große Beitragsbilder und eine klare Typo. (Screenshot: WordPress.org)

23. Vito von Nico Andrade

Auch Vito ist schön schlicht. (Screenshot: WordPress.org)
Auch Vito ist schön schlicht. (Screenshot: WordPress.org)

24. Founder von Ben Sibley

Founder kommt mit einem einspaltigen Layout daher. (Screenshot: WordPress.org)
Founder kommt mit einem einspaltigen Layout daher. (Screenshot: WordPress.org)

25. Coherent von automattic

Coherent fällt mit dem Kontrast zwischen Viewportfüllendem Header-Bild und schlichtem Inhaltsbereich auf. (Screenshot: WordPress.org)
Coherent fällt mit dem Kontrast zwischen Viewportfüllendem Header-Bild und schlichtem Inhaltsbereich auf. (Screenshot: WordPress.org)

26. Forefront von Thomas Usborne (Child-Theme für GeneratePress)

Das Forefront-Theme bietet eine Sidebar links und rechts. (Screenshot: WordPress.org)
Das Forefront-Theme bietet eine Sidebar links und rechts. (Screenshot: WordPress.org)

27. Receptar von WebMan Design und Oliver Juhas

Receptar kommt mit einem ungewöhnlichen Startseitenlayout. (Screenshot: WordPress.org)
Receptar kommt mit einem ungewöhnlichen Startseitenlayout. (Screenshot: WordPress.org)

28. Drop von Ben Sibley

Das responsive Drop-Theme. (Screenshot: WordPress.org)
Das responsive Drop-Theme. (Screenshot: WordPress.org)

29. Heinrich von winklerin

Das kostenlose Heinrich-WordPress-Theme. (Screenshot: WordPress.org)
Das kostenlose Heinrich-WordPress-Theme. (Screenshot: WordPress.org)

30. Origamiez von Alex Kalh

Origamiez. (Screenshot: WordPress.org)
Origamiez. (Screenshot: WordPress.org)

Wir hoffen, dass wir euch einige neue Themes zeigen konnten.

Kennt ihr weitere kostenlose WordPress-Themes, die responsive sind und hier nicht fehlen dürfen?

Letztes Update des Artikels: 13. November 2015. Der Originalartikel stammt von Lars Budde.

]]>
Florian Brinkmann
Responsive Design: Zehn kostenlose Webdesign-Templates http://t3n.de/news/responsive-design-zehn-455073/ 2015-10-25T07:30:03Z
Das Web findet längst nicht mehr nur auf dem Desktop statt und so ist es kein Wunder, dass Responsive Design in aller Munde ist. Damit passen sich die Webseiten dem Endgerät des Besuchers an und …

Das Web findet längst nicht mehr nur auf dem Desktop statt und so ist es kein Wunder, dass Responsive Design in aller Munde ist. Damit passen sich die Webseiten dem Endgerät des Besuchers an und bieten im Optimalfall perfekte User-Experience bei jeder Viewport- oder Gerätegröße. Wer sich beim Gestalten von responsiven Webseiten noch nicht zu Hause fühlt oder gerne von fertigen Projekten lernt, findet unter den folgenden Responsive-Design-Layouts, was er braucht.

Designa

Designa Template Demo
Designa Template Download

Responsive HTML5/CSS3 Template

Response

Buzz

Modus

Liquid Gem

Folder

Proximet

Serendipity

Halftone

Weiterführende Links

]]>
Ilja Zaglov
Diese 30 kostenlosen WordPress-Themes für Responsive Design musst du kennen http://t3n.de/news/diese-30-kostenlosen-670048/ 2015-10-21T14:49:49Z
Responsive Webdesign wird quasi zum Standard im Web. Wenn du WordPress nutzt, solltest du dir daher die folgenden 30 Themes nicht entgehen lassen. Alle haben ein Responsive Design und sind kostenlos.

Responsive Webdesign wird quasi zum Standard im Web. Wenn du WordPress nutzt, solltest du dir daher die folgenden 30 Themes nicht entgehen lassen. Alle haben ein Responsive Design und sind kostenlos.

1. Twenty Sixteen von WordPress

Das neue Theme für WordPress 4.4. (Screenshot: WordPress.org)
Das neue Theme für WordPress 4.4. (Screenshot: WordPress.org)

Funktioniert erst ab WordPress 4.4

]]>
t3n Redaktion
Webflow: Intuitives Online-Tool für Responsive Webdesign integriert CMS-Funktionen http://t3n.de/news/responsive-webdesign-intuitives-452281/ 2015-10-08T13:07:20Z
Responsive Webdesign ist heute Standard. Mit Webflow gibt es eine Online-Plattform, die vieles leichter machen will. An Bord hat der Service Werkzeuge und Hilfsmittel für HTML5 und CSS3 sowie einen …

Responsive Webdesign ist heute Standard. Mit Webflow gibt es eine Online-Plattform, die vieles leichter machen will. An Bord hat der Service Werkzeuge und Hilfsmittel für HTML5 und CSS3 sowie einen hervorragenden WYSIWYG-Editor. Jetzt sind auch vollständige CMS-Features integriert worden.

Update vom 8. Oktober 2015: Webflow hat seinen Online-Dienst um umfangreiche CMS-Funktionen erweitert. Damit kann aus verschiedenen Quellen dynamischer Content in die gebaute Website fließen – und das nach wie vor, ohne den Code anfassen zu müssen. Außerdem kann gemeinsam an den Inhalten gearbeitet werden, die sich per Frontend-Editing anpassen lassen. Neu dabei sind unter anderem auch die Kollektionen und dynamische Listen. Die Website von Webflow bietet einen umfassenden Überblick über die Features. Was das CMS Neues mitbringt, beschreiben die Macher in diesem Blogpost.
Responsive Webdesign mit WYSIWYG-Editor.

Ein bisschen erinnere Webflow an Adobe Edge, schreibt Jolie O'Dell von VentureBeat. Kein schlechter Vergleich. Oben kann der Nutzer zwischen verschiedenen Ansichten hin- und herschalten (Desktop- Tablet- und Phone-Ansicht), in den Sidebars bietet Webflow etliche Werkzeuge zur Gestaltung von Webseiten. Durch die Fülle an CSS3-Klassen kann man entweder mit Hilfe einer grafisch angelegten Übersicht oder mit der Listenansicht navigieren. War das Hinzufügen eigener Klassen in der Demo-Version noch deaktiviert, bietet Workflow diese Funktion jetzt in der finalen Version.

Responsive Webdesign per Drag & Drop

Wer dabei irgendwann den Überblick verliert, dem bietet Webflow den sogenannten „X-Ray-Mode“. In dem blendet das Tool alle Farben aus und reduziert das Design auf das Nötigste. Ein tolles Feature gegen die eigenen Betriebsblindheit. Wirklich oft brauchen werden Nutzer diese Funktion jedoch nicht, so aufgeräumt und intuitiv wie Webflow daher kommt. Per Drag & Drop lassen sich Elemente verschieben, mit Hilfe der Regler in der rechten Sidebar können Elemente vergrößert, Abstände verändert, Schriftarten zugewiesen oder Farben ausgewählt werden – und vieles mehr. Ein Toggle schaltet darüber hinaus wahlweise das zugrunde liegende Grid ein und aus, ein Vorschau-Modus zeigt dem Nutzer, wie sein Projekt aktuell aussieht.

Responsive Webdesign – mit einem Klick zum fertigen Projekt

Einen Überblick über alle Features, die Webflow an Bord haben soll, haben die Entwickler auf ihrer Seite zusammengestellt. Eines davon ist der Export der fertigen Daten: Ist ein Projekt abgeschlossen, genügt ein Klick und Webflow spuckt alle nötigen HTML5- und CSS3-Dateien aus. Und auch andersherum soll Webflow funktionieren, eine Import-Funktion für existierende Seiten sei in Planung, ließen die Köpfe hinter Webflow, Vlad und Sergie Magdalin, kürzlich über Twitter verlauten.

Wer sich vor dem Ausprobieren erst einmal mit Webflow vertraut machen will, für den gibt es etliche Tutorials, die die grundlegenden Funktionen erklären.

Veröffentlichungsdatum des Original-Artikels: 26. August 2013

]]>
Florian Blaschke
Adaptive oder Responsive? Über die Vor- und Nachteile der beiden Design-Ansätze http://t3n.de/news/adaptive-responsive-design-637267/ 2015-09-13T09:01:11Z
Adaptive oder Responsive Webdesign? Eine berechtigte Frage – die Antwort drauf lest ihr in unserer Fortsetzung von „Das ist gar nicht responsive! Ein Guide gegen Bullshit-Bingo“.

Adaptive oder Responsive Webdesign? Eine berechtigte Frage – die Antwort drauf lest ihr in unserer Fortsetzung von „Das ist gar nicht responsive! Ein Guide gegen Bullshit-Bingo“.

Nach geschnitten Brot und Widescreen-Displays ist Responsive Design sicher das Beste, was Entwicklern passiert ist. Schon vor zwei Jahren habe ich versucht, in einem ausführlichem Guide Licht in die verschiedenen Lösungen zu bringen. Aber wie sieht es heute aus? Ist Adaptive Design besser als Responsive Design – oder umgekehrt? Spoiler: Die Wahrheit liegt irgendwo dazwischen.

Dabei gibt es mehr als nur die zwei oben genannten. Elastic und Fluid Design existieren zwar auch, sind aber nicht im 0815-Webdesign zu finden. Schade, denn obwohl sie aufwändiger umzusetzen sind, können Entwickler eine ganz andere – und vielleicht bessere – UX gestalten.

Adaptive vs. Responsive: Wo liegen die Unterschiede?

Adaptive oder Responsive Design? (Grafik: Shutterstock)
Adaptive oder Responsive Design? (Grafik: Shutterstock)

Aber wieder zurück zur Frage, welcher Ansatz besser ist: Der Hauptunterschied ist, dass im adaptiven Ansatz via Breakpoints versucht wird, ein an ein spezielles Gerät angepasstes Design auszuliefern. Dabei wird das Gerät auf Seiten von CSS durch die Auflösung erkannt. Darüber hinaus gibt es noch andere Möglichkeiten, zum Beispiel über den Browser-Agent, das Gerät zu erkennen.

Dieser Artikel dreht sich aber um die zwei Ansätze und nicht darum, wie sie implementiert werden können. Design löst Probleme – und auf die kommt es entsprechend an bei der Frage, für welchen Ansatz man sich als Entwickler entscheidet.

Adaptive Design: Breakpoints machen den Unterschied

Die Aussage, Adaptive Design sei adaptive, nur weil der Server eine optimierte Darstellung für ein vorher erkanntes Gerät ausliefert, ist nicht richtig – hier werden Adaptive Webdesign und RESS vermischt.

Webdesign aus der Sicht des Servers

Mit RESS (Responsive Design + Server-Side-Components) hat Luke Wroblwski sich schon 2013 über eine eine serverseitige Alternative zu clientseitigem Adaptive Webdesign geäußert:

„In a nutshell, RESS combines adaptive layouts with server side component (not full page) optimization. So a single set of page templates define an entire Web site for all devices but key components within that site have device-class specific implementations that are rendered server side.“Luke Wroblwski

Die Möglichkeiten etwa in Bezug auf Adaptive Images würden aber den Rahmen dieses Artikels sprengen – kurzum: Adaptive Design wird clientseitig ausgeführt – mithilfe von pixelgenauen Breakpoints. Eine Umsetzung mit Apdaptive Design kann aber auch serverseitig passieren.

Responsive Design: 100% vs. 960px

Während fixe Breakpoints pro Device-Größe für das richtige Adaptive Design entscheidend sind, verfolgt das Responsive Design den Ansatz, über relative Größen (% oder em) die Ausgabe des Designs zu steuern.

Adaptive oder Responsive? Kommt auf das Problem an

Beide Ansätze haben Vor- und Nachteile. Adaptive Design kann die optimale Erfahrung für einen Nutzer auf einem spezifischen Gerät bedeuten, wird aber schnell zu aufwändig, wenn mehrere Geräte bedient werden müssen. Responsive Design hat den Vorteil, dass es schnell mit sehr vielen Geräten und Auflösungen genutzt werden kann, allerdings dann oft suboptimal.

Das beste Ergebnis kann eine Mischung aus beiden Ansätzen sein – muss es aber nicht. Denn ob ihr eine Mischform oder Adaptive beziehungsweise Responsive Design für euer Projekt einsetzt, ist vom Projekt abhängig.

Mit wachsender oder schrumpfender Display-Größe verändert sich auch das UX, das beispielsweise durch eine gekonnte Content-Strategy ergänzt werden muss. Die Frage nach Responsive oder Adaptive Design allein ist also nicht die Lösung.

Wie setzt ihr eure Projekte um?

]]>
Mario Janschitz
Flexbox: CSS leicht gemacht mit diesem 20-teiligen Videokurs http://t3n.de/news/flexbox-css-leicht-gemacht-630214/ 2015-08-14T12:00:42Z
Das CSS-Box-Modell ist ein hakeliges Dingen, mit dessen Hilfe sich etwas anspruchsvollere Websites nur unter Schmerzen erstellen lassen. Insbesondere für responsive Designs wird man sich als …

Das CSS-Box-Modell ist ein hakeliges Dingen, mit dessen Hilfe sich etwas anspruchsvollere Websites nur unter Schmerzen erstellen lassen. Insbesondere für responsive Designs wird man sich als bereits aus Gründen des Selbsterhaltungstriebs nach Alternativen umsehen. Eine der besten dieser Alternativen ist Flexbox. Ein leicht verständlicher Videokurs führt in die Materie ein.

Wer einmal mit Flexbox gearbeitet hat, geht definitiv nicht zurück. Dabei ist der Einsatz des alternativen Modells zwar nicht ausgesprochen schwierig, jedoch durchaus mit einer Lernkurve ausgestattet. Der kostenlose Videokurs, den wir euch heute vorstellen wollen, hilft da ungemein.

WTF heißt natürlich „What the Flexbox”. Was dachtet ihr denn? (Screenshot: flexbox.io)
WTF heißt natürlich „What the Flexbox”. Was dachtet ihr denn? (Screenshot: flexbox.io)

What the Flexbox: Über 160 Minuten Flexbox-Wissen

Der großzügige Spender des Kurses „What the Flexbox” stammt aus Kanada, heißt Wes Bos, und ist seines Zeichens sowohl Vollblut-Entwickler als auch Vollblut-Trainer. Mit einem Zeitaufwand von über 60 Stunden erstellte er jüngst einen umfangreichen, dabei leicht verständlichen Videokurs zu Flexbox.

Dieser umfasst 20 einzelne Tutorials mit einer Länge zwischen vier und 16 Minuten. In den ersten 13 Teilen beschäftigt sich Bos mit den Grundlagen der Verwendung, während die folgenden sieben Teile Beispiele realer Anwendungsfälle, etwa eine Preistabelle oder ein Layout für eine Mobil-App, vorstellen.

„What the Flexbox” besteht aus 20 einzelnen Teilen unterschiedlicher Länge (Screenshot: flexbox.io)
„What the Flexbox” besteht aus 20 einzelnen Teilen unterschiedlicher Länge (Screenshot: flexbox.io)

Um an dem Kurs teilzunehmen, sind lediglich zwei Voraussetzungen zu erfüllen. Ihr müsst zum einen eine gültige E-Mail-Adresse angeben, an die Wes euch den Link zum Tutorial und zu den Beispieldateien schicken kann. Zum anderen müsst ihr der englischen Sprache mächtig sein, soweit man es im alltäglichen Webentwickler-Gebrauch benötigt. Wes formuliert schon sehr einfach und in kurzen Sätzen, sowie von der Aussprache her sehr deutlich. Ich würde sagen, wer „Harry Potter and the Sorcerer's Stone” lesen oder erfolgreich hören konnte, wird auch mit „What the Flexbox” keine Probleme haben. Da habe ich schon ganz andere Tutorials auf die Ohren bekommen...

Wer sich nur kurz über die wichtigsten Aspekte des Flexbox-Modells informieren will, sollte auf jeden Fall das Tutorial hier bei t3n nicht versäumen. Die zwölf Minuten sollten drin sein.

Richtig in die Tiefe geht es dann mit „What the Flexbox”. Dafür benötigt ihr ungefähr drei Stunden, seid danach aber auch bestens informiert. Zu allen Beispielen liefert Wes die erforderlichen CSS- und HTML-Dateien als gepacktes Archiv zum Download mit. Es bietet sich an, mal einen intensiven Flexbox-Tag einzulegen und sich das gesamte Material in Ruhe zu Gemüte zu führen. Ich garantiere einen deutlichen Erkenntnisgewinn.

„What the Flexbox” ist durchgängig nachvollziehbar und sinnvoll strukturiert (Screenshot: flexbox.io)
„What the Flexbox” ist durchgängig nachvollziehbar und sinnvoll strukturiert (Screenshot: flexbox.io)

Leider lassen sich die Videos nicht für den Offline-Konsum herunterladen, da sich Wes für die Bereitstellung via YouTube entschieden hat. Andererseits sollte man beim Schauen der Tutorials ohnehin am Rechner aktiv mitarbeiten und durch die sehr codelastige Erklärungsmethode bringt ein Betrachten auf kleinen Mobil-Screens keinen erkennbaren Nutzen.

Mein Fazit fällt sehr eindeutig aus: Wer sich mit Flexbox beschäftigen will und der englischen Sprache mächtig ist, kommt an „What the Flexbox” nicht vorbei. Die Qualität des Kurses habe ich persönlich bei so manchem Bezahl-Content nicht gesehen. Prädikat: besonders wertvoll.

]]>
Dieter Petereit
Schicke kostenlose Social-Media-Buttons im Responsive Design für deine Website http://t3n.de/news/social-media-buttons-responsive-622953/ 2015-07-13T08:38:12Z
An Social-Media-Buttons scheiden sich die Geister. Bei diesen schicken Buttons im Responsive Design dürften aber selbst Zweifler schwach werden.

An Social-Media-Buttons scheiden sich die Geister. Bei diesen schicken Buttons im Responsive Design dürften aber selbst Zweifler schwach werden.

Social-Media-Buttons können schick sein, sie können Besucher aber auch schrecklich nerven. Aus der aktuellen Webwelt wegzudenken sind sie aber trotzdem nicht. Aus der Sicht der Webdesigner kann es außerdem nervig sein, die Social-Media-Buttons für jedes einzelne Projekt neu zu designen. Damit das künftig nicht mehr nötig ist, hat das Design-Team KNI ein Set von flexiblen Social-Media-Buttons im Responsive Design erstellt.

Social-Media-Buttons: Einfach anpassbar

Die Buttons wurden mit der Stylesheet-Sprache Sass entwickelt, sie sind daher einfach anzupassen. Laut den Designern brauchen lediglich ein paar Variablen ausgetauscht werden. Der Button-Container soll sich auf Displays aller Größen, von kleinen Geräten bis hin zu Retina, entsprechend anpassen. Wird ein Button entfernt, weil er nicht benötigt wird, füllen die restlichen Buttons diesen Platz aus.

Social-Media-Buttons im Responsive Design kostenlos zum Download. (Bild: KNI)
Social-Media-Buttons im Responsive Design kostenlos zum Download. (Bild: KNI)

Getestet wurden die Social-Media-Buttons im Responsive Design bisher in der Größe von 130 bis 15.465 Pixeln auf den aktuellen Versionen der Browser Chrome, Safari, Firefox, Opera und Internetexplorer. SVG-Support wird vorausgesetzt. Wie das Ganze ausschaut, kann man auf dieser Website selbst testen – dazu einfach die Seite größer und kleiner ziehen, die Social-Media-Buttons passen sich entsprechend an.

Social-Media-Buttons gratis zum Download

KNI hat den Code für die Social-Media-Buttons im Responsive Design auf Github zum Download zur Verfügung gestellt. Dort gibt es auch weitere Anweisungen zur Installation und zur Anpassung der Buttons.

Wenn ihr vor dem Installieren von Social-Media-Buttons noch auf der Suche nach WordPress-Themes seid, dann schaut euch unseren Artikel „30 kostenlose WordPress-Themes für Responsive Design“ an.

]]>
Jörn Brien
So geht Mobile-Design heute: Typografie, Blur-Effekte und die Anforderungen von Wearables http://t3n.de/magazin/mobile-design-238281/ 2015-06-11T07:22:33Z
Die digitale Welt ist mobil. Der klassische Desktop verliert zumindest im Consumer-Bereich zunehmend an Relevanz. Immer mehr Menschen ziehen mobile Geräte vor. Neue Trends für Mobile- und …

Die digitale Welt ist mobil. Der klassische Desktop verliert zumindest im Consumer-Bereich zunehmend an Relevanz. Immer mehr Menschen ziehen mobile Geräte vor. Neue Trends für Mobile- und Responsive-Design tragen dem Rechnung. Ein Trend-Bericht mit Best Practices.

Eine der ersten Reaktionen von Designern und Entwicklern auf die steigende Relevanz mobiler Webnutzung war die Entwicklung responsiver Webdesigns. Sie sorgen dafür, dass sich die Nutzeroberfläche von Websites und Apps an die unterschiedlichen Bildschirmgrößen anpasst. Während anfangs noch Adaptive Designs mit drei Varianten (Breakpoints) für Desktop, Tablet und Handy ausreichten, setzen moderne Websites und Apps heute zunehmend ein fließendes (fluides) Responsive Webdesign voraus, um alle aktuellen und auch zukünftige Monitorgrößen bedienen zu können.

Auch das 2013 populär gewordene Flat Design kommt mobilen Anwendungen zugute. Es setzt – wie der Name schon sagt – auf zweidimensionale, kontrastreiche, aber detailarme und somit fingerfreundlich vereinfachte Gestaltungselemente und sieht fantastisch aus, wenn es gut und durchdacht ist. Gleiches gilt für den Off-Canvas-Flyout: Er ist eine Erfindung, der die responsive Gestaltung verbessern soll. Da hierbei die Navigation erst beim Tap des Users im sichtbaren Display-Bereich erscheint, verdoppelt es die Fläche für die Darstellung der eigentlichen Seiteninhalte.

Derlei Mobile Designelemente sind mittlerweile fast schon Standard und finden auch zunehmend im Web-Design für große Screens Anwendung – beispielsweise bei Uber. Doch mittlerweile gibt es eine Reihe neuer Entwicklungen, die Web-Designer und -Entwickler in ihr mobiles Repertoire aufnehmen sollten: Von schlichter Typografie über großzügige Bilder und Videos bis hin zur Berücksichtigung von Contextual Awareness und App-Designs für Wearables.

Das Foto-Netzwerk Utravisual verbindet gutes, visuelles Design mit technischer Raffinesse: Die über die Bilder gelegten Texte lassen sich mit einem Fingertipp ausblenden. (Screenshot: ultravisual.com)
Das Foto-Netzwerk Utravisual verbindet gutes, visuelles Design mit technischer Raffinesse: Die über die Bilder gelegten Texte lassen sich mit einem Fingertipp ausblenden. (Screenshot: ultravisual.com)

Anspruchsvolle Typografie

Gute Typografie ist ein wesentlicher Bestandteil guten Designs. Dabei war eine ausgefallene Typografie lange dem Print-Bereich vorbehalten. Doch heute haben auch Webdesigner eine riesige Auswahl an Schriftarten für ihre Webprojekte. Im Mobile-Design zeichnet sich gute Typografie allerdings meistens durch eine gewisse Schlichtheit aus.

Das mobile Video-Netzwerk Vine punktet auf seiner Startseite mit einem im Hintergrund ablaufenden, weichgezeichnete Video. (Screenshot: vine.co)
Das mobile Video-Netzwerk Vine punktet auf seiner Startseite mit einem im Hintergrund ablaufenden, weichgezeichnete Video. (Screenshot: vine.co)

Eine gute Typografie zeichnet sich nicht nur durch die Lesbarkeit eines Textes aus, sondern ist ein fester und unverkennbarer Bestandteil der Designsprache: Schlechte Typografie signalisiert Unprofessionalität, die sich auf das gesamte Produkt übertragen lässt.

Ein gutes Beispiel liefert das Foto-Netzwerk Ultravisual. Die Site kombiniert große Bilder mit Typografie und erzielt so einen Magazin-Look, bei dem sowohl die Motive als auch die Texte gleichermaßen ins Auge fallen. Mit einem Tap kann der Nutzer die über das Bild gelegte Typografie ausblenden. Die transluzente Navigations-Leiste lässt das nächste Bild mit einem Blur-Effekt durchschimmern. Es entsteht ein angenehmer Effekt, der gleichzeitig die Orientierung in der App unterstützt.

Große Bilder und Videos: Fast besser als auf großen Screens

Der Mensch ist ein visuelles Wesen und mobile Geräte bieten uns die perfekte Spielwiese dafür: Ein Smartphone-Display verfügt nämlich über eine weitaus höhere Pixeldichte als jeder andere Bildschirm, und hat eine gleichmäßigere Ausleuchtung und bessere Farbwiedergabe als mancher High-End-Fernseher. Mit großen (Bewegt-)Bildern können mobile Apps und Websites erstaunliche Wirkungen erzielen – und mit Unterstützung der besseren High-End Mobile-Displays zum Teil ihre Desktop-Versionen trotz kleinerer Bildschirme in den Schatten stellen.

So setzt zum Beispiel Expedia auf dem Begrüßungsbildschirm seiner mobilen iOS-App auf große Bilder, um beliebte Hotels und Resieziele anzubieten. Das soziale Netzwerk Vine begrüßt in der mobilen Applikation gar mit einem weichgezeichneten Hintergrundvideo. Innerhalb des Netzwerks nehmen die kurzen Video-Clips – die so genannten Vines – ebenfalls den maximal verfügbaren Monitorplatz ein.

Orientierung durch Blur-Effekte

So schön große Bilder sind – sie nehmen viel Platz auf einem meist doch kleinen Display ein. Um dennoch Platz für Text – auch im direkt sichtbaren Bereich – zu schaffen, greifen viele Designer zum so genannten Blur-Effekt, der seinen Ursprung nach Ansicht etlicher Designer in der Design-Umstellung von iOS 7 hat. Allerdings hat selbst Windows Vista schon auf einen ähnlichen Effekt in kleineren Bereichen der Fenster gesetzt.

Die iOS-App des Hotels Tonight zeigt, wie der Blur-Effekt funktioniert: Die Bilder sind verschwommen, sobald sich der Text darüberlegt. Dieser ist dann gut lesbar, dennoch bleibt der Bezug zum Bildinhalt bestehen. (Screenshot: Hotel-Tonight-App)
Die iOS-App des Hotels Tonight zeigt, wie der Blur-Effekt funktioniert: Die Bilder sind verschwommen, sobald sich der Text darüberlegt. Dieser ist dann gut lesbar, dennoch bleibt der Bezug zum Bildinhalt bestehen. (Screenshot: Hotel-Tonight-App)

Der Blur-Effekt besteht aus einer transluzenten Textfläche, die über weichgezeichneten Bildern liegt. Das sorgt für eine gute Lesbarkeit bei einer angenehmen Gesamtoptik. Wer den Blur-Effekt clever einsetzt, kann beispielsweise Navigation-Overlays realisieren, die sich auf das vorhergehende Element beziehen.

Ein Beispiel dafür ist der Einsatz des Blur-Effekts in Apples iOS. Untergeordnete Inhalte scheinen unter den Bedienelementen durch und erleichtern dem Nutzer so die Orientierung. Auch die iOS-App des Hotels Tonight zeigt, wie das aussehen kann: Untermenüs legen sich hier als Overlay über die Bilder, die dabei mit einem Blur versehen werden.

Gesten, Gesten, Gesten: Experience per Finger und Geste

Designer und Entwickler müssen schon lange über das klassische Point-And-Click-Muster hinausdenken. Denn auch wenn es auf den ersten Blick so scheint, als sei ein Tap ein Klick, so sind bei mobilen Geräten weitaus mehr Interaktionen möglich. Taps, Swipes, Pinches oder längeres Drücken eines Elements sind nur einige Beispiele für Gesten, mit denen mobile Nutzer Websites und Applikationen bedienen. Designer sollten all diese Interaktionen nutzten, um die Bedienung ihrer Interfaces zu vereinfachen.

Ein gutes Beispiel dafür sind die Apps von Twitter und YouTube. Berührt man ein Tweet oder Video längere Zeit, so fährt ein kontext-sensitives Menü aus. YouTube-Videos lassen sich zudem mit einem Swipe minimieren, um nach weiteren Inhalten zu suchen. Das Interface kann dadurch auf Buttons oder Reiter verzichten und erreicht eine aufgeräumte Gesamtwirkung und eine einfachere Nutzung.

YouTube besticht bei seiner mobilen App mit durchdachter Navigation: Per Swipe kann der Nutzer hier beispielsweise Videos minimieren, um nach weiteren Inhalten zu suchen. (Screenshot: Youtube-App)
YouTube besticht bei seiner mobilen App mit durchdachter Navigation: Per Swipe kann der Nutzer hier beispielsweise Videos minimieren, um nach weiteren Inhalten zu suchen. (Screenshot: Youtube-App)

]]>
Ilja Zaglov