Kategorien
HTML/CSS

CSS3 für Designprofis: Vier Eigenschaften, die du kennen und nutzen solltest

Mit der Einführung von CSS3 haben sich die Gestaltungsmöglichkeiten für Websites sehr verändert. Vor allem Animationen und Transparenzen werden seitdem häufig eingesetzt. Doch es gibt auch eine Reihe von Eigenschaften, die nur selten Verwendung finden. Dabei ist mangelnde Browserunterstützung meist kein Grund mehr, auf diese Möglichkeiten zu verzichten. Vier solcher zu Unrecht vernachlässigter CSS3-Eigenschaften solltet ihr bei eurem nächsten Projekt daher unbedingt mal ausprobieren.

CSS3-Tipp 1: Individuelle Rahmen mit „border-image“

Die individuelle Gestaltung von Rahmen war in den Zeiten vor CSS3 faktisch gar nicht möglich. Zwar gab es eine Auswahl vordefinierter Rahmen – zum Beispiel einfache, doppelte und gepunktete –, aber sehr viel mehr war nicht machbar.

CSS3 für Designprofis: Vier Eigenschaften, die du kennen und nutzen solltest
Rahmengrafik

Mit der CSS3-Eigenschaft „border-image“ hingegen lassen sich Rahmen ganz individuell über eine Grafik gestalten. Dazu wird die Grafik in neun Bereiche eingeteilt. Die acht äußeren Bereiche stellen dabei den Rahmen beziehungsweise die Rahmenecken dar.

p {
  border: 30px solid transparent;
  border-image: url("rahmen.png") 30 round;
}

Das Beispiel zeigt, wie ein Rahmen definiert wird. Zunächst wird per “url()” die Webadresse der Grafik angegeben. Der zweite Wert definiert, wie die Grafik in ihre neun Bestandteile zerlegt werden soll. Im Normalfall sind alle neun Flächen gleich groß (also eine Drittelteilung). Du kannst aber auch andere absolute Werte in Pixel (ohne Angabe einer Einheit) oder prozentuale Werte (dann mit Prozentzeichen) angeben.

Der letzte Wert gibt an, ob die Linien einfach nur wiederholt (repeat“), wiederholt und dabei gerundet („round“), oder ob sie nicht wiederholt und dafür einfach auf die gesamte Breite beziehungsweise Höhe gezogen werden sollen („stretch“).

CSS3 für Designprofis: Vier Eigenschaften, die du kennen und nutzen solltest
Rahmen gerundet, einfach wiederholt und langgezogen

Die Breite des Rahmens wird nach wie vor per „border“ beziehungsweise „border-width“ definiert. Um den Standardrahmen zu verbergen, solltest du die Rahmenfarbe wie im Beispiel auf „transparent“ setzen.

„border-image“ wird von allen gängigen Browsern wie dem Internet Explorer, Chrome, Firefox und Safari unterstützt.

CSS3-Tipp 2: Nummerierung mit „counter-reset“ und „counter-increment“

Nummerierte Listen mit dem „<ol>“-Element sind seit jeher kein Problem. Schwieriger wird es jedoch, wenn man jenseits dieses Elementes zum Beispiel Überschriften innerhalb eines Dokumentes automatisch nummerieren möchte. Hier kommen die verschiedenen „counter“-Eigenschaften zum Einsatz.

CSS3 für Designprofis: Vier Eigenschaften, die du kennen und nutzen solltest
Nummerierte Überschrift

Zunächst definierst du einen Counter für dein Dokument, indem du der Eigenschaft „counter-reset“ einen beliebigen Namen vergibst. Diese Eigenschaft setzt den definierten Counter also wieder auf Anfang. Du kannst beliebig viele unabhängige Counter definieren.

body {
  counter-reset: kapitel;
}

Anschließend wählst du ein Element, auf welches du den Counter anwenden möchtest und weist ihm die Eigenschaft „counter-increment“ mit dem Counternamen zu. Über die Funktion „counter()“ kannst du anschließend per „::before“ oder „::after“ die Nummerierung ausgeben lassen.

h2::before {
  counter-increment: kapitel;
  content: "Kapitel " counter(kapitel) ": ";
}

„counter-reset“ und „counter-increment“ werden von allen gängigen Browsern unterstützt.

CSS3-Tipp 3: Bilder einpassen mit „object-fit“

Statische Webdesigns findet man immer seltener. Zunehmend sind Layouts responsiv oder fluid, sodass sich Elemente immer dem zur Verfügung stehenden Platz anpassen.

Bei Bildern ist dies immer ein wenig problematisch. Häufig werden sie bei unzureichendem Platz einfach herunterskaliert. Mit der Eigenschaft „object-fit“ gibt es jedoch verschiedene Möglichkeiten, wie du sie anpasst. Dazu definierst du zunächst eine Breite und Höhe für das Bild. Wenn diese ein abweichendes Seitenverhältnis besitzen, kommt „object-fit“ zum Einsatz.

CSS3 für Designprofis: Vier Eigenschaften, die du kennen und nutzen solltest
Bild ohne „object-fit“ (oben) und mit: „cover“ und „contain“

Mit dem Wert „cover“ sorgt die Eigenschaft dafür, dass das Bild immer sein Seitenverhältnis beibehält und die gesamte Fläche der „“-Elementes ausfüllt. Dabei werden allerdings rechts und links beziehungsweise oben und unten Bereiche abgeschnitten, damit das Bild die gesamte Fläche ausfüllen kann.

Alternativ besteht mit dem Wert „contain“ die Möglichkeit, das Bild so zu skalieren, dass bei Beibehaltung des Seitenverhältnisses immer das gesamte Bild sichtbar ist. Im Gegensatz zu „cover“ entstehen Ränder am linken und rechten beziehungsweise oberen und unteren Rand.

Bis auf den Internet Explorer unterstützen alle gängigen Browser diese Eigenschaft.

CSS3-Tipp 4: Texte beschneiden mit „text-overflow“

Nicht nur Bilder müssen bei besonders kleinen Auflösungen beschnitten werden. Manchmal sind auch Texte zu lang. Bei Fließtext ist dies in der Regel kein Problem. Dieser wird einfach umbrochen. Aber gerade bei Überschriften mit langen Wörtern oder Texten, die ausschließlich einzeilig dargestellt werden, kann es problematisch werden.

CSS3 für Designprofis: Vier Eigenschaften, die du kennen und nutzen solltest
Text ohne und mit „text-overflow“

Die CSS3-Eigenschaft „text-overflow“ verhindert, dass Texte einfach über den zur Verfügung stehenden Platz hinausragen, indem sie abgeschnitten und mit Auslassungspunkten versehen werden.

Die Eigenschaft funktioniert aber nicht alleine, sondern in Kombination mit der Eigenschaft „overflow“ und dem Wert „hidden“.

h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Im Beispiel wird der Text eines „<h2>“-Elementes per „text-overflow“ beschnitten. Der Wert „ellipsis“ sorgt dafür, dass der beschnittene Text mit Auslassungspunkten versehen wird. Per „white-space“ wird zudem verhindert, dass der Text mehrzeilig wird.

Wird statt „ellipsis“ der Wert „clip“ verwendet, erfolgt die Beschneidung ohne Auslassungspunkte.

Alle gängigen Browser unterstützen diese Eigenschaft.

(do)

Kategorien
Design Editoren HTML/CSS JavaScript & jQuery Programmierung

Innovativ: Wix Code beschleunigt die Erstellung von Web-Applikationen massiv

Der Website-Builder Wix bietet künftig auch die Möglichkeit, Code zu schreiben und zu bearbeiten. Das ist aber nicht die größte Neuerung am neuen Produkt Wix Code.

Kategorien
Design Essentials HTML/CSS Icons & Fonts UI/UX

Von Designern für Designer: Das kostenlose Fontbase organisiert deine Schriften

Unkompliziertes Schriftmanagement ist eine Pflichtdisziplin am Arbeitsplatz jeden Designers. Das kostenlose Fontbase liefert genau das und hat noch einige Ideen mehr.

Kategorien
Design Design-News HTML/CSS

Web-Standards-Dokumentation: Microsoft unterstützt das Mozilla Developer Network

Microsoft ist fleißig dabei, diejenigen seiner Dokumente zu exportieren, die sich mit Web-Standards befassen. Ziel ist das MDN, das Mozilla Developer Network.

Kategorien
Design HTML/CSS Responsive Design UI/UX

Ist der Desktop tot? Worauf ihr bei modernem Design achten solltet

Findet modernes Design heutzutage vornehmlich für mobile Nutzer statt? Wann schaltet der letzte Nutzer seinen Desktop-Rechner ab? Ist der Desktop wirklich tot?

Kategorien
Design Essentials Freebies, Tools und Templates HTML/CSS Icons & Fonts JavaScript & jQuery Programmierung

Tool-Tipp: Moving Letters mit Anime.js und CSS

Animierte Schriften sind ein Hingucker. Richtig eingesetzt, können sie ein Design aufwerten. Moving Letters stellt dir 16 fantastische Effekte bereit.

Kategorien
Design HTML/CSS Responsive Design

CSS Grid Layout: Masonry-Layout aus purem HTML und CSS

Codepen-User Kseso überzeugt mit einem einfachen, aber eindrucksvollen Anwendungsfall für CSS Grid, indem er aus purem HTML und CSS ein schickes Masonry-Layout schafft.

Kategorien
HTML/CSS Webdesign

Gitter voll im Griff: Firefox mit neuem Layout-Panel für CSS-Grids

Ordentliche, auf Raster beziehungsweise Gitter basierende Layouts waren bislang nur auf umständlichen Wegen möglich. Die neuen CSS-Grids, die in den neueren Versionen der bekannten Browser seit einiger Zeit möglich sind, erlauben endlich solche Layouts. Und im Firefox gibt es – zumindest in der Nightly-Version – ein neues Layout-Panel im Inspektor der Entwicklerwerkzeuge, welches dir den Umgang mit CSS-Grids vereinfacht.

Mit CSS-Grids zu besseren Layouts

Das neue Grid-Modell macht es endlich möglich, komplexe Layouts zu entwickeln, die auf der Grundlage eines selbst definierten Gitters bestehen. Dazu legst du per CSS Spalten und Reihen fest, bestimmst Abstände und Breiten. Anschließend werden beliebige Elemente innerhalb des Gitters platziert.

body {
  display: grid;
  grid-template-rows: 200px 1fr 100px;
  grid-template-columns: 25% 25% 25% 25%;
}

Für ein Grid-Layout muss die „display“-Eigenschaft zunächst per „grid“ auf das neue Layoutmodell umgestellt werden. Anschließend werden per „grid-template-rows“ und „grid-template-columns“ die Reihen und Spalten des Gitters definiert. Dabei sind absolute und relative Angaben möglich.

Für jede Reihe beziehungsweise Spalte wird ein Wert übergeben. Die Kombination von absoluten und relativen Werten ist möglich. So können wie im Beispiel Reihen feste Werte besitzen. Mit der Einheit „fr“ für „fraction“ lassen sich flexible Breiten und Höhen herstellen. Dabei füllt die Einheit „fr“ den freien Raum innerhalb des Gitters aus.

Zusätzlich kannst du per „grid-row-gap“ und „grid-column-gap“ Abstände zwischen den einzelnen Gitterzellen festlegen. So hast du die Möglichkeit, sehr individuelle und flexible Raster für deine Weblayouts zu entwickeln.

Ist das Raster festgelegt, müssen die einzelnen Inhalte platziert werden. Dazu wird angegeben, in welchen Zellen des Gitters der Inhalt positioniert werden soll.

header {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 2;
}

Mit „grid-column-start“ und „grid-column-end“ werden die Start- und Endpunkte innerhalb des Rasters angegeben. Analog dazu gibt es „grid-row-start“ und „grid-row-end“. Dank der vier Eigenschaften ergeben sich die Zellen, in denen das jeweilige Element stehen soll.

Das Prinzip des CSS-Grids ist also recht einfach. Die Auszeichnung ist hingegen nicht unbedingt leicht nachvollziehbar – gerade bei komplexen Rastern. Hier kommt das neue Layout-Panel des Inspektors von Firefox ins Spiel.

Neues Layout-Panel zeigt Raster

Das neue Panel sorgt zunächst einmal dafür, dass alle auf einer Seite definierten Raster dargestellt werden. Während das eigentliche Raster auf einer Website ja nicht sichtbar ist, stellt Firefox die einzelnen Spalten und Zeilen sowie gegebenenfalls die Zwischenräume dar, sodass es Entwickler einfacher haben, sich innerhalb des Gitters zurechtzufinden.

Das Layout-Panel erreichst du, indem du die Entwicklerwerkzeuge aufrufst und in den Inspektor wechselst. Dort findest du das Layout-Panel. Für jedes Grid-Element wird ein Button eingeblendet, der das für das jeweilige Element hinterlegte Raster einblendet. Im Browserfenster werden Rasterlinien über das Layout gelegt, die das von dir per CSS-Grids definierte Gitter hervorheben.

Zusätzlich wird das Raster auch im Panel selbst angezeigt. Bewegst du die Maus über dieses Raster, wird die entsprechende Zelle sowohl im Inspektor als auch im Browserfenster hervorgehoben.

Das Einblenden von Zeilennummern erleichtert dir zudem, einzelne Rasterzellen ausfindig zu machen. Die unendlichen Gitterlinien, die du optional dazuschalten kannst, führen die Linien des Rasters auch jenseits des jeweiligen Grid-Elementes weiter. Das kann mal nützlich, mal störend sein, weshalb das Ein- und Ausblenden dieser Option sinnvoll ist.

Rasterbereiche benennen und darstellen

Mit der CSS-Eigenschaft „grid-areas“ hast du die Möglichkeit, Bereiche innerhalb deines Gitters zu benennen und somit zu einer Art Gruppe zusammenzufassen. Alle Zellen mit derselben Bezeichnung stellen somit eine Gruppe dar.

grid-template-areas:
  "header header header header"
  "nav content content content"
  "footer footer footer footer";

Über die Option „Display grid areas“ (ist in der aktuellen Nightly-Version noch nicht ins Deutsche übersetzt) werden dir diese Rasterbereiche im Browserfenster dargestellt. Dabei werden die einzelnen Bereiche durch eine dickere Linie im Gitter hervorgehoben. Zusätzlich wird die jeweilige Bezeichnung des Bereichs eingeblendet.

Bewegst du deine Maus im Layout-Panel über eine Gitterzelle, wird im Browser nicht nur die Zelle hervorgehoben, sondern auch der Bereich, dem die Zelle zugeordnet ist.

Transformierungen werden berücksichtigt

Dank der CSS-Eigenschaft „transform“ sind Drehungen, Skalierungen und Verzerrungen von Elementen möglich. Auch auf ein Gitter-Element lassen sich diese anwenden. Der Inspektor berücksichtigt alle per „transform“ gemachten Änderungen und passt das Gitter entsprechend an.

Das heißt, bei einem gedrehten Gitter-Element wird auch das Raster selbst mit gedreht.

Fazit

Das neue Layout-Panel im Inspektor von Firefox hilft dir dabei, deine Grid-Layouts besser zu verstehen und zu entwickeln. Die Hervorhebung der Gitterlinien und die Nummerierung helfen dabei, Elemente zu platzieren und einen visuellen Eindruck des Gitters zu bekommen.

Dabei werden alle Möglichkeiten wie Abstände zwischen den Rasterzellen und die Einteilung in Bereiche mit berücksichtigt. Insgesamt macht der neue Panel einen guten Eindruck. Dass sich das neue Grid-Layout durchsetzen wird, dürfte nur eine Frage der Zeit sein, weshalb diese neue Funktion sicher für viele Webentwickler eine große Erleichterung bei der Arbeit darstellen wird.

Wann es das neue Layout-Panel in den regulären Firefox schafft, steht noch offen. Aber wer schon einmal probieren möchte, kann sich die Nightly-Version herunterladen. Da es sich dabei um keine ausgereifte Version handelt, sollte man sie nur zu Entwicklungszwecken und die in einer Live-Umgebung nutzen.

Kategorien
Design HTML/CSS Webdesign

Tool-Tipp: Farbverläufe mit CSS für Hintergründe und Buttons

Farbverläufe machen das bisweilen trist wirkende Flat Design interessanter. Es ist daher stets nützlich, ein paar entsprechende Optionen zur Hand zu haben.

Kategorien
HTML/CSS Responsive Design Webdesign

Modernes Webdesign: Diese Fehler solltest du vermeiden

Webdesign und -entwicklung haben sich in den vergangenen Jahren enorm geändert. Daran ist vor allem auch das mobile Internet verantwortlich, was die Art und Weise, wann und wie wir das Internet nutzen, verändert hat. Vieles, was vor zehn Jahren noch gängig war, gilt heute als überholt. Selbst vieles, was vor zwei bis drei Jahren noch völlig aktuell war, gilt heute als veraltet. Welche Dinge solltest bei der Gestaltung und Entwicklung moderner Websites lieber nicht (mehr) machen?

Layouts nur für Desktopgeräte und Smartphones

Die Zeiten, in denen du deine Website nur für eine Ansicht entwickelt hast, sind ja nun schon lange vorbei. Und man findet mittlerweile nur noch wenige Websites, die ohne responsives Layout auskommen.

Doch häufig werden beim responsiven Layout nur zwei Geräte- beziehungsweise Displaytypen berücksichtigt: der klassische Monitor und das Smartphone. Dabei erhält zumindest das Desktoplayout eine feste Breite, während das mobile Layout häufig auf die gesamte Breite des Browserfensters ausgedehnt wird.

Die Unterscheidung nur zwischen Desktop und Smartphone ist mittlerweile jedoch viel zu kurz gegriffen. Denn es gibt mit Tablets und Phablets mittlerweile eine Vielzahl unterschiedlicher Geräte mit diversen Auflösungen. Die Unterscheidung zwischen nur zwei Typen wird dieser Entwicklung nicht gerecht. Daher solltest du dein Layout so flexibel halten, dass es auf allen Auflösungen funktioniert.

Auf großen Monitoren sollte dein Layout keine verschwenderisch großen Ränder links und rechts haben. Und auf Tablets sollte nicht das Layout für Mobilgeräte dargestellt werden.

Eigene Mobilversion deiner Website

Bleiben wir beim mobilen Webdesign. Als die Möglichkeiten responsiver Websites noch sehr eingeschränkt waren, wurden eigene Mobilversionen für Websites entwickelt. Noch heute haben vor allem große Newsportale immer noch eigene Mobilversionen, die meist über eine eigene Subdomain zugänglich sind.

Hier ergibt sich natürlich dasselbe Problem mit den Layouts. Darüber hinaus sind immer zwei Versionen einer Website zu pflegen. Und häufig funktioniert die Ausgabe der richtigen Version nicht. Da wird auf Tablets gerne mal die Mobilversion geladen, obwohl die Auflösung eigentlich problemlos die Desktopversion anzeigen könnte.

Inhalte fürs mobile Internet verstecken

Websites werden zunehmend komplexer. Das gilt für den Inhalt, aber auch für die Gestaltung. Großformatige Bilder und Grafiken werden kombiniert mit mehrspaltigen Texten und zusätzlichen Sidebars.

Und auch der Unterschied zwischen den Display- beziehungsweise Monitorgrößen wird immer größer. So gilt es heutzutage, Websites zu gestalten, die auf großen Monitoren ebenso gut aussehen wie auf kleinen Smartphones.

Das ist durchaus eine Herausforderung. Viele Webdesigner gehen da einen einfachen, aber nicht empfehlenswerten Weg. Angeblich verzichtbare Inhalte werden auf Smartphones einfach versteckt. Das mag im ersten Moment sinnvoll sein, um die Übersichtlichkeit einer Website auf einem Smartphone zu gewährleisten.

Aber da Websites oft häufiger mobil besucht werden als über einen Desktoprechner, ist dieses Vorgehen natürlich nicht im Sinne des Besuchers. Daher sollten auf Smartphones keine Inhalte vorenthalten werden. Vielmehr solltest du schauen, wie du alle Inhalte platzsparend und übersichtlich präsentierst. So kannst du Slider einsetzen oder Inhalte über eine Sidebar ausblenden und per Button einblenden lassen.

Fenster und Videos ungefragt über den Inhalt legen

Zu einer regelrechten Unsitte haben sich sogenannte „Modal Boxes“ entwickelt, die beim augenscheinlichen Verlassen einer Seite über den gesamten Inhalt selbiger gelegt werden. In solchen Bereichen wird dann beispielsweise auf den Newsletter oder auf irgendwelche Angebote hingewiesen.

Wenn man tatsächlich dabei ist, eine Seite zu verlassen, sind sie nicht störend. Wer aber nur versehentlich die Maus aus dem oberen Bereich der Seite hinausbewegt, wird bereits mit einem solchen Screen belästigt.

Wer seine Besucher also nicht verärgern will, sollte auf diese Pop-ups des modernen Webdesigns verzichten – so schön sie auch für einen Betreiber einer Website sein mögen.

Gleiches gilt für Videos, die ungefragt den Inhalt einer Website verdecken.

Einfache Auflösungen und falsche Bildformate

Das Internet ist nicht nur mobiler geworden; es ist auch hochauflösender geworden. Bei Displays und Monitoren spielt längst nicht mehr nur die Größe eine Rolle, sondern auch die Auflösung. So nimmt die Pixeldichte zu und die Auflösung wird immer schärfer.

Bei Bildern macht sich das zunehmend bemerkbar. In einfacher Auflösung sieht ein Bild auf einem hochauflösendem Display verwaschen und unscharf aus. Doch HTML5 und CSS3 erlauben es dir, Bilder für verschiedene Pixeldichten zu hinterlegen.

Nutze diese Möglichkeit, damit deine Website auch auf neuen Geräten nicht nur gut aussieht, sondern auch gestochen scharf ist. Wähle zudem das richtige Format für deine Bilder und Grafiken aus. Nutze JPEGs für Fotos, PNGs für Grafiken und SVGs für Vektorzeichnungen.

Systemschriften und zu kleine Schriften

Seit es Webschriften nach vielen Jahren in alle Browser geschafft haben, ist die Verwendung von Systemschriften nicht mehr nötig. Es gibt unzählige kostenlose und kostenpflichtige Schriften, die du in dein Webprojekt übernehmen kannst. Achte darauf, dass du es diese Schriften im neuen Format WOFF2 gibt. Dieses löst das bisherige Standardformat WOFF ab und ist dank besserer Komprimierung noch platzsparender. Und das ist gerade im mobilen Internet ein großer Vorteil.

Achte zudem darauf, dass du Schriften nicht zu klein einsetzt. Vor allem setze nicht auf eine einheitliche, feste Schriftgröße. Auf Smartphones sollten Schriften eine andere Größe haben als auf großen Monitoren.

Den Besucher warten lassen

Heutzutage erwartet man zurecht, dass Websites sich schnell aufbauen. Daher solltest du deine Website so entwickeln, dass sie schnell geladen wird. Optimiere Bilder und verwende das richtige Format.

Nutze Techniken wie das „<picture>“-Element, um immer passend große Bilder auszuliefern. Lade auf Smartphones Bilder in kleinerer Auflösung und nicht in einer Auflösung, wie sie auf einem großen Monitor benötigt wird.

Achte darauf, dass JavaScript die Ausgabe von HTML nicht blockiert oder verlangsamt und versichere dich, dass extern eingebundene Dateien deine Ladezeiten nicht negativ beeinflussen.

Kategorien
Boilerplates & andere Tools Design HTML/CSS Programmierung

Mavo: Web-Apps ohne Programmierung, nur mit HTML/CSS

Mit Mavo kannst du Web-Apps erstellen, die Daten speichern und verarbeiten, ohne dass du dazu programmieren können müsstest. Mavo ist eine Erweiterung zu HTML und sehr einfach zu erlernen.

Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung Responsive Design

So integrierst du Videos responsiv in deine Website

Responsive Webdesign hat sich zum Standard entwickelt. Von modernen Apps und Websites erwartet man heutzutage geradezu, dass sie sich an verschiedesten Auflösungen in möglichst idealer Weise anpassen. So ergibt sich ein optimales Benutzererlebnis, ganz egal, welches Gerät oder welche Auflösung genutzt wird. Inhalte, Bilder und Videos sollten sich in gleicher Weise fließend verhalten, um unterschiedliche Viewports bestmöglich zu bedienen.

Kategorien
Design HTML/CSS

CSS Grid Garden bringt dir spielerisch das CSS Grid bei

CSS Grid ist der neue heiße Scheiß im Webdesign. Nachdem jetzt die modernen Browser dieses Set verschiedener CSS-Eigenschaften unterstützen, wird es Zeit, sich damit zu befassen. „CSS Grid Garden” unterstützt dich dabei.

Kategorien
Design HTML/CSS UI/UX

CSS Icon: Piktogramme aus purem CSS, auf Wunsch auch animiert

Die frei verwendbare Web-App „CSS Icon” bringt dir nicht nur Piktogramme aus purem CSS frei Haus, sondern erlaubt dir auch noch, animierte Übergänge zwischen jeweils zwei beliebigen Symbolen des Pakets zu definieren.

Kategorien
Design E-Business Editoren HTML/CSS Technik

Wix 2017: Viel mehr als nur ein Homepage-Baukasten

Der vormalige Homepage-Baukasten Wix wandelt sich immer mehr zu einer Rundum-Lösung für jedwedes Internet-Business. In hoher Frequenz werden Features entwickelt, die es dir in manchen Bereichen schon erlauben, deine Geschäfte komplett mit Wix abzuwickeln.

Wix: weiterhin auf Expansionskurs

Auf Wix traf ich zum ersten Mal im Jahr 2011 und war nur mäßig begeistert. Der Homepage Baukasten war zu diesem Zeitpunkt extrem flash-lastig und kam für mich schon aus diesem Grunde nicht in Frage. Nur zwei Jahre später, im Dezember 2013, sah die Sache ganz anders aus. Ich schrieb diesen Beitrag und empfahl Wix für Designer ohne Codeambitionen und Seitenbetreiber gleichermaßen.

Im Jahr 2014 brachte Wix ein vielbeachtetes Feature auf den Markt. Innerhalb des WYSIWYG-Editor ist es seither möglich, beliebige Seitenelemente zu animieren.

Ein Jahr später machte Wix mit einer Reihe von TV-Werbespots deutlich, wo ihre Zielgruppe liegt. Diese lässt sich sehr genau definieren, nämlich als „jedermann”. Mit dem Slogan „Ich bin ein Wixer” konnten sie nachvollziehbarerweise einige Schmunzler und eine ganze Menge Aufmerksamkeit generieren. Mitte 2016 setzten sie diese Strategie mit dem bekannten Rapper Ferris MC als Testimonial fort.

https://www.youtube.com/watch?v=G4EU2malWRI

Ebenfalls ein knappes Jahr ist es her, dass Wix sich für einen neuen, einfacher zu bedienenden Editor entschied, den wir dir hier näher vorstellten. Seither unterstützt Wix auch Hero-Videos als Hintergrund und das weiterhin beliebte Parallax Scrolling.

Spektakulär war in diesem Jahr auch die Markteinführung des Teildienstes 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.

Natürlich kannst du mit Wix auch einen Blog erstellen. Dieses Thema ist bekanntlich bei anderen Website-Buildern teils schwierig, teils rudimentär gelöst. Dabei ist ein Blog ein probates Mittel, die eigene Online-Reichweite zu erhöhen. Hier auf Dr. Web findest du haufenweise Beiträge, die dir ganz konkret dabei helfen.

Stete Evolution: Wie Wix sich unentbehrlich machen will

Neben den spektakulären Features arbeiten die Entwickler bei Wix akribisch an kleineren, aber nicht weniger essentiellen Funktionserweiterungen, die sämtlich darauf abzielen, den Homepage-Baukasten für seine Nutzer weiter zu professionalisieren. Einige der Erweiterungen stelle ich dir im folgenden vor:

Wix Invoices

Mit Wix Invoices erstellst du Rechnungen oder andere Zahlungsaufforderungen an deine Kunden. Zahlungseingänge können über PayPal, Stripe, eWAY, Square, Yandex, Worldpay, Payment Express, Fat Zebra, Braintree, PagueloFacil und DengiOnline akzeptiert werden. Nicht alle dieser Zahlungsmethoden sind international verfügbar.

Wix Engage

Wix Engage ist eine Funktion in deinem Dashboard, die dich über jede Interaktion eines Webseitenbesuchers mit deiner Seite unterrichtet hält. Egal, ob es sich um das Ausfüllen des Kontaktformulars, einen Einkauf aus deinem Shop oder das Buchen eines Termins handelt, Wix Engage hält dich auf dem Laufenden.

Wix Mobile App

Die mobile App aus dem Hause Wix erlaubt dir einen Großteil des Seitenmanagements von deinem Smartphone aus. Auch die eben genannten Messages von Wix Engage erhältst du auf deinem Gerät. Zusätzlich kannst du die Produkte und Bestellungen deines Online-Shops verwalten und deinen Blog von unterwegs aus bestücken.

Wix Shoutout

Wix Shoutout ist eine E-Mail-Marketing-Lösung, die es dir erlaubt, wirklich schöne E-Mail-Newsletter an deine Kunden zu versenden. Das Baukastensystem ist sehr einfach zu verwenden und führt innerhalb weniger Minuten zu professionellen Ergebnissen. Den Erfolg misst du über das hinterliegende Statistik-Modul. Eine separate App für Smartphones bringt dein E-Mail-Marketing überall hin, wo du auch bist.

Weitere interessante Features bietet der Wix App-Markt

Über den App-Markt von Wix kannst du deine Website um nahezu endlose Features erweitern, da hier neben Wix selbst auch Drittanbieter Integrationen für ihre Services anbieten. Aber schon die Apps, die Wix selbst anbietet, sind Gold wert.

Mit dem Wix Forum betreibst du ein eben solches. Über Wix Events verkaufst du Tickets für deine Veranstaltungen. Wix Bookings erlaubt dir die Annahme von Buchungen für deine Dienstleistungen. Wix Hotels bringt dieses Konzept nochmal gezielter für Hotel-Dienstleistungen auf den Punkt. Dieses Feature gibt es auch für Restaurants.

Mit Wix FAQ betreibst du eine Seite mit häufig gestellten Fragen. Die Wix Pro Gallery lässt deine Fotografien im besten Licht erscheinen. Unter den verfügbaren Darstellungsoptionen ist auch ein Masonry-Grid – sehr ansehnlich. Mit Wix Video gibt es eine Funktion, die dir – ähnlich wie das weiter oben erwähnte – Wix Music erlaubt, Videos über deine Website zu vermarkten. Wix Photo Albums bietet Fotografen eine Möglichkeiten, Auftragsfotos ihrer Kunden für eben diese als Website zu präsentieren, ein schönes Alleinstellungsmerkmal.

Fazit: Wix: viel mehr als nur ein Homepage-Baukasten

Du siehst, dass Wix tatsächlich weit über den reinen Homepage-Baukasten hinausgeht und teils sogar spezialisierte Lösungen anbietet. Es darf wohl gefahrlos behauptet werden, dass du mit Wix keinerlei Einschränkungen unterliegst. Bau dein Geschäft auf, dann unterbaue es mit Wix. Viel mehr benötigst du nicht.

Hast du schon Erfahrungen mit Wix gesammelt? Lass uns daran teilhaben und schreib sie in die Kommentare. Was für eine Art Website betreibst du mit Wix?

Zum Abschluss sei euch noch der neuste Werbespot empfohlen ;)

Kategorien
Design Editoren HTML/CSS Responsive Design

SITE123: Dieser Homepage-Baukasten liefert Websites im Handumdrehen

Heutige Website-Builder sind schon fast zu komplex, als dass sie sich für Otto Normalverbraucher eigneten. SITE123 geht bewusst nicht den Weg maximaler Freiheit und Featuritis, sondern legt Wert auf schnelle Resultate.