Webdesign | t3n News News, Infos, Tipps und aktuelle Artikel zu Webdesign 2015-01-19T09:37:26Z t3n Redaktion http://t3n.de/tag/webdesign 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.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
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
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