Kategorien
Editoren HTML/CSS Responsive Design Webdesign

Blisk: Der Browser für Entwickler

Alle modernen Browser sind mittlerweile mit umfangreichen Entwicklerwerkzeugen ausgestattet. Diese helfen dir unter anderem dabei, HTML und CSS zu überprüfen, sowie JavaScript zu debuggen. Auch hast du mit ihnen die Möglichkeit, dein Weblayout für unterschiedliche Auflösungen ausgeben zu lassen. Die Entwicklerwerkzeuge machen die Arbeit für Webdesigner und -entwickler sehr viel einfacher. Doch es geht noch ein Stückchen komfortabler und schneller: Mit Blisk gibt es nun einen Browser, der ganz speziell für Entwickler konzipiert wurde.

blisk

Mobilgeräte immer im Blick

Hast du Blisk heruntergeladen und installiert, dürfte dich der Browser zunächst an Google Chrome erinnern. Das ist nicht verwunderlich. Denn Blisk basiert auf Chromium, dem Quelltext von Chrome, der unter einen freien Lizenz allen zur Verfügung gestellt wird.

Der größte Unterschied zu Chrome und anderen Browser wird erkennbar, wenn du eine Website aufrufst. Denn Blisk stellt eine Website immer doppelt dar. Während in der rechten Bildhälfte die Seite als klassische Desktopansicht aufgerufen wird, erhältst du auf der linken Hälfte eine Mobilansicht.

blisk_browser
Zweigeteiltes Fenster für Mobil- und Desktopansicht

Dabei wählst du aus einer Reihe gängiger Smartphones und Tablets aus. So wechselst du beispielsweise sehr einfach vom iPhone 6 zum Galaxy S3 und siehst, wie deine Website auf beiden Geräten dargestellt wird. Dabei wird die Website innerhalb eines Mockups des jeweiligen Gerätes angezeigt, um ein möglichst realistisches Erscheinungsbild zu bekommen.

Die Darstellung auf den Mobilgeräten steuerst du zudem im Touch-Modus, bei dem eine Bedienung per Taps und Gesten simuliert wird. Zwar unterstützt auch Chrome diese Möglichkeit, aber nicht so schön aufbereitet.

Synchrones Scrollen

Damit du das Aussehen deiner Website optimal auf der Desktop- und Mobilansicht gegenüberstellen kannst, wird deine Website auf beiden Ansichten parallel gescrollt. So ersparst du es dir, jeweils auf beiden Ansichten zu einer bestimmten Position einer Seite zu gelangen.

blisk_browser_menueleiste
Menüleiste, um spezielle Funktionen ein- und ausschalten zu können

Wer das synchrone Scrollen nicht mag, kann es über die Einstellungen auch ganz einfach ausschalten. In der Menüleiste gibt es einen speziellen Button, der dich direkt zum Setup mit den Einstellungen bringt, in denen du diese Funktion ein- und ausschaltest.

Auto-Refresh für veränderte Inhalte

Eine weitere sehr praktische Funktion von Blisk ist das Auto-Refresh. Dieses sorgt dafür, dass der Browser eine Website immer dann neu lädt, wenn sich beispielsweise der HTML- oder CSS-Quelltext der Seite verändert hat.

Hierzu musst du für eine Domain einen sogenannten Watcher einrichten. Dazu gibst du zu einer Domain das Stammverzeichnis mit den lokalen Dateien deiner Website an. Außerdem legst du Dateiendungen fest, auf die reagiert werden soll. HTML-, CSS- und JavaScript-Dateien sind hier standardmäßig angegeben.

blisk_browser_setup
Das Setup für das Auto-Refresh

Immer wenn sich eine dieser Dateien im lokalen Verzeichnis ändert, lädt Blisk automatisch die Website der angegebenen Domain neu. Wer einen eigenen lokalen Server betreibt oder Dateien seiner Webprojekte automatisch vom lokalen Dateisystem auf einen Server speichert, wird sicher Freude mit dieser Funktion haben und sich so mehr als einmal das manuelle Neuladen ersparen.

Weitere Features geplant

Da Blisk noch neu ist, stehen noch nicht alle Funktionen zur Verfügung. So gibt es einige Features, die erst noch implementiert werden müssen. Dazu zählt die Möglichkeit, Screenshots von Websites zu erstellen, sowie eine Video-Capture-Funktion.

Ebenfalls noch in Arbeit ist ein Analytics-Feature, welches die geräteübergreifende Kompatibilität und Perfomance einer Website messen soll.

Klassische Entwicklerwerkzeuge

Natürlich stehen dir in Blisk auch die klassischen Entwicklerwerkzeuge zur Verfügung, wie du sie von Google Chrome kennst. So kannst du in Blisk Elemente überprüfen und hast Zugriff auf Cookies und die Storages deiner Website.

Auch wenn Blisk derzeit noch nicht mit allen Features aufwartet, ist der Browser bereits jetzt eine für Entwickler interessante Alternative zu Chrome. Er macht vieles einfacher, schneller und anschaulicher. Blisk ist zudem kostenlos und wird, wenn er hält, was er verspricht, noch einige interessante Features hinzubekommen.

Derzeit gibt es Blisk allerdings nur für Windows. Apple und Linux sollen jedoch folgen.

(dpe)

Kategorien
Design HTML/CSS UI/UX

Flexbox Patterns: Fertige Bausteine für dein Design

Wer sich einmal intensiver mit Flexbox als Alternative zum klassischen CSS Box-Modell beschäftigt hat, wird wahrscheinlich nicht mehr zurück wollen. Der Haken an der Sache ist eben, dass man sich erstmal intensiv damit befassen muss. Wer hat dafür heute schon genügend Zeit? Und so bleibt man desöfteren alten Arbeitsweisen verhaftet, einfach nur, weil man weiß, wie man damit zum Ergebnis kommt. Lass uns das mal ändern. Für den Schnelleinstieg in Flexbox zeige ich dir heute das Projekt Flexbox Patterns.

flexbox patterns

Flexbox: Tiefer einsteigen

Wer die Zeit hat, sollte sich durchaus mal den kostenlosen Videokurs ansehen, über den ich für die Kollegen von t3n an dieser Stelle berichtete. Immerhin 160 Minuten Grundlagenwissen werden dir da vermittelt. Zwar ist der Kurs komplett in englischer Sprache, jedoch hat der Macher Wes Bos sich wirklich Mühe gegeben, langsam und verständlich zu sprechen. Wenn dir also etwa das Lesen von Harry Potter auf Englisch keine sprachlichen Probleme bereitet, sollte es auch mit dem Flexbox-Kurs klappen.

Flexbox Patterns
Flexbox Patterns: Startseite

Auch auf Dr. Web haben wir schon hier und da das Thema Flexbox aufgegriffen. Bei unserer Schwester Noupe gibt es eine Anleitung zum Bau eines responsiven Kommentarbereichs.

Flexbox Patterns

Dankenswerterweise hat sich nun auch noch der Interface-Designer CJ Cenizal des Themas angenommen und mit der Website Flexbox Patterns eine Sammlung mit sofort verwendbaren Best Practices als Bausteinsystem ins Leben gerufen. Zwar stehen momentan erst knapp ein Dutzend fertig einsetzbare Module zur Verfügung, das Projekt ist jedoch expansiv angelegt und im Übrigen decken die vorhandenen Module die wichtigsten Anwendungsfälle schon ab.

Flexbox Patterns
Beispiel: alternierende Reihen mit Flexbox

Zu jedem Modul erklärt Cenizal ausführlich und verständlich, was er warum und wie getan hat. Die entsprechenden Code-Schnipsel sind jeweils ebenso dabei, wie die vollfunktionsfähige Umsetzung der Elemente an sich. Generell sind alle UI-Elemente per Copy and Paste nutzbar, Cenizal empfiehlt aber, sie im Zusammenhang eines auch ansonsten semantisch korrekten Konzepts zu verwenden, also etwa mit HTML5-Elementen.

Flexbox Patterns bekommt eine ganze Menge Hype ab, seit es seinen Weg auf die Startseite von Product Hunt geschafft hat. Das zeigt zumindest, dass es für das Angebot eine große Nachfrage gibt.

Kategorien
Design E-Business HTML/CSS SEO & Online-Marketing UI/UX

Foundation for Emails 2: responsiv, einfach, universell

Während man in modernen Browsern mittlerweile ohne größere Probleme HTML5 und CSS3 einsetzen und davon ausgehen kann, dass Chrome, Firefox und Internet Explorer beziehungsweise Edge alles so anzeigen, wie man es erwartet, sieht das bei E-Mail-Programmen und -Diensten ganz anders aus. Denn jedes Programm hat seine ganz eigenen Vorstellungen davon, wie es HTML und CSS darstellt. Doch mit „Foundation for Emails 2“ bekommst du ein umfangreiches Framework, welches komplexe HTML-E-Mails ermöglicht, die in den meisten Programmen und Webmail-Oberflächen funktionieren.

foundation-for-email

Starter-Kit mit elf Vorlagen

„Foundation“ ist ein beliebtes Framework für responsive Weblayouts, welches nun auch in einer aktuellen Version für responsive HTML-E-Mails erschienen ist. „Foundation for Emails 2“ gibt es in einer CSS- und in einer SASS-Version. Hast du das Starter-Kit heruntergeladen, findest du elf verschiedene Vorlagen für HTML-E-Mails.

foundation-for-email_vorlagen
Vorschau auf die elf E-Mail-Vorlagen

Darunter findest du relativ einfach gehaltene Vorlagen sowie mehrspaltige Vorlagen für verschiedene Zwecke. So gibt es zwei spezielle Newsletter-Vorlagen mit großer Header-Grafik und wahlweise ein- oder zweispaltigem Text. Darüber hinaus findest du Vorlagen für häufige Anlässe wie Bestellbestätigungen und klassische Passwort-vergessen-Mails, in denen üblicherweise ein Link zum Zurücksetzen des Passwortes verschickt wird.

foundation-for-email_newsletter
Zwei Vorlagen für Newsletter

Alle Templates besitzen eine externe CSS-Datei, in der alle Styles hinterlegt sind. Das Layout der Vorlagen ist absichtlich schlicht gehalten, so dass ein schlanker und übersichtlicher CSS-Quelltext vorhanden ist, der den eigenen Vorstellungen leicht angepasst werden kann.

Einfaches Tabellenlayout

Viele E-Mail-Programme und Webmail-Oberflächen verstehen leider nicht viel von moderner Webentwicklung. Und während es bei den Browsern eine recht übersichtliche Auswahl gibt, ist die Vielfalt der E-Mail-Programme und -Dienste so groß, dass man sich auf einen sehr kleinen gemeinsamen Nenner einigen muss.

foundation-for-email_order-password
Vorlagen für Bestellungen und vergessenes Passwort

Dieser besteht darin, dass HTML-E-Mails wie in den guten alten Zeiten vor CSS und ganz weit vor HTML5 als Tabellen ausgezeichnet werden. Dabei wird das Layout nicht komplett in einer Tabelle ausgezeichnet. Vielmehr kommen ineinander verschachtelte Tabellen zum Einsatz, die mit verschiedenen Klassen versehen werden.

Die oberste Tabelle erhält die Klasse „body“. Sie definiert den eigentlichen Bereich der E-Mail. Es folgen Tabellen mit der Klasse „container“, die einen Abschnitt innerhalb der Mail darstellen. Für mehrspaltige Tabellen fügst innerhalb einer Container-Tabelle eine weitere Tabelle mit der Klasse „row“ ein. In dieser kannst du dann Spalten mit unterschiedlicher Breite definieren.

12-er Raster für responsive Darstellung

Da „Foundation“ auf einem 12-spaltigen Raster basiert, hast du die Möglichkeit, deine Spalten entsprechend flexibel zu unterteilen. So sind zwei-, drei-, vier- und sechsspaltige Layouts problemlos möglich. Dank unterschiedlicher Klassen für große und kleine Fenster- beziehungsweise Displaygrößen entscheidest du sehr einfach, wie die Spalten bei kleinen und großen Auflösungen darzustellen sind.

Für ein dreispaltiges Layout vergibst du dann zum Beispiel bei großen Auflösungen die Klasse „large-4“ an deine Tabellenzellen. Sollen diese bei kleinen Auflösungen einspaltig dargestellt werden, vergibst du zusätzlich die Klasse „small-12“.

Vordefinierte Buttons, Farben und Schriften

Um die Arbeit mit „Foundation for Emails 2“ zu vereinfachen, stehen dir viele vordefinierte Komponenten zur Verfügung. So fügst du beispielsweise ohne großen Aufwand eigene Buttons in deine E-Mail ein. Neben primären und sekundären Buttons gibt es spezielle Buttons, um Warnungen und erfolgreiche Aktionen kenntlich zu machen.

foundation-for-email_buttons
Verschiedene vordefinierte Buttons

Auch für Überschriften, Fließtexte und Links gibt es entsprechende CSS-Vorgaben, die du natürlich anpassen und überschreiben kannst. Zur Ausrichtung von Texten und Bildern stellt die „Foundation for Email“ Klassen zur Verfügung, die es dir ermöglichen, Text links- oder rechtsbündig beziehungsweise zentriert auszurichten und Bilder links oder rechts mit Text umfließen zu lassen.

Inline-Styles erstellen

Neben der Notwendigkeit, das Layout einer HTML-E-Mail als Tabelle auszuzeichnen, gibt es eine weitere Besonderheit zu beachten. Viele E-Mail-Programme interpretieren Stylesheets nur, wenn sie inline – also per „style“-Attribut direkt im HTML-Element – definiert sind.

Da die Inline-Auszeichnung aufwendig ist und nachträgliche Änderungen gerade bei langen Mails sehr mühsam sind, stellt „Foundation“ dir einen „Web-Inliner“ zur Verfügung. Hierbei kopierst du sowohl deinen HTML- als auch deinen CSS-Quelltext in je ein Textfeld. Per Klick erstellt dir der „Web-Inliner“ einen HTML-Quelltext, bei dem alle im externen Stylesheet definierten Eigenschaften als Inline-Styles in den HTML-Quelltext übernommen wurden.

foundation-for-email_inliner
Web-Inliner erstellt HTML-Quelltext mit Inline-Styles

Außerdem werden bei dem ausgegebenen Quelltext alle Zeilenumbrüche und Leerzeichen entfernt, sodass trotz Inline-Styles ein möglichst schlanker Quelltext entsteht. Diesen Quelltext kannst du nun als HTML-E-Mail versenden.

Lediglich die Media-Queries-Regeln werden in einem eigenen „<style>“-Element definiert, da sich diese nicht per „style“-Attribut inline auszeichnen lassen. Allerdings wird das „<style>“-Element nicht wie üblich im HTML-Kopf, sondern im Body platziert, denn einige E-Mail-Programme entfernen alle Stylesheets-Blöcke aus dem HTML-Kopf.

Breite Kompatibilität mit gängigen E-Mail-Programmen und Webdiensten

Foundation for Emails 2“ läuft in vielen E-Mail-Programmen – und das nicht nur in aktuellen Versionen. So unterstützt das Framework zum Beispiel Microsoft Outlook in den Versionen 2000 bis 2016. Apple Mail wird in den Versionen 7 und 8 unterstützt. Auch die mobilen Standard-E-Mail-Anwendungen von Android 4.4 und iPhone 5 und 6, sowie iPad werden unterstützt – dazu die Gmail-App für Android.

Da viele ihre E-Mails über Webmail-Oberflächen öffnen, werden diese für die Dienste Gmail, Office 365, Outlook.com und Yahoo! Mail unterstützt – jeweils für Chrome, Firefox und den Internet Explorer.

Insgesamt ist „Foundation for Emails 2“ sehr einfach in der Handhabung, dabei äußerst flexibel und individuell anpassbar. Die große Kompatibilität mit zahlreichen E-Mail-Anwendungen macht es zu einem gelungenen Framework für HTML-E-Mails.

(dpe)

Kategorien
Design HTML/CSS

CSSCO: Instagram-Filter mit purem CSS

Instagram-Filter erfreuen sich nach wie vor großer Beliebtheit. Der Dienst erfreut sich weiterhin großen Zuspruchs. Um die kreativen Filter nachzubilden, haben sich bereits eine ganze Reihe Entwickler hingesetzt und zumeist auf der Basis von Javascript Lösungen erstellt. In jüngerer Zeit tauchen Derivate auf, die statt Javascript CSS einsetzen. Möglich machen es CSS Filters und Blend Modes.

CSSCO: Instagram-Filter mit purem CSS

CSSgram und CSSCO: CSS Filters und Blend Modes verfremden deine Bilder

Vor einiger Zeit stellte ich dir CSSgram von Una Kravets vor. Heute gesellt sich CSSCO von Lauren Waller dazu. Lauren bezeichnet eben CSSgram neben VSCO auch ausdrücklich als Inspiration für ihre Variante.

CSSCO: Instagram-Filter mit purem CSS

Die Funktionsweise ist ähnlich. Bei CSSgram werden Bilder mit einer Klasse versehen, die dem gewünschten Effekt entsprechen. Bei CSSCO wird die Klasse einem DIV-Container, der das Bild enthält, zugeteilt. In beiden Fällen entspricht die Klasse dem Namen des Effekts.

CSSCO ist mit 15 Filtern gegenüber CSSGram etwas weniger voluminös. CSSgram bietet derer 21. So ist der Einsatz einer der beiden Lösungen am Ende Geschmackssache. Wähle einfach dasjenige, dessen Filter dir letztlich besser gefallen.

CSSCO: Instagram-Filter mit purem CSS

Die Einschränkungen in Sachen Browserkompatibilität sind ebenfalls identisch. Problemlos funktionieren Chrome ab 43, Firefox ab 38, Opera ab 32 und Safari ab 8. Der Internet Explorer bleibt außen vor. Problematisch sind diese Einschränkungen deshalb nicht, weil in nicht unterstützten Browsern die Bilder angezeigt werden, bloß ohne die Effektfilter.

Probiers aus. Es macht Spaß, mit den Filtern zu spielen.

Kategorien
(Kostenlose) Services Design Editoren Essentials HTML/CSS Responsive Design UI/UX

Die 50+ besten Tools und Ressourcen für Webentwickler

Webentwicklung ist einer der schönsten Berufe überhaupt, allerdings auch einer der anspruchsvollsten. Denn man muss ständig am Ball bleiben, aktiv dazu lernen und kann sich nicht auf den Lorbeeren von gestern ausruhen. Es gilt, sich auf neue Anforderungen einzustellen. SEO-Grundkenntnisse sind gefragt, neue Techniken wie responsives Webdesign sind zu erlernen, Websites optimieren zu können ist wichtig, und natürlich neue Arbeitsweisen in der Erstellung von Websites kennenzulernen. Damit du im Spiel bleibst, haben wir dir hier eine Liste der besten Tools und Ressourcen für Webentwickler zusammengestellt.

Die besten Tools und Ressourcen für Webentwickler

Lebenslanges Lernen: Ressourcen für Webentwickler

Newsletter für Webentwickler

Newsletter für Webentwickler

Diese Newsletter bieten dir die besten Artikel zu Webentwicklung und Performance und sind redaktionell aufbereitet. So kannst du sicher sein, nur wirklich nützliche Dinge in deinem Posteingang zu finden.

  • Web Development Reading List – erscheint einmal wöchentlich und bringt dir neue Ressourcen und Tools nahe.
  • Web Operations Weekly – Der Newsletter zu Web-Applikationen, Performance, Webentwicklung, Server-Technik und Tipps.
  • WEB TOOLS WEEKLY – Der Newsletter zu den neuesten Tools für Webentwickler und Webdesigner. Hauptsächlich wird Front-End-Design behandelt.
  • freshbrewed.co – Einmal wöchentlich kommt der Newsletter zu Front-End- und UX-Design.
  • Dr. Web Newsletter – natürlich darf unser reanimierter Newsletter an dieser Stelle auch nicht fehlen. Abonnenten erhalten alle ein bis zwei Wochen schnelle Tipps und Infos für den Alltagsgebrauch.

Communities für Webentwickler

communities

Jeder Webentwickler steckt mal fest und weiß nicht weiter. Da ist es gut, wenn man sich an andere Menschen wenden kann, die schnell und unbürokratisch helfen. Hier sind einige Communities speziell für Webentwickler und Webdesigner.

Tools für den Gebrauch online und offline: Ressourcen für Webentwickler

Website Speed Test Tools

website-speed-test-tools

Die Geschwindigkeit einer Website ist ein kritischer Faktor für das Ranking deiner Website im Google-Index. Schnelle Ladezeiten bedeuten oftmals bessere Absprungraten, eine bessere allgemeine Benutzerfreundlichkeit und höhere Konversionsraten. Nutze also diese kostenlosen Tools zum Testen und Optimieren der Ladezeit deiner Website.

  • Website Speed Test:  Das relativ neue Speed-Test-Tool von KeyCDN mit einer „Wasserfall“-Darstellung der Ergebnisse und einer Vorschau der Website. Empfehlenswert.
  • Google PageSpeed Insights: PageSpeed Insights analysiert deine Website und gibt dir viele gute Tipps, wie du die Performance deiner Website verbessern kannst.
  • Google Chrome DevTools: Erklärt die in Google Chrome eingebauten Entwickler-Tools eingehend.
  • WebPageTest: Dieses Tool gibt dir die Möglichkeit, die Performance deiner Website von vielen Orten der Erde in echten Browsern wie Firefox, IE und Google Chrome zu testen.
  • Pingdom: Eines der besten Tools zum Testen der Ladezeit einer Website. Verschiedene Orte können eingestellt werden.
  • GTmetrix: Gibt dir einen Einblick über die Geschwindigkeit deiner Website und eine Menge Tipps, wie du sie verbessern kannst.

Collaboration Tools

Collaboration Tools

Diese Tools erleichtern die Zusammenarbeit von Teams, die zusammen an einem Auftrag arbeiten. Denn viele Teams bestehen mittlerweile aus Mitarbeitern, die über ganz Deutschland oder sogar über die ganze Welt verstreut leben und arbeiten. In Kontakt bleiben und sich gegenseitig absprechen ist also besonders wichtig. Mit diesen Tools kann man die Mitarbeit und den Arbeitsablauf bedeutend effizienter gestalten.

  • Slack: Eine Messaging-Anwendung für Teams, die an einem Auftrag arbeiten. Die App verspricht, dein Arbeitsleben einfacher und produktiver zu gestalten.
  • Trello:  Trello ist ein flexibler und visueller Weg, um Teams miteinander zu organisieren. Die Software basiert auf »Karten«, die kommentiert werden und auch mit Prioritäten versetzt werden können. Schnell und einfach zu erlernen.
  • Glip: Glip bietet dir Echtzeit-Messaging mit integriertem Aufgabenmanagement , Videokonferenzen, gemeinsame Kalender und vieles mehr.
  • Asana: Mit diesem Collaboration-Tool können Teams ihre Arbeit verfolgen und bisherige Ergebnisse einsehen. Perfekt um zu sehen, wo das Projekt gerade steht.
  • Jira: Jedes Mitglied deines Software-Teams kann seine Arbeit planen, Ergebnisse verfolgen und die Software anschließend freigeben.

Code Sharing und Experimente

Code Sharing

Manchmal hat man eine wirklich gute Unterhaltung auf Skype oder per Google-Hangouts mit einem anderen Entwickler und möchte mal eben ein Stückchen Code miteinander teilen, damit der Gesprächspartner einen Blick darauf werfen kann. Große Teamtools wie Slack können das natürlich, doch wenn du kein Mitglied eines Teams bist, ergeben sie keinen Sinn. Denn dafür existieren einige gute und schnelle Alternativen. Doch auch schnelle Experimente sind manchmal wichtig, darum findest du dafür Tools in dieser Liste.

  • JS Bin:  Ein Tool, um mit Programmier- und Auszeichnungssprachen zu experimentieren. Du kannst HTML, CSS, JavaScript, Markdown, Jade und Sass benutzen.
  • JSfiddle: Ein Tool, um deinen in JavaScript, HTML oder CSS Code direkt im Broser testen zu können.
  • codeshare: Teile deinen Code in Echtzeit mit anderen Entwicklern.
  • Dabblet: Ein interaktiver „Spielbereich“, um dir schnelles Testen von CSS- und HTML-Snippets zu ermöglichen.

Diff-Checker-Tools

diff-checker

Die „Diff-Checker“ helfen dir, Unterschiede zwischen Dateiversionen zu visualisieren und wenn gewünscht, zusammenzuführen. Manchmal kann es hilfreich sein, eine solche visuelle Darstellung zu sehen.

  • Diffchecker: Ein Online-Tool zum schnellen Vergleichen von textbasierten Dateien. Nützlich, wenn du unterwegs bist und einen schnellen Vergleich zwischen zwei Dateien benötigst.
  • Beyond Compare: Ein Programm zum Vergleichen von Dateien und Ordnern mit einfachen, leistungsfähigen Befehlen, die den Fokus auf den Bereich legen, der dich interessiert. Dinge, die dich nicht interessieren, kannst du ausblenden.

Markdown-Editoren

markdown-editoren

Markdown ist eine Auszeichnungssprache mit einer einfachen Syntax, die dann auf die Schnelle in HTML konvertiert werden kann. Anmerkung: Markdown-Editoren lassen sich für Schreibarbeiten und einfachen Code nutzen.

  • StackEdit: Ein kostenlos zu nutzender Online-Editor für Markdown.
  • Dillinger: Dillinger ist ein Cloud-fähiger HTML5 Markdown-Editor.
  • Mou: Markdown-Editor für Entwickler, die Mac OS X nutzen.
  • Texts: Ein einfacher Text-Editor für Markdown. Erhältlich für Windows und Mac OS X.
  • MarkdownPad: MarkdownPad ist wohl der beste Markdown-Editor für Windows. Er kann direkt mit einer Live-Preview neben dem Eingabebereich dienen.
  • ByWord: ByWord ist der klare Favorit im Dr. Web-Team, wenn es um Editoren für den Mac geht.
  • Sublime Text: In diesem Artikel auf Dr. Web erklärt Peter Müller, wie er mit Sublime Text seinen Markdown-Traumeditor gefunden hat.

CSS Preprocessors

css-preprocessors

Ein CSS Preprocessor ist im Grunde eine Script-Sprache, die CSS erweitert und zu regulärem CSS kompilieren kann. CSS Preprocessors erleichtern dir die Arbeit mit CSS. Hier ein Grundlagen-Artikel zu Sass und Less.

  • Sass: Eine sehr ausgereifte, stabile und leistungsfähige professionelle CSS-Erweiterung.
  • Less: Eine Erweiterung zu CSS, die auch rückwärts kompatibel mit CSS ist. Dies macht das Erlernen zu einem Kinderspiel.
  • Stylus: Eine neue Sprache, welche dir eine effiziente, dynamische und ausdrucksstarke Weise CSS zu generieren bietet. Stylus unterstützt sowohl eingerücktes als auch reguläres CSS.

Front-End-Frameworks

user-interface

Die Arbeit mit Frameworks wird immer beliebter, denn einen bereits vorbestimmten Rahmen, ein vorgefertigtes Paket zu nutzen, kann die Arbeit erleichtern und lässt dich schneller zum Ergebnis kommen. Die Frameworks bestehen in der Regel aus einigen Dateien und Ordnern, wie CSS, HTML-Beispiele und JavaScript. Twitters Bootstrap-Framework ist eines der beliebtesten Frameworks überhaupt und Grundlage sehr vieler anspruchsvoller Websites. Doch auch andere Frameworks verdienen es, getestet zu werden.

  • Bootstrap: Ein HTML, CSS, und JS Framework für das Entwickeln von responsiven, mobile-first Websites.
  • Foundation: Eine Familie von responsiven Front-End-Frameworks, die es dir erleichtern sollen, responsive Websites, Apps und E-Mails zu entwickeln.
  • Semantic UI: Ein Framework zum Entwickeln von responsiven Websites mit semantischem, leichtverständlich zu erfassenden HTML.
  • uikit: Ein leichtgewichtiges und modulares Framework zum Entwickeln von schnellen und leistungsfähigen Web-Schnittstellen.

Git: Clients und Services

git-clients

Git ist ein Quellcode-Management-System für Software und Webentwicklung. Es bietet dir eine verteilte Versions-Kontrolle. Seinen großen Vorteil spielt Git beim Arbeiten in Teams aus, denn es können Code-Änderungen nachverfolgt und vom Entwicklungs- bis zum Live-Stadium gebracht werden. Es ist ein Weg das Chaos zu minimieren und sicherzustellen, dass nichts Online geht, was nicht getestet wurde.

  • SourceTree: Ein kostenloser Git und Mercurial Client für Mac und Windows. Ein git-Client für Teams – Bitbucket – ist ebenfalls erhältlich.
  • GitKraken (Beta):  Ein freier und intuitiver, schneller und für alle Plattformen zu bekommender Client.
  • Tower 2: Versionskontrolle mit Git – leichtgemacht. Das verspricht diese App. Nur für Mac.
  • GitHub Client: Ein einfacher Weg, um an Projekten auf GitHub und GitHub Enterprise mitzuwirken.
  • Gogs: Ein einfacher Git-Client zum Selbsthosten.
  • GitLab: Hier kannst du deine privaten und öffentlichen Projekte kostenlos hosten.

Ergänzende Links zum Beitrag:

(dpe)

Kategorien
HTML/CSS Webdesign

Tabellen responsiv gestalten – mit CSS, ohne JavaScript

Responsives Webdesign ist längst zu einem festen Bestandteil der Webentwicklung geworden. Die zunehmende mobile Internetnutzung macht es erforderlich, dass jede Website auch auf kleinen Displays zu erkennen ist. Das stellt Webdesigner und -entwickler immer wieder vor Herausforderungen. Wo bringe ich die komplexe Navigation unter? Wie stelle ich Fotos und Grafiken zur Verfügung? Was mache ich mit breiten, vielspaltigen Tabellen? Auf letztere Frage gibt es gleich mehrere mögliche Antworten. Denn die eine, immer richtige Lösung für Tabellen gibt es nicht.

Tabellen responsiv gestalten – mit CSS, ohne JavaScript

Tabellen scrollbar machen

Eine recht einfache Möglichkeit, ist es, Tabellen einfach vertikal scrollbar zu machen. Hierbei bleibt die Tabelle in ihrer Breite unverändert. Mit etwas CSS wird lediglich dafür gesorgt, dass die Tabelle nicht die Breite des Layouts sprengt, sondern der sichtbare Bereich auf die Display- beziehungsweise Layoutbreite beschnitten wird. Mit dem Finger kannst du die Tabelle allerdings nach links und rechts verschieben.

table {
  display: block;
  overflow: scroll;
}

Um eine Tabelle scrollbar zu machen, bedarf es lediglich zweier CSS-Eigenschaften. Zum einen muss aus der Tabelle ein Blockelement werden – per „display“. Zum anderen muss per „overflow“ dafür gesorgt werden, dass alles, was über die Breite des Weblayouts hinaus geht, nicht dargestellt wird. Dieser Bereich ist dann aber per vertikalem Scrollen erreichbar.

css-tabellen-responsiv_scrollbar
Scrollbare Tabelle

Zusätzlich sollte man den Tabellenspalten entweder feste Breiten zuweisen oder per „white-space“ verhindern, dass ein automatischer Umbruch erfolgt.

table th, table td {
  white-space: nowrap;
}

Andernfalls wird die Tabelle immer auf die Breite des Weblayouts zurechtgestutzt, was zu unschönen und vor allem vielen Zeilenumbrüchen führt.

Tabellenspalten untereinander darstellen

Die erste Variante hat zwar den Vorteil, dass sie einfach umzusetzen ist und du immer eine Spalte der Tabelle komplett im sichtbaren Bereich hast. Je nach dargestellten Daten ist es jedoch sinnvoller, immer den Inhalt einer Zeile komplett sichtbar zu haben. Auch hierfür gibt es eine Lösung, die etwas umständlicher ist, aber ebenfalls ohne JavaScript auskommt.

Die zweite Variante wird eine Tabelle komplett aufbrechen und jede Zeile mit den entsprechenden Spaltenbezeichnungen als Block untereinander darstellen. Hierfür ist es zunächst notwendig, dass per Data-Attribut die Spaltenbezeichnungen jeder Zelle einer Zeile hinzugefügt werden.

<table>
  <tr>
    <th>Name</th>
    <th>Straße</th>
    …
  </tr>
  <tr>
    <td data-th="Name">Manfred Mustermann</td>
    <td data-th="Straße">Musterstraße 1</td>
    …
  </tr>
  …

Im Beispiel wird also der ersten Zelle einer Zeile per „data-th“ die Bezeichnung der ersten Spalte zugewiesen, der zweiten Zelle die Bezeichnung der zweiten Spalte. Dies muss für alle Zeilen der Tabellen wiederholt werden.

css-tabellen-responsiv_untereinander
Untereinander dargestellte Tabellenzeilen

Anschließend müssen die Zeilen und Zellen als Blockelemente dargestellt werden und die Kopfzeile darf nicht mehr sichtbar sein.

table td, table tr {
  display: block;
}
table th {
  display: none;
}

Danach setzt du das Pseudoelement „::before“ ein, um den Wert des Attributes „data-th“ vor jeden Zelleninhalt zu platzieren.

table td::before {
  content: attr(data-th)":";
  display: inline-block;
  font-weight: bold;
  margin-right: 0.25em;
}

Per „content“ wird dem Pseudoelement der Wert des Data-Attributes sowie ein Doppelpunkt zugewiesen. Das Ganze stellst du dann noch als Inline-Block-Element dar.

Die ganzen CSS-Definitionen solltest du zudem innerhalb eines Media-Queries-Bereichs platzieren, so dass sie nur für bestimmte Auflösungen ausgegeben werden. Diese zweite Lösung funktioniert in allen modernen Browsern. Nur der Internet Explorer 9 und ältere Versionen haben so ihre Probleme damit.

Fazit und Beispiele

Beide Lösungen haben ihre Berechtigung. Die erste sorgt für eine gute Übersicht, wenn es darum geht, einzelne Spalten darzustellen. Die zweite Lösung ist optimal, wenn es wichtig ist, den Inhalt einzelner Zeilen im Blick zu haben.

Kategorien
Design Editoren HTML/CSS Webdesign

CSS Shapes: So richtest du Text an Formen aus

In Anwendungen wie InDesign oder QuarkXPress ist der Textumfluss eine klassische Möglichkeit, freigestellte Bilder und Grafiken sowie andere Pfaden mit Text umfließen zu lassen. Mit den CSS Shapes hast du seit CSS3 im Webdesign die Möglichkeit, solchen Textumfluss zu realisieren. Dazu kannst du sowohl Pfade definieren, an denen ein Text entlang laufen soll, als auch freigestellte Bilder definieren, an denen sich ein Text orientieren soll.

CSS Shapes: So richtest du Text an Formen aus

Kreise, Ellipsen und Polygone für Umfluss definieren

Um einen Textumfluss mit einfachen Pfaden zu erstellen, benötigt es zunächst ein Element, an dem der Text entlang fließen soll. Hier bietet sich ein „<div>“-Container an, dem eine Breite und Höhe zugewiesen werden, sowie die „float“-Eigenschaft, die dafür sorgt, dass nachfolgender Text an dem Element entlang läuft.

<div></div>
<p>Lorem ipsum …</p>

Bis hier hast du ein klassisches rechteckiges Element. Mit der Shape-Eigenschaft „shape-outside“ definierst du nun einen Pfad, der anstelle der rechteckigen Form für den Textumfluss sorgt.

div {
  width: 300px;
  height: 300px;
  float: left;
  shape-outside: circle(50%);
}

Im Beispiel wird ein Kreis mit einem Radius von 50 Prozent definiert. Zusätzlich kannst du auch den Kreismittelpunkt festlegen, wenn dieser nicht im Zentrum des Elementes liegen soll.

div {
  shape-outside: circle(50% at 50px 100px);
}

css-shapes_kreis
Einfacher Kreis, um den der Text fließt

Im zweiten Beispiel ist der Mittelpunkt 50 Pixel vom linken und 100 Pixel vom oberen Rand des Elementes entfernt. Mit „shape-outside“ wird im Übrigen nur ein Pfad für den Textumfluss erstellt. Gibst du dem „<div>“-Element im Beispiel eine Hintergrundfarbe, wird diese auf die rechteckige Grundform des Elementes angewendet und nicht auf den Kreis.

Statt Kreise sind auch Ellipsen möglich, bei denen du zwei Radien angibst.

div {
  shape-outside: ellipse(50% 25% at 50px 100px);
}

Die per „shape-outside“ definieren Pfade müssen nicht die komplette Fläche des Elementes ausfüllen. Sie können auch deutlich kleiner sein. Text wird sich ausschließlich an diesem Pfad orientieren und die eigentliche Größe des „<div>“-Elementes komplett ignorieren.

Für komplexere Formen kannst du ein Polygon anlegen, dessen Koordinatenpaare du per Komma voneinander getrennt übergibst.

div {
  shape-outside: polygon(150px 0, 179px 41px, 225px 20px, …);
}

Bilder als Shape nutzen

Ganz häufig will man einen Text nicht um eine einfache geometrische Form, sondern um ein freigestelltes Bild fließen lassen. Statt die Außenform des freigestellten Bildes mit einem Pfad nachzeichnen zu müssen, gibt es mit „shape-outside“ auch die Möglichkeit, direkt ein freigestelltes Bild zu übergeben. Voraussetzung ist, dass das Bild über einen Alphakanal besitzt und der Bereich außerhalb des freigestellten Objektes eine Transparenz besitzt.

<img src="rose.png" />
<p>Lorem ipsum …</p>

Im Beispiel wird nun statt eines einfachen „<div>“-Containers ein Bild gesetzt, welches ebenfalls per „float“ dafür sorgt, dass der nachfolgende Text daran entlang läuft. Statt einer geometrischen Form wird die Bildadresse der Eigenschaft „shape-outside“ per „url()“ zugewiesen.

div {
  float: left;
  shape-outside: url("rose.png");
  shape-image-threshold: 0.5;
  shape-margin: 10px;
}

css-shapes_bild
Freigestelltes Bild, um das der Text fließt

Die zusätzliche Eigenschaft „shape-image-treshold“ gibt an, wie viel Transparenz das Bild mindestens aufweisen muss, damit diese für den Textumfluss angewendet werden soll. Bei 0 werden nur Bereiche berücksichtigt, die zu 100 Prozent transparent sind. Im Beispiel wird eine Transparent von 50 Prozenz und mehr akzeptiert. Außerdem wird mit der Eigenschaft „shape-margin“ noch ein Abstand definiert zwischen dem freigestellten Bild und dem Text.

Auf diese Weise realisierst du ohne großen Aufwand Textumfluss, wie er bislang nur in Satz- und Layoutanwendungen möglich war.

Chrome-Erweiterung für CSS Shapes

css-shapes_chrome-erweiterung1
Chrome-Erweiterung ergänzt „Shapes“-Reiter

Um CSS Shapes direkt im Browser in der Größe und Position verändern und zu können, gibt es die Chrome-Erweiterung „CSS Shapes Editor“. Ist sie installiert, findest du in deinen Entwicklerwerkzeugen unter „Elements“ einen eigenen Reiter „Shapes“. Wählst du ein Element aus, welches per „shape-outside“ ausgezeichnet ist, siehst du im „Shapes“-Reiter diese Eigenschaft.

css-shapes_chrome-erweiterung2
Eigene Formen direkt im Browser zeichnen

Im Browser wird der Bereich des Pfades, der ansonsten ja nicht sichtbar ist, farblich hervorgehoben. Außerdem änderst du Größe und Position des Pfades oder erstellst neue Pfade. So kannst du ein Polygon hinzufügen und dieses direkt im Browser zeichnen. Später kopierst du die Werte der Form und fügst sie in deinen eigenen Quelltext ein.

Wer den kostenlosen Editor Brackets verwendet, den wir dir in diesem Beitrag vorstellten, findet an dieser Stelle eine entsprechende Erweiterung, um CSS Shapes komfortabel erstellen und bearbeiten zu können.

Eine beeindruckende Demo zur Verwendung von CSS Shapes gibt es bei Adobe: Alice in Wonderland.

Browserunterstützung

Derzeit unterstützen Chrome, Safari und Opera die Eigenschaft „shape-outside“. Firefox, Internet Explorer und Edge können mit CSS Shapes noch nichts anfangen.

(dpe)

Kategorien
Design Design-News HTML/CSS

Gutenberg: Web-Typografie für jedermann

Gutenberg ist ein Starterkit für bessere Web-Typografie. Sein Entwickler Matej Latin sorgt auf ganz einfache Weise für schönere, lesbarere Inhalte. Das geschieht im Wesentlichen durch die konsequente Ausrichtung aller Inhalte an der einmal in Abhängigkeit zur Schriftgröße definierten Grundlinie.

Gutenberg: Web-Typografie für jedermann

Web-Typografie mit Gutenberg sieht gut aus

Gute Typografie im Web ist selten. Sicher, wenn man eine entsprechend gestaltete Seite sieht, erkennt man die Sorgfalt der Platzierung, die gleichmäßigen Abstände, den durchdachten Satz. Aber auch nicht unter typografischen Überlegungen erstellte Seiten funktionieren generell. Von daher kann ich jeden Designer verstehen, der den zusätzlichen Aufwand nicht treiben will.

Das neue Typografie-Starterkit Gutenberg von Matej Latin ist so konzipiert, dass grundlegende typografische Regeln eingehalten werden können, ohne dass man damit wirklich Arbeit hat. Gutenberg bietet zum jetzigen Zeitpunkt tatsächlich nur die absoluten Basics für einspaltige Layouts. Matej arbeitet jedoch schon an Erweiterungen zum Tabellensatz und zu seitlich angebrachten Kommentaren.

Gutenberg: Web-Typografie für jedermann

Gutenberg ist auf Basis von Sass entstanden. So kannst du mit Mixins arbeiten und dadurch eine Flexibilität in deine Designs bekommen, die ohne variablenfähiges Markups nicht möglich wären.

Gutenberg steht unter Creative Commons 3.0. Du musst also den ursprünglichen Urheber nennen, wenn du es verwendest. Zudem darfst du Abwandlungen und Erweiterungen des Projekts nur zu den gleichen Bedingungen veröffentlichen. Das bedeutet im Wesentlichen, dass du Gutenberg nicht etwa hernehmen darfst, um auf seiner Basis ein Produkt zu entwickeln, dass du dann verkaufen willst. In kommerziellen, auch in Kunden-Websites kannst du Gutenberg aber einsetzen.

Gutenberg: So gehts

Gutenberg “errechnet” den Schriftsatz anhand der beiden Basiswerte zur Schriftgröße und zum Zeilenabstand. Die Multiplikation beider Werte ermittelt das sogenannte $leading, welches wiederum die eigentlich Basis für das Grid ist, in das die Inhalte eingepasst werden.

$base-font-size: 100; // Converts to 16px
$line-height: 1.6;
$leading: $base-font-size * $line-height;

Durch die Verwendung von Sass kannst du mit dem Wert für $leading rechnen und weitere, quasi automatisch passende Werte, etwa für ein h2 bestimmen:

h2 {
  margin-top: #{2.5 * $leading + 'px'};
  line-height: #{1.5 * $leading + 'px'};
}

Um den Einstieg zu erleichtern, liefert Matej zwei “Themes” mit, die auf der Basis der Google-Fonts Merriweather oder Open Sans arbeiten und dadurch noch unkomplizierter zu guten Resultaten führen. Du kannst allerdings auch die Option custom wählen und deine eigenen Vorstellungen realisieren.

Falls du dir zunächst einen Eindruck der Optik der Themes verschaffen willst, hat Matej dafür zwei Beiträge vorbereitet. Klick auf das jeweilige Bild, um den zugehörigen Beitrag aufzurufen:

Gutenberg: Web-Typografie für jedermann

Gutenberg: Web-Typografie für jedermann

Rechts oben an der Projektseite, aber auch an den beiden Beispielen findest du einen Schalter, mit dessen Hilfe du das Grid sichtbar machen kannst.

Übrigens: Vor einiger Zeit haben wir hier bei Dr. Web ein Projekt namens Baseline JS vorgestellt, das in eine ähnliche Richtung geht, aber auf JavaScript setzt. Hast du dich noch nie mit dem Thema beschäftigt, ist sicherlich unser Fundstück zu Typografie für Anfänger was für dich.

Kategorien
Design Editoren HTML/CSS JavaScript & jQuery Programmierung Sonstige Programme Webdesign

Adobe: Flash ist tot, es lebe Animate CC

Ende letzten Jahres wurde angekündigt, dass Anfang 2016 Schluss sein soll mit Adobe Flash. Zumindest der Name sollte aus der ehemals beliebten Anwendung verschwinden, die damit auch ihren Schwerpunkt auf andere, offene und zeitgemäße Formate verschieben soll. Jetzt hat Adobe Ernst gemacht und das Nachfolgeprodukt namens Animate CC an den Start gebracht. Wir haben es uns genauer angeschaut. Um es vorwegzunehmen: Flash ist nicht so richtig tot, es spielt nur keine große Rolle mehr.

Adobe: Flash ist tot, es lebe Animate CC

HTML5 Canvas und WebGL

Wer Flash CC tatsächlich noch installiert hatte, bei dem wird es sich mit einem Update automatisch verabschieden. Denn das alte Flash CC wird durch das neue Animate CC ersetzt. Aber um allzu große Veränderungen muss sich niemand Sorgen machen. Beim Öffnen von Animate CC stellst du schnell fest, dass das Allermeiste doch beim Alten geblieben ist: Die Bühne und Zeitleiste sind ebenso geblieben, wie die restlichen Arbeitsbereiche.

animate-cc_buehne-zeitleiste
Gewohnte Bereiche: Bühne und Zeitleiste

Auch die Dateiendung „.fla“ ist geblieben, um Projekte zu speichern. Die erste große Neuerung entdeckst du, wenn du ein neues Dokument anlegst. Beim Dokumenttyp werden dir noch vor verschiedenen ActionScript- und AIR-Dokumenten die beiden Formate HTML5 Canvas und WebGL vorgeschlagen – beides zeitgemäße Formate, die von allen modernen Browsern unterstützt werden.

animate-cc_neu
HTML5 Canvas und WebGL stehen nun im Mittelpunkt

Hast du dich für eines der Formate entschieden, legst du wie gewohnt los. Das Schöne am neuen Animate CC ist, dass (ehemalige) Flash-Entwickler sich schnell zurechtfinden, da sich ansonsten wenig geändert hat. Du kannst Grafiken und Texte auf der Bühne platzieren, Movieclips und Schaltflächen erstellen, Instanzen anlegen und Animationen auf die Zeitleiste bringen.

Auswahl der richtigen Scriptsprache: ActionScript oder JavaScript

Das Besondere an Flash war immer die eigene Programmiersprache ActionScript, mit der du Animationen steuern und Funktionen ausführen konntest. ActionScript steht dir weiterhin zur Verfügung. Aber mit den neuen Formaten HTML5 Canvas und WebGL ist vor allem JavaScript gefragt. Über das Aktionenfenster kümmerst du dich weiterhin um deine Programmierung – sei es in mit ActionScript oder JavaScript.

animate-cc_aktionen
ActionScript oder JavaScript für HTML5 Canvas und WebGL

Für viele oft genutzte Funktionen stellt dir Animate CC eine ganze Reihe von Codefragmenten zur Verfügung. Diese sind nun gegliedert in ActionScript, HTML5 Canvas und WebGL. Zu den Codefragmenten gehören Aktionen zum Öffnen von Websites, sowie zur Steuerung von Animationen. Du wählst einfach ein Fragment aus, welches in der Zeitleiste oder auf ein Objekt angewendet wird.

Außerdem steht dir für HTML5-Canvas-Projekte das Framework CreateJS zur Verfügung. Hiermit erstellst du komplexe Formen und Animationen direkt per JavaScript.

Veröffentlichen von Animate-Projekten

Wie schon bei Flash muss beim neuen Animate CC dein fertiges Projekt veröffentlicht werden. Hierzu generiert Animate CC ein HTML-Dokument und die dazugehörigen Dateien. Hast du HTML5 Canvas gewählt, wird neben dem HTML-Dokument, welches das Canvas-Element enthält, eine JavaScript-Datei mit der Programmierung erstellt.

Bei WebGL werden mehrere Dateien angelegt. Neben dem HTML-Dokument ist eine WebGL-Bibliothek erforderlich, die durch Animate CC erstellt wird, sowie verschiedene JSON-Objekte und Grafikdateien.

animate-cc_veroeffentlichen
Veröffentlichungseinstellungen für HTML5 Canvas

Wenn du zunächst erst einmal die beiden neuen Formate HTML5 Canvas und WebGL kennen lernen möchtest, findest du einige Vorlagen, die du zum Erstellen neuer Dokumente verwenden kannst.

Animate CC jetzt mit Typekit und Adobe Stock

Zu den weiteren Neuerungen von Animate CC gehört, dass die beiden Adobe-Dienste Typekit und Adobe Stock ein fester Bestandteil von Animate CC geworden sind. Wurden bei Flash Schriften einfach eingebettet, müssen bei den neuen Formaten Webschriften her. Hier bietet es sich natürlich an, dass Adobe seinen eigenen Schriftendienst Typekit integriert.

Zu seiner Nutzung musst du einfach die URL der Website angeben, auf der das Projekt zu finden ist. Animate CC bindet dann automatisch die aus Typekit gewählten Schriften ein. Die Verwendung von Adobe Stock funktioniert ähnlich wie in anderen CC-Anwendungen. Du wählst direkt aus der Anwendung heraus ein Bild aus Adobe Stock und platzierst es in deinem Dokument.

Und Flash gibt es auch noch

Zu guter Letzt sei noch erwähnt, dass du natürlich weiterhin ganz klassisch Flash-Inhalte entwickeln kannst. Auch wenn das Flash-Format keine große Rolle mehr spielt, ist es noch nicht tot. Zumindest im Bereich der Spiele-Entwicklung hat es derzeit noch einen gewissen Stellenwert. So sind ein Großteil der Facebook-Spiele beispielsweise noch mit Flash realisiert.

Aber es ist nur eine Frage der Zeit, bis Flash gänzlich verschwindet. Einen Schritt dorthin ist Adobe mit seinem neuen Animate CC gegangen.

Hast du es dir schon angeschaut? Was hälst du persönlich davon?

(dpe)

Kategorien
Design Design-News HTML/CSS

Test my CSS gibt Tipps zur Optimierung deiner Stylesheets

Ein kostenloses Onlinetool listet übersichtlich alle Probleme auf, die deine CSS-Stylesheets in sich tragen. So gewinnst du schnell einen Überblick darüber, wo Handlungsbedarf besteht. Test my CSS informiert dich zudem darüber, warum das jeweilige Problem ein Problem ist und macht Vorschläge zur Behebung. Alles, was du brauchst, ist die URL zu deinem Stylesheet.

Test my CSS gibt Tipps für die Optimierung deiner Stylesheets

Früher, als die Gummistiefel noch aus Holz waren

Früher, da war natürlich alles besser. Da schrieb man sein CSS noch ein ums andere Mal neu und achtete nach bestem Wissen und Gewissen auf Reinheit und Best Practices im Allgemeinen. Dann wuchs das Projekt, ach, was sage ich, die Projekte. Im täglichen Kuddelmuddel wollte Kunde X hier eine Änderung, Kunde Y da eine. Schnell wurde aus der übersichtlichen Datei eine mehr oder weniger chaotische Gemengelage aus einem meist aber mehreren Stylesheets. Gar nicht zu regen von den Fällen, in denen wir Projekte von anderen Designern übernehmen mussten, aber nicht von Grund auf restrukturieren konnten.

Wenn ich auf meine Projekte schaue, dann muss ich klar zugeben, dass die verwendeten Stylesheets teils schon ins Teenageralter gekommen sind. Sie funktionieren natürlich, aber sie sind sicherlich weit von einem optimalen Zustand entfernt. Na ja, wer braucht schon optimale Ergebnisse? Denkt man sich, weil man die Arbeit scheut. Wenn es aber ein Tool gäbe, das einen mit der Nase auf die Probleme stoßen würde, würde das nicht motivieren? Also mich schon…

Test my CSS: Machs einfach besser

Test my CSS ist ein unter der liberalen MIT-Lizenz betriebenes Onlinetool des Entwicklers Luke Fender. Fender setzt seinerseits wiederum auf Analyze-CSS von Maciej Brencz auf, der die Nutzung seines Tools ebenfalls frei gegeben hat, dabei aber eine Urhebernennung verlangt.

Die Verwendung von Test my CSS ist denkbar einfach. Du gibst lediglich die URL zu dem zu analysierenden Stylesheet ein, Test my CSS lädt es und analysiert es direkt. Das geht schnell und unkompliziert.

Test my CSS gibt Tipps für die Optimierung deiner Stylesheets

Als Ergebnis erhältst du eine kommentierte Auflistung aller Problemzonen deines Stylesheets. Dabei teilt Test my CSS dir mit, wieso es das jeweilige Markup für problematisch hält und welche Auswirkungen eine Änderung haben kann.

Zusätzlich bietet Fenders Tool Hintergrundinformationen, wie Tipps und Tricks zur optimalen CSS-Auszeichnung in unterschiedlichen Szenarien. Unter dem Menüpunkt „Examples“ findest du Beispiele von Stylesheets großer Anbieter mit entsprechenden Analysen. Du siehst, auch die kochen nur mit Wasser ;-)

Test my CSS kostet nichts, außer deiner Zeit, aber selbst das nur in minimalem Ausmaß. Dafür erhältst du gut verwertbare Anhaltspunkte für die Optimierung deiner Stylesheets. Schau auf jeden Fall mal rein. Selbst wenn du glauben solltest, dein CSS wäre Königsklasse.

(dpe)

Kategorien
Design HTML/CSS Webdesign

Performance steigern: SVG-Icons als Sprite sparen Requests

Sprites sind eine beliebte Möglichkeit, mehrere Icons innerhalb einer Grafikdatei unterzubringen und immer nur einen Ausschnitt dieser Grafik per CSS auszugeben. Der Vorteil einer solchen Lösung ist, dass mehrere Requests vermieden werden. Statt einzelne Icon-Dateien zu laden, muss nur eine Datei aufgerufen werden. Auch Iconfonts haben den Vorteil, dass nur eine Datei für alle Icons geladen werden muss. Wenn du auf SVG-Icons setzt, kannst du in diesem Format ein Sprite erstellen, dessen Umgang in der Praxis sogar deutlich einfacher ist als klassische Icon-Sprites.

Performance steigern: SVG-Icons als Sprite sparen Requests

Icons per „<symbol>“ zusammenführen

Zunächst einmal müssen natürlich die einzelnen Icons oder Grafiken, die du zu einem Sprite zusammenfügen möchtest, im SVG-Format vorliegen. In Anwendungen wie zum Beispiel Illustrator speicherst du Vektorgrafiken dafür in diesem Format ab. Um mit diesen Grafiken einen Sprite zu erstellen, verwenden wir das „<symbol>“-Element. Dieses Element erlaubt es dir, beliebige SVG-Formen in einer Art Vorlage zu speichern. Den Inhalt eines „<symbol>“-Elementes fügst du dann beliebig oft an anderer Stelle ein.

svg-sprites_illustrator
In Illustrator gezeichneter Stern

<svg>
  <symbol width="105" height="100" id="stern_gelb">
    <polygon fill="#FAAF32" points="52.5,0 68.7,32.9 105,38.2 78.8,63.8 85,100 52.5,82.9 20.1,100 26.3,63.8 0,38.2 36.3,32.9" />
  </symbol>
</svg>

Im Beispiel enthält ein „<symbol>“-Element ein Polygon in der Form eines Sternes. Du kannst natürlich auch deutlich komplexere Grafiken definieren und mehrere Formelemente innerhalb eines „<symbol>“-Elementes auszeichnen. Die Vergabe einer ID ist wichtig, damit du später auf das jeweilige Symbol zugreifen kannst.

Auf diese Weise erstellst du beliebig viele Symbole innerhalb einer SVG-Datei. Im Gegensatz zu klassischen Sprites müssen die einzelnen Icons oder Grafiken nicht neben- und untereinander platziert werden. Du kannst alle Symbole links oben platzieren. Gerade hier sparst du dir viel Arbeit, da du dir keine Gedanken über die richtige Positionierung der einzelnen Sprite-Elemente machen musst.

„viewBox“ oder feste Breite und Höhe

Wie du im oberen Beispiel siehst, werden über das „<symbol>“-Element die Breite und Höhe definiert. Hier musst du dich entscheiden, ob du feste Werte per „width“ und „height“ definierst, oder ob du das „viewBox“-Attribut einsetzt. Bei festen Werten wird das Symbol später immer in dieser festen Größe dargestellt. Verwendest du das „viewBox“-Attribut, wird sich die Größe des Symbols immer der Größe des Elternelementes anpassen.

<svg>
  <symbol viewBox="0 0 105 100" id="stern_blau">
    <polygon fill="#32417D" points="52.5,0 68.7,32.9 105,38.2 78.8,63.8 85,100 52.5,82.9 20.1,100 26.3,63.8 0,38.2 36.3,32.9" />
  </symbol>
</svg>

Im zweiten Beispiel wird derselbe Stern per „viewBox“ ausgezeichnet. In diesem Fall ist der Stern in seiner Größe variabel. Willst du, dass sich deine Symbole in der Größe anpassen, solltest du diese Variante verwenden.

Symbole per „<use>“ auswählen

Hast du all deine Symbole angelegt, speicherst du das Sprite ab. Jetzt kannst du es in HTML-Dokumente einbinden und die einzelnen Symbole aufrufen. Dazu muss innerhalb des HTML-Dokumentes ein „<svg>“-Bereich ausgezeichnet werden. Innerhalb dieses Bereiches rufst du deine Sprite-Datei per „<use>“-Element auf und wählst das gewünschte Symbol aus.

<svg width="100%" height="100%">
  <use xlink:href="sprite.svg#stern_gelb" />
</svg>

svg-sprites_symbol1
Stern mit fester Größe

Mit dem Attribut „xlink:href“ referenzierst du die Sprite-SVG-Datei. Die ID des Symbols wird als Sprungmarke übergeben. Aus der Sprite-Datei wird dir anschließend nur das Symbol mit der ID „stern_gelb“ angezeigt. Im Beispiel ist der SVG-Bereich mit einer Breite und Höhe von jeweils 100 Prozent angegeben. Da das Symbol eine feste Breite und Höhe hat, wird der Stern auch immer entsprechend ausgegeben.

<svg width="100%" height="100%">
  <use xlink:href="sprite.svg#stern_blau" />
</svg>

svg-sprites_symbol2
Stern mit variabler Größe – passt sich dem Elternelement an

Beim zweiten definierten Symbol ist die Größe per „viewBox“ definiert. Das heißt, das Symbol wird auf die Breite und Höhe des SVG-Bereichs skaliert.

Browserunterstützung

Alle modernen Browser unterstützen die Elemente „<symbol>“ und „<use>“. Auch Microsofts neuer Browser Edge kommt damit klar. Nur der Internet Explorer hat seine Probleme. Er unterstützt zwar grundsätzlich die beiden Elemente, kann per „<use>“ allerdings keine externe SVG-Datei laden. Das heißt, das SVG-Sprite muss im HTML-Dokument eingebettet sein, damit es funktioniert. Per „<use>“ wird dann nur die ID übergeben.

Beispiel auf Codepen

(dpe)

Kategorien
Design HTML/CSS Webdesign

SVG-Filter: So wendest du sie auf HTML-Elemente an

Mit der Hilfe von CSS3 fügst du einem Element unter anderem Unschärfe, Schlagschatten, Helligkeit und Kontrast  hinzu. Insgesamt zehn solcher Filter stehen dir zur Verfügung. Auch das SVG-Format kennt Filtereffekte. Teils überschneiden sich die Möglichkeiten, so etwa bei der Unschärfe. Aber das SVG-Format kennt eine Reihe zusätzlicher Filter, die mit CSS3 allein nicht zu realisieren sind. Ohne großen Aufwand fügst du aber beliebige SVG-Filter einem HTML-Element hinzu.

SVG-Filter: So wendest du sie auf HTML-Elemente an

Welche SVG-Filter gibt es?

Während CSS3 also auf zehn verschiedene Filter kommt, bietet das SVG-Format 19 Filter an. Da gibt es zum Beispiel „<feConvolveMatrix>“, der Pixel eines Bildes mit benachbarten Bildpunkten vermischt. So entstehen Verwischeffekte, die der Bewegungsunschärfe in Photoshop ähneln. Mit „<feGaussianBlur>“ wendest du eine Gauß’sche Unschärfe an und „<feMorphology>“ sorgt dafür, dass die Pixel eines Bildes verdünnt oder verdickt werden.

svg-filter_original_verdickung
Originalbild und auf das Bild angewandter „<feMorphology>“-Filter

Mit dem Filter „<feColorMatrix>“ sind verschiedene Farbmanipulationen möglich, um beispielsweise Sättigung, Farbton und Helligkeit eines Bildes zu verändern.

Die beiden Filter „<feDiffuseLighting>“ und „<feSpecularLighting>“ erlauben es dir, Beleuchtungseffekte – für diffuses oder reflektiertes Licht – zu einem Bild hinzuzufügen. Dabei lassen sich mit „<feDistantLight>“, „<fePointLight>“ oder „<feSpotLight>“ unterschiedliche Lichtquellen definieren.

svg-filter_beleuchtung
Bild mit Beleuchtungsfilter

Es gibt noch eine Reihe anderer Filter, die teils unspektakulär sind, wie „<feOffset>“, welches ein Bild lediglich verschiebt, und teils sehr speziell, wie „<feTurbulence>“, welcher Turbulenzen und Fraktale erzeugt.

SVG-Filter erstellen und anwenden

Willst du SVG-Filter auf beliebige HTML-Elemente anwenden, muss per SVG nur der Filter selbst ausgezeichnet werden. Dies sollte innerhalb des „<defs>“-Abschnitts geschehen. Dieser ist für Elemente wie Muster, Verläufe oder Filter gedacht – also für Elemente, die selbst nicht sichtbar sind, sondern auf andere Elemente angewendet werden. Außerdem müssen Filter innerhalb des Elementes „<filter>“ platziert werden.

<svg>
  <defs>
    <filter id="bewegungsunschaerfe">
      <feConvolveMatrix order="20, 1" kernelMatrix="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1" />
    </filter>
  </defs>
</svg>

Im Beispiel wird der Filter „<feConvolveMatrix>“ ausgezeichnet. Über des Attribut „order“ wird angeben, wie viele benachbarte Pixel auf der X- und Y-Achse einbezogen werden sollen. Im Beispiel sollen nur Pixel auf der X-Achse vermischt werden, sodass eine Bewegungsunschärfe entsteht. Die per „order“ definierten Werte ergeben eine Matrix – im Beispiel 20 mal 1 Pixel. Per „kernelMatrix“ gibst du Werte für jeden Bildpunkt der Matrix an. Da die Matrix im Beispiel aus nur einer Zeile besteht, müssen 20 Werte für diese Zeile angegeben werden. Per Komma getrennt würden Werte für weitere Zeilen übergeben.

svg-filter_bewegungsunschaerfe
Bild mit Bewegungsunschärfe

Damit der Filter auf andere Elemente innerhalb des HTML-Dokumentes angewendet werden kann, braucht er eine ID. Anschließend übergibst du die ID des  SVG-Filter an die CSS3-Eigenschaft „filter()“.

img {
  filter: url(#bewegungsunschaerfe);
}

Im Beispiel wird der Filter auf alle „<img>“-Elemente angewendet. Zu beachten ist, dass die Eigenschaft „filter“ bei einigen Browsern nur mit entsprechendem Vendor-Prefix funktioniert.

Während moderne Browser wie Chrome und Firefox die Möglichkeit, SVG-Filter auf beliebige Elemente anzuwenden, unterstützen, funktioniert das Ganze im Internet Explorer und auch in Microsofts neuem Browser Edge (noch) nicht.

Filter kombinieren und auf Texte anwenden

Natürlich kannst du Filter miteinander kombinieren. Dazu zeichnest du innerhalb eines „<filter>“-Elementes einfach mehrere Filter aus.

svg-filter_bewegungsunschaerfe-farbton
Bild mit Bewegungsunschärfe und Farbtonänderung

<svg>
  <defs>
    <filter id="bewegungsunschaerfe_tonwert">
      <feConvolveMatrix order="20, 1" kernelMatrix="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1" />
      <feColorMatrix type="hueRotate" values="-90" />
    </filter>
  </defs>
</svg>

Im Beispiel werden die Filter „<feConvolveMatrix>“ mit „<feColorMatrix>“ kombiniert. Letzterer sorgt dafür, dass per „type“ eine Farbtonänderung („hueRotate“) von 90 Grad erzielt wird.

svg-filter_bewegungsunschaerfe_text
Text mit Bewegungsunschärfe

Wie anfangs erwähnt, funktionieren die Filter nicht nur bei Bildern, sondern bei allen HTML-Elementen. So lassen sich zum Beispiel interessante Texteffekte realisieren. Auf eine Überschrift angewendet, erhält diese dann etwa eine Bewegungsunschärfe.

Beispiele auf Codepen

(dpe)

Kategorien
Design Design-News Developer-News HTML/CSS Programmierung

CSS Custom Properties: So nutzt du Variablen in Chrome 49

Chrome unterstützt ab Version 49 CSS Variablen in der Form der CSS Custom Properties. Damit wird ein zentrales Element rationeller Programmierung ohne weitere Zusätze im Browser Wirklichkeit. Der Einsatz ist recht einfach.

CSS Custom Properties: So nutzt du Variablen in Chrome 49

Variablen: zentrales Element strukturierter Programmierung

Variablen sind aus der professionellen Programmierung nicht weg zu denken. Man stelle sich vor, man müsste die Werte, die als Variablen an zentraler Stelle verwaltet werden, tatsächlich an jedem Verwendungsort neu definieren. Selbst mit professionellen Entwicklungswerkzeugen würde das Suchen und Ersetzen im Falle von Änderungsbedarfen reichlich aufwändig werden. Mit CSS war jedoch genau dieses Vorgehen bislang unumgänglich.

Erst mit Chrome 49 unterstützt Googles Browser Variablen in der Form der CSS Custom Properties auch für die Erstellung von Stylesheets. Und das ist erwartungsgemäß sehr praktisch. Man wird sich nicht mehr davon trennen wollen, wenn man sich erstmal dran gewöhnt hat.

CSS Custom Properties: Das (und mehr) kannst du mit CSS Variablen machen

CSS Custom Properties sind praktisch für viele Zwecke. Auf Anhieb verständlich, und deshalb verwende ich das Beispiel hier auch, ist die seitenweite Änderung von Farbwerten. CSS an sich ist ja schon eine Erleichterung in dieser Hinsicht. Wenn ich mich an meine ersten Designs in den Neunzigern zurück erinnere, wird mir jetzt noch flau. Ohne CSS setzte ich Farben an jedem HTML-Element neu. Wenn der Kunde das Farbset änderte, war ich teils tagelang in Aktion, um händisch die ganzen Werte zu suchen, zu finden und zu ersetzen.

Aber auch mit CSS kann eine Änderung komplexerer Farbschemen bei vielen Definitionen schnell unüberschaubar werden. Hier helfen CSS Variablen massiv. Für den visuellen Lesertypen binde ich einfach an dieser Stelle mal das GIF ein, das Google selber im Chromium-Blog zur Ankündigung der neuen Features verwendet hat:

css-custom-properties-3

Ein Beispielcode kann etwa so aussehen:

:root {
  --main-color: #06c;
}

#foo h1 {
  color: var(--main-color);
}

Erfahrene Entwickler erkennen sofort das Prinzip. --main-color ist hier die frei definierte Variable, die Custom Property. Custom Properties beginnen stets mit zwei Bindestrichen.

Neben fixen Werten können auch Berechnungen und Bedingungen als benutzerdefinierte Eigenschaften angelegt werden. So kannst du beispielsweise in responsiven Designs auf Änderungen der Bildschirmauflösung reagieren.

Ich bin begeistert. Chrome 49 hat noch mehr neues zu bieten. Die CSS Variablen sind jedoch klar mein Favorit.

Kategorien
Design HTML/CSS Icons & Fonts Webdesign

Die schönsten Layer-Fonts und wie man sie im Webdesign verwendet

Dass eine Schrift auch mal mehrfarbig gesetzt sein kann, ist keine Erfindung der digitalen Typografie. Bereits im 19. Jahrhundert gab es Schriften, die in zwei oder mehr Schnitte aufgeteilt waren, sodass man sie mehrfarbig übereinander drucken konnte. Mit dem OpenType-Format gibt es solche sogenannten Layer-Fonts auch für den digitalen Einsatz. Gerade für 3D- und Schatteneffekte sind mittlerweile zahlreiche Schriften auf dem Markt, welche eine mehrfarbige Darstellung ermöglichen. Und dank der Webschriften kannst du solche mehrfarbigen Texte sogar im Webdesign verwenden.

Layer-Fonts im Webdesign

Was genau sind Layer-Fonts?

Layer-Fonts sind spezielle Schriftfamilien, bei denen einzelne Schnitte so gestaltet sind, dass sie übereinander gelegt werden können. Häufig sind es dekorative Elemente wie Schlagschatten, Konturen oder dreidimensional gestaltete Seiten, die auf diese Weise kombiniert werden. Wenn du jeder dieser Schriftebenen eine eigene Farbe zuweist, ergeben sich auffällige Überschriften und plakative Texte.

In Zeichen- und Satzprogrammen wie Illustrator und InDesign gibt es einfache Möglichkeiten, solche Layer-Fonts einzusetzen. Wie du mit CSS3 Layer-Fonts im Webdesign verwendest, erkläre ich dir später. Zunächst gibt es einige der schönsten und interessantesten mehrfarbigen Schriften, die alle als Webfont erhältlich sind.

Dreidimensionale Schriften

Gerade bei Schriften mit dreidimensionaler Optik bietet sich eine mehrfarbige Darstellung an. Die „Core Circus“ gehört daher sicher zu den interessantesten Layer-Fonts. Es gibt 20 verschiedene Schnitte, die sich unterschiedlich miteinander kombinieren lassen. So gibt es solche, die Dreidimensionalität simulieren. Diese kombinierst du zum Beispiel mit einem der zahlreichen flächigen Schnitte, welcher dann etwa die Vorderseite der 3D-Schrift darstellen kann. Neben Linien und Schraffuren gibt es ebenso gepunktete Schnitte. Zu guter Letzt sind da noch Schatten, die du hinzufügen kannst.

layer-fonts_core-circus

Noch einige Schnitte mehr – insgesamt 38 – hat die „Mrs Onion“, die prinzipiell ähnlich aufgebaut ist, wie die „Core Circus“. Hierbei hast du allerdings die Möglichkeit, die einzelnen Seiten der dreidimensionalen Schrift unterschiedlich farbig darzustellen. So gibt es separate Schnitte für die unteren und die rechten Seiten. Zusätzlich sind für die Vorderseite schraffierte und gepunktete Schnitte vorhanden.

Bis zu sechs Schnitte kombinierst du problemlos und erhältst dadurch sehr detailreiche und mehrfarbige Texte, die sich ideal für großzügig gestaltete Überschriften eignen.

layer-fonts_mrs-onion

Eine etwas andere 3D-Optik bringt die „Epilepsja“ mit sich. Die Schrift spielt mit der Illusion der Dreidimensionalität. So entsteht hier und da zwar der Eindruck eines 3D-Effektes. An anderer Stelle erscheint die Schrift jedoch wieder zweidimensional.

Es gibt drei Schnitte, welche Kontur, Füllung und Hintergrund darstellen. Die „Epilepsja“ fällt in jedem Fall auf und sorgt sicher hier und da für etwas optische Verwirrung.

layer-fonts_epilepsja

Historische Schriften

Neben interessanten 3D-Effekten bieten sich Layer-Fonts immer wieder an, um historische Schriften nachzuempfinden. Gerade in Zeiten vor der digitalen Typografie wurden viele typografische Effekte mit großem manuellen Aufwand realisiert. Dank Layer-Fonts gelingen einem solche Effekte nun im Handumdrehen.

So gibt es mit der „Brim Narrow“ eine Schrift, welche sich an klassischen Schriften aus dem 18. Jahrhundert orientiert. Sie erinnert an die detailreichen und filigran gezeichneten Schriften, wie man sie von Geldscheinen und anderen wertigen Dokumenten kennt.

layer-fonts_brim-narrow

An die Schriften des Art Déko erinnert die „Core Deco“. Die Schrift weist die großen Rundungen und die teils strenge geometrische Ausrichtung aus, wie sie für die Typografie dieses Stils typisch war. Schraffuren, Schatten und 3D-Effekte sind hier als eigene Schnitte vorhanden, um diese farblich abzusetzen.

layer-fonts_core-deco

Dass man auch gebrochene Schriften durchaus zeitgemäß interpretieren und einsetzen kann, zeigt die „Whisky“. Es gibt unterschiedlich fette Flächenschnitte, die du mit unterschiedlich starken Konturenschnitten kombinierst. So ergeben sich für eine gebrochene Schrift ungewöhnliche Effekte, mit denen du sehr schön die klassische Wahrnehmung gebrochener Schriften auf den Kopf stellen kannst.

layer-fonts_whisky

Handschriften

Von Hand geschriebene oder gezeichnete Texte sind immer wieder sehr beliebt – sowohl für verspielte als auch für elegant anmutende Typografie. Hier habe ich einige Layer-Fonts für dich, die mit besonderen Effekten glänzen.

Die „Festivo Letters“ simuliert eine mit dem Stift gezeichnete Schrift. Buchstaben sind teils ausschraffiert, teils mit Punkten umrandet und ausgemalt. Dank der Kombination verschiedener Schnitte lässt sich Farbe mit einbringen, was den verspielten Charakter der Schrift unterstützt.

layer-fonts_festivo-letters

Auch „Le Havre Hand“ simuliert eine per Hand gezeichnete Schrift – hier sogar mit 3D-Optik. Verschieden starke Schraffuren werden mit Konturenzeichnungen kombiniert und ergeben trotz der massiven Buchstaben eine verspielte Optik.

layer-fonts_le-havre-hand

Wer es gerne etwas filigraner mag, findet möglicherweise Gefallen an der „Weingut“. Die elegante Schreibschrift ist mit floralen Elementen verziert und wirkt recht edel und dennoch verspielt. Für den besonderen Look gibt es einen speziellen Dekoschnitt, mit dem du einzelne florale Elemente in anderer Farbe hinzufügst.

layer-fonts_weingut

Layer-Fonts im Webdesign verwenden

Willst du Layer-Fonts auf der eigenen Website einsetzen, müssen die entsprechenden Schnitte der Schrift erst einmal als Webfont her. Jetzt hast du natürlich die Möglichkeit, mehrere Elemente mit demselben Text und den verschiedenen Layer-Schnitten auszuzeichnen und übereinander zu legen. Semantisch ist von dieser Variante abzuraten, da derselbe Texte dann mehrfach vorhanden ist. Daher ist die Kombination der Pseudoelemente „::before“ und „::after“ mit einem Data-Attribut vorzuziehen.

Dazu wird der Text, der im Layer-Font gesetzt wird, nur mit einem Element ausgezeichnet. Dieses Element bekommt ein HTML5-Data-Attribut, welches den Text noch einmal enthält.

<p data-text="Dr. Web Magazin">Dr. Web Magazin</p>

Der Wert im Attribut „data-text“ spielt semantisch keine Rolle. Er wird nur gebraucht, weil du per CSS Zugriff auf den Inhalt dieses Attributes hast. Und alles weitere erfolgt nun ebenfalls per CSS. Dem „<p>“-Element weist du per CSS den Schnitt zu, der im Hintergrund dargestellt werden soll.

p {
  font-family: "LayerFont 1";
  color: blue;
}

Mit dem Pseudoelement „::after“ sorgst du nun dafür, dass dieses den Inhalt des Data-Attributes ausgibt. Es wird dabei absolut platziert, so dass es über dem eigentlichen „<p>“-Element liegt. Außerdem weist du „::after“ die Schrift für den Vordergrund und eine andere Farbe hinzu.

p::after {
  font-family: "LayerFont 2";
  color: red;
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
}

Willst du einen dritten Schnitt ergänzen, setzt du zusätzlich noch „::before“ ein und verfährst ähnlich wie bei „::after“. Fertig ist die beeindruckende Web-Schrift!

(dpe)

Kategorien
HTML/CSS Webdesign

Firefox Developer Edition: Der Browser für Entwickler

Mittlerweile stellt jeder Browser Entwicklerwerkzeuge zur Verfügung, mit denen du Webprojekte ausgiebig auf Gestaltung und Funktionalität prüfen kannst. Standardmäßig gehören das Debugging von JavaScript und das Inspizieren des Quelltextes dazu. Mozilla hat mit dem Firefox Developer Edition einen eigenen Browser entwickelt, der sich ganz besonders an Webentwickler richtet und ihnen mit speziellen Tools hilft, eine Website ausgiebig zu prüfen. Dazu gehört nun auch das ausgiebige Testen von CSS3-Animationen und -Transitions.

Firefox Developer Edition: Der Browser für Entwickler

Schlankes Design, schneller Zugriff auf Entwicklerwerkzeuge

Firefox Developer Edition basiert auf dem Aurora-Zweig des beliebten Browsers. Hier sind neue Funktionen, die im normalen Firefox noch nicht zur Verfügung stehen, bereits implementiert und können im Vorfeld getestet werden. Das zunächst auffälligste an der Developer Edition ist das schlanke Design der Benutzeroberfläche. Tab- und Adressleiste benötigen weniger Platz als im normalen Firefox. Außerdem wird der Browser standardmäßig mit einem dunklen Theme ausgeliefert. Wer es grundsätzlich lieber hell mag, stellt das Theme auf die gängige Farbgebung um, wie man sie auch vom normalen Firefox gewohnt ist.

firefox-developer-edition
Oberfläche vom Firefox Developer Edition

Da sich Firefox Developer Edition an Entwickler wendet, ist der Zugriff auf die verschiedenen Entwicklerwerkzeuge deutlich prominenter untergebracht. In der Adresszeile findest du einen eigenen Menüpunkt, der dir Zugriff auf alle Tools verschafft.

Entwicklerwerkzeuge unterstützen jetzt Animationen

Dank CSS3 sind Animationen zu einem wichtigen Punkt zeitgemäßer Webentwicklung geworden. Der neue Inspektor der Entwicklerwerkzeuge unterstützt diese nun auch. Dazu wurde ein eigener Reiter eingeführt, der Animationen auf einer Zeitleiste visualisiert. Die einzelnen animierten Elemente werden dabei als Ebenen untereinander dargestellt. Ähnliche Darstellungen kennt man aus Videosschnitt- und Animationsprogrammen.

firefox-developer-edition_animationen
Animationswerkzeug mit Zeitleiste und Ebenen

Bei jedem Element werden alle CSS-Eigenschaften, die per Animation verändert werden, aufgelistet. Über Keyframes wird auf der Zeitleiste dargestellt, wo Veränderungen stattfinden.

Über Schaltflächen spielst du eine Animation ab oder spulst zurück. Gerade bei schnell ablaufenden Animationen ist es oft wichtig, diese im Detail auf Korrektheit überprüfen zu können. Hier hast du die Möglichkeit, eine Animation in geringerer Geschwindigkeit abspielen zu lassen – halb so schnell, ein Viertel oder ein Zehntel so schnell. Bei besonders langen Animationen ist es oft hilfreich, diese schneller ablaufen zu lassen. Auch das ist möglich – bis zu zehnfacher Geschwindigkeit.

Easingeffekte testen und ändern

Dank der CSS3-Easingeffekte werden Animationen auf Wunsch nicht nur linear, sondern auch mit unterschiedlich definierten Beschleunigungen und Abbremsungen ausgeführt. Innerhalb des neuen Inspektors hast du nun die Möglichkeit, den Easingeffekt einer Animation oder einer Transition direkt zu ändern.

firefox-developer-edition_easing
Einfache Auswahl eines Easingeffektes

Dabei wird neben dem angegebenen Easing-Wert ein kleines Icon angezeigt, über welches du den Easingeffekt einfach änderst. Du erhältst eine Übersicht aller zur Verfügung stehenden Easings samt Diagramm, welches die Animationskurve beschreibt. Eine kleine Beispielanimation zeigt dir zudem das Easing in Aktion. Neben den Standardeffekten wie „ease“, „ease-in“ und „ease-out“ gibt es es einige individuelle Abläufe, die über eigene Bézierkurven definiert sind. Über die Anfasser im Diagramm änderst du die Bézierkurve selbst und erstellst so dein eigenes Easing, welches über „cubic-bezier()“ im CSS-Quelltext ausgezeichnet wird.

Dank dieser neuen Funktion testet du im Handumdrehen unterschiedliche Easings für deine Animationen und Transitions, ohne den Browser dafür verlassen zu müssen.

CSS3-Filter anwenden und testen

Ganz ähnlich wie das Anwenden diverser Easingeffekte, änderst du CSS3-Filter eines Elementes oder fügst neue Filter hinzu. Wird auf einem Element ein Filter angewendet, zeigt dir der Inspektor ein kleines Icon daneben an. Über dieses Icon kannst du den angewendeten Filter ändern oder neue Filter hinzufügen.

firefox-developer-edition_filter
Filter ändern und hinzufügen

Alle angewendeten Filter werden dir als Liste mit den definierten Werten angezeigt. Du kannst Werte ändern, Filter löschen oder aus einer Liste der möglichen Filter einen weiteren hinzufügen.

Da gerade Easingeffekte und Filter aufgrund der vielfältigen Möglichkeiten im Browser getestet werden müssen, bietet der Firefox hier eine sehr schöne Möglichkeit, CSS-Regeln für solche Effekte sehr einfach im Browser direkt darstellen zu können. Gerade jene Entwickler, die HTML- und CSS-Quelltext händisch auszeichnen, werden mit diesen Funktionen einiges an Arbeit sparen können.

Farben über Pipette auswählen

Das Editieren der Farbwerte erfolgt über eine spezielle Oberfläche, über die du die Möglichkeit hast, eine neue Farbe direkt aus einer Farbpalette auszuwählen. Willst du eine andere Farbe aus dem Dokument auswählen, nutzt du einfach die Pipette. Dabei wird die mit der Pipette aufgenommene Farbe der ausgewählten CSS-Eigenschaft als neuer Wert zugewiesen.

firefox-developer-edition_farbe
Farben aus Palette oder per Pipette auswählen

Über einen Schieberegler fügst du einer deckenden Farbe auch schnell einen Alphakanal hinzu. So wird aus einer „rgb()“-Angabe automatisch eine „rgba()“-Angabe mit entsprechendem Alphawert.

CSS-Regeln und HTML im Browser verändern

Was für Animationen, Filter und Farben funktioniert, klappt auch mit allen anderen CSS-Regeln einer Seite. Du kannst jede CSS-Regel direkt im Browser auslesen und verändern. Während dir für Animationen, Transitions, Filter und Farben spezielle grafische Oberflächen zur Verfügung stehen, welche dir beim Anpassen helfen, gibt es für alle anderen Regeln nur die Möglichkeit, diese direkt im Inspektor per Tastatureingabe zu verändern.

Du wählst dazu eine Regel aus und überschreibst sie mit neuen Werten. Außerdem kannst du jede Regel einfach deaktivieren, indem du das Häkchen, das vor jeder Regel angezeigt wird, entfernst.

Auch den HTML-Quelltext bearbeitest du direkt im Browser. Dabei ist es möglich, einzelne Attribute zu bearbeiten oder gleich ein komplettes Element. Alle so getätigten Änderungen sind logischerweise nur für die Dauer einer Sitzung verfügbar. Beim Neuladen einer Seite gehen sie wieder verloren.

Speicherabbild erfassen

Während die bis hier hin genannten Werkzeuge auch im normalen Firefox verfügbar sind, gibt es einiges, was derzeit nur in der Developer Edition bereitgestellt wird. Dazu gehört das neue Speicherwerkzeug, welches über die Einstellungen zunächst einmal aktiviert werden muss. Anschließend kann der Browser für eine Seite ein Speicherabbild erstellen.

firefox-developer-edition_speicher
Darstellung des Speicherabbildes

Nach dem Erstellen des Abbildes wird dir aufgelistet, welche Teile der Seite wie viel Platz belegen. So erkennst du sehr gut, welche Objekte besonders viel Speicher benötigen. Ab Firefox 44 wird das Speicherwerkzeug auch dort zur Verfügung stehen.

Strecken messen

Ebenfalls neu und derzeit ausschließlich in der Developer Edition verfügbar, ist das Messen von Strecken im Browser. Auch diese Funktion muss über die Einstellungen zunächst aktiviert werden. Anschließend steht dir das Messwerkzeug über ein Icon in der Menüleiste der Entwicklerwerkzeuge zur Verfügung.

firefox-developer-edition_speicher firefox-developer-edition_messen
Messen im Browser

Ist das Messwerkzeug ausgewählt, ziehst du einfach ein beliebiges Rechteck im Browserfenster. Anschließend werden die Breite, Höhe sowie Diagonale des Rechteckes angezeigt. Hilfslinien helfen zudem dabei, die Lage des Rechteckes mit anderen Elementen auf der Horizontalen und Vertikalen zu vergleichen.

Mit Valence auch andere Browser testen

Soll eine Website in möglichst vielen Browsern einwandfrei funktionieren, muss sie dort jeweils geprüft werden. Dank Valence ist es möglich, Seiten in anderen Browsern und auf mobilen Geräten zu testen. Während du eine Seite beispielsweise im mobilen Firefox auf deinem Androidgerät aufrufst, kannst du diese im Firefox Developer Edtion prüfen.

Gerade das Prüfen auf mobilen Geräten stellt immer eine besondere Herausforderung dar, weil es auf diesen Geräten beziehungsweise in den mobilen Browsern keine Entwicklerwerkzeuge gibt. Valence läuft über WebIDE, welches dir in der Developer Edition zur Verfügung steht. WebIDE ist unter anderem eine Entwicklungsumgebung für Firefox-OS-Apps.

firefox-developer-edition_valence
WebIDE zum Prüfen von Seiten, die in anderen Browsern geladen sind

Du kannst aber nicht nur dann auf mobilen Geräten testen, wenn dort Firefox läuft. Auch Chrome und Safari werden unterstützt. Auf Androidgeräten muss zum Beispiel das USB-Debugging aktiviert sein, damit der Browser im WebIDE angezeigt wird. Anschließend überträgt WebIDE auf dem Mobilgerät geladene Seiten an den Firefox Developer Edition, sodass dort das ausgiebige Testen erfolgen kann. Dort stehen dir dann beispielsweise Inspektor, Konsole und Debugger zur Verfügung.

DevTools Challenger zum Ausprobieren der neuen Möglichkeiten

Mit dem DevTools Challenger hat Firefox eine eigene Website ins Leben gerufen, mit denen du die neuen Möglichkeiten der Entwicklerwerkzeuge testen kannst. Dazu gibt dir die ansprechend gestaltete Seite in kurzen Abschnitten einen Einblick über die neuen Funktionen. Kleine Videos erklären, wie du welches Werkzeug aufrufst und verwendest.

devtools-challenger
Website: DevTools Challenger

So lernst du spielerisch, wie du Animationen steuerst, Filter veränderst und hinzufügst, sowie beliebige CSS-Regeln mit neuen Werten überschreibst.

Fazit

Die neuen Entwicklerwerkzeuge im Firefox Developer Edition stellen für Webentwickler eine große Arbeitserleichterung dar. Gerade beim Ausprobieren komplexer Animationen und Effekte ersparst du dir den ständigen Wechsel zwischen Browser und HTML-Editor, da du alles direkt im Browser ausprobieren und ändern kannst.

Außerdem stehen dir in der Developer Edition viele neue Funktionen zur Verfügung, die im „normalen“ Firefox noch nicht bereitstehen. So erfährst du bereits im Vorfeld, was zukünftig im Firefox möglich sein wird und hinkst der Entwicklung nicht hinterher. Wie bei Firefox üblich, ist auch die Developer Edition kostenfrei.

(dpe)

Kategorien
Design HTML/CSS Responsive Design Webdesign

Wix 2016: Neuer Editor, Musik-Store und mehr

Mit Wix ist seit Jahren ein Homepage-Baukasten auf dem Markt, der das Erstellen ansprechender und zeitgemäßer Websites vereinfachen und professionalisieren will. Zahlreiche Vorlagen und umfangreiche Bearbeitungsmöglichkeiten zeichnen Wix aus. Da sich Trends und Techniken gerade bei Webdesign und -entwicklung schnell ändern, hat Wix soeben einen rundum erneuerten Editor mit neuen Features herausgebracht. So unterstützt Wix nun auch den Trend, Videos als Hintergrund einzusetzen, sowie das nach wie vor sehr beliebte Parallax-Scrolling.

Wix 2016: Neuer Editor, Musik-Store und mehr

Vorlage für Branche auswählen und loslegen

Hast du dich kostenlos bei Wix angemeldet, wählst du zunächst aus den zahlreichen Vorlagen eine aus. Diese sind in Kategorien sortiert und erlauben es, eine Vorlage für eine entsprechende Branche auszuwählen. Wer lieber ohne vorgegebene Gestaltung loslegen möchte, greift auf eine leere Vorlage zurück. Hierbei wird lediglich ein Grundlayout vorgegeben, welches die Anordnung der einzelnen Elemente grob festlegt.

wix_templates
Template-Galerie

Während einige Vorlagen kostenlos sind, sind andere nur mit einem Abonnement erhältlich. Die Vorlagen sind alle per HTML5 ausgezeichnet und responsiv gestaltet. Auf der Vorschauseite findest du sowohl eine Desktop- als auch eine Mobilansicht für die Vorlagen. Hast du dich für eine entschieden, wechselst du einfach in den Editor, um eine Website auf Grundlage der Vorlage zu bearbeiten.

Editor mit übersichtlichem Gestaltungsraster

Der Wix-Editor besticht mit seiner übersichtlichen Oberfläche. Eine Website ist bei Wix üblicherweise in Kopfzeile, Streifen und Fußzeile eingeteilt. Während in der Kopfzeile unter anderem die Navigation untergebracht ist, ist der sogenannte Streifen der Bereich, der für die Inhalte vorgesehen ist. Die einzelnen Bereiche werden mit Rasterlinien voneinander getrennt.

wix_editor
Übersichtlich gestalteter Editor

Die Elemente einer Seite kannst du nach Belieben verschieben und skalieren. Die Bearbeitungsleiste hilft dir, Elemente automatisch an den Rasterlinien auszurichten und in den Hinter- beziehungsweise Vordergrund zu verschieben. Viele der Funktionen wirst du vermutlich aus anderen Anwendungen kennen.

Außerdem gibt es für jedes ausgewählte Element ein Bearbeitungsmenü. Für Texte stehen umfangreiche Möglichkeiten, Schrift und Text zu formatieren bereit. Du wählst aus zahlreichen Webschriften eine aus, definierst Schriftgröße und -farbe frei und bestimmst die Ausrichtung deines Textes. Außerdem kannst du einem Text auch verschiedene Schlagschatten hinzufügen.

wix_text
Integrierte Textverarbeitung

Für Bilder gibt es ebenfalls eine Vielzahl an Bearbeitungsmöglichkeiten. Du kannst Bilder zuschneiden, ausrichten und spiegeln. Dank vorgegebener Effekte bringst du ein Bild in unterschiedliche Farbstimmungen. Auch klassische Korrekturen, um Helligkeit, Kontrast und Sättigung einzustellen, sind vorhanden.

wix_bild
Integrierte Bildbearbeitung

Insgesamt sind die Möglichkeiten, Texte und Bilder zu bearbeiten, sehr umfangreich und einfach anzuwenden. Wer sich etwas mit Textverarbeitung und Bildbearbeitung auskennt, wird sich problemlos zurechtfinden.

Videos und Parallaxeffekt für Seitenhintergrund

Ein Trend der letzten Zeit ist es, Websites mit formatfüllenden Hintergrundbildern und auch -videos zu versehen. Der neue Wix-Editor unterstützt diesen Trend. Aus einer Vielzahl an hochwertigen Bildern und Videos, die Wix zur Verfügung stellt, wählst du einfach eines aus. Bilder und Videos, die du als Hintergrund verwendest, werden automatisch so skaliert, dass sie immer die gesamte Fläche des Browserfensters einnehmen.

Zu den Videos gehören sowohl gefilmte Aufnahmen als auch per Computer gerenderte Effekte. Dazu zählen stimmungsvolle Naturaufnahmen, Menschen während der Freizeit und bei der Arbeit sowie animierte dreidimensionale Texturen.  Die Länge der Videos variiert von einigen wenigen bis zu 30 Sekunden. Zusätzlich kannst du ein Video noch mit einem dezenten Muster überlagern.

wix_video
Video als Hintergrund einbinden

Ob ein Video in einer Schleife abgespielt werden soll, ist ebenso einstellbar, wie die Abspielgeschwindigkeit. Gerade für Hintergrundvideos bietet sich oft eine reduzierte Geschwindigkeit an. Die auf Wix bereitgestellten Videos eignen sich alle zum Abspielen in einer Schleife. Sie sind so geschnitten, dass es bei der Wiederholung nicht zu scharfen, sichtbaren Bildwechseln kommt.

Entscheidest du dich für ein formatfüllendes Bild als Hintergrund, kannst du hier zusätzlich einen Parallaxeffekt hinzufügen. Hierbei wird das Hintergrundbild während des Scrollens langsamer bewegt als der Rest der Seite. Es entsteht der Eindruck, Hinter- und Vordergrund seien räumlich getrennt. Sind Vorder- oder Hintergrund dazu noch unscharf, entsteht ein 3D-Effekt, der beim Parallax-Scrolling häufig eingesetzt wird.

wix_parallax
Parallaxeffekt bei Hintergrundbildern möglich

Du kannst natürlich auch deine eigenen Videos hochladen, solange diese nicht größer als 50 Megabyte sind. Da mobiles Datenvolumen meist endlich ist, sorgt Wix dafür, dass auf Mobilgeräten Hintergrundvideos nicht abgespielt werden.

Grenzenlos Inhalte hinzufügen: Texte, Bilder, Videos

Gutes Aussehen ist auch bei einer Website nicht alles. Entscheidend sind natürlich die Inhalte. Auch hier hat Wix einiges zu bieten. Texte und Bilder gehören hier nur zu einigen der zahlreichen Möglichkeiten. Der Editor stellt dir bei Texten eine Vielzahl an exemplarischen Formatierungen bereit, die du nach Belieben anpassen kannst.

Bei Bildern lädst du entweder selbst welche hoch oder wählst aus der großen Sammlung von Wix aus. Neben Fotos stehen auch Cliparts zur Verfügung. Wer weder auf seinem eigenen Rechner noch bei Wix fündig wird, kann auch direkt aus dem Editor heraus beim Stockanbieter Bigstock schauen und Fotos für seine Website lizenzieren. Gewährst du Wix Zugriff auf dein Facebook- oder Instagram-Profil, bindest du ganz bequem die dort hochgeladenen Fotos in deine Website ein.

wix_inhalte
Zahlreiche Inhaltstypen verfügbar

Neben einfachen Bildern lassen sich umfangreiche Galerien erstellen. Per Klick wird das ausgewählte Bild dann als Layer in vergrößerter Darstellung über den Inhalt der Seite gelegt.

Zur Einbindung von Videos unterstützt Wix die beiden großen Videoplattformen YouTube und Vimeo. Du gibst einfach die Adresse des jeweiligen Videos ein und hast je nach Plattform noch unterschiedliche Layoutmöglichkeiten.

Neben Texten, Bildern und Videos stehen dir eine Vielzahl weiterer Inhalte zur Verfügung. Du kannst Formulare, Listen, sowie Menüs anlegen. Auch Verlinkungen zu sozialen Netzwerken fügst du spielend einfach in deine Website ein.

Selbst einen eigenen Shop, sowie ein eigenes Blog legst du dank Wix im Handumdrehen an. Wie in anderen Blogsystemen erstellt du Beiträge, kategorisierst sie, bereitest sie zur Veröffentlichung vor und lässt sie kommentieren.

Musik einbinden und verkaufen dank Wix Music

Ebenfalls neu im neuen Editor ist Wix Music. Hiermit lädst du deine eigene Musik hoch und bindest diese über einen Player auf deiner Website ein. Wer als Musiker seine Musik lieber selbst vertreiben möchte, statt über die großen Musikplattformen, erhält mit Wix Music alles, was er braucht.

Zum Trend zurück zu mehr Sound hatten wir hier bei Dr. Web erst kürzlich geschrieben.

wix_music1
Alben anlegen und Musik hochladen

Du erstellst ein Album samt Cover und lädst deine Musikdateien hoch. Anschließend kannst du deine Musik über einen Player direkt in deine Website einbinden. Natürlich stellt dir Wix auch gleich einen Musikshop zur Verfügung, über den der Vertreib deiner Musik läuft. Du legst den Kaufpreis fest oder entscheidest dich dafür, deine Musik kostenlos anzubieten.

Wix Music ist als Basispaket kostenlos. Willst du den Kauf jedoch über PayPal abwickeln, benötigst du das Premiumpaket für etwa 10 US-Dollar im Monat. Dafür nimmt Wix keinerlei Provision für die Einnahmen, die du mit deinen Verkäufen erzielst.

wix_music2
Player einbinden und einrichten

Über eine detaillierte Statistik wirst du zudem noch über angehörte und heruntergeladene, beziehungsweise gekaufte Musik auf dem Laufenden gehalten.

Eigene Domain und Premiumpakete

Ist deine Website soweit fertig, ist es Zeit für die Veröffentlichung. Standardmäßig wird sie über eine Subdomain von Wix verfügbar gemacht. Du kannst sie aber auch mit einer eigenen Domain verknüpfen oder direkt bei Wix eine Domain registrieren.

Um eine eigene Domain nutzen zu können, benötigst du eines der Premiumpakete. Diese sind ab etwa vier Euro im Monat erhältlich. Insgesamt gibt es vier verschiedene Premiumpakete. So variieren Bandbreite und zur Verfügung stehender Speicherplatz und je nach Paket stehen dir weitere Funktionen wie der Shop zur Verfügung.

Fazit

Wix gehört mit seinem zahlreichen Features, der großen Auswahl an anspruchsvollen Vorlagen und der einfach zu bedienenden Oberfläche zu den besten Website-Buildern, die es derzeit gibt. Durch die Unterstützung zeitgemäßer Techniken und Trends ist Wix auch für den professionellen Einsatz durchaus geeignet.

Mit Wix erstellst du sehr individuelle Websites und bist äußerst flexibel, was die Gestaltung und die Inhalte betrifft. Auch wer sich nicht mit Webentwicklung auskennt, erstellt mit Wix ansprechende und zeitgemäße Webprojekte.

Musiker haben einen besonders triftigen Grund, sich Wix näher anzusehen.

(dpe)