• Der Code zum Erfolg (Pixabay - lizenzfreie Bilder).

Der Code zum Erfolg

„Wer nicht wirbt, der stirbt“, Henry Ford.
Eine klare und pragmatische Darstellung des Stellenwerts von Marketing in der heutigen Zeit.

Megatrends beeinflussen den Wandel der Gesellschaft und dadurch auch die Art und Weise des Marketings. In einem Zeitalter, in dem es um die vierte industrielle Revolution geht und in der die künstlichen Intelligenzen an der Tagesordnung stehen, muss auch das Marketing mitziehen. Marketing Automation ist das Resultat. Durch effiziente Kampagnen und automatisierte und personenbezogene Werbung macht sich Marketing quasi von ganz alleine.

Unter den Werkzeugen für Nutzer von Mautic finden sich auch Möglichkeiten, Landingpages und Webseiten selbst zu gestalten.

Web-Entwicklung

Natürlich ist nicht jeder ein kleines Softwaregenie und kann nicht einfach mehrere Internetseiten entwickeln und programmieren. Ein passendes Tool hierfür ist die Webseitenprogrammierung der Open Source Plattform „Mautic“. Um genau zu wissen was Mautic hier vereinfacht, sollte geklärt werden, wie Webentwicklung funktioniert und worauf zu achten ist.
Um eine Website programmieren oder entwickeln zu können, sollte man die drei wichtigsten Bausteine der Entwicklungsebenen kennen. Aufgeteilt sind diese oftmals in HTML, CSS und Java Skript.

Hypertext Markup Language (HTML):

Hierbei handelt es sich um die Strukturierung von textbasierter Sprache in digitalen Dokumenten wie Webseiten, Hyperlinks und Bildern. Hier können Schriftart, Schriftform, Layout des Textes, Zeilenabstände, Listen, Gliederungen und Bilder in Texten formatiert werden.

HTML-Code (Quelle: Denise Heller).

HTML-Code (Quelle: Denise Heller).

Der Aufbau ist dabei:

<html>
<head>
</head>
    <body>
<header> Beispieltext
</header>
</body>
</html>

< > und </> funktionieren hierbei ähnlich wie Klammern. Alles, was sich innerhalb der Klammern befindet, gehört zu dieser Kategorie. Backslash beendet dann die Kategorie. „Beispieltext“ ist nun alleine auf der Website zu sehen.

HTML-Code mit Beispieltext (Quelle: Denise Heller).

HTML-Code mit Beispieltext (links: Programmierebenen; rechts: aktuelle Website (Quelle: Denise Heller).

Cascading Style Sheets (CSS):

Hier werden die Gestaltungsanweisungen für den in HTML generierten Text bestimmt. Dabei werden Farbe, Schriftgröße, Schriftformatierung, Hintergrundfarben, Sortierung und Verhalten von Bildern und Schriftarten bei veränderten Bildschirmgrößen (Smartphone, Laptop…) festgelegt.

CSS-Code (Quelle: Denise Heller).

CSS-Code (Quelle: Denise Heller).

Der Aufbau ist dabei:

Body {
Background-color; green;
Line-height: 400px;
}

body {
}

Der Begriff „body“ gibt an, dass im Folgenden der Hauptteil der Website angesprochen werden soll. Dieser wurde vorher in HTML benannt und festgelegt. Alle Attribute, die nun gelten sollen, werden hier untereinander aufgezählt und es werden unter anderem Farben und Größen dafür bestimmt.

Java Skript (JS):

JavaSkript bestimmt das Verhalten der in HTML und CSS generierten Inhalte. Hierbei können Bewegungen, Rechnungen, Schleifen, Bots, interaktive Knöpfe und Funktionen festgelegt werden.

JavaSkript-Code (Quelle: Denise Heller).

JavaSkript-Code für einen Zähler (Quelle: Denise Heller).

Der Aufbau ist dabei:

<html>
<head>
            </head>
<body>
<skript>
                                   for (i=1;i < 6;i++) {
                                   document.write(“This is iteration “ + i + “</br>);
                       }
                      </skript>
</body>
</html>

Der rot markierte Bereich generiert das Verhalten des Textes. Im oberen Beispiel wird ein Zähler generiert. Dieser zählt von i=1 bis i=6 und gibt das Ergebnis auf der Website aus: „This is iteration n“.  Für den Zeilenumbruch nach jedem Durchgang sorgt </br>.

All diese Schritte können für Anfänger nun verwirrend sein und erscheinen in der Umsetzung aufwändig und schwer in aller Funktion nachzuvollziehen.

Anwendung bei Mautic

Hier kommt Mautic ins Spiel. Die Programmierfunktion ermöglicht es dem Unternehmen mit Hilfe von vorgefertigten Bausteinen all diese Schritte in kürzester Zeit zu generieren und eine vollständige und intakte Website zu gestalten.

Der Aufbau der Programmierfunktion von Mautic ist dabei einfach und instinktiv zu bedienen. Zu Beginn darf der Entwickler der Website auswählen, ob er selbst den Code bestimmen möchte oder ob er eines der fertigen Bausteine/Designs nutzt.

Editor mit Bausteinen.

Aufbau des Webseiten-Hilfstools (links: Vorschau der Website; rechts: Auswahl der Bausteine).

Bei der fertigen Version erhält man eine Landingpage, welche ein vorgegebenes Design aufweist und in die bereits Beispielschaltflächen eingepflegt wurden. In der Auswahl rechts (siehe Bild) kann man sich dann nach Belieben Schaltflächen, Text, Header, Footer und vieles mehr per Drag & Drop in die links erstelle Landingpage ziehen. Diese enthalten bereits den fertigen HTML-, CSS- und JS-Code und es muss sich um nichts mehr gekümmert werden.

Bausteine für die Webseite.

Bausteine für die Webseite.

Weiter Bausteine.

Weitere Bausteine.

So können innerhalb kürzester Zeit tolle Landingpages generiert werden, und das ohne dass es großes Fachwissen benötigt. Perfekt für kleine und mittelständische Unternehmen, welche oft keine eigenen Softwarespezialisten oder Webentwickler haben.

 

Autorin: Denise Heller

2018-01-12T11:47:57+00:00 Dezember 20th, 2017|0 Comments