Kategorien
Design Plugins Webdesign WordPress

RegistrationMagic: WordPress-Plugin für umfangreiche Formulare

Was WordPress bei all seinem Funktionsumfang und all seiner Beliebtheit von Hause aus fehlt, ist die Möglichkeit, Formulare zu erstellen und einzubinden. Doch dank zahlreicher Plug-ins fügst du entsprechende Features zu deiner Installation hinzu. Hier sticht besonders das Plug-in RegistrationMagic hervor, das sehr umfangreiche Möglichkeiten zur Erstellung und Verwaltung von Formularen bereitstellt – und zusätzlich noch mit Analyse-Funktionen ausgestattet ist.

Einfaches Erstellen und Gestalten von Formularen

RegistrationMagic installierst du ganz bequem über den Plug-in-Manager von WordPress. Anschließend findest du im Backend einen eigenen Bereich, über den du deine Formulare erstellst und verwaltest. Da es neben dem kostenfreien auch zwei kostenpflichtige Pläne gibt, hast du nicht gleich Zugriff auf alle Funktionen. Dennoch stehen dir auch mit der kostenlosen Variante schon zahlreiche Features zur Verfügung.

Übersicht über alle Formulare
Übersicht über alle Formulare

In der Übersicht von RegistrationMagic werden dir zunächst alle vorhandenen Formulare dargestellt. Du kannst diese bearbeiten oder ein neues Formular anlegen. Zum Anlegen von Formularen benötigst du weder Kenntnisse in HTML noch in CSS. Die grafische Oberfläche führt dich der Reihe nach durch den Erstellungsprozess. So vergibst du zunächst einen Namen sowie auf Wunsch eine Beschreibung und einen zusätzlichen über dem Formular platzierten Text.

Übersicht der Formularkonfiguration
Übersicht der Formularkonfiguration

Anschließend wirst du auf eine Konfigurationsseite weitergeleitet, über die du dein Formular individuell zusammensetzen und gestalten kannst. So hast du mit „Custom Fields“ die Möglichkeit, Eingabefelder zu deinem Formular hinzuzufügen. Es gibt allgemeine Felder wie ein- und mehrzeilige Textfelder, sowie Checkboxes und Radio-Buttons. Darüber hinaus stehen spezielle Felder zur Eingabe von E-Mail-Adressen, Datumsangaben und Passwörtern bereit. Auch spezielle Dropdownlisten zur Auswahl eines Landes sind vorhanden.

Als drittes kannst du noch Profil-Felder verwenden, über welche du unter anderem Name, Nickname und Website abfragst. Jedes einzelne Feld konfigurierst du individuell und gibst beispielsweise an, ob es sich um ein Pflichtfeld handelt. Außerdem ist es möglich, jedem Feld ein Icon hinzuzufügen, welches du aus einer Liste mit Googles „Material Icons“ auswählst.

Formulardesign festlegen
Formulardesign festlegen

Auch das Aussehen deiner Formulare definierst du ganz individuell. Der „View“-Bereich stellt dir eine Vorschau auf das Design dar. Du wählst einfach Farben für Rahmen-, Text- und Füllfarbe aus.

Das fertige Formular bindest du anschließend schlicht per Shortcode auf einer Seite oder in einen Beitrag ein. Dabei steht dir im Texteditor auch eine Dropwdownliste mit allen vorhandenen Formularen zur Verfügung. Du musst den Shortcode also nicht manuell einfügen, sondern kannst das Formular bequem aus der Liste auswählen.

Formulardaten erhalten und auswerten

Alle erfolgreich verschickten Formulare werden in der Datenbank gespeichert und stehen dir unter „Form Submissions“ zur Verfügung. Dabei werden dir für jedes verschickte Formular sehr übersichtlich alle Formularfelder und die gemachten Eingaben dargestellt.

Übersicht aller Formulardaten
Übersicht aller Formulardaten

Vom Benutzer hoch geladene Dateien werden im Bereich „Attachments“ gesammelt. So greifst du beispielsweise auf Bilder zu, die über ein Formular verschickt wurden.

Für eine bessere Übersicht kannst du dir die Daten nur für bestimmte Formulare darstellen lassen. Auch eine Begrenzung auf bestimmte Zeiten und Eingabefelder ist möglich. Je mehr Formulardaten sich im Laufe der Zeit ansammeln, desto mehr wirst du die Sortierfunktion von RegistrationMagic zu schätzen wissen.

Natürlich kannst du dir – wie es bei den meisten Formular-Plug-ins üblich ist – abgesendete Formulare direkt per E-Mail zukommen lassen.

Eine Besonderheit von RegistrationMagic ist der Analyse-Bereich für Formulare. Hier erhältst du einen Überblick darüber, wie häufig Formulare verschickt wurden. So erfährst du beispielsweise, wie häufig ein Formular ausgefüllt, aber nicht erfolgreich abgesendet wurde. So kann es etwa sein, dass Pflichtfelder nicht ausgefüllt und das Formular daher nicht verschickt werden konnte.

Analysis für Formulare
Analysis für Formulare

Anhand der angegebenen Fehlerrate weißt du sehr gut, wie hoch der Anteil nicht verschickter Formulare ist. Auch die durchschnittliche Dauer, die jemand benötigt, um ein Formular auszufüllen, wird angegeben.

In den kostenpflichtigen Tarifen steht dir eine weitere Analyse-Funktion zur Verfügung, die sich nicht auf ganze Formulare, sondern auf einzelne Eingabefelder bezieht. Hier ist also eine wesentlich differenzierte Analyse möglich.

Registrierungs- und Login-Formulare

Mit RegistrationMagic kannst du genauso Formulare zur Benutzerregistrierung und -anmeldung erstellen. Dazu gibst du einfach an, dass beim Versenden eines Formulares automatisch ein WordPress-Benutzer angelegt werden soll. Den so angelegten Benutzern wird automatisch die Rolle „Abonnent“ zugewiesen.

Du legst auch fest, ob sich jeder Benutzer bei der Registrierung ein Kennwort selbst vergeben kann oder ob ihm eines zugewiesen werden soll. Im letzteren Fall wird dem Benutzer das Kennwort per E-Mail zugeschickt.

Eingabefelder zu einem Formular hinzufügen
Eingabefelder zu einem Formular hinzufügen

Bei den kostenpflichtigen Tarifen stehen dir zusätzliche Funktionen zur Verfügung. So legst du beispielsweise fest, dass neu registrierte Benutzer erst durch einen Administrator freigeschaltet werden müssen. Außerdem kannst du eine andere Rolle für Benutzer vergeben. Statt „Abonnent“ kann es beispielsweise „Autor“ oder „Redakteur“ sein.

Damit sich registrierte Benutzer später anmelden können, steht dir ein Login-Formular zur Verfügung, welches du ebenfalls per Shortcode auf eine Seite einfügst.

Damit angemeldete Benutzer ihre Profildaten einsehen können, gibt es die von RegistrationMagic automatisch erstellte Seite „Submissions“. Hierüber haben Benutzer die Möglichkeit, ihr Kennwort zu ändern. Der Inhalt der Seite wird über einen Shortcode bereitgestellt, sodass du die diesen nach Belieben auf der gewünschten Seite einfügen kannst.

Zusammenspiel mit MailChimp und anderen Diensten

Willst du RegistrationMagic für E-Mail-Marketing einsetzen, kannst du sehr einfach andere Dienste wie MailChimp integrieren. Dazu teilst du RegistrationMagic deinen API-Key von MailChimp mit und stellst ein Registrierungsformular für MailChimp zur Verfügung.

Währen du also mit RegistrationMagic die Anmeldungen für deinen Newsletter verwaltest, übernimmt MailChimp das Versenden der Newsletter. In der kostenpflichtigen Variante werden zusätzlich die Dienste Aweber und Constant Contact unterstützt.

E-Mails an alle Benutzer eines Formulares verschicken
E-Mails an alle Benutzer eines Formulares verschicken

Alternativ zu externen Diensten stellt dir RegistrationMagic eine eigene Möglichkeit zur Verfügung, E-Mails an alle Benutzer eines Formulares zu versenden. Über einen Rich-Text-Editor fügst du Texte und Bilder ein und kannst so HTML-E-Mails versenden.

Kostenpflichtiger Silber- und Gold-Plan

Wie bereits erwähnt, stehen dir im kostenlosen Plan nicht alle Features von RegistrationMagic zur Verfügung. So erhältst du mit dem Silber-Plan unter anderem Zugriff auf weitere Eingabefelder. Außerdem stehen dir Exportfunktionen zur Verfügung, mit denen du Formulardaten ins CSV- und PDF-Format sicherst.

Darüber hinaus ist es möglich, Formulare an externe Adressen zu verschicken. Das ist dann nützlich, wenn die Daten beispielsweise in eine externe Datenbank gespeichert werden sollen.

Im Gold-Plan erhältst du unter anderem weitere Sicherheitsfunktionen und kannst IP-Adressen sperren, sowie Vorgaben für die Kennwortstärke festlegen.

Den Silber-Plan erhältst du für 39 US-Dollar, den Gold-Plan für 79 US-Dollar. Dabei gilt der Silber-Plan für eine Website, der Gold-Plan für beliebig viele. Beide PLäne garantieren dir Support und Updates für die Dauer eines Jahres.

Fazit

RegistrationMagic lässt kaum einen Wunsch offen, wenn es um Formulare geht. Dank der grafischen Benutzeroberfläche kommst du ganz ohne eigene Programmierung oder Markup aus. Der große Funktionsumfang erlaubt sehr individuelle Formulare – zur bloßen Kontaktaufnahme, über Registrierung und Anmeldung bis hin zu E-Mail-Marketing.

(dpe)

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Webdesign

Warum du SVG inline einbinden solltest

Wer mit SVG-Grafiken arbeitet, hat gleich mehrere Möglichkeiten, diese in ein HTML-Dokument einzubinden. Neben der Verwendung als klassische Bilddatei über das „<img>“-Element lassen sich SVG auch per „<object>“ oder „<iframe>“ implementieren. Letztere haben den Vorteil, dass auch JavaScript und Animationen ausgeführt werden können. Die einfache Variante ist jedoch, SVG inline im HTML-Quelltext auszuzeichnen. Dies erlaubt dir einen einfachen Umgang und Zugriff auf SVG-Formen per CSS und JavaScript.

w3csvglogo

SVG inline: Kein zusätzlicher Request

Zunächst einmal verursachen Inline-SVGs keinen zusätzlichen Request, da sie Teil des HTML-Dokumentes sind. Gerade bei vielen kleinen SVGs auf einer Seite kann sich das bemerkbar machen.

Werden dieselben Grafiken jedoch in mehreren Dokumenten verwendet, bietet sich gegebenfalls an, diese extern einzubinden. Mit entsprechenden Chache-Einstellungen müssen die Grafiken dann nicht bei jedem zu ladenden Dokument ebenfalls neu geladen werden.

Einheitliche Styles

Ein ganz anderer, äußerst praktischer Vorteil von Inline-SVGs ist jedoch die Möglichkeit, das Aussehen der Grafiken über die Stylesheets des HTML-Dokumentes zu steuern.

Füll- und Linienfarbe lassen sich ebenso definieren wie beispielsweise Linienstärke und Transformationen. Dabei zeichnest du SVG-Stylesheets genau so aus wie HTML-Stylesheets und kannst auch HTML- und SVG-Selektoren miteinander kombinieren.

article svg rect {
  fill: red;
}

asidesvg rect {
  fill: green;
}

Im Beispiel wird die Füllfarbe eines SVG-Rechteckes in Abhängigkeit vom elterlichen HTML-Element vergeben. Ist dieses ein „<article>“-Element, wird es rot, ist es ein „<aside>“-Element, wird es grün gefärbt.

Hover-Effekte

Auch Hover-Effekte erstellst du auf diese Weise ganz unkompliziert. So kannst du beispielsweise SVGs innerhalb eines Links platzieren und per CSS einen Hover-Effekt generieren.

<a href="http://www.example.com/">
  <svg>
    <rect x="0" y="0" width="15" height="15" />
  </svg>
</a>

Sowohl das Aussehen des SVG-Rechteckes als auch das Hover-Verhalten definierst du per Stylesheets.

a svg rect {
  background: red;
  transition: all 0.5s ease;
}

a:hover svg rect {
  transform: rotateX(90deg);
}

Im Bespiel wird eine SVG-Grafik innerhalb eines „<a>“-Elementes platziert und anschließend per CSS gestaltet. Ein Hover-Effekt auf das „<a>“-Element sorgt dafür, dass das Rechteck um 90 Grad gedreht wird.

Ein solches Verhalten ist über eine externe Referenzierung nicht möglich. Über das „<img>“-Element eingebundene SVG-Dateien lassen keine Veränderung per CSS zu und per „<object>“ referenzierte Dateien lassen sich nur über Umwege in Kombination per JavaScript verändern.

Einfacherer Zugriff per JavaScript

Da sich eingebundene SVG-Grafiken innerhalb des DOM-Knotenbaums des HTML-Dokumentes befinden, ist nicht nur der Zugriff per CSS auf einzelne Elemente möglich. Auch per JavaScript kannst du ganz bequem auf einzelne SVG-Elemente zugreifen.

Bei per „<object>“ eingebundenen SVG-Dateien ist der Zugriff per JavaScript nur über die Eigenschaft „contentDocument“ möglich. Diese erlaubt es, auf den DOM-Baum externer Dateien zuzugreifen.

document.getElementsByTagName("object")[0].contentDocument.getElementsByTagName("rect")[0].setAttribute("class", "hover");

Im Beispiel wird per „contentDocument“ auf ein Element innerhalb einer per „<object>“ referenzierten SVG-Datei zugegriffen.

Ist die SVG-Grafik direkt im HTML-Dokument ausgezeichnet, kannst du auf einzelne SVG-Elemente so zugreifen, wie du auch auf HTML-Elemente zugreifen würdest.

document.getElementsByTagName("rect")[0].setAttribute("class", "hover");

Im zweiten Beispiel greifst du einfach auf das erste „rect“-Element zu, welches in deinem HTML-Dokument ausgezeichnet ist.

Fazit

Inline-SVGs haben viele Vorteile gegenüber extern eingebundener SVG-Dateien. Vor allem das Zusammenspiel mit CSS funktioniert wesentlich einfacher, da du SVG per CSS so behandeln kannst wie alle anderen Elemente deines Dokumentes. Gerade für Interaktionen wie Hover-Effekte ist das ein entscheidender Vorteil.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Webdesign

Datamaps.co: So schnell erstellst du Landkarten als PNG oder SVG

Gerade zur Visualisierung statistischer Daten werden politische Landkarten gerne eingesetzt. Nicht immer stehen einem solche Karten zur Verfügung. Vor allem aber ist die gestalterische Aufbereitung dieser Karten mit Aufwand verbunden. Der Dienst Datamaps.co stellt dir nicht nur vektorbasierte Karten zur Verfügung, sondern macht es dir auch leicht, diese mit statistischen Daten zu versehen und gestalterisch anzupassen.

datamaps

Karte auswählen

Zunächst wählst du bei Datamaps.co eine Karte aus. Neben einer Weltkarte stehen dir ausgesuchte Karten einiger Staaten zur Verfügung. Während auf der Weltkarte alle Staaten eingezeichnet sind, haben die Karten der einzelnen Staaten eine politische Untergliederung. So findest du auf der Deutschlandkarte alle 16 Bundesländer wieder, auf der französischen die Regionen.

Kartenauswahl

Insgesamt sind es derzeit nur 13 Karten zuzüglich der Weltkarte, die du bei Datamaps.co findest. Neben Deutschland sind es die Vereinigten Staaten, China, Kanada, Frankreich, Italien, Polen, Russland, Indien, Brasilien, Niederlande, Österreich und Schweiz.

Daten hinterlegen

Hast du eine Karte ausgewählt, hinterlegst du für jeden Staat (bei der Weltkarte) beziehungsweise für jede Region einen numerischen Wert. Bei der Deutschlandkarte hast du also eine Tabelle mit allen Bundesländern. Für jedes Land kannst du eine Zahl eingeben. Datamaps.co färbt anschließend die Bundesländer in der Karte unterschiedlich ein.

Dateneingabe manuell und per CSV-Datei möglich
Dateneingabe manuell und per CSV-Datei möglich

Dabei erstellt der Dienst eine Farbskala zwischen dem niedrigsten und dem höchsten in der Tabelle angegebenen Wert und färbt jedes Bundesland entsprechend seines Wertes ein. So erhälst du eine Landkarte, in der du aufgrund der Einfärbung erkennst, wie die statistische Verteilung deiner Daten ist.

Daten per CSV-Datei hochladen

Werte für die 16 Bundesländer bekommt man noch problemlos manuell eingetippt. Bei einer Weltkarte mit knapp 200 Staaten ist das schon etwas aufwändiger. Du kannst aber auch einfach eine CSV-Datei mit den Daten hochladen. Dazu muss die erste Spalte der Tabelle immer die drei Buchstaben lange ISO-3166-1-Kennung (ALPHA-3) des Staates haben.

Die Benennung der staatlichen Untergliederung variiert. Bei den deutschen Karten wird die ISO 3166-2-Kennung (zum Beispiel NW für Nordrhein-Westfalen) verwendet. Zu jeder Karte kannst du dir jedoch auch einfach eine Beispieltabelle herunterladen, in der jeweils alle Spaltenbezeichnungen angegeben sind. Du musst dann nur noch die zweite Spalte mit den Zahlen hinterlegen und die Karte hochladen.

Aussehen und Beschriftung der Landkarten anpassen

Zu guter Letzt kannst du noch das Aussehen der Karte anpassen und einen Titel sowie eine Beschriftung für die Legende angeben. Über die Legende wird die Farbskala erklärt und der kleinste sowie höchste Wert der Statistik angegeben.

Individuelle Einfärbung möglich

Bei der Farbskala wählst du zwischen einer linearen Skala, bei der ein Verlauf zwischen zwei Farben dargestellt wird und einer abstandsgleichen Skala, die in gleich große Abschnitte eingeteilt ist. Jedem Abschnitt wird hier eine Farbe zugewiesen.

Die letzte Skala ist vor allem dann interessant, wenn du die Staaten oder Untergliederungen in statistische Gruppen einteilen möchtest. So erhält jede Gruppe ihre eigene Farbe. Hierbei wählst du du die Anzahl der Gruppen – zwischen drei und sieben – aus, sowie ein Farbschema.

Karte mit abstandsgleicher Skala
Karte mit abstandsgleicher Skala

Landkarten herunterladen

Ist deine Karte fertig, lädst du diese einfach als PNG- oder SVG-Datei herunter und bindest sie zum Beispiel in deine Website ein. Ein kleiner Copyright-Hinweis wird automatisch mit in die Karte integriert.

Da Datamaps.co unter der freien MIT-Lizenz steht, steht dir auch der komplette Quelltext zur Verfügung. Du kannst den Dienst also selber hosten und somit dann entsprechend eigene Karten ergänzen.

(dpe)

Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung Webdesign

HTML5 und JavaScript: So erstellst du mobile Web-Apps

Mobile Web-Apps müssen nicht immer nativ programmiert werden. Auch mit HTML5 und den damit eingeführten JavaScript-APIs entwickelst du mobile Web-Apps, die bezüglich der Funktionalität den nativ programmierten Apps in (fast) nichts nachstehen. Dazu kommt, dass native Anwendungen auch ihre Nachteile haben, die du mit HTML5 nicht hast.

mobile Web-Apps

Kein Store-Zwang, keine unterschiedlichen Plattformen

Apps sind auf Smartphones und Tablets zu einem unverzichtbaren Bestandteil geworden. Wer jedoch selbst mobile Apps anbieten möchte, wird schnell feststellen, dass dies mit einigen Hürden und nicht wenig Aufwand verbunden ist. Zunächst einmal müssen native Apps für jede Plattform – unter anderem iOS und Android – eigenständig entwickelt werden. Die sogenannten Hybrid-Apps, die auf mehreren Plattformen laufen, stellen hingegen nur eine Art Container dar, der in HTML und JavaScript programmierte Webanwendungen enthält.

Googles Play Store
Googles Play Store

Ein weiterer Nachteil nativer Apps ist, dass diese nur über den jeweiligen App-Store installiert werden können. Das führt im Play Store von Google zu einmaligen Registrierungskosten und bei Apple zu regelmäßigen Kosten. Zwar ist es auf Androidgeräten möglich, Apps auch ohne Store zu installieren. Dazu müssen jedoch in den Geräteeinstellungen explizit App-Installationen aus „unbekannten“ Quellen zugelassen werden.

Bei Webanwendungen bestehen all diese Probleme nicht. Sie werden in HTML5 und JavaScript programmiert und sind somit unabhängig von Betriebssystemen und Stores.

Geräteorientierung und Standortbestimmung

Viele Apps nutzen die speziellen Gerätefunktionen, mit denen Smartphones und Tablets ausgestattet sind. Dazu gehört das Gyroskop, welches die Drehung eines Gerätes um die eigene Achse erkennt und so beispielsweise feststellt, ob ein Gerät im Portrait- oder Landscape-Modus gehalten wird. Das geht auch mit JavaScript.

window.addEventListener("deviceorientation", function() {
 console.log(e.alpha);
 console.log(e.beta);
 console.log(e.gamma);
}, true);

Im Beispiel werden über das Ereignis „deviceorientation“ drei Winkel ausgegeben, welche die aktuelle Drehung des Gerätes darstellen.

Ebenfalls häufig verwendet ist die Standortbestimmung per GPS. Neben Navigationsanwendungen sind es vor allem Apps sozialer Netzwerke, die gerne auf den jeweiligen Standort des Nutzers zugreifen. Auch dies ist per JavaScript möglich.

navigator.geolocation.getCurrentPosition(function(position) {
 console.log(position.coords.latitude, position.coords.longitude);
});

Im Beispiel werden per „geolocation“ die Koordinaten des Längen- und Breitengrades ausgegeben. So lässt sich die jeweilige GPS-Position ermitteln.

Offline-Speichern per Application Cache

Native Apps haben gerade auf mobilen Geräten den Vorteil, dass sie einmal heruntergeladen werden und dann auch ohne Internetverbindung zur Verfügung stehen. Aber auch dies ist kein Grund, zwingend auf eine native App zu setzen. Denn der Application Cache von HTML5 erlaubt es ebenfalls, Dateien einer Webanwendung dauerhaft auf einem Gerät zu speichern.

Dazu wird im HTML-Element eine sogenannte Manifest-Datei referenziert, über die definiert ist, welche Dateien beim erstmaligen Laden der Seite auf dem Gerät gespeichert werden sollen.

<html manifest="example.appcache">

Die Manifest-Datei enthält dann aufgelistet alle Dateien der Website, die offline verfügbar gemacht werden.

CACHE MANIFEST
index.html
stylesheet.css
logo.png

Im Beispiel werden drei Dateien heruntergeladen und anschließend immer aus dem Application Cache geladen statt aus dem Internet.

Gestensteuerung

Während auf Desktopgeräten die Maus regiert, sind es auf Smartphones und Tablets die Finger. Neben einfachen Taps, die weitestgehend den Mausklick ersetzen, sind mit den Fingern auch sogenannte Gesten möglich. Am bekanntesten dürfte die Wischgeste stein, mit der beispielsweise Menüs ein- und ausgeblendet werden oder durch eine Bildergalerie geblättert wird.

Auch diese Funktionalität lässt sich per JavaScript realisieren. Hierzu gibt es verschiedene „touch“-Ereignisse, welche ähnlich funktionieren wie die „mouse“-Ereignisse. So stehen dir „touchstart“, „touchmove“ und „touchend“ zur Verfügung, mit denen die Position eines Fingers auf dem Display wiedergegeben wird. Dabei können mit den „touch“-Ereignissen auch mehrere gleichzeitig platzierte Finger registriert werden.

document.getElementsByTagName("body")[0].addEventListener("touchmove", function(e) {
  console.log(e.changedTouches[0].pageX);
  console.log(e.changedTouches[0].pageY);
}, false);

Über „changedTouches“ werden alle Berührungen auf dem Display als Array gespeichert. Im Beispiel werden die Koordinaten der jeweils ersten Berührung wiedergegeben.

Kamerazugriff

Noch relativ neu ist die Möglichkeit, auf Kameras per „getUserMedia()“ zuzugreifen. Hierzu wird zunächst ein leeres „<video>“-Element mit eingeschaltetem Autoplay platziert.

<video autoplay="autoplay"></video>

Anschließend wird per „getUserMedia()“ das Kamerabild dort hinein platziert.

navigator.getUserMedia ({
  audio: true,
  video: true
}, function (stream) {
  document.getElementsByTagName("video")[0].src = window.URL.createObjectURL(stream);
}, function() {
  console.log("Fehler");
});

„getUserMedia()“ erwartet drei Parameter. Zunächst definierst du, ob Video- und Audioinhalt übertragen werden sollen. Anschließend wird eine Funktion erwartet, die den Stream verarbeitet und im Beispiel dem „<video>“-Element übergibt. Als letztes muss noch eine Callback-Funktion her, die im Falle eines Fehlers aufgerufen wird.

Derzeit muss „getUserMedia()“ noch mit Vendor-Prefix – zum Beispiel „webkitGetUserMedia()“ – ausgezeichnet werden.

Web-Apps mit dem Web-Application-Manifest auf dem Startbildschirm platzieren

Im mobilen Chrome gibt es die Funktion „Zum Startbildschirm hinzufügen“. Hierbei wird ein Lesezeichen nicht im Browser, sondern auf dem Startbildschirm platziert. Über eine Manifest-Datei hast du die Möglichkeit, einen vom Seitentitel abweichenden Namen und ein eigenes Icon definieren.

Chrome und die Funktion „Zum Startbildschirm hinzufügen“
Chrome und die Funktion „Zum Startbildschirm hinzufügen“

Dazu muss die Manifest-Datei zunächst im HTML-Kopf definiert sein.

<link rel="manifest" href="manifest.json">

Anschließend wird in dieser Datei im JSON-Format festgelegt, wie das Lesezeichen auf dem Startbildschirm dargestellt werden soll.

{
  "name": "Demo",
  "icons": [{
    "src": "icon_36x36.png",
    "sizes": "36x36",
    "type": "image/png",
    "density": 1
  }]
}

Im Beispiel werden per „name“ die Bezeichnung des Lesezeichens und per „icons“ eine Reihe von Dateien definiert, die Icons in unterschiedlichen Auflösungen und Pixeldichten referenzieren.

Auch das Verhalten der Anwendung, wenn sie über den Startbildschirm geöffnet wird, lässt sich festlegen.

"display": "standalone",
"orientation": "portrait"

Per „display“ wird eine Website zu einer Standalone-Anwendung. Hierbei werden Adressleiste und Menü des Browser ausgeblendet und die Website im Vollbild dargestellt. Per „orientation“ kannst du Portrait- oder Landscape-Modus vorgeben.

Fazit

Dank des Web-Application-Manifestes unterscheiden sich einmal auf dem Startbildschirm abgelegte, mobile Web-Apps kaum noch von nativen Apps. Mit Hilfe der zahlreichen JavaScript-APIs ist es zudem möglich, nahezu alle Features von Smartphones und Tablets zu nutzen, die auch native Apps nutzen können.

(dpe)

Kategorien
E-Business Technik

CacheFly: Das pfeilschnelle Content-Delivery-Network

Geschwindigkeit ist zwar nicht alles, aber ein wichtiger Aspekt bei den meisten Webprojekten. Gerade wer große Datenmengen, wie Videos und andere multimediale Inhalte verbreitet, ist darauf angewiesen, dass diese schnell beim Nutzer ankommen. Zu häufiges Buffering oder lange Wartezeiten können schon dazu führen, dass Besucher sich von deiner Website verabschieden. Eine schnelle Übertragung solcher Inhalte funktioniert meist nur über ein Content-Delivery-Network (CDN) zuverlässig. Mit CacheFly steht dir ein solches CDN für eine schnelle, sichere und zuverlässige Übertragung zur Verfügung.

cachefly

Schnelle Übertragung – weltweit

ChacheFly zeichnet sich unter anderem dadurch aus, dass das Netzwerk weltweit an über 40 Internet-Knotenpunkte angeschlossen ist und somit eine denkbar schnelle Übertragung deiner Daten erlaubt. In Deutschland gehört der Knotenpunkt DE-CIX in Frankfurt zu den strategisch wichtigen Netzknoten. Denn DE-CIX ist, gemessen am Datendurchsatz, der größte Internet-Knoten weltweit.

Auch in Nordamerika und im übrigen Europa ist CacheFly an strategisch wichtige Knotenpunkte angeschlossen. Laut Messungen des Analysedienstes CloudHarmony gehört CacheFly in Nordamerika und Europa zu den schnellsten Content-Delivery-Networks. In den genannten Regionen kommt das CDN auf Datendurchsätze von über 18 Megabyte pro Sekunde bei großen Dateien. Aufgrund der vergleichsweise geringen Präsenz in anderen Regionen wie Afrika und Asien kommt der Dienst dort auf geringere Durchsätze.

cachefly_karte
Weltweite Points-of-Presents – vor allem in Nordamerika und Europa

Nichtsdestotrotz kann sich CacheFly in Sachen Geschwindigkeit sehen lassen und lässt auch Provider mit hiesigen Servern teils weit hinter sich.

Kosten zwischen drei und zehn Cent pro Gigabyte Traffic

Um dich von der Schnelligkeit von CacheFly zu überzeugen, kannst du den Dienst zwei Wochen unverbindlich testen. Die regulären Preise des Dienstes richten sich nach dem gesamten Traffic. Bleibst du unter 10 Terrabyte Traffic zahlst du 10 Cent pro übertragenem Gigabyte. Je höher der gesamte Traffic ausfällt, desto geringer ist der Preis pro Gigabyte. Ab 500 Terabyte zahlst du nur noch knapp drei Cent.

Die Kosten für den Webspace betragen für die ersten 10 Gigabyte zwei US-Dollar, für die nächsten 40 Gigabyte sind es 1,50 US-Dollar und alles darüber hinaus ein US-Dollar. Dabei wird dir nur tatsächlich in Anspruch genommener Webspace in Rechnung gestellt. Nutzt du also nur ein Gigabyte Speicher, zahlst du auch nur anteilig für diesen. In einer transparenten Übersicht werden dir alle Kosten für Webspace und Traffic in den jeweiligen Regionen – Nordamerika/Europa, Asien, Australien/Afrika sowie Südamerika/Indien – dargestellt. So hast du deine monatlichen Ausgaben immer im Blick.

Dabei werden jedoch mindestens 50 US-Dollar im Monat für die Nutzung des Dienstes in Rechnung gestellt. Wie du anhand der Preisgestaltung siehst, ist der Dienst vor allem für jene gedacht, die große Datenmengen zu übertragen haben. Bei den meisten „normalen“ Providern übersteigt man mit den genannten Volumina bereits den zur Verfügung stehenden Webspace, sowie den monatlichen Traffic.

Hochladen per FTP, Sicherheit per HTTPS

Deine Medieninhalte lädst du bequem über einen FTP-Zugang hoch. Du hast auch die Möglichkeit, zusätzliche FTP-Benutzer anzulegen, die bei Bedarf nur Zugriff auf bestimmte Verzeichnisse haben. Für deinen Account erhältst du eine Subdomain – Accountname gefolgt von „.cachefly.net“ –, über die du deine Inhalte abrufen kannst. So bindest du deine Inhalte auch bequem über dein Content-Management-System in dein Webprojekt ein.

cachefly_oeberflaeche
Einfache Bedienoberfläche

Auf Wunsch stehen dir alle Inhalte über eine sichere Verbindung per HTTPS zur Verfügung. Und dank Gzip-Komprimierung werden deine Inhalte noch schneller übertragen. So sorgt CacheFly für ein Optimum an Komprimierung und Schnelligkeit.

Falls du lieber deine eigene Domain nutzen möchtest, um Dateien von CacheFly abzurufen, kannst du Domains sowie Subdomains hinterlegen, über welche die Übertragung abgewickelt werden soll. Bei deinem Provider musst du dann die DNS-Einstellungen anpassen, so dass die Domain auf die IP-Adresse von CacheFly umgeleitet wird.

Einfach Expiry-Header anlegen

Gerade bei großen Dateien bietet es sich an, diese zu cachen, sodass ein Neuladen möglichst verhindert wird. Hier gilt es natürlich abzuwägen, wie lange eine Datei im Cache verweilen soll. Aber gerade Bilder bleiben ja ganz häufig unverändert, so dass ein großzügig angegebenes Verfallsdatum hinterlegt werden kann.

CacheFly stellt dir eine einfach zu bedienende Verwaltung für Expiry-Headers zur Verfügung. So legst du für einzelne Verzeichnisse sowie Dateitypen individuell fest, wie lange die zutreffenden Inhalte zwischengespeichert werden sollen. Bei Bedarf legst du mehrere Regeln für den Expiry-Header fest und priorisierst diese.

Ebenfalls sehr einfach blockierst du beliebige Referrer und überschreibst bei Bedarf MIME-Typen. Statt alle diese Angaben über eine „.htaccess“-Datei zu regeln, gibt es bei CacheFly eine übersichtliche Verwaltungsoberfläche, über die du all diese Einstellungen vornehmen kannst.

Umfangreiche Statistik – auch in Echtzeit

Damit du weißt, wann welche Inhalte heruntergeladen wurden, gibt es bei CacheFly eine umfangreiche Statistik. So erstellst du dir zum Beispiel tägliche Zusammenfassungen, kannst dir aber auch ausgeben lassen, über welche Knotenpunkte die Inhalte ausgeliefert wurden oder aus welchen Ländern die Requests kommen.

cachefly_statistik
Echtzeit-Statistik

Interessant und wichtig ist natürlich die Möglichkeit, eine Übersicht fehlerhafter Requests zu erhalten. So erstellt dir CacheFly etwa einen Report über alle 404-Fehler und teilt dir mit, auf welche nicht vorhandenen Dateien zugegriffen wurde.

In einer Betaphase befinden sich derzeit die Realtime-Statistiken. Diese geben Auskunft darüber, wie viele Requests pro Sekunde aktuell abgerufen werden. Alle Reporte und Statistiken lädst du dir bei Bedarf bequem als PDF-Datei herunter.

Bestens geeignet für Video- und Audioinhalte

Gerade bei Video- und Audioinhalten ist eine schnelle und zuverlässige Übertragung wichtig. Mit einer Verfügbarkeit von 100 Prozent garantiert dir CacheFly, dass deine Inhalte jederzeit zur Verfügung stehen. Ein Ausfall des Dienstes – auch für kurze Dauer – wird damit ausgeschlossen.

Aber nicht nur multimediale Inhalte sind bei CacheFly bestens aufgehoben. Du nutzt den Dienst beispielsweise auch, um Anwendungen zum Download bereitzustellen. Sind deine Kunden auf deine Software angewiesen, wird es sie mehr als ärgern, wenn diese nicht zuverlässig heruntergeladen werden kann.

cachefly_dienste
Nicht nur für Video- und Audioinhalte geeignet

Wenn du statt klassischer Anwendungen, Software-as-a-Service (Saas) anbietest, ist ein ausfallsicherer Dienst noch sehr viel wichtiger. Um deinen Anwendern zu garantieren, dass sie stets einen ausfallfreien und schnellen Zugriff auf deinen Dienst haben, ist CacheFly ebenfalls der richtige Partner für dich.

Fazit

Wer auf Sicherheit, Geschwindigkeit und Zuverlässigkeit setzt, ist bei CacheFly bestens aufgehoben. Der Dienst ist übersichtlich und einfach zu bedienen und bietet alles, um große Datenmengen weltweit, schnell und ausfallfrei zur Verfügung zu stellen.

Die Preise sind transparent und flexibel gestaltet. Die zweiwöchige Trial gibt dir die Möglichkeit, den Dienst ausgiebig zu testen. Im Vergleich zu deinem „normalen“ Provider wirst du deutliche Unterschiede in der Geschwindigkeit feststellen, mit der Dateien heruntergeladen werden.

(dpe)

Kategorien
Design E-Business

WebEngage: Multi-Channel-Marketing für deine Website

Die Interaktion mit den Besuchern deiner Website ist ein wichtiges Instrument, um die Zufriedenheit der Besucher festzustellen und diese zu binden. Gerade wer E-Commerce betreibt und einen eigenen Online-Shop pflegt, weiß, wie wichtig ein möglichst „direkter Draht“ zu seinen Kunden und anderen Besuchern ist. Mit WebEngage fügst du ohne großen Aufwand Formulare für einfaches Feedback sowie für komplexe Umfragen in deine Website ein. Dabei bedienst du nicht nur deine Website, sondern auch native Android- und iOS-Apps und kannst auch per E-Mail die Nutzer deiner Website erreichen.

webengage

Web und Mobilgeräte: Fünf Kanäle gleichzeitig nutzen

Das Besondere an WebEngage ist die Möglichkeit, neben der eigenen Website auch andere Kanäle – vor allem Mobilgeräte wie Smartphones und Tablets – zu benutzen. Neben „Web Messages“ – dazu gehören Notifications, Umfragen und Feedbackformulare – gibt es noch vier weitere Kanäle vor allem für die Nutzung mobiler Geräte.

So nutzt du WebEngage auch in nativen Android- und iOS-Apps. Dazu musst du bei Android-Apps den Paketnamen der App sowie den Key für „Google Cloud Messaging“ angeben. Bei iOS-Apps muss das entsprechende Zertifikat hochgeladen werden. Zur Nutzung von WebEngage auf deiner Website fügst du ein JavaScript-Snippet ein.

webengage_notifications_vorlagen
Galerie mit Notifications-Vorlagen

Für Apps stehen dir dann „Push Notifications“ und „In-App Messages“ zur Verfügung. Bei letzteren kannst du Umfragen und Notifications erstellen, die vom Prinzip denen der „Web Messages“ ähneln.

Darüber hinaus gibt es die Möglichkeit, per E-Mail mit den Nutzern deiner Website zu kommunizieren, insofern die E-Mail-Adresse bekannt ist. Geplant ist darüber hinaus auch die Kommunikation via Textnachricht.

Einfaches Anlegen von Umfragen und Notifications für Web und Mobilgeräte

Neben einem klassischen Feedback-Formular, welches standardmäßig von WebEngage auf deiner Website eingebunden wird, erstellst du nach Belieben eigene Umfragen und Notifications. Dazu stehen dir sowohl für deine Website als auch für Android- und iOS-Geräte zahlreiche Templates zur Verfügung, aus denen du auswählen kannst.

Dabei stehen nicht nur verschiedene Layouts, sondern auch verschiedene Positionen zur Auswahl. So gibt es klassische Notifications, die am Seitenrand angedockt sind sowie Lightbox-Notifications, die sich über den Inhalt legen, der dafür abgedunkelt dargestellt wird. Außerdem kannst du aus verschiedenen Farb-Themes wählen, mit denen du das Aussehen beeinflusst.

webengage_notifications_apps
Notifications in nativen Android- und iOS-Apps

Während du bei Umfragen verschiedene Frage- und Antwortmöglichkeiten festlegst – freiwillige und verpflichtende Angaben, freie Antwortmöglichkeit oder Auswahl an Möglichkeiten beispielsweise per Radio-Buttons –, hast du bei Notifications die Möglichkeit, Text, Call-to-Action-Link und je nach Template auch ein Bild frei zu definieren.

Auf Benutzereingaben und -verhalten reagieren

Hast du dich für eine Umfrage oder Notification aus den fünf nutzbaren Kanäle entschieden, musst du noch festlegen, wo auf deiner Seite und welchen Nutzern sie präsentiert werden soll. Beim „Web Messages“-Kanal legst du beispielsweise bestimmte URLs deiner Website fest, auf denen eine Message (Umfrage oder Notification) dargestellt werden soll. Auch über einen Cookie kannst du festlegen, wo deine Message erscheinen soll.

webengage_targeting
Targeting-Möglichkeiten für „Web Messages“

Dank des WebEngage-SDKs, das per JavaScript auf deiner Website und auch für deine iOS- und Android-App zur Verfügung steht, fragst du zahlreiche Informationen deiner Nutzer beziehungsweise Kunden ab.

So legst du beispielsweise Ereignisse an, auf die du mit einer Umfrage oder einer Notification reagieren kannst. Legt ein Kunde deines Shops ein Produkt in den Warenkorb, kannst du über WebEngage per SDK darüber informieren.

webengage.track("Added to Shopping Cart", {
    productId: 1337,
    product: "Great Book",
    price: 20.00,
    currency: "USD",
    quantity: 1
});

Wird die „track()“-Methode von einem Benutzer ausgelöst, steht dir in WebEngage das Verhalten „Zum Warenkorb hinzugefügt“ zur Verfügung. Du hast somit die Möglichkeit, auf dieses Ereignis zu reagieren.

Kanalübergreifende Nutzung

Da du sowohl auf deiner Website als auch auf Mobilgeräten gleichermaßen WebEngage nutzen kannst, hast du so die Möglichkeit, kanalübergreifend mit deinen Nutzern zu kommunizieren.

webengage_engagement
Ob Web oder App: WebEngage bündelt fünf Kanäle

Auf diese Weise kannst du deine Zielgruppe sowohl auf deiner Website als auch über deine App ansprechen. Hat sich ein Nutzer beispielsweise über deine Website ein Produkt angeschaut, kannst du ihn über die App daran erinnern, dass er sich dieses Produkt angesehen hat. Du erreichst deine Zielgruppe also auf allen Kanälen gleichermaßen und erhöhst somit die Wahrscheinlichkeit, deine Nutzer zu einer Aktion – zum Beispiel dem Kauf in deinem Shop – zu animieren.

Segmente erstellen für eine passgenaue Zielgruppe

Du kannst persönliche Daten deiner Nutzer an WebEngage übergeben. Stehen dir für registrierte und angemeldete Nutzer Informationen wie Name, E-Mail-Adresse, Geschlecht und Geburtstags zur Verfügung, kannst du diese ebenfalls per SDK übertragen. Dank dieser Informationen legst du eine passgenaue Zielgruppe für Umfragen und Notifications fest und kannst auch spezifische Nutzer erkennen und ansprechen.

webengage.user.identify("manfred.mustermann@example.com);
webengage.user.setAttribute({
  "we_first_name": "Manfred",
  "we_last_name": "Mustermann",
});

So hast du beispielsweise die Möglichkeit, deinen Besuchern beziehungsweise Kunden zum Geburtstag ein besonderes Angebot zu machen oder auf Produkte speziell für eine weibliche oder männliche Zielgruppe aufmerksam zu machen.

webengage_segmente
Segmentierung deiner Zielgruppe

Auch ein lokaler Bezug ist möglich. Dabei wählst du nicht nur Länder aus, sondern auch Regionen (zum Beispiel in Deutschland die Bundesländer) und Städte. Zusätzlich grenzt du die Zielgruppe auf bestimmte Herkunftsadressen ein. So kannst du deine Umfrage etwa nur den Besuchern anzeigen lassen, die über Facebook oder eine andere Website zu dir gekommen sind.

Auch möglich: Berücksichtigung technischer Spezifikationen

Ebenfalls möglich ist die Berücksichtigung von Browser, Gerätetyp (Desktop, Tablet oder Smartphone) sowie Betriebssystem. Dank der zahlreichen Informationen, die WebEngage eigenständig abgreift wie Browser und Betriebssystem, sowie der Informationen, die du per SDK übergibst, entsteht ein umfangreiches Bild der Besucher deiner Website sowie deiner Apps.

webengage_umfrage_statistik
Statistik über Umfragen

Insgesamt lässt sich mit den individuell zusammenstellbaren Merkmalen eine recht spezifische Zielgruppe für deine Umfrage definieren. Über sogenannte Segmente legst du sehr genau fest, welche Nutzer du ansprechen möchtest. So kannst du zum Beispiel gezielt alle Benutzer ansprechen, die ein bestimmtes Produkt in ihren Einkaufswagen gelegt haben und gleichzeitig aus einer bestimmten Region kommen oder ein bestimmtes Alter haben.

Denen könntest du dann eine Umfrage anbieten oder per Notification passende Produkte empfehlen.

Insgesamt sind die Einstellungsmöglichkeiten sehr groß, dabei jedoch einfach zu bedienen. Jede Umfrage und Notification aktivierst und deaktivierst du übrigens ebenso einfach. Dank einer aussagekräftigen Statistik hast du immer genau im Blick, wie oft deine Umfrage eingeblendet wurde, wie oft versucht wurde, an der Umfrage teilzunehmen und wie häufig die Umfrage tatsächlich abgeschlossen wurde.

Natürlich erhältst du zu den einzelnen Ergebnissen aussagekräftige Statistiken und Diagramme, die du etwa als PDF-Datei abrufen kannst. So erfährst du dank übersichtlicher Schaubilder, wie einzelne Fragen beantwortet wurden und woher die Benutzer stammen, die an der Umfrage teilgenommen haben.

Benutzerprofile auswerten

Neben den einfachen Statistiken zu einzelnen Feedbacks, Umfragen und Notifications gibt es eine ausführliche Möglichkeit, Informationen zu den Benutzern von WebEngage abzufragen. Dazu wird zu jedem Benutzer ein Profil angelegt, das Informationen dazu sammelt und speichert. Hierzu zählen zum Beispiel die geografische Herkunft des Nutzers, das verwendete Betriebssystem, der genutzte Browser und die Auflösung des Monitors, die der Nutzer während des Besuchs auf der Website verwendet hat.

webengage_segmente_profil
Benutzerprofil mit allen verfügbaren Informationen

Auch die IP-Adresse sowie das Datum des ersten und letzten Besuchs auf deiner Website werden gespeichert und dir übersichtlich in der Profilansicht dargestellt. Die Statistiken verraten dir zudem, wie viele aktive Nutzer du in der Vergangenheit hattest und ob es sich um neue oder wiederkehrende Benutzer handelt.

Die per SDK übermittelten Eigenschaften wie Name und E-Mail-Adresse werden dir ebenfalls in der Nutzerstatistik angezeigt. Je mehr Informationen WebEngage sammeln konnte, desto umfangreicher ist das Profil, das dir für jeden Nutzer zusammengestellt wird.

WebEngage unterscheidet im Übrigen zwischen Benutzern und Kontakten. Hat es mit einem Nutzer eine Interaktion gegeben, wird er als Kontakt gelistet. Über den Punkt Akquisition werden neue Nutzer neuen Kontakten gegenübergestellt. So erfährst du, wie viele Nutzer du zu deinen Kontakten gemacht hast.

Preise und Fazit

WebEngage stellt dir einfache und effektive Möglichkeiten zur Verfügung, direkt und prägnant mit den Besuchern deiner Website zu interagieren. Du holst Feedback ein, machst Umfragen und informierst über aktuelle Angebote. Der kostenfreie „Personal“-Tarif stellt dir dabei viele Möglichkeiten zur Verfügung, sofern du nicht mehr als 10.000 monatliche Nutzer hast.

webengage_notifications_plaene
Kostenlose und kostenpflichtige Pläne

Darüber hinaus gibt es drei kostenpflichtige Tarife ab 499 US-Dollar im Monat. Neben mehr Nutzern im Monat stehen dir zusätzliche Features zur Verfügung. Dazu gehört das individuelle Gestalten der Formulare und Notifications sowie die Möglichkeit, A/B-Tests durchzuführen.

Wer keinen allzu großen Online-Shops betreibt, findet aber bereits im „Personal“-Plan viele nützliche Möglichkeiten, mehr aus seinem Shop zu machen. In einer Beta-Phase befindet sich derzeit ein E-Mail-Dienst, über den du deine Kunden (oder andere Kommunikationspartner) anschreiben kannst. In Planung ist zudem ein Messaging-Dienst, mit dem du Textnachrichten verschicken kannst.

Für die Nutzung im E-Commerce sowie für Spiele und Reisen stehen dir vordefinierte Demoversionen zur Verfügung, die jeweils gängige Beispiele parat haben.

(dpe)

Kategorien
E-Business SEO & Online-Marketing Webdesign

Gewinnmaximierung: Anzeigen optimieren mit Ezoic

Geld mit Werbung zu verdienen, ist keine einfache Angelegenheit. Zwar machen es Dienste wie Google AdSense Websitebetreibern durchaus einfach, Werbung beispielsweise im eigenen Blog zu schalten. Aber die bloße Präsenz diverser Werbeanzeigen macht Werbung noch lange nicht erfolgreich. Die Platzierung sowie die Größe der Anzeigen spielen eine wichtige Rolle dabei, wie Werbeanzeigen von den Besuchern deiner Website wahrgenommen werden. Mit dem Ad-Tester von Ezoic findest du heraus, wie du deine Anzeigen erfolgreich auf deiner Website unterbringst.

ezoic

Anmelden, Website integrieren und loslegen

Hast du dich kostenlos bei Ezoic angemeldet, musst du zunächst deine Website hinterlegen. Dies funktioniert unter anderem mit einem JavaScript-Snippet, den du in deinen HTML-Dokumenten platzierst. Aber auch per DNS-Einstellung ist die Einbindung möglich, insofern dein Provider mitspielt. Es kann eine Weile dauern, bis Ezoic deine Website integriert hat. Im Dashboard des Dienstes wirst du über den jeweiligen Stand der Integration informiert.

ezoic_start
Integration deiner Website, Setup des Ad-Testers und „Turn on“

Anschließend kannst du damit beginnen, den Ad-Tester zu konfigurieren. Dazu muss zunächst ein weiteres JavaScript-Snippet eingebunden werden, welches speziell für das Ad-Testing gedacht ist.

Ad-Units erstellen und auf deiner Website platzieren

Hast du die Konfiguration soweit erledigt, erstellst du sogenannte Ad-Units. Dabei handelt es sich um unterschiedliche Platzhalter für verschiedene Anzeigenformate. Insgesamt stehen dir vier verschiedene Units zur Verfügung: Display-, Native-Horizontal-, Native-Vertical- sowie Link-Ad-Units.

ezoic_adtester
Der Ad-Tester

Die Display-Ad-Units stellen klassische Anzeigenformate dar. Sie existieren in verschiedenen Größen, unter anderem als Leader, Banner, Square und Skyscraper. Du wählst für jede Unit selbst aus, welche Größen auf deiner Website verwendet werden sollen. Bei jeder Unit entscheidest du zudem, ob die Anzeige auf Desktopgeräten, Smartphones und beziehungsweise oder Tablets dargestellt werden soll. Einige Größen sind ohnehin nur auf bestimmten Geräte möglich.

Die Native-Horizontal- und Native-Vertical-Ad-Unist haben keine feste Größe, sondern richten sich nach der Größe des Browserfensters beziehungsweise Displays. Die Link-Ad-Units sind spezielle Anzeigen, die eine Liste von Links zu Websites darstellen. Auch diese sind in verschiedenen Größen zu bekommen.

ezoic_adtester_adunit
Ad-Unit mit allen möglichen Anzeigengrößen und Geräten

Zu jeder Unit, die du erstellst, erhältst du einen HTML-Snippet, den du in deine Website platzierst. Um eine möglichst große Vielfalt an unterschiedlichen Anzeigegrößen und -positionen zu erhalten, solltest du 25 bis 30 Units in jede zu testende Seite integrieren. Ezoic wird natürlich nie alle platzierten Units darstellen.

Für jeden Unit musst du eine Platzierung angeben. Insgesamt stehen acht verschiedene Platzierungsmöglichkeiten zur Auswahl. Mögliche Lokationen sind unter anderem der obere und untere Seitenrand, die Sidebar sowie unterhalb des ersten oder zweiten Absatzes. Ezoic wird pro Platzierung nur eine Anzeige darstellen.

Units und AdSense gemeinsam nutzen

Setzt du bereits Google AdSense auf deiner Website ein, kannst du deine AdSense-Anzeigen ebenfalls mit dem Ad-Tester von Ezoic kombinieren. Dazu umschließt du den Snippet deiner AdSense-Anzeigen einfach mit einem Snippet einer Ad-Unit.

Ist der Ad-Tester nicht im Einsatz, wird einfach wie gewohnt eine AdSense-Anzeige ausgegeben. Ist der Ad-Tester aktiv, wird die AdSense-Anzeige mit einer Anzeige der Ad-Unit überschrieben.

Ezoic für Gerätetypen einschalten und Ad-Tester starten

Um deine konfigurierten Ad-Units zu testen, musst du nun noch Ezoic einschalten. Dazu wechselst du zunächst zu „Turn Ezoic On & Off“. Dort schaltest du für jeden Gerätetyp – also Desktop, Tablet und Smartphone – den Dienst ein und aus. Über einen Schieberegler entscheidest du zudem, wie viel Prozent deiner Besucher einen von Ezoic erstellten Ad-Test sehen sollen und wie viel Prozent der Besucher deine „normale“ Seite mit den gegebenenfalls vorhandenen AdSense-Anzeigen sehen sollen.

ezoic_turnon
Ad-Tester für verschiedene Geräte einschalten

Gibst du also bei Desktopgeräten 50 Prozent an, sehen die Hälfte deiner Besucher deine Website wie gewohnt und die andere Hälfte bekommt einen Ad-Test zu sehen, bei dem jeweils unterschiedlich zusammengestellte Anzeigenformate und -positionen ausgegeben werden.

Jeder Besucher bekommt also eine andere Zusammenstellung zu sehen. Für jeden Besuch wird von Ezoic ausgewertet, wie erfolgreich die jeweilige Zusammenstellung war. Je mehr Ad-Units auf einer Seite platziert sind, desto mehr Kombinationen können getestet und ausgewertet werden. Umso aussagekräftiger ist später auch das Ergebnis des Tests.

So erfährst du, welche Anzeigengrößen und -platzierungen die meisten Einnahmen generieren und kannst die Anzeigen auf deiner Website entsprechend anpassen.

Chrome-Erweiterung für einfache Platzierung von Ad-Units

Für Chrome existiert eine Erweiterung von Ezoic, mit der du dir alle Platzhalter-Anzeigen darstellen kannst. Im Normalfall sind die Platzhalter ja nie sichtbar, sondern nur ein Teil der Platzhalter wird mit Anzeigen gefüllt – und das auch nur für jene Besucher, die am Ad-Test teilnehmen.

Hast du für die einzelnen Ad-Units unterschiedliche Größen angegeben, kannst du dir jede mögliche Größe im Browser darstellen lassen. So bekommst du einen Eindruck davon, wie die einzelnen Anzeigen aussehen können.

ezoic_extension
Darstellung der Anzeigen-Platzhalter mit der Chrome-Erweiterung

Die Erweiterung hilft dir also, den Überblick über alle eingebundenen Ad-Units zu behalten. Außerdem hast du die Möglichkeit herauszufinden, ob die ein oder andere Anzeigengröße möglicherweise zu Problemen mit dem Layout deiner Seite führt.

Mit der Erweiterung hast du zudem die Möglichkeit, zusätzliche Platzhalter für Ad-Units auf deiner Website zu platzieren. So testest du vorab, welche Anzeigengrößen und -platzierungen möglich beziehungsweise welche problematisch sind.

AdSense-Account mit Ezoic verknüpfen

Optional hast du die Möglichkeit, deinen AdSense-Account mit deinem Ezoic-Account zu verknüpfen. Dies geschieht mit der sogenannten Mediation-App. Die Verknüpfung von AdSense mit Ezoic bietet dir einige Vorteile.

So werden bei Ad-Tests beispielsweise auch deine AdSense-Anzeigen mit berücksichtigt, die bei den Tests ansonsten nicht zum Zuge kommen. Außerdem erhältst du in Ezoic auch Berichte über deine AdSense-Anzeigen.

Ezoic 30 Tage testen und jederzeit kündigen

Um Ezoic zunächst ausgiebig testen zu können, steht dir der Dienst 30 Tage kostenfrei zur Verfügung. Anschließend musst du dich entscheiden, ob du den Dienst weiterhin kostenlos nutzen willst – über eine Werbeeinblendung von Ezoic – oder ob du zahlender Kunde werden willst. Die monatlichen Kosten für dich sind abhängig von den Werbeeinnahmen, die du mit Ezoic erzielst.

ezoic_services
Alle Dienste von Ezoic im Überblick

Bei bis zu 2.500 US-Dollar Einnahmen zahlst du 39 US-Dollar im Monat. Für nicht-kommerzielle und gemeinnützige Organisationen ist Ezoic kostenfrei. Du legst du dazu einfach einen Account an und wendest dich an die Mitarbeiter von Ezoic.

Fazit

Das Testen von Anzeigen wird mit dem Ad-Tester von Ezoic zu einem recht einfachen Unterfangen. Statt mühsam selbst unterschiedliche Anzeigenformate zu platzieren und den Erfolg auszuwerten, übernimmt Ezoic hier den Großteil der Arbeit für dich. Aussagekräftige Statistiken halten dich auf dem Laufenden, welche Anzeigenformate, -größen und -platzierungen erfolgreich sind.

Ezoic bietet übrigens neben dem Ad-Tester noch weitere Dienste an, mit denen du zum Beispiel Layouts und Inhalte für deine Website testen kannst. Ein Blick in den Ad-Tester und die anderen Dienste von Ezoic lohnt sich also auf jeden Fall.

(dpe)

Kategorien
Design HTML/CSS UI/UX Webdesign

Mobile Navigation mit Taps und Gesten statt Maus

Das mobile Internet hat in vielerlei Hinsicht die Gewohnheiten, wann, wie und wo wir das World Wide Web nutzen, stark beeinflusst. So hat sich vor allem die Art und Weise, wie wir durch Websites navigieren, verändert. War die Maus bis vor einigen Jahren maßgeblich für die Navigation verantwortlich, sind es auf Smartphones und Tablets nun Taps und Gesten mit mehr oder weniger Fingerspitzengefühl. Zeitgemäße Websites sollten daher Taps und Gesten deutlich berücksichtigen, wenn es um Benutzeroberflächen und mobile Navigation geht.

Das Problem mit dem Hover

Grundsätzlich funktioniert die Navigation auf einem Smartphone oder Tablet  ohne besonderes Augenmerk auf Taps und Gesten zu setzen. Links werden statt Klick per Tap geöffnet und das Scrollen funktioniert per Wischen über das Display. Doch schon bei Hovereffekten, die im Webdesign gängig und beliebt sind, hat man auf Mobilgeräten so seine Probleme.

Denn ein Hovereffekt – beispielsweise per CSS-Pseudoklasse „:hover“ – existiert auf Mobilgeräten schlicht nicht und wird daher wie das Aufrufen von Links per Tap ausgelöst. Versiehst du also Links mit Hovereffekten, werden Linkaufruf und Hovereffekt auf Mobilgeräten zusammen ausgeführt. Im besten Fall sieht der Besucher den Hovereffekt für kurze Zeit, bis die im Link referenzierte Seite aufgerufen wurde.

hover-navigation
Navigation per Hovereffekt auf Fotolia

Als Webentwickler kannst du natürlich grundsätzlich auf Hovereffekte verzichten, um eine einheitliche Benutzeroberfläche auf Desktop- und Mobilgeräten zu garantieren. Oder du du entscheidest dich dafür, auf Desktop- und Mobilgeräte einen unterschiedlichen Ansatz zu wählen. Ist der Hovereffekt ausschließlich schmückendes Beiwerk, solltest du ihn auf Mobilgeräten einfach weglassen.

Werden Information wie Texte über einen Hovereffekt angezeigt, solltest du auf Mobilgeräten eine Möglichkeit finden, diese so darzustellen, dass sie ohne Hovereffekt sichtbar sind.

Media Query und „pointer“

Zwar gibt es per CSS keine explizite Möglichkeit, zwischen Steuerung per Maus und Touchdisplays zu entscheiden. Aber die „pointer“-Angabe erlaubt dir die Unterscheidung zwischen hoher und begrenzter Genauigkeit beim Zeiger. Bei Geräten mit Touchdisplays gibt „pointer“ den Wert „coarse“ aus, was für eine begrenzte Genauigkeit steht. Bei anderen Geräten wird „fine“ für eine hohe Genauigkeit ausgegeben.

@media (pointer: fine) {
  a:hover p {
    display: block;
  }
}

Im Beispiel wird ein Absatz innerhalb eines Links nur dann per Hover angezeigt, wenn du mit einem Gerät unterwegs bist, welches eine hohe Genauigkeit beim Zeiger aufweist, sie also mit der Maus gesteuert wird. Auf diese Weise hast du ohne Einsatz von JavaScript die Möglichkeit, das Aussehen deiner Website je nach Bedienkonzept – Maus oder Touch – zu steuern.

Links und Buttons brauchen Raum

Neben Hovereffekten gibt es noch einen weiteren Aspekt, den du bei der Gestaltung mobiler Benutzeroberflächen berücksichtigen solltest. Das sind die Größe und Abstände von Links und Buttons.

touch-navigation
Beispiel für Menüs mit ausreichender Größe: Google+ und FontShop

Während du mit der Maus recht genau auch kleine Links und Buttons zielsicher erreichst, ist ein Tap per Finger nicht ganz so zielsicher. Daher solltest du vor allem im mobilen Layout auf ausreichend große Elemente achten. Ebenfalls wichtig ist, dass du ausreichend Platz zwischen den einzelnen Elementen lässt. So verhinderst du, dass versehentlich ein falscher Link aufgerufen oder Button ausgewählt wird.

Willst du hier zwischen Desktop- und Mobilansicht unterscheiden, kannst du ebenfalls die „pointer“-Angabe nutzen, um beispielsweise Menüs und Formulare unterschiedlich zu gestalten.

Die Gestaltung solcher Elemente von der Displaybreite eines Gerätes – wie im responsiven Weblayout üblich – abhängig zu machen, ist wenig sinnvoll. Schließlich werden auch Tablets, auf denen in der Regel des Desktoplayout dargestellt wird, per Taps und Gesten gesteuert.

Auf Gesten per JavaScript reagieren

Standardmäßig werden Links und Buttons mit einem einfachen Tap auf Mobilgeräten ausgelöst. Aber du kannst auch auf Gesten reagieren, indem du Touch-Events einsetzt. Diese sind ähnlich aufgebaut wie die bekannten Mouse-Events. So gibt es Ereignisse, die zu Beginn und Ende einer Berührung, sowie während der Bewegung auf dem Display ausgelöst werden.

document.getElementsByTagName("body")[0].addEventListener("touchmove", function(e) {
  console.log(e.touches[0].pageX);
  console.log(e.touches[0].pageY);
}, false);

Im Beispiel löst das Ereignis „touchmove“ eine Funktion aus, welche die Position der Berührung im Browser – „pageX“ und „pageY“ – in die Konsole schreibt. Über „touches[]“ werden im Übrigen alle Berührungen als Array erfasst. Sind also zwei Finger gleichzeitig auf dem Display, stehen dir mit „touches[0]“ „touches[1]“ beide Bewegungen und somit deren Positionen zur Verfügung.

hammerjs_gesten

Von Hammer-JS unterstützte Gesten

Auf diese Weise regierst du auf Wischgesten sowie auf Gesten zum Drehen und zum Vergrößern. Da JavaScript keine konkreten Gesten erkennt, musst du dir diese selbst mit den Touch-Events erstellen oder setzt auf entsprechende Frameworks wie Hammer.JS, welches bekannte Gesten kennt und auf solche mit individuellen Aktionen beziehungsweise Funktion reagieren kann.

Long-Tap ist das „neue“ Hover

Mit Hammer.JS realisierst du auch sogenannte Long-Taps. Dabei bleibt der Finger für eine kurze Zeit auf dem Display. Häufig wird ein solcher Long-Tap eingesetzt, um Kontext- oder Pulldown-Menüs aufzurufen.

Long-Taps haben den Vorteil, dass sie ähnlich wie der Hover-Effekt bei der Maus zwei verschiedene Aktionen für ein Element ermöglichen. So wird auf Desktopgeräten häufig mit der Maus ein Dropdown-Menüs per Hover-Effekt ausgeklappt wird, während der Klick einzelne Menüpunkte aufruft. Per Long-Tap realisierst du auch auf Mobilgeräten die Möglichkeit, ein Dropdown-Menü aufzuklappen, ohne direkt einen Menüpunkt aufzurufen.

Der Long-Tap kann auf Mobilgeräten somit als eine Art Hover-Ersatz genutzt werden. In jedem Fall solltest du berücksichtigen, ob deine Gesten und Taps intuitiv sind und vom Benutzer entsprechend angewendet werden können.

Fazit

Es ist nicht einfach, die gewohnten Bedienkonzepte, die wir mit der Maus kennen, auf Mobilgeräte und Touchdisplays zu übertragen. Allerdings haben sich in den letzten Jahren viele Gesten etabliert – Wisch- und Pinch-Gesten zum Beispiel –, die du in die Navigation deiner Website übernehmen kannst.

Auch der Long-Tap ist als Alternative für den Hovereffekt etabliert. Nichtsdestotrotz bleibt festzuhalten, dass beide Bedienkonzepte – Maus und Touch – ihre Unterschiede haben und diese auch Berücksichtigung finden müssen.

(dpe)

Kategorien
Webdesign

Sicher ist sicher: Warum HTTPS für deine Website sinnvoll ist

Bislang waren sichere TLS-Verbindung für Websites nur dann obligatorisch, wenn personenbezogene beziehungsweise sensible Daten übertragen wurden. Das ist vor allem beim Online-Banking, aber auch bei E-Shops und sozialen Netzwerken der Fall. Doch dies soll sich ändern. Vor allem Google forciert mit seiner Initiative „HTTPS everywhere“ seit einigen Jahren die standardmäßige Verbreitung von sicheren Verbindungen für alle Websites.

castle-1461009_1280

Offene Funknetze

Für die meisten Websites gab es bislang kaum eine Notwendigkeit, diese per HTTPS auszuliefern. Nachrichtenseiten, Websites von Unternehmen und Organisationen kamen immer gut ohne verschlüsselte Übertragung aus. Und bei „einfachen“ Kontaktformularen war und ist es bislang üblich, diese unverschlüsselt zu übertragen. Dennoch muss sich jeder bei einer Übertragung ohne sichere Verbindung bewusst sein, dass die übertragenen Daten unverschlüsselt sind und von Dritten ausgelesen werden können – vor allem in offenen Funknetzen ist das problematisch.

Mit der wachsenden Bedeutung des mobilen Internets bewegen wir uns mit unseren Smartphones und Tablets immer häufiger in öffentlichen WLANs. Damit steigt auch die Gefahr, dass die Kommunikation zu den von dir besuchten Websites abgefangen wird. Daher ist es sinnvoll, grundsätzlich auf eine sichere HTTPS-Verbindung zu setzen, auch wenn keine sensiblen Daten übertragen werden – ganz im Sinne deiner Privatsphäre.

Google forciert HTTPS

So ist es vor allem Google mit seiner Initiative „HTTPS everywhere“ zu verdanken, dass sichere Verbindungen als Standard zunehmend eine größere Rolle spielen. Spätestens die Ankündigung Googles im Jahr 2014, HTTPS als Rankingfaktor einzuführen, hat für eine größere Aufmerksamkeit für das Thema gesorgt. Allerdings hat Google selbst erklärt, dass derzeit nur ein Prozent der weltweiten Suchanfragen von diesem Rankingfaktor betroffen seien. Aber der Konzern hat ebenso mitgeteilt, dass er HTTPS als Rankingfaktor jederzeit deutlich höher bewerten könnte, um den Wechsel von HTTP zu HTTPS anzuregen.

https-chrome
Warnhinweis bei HTTP-Verbindungen in Chrome

Darüber hinaus hat Google seinem Browser Chrome ein derzeit noch standardmäßig deaktiviertes „Feature“ verpasst, welches nicht sichere Websites – also solche, die nur per HTTP ausgegeben werden – mit einem rot durchgestrichenem Vorhängeschloss kennzeichnet. Schon jetzt kannst du über „chrome://flags“ dieses Feature aktivieren. Suche in den Einstellungen einfach nach „Nicht sicheren Ursprung als nicht sicher markieren“.

https-chrome-flag
Einstellungen für nicht sichere Verbindungen

Sollte Chrome diese Einstellung einmal standardmäßig aktivieren, würden alle einfachen HTTP-Verbindungen mit diesem Warnhinweis gekennzeichnet, während HTTPS-Verbindungen wie auch jetzt bereits mit einem grünen Vorhängeschloss gekennzeichnet würden. Besucher deiner Website könnten von dem Warnhinweis abgeschreckt werden und eine potenziell unsichere oder nicht vertrauenswürdige Website vermuten.

JavaScript-APIs nur für sichere Verbindungen

Die Kennzeichnung unsicherer Verbindungen ist jedoch nicht das einzige, was HTTP von HTTPS in deinem Browser unterscheidet. Moderne JavaScript-APIs, die beispielsweise den Zugriff auf Webcam und Mikrofon erlauben, lassen sich im Chrome und anderen Browsern ausschließlich per HTTPS ausführen.

https-chrome-kamerazugriff
Kamerazugriff nur per HTTPS möglich

Seit der Version 50 von Chrome ist es im Übrigen auch nicht mehr möglich, die Geolocation-API über eine unsichere Verbindung auszuführen. Konnte man den Standort eines Nutzers bislang über eine einfache HTTP-Verbindung auslesen, ist fortan zwingend HTTPS erforderlich.

Nicht auszuschließen ist, dass Google Chrome künftig weitere APIs nur in Kombination mit einer sicheren Verbindung ausführt. Angekündigt ist bereits, die Orientation- sowie die Fullscreen-API demnächst ebenfalls nur noch per HTTPS zuzulassen.

Kostenlose Zertifikate per „Let’s Encrypt“

Ein Grund gegen sichere Verbindungen war bislang für viele sicherlich der finanzielle Aspekt. Denn eine HTTPS-Verbindung gibt es nicht ohne Zertifikat. Und diese lassen sich Provider beziehungsweise die Aussteller solcher Zertifikate gut bezahlen. Mit der Initiative „Let’s Encrypt“ erstellst du dir jedoch ganz kostenfrei ein Zertifikat für deine Domains.

letsencrypt
Website von „Let’s Encrypt“

Und da die Zertifikate von „Let’s Encrypt“ mittlerweile von allen großen Browsers akzeptiert werden, besteht auch nicht die Gefahr, dass dein Browser einen Warnhinweis wegen eines unbekannten Ausstellers ausgibt. Die ersten Provider haben das Erstellen von „Let’s Encrypt“-Zertifikaten bereits in ihre Tarife übernommen, so dass du schnell und unkompliziert zu einer sicheren Verbindung für deine Website kommst. Hier bei Dr. Web haben wir bereits dazu geschrieben.

Fazit

Das Ranking bei Google mag noch keine große Rolle spielen, aber neue Sicherheitseinstellungen im Browser könnten schon bald dazu führen, dass kein Weg mehr an HTTPS vorbeiführt. Und dank „Let’s Encrypt“ gibt es eine kostenlose und – je nach Provider – einfache Möglichkeit, deine Website auch im Sinne des Datenschutzes deiner Besucher sicherer zu machen.

(dpe)

Kategorien
Design Editoren HTML/CSS Webdesign

XPRS: Responsiver, modularer und umfangreicher Websitebuilder

Unter den zahlreichen Websitebuildern sticht der XPRS Editor vor allem durch sein sehr elegantes und stimmiges Design hervor. Die Benutzeroberfläche ist sehr ansprechend und einfach zu bedienen. Wer auf zeitgemäßes Design und ebenso zeitgemäße Technik setzt, wird mit XPRS sehenswerte Websites erstellen können. Dabei werden auch Features wie das eigene Blog oder der eigene Shop unterstützt.

xprs

Umfangreiche und elegante Themes

Hast du dir einen kostenlosen Account beim XPRS Editor eingerichtet, wählst du zunächst ein Theme aus. Die Themes sind in zahlreiche Kategorien einsortiert, die sich unter anderem nach Branchen richten. Hier finden Kreative ebenso ein passendes Theme wie Restaurantbetreiber und Immobilienmakler.

xprs_themes
Übersicht einiger der zahlreichen Themes

Alle Themes sind responsiv und verfügen über eine umfangreiche Vorschau. So erhältst du zu jedem Theme eine Desktop- und Mobilansicht sowie die Vorschau zu einigen exemplarischen Seiten. Du weißt also bei der Auswahl deines Themes schon ziemlich genau, wie dieses später aussieht, wenn du deine Inhalte platzierst.

xprs_themes_vorschau
Vorschau eines Themes

Hast du dich für ein Theme entschieden, beginnst du direkt damit, die Inhalte deiner neuen Website zu bearbeiten.

Seite mit Segmenten bauen

Jedes Theme ist mit einigen exemplarischen Inhalten ausgestattet. Diese kannst du nutzen, um davon ausgehend die Startseite deiner neuen Website mit Inhalt zu befüllen. Alle Elemente einer Seite sind individuell anpassbar.

xprs_segmente
Aufteilung einer Seite in Segmente

Das Besondere am XPRS Editor ist der modulare Aufbau einer Seite mit sogenannten Segmenten. Segmente stellen unterschiedliche inhaltliche Bereiche einer Seite da. Texte, Bilder, Text-Bild-Kompositionen, Formulare und Galerien sind einige der zahlreichen Segmente, die du frei auf einer Seite platzierst.

Für jedes Segment stehen dir individuelle Einstellungen zur Verfügung. Welche Einstellungen das jeweils sind, hängt vom Segmenttyp ab. Bei einer Galerie wählst du beispielsweise die Platzierung der Bilder, die Anzahl der Bilder pro Reihe sowie den Abstand der Bilder zueinander aus.

xprs_segmente_auswahl
Auswahl eines der zahlreichen Segmente

Natürlich kannst du Segmente auch innerhalb einer Seite verschieben und sie auch wieder löschen. Ebenfalls möglich ist es, Segmente zu kopieren und an anderer Stelle deiner Website wieder einzufügen.

Um das responsive Weblayout der einzelnen Segmente musst du dir keine Gedanken machen. Der Websitebuilder sorgt automatisch dafür, dass alle Inhalte auch auf Mobilgeräten ordentlich aussehen.

Effekte hinzufügen

Kaum eine zeitgemäße Website kommt mittlerweile ohne Animationseffekte aus. Modernes CSS3 und JavaScript ermöglichen interessante Effekte, die du auch im XPRS Editor nutzen kannst. So gibt es klassische Hofer-Effekte, die du zum Beispiel in deiner Galerie anwendest.

xprs_effekte
Effekte zu einem Segment hinzufügen

Aus einer Liste wählst du einen Effekt aus. Dazu gehören Vergrößerungs- und 3D-Kippeffekte. Auch ist es mittlerweile üblich, beim Scrollen einer Seite jene Elemente, die in die Seite hinein gescrollt werden, mit einem Effekt zu versehen. Auch hierfür stellt dir der Baukasten Einiges zur Verfügung.

Eigener Shop in Kooperation mit Shoprocket

So einfach du eine Galerie zu deiner Seite hinzufügst, so einfach integrierst du auch einen eigenen Shop in deine Seite. Dazu hinterlegst du einfach ein Foto sowie eine Beschreibung für dein Produkt und gibst einen Preis an.

xprs_themes_ecommerce
Shop als Segment hinzufügen

Die komplette Kaufabwicklung einschließlich Warenkorb und Bezahlung wird vom XPRS Editor beziehungsweise vom Shopsystem Shoprocket übernommen. Dazu richtet dir XPRS automatisch einen Account bei dem Shopsystem ein. Über diesen Account verfolgst du deine Bestellungen und legst beispielsweise Zahlungsmethoden fest.

xprs_shoprocket
Anbindung an Shoprocket

Derzeit werden Zahlungen per Kreditkarte und per PayPal angeboten. Eine Zahlung per Bitcoins soll noch folgen.

Blog hinzufügen

Ähnlich einfach ist das Hinzufügen eines eigenen Blogs zu deiner Seite. Dieses ist ebenfalls als Segment vorhanden und wird einfach an einer beliebigen Stelle auf deiner Website platziert.

Dieses Segment stellt verlinkte Teaser zu den einzelnen Blogbeiträgen dar. Über die Einstellungen fügst du neue Beiträge zu deinem Blog hinzu und verwaltest bestehende.

xprs_blog
Einfaches Hinzufügen eines Blogs

Blogbeiträge stellst du dir wie andere Seiten ebenfalls sehr individuell zusammen, indem du Segmente hinzufügst. So kombinierst du Texte, Bilder und andere Elemente ganz nach Belieben.

Bilder lädst du ohnehin von deinem Rechner hoch und verwaltest diese über ein Media Center. Dort stehen dir auch eine Vielzahl frei verfügbarer Bilder zur Verfügung, die du beispielsweise für Blogbeiträge nutzen kannst.

Seiten verwalten und hinzufügen

Auch wenn One-Pager für Websites nach wie vor beliebt sind, erstellst du mit dem Websitebuilder natürlich auch komplexe Websites mit mehreren Seiten. Über die Seitenverwaltung legst du Seiten an und fügst ein Menü zu deiner Website hinzu.

xprs_website
Auswahl eines Menüs für deine Website

Es gibt klassische Seitenmenüs sowie jene, die am oberen Seitenrand fixiert sind. Du kannst dich auch für ein derzeit sehr beliebtes Burger-Menü entscheiden. Insgesamt stehen dir neun verschiedene Menütypen zur Auswahl.

Vorschau und Veröffentlichung

Sind alle Seiten angelegt und mit Inhalt gefüllt, kannst du dir diese für verschiedene Geräte als Vorschau anzeigen lassen. Neben der Desktopansicht siehst du dir deine Website für Smartphones sowie Tablets an.

xprs_vorschau
Vorschau auf verschiedenen Geräten

Für die Veröffentlichung deiner Website stehen dir verschiedene Möglichkeiten zur Verfügung. Falls du keine eigene Domain hast oder nutzen möchtest, legt dir der XPRS Editor eine URL an.

Darüber hinaus kannst du deine Website auch über eine eigene Domain laufen und auch eine Domain über den XPRS Editor registrieren lassen.

SEO und eigener Header

Damit deine neue Website auch gefunden wird, gibt es einige zusätzliche SEO-Eigenschaften. So legst du fest, ob Suchmaschinen deine Website überhaupt indizieren sollen. Außerdem gibst du Titel, Beschreibung und Schlüsselwörter an.

xprs_themes_seo
SEO-Einstellungen

Falls du Google Analytics nutzen möchtest, übergibst du dort einfach deine Tracking-ID. Alles andere regelt der XPRS Editor selbst.

Damit das Teilen auf sozialen Netzwerken auch gescheit aussieht, lädst du auf Wunsch auch eine Bilddatei hoch, die bei geteilten Links auf Facebook und Co. dargestellt wird.

Bedienung per App von unterwegs

Eine weitere Besonderheit des XPRS Editors ist die eigene App, die es dir erlaubt, deine Website auch von unterwegs zu pflegen.

Gerade wer ein Blog betreibt und auch von unterwegs Beiträge schreiben und veröffentlichen möchte, hat mit der App eine einfache und bequeme Möglichkeit.

xprs_app
Website bequem per App von unterwegs verwalten

Die App steht derzeit allerdings nur für iPhone und iPad zur Verfügung und ist über den Apple Store erhältlich.

Fazit und Kosten

Für Studenten, Künstler und Non-Profits ist die Nutzung des XPRS Editors kostenlos. Die kommerzielle Nutzung kostet 7,95 US-Dollar pro Monat. Für Reseller gibt es einen gesonderten Tarif für 350 US-Dollar im Jahr. Darin enthalten sind dann auch uneingeschränkt viele Lizenzen für deine Kunden.

Die Bedienung des XPRS Editors ist denkbar einfach. Dabei gibt es zahlreiche Features, mit denen du nahezu alle Wünsche berücksichtigen und Möglichkeiten moderner Websites ausschöpfen kannst.

Dabei sind die vorhandenen Themes durchaus anspruchsvoll und bieten für Websites, die keine allzu individuelle Gestaltung erfordern, gute Ergebnisse.

Kategorien
Design E-Business E-Commerce Infografiken Inspiration SEO & Online-Marketing Webdesign

Diese zehn Designtrends erhöhen deine Konversionsrate [Infografik]

Trends kommen und gehen – gerade im Webdesign oft im fliegenden Wechsel. Daher darf man als Webdesigner und -entwickler nicht jedem Trend blind folgen. Aber mit folgenden zehn Designtrends hast du gute Chancen, dass sie die Konversionsrate deiner Website verbessern. Gerade wer einen Online-Shop betreibt, sollte dem ein oder anderen Trend Beachtung schenken.

designtrends-2016

Seitenfüllende Bilder

designtrends-2016_1

Bilder sind an sich immer gut geeignet, die Aufmerksamkeit deiner Website-Besucher zu wecken. Daher haben vor allem großformatige Bilder, welche die gesamte Breite des Browsers beziehungsweise des Displays einnehmen, eine große Wirkung.

Sind auf den Bildern zudem noch Gesichter zu sehen, steigert es die Aufmerksamkeit noch einmal. Alternativ zu Bildern sind auch seitenfüllende Videos ein erfolgversprechender Faktor im Webdesign.

Zweigeteilte Layouts

designtrends-2016_2

Eine erfolgreiche Website bringt seine Besucher möglichst schnell dort hin, wo sie finden, was sie suchen. Hier helfen zweigeteilte Layouts, um unterschiedliche Produkte, Dienstleistungen oder Informationen vorzuschlagen, aus denen deine Besucher das Passende aussuchen können.

So erleichterst du es deinen Besuchern und potenziellen Kunden, sich schnell und einfach zwischen verschiedenen Seiten zu entscheiden, die sie schnell ans Ziel bringen.

Monochromatische Farben

designtrends-2016_3

Bunt fällt zwar immer auf, führt aber auch schnell dazu, dass deine Besucher die Orientierung auf einer Website verlieren. Beschränke dich beim Layout deiner Website auf monochromatische Farben – also auf eine Farbe in unterschiedlichen Schattierungen. Gestalte deinen Call-to-Action in einem auffälligen Kontrast zum monochromatisch gehaltenen Rest der Seite.

So hebst du den entscheidenden Button oder Link besonders hervor und gibst deinen Besuchern eine eindeutige Orientierungshilfe. Außerdem sorgst du für ein stilvolles Aussehen, wenn deine Farben reduziert, dafür kontrastreich und harmonisch ausgewählt sind.

Priorisierte Navigation

designtrends-2016_4

Umfangreiche Websites bringen in der Regel eine entsprechend umfangreiche Navigation mit sich. Hier ist es sinnvoll, einen oder wenige Navigationspunkte – vor allem ein Call-to-Action – priorisiert darzustellen, während alle übrigen Punkte weniger auffallend dargestellt werden.

So kannst du beispielsweise die weniger wichtigen Links in ein Hamburger-Menü unterbringen oder ans Seitenende stellen. So erreichst du, dass deine Besucher sich bei der Navigation auf die „wichtigen“ Dinge konzentrieren.

Gestaltest du deinen Call-to-Action zudem als Button, steigt die Wahrscheinlichkeit, dass dieser tatsächlich ausgewählt wird.

Einfaches Lead-Capture

designtrends-2016_5

Beschränke dich auf das Wesentliche und verzichte auf allzu viele Worte. Gerade auf Landing-Pages sind ausschweifende Lobgesänge auf das eigene Produkt oder Unternehmen fehl am Platz.

Stelle deinen Besuchern eine einfache Frage, die sie im Idealfall bejahen, und beschränke dich darauf, einige Vorteile deines Produktes oder deiner Dienstleistung kurz und prägnant vorzustellen.

Videoinhalte

designtrends-2016_6

Gerade wenn du etwas über deine Website verkaufen möchtest, ist eine Sache von entscheidender Bedeutung: Vertrauen. Dieses baust du am einfachsten über ein Video auf.

Wende dich über ein Video direkt an deine potenziellen Kunden und gib deiner Marke so eine persönliche Note und vor allem ein Gesicht.

Call-to-Actions als Sticker

designtrends-2016_7

Wichtiges Anliegen deiner Website ist es, deine Benutzer zu einer Aktion zu bewegen. Platziere Call-to-Actions daher so, dass sie immer sichtbar sind.

Gerade im mobilen Webdesign ist es sinnvoll, diese so zu platzieren, dass sie etwa als Sticker am oberen oder unteren Seitenrand immer sichtbar sind – auch wenn gescrollt wird. So erhöhst du die Chance, dass deine Call-to-Actions beachtet und genutzt werden.

Kartendesign

designtrends-2016_8

Präsentiere deine unterschiedlichen Produkte in Form schicker Karten im Pinterest-Stil. So bringst du Ordnung auf deine Seite und hast dennoch eine ansprechende Form, eine Vielzahl unterschiedlicher Inhalte ansprechend darzustellen.

Einspaltig platzierte Call-to-Action

designtrends-2016_9

Platziere deinen Call-to-Action so, dass er möglichst alleine steht. Auch wenn deine Website mehrspaltig angelegt ist, sollte dieser immer möglichst viel Aufmerksamkeit erzeugen.

Daher ist es sinnvoll, ein mehrspaltiges Layout für die Platzierung einer Call-to-Action aufzubrechen. So wird dein Button oder dein Link zu einem echten Hingucker.

Personalisierte Benutzererfahrung

designtrends-2016_10

Je besser du deine Zielgruppe kennst, desto detaillierter kannst du auf sie eingehen. Das solltest du auch tun. Nutze Informationen wie den Ort (je genauer du ihn kennst, desto besser) und bereits gekaufte oder angesehene Produkte und berücksichtige sie.

So entsteht für jeden Besucher eine personalisierte Seite, die dabei hilft, ihn zu einer Handlung zu motivieren.

Die komplette Infografik

Die komplette Infografik, die das Team von „The Deep End“ gestaltet hat, fasst alle zehn Designtrends, die sich natürlich auch prima kombinieren lassen, in übersichtlich gestalteter Form zusammen.

(dpe)

 

Kategorien
Design Webdesign

Arbeitserleichterungen: Chrome-Erweiterungen für Webentwickler

Browser haben in den letzten Jahren zunehmend nachgerüstet und bieten mittlerweile zahlreiche Werkzeuge für Entwickler, mit denen du deine Webprojekte auf Herz und Nieren, beziehungsweise HTML, CSS und JavaScript testest. So werden JavaScript-Fehler ebenso erkannt wie eine falsche CSS-Auszeichnung. Doch die Entwicklerwerkzeuge können (noch) nicht alles. Daher gibt es zahlreiche Chrome-Erweiterungen für Webentwickler, die dir die Arbeit erleichtern.

Arbeitserleichterungen: Chrome-Erweiterungen für Webentwickler

Schriften erkennen mit „WhatFont“

Als Webdesigner und -entwickler ist man ja immer wieder auch auf anderen Websites unterwegs, um sich inspirieren zu lassen und Anregungen zu holen. Hast du beispielsweise eine Schrift auf einer Website entdeckt, die du gerne selbst verwenden möchtest, hilft dir die Erweiterung „WhatFont“ weiter.

„WhatFont“
„WhatFont“

Statt mühsam in den Stylesheets nach dem Schriftnamen zu suchen, reicht es bei „WhatFont“, mit der Maus über den entsprechenden Text zu fahren. Ein kleiner Tooltip verrät dir den Namen der verwendeten Schrift. Per Klick auf den Text werden dir zusätzliche Informationen ausgegeben, wie die Schriftgröße und -farbe.

Farben aufnehmen mit „Eye Dropper“

Ähnlich wie mit Schriften verhält es sich mit Farben. Um einen exakten Farbwert aus einer Website zu extrahieren, muss dieser aus dem Stylesheet kopiert werden. Willst du eine Farbe aus einem Bild holen, hilft nur ein Screenshot, der in deine Bildbearbeitung kopiert wird.

„Eye Dropper“
„Eye Dropper“

Eye Dropper“ macht das alles überflüssig. Die Erweiterung stellt dir eine Pipette zur Verfügung, mit der du eine Farbe von einer Website aufnehmen kannst. Dabei beschränkt sich „Eye Dropper“ nicht nur auf jene Elemente, die per CSS eine Farbe zugewiesen bekommen haben. Du kannst auch aus einem Bild per Pipette einen Farbwert ziehen.

Die Farbe wird dir als Hexadezimal- RGB- und HSL-Wert einschließlich korrekter CSS-Auszeichnung ausgegeben.

Cookies deaktivieren mit „Disable Cookies“

JavaScript für eine Seite ausschalten, Cache für eine Seite ausschalten – all das ist unkompliziert möglich dank der Entwicklerwerkzeuge in Chrome. Nur das schnelle Aktivieren und Deaktivieren von Cookies ist in Chrome nicht möglich.

Hierzu ist normalerweise der Weg über die Einstellungen nötig. Um mal schnell zu testen, wie eine Website auf deaktivierte Cookies reagiert, ist der Umweg über die Einstellungen ein recht komplizierter.

Dank der Erweiterung „Disable Cookies“ schaltest du Cookies für eine Website über einen Button in der Werkzeugleiste einfach ein und aus.

Abstände und Größen messen mit „Page Ruler“ und „Dimensions“

Sind alle Elemente auf deiner Website korrekt platziert? Stimmen Abstände und Größen? Folgende Erweiterungen helfen dir dabei, deine Website zu vermessen.

„Page Ruler“
„Page Ruler“

Der „Page Ruler“ erlaubt es dir, freihand oder über die Eingabe numerischer Werte ein Rechteck auf einer Website zu platzieren. Dabei werden dir die Abstände zu allen vier Seitenrändern sowie die Breite und Höhe des Rechtecks ausgegeben.

„Dimensions“
„Dimensions“

Eine Alternative ist die Erweiterung „Dimensions“. Diese misst von alleine die Abstände zwischen benachbarten Elementen. Dazu platzierst du den Mauszeiger einfach zwischen die jeweiligen Elemente. Zwei Linien zeigt dir an, welcher Abstand gemessen wird. Gemessen wird jeweils der vertikale und horizontale Abstand zu benachbarten Elementen.

Seite bei Veränderung automatisch neu laden mit „LivePage“

Das Neuladen einer Website gehört wohl zu den meist getätigten Aktionen. Da werden Änderungen an HTML-, CSS- und JavaScript-Dateien vorgenommen, die anschließend im Browser getestet werden müssen.

Die Erweiterung „LivePage“ erspart dir das ständige manuelle Neuladen. Denn immer, wenn eine eingebundene Ressource – also zum Beispiel eine CSS-Datei – auf dem Server geändert wurde, lädt die Erweiterung die Seite automatisch neu.

Screenshots erstellen mit „Awesome Screenshot“

„Awesome Screenshot“
„Awesome Screenshot“

Sei es zur Präsentation im eigenen Portfolio oder beim Kunden: Screenshots von Websites sind immer wieder notwendig. Mit „Awesome Screenshot“ machst du mit einem Klick Screenshots. Dabei wird ausschließlich der Inhalt des aktuellen Tabs berücksichtigt.

Außerdem entscheidest du, ob nur vom im Browser sichtbaren Bereich oder von der gesamten Seite ein Screenshots erstellt werden soll. Möglich ist also auch, einen kompletten Screenshots von sehr langen, scrollbaren Seiten zu erstellen.

(dpe)

Kategorien
Responsive Design Webdesign

Simbla: Websites bauen mit dem neuen Datenbank-Builder

Websites erstellen ohne Kenntnisse in HTML, CSS und JavaScript – viele Homepage-Baukästen versprechen dies. Der Website-Builder Simbla gehört zu jenen Anbietern, die nicht nur schicke Templates zur Verfügung stellen. Das Weblayout ist responsiv und basiert auf dem neuen Standard HTML5. Simbla bietet also alles, was eine zeitgemäße Website haben muss. Jetzt kannst du dank des Datenbank-Builders auch noch umfangreiche und komplexe Daten visualisieren, verwalten und bearbeiten.

simbla

Datenbank erstellen und mit Inhalt füllen

Der Website-Builder von Simbla ist bereits ausgiebig hier vorgestellt worden. Die Macher von Simbla verstehen sich nicht nur darauf, aktuelle Standards umzusetzen. Auch aktuelle Designtrends finden immer wieder Berücksichtigung. So gibt es zum Beispiel neue Templates mit Parallax-Effekt. Statt des statischen Scrollens werden verschiedene Ebenen der Website wie Hintergrund und Vordergrund beim Scrollen unterschiedlich schnell bewegt.

Datenbank in Simbla anlegen
Datenbank in Simbla anlegen

Die ganz große Neuerung ist jedoch der Online-Datenbank-Builder von Simbla. Hiermit hast du die Möglichkeit, ganz einfach eine eigene Datenbank zu erstellen und diese mit Inhalten zu füllen. Dank einer umfangreichen Rechtevergabe hast du zudem die volle Kontrolle darüber, wer Datensätze erstellen, lesen, ändern und löschen darf.

Die Datenbanken stellen einen eigenen Bereich unabhängig der Websites dar. Nachdem du eine Datenbank angelegt hast, definierst du Nutzer, Rollen sowie Tabellen. Dabei gibt es den Standardnutzer „Public“, der für den öffentlichen Zugriff über die Website zuständig ist. Du kannst aber auch weitere Benutzer einrichten, die beispielsweise nur nach einem Login Zugriff haben.

simbla_datenbank_rollen
Rollen und Rechte definieren

Für jeden Benutzer vergibst du unterschiedliche Rechte. So ist es beispielsweise möglich, dem Nutzer „Public“ nur Leserechte für eine Datenbank zuzuweisen und anderen Nutzern auch Schreibrechte. Dabei stehen dir als Rechte „find“ zum Suchen, „get“ zum Anzeigen, „create“ zum Erstellen, „update“ zum Aktualisieren und „delete“ zum Löschen eines Datensatzes zur Verfügung.

Nachdem du Nutzer und Rollen beziehungsweise Rechte zugewiesen hast, erstellst du eine oder auch mehrere Tabellen. Bequem fügst du Spalten hinzu und definierst die Art der Spalte. Möglich sind unter anderem Zeichenketten, Zahlen, Arrays, boolesche Werte und Dateien. Im Gegensatz zu anderen Datenbanken wie MySQL lassen sich Dateien wie Bilder und Dokumente ganz bequem über einen eigenen Typ in eine Tabelle integrieren und später abrufen. Außerdem erhältst du bei Bilddateien eine Vorschau.

Spalten und Typen definieren
Tabelle erstellen, Spalten und Typen definieren

Ganz automatisch werden die Spalten „Id“, „createdAt“ und „updatedAt“ erstellt und gepflegt. Dank der grafischen Benutzeroberfläche ist das Anlegen und auch Verwalten von Datenbanken spielend einfach. So legst du neue Zeilen an und füllst diese mit Inhalt.

Willst du eine Tabelle auch anderweitig verwenden, exportierst du diese mit einem Klick ins CSV-Format. Lediglich eingebundene Dateien werden beim Export ignoriert.

Einfache Webanwendungen mit Datenbanken bauen

Hast du deine Datenbank soweit fertig, kannst du diese in deiner Simbla-Website ganz einfach und bequem einbinden. Dazu musst du in den Website-Einstellungen zunächst einmal die Datenbank auswählen. Anschließend stehen dir dort alle Tabellen der Datenbank zur Verfügung.

„App Widgets“
„App Widgets“

Es gibt spezielle Inhaltselemente, die „App Widgets“, mit denen du ganz einfach eine Datenbankanbindung herstellst. Dafür musst du allerdings in den Pro-Modus wechseln. So erstellst du ein Login für hinterlegte Nutzer oder ein Formular, welches Datensätze in die Tabelle schreibt. Außerdem kannst du natürlich auch ganz einfach den Inhalt deiner Datenbank als Tabelle auf deiner Website darstellen. Dafür wählst du aus verschiedenen Tabellenlayouts aus.

Dank der umfangreichen Möglichkeiten erstellst du ohne großen Aufwand und ohne Kenntnisse in Programmierung und Datenbankabfragen einfache und auch komplexe Website-Applikationen.

Wenn du also beispielsweise Inhalte nur für registrierte Nutzer hinterlegen möchtest, fügst du einfach ein Formular ein, über welches sich Nutzer registrieren können. Eine Verifizierung der E-Mail-Adresse erfolgt automatisch. Die registrierten Nutzer werden dir im Datenbankbereich angezeigt.

Login-Formular
Login-Formular

Über ein Login- und Logout-Formular sorgst du dafür, dass sich registriere Nutzer an- und abmelden können. Außerdem legst du für bestimmte Seiten fest, dass diese nur für angemeldete Nutzer zur Verfügung stehen.

Komplexe Webanwendungen mit JavaScript

Mit dem Datenbank-Builder sind auch weitaus komplexere Webanwendungen möglich. Statt eines der einfachen „App Widgets“ zu verwenden, hast du auch die Möglichkeit, umfangreichere Datenbankabfragen und -operationen durchzuführen. Dazu gibt es eine eigene JavaScript-API.

Dank der API steht dir Simbla als Website-Application-Builder zur Verfügung, mit dem du eigene Abfragen und zum Beispiel komplexe CRM-Systeme erstellst oder auch Bestellabwicklungen und Buchungsanfragen realisierst.

Der Einstieg in die API ist dabei recht einfach. Mit „Simbla.Object.extend()“ greifst du auf eine Datenbanktabelle zu und mit „Simbla.Query()“ erstellst du eine Abfrage, mit der du arbeiten kannst.

var db = Simbla.Object.extend("DatenbankTabelle");
var abfrage = new Simbla.Query(db);

Nun gibt es zahlreiche Möglichkeiten, mit denen du die Abfrage sortieren und eingrenzen kannst. So sorgen „descending()“ und „ascending()“ dafür, dass die Tabelle anhand einer Spalte auf- oder absteigend sortiert wird.

JavaScript-Datenbankabfrage
JavaScript-Datenbankabfrage

Außerdem gibt es zahlreiche Vergleichsmöglichkeiten wie „lessThan()“, „greaterThan()“ und „euqalTo()“ sowie die Möglichkeit, eine Abfrage per „limit()“ auf eine bestimmte Anzahl an Datensätzen zu begrenzen und mit „skip()“ Datensätze zu überspringen.

abfrage.greaterThan("SpalteJahr", 2010);

Per „find()“ werden die zuvor sortieren beziehungsweise eingegrenzten Datensätze gesucht und lassen sich ausgeben.

abfrage.find({
  success: function(db) {
    var ausgabe = "";
    for (var i = 0; i < db.length; i++){
      ausgabe += "<h1>"+ db[i].get("name") + "</h1>";
      ausgabe += "<img src='"+ db[i].get("bild").url() + "'/>";
    }
    $("#dbausgabe").html(ausgabe);
  }
});

Im Beispiel werden die Datensätze per „get()“ in eine Variable und anschließend per „html()“ ins Element mit der ID „ausgabe“ geschrieben.

Für die JavaScript-Programmierung gibt es im Website-Builder einen eigenen Editor. Für die HTML-Ausgabe musst du auf einer Seite ein HTML-Inhaltselement platzieren, welches du mit einem Element versiehst, welches die im JavaScript angegebene ID besitzt.

<div id="dbausgabe"></div>

Neue Features erwartet

Derzeit befindet sich JavaScript-API noch im Aufbau. Simbla hat angekündigt, den Funktionsumfang weiter auszubauen. Es ist also davon auszugehen, dass weitere Methoden und Eigenschaften ergänzt werden und somit noch umfangreichere Datenbankabfragen möglich sein werden.

Aber auch der aktuelle Stand der API ermöglicht bereits eine Vielzahl von Abfragen. Dabei ist die Bedienung recht einfach. Wer also Erfahrung in JavaScript hat, wird sich schnell zurechtfinden und eigene Abfragen programmieren können.

Interessant ist der Builder mit seiner eigenen Datenbank und der JavaScript-API sowie den fertigen Inhaltselementen vor allem für jene, die mit Datenbankabfragen und MySQL keine Erfahrungen haben.

Zeitgemäßer Website-Builder für komplexe Webanwendungen

Wer Website-Builder von Simbla hat mit seinem Datenbank-Builder ein ganz besonderes Alleinstellungsmerkmal unter den zahlreichen Baukästen. Hier ist die Anbindung an Datenbanken weit umfassender als bei allen anderen Ansätzen, bei denen du zumeist wenig mehr als ein simples Formular als Datenbank-Anbindung verkauft bekommst.

Die Bedienung von Simbla ist dabei spielend einfach und selbst die eigene JavaScript-API stellt keine große Herausforderung dar.

Wenn du Simbla einmal ausprobieren möchtest, kannst du dir einen kostenlosen Account einrichten und den kompletten Website- und Datenbank-Builder ausgiebig ausprobieren.

(dpe)

Kategorien
JavaScript & jQuery Programmierung

Mit Anime.js animierst du CSS, SVG und mehr ganz einfach

Zu den zahlreichen Frameworks für Animationen gesellt sich mit anime.js ein weiteres. Im Gegensatz zu den vielen anderen Frameworks erlaubt anime.js nicht nur die Animation per CSS-Eigenschaften. Du kannst damit auch SVG- und HTML-Eigenschaften per Animation verändern. Gerade im modernen Webdesign ist das SVG-Format kaum wegzudenken. Das Framework kommt jedenfalls zur rechten Zeit.

Einfache CSS-Animationen

Hast du die JavaScript-Datei von anime.js eingebunden, erstellst du auf CSS-Eigenschaften basierende Animationen recht einfach. Über den Aufruf von „anime()“ übergibst du eines oder mehrere Ziele – also Elemente, die animiert werden sollen. Anschließend definierst du die CSS-Eigenschaften, die per Animation verändert werden sollen.

anime({
  targets: [document.getElementsByTagName("div")[0]],
  translateX: "300px",
  rotate: 180,
  duration: 2000,
  direction: "alternate",
  loop: true,
  elasticity: 600,
  easing: "easeOutElastic"
});

Im Beispiel wird per „targets“ ein „<div>“-Element übergeben. Du kannst auch einfach eine ID angeben. Es folgen zwei CSS-Eigenschaften – „translateX“ und „rotate“ –, die animiert werden sollen. Anschließend wird per „duration“ die Dauer und per „direction“ die Richtung der Animation festgelegt. Die Animation dauert hier also zwei Sekunden. Anschließend wird die Animation rückwärts ausgeführt. Per „loop“ legst du noch fest, dass sich die Animation in einer Schleife wiederholt.

Während einer Animation

Grundsätzlich ist dieses einfache Beispiel auch ohne JavaScript möglich, indem man die „@keyframes“-Regel zusammen mit „animation“ einsetzt. Bei anime.js kommt jedoch noch die besondere Eigenschaft „elasticity“ hinzu, die es erlaubt, einer Animation eine Elastizität mitzugeben. Je höher der Wert ist, desto elastischer wird animiert. Das heißt, am Ende der Animation bleibt diese nicht sofort stehen, sondern pendelt sich aus. Hiermit lassen sich sehr natürliche Bewegungen realisieren.

30 Easingeffekte

Wie bei klassischen CSS3-Animationen hast du mit anime.js die Möglichkeit, einer Animation ein Easing hinzuzufügen. Insgesamt stehen dir 30 verschiedene Easingeffekte zur Verfügung – also deutlich mehr als bei CSS3.

Gibst du „anime.easings“ über die Browser-Konsole aus, erhältst du eine Liste aller Effekte. Zusammen mit „elasticity“ ergeben sich jenseits des sonst üblichen sehr interessante Effekte.

SVG-Pfadanimationen

Wie bereits erwähnt sind Animationen mit SVG-Eigenschaften wie beispielsweise der „d“-Eigenschaft eines Pfades möglich. So realisierst du sehr einfach etwa eine Animation entlang eines Pfades.

Dazu definierst du per SVG zunächst ein „<path>“-Element sowie ein weiteres Elements – zum Beispiel ein „<div>“-Container –, welches sich entlang des Pfades bewegen soll.

anime({
  targets: [document.getElementsByTagName("div")[0]],
  translateX: anime.path(document.getElementsByTagName("path")[0]),
  translateY: anime.path(document.getElementsByTagName("path")[0]),
  rotate: anime.path(document.getElementsByTagName("path")[0]),
  duration: 5000,
  loop: true,
  easing: "linear"
});

Per „targets“ wird wieder das zu animierende Element referenziert. Über „translateX“, „translateY“ und „rotate“ wird per „anime.path()“ der SVG-Pfad angegeben, an dem entlang das „<div>“-Element animiert werden soll.

SVG-Morphing

Mit dem von Google eingeläuteten Ende von SMIL sind animierte Formänderungen von SVG-Elementen nicht mehr möglich – zumindest in zukünftigen Versionen des Browsers. Mit anime.js realisierst du jedoch weiterhin ganz einfach solche Animationen.

Dazu definierst du zunächst einen SVG-Pfad, den du später ganz einfach in eine andere Form morphen lassen kannst.

anime({
  targets: [document.getElementsByTagName("path")[0]],
  d: "M140,51.75A51.75,51.75,0,0,0,99.2,35.27a83,83,0,1,0,65.13,65.67A51.76,51.76,0,0,0,140,51.75Z",
  duration: 1000,
  loop: true,
  direction: "alternate",
  easing: "linear"
});

Im Beispiel wird als „targets“ ein SVG-Pfad referenziert. Über „d“ gibst du einen Zielpfad an, der die Form definiert, in welche das „<path>“-Element morphen soll. Wichtig ist, dass die Anzahl der Punkte im Quell- und Zielpfad identisch sind. Sonst gibt es unschöne Effekte statt eines schönen Morphings.

Interaktive Animationen

Zu guter Letzt ermöglicht dir anime.js auch noch, interaktive Animationen zu erstellen. So gibt es mit „play()“, „pause()“ und „restart()“ Methoden, mit denen du das Abspielen steuerst. Mit „seek()“ springst du zudem an eine bestimmte Position innerhalb der Animation. Dazu übergibst du entweder eine Zeit oder einen prozentualen Wert.

Außerdem stehen die Eigenschaften „begin“, „update“ und „complete“ zur Verfügung, denen du eine Funktion übergeben kannst. Diese Funktion wird dann entsprechend beim Beginn, bei Veränderungen während der Animation oder am Ende der Animation ausgeführt.

Fazit

Beispiel auf CodePen
Beispiel auf CodePen

anime.js hat alles, was du für einfache und komplexe CSS- und SVG-Animationen brauchst. Es gibt eine übersichtliche API-Referenz mit einigen Beispielen. Zudem läuft das Framework unter allen gängigen Browsern einschließlich des Internet Explorers ab Version 10.

Die hier vorgestellten Code-Beispiele findest du auf CodePen:

(dpe)

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Plugins Webdesign WordPress

MapSVG: vektorbasierte Karten für jQuery und WordPress

Landkarten werden immer wieder benötigt – sei es zur visuellen Ergänzung statistischer Daten oder zur Darstellung von Standorten. Mit MapSVG steht dir ein Dienst zur Verfügung, mit dem du auf einfache Art und Weise vektorbasierte und interaktive Karten im SVG-Format in deine Website einbaust. MapSVG gibt es sowohl als Plugin für jQuery als auch für WordPress.

mapsvg

Karten von Staaten einschließlich Unterteilungen

Weit über 100 verschiedene Karten stehen dir bei MapSVG zur Verfügung. Darunter sind nicht alle, aber die meisten Staaten. Neben den Staaten selbst sind in den Karten auch staatliche Unterteilungen hinterlegt. So findest du bei der deutschen Karte auch die Bundesländer, bei der US-amerikanischen die Bundesstaaten und in der französischen die Regionen.

mapsvg_karten
Beispiel für den Einsatz von Karten

Zusätzlich gibt es zwei Weltkarten – eine mit detaillierter Zeichnung der Grenzen und eine weitere mit eher grob gezeichneten Grenzen –, in denen alle Staaten eingezeichnet sind. Zu jeder Karte gibt es eine Vorschau, in der alle eingezeichneten Länder beziehungsweise Regionen anklickbar sind und dich über den Namen des Staates beziehungsweise der Region und den offiziellen ISO-3166-Code (zum Beispiel DE-BY für Bayern) informieren.

Außerdem gibt es zu jeder Karte einige Beispiele, die dir zeigen, wie diese eingesetzt werden können.

MapSVG in WordPress nutzen

Da es sich bei MapSVG um einen kommerziellen Dienst handelt, ist die kostenlose Nutzung auf einige Funktionen und Karten beschränkt. Mit dem Plugin „MapSVG Lite“ hast du allerdings eine sehr einfache Möglichkeit, Karten einzubinden und zu individualisieren. Da „MapSVG Lite“ allerdings nur Karten für die USA beinhaltet, musst du entweder auf das Premium-Plugins umsteigen oder eigene Karten hochladen.

mapsvg_neu
Einfach eigene Karten hochladen und bearbeiten

Wichtig ist nur, dass das Kartenmaterial im SVG-Format vorliegt. Ob du Karten selbst in Illustrator oder einem anderen Zeichenprogramm anlegst oder auf kostenloses Kartenmaterial zurückgreifst, spielt keine Rolle. „MapSVG Lite“ gibt dir in jedem Fall die Möglichkeit, eigene Karten zu verwenden.

Über die Benutzeroberfläche des Plugins legst du dann die Farben für deine Karten fest. Neben Hintergrund-, Linien- und Basisfarbe für die einzelnen Flächen definierst du auch Farben für ausgewählte und deaktivierte Flächen sowie für einen Hovereffekt.

mapsvg_farbe
Farben anpassen

Ist den einzelnen Pfaden deiner SVG-Karte eine ID zugewiesen, wird dir diese ID als Region dargestellt. Bei einer Deutschlandkarte bietet es sich zum Beispiel an, den Pfaden, welche die Bundesländer darstellen, als ID den Namen des Landes anzugeben. So stehen dir die einzelnen Bundesländer als Regionen zur Verfügung.

Für jede Region definierst du dann unter anderem Tooltips und Links. Außerdem hast du die Möglichkeit, einer Karte eine Zoom- und Scrollfunktion hinzuzufügen. So ist es dann möglich, per Buttons oder Maus einen Kartenausschnitt zu vergrößern und den Ausschnitt zu bewegen.

mapsvg_regionen
Regionen bearbeiten und mit Tooltips und Links versehen

Hast du deine Karte fertig bearbeitet und gespeichert, steht dir ein Shortcode zur Verfügung, den du auf einer Seite oder in einem Beitrag platzierst.

Standpunkte per Marker hinzufügen

Während du mit dem Premium-Plugin per Adresseingabe Positionen ermitteln kannst, erlaubt dir das Lite-Plugin nur die manuelle Platzierung von Markern. Dank der grafischen Benutzeroberfläche platzierst du neue Marker allerdings recht komfortabel auf deiner Karte.

mapsvg_marker
Marker setzen und mit Tooltips und Links versehen

Ähnlich wie bei den Regionen hinterlegst du auch Marker mit Tooltips und Links. So ist es zum Beispiel einfach, eine Karte mit Unternehmensstandorten samt Links zu den einzelnen Standorten zu erstellen.

jQuery-Plugin und Kosten

Für alle, die ohne WordPress arbeiten, gibt es MapSVG auch als jQuery-Plugin. Dieses gibt es allerdings nicht einer kostenlosen Version. Wenn du MapSVG also lieber per jQuery nutzen möchtest, kostet dich das Plugin 25 US-Dollar.

Das Premium-Plugin für WordPress gibt es für 35 US-Dollar. Dafür stehen dir dann alle Karten zur Verfügung und es gibt keinerlei Einschränkungen in der Funktion. So sind beim Lite-Plugin nur fünf Marker möglich. Mit dem Premium-Plugin erstellst du zudem eigene JavaScript-Events und kannst sehr viel individuellere Karten samt eigener Funktionalität erstellen.

(dpe)

Kategorien
Design Responsive Design UI/UX Webdesign

So schlecht funktionieren Hamburger-Menüs und versteckte Navigation

Kleine Displays, wenig Platz – auf Smartphones ist es immer wieder eine Herausforderung, Inhalt und Navigation einer Website unterzubringen. Daher hat es sich mittlerweile etabliert, die Navigation auszublenden und nur ein Hamburger-Icon zu platzieren, welches per Tap die Navigation einblendet. Schon lange wird darüber diskutiert, ob es sinnvoll ist, etwas derart wichtiges wie die Navigation zu verstecken. Die Nielsen Norman Group, die unter anderem Benutzerverhalten erforscht, hat in einer Studie nun herausgefunden, wie sich das Nutzerverhalten bei sichtbaren und per Hamburger-Menüs erreichbaren Navigationsansätzen unterscheidet.

Hamburger-Menüs sind lecker

179 Teilnehmer, sechs Websites

Ziel der Studie war es herauszufinden, wie häufig auf einer Website die Navigation gefunden, beziehungsweise verwendet wurde. Dazu mussten 179 Teilnehmer sechs verschiedene Websites auf unterschiedlichen Geräten aufrufen und nutzen. Dabei hat etwa die Hälfte der Teilnehmer die sechs Websites nur auf einem Desktopgerät aufgerufen, während die andere Hälfte nur auf Smartphones unterwegs war.

Kombinierte Navigation bei der BBC

Bei den Websites handelt es sich um die von 7digital, BBC, Bloomberg Business, Business Insider UK, Supermarkt HQ und Slate. Jede Website hat eine anders gestaltete Navigation. Unterschieden wurde zwischen sichtbarer Navigation, bei der alle Menüpunkte stets erkennbar im Kopf oder Seitenbereich aufgelistet waren, und versteckter Navigation, bei der die Menüpunkte erst über ein Hamburger-Menü oder einen per „Menu“ beschrifteten Button erreicht werden konnten. Außerdem gab es noch eine Kombination beider Varianten, bei der einige Menüpunkte sichtbar waren, während andere über einen „More“-Button als Dropdown-Liste dargestellt wurden.

So ist die Navigation von 7digital auf Desktopgeräten immer sichtbar, während sie auf Smartphones über ein „Menu“-Icon eingeblendet wird. Die BBC-Website verwendet auf dem Desktop eine kombinierte Navigation. Während dort die wichtigsten Menüpunkte sichtbar sind, werden weitere Auswahlmöglichkeiten über ein Dropdown-Menü dargestellt.

Nur per Hamburger-Menü erreichbare Navigation
Nur per Hamburger-Menü erreichbare Navigation

Die Website von Business Insider hingegen setzt sowohl in der Desktop- als auch in der Mobilansicht auf ein Hamburger-Menü, über welches die Navigation erreichbar ist. Im Übrigen gab es keine Website, bei der sowohl in der Desktop- als auch in der Mobilansicht die Navigation immer sichtbar war. Das dürfte vor allem daran liegen, dass es sehr unüblich ist, auf Mobilgeräten die Navigation immer sichtbar darzustellen.

Sichtbare oder teils sichtbare Navigation öfter genutzt

Bei den Teilnehmern, die per Desktopgerät unterwegs waren, wurde die versteckte Navigation nur von 27 Prozent genutzt, während die sichtbare oder kombinierte Navigation von 48 beziehungsweise 50 Prozent genutzt wurde. Auf Mobilgeräten haben nur 57 Prozent die versteckte und 86 Prozent die kombinierte Navigation verwendet.

Sichtnare und nicht sichtbare Navigation bei 7digital
Sichtbare und nicht sichtbare Navigation bei 7digital

Auch bezüglich der Zeit, die zum Navigieren gebraucht wurde, liegt die versteckte Navigation hinten. Während die Teilnehmer auf Desktopgeräten mit versteckter Navigation 31 Sekunden mit der Navigation beschäftigt waren, waren es bei Websites mit sichtbarer Navigation nur 26 Sekunden. Interessanterweise hat die kombinierte Navigation mit 23 Sekunden am besten abgeschnitten.

Auf Mobilgeräten ist der Unterschied zwischen versteckter (26 Sekunden) und kombinierter Navigation (24 Sekunden) geringer. Das dürfte daran liegen, dass es Nutzer auf Mobilgeräten eher gewohnt sind, die Navigation über ein Hamburger-Menü zu erreichen, während auf Desktopgeräten die Hamburger-Menüs nicht so verbreitet sind.

Fazit

Im Ergebnis lässt sich feststellen, dass die versteckte Navigation weniger genutzt wurde, mehr Zeit in Anspruch nahm und auch deutlich weniger Inhalt gefunden wurde. So wurden auf Desktopgeräten nur 54 Prozent und auf Mobilgeräten nur 64 Prozent des Inhalts, der von den Teilnehmern aufgerufen werden sollte, auch tatsächlich gefunden.

Nicht sichtbare Navigation bei Bloomberg

Am besten schnitt die kombinierte Navigation ab, die auf 80 Prozent bei Desktop- und 85 Prozent bei Mobilgeräten kommt. Selbst die komplett sichtbare Navigation liegt auf Desktopgeräten mit 77 Prozent noch drei Prozentpunkte hinter der Kombi-Navigation.

Wenn immer möglich, solltest du also auf eine versteckte Navigation verzichten. Idealerweise zeigst du einige wenige wichtige Menüpunkte immer an und versteckst weniger wichtige Punkte über ein „Mehr“-Icon, welches alle weiteren Punkte zum Beispiel als Dropdown-Liste darstellt.

Die kompletten Ergebnisse der Studie mit zahlreichen Diagrammen und tiefer gehenden Erklärungen findest du auf der Website der Nielsen Norman Group.

(dpe)