Webdesign | t3n News News, Infos, Tipps und aktuelle Artikel zu Webdesign 2015-02-27T15:40:29Z t3n Redaktion http://t3n.de/tag/webdesign Cheat-Sheets für Webdesigner: Jede Menge Helfer im Überblick http://t3n.de/news/cheat-sheets-fuer-webdesigner-596526/ 2015-02-27T15:40:29Z
Webdesigner und Entwickler eint ein Dilemma: Es ist fast unmöglich, alle Shortcuts und Tastaturkürzel der verwendeten Software sowie unterschiedliche Programmiersprachen und Frameworks im Kopf zu …

Webdesigner und Entwickler eint ein Dilemma: Es ist fast unmöglich, alle Shortcuts und Tastaturkürzel der verwendeten Software sowie unterschiedliche Programmiersprachen und Frameworks im Kopf zu behalten. Jede Menge Cheat-Sheets erleichtern die Arbeit ungemein. Wir haben im ersten Teil unserer Übersicht einige der hilfreichsten Exemplare für Webdesigner gesammelt.

Es spielt keine Rolle, ob du blutiger Anfänger oder eingefleischter Vollblut-Webdesigner bist. Es spielt auch keine Rolle, seit wie vielen Jahren du mit einem bestimmten Framework oder einer Software arbeitest – ab und an musst du die Doku wälzen oder im Handbuch nachschlagen. Wesentlich häufiger wirst du allerdings auf Cheat-Sheets oder Schnellreferenzen zurückgreifen. Das ist kein Beinbruch, denn bei der Komplexität vieler Anwendungen kann sich kaum ein Webdesigner alle Tastaturkürzel und andere Details merken.

Cheat-Sheets für Webdesigner: Farben und Typografie

Eher an Einsteiger richten sich die Cheat-Sheets, bei denen es um Farblehre und Theorie geht. (Foto: CardPrinting.us)
Eher an Einsteiger richten sich die Cheat-Sheets, bei denen es um Farblehre und Theorie geht. (Foto: CardPrinting.us)

RGB Colour Codes: Das PDF gibt einen Überblick über alle RGB-Farbcodes. Link zum Cheat-Sheet

RGB vs. CMYK: Die Infografik zeigt unter anderem, wo die Stärken und Schwächen von RGB und CMYK liegen. Link

Web Safe Color Chart: Mit den hier aufgeführten Farben kann bei einem Einsatz auf einer Webseite nichts schief gehen. Link

Pantone Number: Für alle, die eine Schnellreferenz für Pantone-Nummern als PDF benötigen. Link

Color Codes Matching Chart HTML: Hier gibt es Codes für CMYK- und RGB-Farben. Link

So you need a typeface: Der durchaus humoristische Ansatz zur Wahl der richtigen Schrift geht davon aus, dass die Wahl auf der Art des Projekts basiert. Link

Cheat-Sheets: Bildbearbeitung und andere Software

Unter den Cheat-Sheets finden sich auch Kurzanleitungen wie eine Referenz zum Stiftwerkzeug von Photoshop. (Foto: trainingonsite.com)
Unter den Cheat-Sheets finden sich auch Kurzanleitungen wie eine Referenz zum Stiftwerkzeug von Photoshop. (Foto: trainingonsite.com)

Adobe Photoshop CS6 Keyboard Shortcuts Cheat Sheet: Der Name verrät es schon – ein Cheat-Sheet mit Tastaturkürzeln für Photoshop CS6. Link Weitere Cheat-Sheets für Photoshop findet ihr auf t3n.

Photoshop Toolbox Reference: Photoshop bietet eine Fülle von unterschiedlichen Werkzeugen. Mit Hilfe dieser Schnellreferenz lassen sich die einzelnen Funktionen der Tools nachschlagen. Link

Photoshop CS6 Brush Guide: Vergessen, wie das mit den Pinseln in Photoshop CS6 war? Kein Problem mit dieser Kurzanleitung. Link zum Cheat-Sheet

Adobe Illustrator CS6 Shortcuts Cheatsheet: Das Cheat-Sheet gibt Auskunft über in Illustrator CS6 verwendbare Tastaturkürzel. Link

Indesign CS6 Tools Panel: Diese praktische Ressource führt alle Werkzeuge von Indesign inklusive Shortucts und Modifizierungen auf. Link

Pen Tool Technique: Wie das mit dem Stiftwerkzeug in Photoshop, Illustrator und Indesign funktioniert, zeigt dieses Cheat-Sheet. Link

Adobe Creative Suite Toolbar Shortcut Wallpapers: Bei Hongkiat kann man sich Hintergrundbilder in unterschiedlichen Größen herunter laden. Deren Inhalt: Shortcuts zu Photoshop, Illustrator, Indesign und Flash. Link zu den Cheat-Sheets

GIMP Cheat Sheet: Für alle Photoshop-Verweigerer bietet sich GIMP an. Für die Software existieren natürlich ebenfalls Cheat-Sheets. Link

Sketch Shortcuts: Die alternative Bildbearbeitung Sketch verfügt über eine Reihe von Shortcuts, die dieses Cheat-Sheet übersichtlich aufführt. Link

Cheat-Sheets für Webdesigner: HTML

Eine Art interaktives Wörterbuch für HTML. (Foto: workflower.fi)
Eine Art interaktives Wörterbuch für HTML. (Foto: workflower.fi)

HTML5 Cheat Sheet: Ein Cheat-Sheet zu HTML5 gehört in die Sammlung jedes Webdesigners. Link

HTML Vocabulary: Das interaktive Cheat-Sheet versteht sich als Wörterbuch für HTML. Einfach auf den Begriff rechts klicken und die entsprechenden Fragmente werden im Code links hervor gehoben. Link

HTML Elements Index: Die Websiet listet alle HTML- und XHTML-Elemente auf. Link

CSS-Cheat-Sheets

Unter den CSS-Cheat-Sheets finden sich auch einige zu Frameworks. (Foto: bootstrap cheat sheets)
Unter den CSS-Cheat-Sheets finden sich auch einige zu Frameworks. (Foto: bootstrap cheat sheets)

CSS Vocabulary: Das interaktive Cheat-Sheet versteht sich als Wörterbuch für CSS. Einfach auf den Begriff rechts klicken und die entsprechenden Fragmente werden im Code links hervor gehoben. Link

CSS Cheat Sheet: Das Cheat-Sheet von OverAPI behandelt unter anderem Selektoren, CSS3 Box, Animationen und mehr. Link zum Cheat-Sheet

Responsive Web Design Cheat Sheet: Wer sich die Frage nach den besten Breakpoints für sein Design stellt, ist mit diesem Cheat-Sheet gut bedient. Link

The complete Font Awesome 4.3.0 icon reference: Das Cheat-Sheet beinhaltet jedes Font Awesome 4.3.0 Icon, jede CSS-Klasse und Unicode. Link

Foundation-5 Cheat Sheet: Bei diesem Dokument handelt es sich um eine umfassende Referenz zu Foundation 5. Link zum Cheat-Sheet

Master Cheat Sheet for Bootstrap 3: Das Cheat-Sheet zum Framework Bootstrap 3 lässt sich als PDF herunter laden. Link

Bootstrap Glyphicons: Das interaktive Cheat-Sheet zeigt für jedes Bootstrap Glyphicon HTML Tag, Unicode HTML Entity und CSS Rule. Link

Cheat-Sheets für JavaScript und JQuery

Klassische Kurzreferenz – in diesem Fall für JavaScript. (Foto: OverAPI)
Klassische Kurzreferenz – in diesem Fall für JavaScript. (Foto: OverAPI)

JavaScript Cheat Sheet: Das Cheat-Sheet zu Javascript von OverAPI ist umfassend. Link

JavaScript Regex Cheatsheet: Wer häufiger Regular Expressions für JavaScript nachschlagen muss, könnte sich für diese Referenz interessieren. Link

jQuery Quick API Reference: Die API-Referenz lässt sich für unterschiedliche Versionen von jQuery einsehen. Link

Cheat-Sheets für SEO und Socialmedia

Webdesigner müssen zu einem gewissen Grad auch fit in SEO sein. (Foto: MOZ)
Webdesigner müssen zu einem gewissen Grad auch fit in SEO sein. (Foto: MOZ)

On-Page SEO Cheat Sheet: Ein interaktives Cheat-Sheet für alle Webdesigner, die auch suchmaschinenoptimierte Webdesigns anbieten wollen. Link

The Web Developer’s SEO Cheat Sheet: Sehr umfangreiches und empfehlenswertes Cheat-Sheet von Moz zum Thema SEO. Link

Social media cheat sheet: Es gilt ein Bild auf mehreren sozialen Netzwerken zu posten. Wer sich nicht sicher ist, welche Maximalabmessungen erlaubt sind. Findet mit diesem Cheat-Sheet Hilfe – auch zu Fragen wie beispielsweise die maximale Dateigröße gibt es Antworten. Link

CMS-Cheat-Sheets

Wer sich mit WordPress-Templates beschäftigt, findet ebenfalls Hilfe in Form von Kurzreferenzen. (Foto: Build Your Own Blog)
Wer sich mit WordPress-Templates beschäftigt, findet ebenfalls Hilfe in Form von Kurzreferenzen. (Foto: Build Your Own Blog)

Ghost Cheat Sheet: Webdesigner, die mit dem CMS Ghost zu tun haben, sollten sich das entsprechende Cheat-Sheet ansehen. Link

The Time Saving Copy/Paste WordPress Cheat Sheet: Wer sich mit dem Entwickeln, Aktualisieren und Warten von WordPress-Templates beschäftigt, findet in diesem Cheat-Sheet die gängigsten Funktionen und kann sie per Copy&Paste verwenden. Link

Joomla! 3.x templates cheatsheet: Dieses Cheat-Sheet liefert Informationen rund um Joomla-Templates. Link

Noch mehr Cheat-Sheets

Fehlt euch noch eine Kategorie oder habt ihr weitere Empfehlungen für Cheat-Sheets innerhalb der einzelnen Kategorien? Dann lasst uns das doch in den Kommentaren wissen, denn wir werden diesen Artikel regelmäßig aktualisieren. In einem zweiten Teil wollen wir für euch für Entwickler empfehlenswerte Cheat-Sheets sammeln.

]]>
Sébastien Bonset
Die 10 beliebtesten Artikel der Woche: Interview mit Stewart Butterfield, Tutorials für Webentwickler und Martin Weigerts E-Commerce-Kolumne http://t3n.de/news/10-beliebstesten-artikel-woche-592313/ 2015-02-07T10:00:43Z
Besondern gerne gelesen wurde in der vergangen Woche die Kolumne von Martin Weigert über den Niedergang des stationären Handels. Zudem haben wir euch zehn Tutorials für Webdesigner- und Entwickler …

Besondern gerne gelesen wurde in der vergangen Woche die von Martin Weigert über den Niedergang des stationären Handels. Zudem haben wir euch zehn für Webdesigner- und gezeigt und schöne UI-Schmankerl zum Nachmachen vorgestellt. Mehr Themen der vergangenen Woche haben wir wie immer in unserem Wochenrückblick für euch.

1. Warum ich manchmal doch Angst um die Zukunft meiner Daten habe

Lange war mir egal, dass Informationen über mich permanent in irgendwelchen Datenbanken landen. Mir war nicht ganz klar, wie man mir damit würde schaden können. Bis mir ein Kneipenerlebnis die Augen geöffnet hat. 

Unser Artikel: Warum ich manchmal doch Angst um die Zukunft meiner Daten habe

2. Du arbeitest mit zwei Monitoren? Hier findest du schicke Desktop-Hintergründe

Einen Rechner mit mehr als einem Monitor zu betreiben, ist heute keine Seltenheit mehr. Wir verraten euch, wo ihr die schicksten Desktop-Hintergründe für euer Multi-Monitor-Setup findet.

Unser Artikel: Du arbeitest mit zwei Monitoren? Hier findest du schicke Desktop-Hintergründe

3. „Es ist fast ein Wunder, dass überhaupt jemand Slack nutzt!“ – Slack-Gründer Stewart Butterfield im Interview

Nachdem er erfolgreich verkauft hat, will er jetzt seinen nächsten Dienst groß machen. Wir haben Slack-Gründer Stewart Butterfield zum in München getroffen.

Unser Artikel: „Es ist fast ein Wunder, dass überhaupt jemand Slack nutzt!“ – Slack-Gründer Stewart Butterfield im Interview

4. Der Niedergang des stationären Handels ist ein neuer Anfang [Kolumne]

Der lokale Handel sieht sich durch den immer stärker unter Druck gesetzt, meint Martin Weigert in seiner „Weigerts World“. Wahrscheinlich sei, dass traditionelle Geschäfte eines Tages den gleichen Seltenheitswert haben werden wie heute Schallplatten. Das stelle uns als Gesellschaft vor Herausforderungen, einen Grund für Fatalismus gebe es aber nicht.

Unser Artikel: Der Niedergang des stationären Handels ist ein neuer Anfang [Kolumne]

5. 10 hilfreiche Tutorials und Quellen für Webentwickler und -designer (Teil 6)

, CSS3, UX-Design, Icon-Packs & Co.: In unserer neuen Serie fassen wir für euch regelmäßig neue und Quellen zusammen, die aus unserer Sicht extrem hilfreich für Webentwickler und -designer sind. Hier kommt der sechste Teil.

Unser Artikel: 10 hilfreiche Tutorials und Quellen für Webentwickler und -designer (Teil 6)

6. Number26: Die Girokonto-Revolution?

Nur wenige Produkte sind so essentiell wie das Girokonto. Ohne Girokonto kein Zahlungsverkehr. Das Startup Number26 will Europas modernstes Girokonto sein. Der Teufel liegt jedoch im Detail.

Unser Artikel: Number26: Die Girokonto-Revolution?

7. So schön ist Webdesign: Schmackhafte UI-Schmankerl zum Nachmachen (Teil 2)

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.

Unser Artikel: So schön ist Webdesign: Schmackhafte UI-Schmankerl zum Nachmachen (Teil 2)

8. Wieder eine Absage? 9 mögliche Gründe, warum du den Job nicht bekommen hast

Eine Bewerbung ist eine Prüfung der besonderen Art, von ihrem Erfolg oder Nicht-Erfolg hängen ganz existenzielle Dinge ab. Gerade deswegen zermartern sich Menschen auch den Kopf, wenn es wieder mal nicht geklappt hat. Wir liefern die wahren Gründe für die Absage.

Unser Artikel: Wieder eine Absage? 9 mögliche Gründe, warum du den Job nicht bekommen hast

9. SpiderOak, Tor und Co. – 5 Tipps und Tools von Edward Snowden für mehr Privatsphäre im Netz

Edward Snowden hat nicht nur die Massenüberwachung durch die Sicherheitsdienste aufgedeckt, er hat immer wieder auch Tipps gegeben, wie man seine Daten schützen kann. Der Autor Daniel Kuhn fasst zusammen.

Unser Artikel: SpiderOak, Tor und Co. – 5 Tipps und Tools von Edward Snowden für mehr Privatsphäre im Netz

10. Harte Arbeit für die Augen: 7 Tipps für Bildschirmarbeiter

Immer mehr Menschen sitzen täglich für längere Zeit am Computer sei es auf der Arbeit oder in der Freizeit beim PC-Spielen oder Surfen. Die Beanspruchung für die Augen wächst dabei stetig. Hier erfahrt ihr warum diese Belastung sogar krank machen kann und was ihr dagegen tun könnt.



Unser Artikel: Harte Arbeit für die Augen: 7 Tipps für Bildschirmarbeiter

]]>
Melanie Petersen
So schön ist Webdesign: Schmackhafte UI-Schmankerl zum Nachmachen (Teil 2) http://t3n.de/news/schoen-webdesign-ui-schmankerl-teil2-591063/ 2015-02-01T14:27:14Z
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-01-30 um 10.14.53

Unser Leser Nico Saborowski hat uns im letzten Teil dieser Serie auf eine nette Anzeige der ungefähren Lesezeit bei allfacebook.de hingewiesen. Danke dafür!

trello-2

Trello achtet besonders auf Details: Das Favicon ändert sich entsprechend der Hintergrundfarbe des Boards. Sehr praktisch wenn man auf mehreren Boards gleichzeitig arbeitet. Leider werden die unterschiedlichen Icons nur in Chrome richtig angezeigt.

ui-schmankerl-2

Wenn ihr versucht, das Google-Männchen innerhalb von Area 51 zu platzieren, könnt ihr das nicht und das Männchen verwandelt sich in ein UFO samt Piloten. Ein Beweis, dass Google von Außerirdischen geführt wird? Ich weiß es nicht, aber es ist ein nettes UI-Feature.

Bildschirmfoto 2015-01-30 um 09.43.27

Der Kalender von Sunrise hat kontext-sensitives Labeling, das heißt: Die App erkennt automatisch anhand von Keywords, welcher Aktivität ihr nachgehen wollt und ändert dementsprechend das Icon in der Kalenderansicht. Recht praktisch und auch sehr schön umgesetzt.

Bildschirmfoto 2015-01-30 um 09.53.07

Google Maps zeigt euch den Schatten von hohen Gebäuden in Echtzeit an. Ein kleines Detail, das zwar nicht wirklich hilfreich ist, wenn man auf der Suche nach einer bestimmten Adresse ist – trotzdem ein nettes Feature und eine Feinheit, die das UX aufwertet.

Bildschirmfoto 2015-01-30 um 09.55.11

Wie auch bei Trello fungiert das Logo von Ello als Ladeindikator. Ein kleines, aber nettes Feature, das den Nutzer auf das Logo lenkt und das Interface ruhiger wirken lässt. Gerade, wenn man kein Freund von Overlays ist.

Bildschirmfoto 2015-01-30 um 10.08.23

Slack ist in aller Munde – teilweise zurecht. Das Team-Kommunikations-Tool zeigt nette Sprüche oder Erinnerungen während des Ladevorgangs an. Habt ihr eigentlich schon zwei Liter Wasser getrunken? Sitzt ihr eigentlich in einer ergonomischen Position?

Bildschirmfoto 2015-01-30 um 10.09.08

Das Dokumentations-Tool für Entwickler readme hat ein nettes Feature bei der Passwort-Eingabe. Wechselt ihr in das Eingabefeld für das Passwort, verdeckt sich das Maskottchen die Augen. Och, wie süß!

Bildschirmfoto 2015-01-30 um 10.17.59

„Bilder sagen mehr als tausend Worte“, hat sich wohl tumblr.com gedacht, als das Team die neuesten Verbesserungen im GIF-Format kommuniziert hat. Sieht nicht nur gut aus, bringt die Veränderungen auch gut auf den Punkt.

Bildschirmfoto 2015-01-30 um 10.23.44

Ein weiteres Schmankerl beschert uns Slack: Farben im Hex-Format werden direkt im Chat angezeigt. Ideal für etwaige Pipetten von Bildbearbeitungssoftware.

Wenn euch diese UI-Schmankerl gefallen haben: Hier geht es zurück zum ersten 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
HTML5 Days 2015: Sechs Workshops von Responsive Webdesign bis asynchrones JavaScript [Sponsored Post] http://t3n.de/news/html5-days-2015-sechs-workshops-590325/ 2015-01-29T09:30:20Z
Vom 4. bis 6. März 2015 präsentieren das Entwickler Magazin und die Entwickler Akademie die HTML5 Days in München. Das Trainingsevent bietet sechs Workshops mit fünf der bekanntesten …

Vom 4. bis 6. März 2015 präsentieren das Entwickler Magazin und die Entwickler Akademie die HTML5 Days in München. Das Trainingsevent bietet sechs Workshops mit fünf der bekanntesten deutschsprachigen HTML5-Experten. Im Interview erzählt Christian Wetz was für ihn die spannendsten Entwicklungen im Bereich HTML5 und JavaScript sind.Jens Grochtdreis, Peter Kröner, Thorsten Rinne, Sebastian Springer und Christian Wenz leiten die Workshops. Zusammen mit den parallel laufenden JavaScript Days und AngularJS Days können Teilnehmer aus insgesamt 24 Workshops auswählen.

Themen der HTML5 Days sind Responsive Webdesign, Modulare Webentwicklung mit SAAS, asynchrones JavaScript, Modernisierung von Legacy Applikationen auf HTML5 sowie Kommunikations-APIs von JavaScript und HTML5. Alle Infos finden Interessenten auf www.html5-days.de.

Christian Wenz auf den HTML5 Days 2105

wenz_christian_html5-days-2015-(2)Christian Wenz ist Berater, Trainer und Autor zu Webthemen. Er ist Autor und Koautor von über 100 Büchern (unter anderem "JavaScript: Das umfassende Handbuch"), in zehn Sprachen übersetzt, ASP.NET MVP und ASPInsiders-Mitglied sowie Inhaber verschiedener Microsoft-Zertifizierungen. Er unterstützt seit vielen Jahren Mittelständler und Groβkonzerne in den Bereichen Web-Performance, Web-Security und mobiles Web.

Thomas Wießeckel: Christian, die Kommunikation mit JavaScript war in der Vergangenheit arg eingeschränkt - seit HTML5 sich immer weiter verbreitet, gibt es jedoch Licht am Ende des Tunnels. Was hat sich in den letzten Jahren getan?

Christian Wenz: Eine ganze Menge. JavaScript wurde ja bekannterweise in sehr kurzer Zeit erstellt und so ist es verwunderlich, dass es überhaupt ein Sicherheitskonzept gibt. Für heutige Webanwendungen ist dieses Modell allerdings immer wieder ein Hindernis. Glücklicherweise gibt es alte und neue Workarounds. In Sachen Kommunikation gab es in JavaScript lange Zeit wenig – und das, was es gab, war kaum bekannt. Mit der Einführung von XMLHttpRequest hat sich hier etwas getan, in Verbindung mit den Sicherheitseinschränkungen konnte man viel machen, aber eben nicht alles. Neue Protokolle und Standards und auch performantere Kommunikationsmöglichkeiten sind Aspekte, die viele Web-Applikationen bereichern können. Darum geht es auch bei den HTML5 Days.

Thomas Wießeckel: Einige der von dir genannten Features sind nicht neu - und dennoch nicht sonderlich verbreitet. Woher kommt das deiner Meinung nach?

Wenz: Die am häufigsten eingesetzte Kommunikationstechnologie ist wohl XMLHttpRequest und die reicht in vielen Fällen auch aus. Außerdem gibt es immer mehr Frameworks, die selber zwischen Client und Server die beste Kommunikationstechnologie aushandeln, so dass man nicht mehr notwendigerweise einen Einblick braucht, was im Hintergrund passiert. Das finde ich schade und auch bedenklich, erklärt aber auch, wieso einige der Lösungen einen geringeren Bekanntheitsgrad haben. Das will ich im Workshop auf den HTML5 Days ändern.

Thomas Wießeckel: Nun gibt es für viele Probleme entweder die "richtige" aber mächtige Lösung - und einige Workarounds, zum Beispiel die Nutzung von Local Storage als Kommunikationsmöglichkeit über Tabs hinweg. Welche weiteren spannenden Beispiele kennst du noch?

Wenz: Die Messaging-API von JavaScript ist meiner Meinung nach eines der am meisten unterschätzten Features der Sprache – auch wenn die Schnittstelle selber auch für Webworker Pate stand. Die Verwendung von Web-Storage ist auch ein gutes Mittel für Datenaustausch und -persistenz, weil Cookies für Single-Page-Applications meist nicht der optimale Weg sind.

Thomas Wießeckel: Wie schätzt du diesen Forscherdrang der Entwickler ein - ist das der Schub, den die Browserhersteller benötigen, um alle (offenen) Features endlich umzusetzen?

Wenz: Das ist ein typisches Henne-Ei-Problem. Unterstützt man offene Features zu einem frühen Zeitpunkt, mag das gut fürs Ego sein, aber schlecht für die Browserunterstützung der Anwendung. Andersherum haben Browserhersteller möglicherweise weniger Motivation, Features zu implementieren, die bei der Konkurrenz nur wenig Anwender finden. Ich denke dass heutzutage vieles Framework-getrieben ist – bei aktuellen Browsern wird auf die neuesten Features gesetzt, für ältere Systeme gibt es Polyfills. Das entbindet Entwickler nicht von der Pflicht, sich mit den dahinter liegenden Techniken zu beschäftigen, aber es verbreitert die Zielgruppe der Anwendung.

Thomas Wießeckel: Welches der bestehenden und vielleicht noch kommenden APIs findest du am spannendsten?

Wenz: Spannend finde ich WebRTC, aber bis das wirklich überall funktioniert, wird das noch ein wenig dauern. Ansonsten stelle ich bei Kunden immer wieder fest, dass ein Framework, das standardmäßig WebSockets verwendet und als Fallback-Lösung XMLHttpRequest implementiert, in vielen Anwendungsfällen der beste Ansatz ist.

Thomas Wießeckel: Auf den HTML5 Days hältst du einen Workshop zu den Kommunikations-APIs von JavaScript und HTML5. Was erwartet die Teilnehmer darin?

Wenz: Im Wesentlichen die Themen, die wir bei den vorherigen Fragen schon diskutiert hatten. Der Fokus liegt ein wenig stärker auf den „Unsung Heroes“. Beispielsweise geht es auch um WebSockets, aber nicht als Hauptthema. Dafür diskutieren wir verschiedene Ansätze, die Same-Origin-Policy der Browser zu umgehen, von alten Ansätzen wie JSONP bis hin zu neueren Standards wie CORS. Auch Exoten wie etwa Server-Sent-Events kommen vor, aber prinzipiell ist natürlich alles mit unzureichendem Browser-Support für die Praxis nur wenig relevant.

Erfahre mehr über die HTML5 Days 2015

]]>
t3n Redaktion
Kein Augenschmaus: Ein Rückblick auf die Anfangszeiten der zehn reich­wei­ten­stärks­ten deut­schen Web­sites http://t3n.de/news/kein-augenschmaus-rueckblick-589126/ 2015-01-19T09:37:26Z
Responsive, Flat Design, Card Design, schi­ckere Typo­gra­fie – ein Webdesign-Trend jagt den nächs­ten. Vom pixe­li­gen, unbe­hol­fe­nen Lay­out der frü­hen Web­sites ist das Netz …

Responsive, Flat Design, Card Design, schi­ckere Typo­gra­fie – ein Webdesign-Trend jagt den nächs­ten. Vom pixe­li­gen, unbe­hol­fe­nen Lay­out der frü­hen Web­sites ist das Netz heute weit ent­fernt. Wer mit der „Way­back Machine“ auf archive.org in der Zeit zurück reist und sich ansieht, wie heute große Por­tale in ihrer Anfangs­zeit aus­sa­hen, bekommt mög­li­cher­weise einen klei­nen Kul­tur­schock. Hier könnt ihr sehen, wie gro­tesk die zehn reich­wei­ten­stärks­ten deut­schen Web­sites auf die Augen heu­ti­ger User wir­ken, nämlich auf deine:

T-Online (Februar 1997)

t-online_februar1997
(Foto: Online Marketing Rockstars) T-Online in 1997

Dem einen oder ande­ren mag die­ser Screen­shot mit dem Wis­sen der heu­ti­gen Zeit ein klei­nes Schmun­zeln ent­rin­gen. Das Por­tal T-Online, heute ein Wust aus Con­tent und Wer­bung, prä­sen­tiert sich damals noch rela­tiv über­sicht­lich. An zen­tra­ler Stelle trom­melt die Tele­kom dort damals für die Teil­nahme ihres Teams an der Tour de France. Zu die­sem Zeit­punkt sieht noch alles nach Heile Welt aus: Im Vor­jahr hat der Däne Bjarne Riis im Tri­kot des „Team Tele­kom“ die Tour de France gewon­nen, im Som­mer 1997 wird der junge Jan Ulrich den Erfolg wie­der­ho­len. Was in die­ser Zeit wirk­lich gesche­hen ist, kommt erst zehn Jahre spä­ter, im Rah­men der „Doping­af­färe Team Tele­kom“ her­aus. Der Spon­sor been­det dar­auf­hin schlag­ar­tig sein gesam­tes Enga­ge­ment im Rad­sport. Mit sei­nem Por­tal T-Online liegt das Unter­neh­men dafür noch heute auf dem ers­ten Platz der Reich­wei­ten­ran­kings von Agof und IVW. Dies dürfte zu einem nicht uner­heb­li­chen Maß daran lie­gen, dass das Por­tal bei vie­len Deut­schen mit einem Telekom-Internetzugang über lange Jahre als Start­seite vor­ein­ge­stellt war und nicht wenige dort noch heute über eine E-Mail-Adresse ver­fü­gen. Zuletzt gab es jedoch Gerüchte über Ver­kaufs­ge­sprä­che mit Axel Sprin­ger.

Ebay.de (Okto­ber 1999)

ebay_oktober_1999
(Foto: Online Marketing Rockstars) Ebay in 1999

Auch die­ser Screen­shot hat gleich aus meh­re­ren Grün­den Schmun­zel­po­ten­zial. Zum einen, weil Ebay mit der dar­auf sicht­ba­ren Auk­tion des gel­ben Pul­lun­ders von Hans-Dietrich Gen­scher lan­des­weit Presse bekam. Der ehe­ma­lige Außen­mi­nis­ter soll das Klei­dungs­stück getra­gen haben, als die Grenze zwi­schen Ost- und West­deutsch­land fiel. Angeb­lich soll der Pul­lun­der einen Auk­ti­ons­preis von 2.000 D-Mark erzielt haben. Aus Online-Branchensicht ist aber sicher­lich das gemein­same Logo von Ebay und Alando noch amü­san­ter. Alando war die erste Grün­dung der Samwer-Brüder: Nach­dem sie der Über­lie­fe­rung zufolge von Ebay USA auf ihre Anfrage, ob sie nicht das Deutsch­land­ge­schäft des Unter­neh­mens auf­bauen könn­ten, keine Ant­wort erhiel­ten, kopier­ten sie die US-Seite ein­fach. Vier Monate spä­ter ver­kauf­ten sie Alando, ihre Ver­sion des Online-Auktionshauses, für 50 Mil­lio­nen US-Dollar an Ebay. Der Coup legte den Grund­stein für den spä­te­ren Auf­stieg der drei Jung­un­ter­neh­mer. Das Buch von Joel Kacz­ma­rek über die Samwer-Brüder gibt einen klei­nen Ein­druck davon, wel­che Skur­ri­li­tä­ten sich in die­ser Zeit ereig­net haben müs­sen. Ebay ist noch heute zweit­reich­wei­ten­stärkste Seite in Deutschland.

Bild.de (1996)

bild_1996
(Foto: Online Marketing Rockstars) Bild.de in 1996

Bild Online gelang es mit dem Start 1996 die eigene CI unver­kenn­bar ins Netz zu über­tra­gen. In den fol­gen­den Jah­ren erlebte die Springer-Marke im Netz dann eine kleine Ach­ter­bahn­fahrt. Nach dem Plat­zen der New-Economy-Blase brachte das Medi­en­haus die Marke Bild in ein Joint-Venture mit der Tele­kom ein und das Por­tal war lange Jahre unter bild.t-online.de zu errei­chen. Erst im Jahr 2008 been­dete Sprin­ger die Zusam­men­ar­beit.

gutefrage.net (Januar 2006)

gutefrage.net_februar2006
(Foto: Online Marketing Rockstars) Gutefrage.net in 2006

Unter dem Dach von Holtz­brinck ent­wi­ckelte New-Economy-Veteran Jens Doka, heute für die Digi­tal­sparte von Pro-Sieben-Sat1 tätig, die Q&A-Community gutefrage.net. Noch heute ist das Por­tal ein Traffic-Bringer – vor allen Din­gen Google spült wegen der guten Such­ma­schi­nen­op­ti­mie­rung regel­mä­ßig Tau­sende von User auf die Seite.

Chip Online (Mai 1998)

chip_mai1998
(Foto: Online Marketing Rockstars) Chip in 1998

Das Wort „Net­Sur­fing“ würde heute wohl nie­mand mehr iro­nie­frei ver­wen­den, aber damals wie heute gilt: Chip ist die am stärks­ten fre­quen­tierte Anlauf­stelle für den IT-Nerd-Mainstream im Netz. Schön auf die­sem Screen­shot auch die Wer­bung für den heute noch Maß­stäbe set­zen­den Website-Editor Front­page 98 (lei­der ist die Bild­da­tei auf Archive.org nicht mehr ver­füg­bar).

Web.de (Okto­ber 2002)

web.de_oktober2002
(Foto: Online Marketing Rockstars) Web.de in 2002

Das Por­tal Web.de ist nach Betrei­ber­an­ga­ben 1999 ins Netz gegan­gen; der erste Screen­shot in der Way­back Machine datiert auf das Jahr 2002.

Com­pu­ter­bild (Januar 1998)

computerbild__januar1998
(Foto: Online Marketing Rockstars) Computerbild in 1998

Sprin­gers IT-Marke fin­det im Web zuerst bei AOL ein zu Hause – das erklärt auch den Hin­weis „Nur für AOL-Mitglieder ver­füg­bar!“ zu eini­gen Navigations-Buttons in die­sem Screen­shot. Ab 1999 ist die Medi­en­marke online unter eige­ner Domain zu errei­chen.

Focus (Juni 1997)

focus_juni1997
(Foto: Online Marketing Rockstars) Fokus in 1997

„Fak­ten, Fak­ten, Fak­ten“ – damit will Focus auch in der Früh­zeit des Webs punk­ten. Wie der Screen­shot zeigt, waren damals die typo­gra­phi­schen Mög­lich­kei­ten auf allen Web­sites noch recht ein­ge­schränkt, da im Web­de­sign nur mit den auf den Rech­nern der User vor­in­stal­lier­ten Fonts gear­bei­tet wer­den konnte.

Chef­koch (Juni 2000)

chefkoch_juni2000
(Foto: Online Marketing Rockstars) Chefkoch in 2000

Chef­koch dürfte heute eines der weni­gen Digi­tal­pro­jekte sein, dass dem Ham­bur­ger Ver­lag Gruner+Jahr wirk­li­che Freude berei­tet. Gestar­tet ist das Pro­jekt bereits 1998; G+J kaufte das Betrei­ber­un­ter­neh­men erst 2008 auf. In den fol­gen­den Mona­ten musste das Ver­lags­haus erst ein­mal gericht­li­che Aus­ein­an­der­set­zun­gen in Urhe­ber­rechts­schutz­fra­gen mit einem ande­ren, eher zwie­lich­ti­gen Online-Kochbuchbetreiber, durch­ste­hen. Heute bezeich­net sich Chef­koch als größte Platt­form rund ums Kochen in Europa; Gru­ner hat die Marke um eine App und eine Print-Ausgabe erwei­tert.

RTL.de (April 1997)

rtl_april1997
(Foto: Online Marketing Rockstars) RTL in 1997

RTL war in den ers­ten Jah­ren im Netz mit der eige­nen Marke noch ein eher klei­nes Licht – kein Wun­der, wirft man einen Blick auf das ein­ge­schränkte Ange­bot auf die­sem Screen­shot. Natür­lich gab es damals aber auch noch nicht die tech­ni­sche Infra­struk­tur, um online mit Video-Inhalten ein grö­ße­res Publi­kum zu errei­chen. Heute hat der Köl­ner Sen­der sein Video-Angebot RTL Now auf die eigene Domain über­führt und liegt damit im Reichweiten-Ranking auf Platz 10.

„BONUSTRACKS“: Google, Face­book und Youtube

Weil die US-Konzerne Google und Face­book die Reich­weite ihrer Platt­for­men nicht von Agof oder IVW erfas­sen las­sen, diese aber trotz­dem zu den reich­wei­ten­stärks­ten Zie­len im Netz gehö­ren, haben wir für Euch auch noch frühe Screen­shots von deren Ange­bo­ten aus­ge­gra­ben. Google begann im Jahr 2001 mit dem Ver­kauf von Adwords in Deutsch­land und bewarb das Pro­dukt auf der Start­seite als „do-it-yourself Mar­ke­ting­sys­tem“. Face­book bot ab 2008 eine deutsch­spra­chige Ver­sion an. Von Youtube haben wir lei­der kei­nen frü­hen Screen­shot der deut­schen Ver­sion gefun­den. Inter­es­sant an dem Screen­shot der Haupt­platt­form aus dem Jahr 2005 ist aber, dass er das Gerücht bestä­tigt, dass die Grün­der des Unter­neh­mens zuerst eine Dating-Plattform ent­wi­ckeln woll­ten.

facebookde_deutsch_2008
(Foto: Online Marketing Rockstars) Facebook in 2008
google_januar_2001
(Foto: Online Marketing Rockstars) Google in 2001
youtube_april_2005
(Foto: Online Marketing Rockstars) Youtube in 2005

Von Roland Eisenbrand. Ursprünglich publiziert bei Online Marketing Rockstars.

]]>
Online Marketing Rockstars
Webdesign 2015: Diese Trends erwarten dich http://t3n.de/news/webdesign-trends-2015-586316/ 2014-12-30T07:50:35Z
Die letzte Kerze am Adventskranz ist abgebrannt, die Geschenke ausgepackt und umgetauscht. Das Jahr 2014 geht zu Ende. Zeit für einen kleinen Überblick auf das, was 2015 für Webworker bringen könnte.

Die letzte Kerze am Adventskranz ist abgebrannt, die Geschenke ausgepackt und umgetauscht. Das Jahr 2014 geht zu Ende. Zeit für einen kleinen Überblick auf das, was 2015 für Webworker bringen könnte.

Wieder neigt sich ein Jahr voller neuer Design-Innovationen und spannender Konzepte dem Ende zu. Oder etwa doch nicht? Die letzten zwölf Monate strotzten nicht gerade vor bahnbrechenden Entwicklungen. Ehemals Everybody’s Design-Darling Apple konnte mit neuer Größe glänzen, das Interface jeglicher Software-Produkte bewegt sich jedoch in den gewohnten, am Flat Design orientierten Mustern. Auch Google führte mit Material Design einen noch stärker an Flat Design angelehnten Ansatz in seine Produkte ein. Und sonst so? Parallax Scrolling ist fast schon ein alter Hut und Ghost Buttons als neuen Trend zu bezeichnen, ist vielleicht ein wenig zu weit ausgeholt.

Was erwartet uns also nach einem vergleichsweise schwachen Design-Innovations-Jahr 2014? Zur Zeit zeichnet sich nichts bahnbrechend Neues ab, so liegt die Vermutung nahe, dass aktuelle und Patterns weiter verbessert und mehr Verbreitung finden werden.

Responsive Or Go Home

Responsive Webdesign
Responsive Webdesign sollte spätestens 2015 als Standard angesehen und konsequent umgesetzt werden. (Grafik: Froont)

Wer sich bis heute gegen Responsive gewehrt hat, sollte seine Haltung spätestens 2015 noch mal überdenken. Zwar nähern sich Smartphone-Displays langsam immer mehr an Tablet-Bildschirme an, dennoch lässt sich eine für Desktop optimierte Version der Webseiten einfach nicht gut bedienen. Responsive Webdesign ist im Alltag angekommen und sollte spätestens 2015 von allen als Norm angesehen werden. Ganz so streng muss man da natürlich nicht sein: Eine Lösung mit Fallbacks für mobile Geräte hat je nach Projekt genau so eine Daseinsberechtigung.

Auch wird eine zunehmende Verschmelzung von mobilen Patterns und bewährten Desktop-Lösungen zu beobachten sein. So werden beispielsweise Navigationen wie Off-Canvas-Flyouts immer häufiger ihren Weg in Desktop-Versionen von Webseiten finden und so Platz für neue Ideen schaffen.

Flat Design reift zu Material Design

Google Material Design
Googles Material Design setzt auf die Flat-Design-Ästhetik auf und erweitert diese um dezente Verläufe und Animationen. (Screenshot: t3n)

Flat Design hat in den letzten ein bis zwei Jahren viel Fahrt aufgenommen und wird uns wohl auch 2015 mit minimalistischen Formen und klaren, kontrastreichen Farben erhalten bleiben. Das, was Google vor Kurzem als Material Design vorgestellt hat, könnte aber die nächste Evolutionsstufe für Flat Design bedeuten. Googles Material Design setzt auf Flat Design auf und erweitert es um subtile Verläufe, Ebenen und Animationen, ohne die eigentliche Flat-Design-Ästhetik zu beeinträchtigen.

Mikrointeraktionen

Mikrotransaktionen
Mikrointeraktionen sollen möglichst schnell zu mehr Engagement des Benutzers beitragen. (Screenshot: t3n)

Mikrointeraktionen werden seit einigen Jahren verstärkt eingesetzt. Eine der häufigsten Mikrointeraktionen, die du aus deinem Alltag kennst, ist das an eine Paywall angelehnte Overlay, das am Ende von Artikeln in diversen News-Portalen erscheint und dich beispielsweise zum Abo eines Newsletters auffordert. So soll die Interaktion mit der Webseite gefördert und in diesem konkreten Beispiel die Anzahl der Abonnenten erhöht werden.

In einer Zeit, in der jeder User und Klick zählen, wird diese Technik immer häufiger zum Einsatz kommen. Hoffentlich wird es aber auch das ein oder andere Pattern geben, wie man diese Elemente platzieren kann, so dass sie nicht als störend empfunden werden.

Infinite Scrolling, One-Page-Design und Parallax Scrolling

Parallax Scrolling und Storytelling
Storytelling und Parallax Scrolling sind miteinander verbunden und werden 2015 häufiger zum Einsatz kommen. (Screenshot: t3n)

Die Architektur einer Webseite entfernt sich immer weiter von der einer klassischen mehrseitigen und verschachtelten Anwendung hin zu One Page Design und infinite Scrolling. Dies ist nicht zuletzt den „neuen“ Surf-Gewohnheiten in Zusammenhang mit Touchscreens zu verdanken: Scrollen ist schneller und einfacher, als Links und Buttons mit dem Finger zu bedienen.

Dieser Seitenaufbau begünstigt auch das Storytelling auf Webseiten. Zusammen mit Parallax-Scrolling können so fantastische Webseiten mit interessanter Benutzerführung jenseits der sonst üblichen, textlastigen Produktbeschreibungen entstehen. Und damit ist nicht das übliche „eine Ebene scrollt schneller als die andere“ gemeint. Mit Parallax Scrolling können komplexe, fast schon filmreife Animationen ausgelöst und zur Benutzerführung eingesetzt werden.

Auch wenn dieser Trend Webworker vor neue Herausforderungen stellt und weit mehr als nur Coding-Skills und eine noch engere Zusammenarbeit mit dem Designer erfordert, werden werden 2015 immer häufiger solche Webseiten zu sehen sein. Dabei wird es nicht darum gehen, die Technik zu revolutionieren, sondern neue Wege zu finden, das Altbekannte einzusetzen, um noch spannendere und möglicherweise nie dagewesene Effekte zu erzielen.

Card Based Design

Kachel Design
Mit Card-Design sind spannende Layouts, die sowohl für Desktop- als auch Touch-Geräte gut geeignet sind, möglich. (Screenshot: t3n)

Eine der stärkeren Entwicklungen, die im Zusammenhang mit dem Voranschreiten von Mobile-Friendly-Design entstanden sind, ist das so genannte Card Design. Der an die Windows 8 Live-Tiles angelehnte Design-Ansatz findet sich auf immer mehr Webseiten wieder. Kacheln sind fingerfreundlich und lassen eine schnelle und einfache Navigation sowohl auf Desktop- als auch auf Touch-Geräten zu. Auch entstehen durch das Aufteilen der Webseite in verschiedene Kacheln zusätzliche Gestaltungsflächen für Webseiten, die weit über das Kachel-Design von Pinterest hinaus gehen können.

Fullscreen-Background Fotos und Videos

Vollflächige Hintergrundbilder und Videos
Vollflächige Bilder und Videos sind und bleiben ein enormer Eye-Catcher auf jeder Webseite. (Screenshot: t3n)

Vollflächige Fotos und Videos sind ebenfalls nichts bahnbrechend Neues. Nichtsdestotrotz sind sie weiterhin ein gutes Mittel, um Webseiten in Szene zu setzen und zu einer längeren Verweildauer anzuhalten. Vor allem Onepager können von großen Bildern und Videos profitieren. Aber auch als „Start-Bildschirm“ für verschachtelte Seiten sind vollfächige Bilder und Videos gut geeignet. Auch im kommenden Jahr werden vollflächige Bilder und Videos auf Webseiten eingesetzt werden.

Die Herausforderung hierbei wird sich mehr auf den technischen Ansatz erstrecken und Techniken für schnelle Ladezeiten bei weiterhin guter Qualität der eingesetzten Medien beinhalten.

Fazit

Das ein Jahr zu Ende geht bedeutet im Design wohl kaum, dass etwas schlagartig aufhört oder erscheint. Im kommenden Jahr 2015 wird das besonders deutlich werden: Bestehende Trends werden weitergeführt und optimiert werden. Bekannte Muster werden verbessert und bessere Ansätze für den Einsatz der Techniken entwickelt. Der ein oder andere Trend wie Material Design werden zu einem Standard.

Das kommende Jahr scheint sich als Jahr der Optimierung herauszukristallisieren. Ein wirkliches Problem ist das jedoch nicht. Es ist auch ohne monatlich erscheinende neue Design-Trends schwer genug, up to date zu sein. Gönnen wir uns also eine kleine Verschnaufpause – die nächste Design-Revolution kommt früh genug.

]]>
Ilja Zaglov
Templated: 844 kostenlose Website-Templates unter CC-Lizenz http://t3n.de/news/templated-kostenlose-html5-css-templates-586466/ 2014-12-29T08:55:31Z
Auf Templated findet ihr 844 schicke CSS- und HTML5-Templates für eure nächste Website. Die Vorlagen stehen unter der Creative-Commons-Lizenz und können kostenlos zu privaten und kommerziellen …

Auf Templated findet ihr 844 schicke CSS- und HTML5-Templates für eure nächste Website. Die Vorlagen stehen unter der Creative-Commons-Lizenz und können kostenlos zu privaten und kommerziellen Zwecken genutzt werden.

Website-Templates: Auf Templated findet ihr 844 kostenlose Vorlagen. (Screenshot: Templated)
Website-Templates: Auf Templated findet ihr 844 kostenlose Vorlagen. (Screenshot: Templated)

Templated: Umfangreiche Sammlung kostenloser HTML5-Templates

Passende Vorlagen beschleunigen die Erstellung einer Website um ein Vielfaches. Eine umfangreiche Sammlung solcher CSS- und HTML5-Templates bietet euch Templated. Insgesamt 844 kostenlose Vorlagen findet ihr dort. Über die hübsch gestaltete Übersichtsseite könnt ihr euch die anschauen und bei Gefallen einfach herunterladen.

Die Templates scheinen hauptsächlich für Produkt- beziehungsweise Firmenseiten erstellt worden zu sein. Aber auch passende Vorlagen für einen Blog finden sich darunter. Unabhängig von eurem geplanten Projekt, kann sich ein Blick daher auf jeden Fall rentieren. Alle Templates stehen unter der Creative-Commons-Lizenz. Sofern ihr den Urheber der Vorlagen nennt, könnt ihr die Templates in privaten und kommerziellen Projekten kostenfrei einsetzen. Wer auf eine Nennung verzichten möchte, kann auch einen individuellen Lizenzvertrag aushandeln.

Kostenlose Website-Templates: Weitere Quellen für schicke Vorlagen

Die Vorlagen von Templated könnt ihr euch als ZIP-Datei herunterladen. Darin enthalten sind alle HTML5- und CSS-Dateien sowie die dazugehörigen Bilder. Wenn ihr trotz des umfangreichen Angebots kein Template findet, das euch zusagt, könntet ihr auch einen Blick auf W3Layouts werfen. Hier findet ihr etwa 500 Design-Vorlagen für responsive Websites. Auch diese Templates stehen unter einer Creative-Commons-Lizenz.

Noch mehr Inspiration findet ihr in unserem Artikel „Diese 15 Web-Templates musst du gesehen haben“.

via www.producthunt.com

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Kim Rixecker
JavaScript, Flash, CSS und mehr: Die Geschichte des Webdesigns in 9 GIFs http://t3n.de/news/javascript-flat-geschichte-webdesign-585903/ 2014-12-25T14:20:41Z
Webdesign als Disziplin kann mittlerweile auf eine bewegte Geschichte zurückblicken. Sandijs Ruluks hat sie nicht nur aufgeschrieben, sondern auch mithilfe von schönen GIFs visualisiert.

Webdesign als Disziplin kann mittlerweile auf eine bewegte Geschichte zurückblicken. Sandijs Ruluks hat sie nicht nur aufgeschrieben, sondern auch mithilfe von schönen GIFs visualisiert. Mit seiner Erlaubnis teilen wir sie hier mit euch.

Ein Hinweis vorab: Mit den in Klammern angegebenen Zahlen verdeutlicht Sandijs Ruluks den Beginn, also das Aufkommen einer bestimmten Technologie. Nicht selten entfaltete sie ihre Schlagkraft erst in den Folgejahren.

Die Vorläufer des Webdesigns (1989)

 

01-Tab_keys-1

 

Die Anfänge des Webdesigns, wenn man denn überhaupt davon sprechen kann, könnte man vielleicht mit dem dunklen Mittelalter vergleichen: Immerhin gab es damals vor allem schwarze Bildschirme, auf denen nur wenige – nicht besonders farbenfrohe – Pixel lebten. Zwar gab es von Anfang an Ideen und Methoden zur grafischen Darstellung – oftmals war Design hier aber noch eine Frage von Symbolen und Textabständen. Für Sandijs Ruluks von Froont ist damit auch klar: „Spulen wir vor zu den grafischen User-Interfaces – dem Wilden Westen der Tabellen-Ära!“

Tabellen: Die wahren Anfänge (1995)

 

02-Tables-1

 

Im Prinzip ging es mit dem Webdesign erst richtig los, als die ersten Browser aufkamen – und mit ihnen die Möglichkeit, Bilder darzustellen. Lange Zeit behalf man sich hier mit dem Trick, Informationen über die in HTML vorhandenen Tabellenfunktionen zu strukturieren und anzuordnen. Ausgangspunkt für diese Praxis war laut Ruluks das Buch Creating Killer Sites von David Siegel. „Obwohl es sich nicht komplett ‚richtig‘ anfühlte, weil man mit Tabellen ja vor allem Zahlen strukturieren möchte, war es doch für eine ziemlich lange Zeit die beste und übliche Methode, um im Netz zu designen“, schreibt Ruluks. Design-Ideen wurden in einzelne Elemente aufgeteilt und einzeln für das Web übersetzt. Der Transfer eines schönen Designs in funktionierenden Code war zu dieser Zeit ein aufwändiger und schwieriger Prozess, der nicht wenige Entwickler von Anfang an vor den „Tücken des Frontends“ zurückschrecken ließ.

Webdesign in den 90er-Jahren: JavaScript eilt zur Rettung! (1995)

 

03-Javascript-1

 

Mit JavaScript entstand dann eine Möglichkeit, die Defizite von HTML anderweitig auszugleichen. Funktionen wie Popup-Fenster oder unterschiedliche Reihenfolgen für einzelne Design-Elemente ließen sich nun viel einfacher realisieren. Allerdings legt JavaScript sich sozusagen wie eine eigene Schicht über die Infrastruktur einer Seite und muss auch separat geladen werden. „Es ist sehr mächtig, wenn es richtig angewendet wird, allerdings wird es oft von faulen Entwicklern als eine Art Flickenlösung verwendet“, so Ruluks. Daher wird heute oftmals eher CSS genutzt. In Form von jQuery und Node.js bleibt JavaScript aber sowohl für das Front- als auch für das Backend enorm wichtig.

Das goldene Zeitalter der Freiheit – Flash (1996)

 

04-Flash-1

 

Formen, Layouts, Interaktionen, Animationen und beliebige Schriftarten: All diese Freiheiten gewährt die Technologie Flash. Das fertige Design wird in eine einzige Datei verpackt und an den Browser gesendet, der diese dann darstellt. Hört sich sehr einfach an – funktioniert aber nur, wenn der Nutzer des Browsers das aktuelle Flash-Plugin installiert und kein Problem damit hat, eine Weile auf das Laden der Seite zu warten. „Es war das goldene Zeitalter von Splash-Seiten, Intro-Animationen und allen möglichen interaktiven Effekten“, schreibt Ruluks. Letztlich verbrauchte Flash aber zu viele Ressourcen und war auch nicht Suchmaschinen-freundlich genug, um zum dauerhaften Non-Plus-Ultra zu werden. Der Todesstoß für Flash im Webdesign kam 2007, als Apple sich für sein erstes iPhone gegen die Technologie entschied.

CSS (1998)

 

05-CSS-2

 

Nicht viel später als Flash betraten die Cascading Style Sheets (CSS) die Bühne des Webdesigns. Während die eigentlichen Inhalte hier in HTML bleiben, kümmert sich CSS gesondert um deren Darstellung, was eine technisch saubere Unterscheidung zwischen Content und Design ermöglicht. Das anfängliche Problem von CSS lag vor allem in der Inkompatibilität vieler Browser, die die Gestaltungssprache nicht verstanden oder nur in Teilen unterstützten. Für Entwickler bedeutete dies auch, dass ihr Projekt in jedem Browser unterschiedlich aussehen und unterschiedliche Probleme aufweisen konnte – nicht gerade eine Arbeitserleichterung. Es dauerte mehrere Jahre, bis diese Kinderkrankheiten behoben waren. Zur jetzigen Bedeutung von CSS für Designer hat Sandijs Ruluks folgende Meinung:

„Sollten Webdesigner programmieren lernen? Vielleicht. Sollten sie verstehen, wie CSS funktioniert? Absolut!“

Der Aufstieg von Mobile: Grids und Frameworks im Webdesign (2007)

 

06-Grids-1

 

Mit dem Aufkommen mobiler Endgeräte wurde eine neue Ära des Webdesigns eingeläutet – eine Ära, die ihre ganz eigenen Herausforderungen mit sich brachte: Brauchen wir mobil insgesamt weniger Inhalte oder „nur“ neue Darstellungsformate? Welche Layouts funktionieren auf welchem Screen? Und was machen wir bloß mit der Werbung auf diesen winzigen Bildschirmen? Gerade in den Anfangszeiten des mobilen Internets waren auch lange Ladezeiten und damit verbundene horrende Kosten für die Nutzer ein Problem.

Der erste Schritt zur Lösung dieser Probleme lag in festen Gestaltungsrastern. Besonders das 960-Grid-System und seine zwölfspaltige Aufteilung setzten sich durch. In einem weiteren Schritt wurden besonders häufig genutzte Design-Elemente wie Buttons oder die Navigation standardisiert und zu festen „visuellen Bibliotheken“ verdichtet: Unter diesen Frameworks machten Bootstrap und Foundation das Rennen. Für Sandijs Ruluks hängt diese Entwicklung auch mit der Tatsache zusammen, dass die Grenzen zwischen Apps und Websites immer weiter verschwinden und die beiden Frameworks es erlauben, den Mobile-First-Ansatz auf alle Webprojekte anzuwenden. Der Nachteil in seinen Augen: Viele Designs ähneln sich aufgrund der zugrunde liegenden Frameworks sehr stark. Und Designer, die nicht programmieren können, bleiben auch bei Bootstrap, Foundation und ihren Verwandten immer noch außen vor.

Responsive Webdesign (2010)

 

07-Responsive-3

 

Mit seiner Idee, denselben Content, aber unterschiedliche Layouts für Designs zu nutzen, brachte Ethan Marcotte frischen Wind in die Entwicklung des Webdesigns. Marcotte mag nicht der Erste gewesen sein, der diese Idee hatte – doch hat er dem Kind mit „Responsive Webdesign“ einen einschlägigen Namen und ein sauberes Konzept gegeben, so dass sich seine Perspektive innerhalb kurzer Zeit weit verbreitet und durchgesetzt hat (übrigens haben wir die Prinzipien des Responsive Webdesigns hier vorgestellt, ebenfalls in schönen GIFs von Froont).

Ruluks betont, dass Responsive Design momentan noch für jeden etwas anderes bedeutet: Für den Auftraggeber heißt es, dass die Website auch auf dem Smartphone funktioniert. Für den Designer, dass er viele verschiedene Mockups erstellen muss. Für den Entwickler diverse Unterschiede in der Ausspielung der Bilder, Download-Zeiten und eine Menge mehr. „Der größte Vorteil ist die Gleichwertigkeit des Contents, also die Tatsache, dass ein und dieselbe Website überall funktioniert. Hoffentlich können wir uns auf diesen gemeinsamen Nenner einigen.“

Back to the roots? Flat Design (2010)

 

08-Flat-2

 

Je mehr Layouts man entwerfen muss, desto besser fährt man damit, sich auf das Wesentliche zu konzentrieren: Weniger tolle Animationen und Effekte, mehr Fokus auf die Inhalte. Für Ruluks bedeutet das in Sachen modernes Webdesign: hochwertige Fotos, durchdachte Typografie, klare Illustrationen und schlaue Layouts. Zu dieser Entwicklung gehört auch das Flat Design, bei dem visuelle Elemente auf ihre wesentliche Funktion reduziert werden: „Glänzende Buttons werden ersetzt durch Icons, für die man skalierbare Vektorgrafiken und Icon-Fonts verwenden kann, Web-Fonts sorgen für wunderschöne Typografie.“ In gewisser Weise liegt in der Besinnung auf simples, funktionales Design eine Rückkehr zu den frühen Zeiten des Webdesigns, als technisch einfach noch nicht viel mehr möglich war: Back to the roots, sozusagen – nur in schöner.

Wir sind noch nicht fertig: Zur Zukunft des Webdesigns (2014)

 

09-Future-1

 

Seit den frühen Zeiten hat sich für Webdesigner viel verändert. Doch noch immer ist nicht alles möglich und noch immer hängt viel von der „Übersetzung“ ihrer Ideen in die richtigen Zeilen Code ab. Sandijs Ruluks träumt von einer Welt, in der es noch weniger technische „Frickelei“ im Webdesign gibt, wenn es um schöne und inspirierende Designs geht. „Stellt euch vor, dass Designer einfach Elemente auf dem Bildschirm neu anordnen und es kommt ein neuer, sauberer Code dabei heraus. Stellt euch vor, dass Entwickler sich nicht um Browser-Kompatibilitäten kümmern müssen, sondern sich auf das Lösen von Problemen konzentrieren können.“

Einige Ansätze gibt es bereits, um diese Zukunft Wirklichkeit werden zu lassen. Etwa Flexbox, mit dem sich Layouts in CSS deutlich einfacher und flexibler gestalten lassen, oder neue CSS-Elemente wie vh (viewport height) oder vw (viewport width), die es einfacher machen, Elemente auf einer Seite zu positionieren. Ein weiteres viel versprechendes Konzept ist das der Web-Components, bei denen einzelne Website-Elemente wie zum Beispiel Bildergalerien oder bestimmte Formulare als einfach einzubindende (und einfach zu pflegende) Bündel zusammengefasst werden, so dass nicht mit unzähligen verschiedenen Plugins gearbeitet werden muss. Es bleibt also spannend!

Was wird sich eurer Ansicht nach durchsetzen, was nicht?

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Lea Weitekamp
OS X Yosemite: Kostenloses UI-Kit für eure nächste Mac-App http://t3n.de/news/os-yosemite-kostenloses-ui-kit-583726/ 2014-12-08T13:30:14Z
Mit Yosemite hat Apple den von iOS bekannten Flat-Design-Look auf sein Desktop-Betriebssystem übertragen. Ein UI-Kit für Sketch soll Designern jetzt dabei helfen, passende Mac-Apps zu gestalten.

Mit Yosemite hat Apple den von iOS bekannten Flat-Design-Look auf sein Desktop-Betriebssystem übertragen. Ein UI-Kit für Sketch soll Designern jetzt dabei helfen, passende Mac-Apps zu gestalten.

OS X Yosemite: UI-Kit für moderne Mac-Apps

Flacher und moderner: Für Yosemite hat Apple die Oberfläche seines Desktop-Betriebssystems OS X deutlich überarbeitet. Das hat nicht jedem Nutzer unbedingt gefallen, wie auch dieser Kommentar unseres Kollegen Mario Janschitz über das UI-Design von OS X zeigt. Dennoch tun App-Entwickler vermutlich gut daran, ihre Anwendungen entsprechend anzupassen, um sie nicht wie anachronistische Fremdkörper wirken zu lassen.

Dabei helfen soll ein UI-Kit des britischen Designers Keir Ansell. In dem Paket finden sich unterschiedliche UI-Elemente, die ihr für eure nächste Mac-App verwenden könnt. Auch die Nutzung in kommerziellen Projekten erlaubt Ansell, ohne ihn namentlich erwähnen zu müssen. Wie viel ihr für das Design-Kit bezahlen wollt, steht euch frei: So sind der Download und die Nutzung auch ohne jedwede Bezahlung möglich, allerdings würde sich der Designer über eine kleine Entlohnung freuen.

OS X Yosemite: Wie viel ihr für das UI-Kit bezahlt, bleibt euch überlassen. (Screenshot: yosemiteui.com)
OS X Yosemite: Wie viel ihr für das UI-Kit bezahlt, bleibt euch überlassen. (Screenshot: yosemiteui.com)

OS X Yosemite: UI-Kit soll demnächst ein Update bekommen

Das UI-Kit für Yosemite-Apps liegt in derzeit in Version 1.0 vor. Demnächst soll eine überarbeitete Version 1.1 erscheinen. Wer sich dafür interessiert, kann sich auf der Website des Yosemite-Kits für einen Newsletter eintragen und wird dann zu gegebener Zeit über das entsprechende Update informiert. Die UI-Elemente liegen im Sketch-Format vor.

Windows-Aficionados oder Mac-Nutzer, die das kostenlose Update auf Yosemite noch nicht durchgeführt haben, finden in diesem Artikel alles Wissenswerte über die aktuelle OS-X-Version. Designer von Smartphone-Apps sollten außerdem einen Blick auf unseren Artikel „Kostenloses UI-Kit für iOS 8: Über 90 Design-Elemente für Photoshop und Sketch“ werfen.

via www.producthunt.com

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Kim Rixecker
Parallax Scrolling: 30 schicke Beispiele des Webdesign-Trends http://t3n.de/news/parallax-scrolling-beispiele-423046/ 2014-12-08T08:37:57Z
Parallax Scrolling ist einer der großen Webdesign-Trends dieses Jahres. Vor allem Geschichten lassen sich mithilfe des Scrolling-Effektes auf beeindruckende Art und Weise ins Web übertragen.

Parallax Scrolling ist einer der großen Webdesign-Trends dieses Jahres. Vor allem Geschichten lassen sich mithilfe des Scrolling-Effektes auf beeindruckende Art und Weise ins Web übertragen. Um euch einen Überblick zu geben, haben wir 30 schicke Beispiele des Scrolling-Effektes herausgesucht.

Wenn sich einzelne Ebenen einer Website unterschiedlich schnell bewegen, entsteht beim Betrachter der Eindruck von Tiefe. Wir kennen den Effekt aus der physischen Welt, wenn wir etwa beim Zugfahren aus dem Fenster schauen. Nahe Objekte wie Menschen oder Häuser scheinen sich dann deutlich schneller zu bewegen als weit entfernte Objekte wie ganze Wälder oder Berge. Überträgt man diesen Effekt in die virtuelle Welt des , nennt man das Parallax Scrolling.

Parallax Scrolling: Die Entwicklung eines Webdesign-Trends

Parallax Scrolling ist in der digitalen Welt schon seit vielen Jahren im Einsatz. Vor allem Videospiele setzen auf den Effekt der Bewegungsparallaxe, schreibt unter anderem Liechtenecker. Populärer Vorreiter und Mitverursacher des Webdesign-Trends war Nike. Das US-Unternehmen veröffentlichte Anfang letzten Jahres die Website Nike Better World, die den Effekt des Parallax Scrolling zum Zeitpunkt der Veröffentlichung einsetzte.

Auch die zunehmende Verbreitung von HTML5 und CSS3 begünstigten den Einsatz des Parallax Scrolling. Die Verwendung der Webdesign-Techniken ist nicht zwingend notwendig, um den Effekt umzusetzen, erleichtert aber die Entwicklung damit einhergehender Details – beispielsweise Animationen und Übergänge. Unterstützend wirkte sich auch das Interesse am Storytelling aus, das in den vergangenen Jahren vor allem im Marketing Einzug hielt.

Parallax Scrolling: 30 schicke Beispiele des Webdesign-Trends

Wie Parallax Scrolling heutzutage eingesetzt wird, zeigen die folgenden dreißig Beispiele. Solltet ihr weitere Websites kennen, die den Effekt einsetzen, schreibt uns eure Links in die Kommentare. Wir würden uns freuen, diese Liste mit eurer Hilfe zu erweitern.

Dangers of Fracking

Wie clever Parallax Scrolling eingesetzt werden kann, um Zusammenhänge darzustellen, zeigt die Website Dangers of Fracking. (Screenshot: t3n)

ala

Die Website des Schweizer Design-Studios ala nutzt Parallax Scrolling um eigene Projekte vorzustellen. (Screenshot: t3n)

Ben the Bodyguard

Die Website der iOS-App erzählt die Geschichte des Bodyguards Ben – mithilfe von Parallax Scrolling. (Screenshot: t3n)

Spotify

Auch Spotify geizt nicht mit „parallaxen“ Effekten.
Auch Spotify geizt nicht mit „parallaxen“ Effekten. (Screenshot: t3n)

Billy's Diner

Billy's Diner: Ein kleines Unternehmen mit großartiger Website setzt auf Parallax Scrolling. (Screenshot: t3n)

Cantilever Fish & Chips

„Traditionelle Fish and Chips der besten Qualität“, verspricht Cantilever. Qualitativ hochwertig ist auch deren Website. (Screenshot: t3n)

Appmiral

Die Geschichte der App Appmiral erzählt einer kleiner Krebs, der den Besucher auf der Website begleitet. (Screenshot: t3n)

Aktion Mensch

Aktion Mensch erklärt auf dieser Website das Prinzip einer UN-Konvention und setzt dabei auf Parallax Scrolling.
Aktion Mensch erklärt auf dieser Website das Prinzip einer UN-Konvention und setzt dabei auf Parallax Scrolling. (Screenshot: t3n)

One57

Ein Skyscraper im digitalen Portrait: One57.
Ein Skyscraper im digitalen Portrait: One57. (Screenshot: t3n)

La Moulade

Eine weitere Agenturseite, die mit aufwändigen Effekten die Aufmerksamkeit der Besucher zu halten versucht.
Eine weitere Agenturseite, die mit aufwändigen Effekten die Aufmerksamkeit der Besucher zu halten versucht. (Screenshot: t3n)

Interaktive Infografik von expresssolicitors.com

Eine interaktive Infografik der besonderen Art.
Eine interaktive Infografik der besonderen Art. (Screenshot: t3n)

Unfold

Die norwegische Agentur Unfold präsentiert sich der Außenwelt mit dieser modern gestalteten Website.
Die norwegische Agentur Unfold präsentiert sich der Außenwelt mit dieser modern gestalteten Website. (Screenshot: t3n)

Savings Challenge

„Savings Challenge“: Ein großartiges Beispiel für den Einsatz von Parallax Scrolling.
„Savings Challenge“: Ein großartiges Beispiel für den Einsatz von Parallax Scrolling. (Screenshot: t3n)

Cyclemon

Was Fahrräder über ihre Fahrer aussagen, erklärt Cyclemon auf dieser Website.
Was Fahrräder über ihre Fahrer aussagen, erklärt Cyclemon auf dieser Website. (Screenshot: t3n)

5emegauche

Eine weitere Agentur-Website dieser Sammlung.
Eine weitere Agentur-Website dieser Sammlung. (Screenshot: t3n)

Broken Twill

Das Berliner Designstudio „Broken Twill“ setzt ebenfalls auf Parallax Scrolling.
Das Berliner Designstudio „Broken Twill“ setzt ebenfalls auf Parallax Scrolling. (Screenshot: t3n)

Scytale

Die portugiesische Digitalagentur Scytale verwendet online Parallax Scrolling.
Die portugiesische Digitalagentur Scytale verwendet online Parallax Scrolling. (Screenshot: t3n)

Srgint

Parallax Scrolling: Srgint präsentiert auf dieser Website die eigenen Produkte und Visionen.
Parallax Scrolling: Srgint präsentiert auf dieser Website die eigenen Produkte und Visionen. (Screenshot: t3n)

l’unita

Das italienische Restaurant aus Toronto präsentiert sich mittels Parallax Scrolling.
Das italienische Restaurant aus Toronto präsentiert sich mittels Parallax Scrolling. (Screenshot: t3n)

Serve Seattle

Parallax Scrolling eignet sich zum Geschichten erzählen.
Parallax Scrolling eignet sich zum Geschichten erzählen. (Screenshot: t3n)

Royal British Legion

Royal British Legion
Die Royal British Legion demonstriert mit einer Parallax-Scrolling Webseite, wie und wofür die Spendengelder für die RBL verwendet werden. (Screenshot: t3n)

25. Jubiläum des Gameboy

Parallax Gameboy
Eine kleine Kampagne von Ihatetomatoes.com nutzte das fünfundzwanzigste Jubiläum des Gameboys, um eine Parallax-Scrolling-Seite im Zusammenhang mit einem zum selben Thema angebotenen Kurs in Verbindung zu bringen. (Screenshot: t3n)

Sony - Be Moved

Sony – Be Moved
Für Sonys „Be Moved“-Kampagne in den USA wurde diese beeindruckende Parallax-Scrolling-Webseite geschaffen. (Screenshot: t3n)

Jacksonville Downtown Art Walk

Jacksonville Art Walk
Das Jacksonville Downtown Art Walk Festival präsentiert sich mit einer Parallax-Scrolling-Webseite. (Screenshot: t3n)

Make Your Money Matter

Make Your Money Matter
Finanzielle Themen können ganz schön langweilig sein. Make Your Money Matter erzählt mit Parallax Scrolling aber dennoch eine spannende Geschichte. (Screenshot: t3n)

Flat Design vs. Realism

Flat vs. Realism
Die interaktive Webseite Flat Design vs. Realism erklärt uns den Unterschied zwischen flat und skeumorphistisch – mit Parallax Scrolling. (Screenshot: t3n)

The Walking Dead Zombified

Walking Dead - Zombified
Alle, die schon immer mal wissen wollten, was es bedeutet ein Zombie bei Walking Dead zu sein, erfahren dies auf dieser Parallax-Scrolling-Webseite. (Screenshot: t3n)

Madwell

Madwell
Madwell ist eine New Yorker Agentur, die ihre Dienstleistungen mit schicken Parallax-Scrolling-Animationen präsentiert. (Screenshot: t3n)

Oakley

Oakley Airbreak
Oakley präsentiert die Airbrake-MX-Brille auf einer Parallax-Scrolling-Kampagnenseite. (Screenshot: t3n)

 Dieser Artikel ist eine Überarbeitung eines Artikels aus dem Jahr 2013. Autor des Originalartikels ist Lars Budde.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Ilja Zaglov