Webdesign | t3n News News, Infos, Tipps und aktuelle Artikel zu Webdesign 2014-12-08T13:30:14Z t3n Redaktion http://t3n.de/tag/webdesign 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
Entwickler, Webdesigner, Marketeer: Über 340 Angebote auf t3n JOBS http://t3n.de/news/entwickler-webdesigner-582821/ 2014-12-04T13:41:02Z
Einmal pro Woche verweisen wir hier auf aktuelle und interessante Jobangebote aus unserer Stellenbörse „t3n JOBS“. Diesmal können wir euch 21 Angebote aus verschiedenen Bereichen vorstellen – …

Einmal pro Woche verweisen wir hier auf aktuelle und interessante Jobangebote aus unserer Stellenbörse „t3n JOBS“. Diesmal können wir euch 21 Angebote aus verschiedenen Bereichen vorstellen – allen voran Entwicklung, Webdesign und Marketing.

Mitarbeiter Social Media (m/w)Roller

  • Roller
  • 45891 Gelsenkirchen

Zur Stellenanzeige...

Media Designer Digital & Print (m/w)solcom 200 x 200

  • SOLCOM Unternehmensberatung GmbH
  • 72766 Reutlingen bei Stuttgart

Zur Stellenanzeige...

SENIOR SOFTWAREENTWICKLER (m/w) / HP SERVICE MANAGER (HPSM)operational services

  • operational services GmbH & Co. KG
  • 38122 Braunschweig oder Wolfsburg

Zur Stellenanzeige...

JAVA Frontend Entwickler (m/w)datagroup

  • DATAGROUP Inshore Services GmbH
  • 18055 Rostock, Berlin, Leipzig

Zur Stellenanzeige...

System- und Netzwerkadministrator (m/w)hte 200 x 200

  • hte - the high troughput experimentation company
  • 69123 Heidelberg

Zur Stellenanzeige...

Head of Software Development - Client (m/w)goodgamestudios

  • Goodgame Studios
  • 22761Hambu Hamburg

Zur Stellenanzeige...

Java-Entwickler / Softwareentwickler (m/w)24technology

  • 24technology GmbH
  • 20251 Hamburg oder Berlin

Zur Stellenanzeige...

Backend Entwickler (m/w)seekda

  • seekda GmbH
  • 1070 Wien, Österreich

Zur Stellenanzeige...

Senior Consultant (m/w) User Experiencemetafinanz

  • metafinanz Informationssysteme GmbH
  • 80804 München

Zur Stellenanzeige...

Web Engineer (m/w) mit Schwerpunkt HTML Entwicklung und Designadesso

  • adesso AG
  • 44269 Dortmund und Köln

Zur Stellenanzeige...

(Senior) Web Engineer (m/w) mit dem Schwerpunkt CMS-Entwicklungadesso AG

  • adesso AG
  • 44269 Dortmund und Köln

Zur Stellenanzeige...

Java-Entwickler m:w bei FLYERALARMflyeralarm 550 x 550

  • flyeralarm GmbH
  • 97080 Würzburg

Zur Stellenanzeige...

Web- und Applicationserver Administrator (m/w)svc 200 x 200

  • SV Chipkarten Betriebs- und Errichtungsges.m.b.H.
  • 1010 Wien, Österreich

Zur Stellenanzeige...

Lead Global Web Performance (m/w)logo_goodgamestudios

  • Goodgame Studios
  • 22761 Hamburg

Zur Stellenanzeige...

System-Administrator/insowhat

  • SOWHAT!
  • 10117 Berlin

Zur Stellenanzeige...

Projektmanager/in eCommercesowhat

  • SOWHAT!
  • 10117 Berlin

Zur Stellenanzeige...

Teamleiter Mobile Development Android (m/w) - Cloud-, Mail- und Messaging Appslogo_1und1

  • 1&1
  • 81369 München

Zur Stellenanzeige...

Mobile Backend Developer (f/m)insparx

  • Insparx GmbH
  • 80636 München

Zur Stellenanzeige...

Front-End Developer (m/f) at ECONAECONA

  • ECONA AG
  • 10115 Berlin

Zur Stellenanzeige...

(Senior) Web-Developer (m/w) - xplosion interactive GmbHDeutsche Telekom

  • Deutsche Telekom AG
  • 20251 Hamburg

Zur Stellenanzeige...

IT Developer Java / Spring / E-Commerce (m/w)pixelpark agentur

  • Pixelpark Agentur
  • 50676 Köln

Zur Stellenanzeige...

Noch mehr Stellenanzeigen gibt es in der Stellenbörse t3n Jobs. Wer selbst gerne ein Jobangebot aufgeben möchte, findet unter „Stellenanzeige schalten“ alle notwendigen Informationen.

Stellenanzeige auf t3n Jobs schalten

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Sarah Weber
Umfangreiches Webdesign-Tool statt einfacher Baukasten: Mit rukzuk baust du Responsive-Websites ohne Coding [Sponsored Post] http://t3n.de/news/responsive-webdesign-rukzuk-582303/ 2014-12-04T09:30:25Z
Das Responsive-Webdesign-Tool rukzuk richtet sich gezielt an professionelle Anwender wie Webdesigner, Freelancer, Agenturen und Unternehmen. Durch ein eigenes CMS und eine große Bandbreite an …

Das Responsive-Webdesign-Tool rukzuk richtet sich gezielt an professionelle Anwender wie , Freelancer, Agenturen und Unternehmen. Durch ein eigenes und eine große Bandbreite an Features kann man mit rukzuk ganz und gar codeless auch professionelle Webseiten gestalten.

Während die meisten Homepage-Baukästen vor allem auf simple Bedienbarkeit und überschaubare Funktionen setzen – zum Beispiel für Blogger – braucht es im professionellen Bereich schon ein sehr viel umfangreicheres Repertoire an Möglichkeiten. Für diese Zwecke hat ein junges Entwickler-Team aus Konstanz ein Webdesign-Tool auf den Markt gebracht, das in Umfang, Funktionalität, Flexibilität, Individualität und Erweiterbarkeit genau für diesen Zweck konzipiert ist. Mit rukzuk lässt sich so auch eine aufwendige Unternehmensseite ohne Code-Kenntnisse gestalten, verwalten und publizieren.

responsive webdesign 1

Maßgeschneidert und individuell

Das Besondere an der neuen Lösung ist die Kombination aus innovativem Design-Editor und einem neu entwickelten CMS. Der Design-Editor ist dabei das Herzstück: Ähnlich zu Photoshop gibt es hier viele Werkzeuge und Einstellungsmöglichkeiten. Ist man mit der Bedienung von rukzuk vertraut, kann man Websites sehr schnell und ohne Programmierkenntnisse entwickeln. Websites werden visuell im Browser gestaltet, Schriftrendering, Abstände und Funktionen wie Slider oder Animationen können dabei direkt im Editor getestet werden.

Der klassische Transformationsschritt von einer PSD-Datei in HTML/CSS/JS entfällt ganz – das spart Zeit und Geld.

Visual Responsive-Webdesign

Mit rukzuk werden zudem „echte“ Responsive-Websites erstellt. Die Website wird nicht nur, wie bei vielen klassischen Homepage-Baukästen, automatisch in eine mobile Version übersetzt. Mittels definierbarer Breakpoints wird das Verhalten der Website für jede beliebige Auflösung individuell angepasst.

resposive webdesign 2

Mit sogenannten Modulen wird per Drag & Drop ein Layout angelegt, das die Grundlage für die Seiten einer Website bildet. Derzeit stehen über 50 Module und Styles zu Verfügung. Vom Grid, das meistens als Grundlage eines Layouts dient, bis hin zur dynamischen Navigation, Slider, Lightbox, iFrame, dynamische Listen, SVG-Grafiken und vielen weiteren. Jedes Modul kann wiederum mit Styles pixelgenau gestaltet werden, hier stehen zum Beispiel Rahmen, Schatten, Animationen, Hintergründe, Google Fonts zur Verfügung. Es gibt Module für jeden erdenklichen Designwunsch und es kommen stetig neue hinzu. Derzeit arbeitet das Team unter anderem an einem Shop-Modul und einem Parallax-Modul.

Auch selbst entwickelte Module und Styles lassen sich in rukzuk integrieren. Die API-Dokumentation und Beispielmodule hat das Team auf developers.rukzuk.com und GitHub veröffentlicht.

Integriertes Content Management & Webhosting

Neben dem Design-Editor ist das selbst entwickelte CMS ein Kernbestandteil des Tools. Hier geht es vor allem darum, Websites effizient zu entwickeln und zu verwalten und dem Kunden eine einfache Pflege der Seiteninhalte zu ermöglichen. Dafür können vom Designer Bearbeitungsrechte für jedes einzelne Element einer Seite vergeben werden.

Der Vorteil für den Kunden: der Webdesigner gestaltet mit Modulen und Styles individuelle „Page Blocks“, welche CMS-Bausteine darstellen, die der Kunde auf seinen Seiten einfügen und bearbeiten kann. So wird sichergestellt, dass die Inhaltsseiten immer gestaltungskonform bleiben.

resposive webdesign 3

Mit wenigen Klicks kann die Website auf den rukzuk-Servern kostenlos veröffentlicht werden. Wer möchte, kann seine komplette Website aber auch herunterladen oder per FTP/SFTP-Upload auf externen Servern hosten. Diesen Service findet man in der Form bei keinem anderen Anbieter. Auch die Verbindung zur eignen Domain ist kein Problem.

SaaS Lösung mit individuellen Paketen

Rukzuk ist eine SaaS Lösung und wird im Abo-Modell angeboten. Zur Auswahl stehen verschiedene Pakete, vom Einzelpaket bis zur Agenturlösung mit 50 und mehr Websites. Man kann rukzuk völlig kostenlos testen. Erst wenn man Websites veröffentlichen möchte, muss man sich für ein kostenpflichtiges Paket entscheiden.

Ab dem Freelancer-Paket ist auch ein Transfer der Website direkt zum Kunden und auf dessen Rechnung möglich.

Das Tool kann kostenlos ohne zeitliche Beschränkung getestet werden.

Jetzt kostenlos testen

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
t3n Redaktion
WieWoWas? t3n-Leser fragten nach: Cross-Browser-Tests, Mobile-Resposive-Webdesign, Ad-Management-Tools http://t3n.de/news/wiewowas-t3n-leser-fragten-nach-6-582617/ 2014-12-02T15:29:34Z
Für alle Fragen rund um die digitale Welt findet ihr auf t3n.de den Fragen-Bereich. Dort könnt ihr nach Lust und Laune alles aufs Tapet bringen, was euch ein Rätsel ist. Jeden Dienstag erscheinen …

Für alle Fragen rund um die digitale Welt findet ihr auf t3n.de den Fragen-Bereich. Dort könnt ihr nach Lust und Laune alles aufs Tapet bringen, was euch ein Rätsel ist. Jeden Dienstag erscheinen dann die Fragen der vergangenen Woche zusammengefasst in einem Artikel.

Unter t3n.de/fragen können unsere Community-Mitglieder anderen Mitgliedern und den t3n-Redakteuren Fragen stellen, die in die Themenbereiche unserer Ressorts fallen. Das sind die Fragen der letzten Woche:

1. Cross-Browser-Test

Ich bin auf der Suche nach einem brauchbaren Cross-Browser-Testtool. Bisher habe ich gute Erfahrungen mit Browser Stack gemacht. Allerdings sind die Ergebnisse teilweise anders als in der Virtual-Machine. Ich frage mich, ob die Tools wie Browser Stack wirklich etwas taugen und ob man dafür Geld ausgeben sollte.

Zur Frage

2. Container zentrieren

Wie kann ich, wenn ich mit CSS einen Container mit variabler Höhe und Breite haben, einen anderen Container (ebenfalls flexible Maße) in diesem horizontal und vertikal zentrieren?

Zur Frage

3. Mobile Resposive Webdesign

Häufig stehe ich vor dem Problem bei Gestaltung und Programmierung der Höhe des Header-Bereiches im mobilen Internet. Ist der Header bei Aufruf der Seite hoch, so ist der sichtbare Bereich auf dem iPhone 4 stark reduziert. Ist es eigentlich noch Stand der Dinge für das iPhone 4 oder kleiner zu optimieren, oder kann man bereits das iPhone 5 als Standard definieren? Wie verhält es sich mit den Android-Geräten?

Zur Frage

4. WordPressplugin für Ticketverkauf

Ich möchte auf meiner WordPress-Seite Events verkaufen, es gibt unterschiedliche Alterskategorien, unterschiedliche Events zu unterschiedlichen Zeiten – ich denke mir am ehesten kann man sowas mit einem Event-Ticket-Plugin umsetzen. Da es um vertrauensvolle Informationen bezüglich des Online-Payments geht, würde ich gerne wissen, welchem Plugin man denn hier vertrauen kann?

Zur Frage

5. Ad Management Tool

Habt ihr eine Empfehlung für ein Ad-Managment-Tool in dem man in einem übergreifenden Dashboard GDN, YouTube, Facebook und Twitter Ads managen kann?

Zur Frage

Tausch dich mit der Community aus: Stell deine Frage, oder lass die Anderen von deinem Wissen profitieren – auf t3n.de/fragen

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Melanie Petersen
Scrollytelling in WordPress: Das kann die Aesop-Story-Engine 1.3 http://t3n.de/news/scrollytelling-wordpress-581501/ 2014-11-27T14:16:52Z
Die Aesop-Story-Engine ist ein erweiterbares WordPress-Plugin, mit dem ihr auf einfache Art und Weise multimediale Scrollytelling-Artikel erstellen könnt. Wir verraten euch, was die Software kann, …

Die Aesop-Story-Engine ist ein erweiterbares WordPress-Plugin, mit dem ihr auf einfache Art und Weise multimediale Scrollytelling-Artikel erstellen könnt. Wir verraten euch, was die Software kann, und welche neuen Features in Version 1.3 stecken.

Aesop-Story-Engine: Die WordPress-Erweiterung erlaubt die Erstellung von multimedialen Scrollytelling-Artikeln. (Screenshot: Aesop-Story-Engine)
Aesop-Story-Engine: Die WordPress-Erweiterung erlaubt die Erstellung von multimedialen Scrollytelling-Artikeln. (Screenshot: Aesop-Story-Engine)

Von der New York Times bis WordPress: Der lange Weg des Scrollytellings

Der Begriff Scrollytelling, oder auch Multimedia-Storytelling, bezeichnet Online-Artikel, deren Layout individuell an den Inhalt angepasst wurde. Ebenfalls bezeichnend für diese Art der Textgestaltung ist der Einsatz einer bereiten Palette an unterstützenden Medieninhalten. Das können je nach Text kurze Video-Clips, Tonaufnahmen, Animationen, Bilder oder interaktive Karten sein. Im Grunde geht es darum, die Möglichkeiten des modernen Webdesigns in den Dienst der zu erzählenden Geschichte zu stellen. Wir hatten uns diesem Thema schon in unserem Artikel „Scrollytelling: Die Königsdisziplin des Multimedia-Journalismus“ gewidmet.

Eine große Inspiration für diese Entwicklung war der Snow-Fall-Artikel der New York Times, dessen Autor dafür mit dem renommierten Pulitzer-Preis ausgezeichnet wurde. Auch wenn seitdem einige sehr schicke Scrollytelling-Artikel veröffentlicht wurden, blieb diese multimediale Erzählform vielen Bloggern, Journalisten und anderen Autoren bislang verschlossen, weil selbst mit Tools wie Pageflow vom WDR ein nicht unerheblicher Aufwand dafür betrieben werden muss. Die Aesop-Story-Engine versucht, genau dieses Problem zu lösen. Das WordPress-Plugin erlaubt es Autoren, direkt im Backend verschiedene Multimedia-Elemente zu einer Story zu verweben.

Scrollytelling: Die multimedialen Elemente werden bequem im WordPress-Backend angelegt und bearbeitet. (Screenshot: Aesop-Story-Engine)
Scrollytelling: Die multimedialen Elemente werden bequem im WordPress-Backend angelegt und bearbeitet. (Screenshot: Aesop-Story-Engine)

Aesop-Story-Engine: Scrollytelling-Artikel direkt in WordPress erstellen

Die Aesop-Story-Engine macht es Autoren einfach, verschiedene Elemente für die eigene Geschichte zu nutzen. Dazu werden vorgefertigte Blöcke, die „Story-Components“ genannt werden, ausgewählt, angepasst und an der richtigen Stelle eingesetzt. Die Story-Components können unterschiedliche Textarten, Bilder, Videos oder andere Multimedia-Objekte sein. Neu in der jetzt veröffentlichten Version 1.3 ist beispielsweise die Möglichkeit, eine Karte am Rand eines Artikels festzuhalten. Scrollt ein Besucher durch den Text, verschiebt sich die Markierung auf der Karte. So kann beispielsweise bei einem Reisebericht immer gezeigt werden, von welchem Ort der Autor gerade erzählt.

Weitere Story-Components lassen sich, genau wie speziell angepasste Themes, über die Website der Aesop-Story-Engine dazukaufen. Der zugrundeliegende Quellcode des eigentlichen Plugins liegt aber unter der freien GNU-Lizenz auf GitHub. Wer eigene Story-Components entwickeln will, kann sich dazu im Entwicklerbereich der Aesop-Website informieren. Außerdem finden sich auf der Website auch Beispiele für den Einsatz der Engine. Natürlich wird das Ergebnis kaum die Qualität des eingangs erwähnten New-York-Times-Artikels erreichen. Aber die Aesop-Story-Engine bietet Firmen und Einzelpersonen dennoch eine interessante Möglichkeit, auch ohne großes Entwicklerteam ansprechende Scrollytelling-Artikel zu verfassen.

via www.producthunt.com

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Kim Rixecker
Flickr-Gemeinschaft im Zwiespalt: Yahoo verkauft Bilder mit Creative-Commons-Lizenz http://t3n.de/news/flickr-yahoo-creativ-commons-lizens-581137/ 2014-11-26T09:36:09Z
Yahoo verkauft neuerdings große Leinwände mit Fotos von Flickr-Nutzern, die unter einer Creative-Commons-Lizens laufen. Creative-Commons bestätigt, dass Yahoo sich im gesetzlichen Rahmen bewegt.

Yahoo verkauft neuerdings große Leinwände mit Fotos von Flickr-Nutzern, die unter einer Creative-Commons-Lizens laufen. Creative-Commons bestätigt, dass Yahoo sich im gesetzlichen Rahmen bewegt. Viele Flickr-Nutzer verurteilen das Vorgehen jedoch.

Etwa zweimal die Woche fragt jemand Liz West, ob er eines der fast 12.000 Fotos verwenden darf, die sie in den vergangenen zehn Jahren auf der Bilderplattform Flickr veröffentlicht hat. Normalerweise hat die Amateurfotografin nichts dagegen. Eine Frau aus England machte aus ihren Blumenbildern Grußkarten und schickte ihr 100 Stück als Dank. Der Ofen- und Kaminhersteller Vermont Castings baute eines ihrer Fotos auf der eigenen Webseite ein und schickte ihr einen kleinen Ofen als Geschenk.

„Jemand anderes verkauft meine Bilder, die ich kostenlos weggebe“

Über eine Sache ist West jedoch gar nicht glücklich. Und das ist, was Yahoo neuerdings macht, der Eigentümer von Flickr. Das Unternehmen produziert jetzt große Leinwände mit Fotos von West und anderen Fotografen, die ihre Werke auf Flickr veröffentlicht haben, und verkauft sie für 49 US-Dollar das Stück, umgerechnet knapp 40 Euro. Den Gewinn behält der Konzern komplett für sich. „Es hat mich schon sehr geärgert, dass jemand anderes meine Bilder verkauft, die ich kostenlos weggebe“, sagt West, eine pensionierte Autorin aus Boxborough, Massachusetts, die auf Flickr unter dem Namen „Muffet“ unterwegs ist.

flickr-yahoo-2
Von Liz West hochgeladene Fotos auf Flickr. Die pensionierte Autorin ist eine der Künstlerinnen, deren Bilder Yahoo verkaufen will. (Foto: Liz West/Flickr)

West gehört zu den Millionen von Menschen, die unter den „Creative Commons“ Bilder einstellen. Dahinter verbirgt sich eine Online-Vorratskammer von Bildern und Texten, die mit Erlaubnis der Urheber geteilt und weiterverwendet werden dürfen. Kostenlos – unter ein paar Voraussetzungen. So können die Künstler zum Beispiel angeben, ob ihre Werke für kommerzielle Zwecke verwendet werden dürfen oder nicht. Und sie können angeben, dass sie in angemessener Weise genannt werden, wenn ein Text oder ein Foto von ihnen anderweitig zum Einsatz kommt.

Mehr als 300 Millionen öffentlich geteilte Flickr-Bilder setzen auf Creative-Commons-Lizenzen. Damit ist die Plattform der größte Inhalte-Partner. Vergangene Woche kündigte Yahoo nun an, Abdrucke von 50 Millionen Bildern verkaufen zu wollen, die auf diese Art und Weise lizenziert sind. Darüber hinaus soll eine ungenannte Nummer von handverlesenen Flickr-Bildern in die Auswahl einfließen. Von diesen Fotos will das Unternehmen 51 Prozent der Erlöse an die Urheber weitergeben. Bei den Creative-Commons-Bildern bleiben jedoch alle Erträge bei Yahoo.

„Es sieht nicht so aus als würde Yahoo etwas falsch machen“

Der Internet-Konzern hat mitgeteilt, dass er sich an die Creative Commons hält und nur Fotos verkauft, bei denen einer kommerziellen Nutzung zugestimmt wurde. Diese Lizenzen „wurden genau für diesen Anwendungsfall entwickelt“, schreibt Bernardo Hernandez, Vice President von Flickr, in einer E-Mail. Mit jedem Leinwanddruck wird auch ein kleiner Aufkleber verschickt, auf dem der Name des Künstlers steht.

Ein Sprecher von Creative Commons, einer nichtkommerziellen Gruppe, die 2001 gegründet wurde, bestätigte, dass Yahoo nicht gegen die Lizenzen verstößt. Rechtlich „sieht es nicht so aus, als würde Flickr etwas falsch machen“, sagt Corynne McSherry, bei der Electronic Frontier Foundation für geistiges Eigentum verantwortlich. Einige Fotografen, die ihre Bilder auf Flickr zur Verfügung gestellt haben, sind trotzdem enttäuscht. Neben West haben auch andere Künstler ihren Unmut über den jüngsten Schritt geäußert, mit dem Yahoo erneut versucht, Geld mit Flickr-Werken auf Kosten der Fotografen-Gemeinschaft zu verdienen.

Yahoos Plan, die Bilder zu verkaufen, ist „ein wenig kurzsichtig“, sagt Flickr-Mitgründer Stewart Butterfield, der das Unternehmen 2008 verlassen hat. „Es ist nur schwer vorstellbar, dass die Erlöse aus dem Verkauf den Vertrauensverlust aufwiegen, der dadurch entsteht.“

Beim Vorgehen von Yahoo scheiden sich die Geister

Das Wall Street Journal hat 14 Fotografen angeschrieben, die Bilder unter der Creative-Commons-Lizenz auf Flickr anbieten. Acht von ihnen haben gesagt, dass sie nichts gegen den Schritt von Yahoo haben und glücklich darüber seien, dass ihre Arbeit noch auf andere Art und Weise gewürdigt wird. „Jeder Amateurfotograf würde sich darüber freuen, wenn seine Werke an Wänden überall auf der Welt hängen“, schrieb Andreas Overland, ein Flickr-Nutzer aus Oslo in einer E-Mail. Sechs Personen sprachen sich gegen die Verkaufspläne aus.

„Als ich die Creative Commons akzeptiert habe, bin ich davon ausgegangen, dass meine Bilder in Artikeln und anders verwendet werden können, um sie der Öffentlichkeit zu zeigen“, schrieb Nelson Lourenço, ein Fotograf aus Lissabon, in einer E-Mail. Dass Yahoo „meine Arbeit verkauft und alles Geld behält, war eine Überraschung“, erklärte er.

„Yahoos Entscheidung, die Bilder zu verkaufen, ist aus unserer Sicht moralisch verwerflich"

500px ist ein Flickr-Wettbewerber. Die Plattform hilft Fotografen dabei, digitale Kopien ihrer Werke zu verkaufen und bis zu 70 Prozent der Erlöse zu behalten. Lediglich etwa 100.000 der rund 50 Millionen Bilder auf der Seite laufen unter Creative-Commons-Lizenz. Diese werden von 500px nicht verkauft. Jewgeni Tschebotarew, ein Mitgründer der Seite, erklärte, dass Yahoos Entscheidung, die Bilder zu verkaufen, die Interessen der Nutzer verletze. Auch wenn es rechtlich in Ordnung sei, „ist es aus unserer Sicht moralisch verwerflich“, sagte Tschebotarew.

Auf Deviant Art gibt es mehr als 50 Millionen Bilder unter Creative-Commons-Lizenz. Die Künstler bekommen einen Teil der Erlöse durch den Verkauf von Postern ab. Firmenchef Angelo Sotira sagte, dass Yahoos Schritt „einen Mangel an Respekt“ zeige und der Idee einer öffentlichen Verbreitung im Internet einen Bärendienst erweise.

Der Großteil der Bilder auf Facebook und Instagram fällt nicht unter die Creative Commons. Instagram-Eigentümer Facebook hat bislang auch keine Bemühungen unternommen, die Bilder auf der weltweit größten Foto-Sharing-Plattform zu verkaufen.

Fotografin Liz West (Foto: Liz West)
Fotografin Liz West (Foto: Liz West)

Als Antwort auf die Entscheidung von Yahoo, einige der Bilder zu verkaufen, haben West und zwei andere Flickr-Fotografen ihre Creative-Commons-Lizenzen von einigen oder allen ihren Online-Bildern entfernt, damit das Unternehmen sie nicht verkaufen kann. Eine andere Lösung gibt es nicht, erklärte eine Yahoo-Sprecherin.

Yahoo hatte Flickr 2004 für fast 25 Millionen Dollar übernommen. Seit damals gab es immer wieder große Veränderungen an der Plattform, die von den Nutzern zum Teil lautstark kritisiert wurden. Fünf Yahoo-Chefs kamen und gingen in sieben Jahren. Als Marissa Mayer 2012 das Ruder übernahm, stellte ein anonymer Nutzer eine Webseite mit der URL dearmarissamayer.com online und forderte von ihr „Flickr wieder großartig zu machen“.

Die Versuche von Mayer, Flickr wiederzubeleben, haben jedoch einige langjährige Mitglieder verärgert. Als sie 2013 allen Nutzern ein Terabyte an freiem Datenspeicher anbot, wurde der Flickr-Pro-Account für 25 Dollar im Jahr für unbegrenzten Speicherplatz abgeschafft. Dieser erfreute sich jedoch unter eingefleischten Mitgliedern großer Beliebtheit.

„Ich habe so viel in Flickr investiert, ich kann nicht einfach woanders hingehen“

In diesem Jahr begann das Unternehmen dann, Werbung in Fotogalerien anzuzeigen – zumindest bei Besuchern, die nicht eingeloggt waren. Devon Adams, ein Hochschullehrer für Fotografie aus Gilbert, Arizona, nannte die Anzeigen einen „misstönenden“ Eingriff in die Seite. Adams ist einer der Nutzer, die sauer auf Yahoo sind, weil es ihre unter Creative Commons lizenzierten Bilder verkaufen will.

Allerdings hat Adams bereits 58.000 Fotos auf Flickr hochgeladen. Darum ist er gewissermaßen gefangen. „Ich habe so viel in Flickr investiert, ich kann nicht einfach woanders hingehen“, sagt er.

Von Douglas MacMillan

Ursprünglich publiziert bei wsj.de.

Mehr Technologie-News auf wsj.de

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
WSJ Redaktion
Die 10 beliebtesten Artikel der Woche: Visitenkarten-Vorlagen, PayPal deaktiviert SSL 3.0 und Basics des Responsive Webdesign http://t3n.de/news/10-beliebtesten-artikel-woche-54-580448/ 2014-11-22T09:00:19Z
In unserem wöchentlichem Best-of der t3n-Artikel präsentieren wir euch einen bunten Mix aus häufig geklickten und nutzwertigen Beiträgen.

In unserem wöchentlichem Best-of der t3n-Artikel präsentieren wir euch einen bunten Mix aus häufig geklickten und nutzwertigen Beiträgen.

1. Die Basics des Responsive Webdesign in 9 schicken GIFs

Wir zeigen euch die wichtigsten Prinzipien des Responsive Webdesign – in neun schicken GIFs aus der Feder des Designers Sandijs Ruluks von Froont.

Unser Artikel: Die Basics des Responsive Webdesign in 9 schicken GIFs

2. 20 wunderschöne Visitenkarten-Vorlagen für Photoshop

Visitenkarten haben auch und vielleicht gerade im Zeitalter der Sozialen Netzwerke noch ihren Platz. Ganz besonders, wenn es sich um solche Kunstwerke handelt, wie die PSD-Templates, die wir euch in diesem Artikel vorstellen.

Unser Artikel: 20 wunderschöne Visitenkarten-Vorlagen für Photoshop

3. Digitaler Fußabdruck: 6 Links, die zeigen wie Google dich sieht

Nicht nur Google-Nutzer hinterlassen einige Daten im Netz – um die soll es hier aber gehen: Wir kuratieren sechs Links, die euren digitalen Fußabdruck aufzeigen.

Unser Artikel: Digitaler Fußabdruck: 6 Links, die zeigen wie Google dich sieht

4. Smarte Kladde für Designer: Moleskine macht aus Papierskizzen fertige Vektorgrafiken

Mit einer Kladde, die aus analogen Papierskizzen digitale Vektorgrafiken macht, will der italienische Notizbuchanbieter Moleskine die Designer-Herzen höher schlagen lassen. Was sie kann, was sie kostet und ob's sie noch rechtzeitig vor Weihnachten gibt, erfahrt im Artikel.

Unser Artikel: Smarte Kladde für Designer: Moleskine macht aus Papierskizzen fertige Vektorgrafiken

5. PayPal deaktiviert SSL 3.0: Diese Shopsysteme müssen jetzt aktualisiert werden [Update]

PayPal im Einsatz? Dann sind vielleicht Updates nötig, um den Dienst auch nach dem 3. Dezember anbieten zu können. Definitiv betroffen sind Oxid, xt:Commerce und Prestashop. Alle Information und die notwendigen Maßnahmen in der Übersicht.

Unser Artikel: PayPal deaktiviert SSL 3.0: Diese Shopsysteme müssen jetzt aktualisiert werden [Update]

6. Startup Edition: Gesammeltes Wissen von Gründern, Hackern und Designern in einem kostenlosen E-Book

Die Macher von Startup Edition – einem wöchentlichen Newsletter mit hilfreichen Artikeln für Gründer – haben ein kostenloses E-Book veröffentlicht. Mit dem Buch wollen sie eine umfangreiche Wissenssammlung für die Startup-Szene abliefern.

Unser Artikel: Startup Edition: Gesammeltes Wissen von Gründern, Hackern und Designern in einem kostenlosen E-Book

7. Goodbye Google: Firefox integriert Yahoo als neue Standard-Suchmaschine

Trennung nach zehn Jahren: Anstatt die Partnerschaft mit dem Suchmaschinenriesen zu verlängern, schließt der Browser-Anbieter in den USA einen Fünf-Jahresvertrag mit Yahoo ab. In anderen Ländern bleibt Google noch erhalten.

Unser Artikel: Goodbye Google: Firefox integriert Yahoo als neue Standard-Suchmaschine

8. Google-Suche zeigt ab sofort an, ob eine Seite für Mobile optimiert ist

Google zeigt ab sofort in den Suchergebnissen an, ob eine Website für mobile Nutzer optimiert ist. In Zukunft könnte die „Mobile Friendliness“ sogar zum Ranking-Faktor avancieren.

Unser Artikel: Google-Suche zeigt ab sofort an, ob eine Seite für Mobile optimiert ist

9. Comeback mit dem Nokia N1 – Highend-Tablet für 249 Dollar vorgestellt [#slush14]

Was kommt nach dem Smartphone? Diese Frage hat Nokia auf dem Slush-Festival in Helsinki beantwortet und das neueste Produkt des finnischen Konzerns präsentiert.

Unser Artikel: Comeback mit dem Nokia N1 – Highend-Tablet für 249 Dollar vorgestellt [#slush14]

10. Silicon-Valley-Führungsfigur: Elon Musk ist der wahre Nachfolger von Steve Jobs

Seit Steve Jobs verstorben ist, fragen sich viele Menschen, wer aus dem großen Schatten des iBoss heraustritt und zur symbolischen Führungsfigur des Silicon Valleys wird. Unser US-Korrespondent Andreas Weck hat da einen klaren Favoriten: Elon Musk.

Unser Artikel: Silicon-Valley-Führungsfigur: Elon Musk ist der wahre Nachfolger von Steve Jobs

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Andreas Weck
Die Basics des Responsive Webdesign in 9 schicken GIFs http://t3n.de/news/basics-responsive-webdesign-9-578560/ 2014-11-15T07:50:06Z
Wir zeigen euch die wichtigsten Prinzipien des Responsive Webdesign – in neun schicken GIFs aus der Feder des Designers Sandijs Ruluks von Froont.

Wir zeigen euch die wichtigsten Prinzipien des – in neun schicken GIFs aus der Feder des Designers Sandijs Ruluks von Froont.

Responsive Webdesign: Früher war alles leichter

Früher war alles einfacher: Webdesigner konnten sich an festen Größen und Standards orientieren und ihre Projekte entweder auf die Desktop-Ansicht oder das mobile Internet ausrichten. Diese Zeit ist vorbei – wer möchte, dass Nutzer egal an welchem Ort und egal, welches Endgerät sie nutzen, sorgenfrei die eigenen Inhalte konsumieren können, muss sich mit Responsive Webdesign auseinandersetzen. Und das ist manchmal gar nicht so einfach.

Sandijs Ruluks von Froont. (Bild: Twitter)
Sandijs Ruluks von Froont. (Bild: Twitter)

Sandijs Ruluks kennt das: Der Grafikdesigner aus Riga bezeichnet sich selbst als „Designer, der aus der Print-Welt in die Welt des Webs gekommen ist.“ Auch er hat sich die neuen Denk- und Gestaltungsmuster zunächst hart erarbeiten müssen. Zusammen mit Freunden hat er vor Kurzem Froont gegründet, eine Design-Plattform, auf der Webdesigner direkt im Browser arbeiten und mit anderen Designern kollaborieren können. Auf dem Froont-Blog findet sich auch das gemeinsam verfasste „Open Web Design Manifesto“.

Für alle, die ebenfalls manchmal Schwierigkeiten damit haben, das Responsive-Design-Konzept zu verstehen, hat Ruluks neun GIFs erstellt, die die wesentlichen Prinzipien einfach und schnell veranschaulichen. Freundlicherweise hat er sie uns zur Verfügung gestellt.

1. „Responsive Webdesign“ versus „Adaptive Webdesign“

Responsive und Adaptive Design sind ähnlich, aber eben doch nicht gleich. „Die beiden Ansätze ergänzen sich, daher gibt es hier kein ‚richtig oder falsch‘“, schreibt Ruluks. Die Unterschiede verdeutlicht das erste GIF:

 

responsive_webdesign_adaptive_webdesign

2. Der Flow

Je schmaler der Bildschirm des Endgerätes ist, auf dem der Content ausgespielt wird, desto mehr Elemente werden untereinander statt nebeneinander angeordnet. Alle späteren Inhalte rutschen entsprechend noch weiter nach unten. Das nennt man den Flow.

 

04_flow-vs-static-2

 

3. Relative Einheiten

Wenn die Größe des Bildschirms, auf der Inhalte angezeigt werden können, variiert, ist auch die Pixeldichte der angezeigten Fläche nicht mehr in Stein gemeißelt. Für Webdesigner macht es also Sinn, von festen Pixelvorgaben abzurücken und stattdessen relative Größeneinheiten zu definieren – wie etwa „50 Prozent des Screens“ oder „100 Prozent des Screens“. Diese passen sich dann an das jeweils genutzte Ausgabeformat an, wie das nächste GIF zeigt:

 

 

responsive_webdesign_prinzip_relative_einheiten

4. Breakpoints

Breakpoints definieren, an welchen Stellen das Layout einer Seite umbrechen darf. Auf diese Weise können Webdesigner sicherstellen, dass ein Umbruch im Design, etwa wenn sich die Seite verschmälert, nicht zu einem inhaltlichen Bruch führt. „Aber nutzt Breakpoints mit Umsicht“, warnt Ruluks, „wenn es schwierig ist zu verstehen, welche Inhaltselemente voneinander abhängen, können Breakpoints schnell für Chaos sorgen“.

 

03_with-breakpoints-vs-without-breakpoints-1

 

5. Maximal- und Mindestwerte

Dieses Prinzip verhindert, dass Inhalte auf dem Smartphone oder dem Tablet zu klein dargestellt werden – oder auf größeren Bildschirmen zu sehr in die Breite gehen. Einfach einen Pixelwert für die maximale Breite definieren und der Verzerrungs-Effekt bleibt aus.

 

07_max-width-vx-no-max-width-1

 

6. Verschachtelte Objekte

Hier werden mehrere inhaltliche Elemente innerhalb eines Containers gruppiert und können somit gemeinsam bewegt werden. Dies macht die Arbeit für Webdesigner oftmals einfacher, da sie nicht so viele Elemente einzeln bearbeiten müssen. Das folgende GIF veranschaulicht das Container-Prinzip:

 

05_nested-vs-not-nested-1

 

7. „Mobile First“ und „Desktop First“

Diese beiden Leitprinzipien des Responsive Webdesign geben an, welcher Startpunkt für das Design einer Webseite gesetzt wird: Beginne ich auf dem kleinen Screen und passe das Design für größere Auflösungen an – oder starte ich mit der Desktop-Version und arbeite mich zu den kleineren Smartphone-Größen vor? „Technisch gesehen gibt es keine großen Unterschiede. Leg los und schau, welcher Ansatz besser für dich funktioniert“, so Ruluks.

 

08_desktop-first-vs-mobile-first-3

8. Webfonts und Systemschriften

Die Wahl der eingebetteten Schriften kann einen Einfluss auf die Ladezeiten der Webseite haben. Während es Webfonts zwar in viel mehr Varianten gibt und sie eine Seite sehr schön individualisieren können, werden die in den Betriebssystemen der Nutzer vorinstallierten „System Fonts“, so Ruluks, „schnell wie der Blitz“ angezeigt – sofern die gewählte Systemschrift auch im Geräte-Setup des Nutzers angelegt ist.

 

06_system-fonts-vs-webfonts-1

 

9. Bitmaps und Vektoren

Wenn Logos und Grafiken eine kleine Dateigröße haben und dennoch gut skalieren sollen, ist es ratsam, auf Vektoren, zum Beispiel SVG-Dateien oder Icon Fonts, zurückzugreifen. Bilder im JPG-, PNG- oder GIF-Format müssen in der Regel optimiert werden und sind wesentlich größer. Doch können sie Details oder Effekte besser abbilden als Vektoren und nicht alle Browser unterstützen SVG-Formate. „Wählt also mit Bedacht“, so das Resümee von Sandijs Ruluks.

 

09_vectors-vs-images-1

Hier geht's zum Original-Beitrag „Nine Basic Principles of Responsive Webdesign“ von Sandijs Ruluk auf dem Froont-Blog. Hilfreich für euch ist vielleicht auch unsere Artikelreihe zum Einstieg in flexible Projekte mit Responsive Webdesign.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Lea Weitekamp
Firefox Developer Edition: Entwickelt für Entwickler http://t3n.de/news/firefox-developer-edition-577878/ 2014-11-11T09:05:05Z
Mozilla hat eine beachtliche Entwickler-Suite für Webdesigner und Webentwickler zusammen gestellt: Firefox Developer Edition.  Neben neuen Features findet ihr auch altbewährte Tools.

hat eine beachtliche Entwickler-Suite für und Webentwickler zusammen gestellt: Developer Edition.  Neben neuen Features findet ihr auch altbewährte Tools. Wir blicken kurz auf die neue Version.

firefox-developer
Firefox Developer Edition: Mehr Power für Entwickler. (Screenshot: Mozilla)

Die Firefox Developer Edition besteht aus insgesamt neun Komponenten: WebIDE, Responsive Design View, Valence, Web Audio Editor, Page Inspector, Web Console, JavaScript Debugger, Network Monitor und dem Style Editor.

Firefox Developer Edition: Responsive Design View

Hier ist der „Responsive Design View“ wohl das spannendste Feature. Dabei handelt es sich um ein losgelöstes Fenster innerhalb des Browsers, das darüber hinaus auf die Viewport-Größen der wichtigsten Geräte optimiert wurde.

Firefox Developer Edition: WebIDE

Die WebIDE soll euch die App-Entwicklung erleichtern. Dabei könnt ihr die App während der „pausieren“ live darin experimentieren – mit Hilfe des Inspectors – und die Änderungen dann in die App übernehmen.

Firefox Developer Edition: Valence

Mit Valence könnt ihr euch mit anderen Geräten verbinden. Somit wird das Entwickeln über verschiedene Geräte hinweg enorm vereinfacht. Besonders weil die WebIDE dann remote auch beispielsweise am Smartphone ausgeführt wird. Somit könnt ihr Elemente im DOM in der WebIDE am Computer markieren und gleichzeitig seht ihr das entsprechende DOM markiert auf dem Smartphone. Derzeit funktioniert diese Funktion aber nur mit iOS- oder Android-Geräten.

Fazit zu Firefox Developer Edition

Mozilla wirft hier einige sehr spannende Features auf den Markt, die das Entwicklerleben wirklich vereinfachen können. Die „Fixes“ die es vorher gab, wie zum Beispiel Lesezeichen, die Websites in bestimmten Viewportgrößen öffneten, gehören wohl der Vergangenheit an. Wir haben bereits über Firefox Developer Edition berichtet, und sind vom Ergebnis angetan. Ihr könnt euch selbst davon überzeugen, wenn ihr euch die neue Version des Firefox für Developer hier herunterladen.

Diese Version dürfte wohl auch , die sonst mit Chrome arbeiten, davon überzeugen zu Mozilla zu wechseln – oder?

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