Webdesign | t3n News News, Infos, Tipps und aktuelle Artikel zu Webdesign 2015-06-19T06:00:55Z t3n Redaktion http://t3n.de/tag/webdesign UX Hero: Geniales Comic erzählt vom Leben eines Webdesigners http://t3n.de/news/ux-hero-comic-webdesign-617210/ 2015-06-19T06:00:55Z
Du bist Webdesigner? Dann wird dir diese wunderschön gestaltete Comic-Reihe „UX Hero“ förmlich aus der Seele sprechen.

Du bist Webdesigner? Dann wird dir diese wunderschön gestaltete Comic-Reihe „UX Hero“ förmlich aus der Seele sprechen.

Zwei Jahre soll dran gearbeitet worden sein, jetzt ist zumindest die erste von insgesamt sechs geplanten Ausgaben fertig: Mit „UX Hero“ hat der Israeli Tal Florentin eine aufwändige Comic-Reihe produziert, die vom Leben eines Webdesigners erzählt.

UX Hero: Dieser Comic spricht Webdesigner heilig

UX Hero ist ein Comic, der ein Loblied auf den Beruf des UX- und Webdesigners singt. (Bild: UX Hero)
UX Hero ist ein Comic, der ein Loblied auf den Beruf des Webdesigners singt. (Bild: UX Hero)

In der 30-seitigen Erstausgabe geht es unter anderem um ein fünfköpfiges Startup, das mit schlechten Konversionsraten auf der Website zu kämpfen hat. Dabei steht der Launch einer App kurz bevor und die Investoren machen schon Druck. Mit dem Bild eines verzweifelten Gründerteams und hysterischen Ausrufen wie „Our conversion sucks!“ und „How we can get people to complete the registration process?“ steigt der Comic in die erste von insgesamt drei Kurzgeschichten ein.

Dabei geht es natürlich um Wireframes, Flow Charts, Conversion Funnels und vieles mehr. Die zweite Handlung erzählt etwa von einen Verlag, dessen E-Book-Verkäufe auf der Website plötzlich auf Talfahrt gehen. Ein ähnliches Bild in der dritten Geschichte: Hier ziehen Mitarbeiter eines Callcenters den Zorn der Anrufer auf sich, weil sie die richtigen Lösungen für Kundenprobleme nicht schnell genug auf der Website nachschlagen und kommunizieren können.

Alle drei Geschichten von UX Hero aber haben eines gemeinsam: des Rätsels Lösung ist am Ende immer ein Web- beziehungsweise UX-Designer. Er kann sich in die Emotionen und Erwartungen sowie das Verhalten von Website-Besuchern hineinversetzen. Mit einem Sinn für Gestaltung und Funktionalität einer App beziehungsweise Website legt er den Grundstein für ein erfolgreiches Digitales Business. Der Comic rührt unterm Strich also kräftig die Werbetrommel für den Beruf und macht ganz nebenbei auch noch Spaß.

Wer die komplette erste Ausgabe als PDF lesen möchte, kann sich diese auf der Website von UX Hero unter Angabe der E-Mail-Adresse kostenlos herunterladen. Alle zwei Monate soll eine neue Ausgabe erscheinen. Wer diese ebenfalls lesen will, kann vorsorglich ein Abo für 39 US-Dollar abschließen.

Anm. d. Red.: In einer früheren Version des Artikels waren alle Seiten der Erstausgabe in der Bildergalerie mit entsprechendem Quellenverweis eingebunden. Das war vom Urheber auch so genehmigt worden. Nach einer weiteren Rücksprache mit dem Autor haben wir uns aber dazu entschieden, nur die ersten fünf Seiten von UX Hero zur Verfügung zu stellen.

]]>
Daniel Hüfner
t3n-Community-Umfrage: Welchen Grafik-Monitor nutzt du? http://t3n.de/news/grafik-monitor-webdesigner-616334/ 2015-06-16T06:40:16Z
In dieser Woche wollen wir von den Webdesignern unter euch wissen, welchen Grafik-Monitor ihr an eurem Arbeitsplatz stehen habt. Für die von euch, die grad auf der Suche nach einem neuen Monitor …

In dieser Woche wollen wir von den Webdesignern unter euch wissen, welchen Grafik-Monitor ihr an eurem stehen habt. Für die von euch, die grad auf der Suche nach einem neuen Monitor sind, könnten die Ergebnisse nächste Woche auch spannend sein.

Grafik-Monitor: Design, Reaktionszeit oder Auflösung?

Welche Aspekte beim Monitorkauf im Vordergrund stehen, hängt ganz von den Vorlieben des Webdesigners ab. Ob der Screen matt oder glossy sein soll, ob es wirklich die höchste Auflösung sein muss oder welche Anschlüsse und Zusatzfeatures er mitbringen sollte – da scheiden sich die Geister. Bei den meisten Webdesignern ist es sicherlich auch ein Kompromiss aus den wichtigsten Features und einem erschwinglichen Preis. Wer sich heutzutage nach einem Monitor umsieht, sieht sich einem gigantischen Angebot gegenüber, da fällt es nicht leicht, eine Entscheidung zu treffen. Wir wollen in unserer t3n-Community-Umfrage deswegen diese Woche wissen, wofür du dich beim Kauf deines letzten Monitors entschieden hast.

Der Beste Grafik Monitor Fuer Webdesigner
Wie sieht dein Grafik-Monitor aus? (Foto: Shutterstock)

Wie sieht dein Grafik-Monitor aus?

Im Grunde gibt es eine handvoll Kriterien, über die man nachdenken sollte, bevor man sich einen neuen Monitor anschafft: Welche Auflösung brauche ich für meine Arbeit? Wie groß soll der Monitor sein? Möchte ich ein glänzendes oder ein mattest Display? Auf welcher Technologie soll das Display basieren? Und wieviel kann ich dafür ausgeben? Vermutlich die wenigsten werden die Optik des Monitors als höchste Priorität erachten. Zu den wichtigsten Punkten würden wir von euch gerne wissen, wie ihr euch entschieden habt.

Wir sind gespannt, welche Monitore am häufigsten bei euch zum Einsatz kommen. In einer Woche verraten wir euch dann natürlich auch das Ergebnis der Umfrage. Und damit das Ergebnis möglichst repräsentativ wird: Teilt die , was das Zeug hält. Jede Stimme zählt!

]]>
Melanie Petersen
Arbeiten im Startup: 8 Faktoren die dir zum nächsten Traumjob verhelfen http://t3n.de/news/startup-job-arbeiten-616134/ 2015-06-16T06:25:35Z
Heutzutage wird man als fähiger Entwickler beziehungsweise Webdesigner nicht selten für eine Stelle in einem Startup angesprochen. Obwohl die Bezahlung meistens eher schlecht als recht ist, gibt es …

Heutzutage wird man als fähiger Entwickler beziehungsweise Webdesigner nicht selten für eine Stelle in einem Startup angesprochen. Obwohl die Bezahlung meistens eher schlecht als recht ist, gibt es dennoch Gründe für das Arbeiten in einem Startup. Im Artikel lest ihr worauf ihr achten müsst.

Schlechtes Gehalt, lange Arbeitszeiten, ausbeuterische Unternehmenskultur – das sind die Vorurteile auf der Schattenseite der hippen Startup-Medaille. Dass nicht jedes Startup zum nächsten Millionen-Seller avanciert dürfte klar sein, trotzdem bedeutet das nicht, dass eine Stelle in einem Startup schlecht ist. Die nachfolgenden Tipps sollen euch helfen die Entscheidung leichter fällen zu können.

Startup-Faktor 1: Fähige Geschäftsführung

„Versprechungen alleine reichen nicht aus.“

Ausnahmen wie Mark Zuckerberg ausgenommen – hat der Geschäftsführer schon mal ein erfolgreiches Unternehmenskonzept gegründet und aufgebaut? Oder sogar verkauft? Tatsächlich reicht es nicht eine „Wahnsinns-Idee“ zu haben – ein Startup braucht Erfahrung, Wissen und vor allem Führung – jedenfalls in 99 Prozent der Fälle. Denn: Versprechungen alleine reichen nicht aus.

Fehlt es dem Startup an einem erfahrenen und seriösem Geschäftsführer würde ich die Finger davon lassen.

Startup-Faktor 2: Glaubst du an die Vision?

Überzeugt dich das Produkt beziehungsweise die Vision des Startups? Kannst du dich damit identifizieren? Wenn du das Produkt selbst nutzen würdest, oder dir die angestrebten Zielgruppen plausibel erscheinen dann: Go. Wenn du nicht ganz überzeugt sein solltest, stell Fragen! Es geht immerhin um die nächsten Monaten oder sogar Jahre – und vor allem darum, wie du dein Leben ausrichten musst. Wenn dich die Antworten nicht zufriedenstellen, würde ich die Finger davon lassen: Wie sollen Kunden überzeugt werden, wenn nicht einmal die Mitarbeiter überzeugt werden können? Du musst – genauso wie der oder die Gründer – an die Vision glauben, sonst wird es dir mittelfristig an Motivation fehlen um dafür zu arbeiten.

Startup-Faktor 3: Beteiligung am Startup

Ja, die Bezahlung ist meistens sehr schlecht. Liegt zum einen daran, dass einfach nicht genug Geld im Unternehmen ist, oder auch daran, dass Gründer an die Zahlung von Maximalgehältern gebunden sein können.

Nichts desto trotz muss kein Full-Stack-Entwickler für ein Praktikanten-Gehalt arbeiten: Es gibt schließlich Beteiligungen am Unternehmen. Diese Möglichkeit ändert zwar nichts an schlechter Bezahlung in der Gegenwart, kann sich aber zukünftig auszahlen. Allerdings solltest du beachten, dass „viel von Nichts auch nichts ist.“ Soll heißen: Wenn andere Faktoren im Startup nicht stimmen oder das Startup einfach scheitert, dann hilft dir die gesamte Beteiligung nichts. Auf der anderen Seite ist es kein gutes Zeichen, wenn Beteiligungen regelrecht an Mitarbeiter verschleudert werden – auch hier sollten die Alarmglocken klingeln.

Startup-Faktor 4: Kannst du etwas dazu lernen?

startup
Sich weiterentwickeln: Das Startup kann der ideale Ort dafür sein. (Foto: © Maksim Kostenko - Fotolia.com)

„Praktikanten mit 'hands on-Mentality'.“

Die Frage, die du dir stellen solltest ist: Bringt mich das Startup weiter? Nicht nur im Lebenslauf mit einer hoher Position innerhalb eines Startups, sondern auch menschlich sowie fachlich. Startups können ideale Orte sein, um neues auszuprobieren und den eigenen Horizont zu erweitern. Eine Chance die du in einem 9-to-5-Job selten hast. Somit kannst du deine Zeit innerhalb eines Startups – selbst wenn es scheitern sollte – als eine Art Investment in deine Bildung ansehen.

Dem entsprechend solltest du dich von Startups fernhalten, die dich primär als „Praktikanten mit 'hands on-Mentality'“ sehen, der als „Head of Packaging“ hauptsächlich Kisten im Keller sortieren soll.

Startup-Faktor 5: Das Klima

Werden Mitarbeiter als Arbeitssklaven gehalten oder handelt es sich um schlecht bezahlte, aber seriöse Jobs? Wie wird mit Kunden, Mitarbeitern und Partnern umgegangen?

Ein Startup funktioniert top-down: Wenn sich die Gründer nicht verstehen, wie soll dann das Startup funktionieren? Natürlich gibt es Unternehmen in denen sich die Gründer nicht mehr so blendend verstehen wie in ihrer Studienzeit, allerdings wäre mir der Einstieg in ein Startup, das Probleme mit der Führungsetage hat, zu risikoreich.

Startup-Faktor 6: Zukunftspläne

„Lass dich nicht mit fadenscheinigen Antworten abwimmeln.“

Wie sieht der Zukunftsplan aus? Exit, Börsengang oder Eigentümergeführte-Festanstellung im Traumunternehmen? Startups können sich in verschiedenste Richtungen entwickeln – es sollte aber ein grundlegender Plan vorhanden sein.

Vor allem muss klar sein, was mit Mitarbeitern passiert, sollte das Unternehmen verkauft oder sonst irgendwie umgewandelt werden.

Lass dich nicht mit fadenscheinigen Antworten abwimmeln: Es muss einen groben Plan geben. Denn wer im Startup nicht voraus plant, der wird früher oder später an der „Burning Rate“ zu Grunde gehen. Die monetären Mittel sind begrenzt, also sollte der Gründer ein wirtschaftliches Ziel ins Auge gefasst haben.

Startup-Faktor 7: Gibt es Investoren?

investor
Die Startup-Pläne werden genauestens überprüft. (© DragonImages - Fotolia.com)

Meiner Meinung nach, reicht es nicht, wenn ein Unternehmen Investoren über Crowd-Funding erreicht. Ja natürlich, man kann jetzt argumentieren, dass hier die Zielgruppe spricht und auf deren Wünsche eingegangen wird. Allerdings kann das auch heißen, dass der CEO einfach das Publikum um seinen Finger gewickelt hat. Negative Beispiel habe wir in letzter Zeit oft genug gesehen – sei es Vibewriter oder Crowdfunding-Kampagnen deren Einnahmen in der private Miete des „Gründers“ verschwunden sind.

Anders sieht die Sache aus, wenn erfahrene Investoren im Startup-Boot sitzen. Meistens fordern diese Investoren das Startup auf, Fortschritte zu dokumentieren und zu präsentieren sowie handfeste Pläne geschmiedet zu haben. Das gibt es beim Crowd-Funding auch, aber der 100-Euro-Teilhaber wird – praktisch gesehen – nicht die selben Möglichkeiten haben wie ein 26-%-Investor in einem Startup.

Startup-Faktor 8: Dein Bauchgefühl

„ ... oder schlichtweg ausbrennt.“

Fühlt es sich gut an, in und mit diesem Startup zu arbeiten? Bist du dir sicher, dass du auch noch in zehn Monaten in diesem Startup arbeiten möchtest? Ist dir bewusst, dass du wo anders vielleicht mehr verdienen könntest – teilweise aber zu schlechteren Konditionen, die Work/Life-Balance betreffen? Du musst dir im Klaren sein, dass ein Startup plötzlich vom Erdboden verschwiden kann – weil es gekauft wird oder schlichtweg „ausbrennt“. Natürlich hat die Arbeit innerhalb eines Startups Risiken – aber auch Vorteile. Ob ihr die tragen könnt müsst ihr aber selbst entscheiden.

Fazit: No Guts no Glory

Harte Arbeit und Versprechen, die nicht gehalten werden können – das Ganze gepaart mit extrem hohen Risiken. Startup-Mentalität hat nicht jeder und somit ist auch nicht jeder für eine Stelle innerhalb eines Startups geeignet.

Wer sich aber auf ein Startup einlässt, kann davon ungemein profitieren: Unternehmensbeteiligung, Erfahrungen sammeln und natürlich das Abenteuer miterleben zu können – das alles sind Gründe, die absolut für einen Arbeitsplatz im Startup sprechen. Ich persönlich empfehle, die Chance wahrzunehmen, für ein seriöses Startup zu arbeiten – diese Liste kann dir zwar helfen, aber die Entscheidung musst du dennoch für dich selbst treffen.

]]>
Mario Janschitz
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
Webdesign, das (sich) bewegt: Diese Webseiten zeigen, wie man bezaubert http://t3n.de/news/animiertes-webdesign-interaktive-615186/ 2015-06-10T06:23:53Z
Es gibt sie noch, die handgestrickten Webseiten. Viele arbeiten in der Navigation und Darstellung der Inhalte mit animierten Illustrationen. Animiertes Webdesign grenzt dabei manchmal an Kunst.

Es gibt sie noch, die handgestrickten Webseiten. Viele arbeiten in der Navigation und Darstellung der Inhalte mit animierten Illustrationen. Animiertes Webdesign grenzt dabei manchmal an Kunst. Wir haben zehn eindrucksvolle Beispiele für euch herausgesucht. Lasst euch inspirieren! Im Netz stößt man immer wieder auf dieselben Templates und Stylegrundlagen. Webdesigns mit einer ganz eigenen Note sind schon wahre Fundstücke. Umso mehr freut man sich, wenn man mal eines davon zu Gesicht bekommt. Wir haben zehn ansehnliche, animierte Webdesigns für euch zusammengetragen, die eine wahre Augenweide sind.

1.) Animiertes Newsletter-Design

Animiert Website Webdesign
(Screenshot: epic.net)

Dieses spannende Webdesign ist zwar keine Webseite, aber es passt trotzdem in die Liste. Die Kreativ-Agentur Epic hat ein Newsletter-Design zum Verlieben. Viele kleine Animationen illustrieren den Newsletter mit dem Jahresrückblick auf 2014.

Zum Newsletter

2.) Spielerisches Webdesign

webdesign animiert webseiten
(Screenshot: Giant Steps Media)

Die Webseite der Media Agentur Giant Step Media punktet mit einem reduzierten Design und einer kleinen Spielerei. Mit dem Mauszeiger lassen sich kleine Lichtpunkte verwirbeln. Mit den Punkten sind zum Beispiel auf der Startseite das Firmenlogo und auf der „Clients“-Seite die Kundenlogos animiert.

Zur Webseite

3.) Interaktiver Globus

Bildschirmfoto 2015-06-09 um 12.14.59
(Screenshot: Airbnb)
Bildschirmfoto 2015-06-09 um 12.16.35
(Screenshot: Airbnb)

In einem hübschen Intro stellt Airbnb sich vor, bevor man zur interaktiven Weltkugel gelangt, die viele kleine Geschichten und raffinierte und liebevoll designte Details enthält.

Zur Webseite

4.) Eigene Handschrift

Bildschirmfoto 2015-06-09 um 12.27.53
(Screenshot: bevisionar.com)

Das Team von Visionare hat das Rad zwar nicht neu erfunden, dafür überzeugt ihre Website mit einer ganz eigenen Handschrift. Die animierten Illustrationen haben einfach Charme.

Zur Webseite

5.) Scrollytelling

Bildschirmfoto 2015-06-09 um 13.33.43

Auf forbetter.coffee wird erklärt, wie man den perfekten Kaffee zubereitet. Durch Scrollen bewegt man eine Kaffeebohne durch den Prozess der Kaffeezubereitung. Die Seite schafft es dadurch trotz spärlichen Inhalts ein tolles Nutzererlebnis zu schaffen.

Zur Webseite

6.) Dynamische Tool-Vorstellung

Bildschirmfoto 2015-06-09 um 13.43.01
(Screenshot: getbeagle.co)

Die Website von Beagle stellt ein Tool vor, mit dem man seine „Proposal“-Unterlagen strukturieren und einheitlich designen kann. Sehr flüssige Animationen führen einen durch die Funktionen des Tools.

Zur Webseite

7.) Unser Schreibtisch, das sind wir

Bildschirmfoto 2015-06-09 um 13.49.38
(Screenshot: labelideas.co)

Die Agenturseite von Label Ideas & Co. zeigt einen Schreibtisch hinter dessen Objekten die verschiedenen Informationshäppchen versteckt sind. Besonders gut hat uns die Teamvorstellung gefallen. Einfach mal ganz nach unten scrollen!

Zur Webseite

8.) Produkt-Inszenierung

Bildschirmfoto 2015-06-09 um 14.27.53
(Screenshot: newjumoconcept.com)

Die Produktseite von New Jumo Concept startet mit einer Animation des zu bewerbenden Produkts: Eine Schreibtischlampe, die vollständig zusammengeklappt werden kann. Scrollt man runter, klappt sie sich langsam auf. Eine schöne Methode das Produkt in Szene zu setzen und ein schönes Nutzererlebnis zu schaffen.

Zur Webseite

9.) Animierte Startseite

Bildschirmfoto 2015-06-09 um 14.57.05
(Screenshot: followbubble.com)

Statt eines Sliders auf der Startseite, arbeitet Bubble mit einem Umklappeffekt. Simple, aber dennoch wirkungsstark, da gefühlt jede zweite Seite mittlerweile den klassischen Slider auf der Startseite hat.

Zur Webseite

10.) Interaktive, multimediale Themenwelt

Bildschirmfoto 2015-06-09 um 15.02.39

Die Food-Themenwelt von National Geographic macht vor, wie sich eine Informationsseite in eine spannende Erlebniswelt verwandeln kann. Überall gibt es was zu entdecken und zu erfahren. Dabei bringt das stöbern richtig Spaß. Detailreiche Animationen unterstützen das.

Zur Webseite

Du brauchst mehr Inspiration für deine Webseite? Dann schau dir auch unsere Reihe „So schön ist Webdesign: Schmackhafte UI-Schmankerl zum Nachmachen" an. Hier findest du Teil 1, Teil 2 und Teil 3.

]]>
Melanie Petersen
And they all look just the same: Das Webdesign kopiert sich immer und immer wieder http://t3n.de/news/same-webdesign-kopiert-immer-611581/ 2015-05-24T06:56:46Z
Das Internet ist zu uniform geworden, und das ist für niemanden gut. Greg Storey appeliert, dass sich Webdesigner zu ihren Wurzeln orientieren sollten.

Das Internet ist zu uniform geworden, und das ist für niemanden gut. Greg Storey appeliert, dass sich Webdesigner zu ihren Wurzeln orientieren sollten.

Den englischen Titel habe ich mir von Malvina Reynolds' Song „Little Boxes“ geklaut. Bestimmt haben viele von euch den Text schon mal gehört, wenn auch von einem anderen anderen Künstler gesungen als vom Original-Songwriter. Malvina hat diesen Song als Protest geschrieben –  gegen die Massen-Konformität beim Hausbau in den Vororten San Franciscos in den frühen 1960er-Jahren. Wenn du jemals durch diese Gegend gefahren bist, konntest du dort immer noch die kleinen Klipp-Klapp-Schachteln sehen, die sich wie Pünktchen auf den Hügeln und über das ganze Gebiet verteilen. Obwohl Daly City die Vorlage für den Song bot, sind diese gleichförmigen Vororte im ganzen Land verbreitet.

Wie die Häuser in den Vororten von San Francisco sieht oft auch Webdesign aus. (Foto: Aaron Gustafson / flickr.com, Lizenz: CC-BY-SA)

Heutzutage hat sich das Klipp-Klapp-Prinzip in einen anderen Bereich unserer Gesellschaft eingeschlichen: das World Wide Web. Große Fortschritte in der Technologie, die auf gemeinsamen Standards aufbauen, haben es Web-Designern ermöglicht, unglaubliche Websites zu schaffen, die noch vor 20 Jahren als Science-Fiction durchgegangen wären. Es ist erstaunlich, was die Kombination aus HTML, CSS und JavaScript heute umsetzen kann.

Vor seinem heutigen Posten als CEO für Basecamp war Jason Fried ein talentierter Webdesigner (ist er immer noch), seine Software-Firma 37signals war ein Bombenerfolg, wegen seines Sachverstandes und unternehmerischen Scharfsinns. Ich muss wohl nicht erst erwähnen, dass ich Jasons Meinung und Einblick ins Web-Design sehr hoch schätze.

Er schrieb kürzlich über des Redesgin seiner Firmenwebsite und welchen Trend er beobachtet, der nicht zu etwas Gutem führt. Nicht nur für Designer, sondern auch für Unternehmen.

„Wenn ich sehe, was heutzutage im angesagt ist, bin ich abgetörnt. Es ist alles ein bisschen zu glatt, zu over-designt. Ich habe glatt satt.

Dann, wenn du runterscrollst, schiebt sich der Hintergrund weg und ein weiteres großes Foto mit noch mehr Text darauf taucht auf. Und so weiter … Vielleicht hast du diesen Stil schon gesehen – er fängt an, überall aufzutauchen. Für das Auge eines Designers sieht das gut aus, und es ist technisch eindrucksvoll, aber ich bin mir nicht sicher, ob es irgendetwas bedeutungsvolles aussagt über die Firmen, die es verwenden. Schlimmer noch (für diese Firmen) – es hat eine neue Art von Unordnung geschaffen: Zu viele Firmen sehen gleich aus – nur Style und nicht genug Substanz.“

— Jason Fried

Ich wiederhole es noch mal, um zu betonen, wie viel Jason vom Geschäft versteht: Firmeninhaber, Marketingmanager, Creative-Directors, Designer – alle sollten dieses Statement überdenken in Bezug auf ihre eigenen digitalen Erzeugnisse oder diejenigen, für die sie verantwortlich sind.

„Zu viele Firmen sehen gleich aus – nur Style und nicht genug Substanz.“

Weil unser Werkzeug sich weiter entwickelt und unsere Technologien mehr und mehr Flash-artige Erlebnisse ermöglichen, müssen wir die besten, direktesten Wege bestimmen, mit denen wir unsere Kunden und Nutzer erreichen. Wollen oder brauchen sie lange, scrollende Beschreibungen mit Fly-ins, Karussellen und ruhigen Video-Gifs, oder suchen sie nur nach der Suppe des Tages? Dan Cederholm hat vor einem Jahr eine richtig gute Bemerkung zu diesem Punkt gemacht:

Das ist meine Lieblings-Website. Ich besuche sie fast jeden Tag. Sie ist nicht responsiv. Sie ist nicht fürs iPhone optimiert. Sie sieht auf dem Retina-Display unscharf aus. Sie nutzt nicht das neueste HTML5/CSS3-Framework. Sie hat keinen ausgeklügelten vertikalen Rhyhtmus. Die Schriftarten sind nichts Besonderes. Sie ist weder imitierend noch Flat. Sie besitzt kein eigenes Favicon. Es gibt dafür keine native App oder Twitter oder Instagram. Sie verwendet kein Ajax oder Scrum oder node.js oder Sinatra. Sie verfügt über keine API oder einen RSS-Feed oder VC-Funding. Sie wurde nicht auf einem berühmten Tech-Blog gefeatured und hat keinen Award gewonnen.

Sie gibt mir die Suppe des Tages. Das ist Webdesign.“

— Dan Cederholm

Dans Artikel erinnert mich an die Website für Berkshire Hathaway, eine der erfolgreichsten Kapital-Management- und Investmentfirmen der Welt. Sie ist zugleich Eigentümer einer der altmodischst-aussehenden Websites des heutigen Webs.

Wenn sie es wollten, könnten Berkshire Hathaway ein Design-Studio ihrer Wahl beauftragen oder kaufen, um es in Vollzeit an nichts anderem als ihrer Website arbeiten zu lassen, für alle Ewigkeit. Sie hätten das seit 1996 (als die Site zuerst erschien) jederzeit tun können, aber sie taten es nicht, weil die Firma notorisch sparsam ist – sich anders zu verhalten würde aus dem Rahmen fallen, sowohl für die Branche, als auch ihre Kunden. Ihre Site besteht vom Design her nur aus Inhalten und, wenn überhaupt, sehr wenig Style. Und aus diesem Grunde ist sie wundervoll.

Die Website Berkshire Hathaway ist von 1996 – und heute noch mit dem Design im Netz, obwohl die Firma eine ganze Abteilung für nichts als die Website anstellen könnte. (Screenshot: Berkshire Hathaway)
Die Website Berkshire Hathaway ist von 1996 – und heute noch genauso im Netz, obwohl die Firma eine ganze Abteilung für nichts als die Website anstellen könnte. (Screenshot: Berkshire Hathaway)

Ich würde es lieben, lieben, lieben, wenn Happy Cog (mein Design-Studio) die Möglichkeit bekäme, mit Berkshire Hathaway zu arbeiten. Wir könnten eine Menge tun, um die Site besser kompatibel zu allen Devices zu machen und dabei helfen, das Erscheinungsbild und die Usability durch bessere Typografie auf den neuesten Stand zu bringen (Meine Güte, wäre das cool!), aber ich würde niemals, nicht in einer Million Jahren, versuchen, ein großes Geschäft zu machen, indem ich ihren Look modernisiere, nur, um mit der Zeit zu gehen.

Das wäre das Klipp-Klapp-Prinzip.

]]>
Greg Storey
Als das Web noch „Under construction“ war: Die größten Webdesign-Trends der Vergangenheit [Infografik] http://t3n.de/news/webdesign-trends-neunziger-under-construction-609344/ 2015-05-08T12:15:39Z
Auch das Webdesign unterliegt wandelnden Trends. Eine Infografik wirft jetzt einen Blick zurück auf vergangene Webdesign-Trends der 90er-Jahre.

Auch das unterliegt wandelnden . Eine wirft jetzt einen Blick zurück auf vergangene Webdesign-Trends der 90er-Jahre.

Webdesign-Trends der 90er: Von „Under-construction“-Bildchen zu Lauftexten

In 90er-Jahren waren die gestalterischen Möglichkeiten des Webs noch deutlich eingeschränkter als heute. Dennoch haben sich natürlich schon damals die ersten Webdesign-Trends entwickelt. Buttons mit Schlagschatten waren beispielsweise extrem angesagt. Ebenfalls über die Maße beliebt waren die kleinen „Under-construction“-Bildchen – gerne auch gleich in Form animierter GIF-Dateien, die damals durchaus als legitimes Gestaltungselement einer Website betrachtet wurden.

Dann gab es natürlich auch noch Lauftexte, die entweder mittels Marquee-Tag oder bisweilen auch durch Java-Applets implementiert wurden. Das war zwar weder praktisch, noch sonderlich hübsch, aber wir dürfen auch nicht vergessen, dass es sich beim Web um ein noch sehr junges Medium handelte.

Vergangene Webdesign-Trends: Frames waren überall

Nicht notwendigerweise hässlich, aber letztlich sehr unpraktisch, war der Einsatz von Frames auf Webseiten. Dabei wurde eine Website in unterschiedliche Bereiche unterteilt, die jeweils aus unterschiedlichen HTML-Dateien bestanden. Das Feature wurde ursprünglich nur vom Netscape Navigator unterstützt. Da Kompatibilität noch nicht sehr hoch im Kurs stand, bekamen Besucher mit anderen Browsern statt einer passenden Version der Seite häufig nur den Ratschlag angezeigt, sich gefälligst den passenden Browser zu besorgen.

Wir können alle froh sein, dass diese dunklen Zeiten längst der Vergangenheit angehören. Trotzdem ist es natürlich durchaus unterhaltsam, sich diese und andere Webdesign-Trends aus der Frühphase des Webs wieder vor Augen zu führen. Das dachten sich wohl auch die Macher des Hosting-Vergleichsportals WhoIsHostingThis, die vergangene Webdesign-Trends in Form dieser schicken Infografik zusammengefasst haben.

Ein Klick auf den unten stehenden Ausschnitt öffnet die vollständige Infografik.

Webdesign-Trends der 1990er Jahre. (Grafik: WhoIsHostingThis)
Webdesign-Trends der 1990er Jahre. (Grafik: WhoIsHostingThis)
]]>
Kim Rixecker
So schön ist Webdesign: Schmackhafte UI-Schmankerl zum Nachmachen (Teil 3) http://t3n.de/news/schoen-webdesign-ui-schmankerl-teil3-606139/ 2015-04-22T08:33:50Z
Das Web besteht selbstredend aus Webseiten. Einige davon sind allerdings besonders schön oder bieten UI-Kniffe, die sonst keiner hat. In unserer neuen Reihe präsentieren wir euch ab sofort …

Das Web besteht selbstredend aus Webseiten. Einige davon sind allerdings besonders schön oder bieten UI-Kniffe, die sonst keiner hat. In unserer neuen Reihe präsentieren wir euch ab sofort inspirierende UX/UI-Schmankerl, von denen ihr euch was abschauen könnt. Kennt ihr das auch? Einige Websites fühlen sich irgendwie besser an als andere – hier ein Autocomplete und dort wird ein Klick gespart. In unserer neuen Serie zeigen wir euch geniale Lösungen für gängige UI-Probleme, die ihr so noch nicht gesehen habt. Denn: Gutes UI-Design sieht man nicht.

Unsere liebsten UI-Schmankerl

Bildschirmfoto 2015-04-21 um 16.13.54

Dropbox wartet beim Registrierungsprozess solange, bis die Animation bereits vollständig geladen wurde. Erst danach wird der CTA aktiviert – somit wird sichergestellt, dass der Nutzer wenigstens die Chance hatte, die Grundfunktion von Dropbox zu verstehen.

Bildschirmfoto 2015-04-21 um 16.17.34

Ein weiters Schmankerl, dass Dropbox liefert ist, dass eine Information im Hilfebereich angezeigt wird, die darauf hinweist wie gelöschte Dateien wiederhergestellt werden können. Diese Information erscheint aber nur dann, wenn ihr davor größere Datenmengen aus euerer Dropbox gelöscht habt.

Screen Shot 2015-01-30 at 3.36.44 PM

Wenn sich in eurem Slack-Channel Mitarbeiter aus verschiedenen Zeitzonen befinden und ihr versucht über @channel alle gleichzeitig zu kontaktieren, dann blendet Slack einen Hinweis ein, der euch auf eventuell schlafende Kollegen aufmerksam macht.

Bildschirmfoto_2015-04-21_um_16_36_08

Evernote ändert die Datumsformatierung eurer Notizen – abhängig davon, wie breit das anzuzeigende Fenster wirklich ist. Eine elegantere Lösung, als nur das Datum zu beschneiden. Auf voller Breite wird sogar die Uhrzeit der gespeicherten Notiz angezeigt.

Bildschirmfoto 2015-04-21 um 16.51.04

Auch Evernotes WebClipper hat ein Schmankerl zu bieten. Nutzt ihr das Browser-Plugin häufiger, dann empiehlt euch der Clipper, ganz automatisch, das passendste Notizbuch für aufgenommene Clips. Ein Feature, das ich selbst täglich zu schätzen weiß, weil es mir ein Dropdown-Menü und dann das Tippen nach dem richtigen Notizbuch spart.

Bildschirmfoto 2015-04-21 um 16.53.57

Shopify errät euren Standort anhand der IP-Adresse. Praktisches Feature bei der Registierung eines Shops. Darüber hinaus, steht diese Funktion auch Kunden eines Shops zur Verfügung, nämlich beim Checkout-Prozess.

Bildschirmfoto 2015-04-22 um 09.35.07

Der Sharing-Dienst Buffer will bei einer Beschwerde nicht wissen, um welche Art es sich handelt, sondern wie hoch dein Frustrationslevel ist. Spitze für das Anwendererlebnis, eine Herausforderung für den Support.

Wenn euch diese UI-Schmankerl gefallen haben: Hier geht es zurück zum zweiten Teil.

Wo habt ihr euch das letzte mal gedacht: „Hm, so hätte ich das auch lösen können.“? Oder welche Finesse habt ihr entdeckt?

]]>
Mario Janschitz
CSS- und HTML5-Templates: 6 Quellen für dein nächstes Webprojekt http://t3n.de/news/css-html5-templates-quellen-605578/ 2015-04-20T08:45:56Z
Viele Websites und Landingpages lassen sich problemlos mit einem Template umsetzen. Zahlreiche CSS- und HTML5-Templates laufen unter einer Creative-Commons-Lizenz und können kostenlos genutzt …

Viele Websites und Landingpages lassen sich problemlos mit einem Template umsetzen. Zahlreiche CSS- und HTML5-Templates laufen unter einer Creative-Commons-Lizenz und können kostenlos genutzt werden. Einige Template-Seiten bieten zudem Support für einen schmalen Taler an.

1. Templated

Bildschirmfoto 2015-04-17 um 13.42.41
(Screenshot: templated.co)

Auf Templated findet ihr über 800 kostenlose CSS- und HTML5-Templates, die unter einer Creative-Commons-Lizenz veröffentlicht wurden. Die können auch für kommerzielle Zwecke genutzt werden, sofern sichtbar Credits angegeben sind.

Zur Website

2. Pixelarity

HTML5 CSS Templates 9
(Sreenshot: pixelarity.com)

Über 50 moderne Templates findet ihr bei Pixelarity. Die Templates sind mit und gebaut und laufen unter einer Creative-Commons-Lizenz. Pixelarity kostet 19 Euro für drei Monate und bietet unbegrenzten Zugriff auf 58 Templates inklusive Support. Die Templates können auch nach Ende der Laufzeit weiterverwendet werden – nur der Support endet dann.

Zur Website

3. html5up

HTML5 CSS Templates 8
(Screenshot: html5up.net)

Html5up bietet 29 kostenlose Templates direkt zum Download. Sie laufen ebenfalls unter der Creative-Commons-Lizenz.

Zur Website

4. Themeforest

HTML5 CSS Templates
(Screenshot: themeforest.net)

Die Templates auf Themeforest sind zwar nicht kostenlos, dafür ist die Auswahl enorm. Mehr als 6.000 HTML5-Themes findet ihr hier. Über die Sidebar könnt ihr die Suche unkompliziert eingrenzen. Die Preise starten bei fünf Euro.

Zur Website

5. OS Templates

HTML5 CSS Templates 2
(Screenshot: os-templates.com)

Bei OS-Templates findest du eine Vielzahl von kostenlosen Templates für Unternehmen, Online-Shops oder Blogs. Vor allem findest du hier aber auch über hundert HTML-Basic-Templates. Die Richtlinien für die Credits bei der Nutzung von kostenlosen Templates findets du hier.

Zur Website

6. w3layouts

HTML5 CSS Templates 4
(Sreenshot: w3layouts.com)

Die Templates bei w3layouts.com sind in mehr als 30 Kategorien unterteilt und kostenlos. Mit einer Spende ab zehn Dollar kannst du jedoch Backlinks zu w3layouts.com ausschalten. Die Lizenzbedingungen findest du hier.

Zur Website

Viele weitere Template-Quellen findest du auf unserer Themen-Seite „Templates“.

]]>
Melanie Petersen
Typografie im Responsive Webdesign – Teil 3: So erstellt ihr responsiven Body-Text http://t3n.de/news/typografie-responsive-webdesign-3-603722/ 2015-04-04T08:00:36Z
Im vorigen Teil dieser Artikelserie über Typografie im Responsive Webdesign haben wir verschiedene Möglichkeiten erkundet, flüssige und reaktionsfähige Überschriften für Webseiten umzusetzen.

Im vorigen Teil dieser Artikelserie über im haben wir verschiedene Möglichkeiten erkundet, flüssige und reaktionsfähige Überschriften für Webseiten umzusetzen. Heute stellen wir uns der letzten Herausforderung, der zunehmenden Komplexität mobiler Geräte gerecht zu werden. Dazu betrachten wir bewährte Methoden, wie zum Beispiel die Verwendung von em- und rem-Angaben bei der Zuweisung von Media Queries für den Body-Text anstelle von Pixelwerten.

Sprungmarken:

  1. Mit em und Media Queries
  2. Mit rem und Media Queries
  3. Mit CSS Viewport-Einheiten
  4. Mit Hilfe eines jQuery-Plugins
  5. Mit Hilfe von Elementabfragen

Reaktionsfähiger Body-Text

Wenn es darum geht, den Body-Text reaktionsfähig zu gestalten, gibt es einige wichtige Hinweise zu beachten: Du solltest daran denken, dass sich nicht nur die Textgröße ändert, um mit einer idealen Zeichenanzahl in ihren Container zu passen und dabei gut lesbar zu belieben. Es ist auch notwendig, flexible Zeilenabstände einzuhalten, sodass deine Wörter auf hochauflösenden Bildschirmen stets gut skaliert und die Schriftgröße vom Anwender einfach geändert werden kann. Um diese Punkte zielführend umzusetzen, definiere proportionale und relative Größeneinheiten für die Schriftgröße und Zeilenhöhe.

1. Mit em und Media Queries

Ethan Marcotte, der Mann hinter der “Responsive Webdesign”-Idee, erklärt in einem ausgezeichneten Artikel, warum em für das Definieren der Schriftgröße besser geeignet ist, als Pixelangaben. Bevor ich auf die Vorteile von em eingehe, möchte ich dir zeigen, warum der Einsatz von Pixelangaben für die Textgrößenzuweisung nicht die optimale Lösung ist.

Pixel bieten zwar ein hohes Maß an Kontrolle über Schriftgrößen, haben aber einen bekannten Nachteil: Die Schriftgröße skaliert nicht, sobald du diese im Internet Explorer änderst. Es gibt keine Möglichkeit für Anwender, die Schriftgröße auf deiner Webseite zu erhöhen, wenn du Pixelangaben verwendest. Zwar unterstützen viele Desktop-Browser, darunter neuere Versionen des IE, eine Form des Seiten-Zooms, nur leider vergrößert der das gesamte Design, einschließlich der Schrift. Mit em als Schriftgrößenzuweisung befreien wir uns dagegen von diesem Problem.

1.1 Die flexible Schriftgröße

Ich empfehle, Prozentangaben zu verwenden, um die Schriftgröße im body einzustellen. Proportional zu diesem Wert definierst du dann die Schriftgrößen für den Inhalt. Die Zuweisung deiner body-Schriftgröße in Prozent bietet dir schließlich eine flexible Grundlage, auf der du mit relativen Einheiten wie em beliebige Anpassungen der Textgröße vornehmen kannst. Die Einstellung der body-Schriftgröße von 100% setzt die Textgröße auf den Standardwert des Browsers, welcher in der Regel 16px ist.

Eine Vielzahl von Webdesignern neigt dazu, einen body-Ausgangswert von 62.5% einzusetzen. Dieser Wert entspricht 10px Schriftgröße im body, was es einfacher macht, andere Schriftgrößen im Bezug zum Ausgangswert zu definieren. Von nun an ist es einfach in Pixel zu denken, wobei die Werte stets in em angegeben werden ( 1em sind 10 Pixel, 1.6em sind 16 Pixel).

Lesetipps: Wenn du mehr über die 62.5%-Technik wissen möchtest, empfehle ich einen Artikel von Richard Rutter. Rutter hat noch einen weiteren Artikel geschrieben, in dem er empfiehlt, 100% als Grundwert zu definieren, da dieser eine bessere Cross-Browser-Kompatibilität gewährleistet.

Somit können wir durch em und Media Queries responsive Schriften umsetzen. Das einfachste Beispiel würde wie folgt aussehen:

body {
font-size:100%; /* Flexibler Ausgangswert */
}
p {
font-size: 1.25em; /* 1.25em im Verhältnis zu eines 16px body-Ausgangswertes ergibt 20px Schriftgröße */
}
Um die Schriftgröße für kleinere Bildschirme mit Media Queries zu ändern, genügt es fortan, die body-Schriftgröße anzupassen. Auf diese Weise verändert sich die Textgröße der gesamten Seite proportional zum body-Schriftwert. Dazu brauchst du lediglich eine Zeile im CSS anzupassen:
@media screen and (max-width: 40em) {
body {
font-size:90%;
}
}
@media screen and (max-width: 30em) {
body {
font-size:80%;
}
}
Damit es uns gelingt, reaktionsfähige Schriftgrößen umzusetzen, erzeugen wir nur noch proportionalen Zeilenabstand für unsere body-Inhalte.

1.2 Der proportionale Zeilenabstand

Genauso wie wir sicherstellen müssen, dass sich unsere Textgröße beim Ausgeben verschiedender Bildgrößen verändert, müssen wir darauf achten, dass sich der Raum zwischen den Zeilen in der Größe verändert und proportional an die Schriftgröße anpasst. Zeilenabstände lassen sich ebenso in em definieren. Verwendete man Pixelangaben für den Zeilenabstand und der Leser will in die Webseite hineinzoomen, vergrößert sich die Schriftgröße. Der Abstand zwischen den Zeilen hingegen würde sich an den Pixelangaben orientieren – dein Text könnte dadurch unleserlich wirken.

Indem wir den Zeilenabstand relativen Einheiten zuweisen, gewährleisten wir, dass er entsprechend der Schriftgröße eine optimale Lesbarkeit ermöglicht. Ein geeigneter Wert für einen gut lesbaren Zeilenabstand ist 1.4em für den Haupttext und 1.2em für Überschriften. Je nachdem, welche Schriftart du verwendest, können die Werte leicht variieren. Um also proportionale Zeilenabstände zu vergeben, nutzen wir folgenden CSS-Code:

body {
font-size: 100%; /* Flexibler Ausgangswert */
}
p {
font-size: 1.25em;
line-height: 1.4em;
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.2em;
}

Einen noch besseren und flexibleren Weg, um die Zeilenabstände proportional einzustellen, bevorzugt Eric Meyer, indem er die Zeilenabstände ohne Einheit definiert.

2. Mit rem und Media Queries

rem ist, genau wie em, eine relative CSS Einheit (w3.org/TR/css3-values/#rem-unit). Ihren Unterschied zeigt das “r”; es steht für “root em”. Die Schriftgröße richtet sich mit rem relativ zur Schriftgröße des Root-Elements, also dem html anstelle des body aus.

Anstelle des body-Elements setzt du bei rem die Schriftgröße auf 100% des html-Elements. Dann kannst du die Schriftgrößen deines Textes über Media Queries anpassen, indem du den Wert über das html-Element änderst, ähnlich wie wir es bereits mit em beim body-Element gemacht haben. Aber, wenn rem und em nun so ähnlich sind, warum sollten wir dann rem nutzen? Was für einen Vorteil hat rem gegenüber em? Das Tolle beim Einsatz von rem ist, dass es die Schriftgröße des gesamten Inhaltes im Zusammenhang des Root-Elements definiert, nicht im Zusammenhang des Containers. Beispielsweise können schlicht verschachtelte Listen mit em ziemlich chaotisch und CSS-lastig werden.

Szenario: Nehmen wir mal an, du entscheidest dich, die Listenelemente mit font-size: 1.1em zu definieren. Hat die Liste nun verschachtelte Listen, werden die Child-Listen kaskadieren und die Schriften “wachsen”. Vermutlich möchtest du das nicht. Du kannst es mit li li { font-size: 1em; } fixen, jedoch fängt es hier an, unschön zu werden. Das ist der Punkt, an dem rem ins Spiel kommt. Einen Nachteil hat der Einsatz von rem dennoch – es bietet eine beschränkte Browser-Unterstützung (IE 9+).

Lesetipp: Chris Coyier schreibt in seinem Blogartikel, warum er den Einsatz von em bevorzugt.

Obwohl die Browser-Unterstützung für rem sich allmählich durchsetzt, solltest du dennoch einen Pixel-Fallback für ältere Browser anbieten. Falls du einen Präprozessor wie Sass verwendest, kannst du auf Mixins zurückgreifen, die alle Fallback-Berechnungen für dich vornehmen. Es gibt mehrere Mixins für rem, aus denen du deine bevorzugte Methode wählen kannst.

3. Mit CSS Viewport-Einheiten

Der body-Text wird auch durch CSS Viewport-Einheiten reaktionsfähig. Im vorherigen Artikel begründe ich deren Verwendung und erkläre die Umsetzung. CSS Viewport-Einheiten zu verwenden hat einen offensichtlichen Vorteil gegenüber den vorigen Methoden, bei denen em und rem für 100% flüssigen Text genutzt wurden. Um die Schriftgröße zu definieren, muss nicht mehr auf eine Reihe von Media-Abfragen zurückgegriffen werden – die Größenänderungen werden auf Grundlage der Containergröße vorgenommen, egal wie und wann die Breite sich ändert. Ein Beispiel für die Verwendung von Viewport-Einheiten zur Erstellung von flüssigem Text siehst du im nächsten Abschnitt.

4. Mit Hilfe eines jQuery-Plugins

Zeilen, die zu lang oder zu kurz sind, führen zu einem schlechten Leseerlebnis. Um das auszuschließen, definieren wir eine Wortanzahl pro Zeile, die stets gut lesbar ist. Dies verdeutlichen dir zwei Beispiele:

  1. Wenn die Textzeilen zu lang sind, ist das Auge des Besuchers sehr damit beschäftigt, auf den Schwerpunkt des Textes zu fokussieren. Gerade bei größeren Textblöcken ist es schwierig, das Lesen in der korrekten Zeile fortzuführen. Ermögliche es dem Leser ein Gefühl dafür zu bekommen, wo die Zeile beginnt und wo sie endet.
  2. Sind Zeilen hingegen zu kurz, werden diese nicht vollständig gelesen, weil der Fokus des Lesers vorzeitig zum Anfang der nächsten Zeile gelenkt und der Leserhythmus unterbrochen wird.

Eine ideale Zeilenlänge erlaubt Lesern, den Text bis zum Ende einer Zeile und den Anfang der Nächsten Zeile auf natürliche und einfache Weise zu erfassen. Die optimale Zeilenlänge für den Textkörper beträgt etwa 50 bis 60 Zeichen, inklusive Leerzeichen. Einige sagen, dass sogar 75 bis 80 Zeichen pro Zeile akzeptabel sind. Wenn sich die Schriftgröße auf verschiedene Geräte einstellt, sollten wir bedenken, dass größere Schriften auf kleinen Bildschirmen ziemlich kurze Zeilen erzeugen. Kleinere Schriften auf großen Monitoren führen dagegen zu einer Länge, die die empfohlene Anzahl der Wörter für optimale Lesbarkeit übersteigt. Also riskieren wir in beiden Szenarien eine schlechte Lesbarkeit und damit eine schlechte Benutzererfahrung. Daher ist es am besten, einen Weg zu finden, die Schriftgröße auf kleinen Bildschirmen zu verringern und auf größeren Formaten zu erhöhen. In Folge dessen wird die Zeichenanzahl pro Zeile zugunsten der Lesbarkeit auf großen Bildschirmen ab- und auf kleinen zunehmen.

Wenn wir die Zeichenlänge pro Zeile durch Schriftgrößenänderungen automatisch (ohne manuelle Änderungen) in den Media Queries in Kombination mit relativen Zeilenabständen zuweisen (also 100% flüssigen body-Text), haben wir gute Bedingungen für eine großartige Lesererfahrung geschaffen. CSS Viewport-Einheiten können uns also dabei helfen, Texte so zu gestalten, dass sie sich jedem Bildschirm optimal anpassen. Ein Problem jedoch bleibt: Je kleiner der Bildschirm wird, desto kleiner wird auch die Schriftgröße und am Ende könnte die Schrift auf sehr kleinen Displays unleserlich wirken. Umgekehrt würde die Schrift bei immer größeren Monitoren immer größer werden. Es gibt also nur eine Möglichkeit, eine minimale oder maximale Grenze für die Schriftgröße zu setzen, nämlich die Verwendung von Media-Queries.

Lass uns uns einen Blick auf ein visuelles Beispiel werfen, das unter Verwendung von CSS Viewport-Einheiten flüssige Texte erstellt:

Responsiver body-Text mit CSS Viewport-Einheiten. (Bild: pixeltuner.de)
Responsiver body-Text mit CSS Viewport-Einheiten. (Bild: pixeltuner.de)

Wie du siehst, wird die Schrift immer kleiner, je kleiner der Bildschirm beziehungsweise das Browserfenster skaliert wird. Sobald eine Bildschirmgröße von 480px Breite erreicht ist, wirst du sehen, dass die Schrift kaum lesbar ist. Wir benötigen also einige Medien-Anfragen, um die Schriftgröße auf kleinen Bildschirmen anzupassen.

Folgende CSS-Anweisungen habe ich erstellt und kommentiert, sodass du sehen kannst, dass die Schrift immer weiter an Größe abnimmt, bis sie unleserlich wird. Befreie die auskommentierten Media-Queries, wenn du die Schrift auf kleineren Bildschirmen für eine bessere Lesbarkeit anpassen möchtest:

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
background-color: #3498db;
color:white;
font-family: 'Open Sans', sans-serif;
padding:50px 30px;
font-size:100%;
}
p {
font-size:2.5vw;
}
/* Befreie die auskommentierten Media-Queries, wenn du die Schrift auf kleineren Bildschirmen für eine bessere Lesbarkeit anpassen möchtest.*/
/*
@media screen and (max-width:600px) {
p {
font-size: 3vw;
}
}
@media screen and (max-width:480px) {
p {
font-size: 4vw;
}
}
*/
Zu guter Letzt lösen wir noch das Problem der Browser-Unterstützung, um wirklich flüssige Texte in allen Browsern zu erreichen.

4.1 FlowType.JS Plugin

FlowType.JS ist ein Plugin, das flüssige Textgestaltung unterstützt. Das erreicht es mittels Anpassung der Schriftgröße und Zeilenhöhe, welche sich auf die Breite eines bestimmten Elements beziehen, wie bei den Viewport-Einheiten.

FlowTypeJS hat jedoch ein paar Vorteile gegenüber der Verwendung von CSS Viewport-Einheiten:

  • Cross-Browser-Unterstützung
  • Optionen zum Festlegen minimaler und maximaler Schriftgrößen.
Responsiver Body Text mit FlowType.JS Plugin (Screenshot: simplefocus.com)
Responsiver Body Text mit FlowType.JS Plugin (Screenshot: simplefocus.com)

Die Verwendung von FlowType.JS ist unkompliziert:

  • Verlinke innerhalb deiner Webseite zum Plugin und füge einige Standardschriftstile für Nutzer ein, die JavaScript nicht aktiviert haben.
  • Sprich nun das Plugin an, für jedes Text-Element, das du durch das FlowType.JS-Plugin flüssig gestalten möchtest.
  • Über die verfügbaren Plugin-Optionen kannst du zum Schluss noch Einstellungen vornehmen.
FlowType.JS Anleitung: Eine ausführliche sowie leicht nachvollziehbare Anleitung kannst du auf der Homepage des Plugins nachlesen.

Anstelle der Verwendung von Viewport-Einheiten bezieht sich folgendes Beispiel auf den Einsatz des FlowType-Plugins, worin Spezifikationen für die maximale und minimale Schriftgröße vorgenommen wurden.

Responsiver body-Text mit FlowType.JS-Plugin (Demo-URL) (Bild: puxeltuner.de)
Responsiver body-Text mit FlowType.JS-Plugin (Demo-URL) (Bild: puxeltuner.de)

Du siehst also, wie einfach es ist, den body-Text flüssig zu gestalten, ohne sich um weitere extra Regeln für Media-Queries kümmern zu müssen.

5. Mit Hilfe von Elementabfragen (Element Queries)

Elementabfragen ähneln Medienabfragen: Wenn eine Bedingung erfüllt ist, wird ein wenig CSS angewendet. Anstelle von bildschirmbasierten Abfragen, werden hierbei elementbezogene Abfragen zugewiesen (wie beispielsweise min-width, max-width, min-height und max-height). Das Problem dabei ist, dass Elementabfragen noch gar nicht in CSS existieren.

Elementabfragen:

Das Konzept der Elementabfragen wird in einem Artikel von Ian Storm Taylor genauer beschrieben.

Eine Element-Abfrage würde etwa wie folgt aussehen:

.main-nav (max-width: 30em) {
font-size: 0.75em;
}

Element-Abfragen sind sehr nützlich, da sie uns erlauben, reaktionsfähige CSS-Stile für Elemente zu vergeben, unabhängig von der Umgebung oder dem Layout, in dem diese Elemente untergebracht sind. Durch das Definieren von modularen Stilen für Elemente können wir diese überall wiederverwenden, sodass du einfach in der Lage bist, das Layout anzupassen, in dem die Elemente verwendet werden.

Angenommen, du hast eine Navigation und möchtest, dass sie sich unabhängig vom Header reaktionsfähig verhält: Anstatt die Stile entsprechend der Breite ihres aktuellen Containers zu definieren, könntest du die Stile so zuweisen, dass sich die Abfragen auf die Breite der Navigation selbst beziehen. Somit brauchst du keine Rücksicht mehr auf margins, paddings oder andere Container-Eigenschaften zu nehmen, die du in der Regel bei der Festlegung von Breakpoints für deine Inhalte nimmst. Je nachdem wie sich die Breite der Navigation verändert, kannst du deren Stile definieren, um sie flexibel und reaktionsfähig zu gestalten.

Lass uns konkreter werden: Unabhängig davon, wo die Navigation positioniert wird (ob im Kopfbereich oder innerhalb der schmalen Sidebar), möchtest du nun, dass die Menüpunkte nebeneinander stehen und eine Schriftgröße von 1em erhalten, sobald die Navigation breit genug ist, um die nebeneinander gereihten Menüpunkte darstellen zu können (zum Beispiel, wenn die Navigation breiter oder gleich 400px ist). Soabald sie schmaler als 400px ist, sollen sich die Menüpunkte stapeln und die Schriftgröße auf 1.2em erhöhen. Du siehst also, dass diese Methode der vorigen ähnelt, bei der em und rem mit Media-Abfragen genutzt wurden. Wobei diese Methode jedoch Media Queries durch Element Abfragen ersetzt.

Fazit

Zukunftsorientierte Designer sehen eine Tendenz dazu, dass das reaktionsfähige Web aus 99,9 Prozent Typografie bestehen wird. Um der zunehmenden Komplexität mobiler Geräte gerecht zu werden, liegt unser Fokus auf einfachen, meist auf Schrift ausgerichteten, Layouts. Diese werden schließlich zuerst wahrgenommen und gelesen. Darum ist reaktionsfähige Typografie heutzutage einer der wichtigsten Aspekte beim Responsive Webdesign.

]]>
Jonathan Torke