Mit Webflow lassen sich Webseiten erstellen. Im Beitrag die Erfahrungen damit.

Einführung

Webflow (im Beitrag auch mit WF abgekürzt) ist ein Websitebaukasten. Das Besondere dabei ist jedoch, dass man damit viel komplexere Internetpräsenzen erschaffen kann, als das mit anderen Werkzeugen wie WIX oder Jimdo möglich wäre.

Besonderheiten

Hier einige Besonderheiten:

Speicherung auf dem Server des Anbieters

Anders bei anderen komplexen Webseiten-Systemen, wie zum Beispiel bei WordPress, liegen die Dateien nicht auf dem eigenen Server/ Webhosting, sondern auf dem von Webflow.

Das hat Vorteile und Nachteile.

Ein Vorteil ist natürlich, dass WF ein performantes Hosting liefert, dass auch sicher vor Angriffen von Dritten ist.

Der Nachteil ist jedoch, dass man dadurch eingeschränkt ist. Man kann zum Beispiel keine Änderungen am Source Code vornehmen, und zum Beispiel eigene individuelle Programmierungen hinzufügen. Wie das zum Beispiel bei WordPress (über Plugins und Themes) oder anderen Lösungen möglich ist.

Damit muss man auf die Designmöglichkeiten zurückgreifen, welches das Tool bereitstellt.

Komplexe Webdesigns möglich

Es stimmt zwar, dass man auch mit WordPress, eigene komplexe und schöne Designs erstellen kann. Das ist jedoch nicht immer ganz einfach, und man braucht hier dann einen Designer (Photoshop Experten), einen Webdesigner (HTML/ CSS Profi) und einen Webentwickler (WP Freelancer oder ähnlichen).

Bei Webflow kann auch der Designer selbst die kompletten Schritte machen. Dafür hilft auch der nächste Punkt.

Ohne Programmierkenntnisse nutzbar

Ein Designer ohne technische Kenntnisse kann das Werkzeug nutzen.

Beispielsweise hat es ein relativ komplexes Designtool. Man braucht etwas Zeit bis man dieses erlernt.

Man braucht hierfür keine Programmierkenntnisse, wie das bei anderen Systemen der Fall wäre.

Professionelle Designs kann man auch in Figma (eine Software mit der man Benutzeroberflächen designen kann) erstellen und diese dann in Webflow benutzen. Es kann sinnvoll sein sich mit der Zeit Kenntnisse in HTML, CSS und JavaScript anzueignen, um damit dann auch komplexere Designs umzusetzen.

Nur eine Person kann die Website erstellen

Das bedeutet also, dass der Designer den kompletten Prozess, von der Beratung, über das UI/ UX, das Branding und auch die technische Umsetzung übernehmen kann.

Daher findet es immer mehr Beliebtheit bei UI/ UX Designern, die sich nicht mehr einen Webdesigner und Programmierer dazuholen möchten. Sondern alles selbst anbieten möchten.

Auch für mittelständische Unternehmen nutzbar

Die Erfahrung zeigt, dass sich mit WF auch Internetseiten erstellen lassen, welche auch im Mittelstand nutzbar sind.

Auch Onlinepräsenzen von erfolgreichen Startups und mittelständischen Unternehmen werden damit zunehmen umgesetzt.

Die Verkaufsargumente sind dabei die höhere Sicherheit, da Speicherung auf dem Hosting von Weblow selbst, die einfachere Bedienbarkeit, die Flexibilität im Design.

Es eignet sich besonders, wenn man auf ein starkes Branding setzt, und gegenüber den Webbesuchern einen guten Eindruck machen will.

Eventuelle Nachteile

Hier auch ein paar Nachteile.

Mit der Zeit erkennt man, ob eine Website mit diesem Werkzeug erstellt wurde

Jemand der sich längere Zeit mit WF beschäftigt hat, merkt mit der Zeit, ob eine Internetseite mit diesem Werkzeug erstellt wurde. Denn es nutzt bestimmte Designelemente.

Das muss jedoch kein Nachteil sein, denn die schlussendlichen Nutzer (Kunden, Mitarbeiter des Kundenunternehmens, etc.) sind ja keine WF Designer, sondern wollen sich zu unterschiedlichen Dingen wie der Marke oder den Services/ oder Produkten informieren.

Keine individuellen Programmierungen möglich

Es kann sinnvoll sein eine Internetpräsenz auf Webflow zu kreieren. Besonders für mittelständische Unternehmen, welche eine starke Marke aufbauen wollen.

Die Problematik ist jedoch, dass man auf dieser Homepage keine individuellen Programmierungen vornehmen kann.

Denn manche mittelständische Firmen möchten eventuell einen Produktkonfigurator integriert haben, oder eigene Plugins oder Module, welche die Website ergänzen.

Ist das jedoch nicht der Fall, dann kann man auf WF setzen.

Nicht auf dem eigenen Server speicherbar

Die Daten sind “irgendwo” gespeichert. Meistens in den USA oder Irland.

Das ist besonders für Unternehmen problematisch, in denen Datenschutz wichtig ist.

Wenn Nutzer jedoch keine Daten auf der der Website hinterlassen, sollte das wiederum kein Problem sein.

Zudem lassen sich auch keine eigenen Sicherheitsmassnahmen implementieren, da alles vom WF Webshosting abhängt.

Für Laien nur schwer nutzbar

Wenn man Webflow wirklich gut nutzen möchte, dann sollte man auf einen Profi setzen, der sich damit auskennt.

Denn die Design Oberfläche lässt sich nicht in wenigen Stunden oder Tagen bedienen.

Man braucht dafür mehrere Wochen, um alles richtig zu verstehen. Zudem gibt es viele versteckte Funktionalitäten, mit welchen man komplexe Seiten und Effekte erstellen kann.

Daher sollte man immer auf einen Webflow Entwickler setzen, welcher sich darauf spezialisiert hat.

Glücklicherweise gibt es immer mehr Designer, welche sich auf dieses System fokussieren.

Vorteile

Hier auch ein paar Vorteile.

Günstiges Pricing

Die Hosting Gebühren selbst sind relativ gering. Sie liegen zwischen 12 und 45 US Dollar im Monat.

Die Hauptkosten entstehen bei der Erstellung durch den Designer. Meistens liegen die Kosten für die Erstellung zwischen 5’000 und 25’000 Euro. Es gibt jedoch auch grössere Projekte in diesem Umfeld.

Es gibt auch einen Enterprise Plan. Dieser muss bei dem Vertriebsteam bei WF erfragt werden.

Als Content Management System nutzbar

Manche Unternehmen wollen Texte veröffentlichen oder andere Dokumente, Bilder, Videos und andere Dinge teilen.

Hier lässt sich WF als Content Management System (CMS) nutzen.

Einmal erstellt, lässt sich das Backend auch über einen Laien bedienen.

Geringere Fehlerquellen

Bei einer individuell programmierten Website können einige Fehlerquellen entstehen. Zum Beispiel fehlerhafte Plugins, Module oder Themes.

Diese Fehler kann man bei WF nicht machen, da alles sehr konform ist, und durch die Designoberfläche überwacht wird.

Was gibt es noch zu beachten?

Hier noch ein paar andere Dinge die man beachten sollte:

SEO/ Suchmaschinenoptimierung

Bei selbst erstellten Internetpräsenzen mit Designern und Programmierern, lassen sich die Suchmaschinen (SEO) -Massnahmen individuell programmieren und einstellen.

Besonders bei SEO gibt es viele Parameter, die sich von Website zu Website unterscheiden. Gerade Onlineshops, oder Blogs, die ein hohes Ranking erzielen wollen, brauchen diese Flexibilität.

Bei Webflow ist man jedoch auf den Anbieter angewiesen. Nur wenn dieser eine gute Arbeit leistet, sind auch die Rankings gut. Lediglich die Content-Massnahmen kann man selbst beeinflussen.

Auch die Geschwindigkeit des Hostings, welches einen Einfluss auf das SEO hat, ist vom Anbieter abhängig. Bei einer selbst programmierten Webpage, könnte man auch einen schnelleren Hoster einschalten.

Fazit

WF bietet viele interessante Möglichkeiten grossartige Webseiten zu erstellen. Es lassen sich wunderschöne Homepages erzeugen, mit vielen modernen Webdesign-Effekten.

Besonders der Mittelstand und auch kleinere Webpages können davon profitieren.

Man sollte jedoch auf einen Webflow Entwickler setzen, der bei der Umsetzung  unterstützt.

Was sind Ihre Erfahrungen?

Interessante Links:

Webflow Homepage im Test

Webflow im Review

Bilder: Canva

Der Autor: Sascha Thattil arbeitet bei YUHIRO und hilft Unternehmern und Unternehmen beim einfachen Aufbau von Programmier-Teams in Indien. YUHIRO ist ein deutsch-indisches Unternehmen welches IT Firmen, Agenturen und IT Abteilungen Softwareentwickler bereitstellt.

Sie wollen eine Agentur beauftragen, eine Webseite zu erstellen? Dieser Blogbeitrag geht im Detail darauf ein, mit welchen Kosten man rechnen kann.

Nach eingesetzter Technologie

WordPress

Ein Weg wäre zum Beispiel mit WordPress. Hier gibt es zwei Optionen:

a) Die Nutzung einer Design Vorlage, auch “Theme” genannt und fertigen Plugins/ Erweiterungen

Die Kosten dafür liegen meistens bei zirka 2‘500 Euro bis 8‘000 Euro für ganz kleine Webseiten.  Meistens arbeiten auch eher Freelancer daran, als Agenturen.

b) Das Custom Webdesign einer WordPress Website und Custom Plugins

Hier erstellt die Agentur mit HTML und CSS ein eigenes Webdesign. Oftmals ist ein UI/ UX Designer dabei, der mit Design Werkzeug wie Figma das Layout erstellt. Und dann gibt es noch einen Webentwickler, der das mit PHP programmiert.

Der Preis liegt meistens bei zirka 10‘000 bis 25‘000 Euro. Wobei die Custom Plugins jeweils separat bepreist werden. WordPress Webseiten können auch 1 Millionen Euro kosten, wenn es ganz viele Eigenentwicklungen gibt.

TYPO3

Andere Werkzeuge sind TYPO3 oder Drupal.

In Deutschland wird meistens TYPO3 verwendet, um Webseiten für den Mittelstand oder für Behörden umzusetzen. Diese Internetpräsenzen sind meistens grösser vom Umfang. Meistens arbeiten zwei bis drei Personen für mehrere Monate an so einem Projekt.

Ähnlich sieht der Aufwand für Drupal aus. Dieses sogenannten Content Management System (kurz CMS) wird jedoch nicht selten eher im Ausland verwendet.

TYPO3 Projekte kosten meistens zirka 15‘000 bis 50‘000 Euro. IT Projekte für grössere Organisationen können auch mehrere Hundert Tausend Euro kosten. Auch hier spielen die Anzahl der eigen entwickelten Erweiterungen/ Plugins eine Rolle.

Laravel

Eine Alternative für grössere Webprojekte sind PHP basierte Frameworks wie Laravel oder Symfony. Diese kann man verwenden, wenn es sehr viele Funktionalitäten gibt, welche man umsetzen lassen will. Wie zum Beispiel ein Preisvergleichs Tool oder einen Onlineshop mit vielen eigen programmierten Modulen wie ein Produktkonfigurator (ein Beispiel für einen Produktkonfigurator: Ein Webseiten Besucher kann sich die Komponenten eines Computers selbst zusammenstellen und zum Beispiel auch die Farben ändern/ konfigurieren).

Man kann auch kleine Webseiten bauen. Da es sich meistens auch um Webpages handelt, die Eigenprogrammierungen benötigen, wie die vorher genannten Konfiguratoren, liegen die Preise meistens zwischen 10‘000 Euro und 50‘000 Euro. Es gibt aber auch oftmals IT Projekte basierend auf Laravel die mehrere Hundert Tausend Euro kosten.

Java

Wenn man noch grössere Webseiten bauen will, wo Tausende von Kunden in der Sekunde zugreifen. Dann kann zum Beispiel Java zum Einsatz kommen. Amazon basiert beispielsweise auf dieser Programmiersprache.

Diese Arten von Webseiten werden von grossen weltweit operierenden Agenturen umgesetzt. Nicht selten kommen auch grosse IT Dienstleister zum Einsatz. Der Aufwand lässt sich schwer abschätzen, da nicht selten mehrere Hundert Programmierer daran, vielleicht ein paar Monate bis ein paar Jahre arbeiten. Die Kosten gehen daher in die Millionenhöhe.

Preise nach Grösse der Agentur

Kleine Agentur

Kleinere Agenturen haben meistens einen Stundensatz von 100 Euro bis 150 Euro, plus Mehrwertsteuer.

Lead Agency

Grössere Agenturen, sogenannte Leadagenturen, verwalten oftmals das komplette Werbebudget, eines Konzernbereichs des Kunden. Die Kosten sind dabei unterschiedlich. Denn manche Leadagenturen sind im Besitz der Konzerne und es werden interne Verrechnungssätze genutzt.

Bei anderen werden wiederum nach Tagessätzen abgerechnet, die bei 700 Euro für Junior Mitarbeiter liegen können, bis zu 2500 Euro für Senior Berater.

Nach Abrechnungsmodell

Stundensatz

Dies ist immer noch eines der üblichsten Abrechnungsmodelle. Hier berechnet die Agentur einen Stundensatz, multipliziert mit der benötigten Zeit. Hier eine Beispielrechnung:

40 Stunden Design mit Figma

20 Stunden Umsetzung in HTML und CSS

20 Stunden Einbindung in WordPress

80 Stunden Custom Pluginentwicklung

—–

Total: 160 Stunden

Multipliziert mit dem angenommenen Stundensatz von 100 Euro. Dann kommt man auf 16‘000 Euro für die Internetpräsenz.

Wenn der Kunde zum Beispiel noch eine weitere Änderung möchte, dann kann man das flexibel hinzufügen, indem man die jeweiligen benötigten Stunden mit dem Stundensatz multipliziert.

Festpreis

Manche Werbeagenturen bieten auch feste Preise an. In dem sie zum Beispiel die Anforderungen vom Kunden aufnehmen und sagen “Der Onlineshop kostet 15’000 Euro” Und geht dabei nicht auf die einzelnen Punkte im Genauen ein. Da sich der Kunde in den meisten Fällen sowieso nicht mit der technischen Umsetzung auskennt.

Agile Methode

Oftmals weiss der Kunde zum Start des IT Projektes nicht, was alles Teil des Webpräsenz sein soll. Dann macht es Sinn auf ein flexibleres Modell zu setzen. Im Agile Modell wird monatlich eine Anzahl an Stunden im Voraus verhandelt. Zum Beispiel 250 Stunden. Und dann wird zum Anfang des nächsten Monats wieder berechnet, wie viele Stunden in diesem Monat anfallen werden, zum Beispiel 180 Stunden.

So bleibt man flexibel und kann auch intervenieren, wenn es in die falsche Richtung geht. Oder auch wenn man zum Beispiel neue Ideen hat, welche man hinzufügen möchte.

Die Kosten für solche Webseitenprojekte sind zwar höher. Aber man kann schon eher davon ausgehen, dass man zum Schluss etwas hat, was einen Mehrwert hat.

Nach erschaffenem Mehrwert (Value Based Pricing)

Im Grunde genommen kann es einem Kunden egal sein, wie viel die Webseite kostet. Am Ende soll die Internetpräsenz einen Mehrwert erschaffen. Zum Beispiel mehr Kunden gewinnen, in dem zum Beispiel mehr Personen das Kontaktformular ausfüllen. Oder es soll der Markenbekanntheit oder das Vertrauen in die Firma gesteigert werden.

Wenn die derzeitige Webseite einen Umsatz von 10‘000‘000 Euro im Jahr für die Kundenfirma bedeutet. Und man mit der neuen Internetpräsenz den Umsatz auf 20‘000‘000 Euro im Jahr verdoppeln kann. Dann wird die Kundenfirma kein Problem haben, zum Beispiel 1 Millionen Euro für die Webseite zu bezahlen.

Der Vorteil bei diesem Ansatz ist, dass die Internetagentur genug Budget hat, dieses Ziel auch tatsächlich mit der neuen Webseite zu erreichen.

Zum Beispiel kann die Agentur auf folgende Spezialisten setzen, um das zu erreichen:

1) Das Einschalten einer Umfrage Firma, die potenzielle Kunden des Auftraggebers fragt, was für diese wichtig ist.

2) Die Zusammenarbeit mit einem externen Experten für Copywriting, welcher die Texte schreibt.

3) Den Einsatz eines UI/ UX Design Experten, welcher das Design übernimmt.

4) Das Hinzuziehen eines Conversion Rate Expertens, der die unterschiedlichen Elemente untersucht und schaut, wie man die Conversion Rate erhöhen kann, damit mehr Besucher der Internetpräsenz zu Kunden werden.

5) Das Einholen des Rates eine Suchmaschinenexpertens (SEO), um die Texte so zu schreiben, dass die Webseite auf Google besser gefunden wird.

6) Die Nutzung eines hochspezialisierten Webentwicklers, der sich damit auskennt, wie man eine Webseite so baut, dass sie auch auf allen Endgeräten (Mobile, Web, Tablet, etc.) gut aufgerufen werden können.

Das sind nicht die einzigen Massnahmen die man unternehmen kann, wenn das Budget keine so grosse Rolle spielt. In diesem Modell des „Mehrwert“ erschaffens geht es dann eher darum, das Ziel der Umsatzverdopplung zu erreichen und nicht darum, einen besonders günstigen Preis für die Webseite zu bekommen.

Denn wichtig für eine jede Firma ist immer die Zielerreichung. Zum Beispiel mehr Umsatz. Oder eine bessere Markendarstellung. Oder ein anderes Ziel, welches sich das Unternehmen gesetzt hat.

Fazit

Der Preis für eine Internetpräsenz durch eine Agentur kann für einfache Umsetzungen bei wenigen Tausend Euro liegen, hin zu einem mittleren fünfstelligen Betrag im Mittelstand, bis hin zu mehreren Millionen Euro für grosse, komplexe Internetauftritte.

Interessante Blogbeiträge:

Mehr Informationen dazu was eine Marketingagentur kostet

Interessanter Artikel zum Thema was eine Webseite kostet

Bilder: Canva

Der Autor: Sascha Thattil arbeitet bei YUHIRO und hilft Unternehmern und Unternehmen beim einfachen Aufbau von Programmier-Teams in Indien. YUHIRO ist ein deutsch-indisches Unternehmen welches IT Firmen, Agenturen und IT Abteilungen Softwareentwickler bereitstellt.

Wer heute eine Website oder gar eine ganze Web-App etablieren möchte, kann bei der Realisierung des Projekts auf eine Vielzahl unterschiedlicher Lösungen zurückgreifen. 

Gerade größere Projekte müssen längst nicht mehr komplett von Grund auf entwickelt werden. Mit modernen Frameworks und Content-Management-Systemen (CMS) stehen Webentwicklerinnen und -entwicklern zahlreiche Möglichkeiten zur Verfügung, individuelle und dennoch hochgradig performante Internetseiten umzusetzen.

Vor allem bei der Entscheidung für oder gegen ein CMS scheiden sich dabei oft die Geister. Denn nicht jede Lösung ist gleichermaßen gut für jeden Einsatzzweck geeignet. 

Der folgende Beitrag stellt die beiden unterschiedlichen Systeme WordPress und Drupal vor und erklärt, welche Vorteile die beiden unterscheiden und welche Lösung für welchen Einsatzzweck am besten geeignet ist.

Welche Aufgaben haben Content-Management-Systeme?

Um die Unterschiede zwischen WordPress und Drupal zu verstehen, ist es zunächst wichtig, das Konzept CMS allgemein zu erfassen. Wozu dienen solche Systeme konkret und welche Funktionen übernehmen sie in der Praxis?

Wenn Websites heute mit neuen Inhalten bestückt werden, erfolgt das typischerweise über ein vom CMS bereitgestelltes Backend, ein Eingabeinterface, über das auch Laiinnen und Laien Daten eingeben können. Das CMS bereitet die so zur Verfügung gestellten Informationen dann auf und macht sie über die eigentliche Website zugänglich. Ob es sich bei diesen Inhalten dann um Blogeinträge, neue Produkte für einen Onlineshop oder Einträge in einer Produktinformationsdatenbank handelt, ist für das System letztlich (fast) unerheblich.

CMS wie WordPress (im Beitrag auch mit WP abgekürzt) oder Drupal (kurz DR) stellen diese Technik zur Verfügung. Daneben bieten die Systeme Schnittstellen, über die Webdesigner Inhalte aus der CMS-Datenbank unmittelbar in eigene individuelle Seitendesigns einbinden können. Nicht jede Seite mit demselben CMS im Hintergrund muss also gleich aussehen.

Daneben bieten die meisten modernen CMS über Erweiterungen auch Schnittstellen zu externer Software an. Das können zum Beispiel Enterprise-Resource-Planning-Lösungen sein, über die Warenbestand oder Kundendaten verwaltet werden. So kann zum Beispiel ein Webshop unmittelbar mit SAP oder einer anderen Warenwirtschaftslösung Daten austauschen.

Was macht die beiden vorgestellten Content-Management-Systeme aus?

WP ist das mit Abstand am weitesten verbreitete Web-CMS der Welt. Rund ein Drittel aller Websites wird mit WordPress betrieben, der Marktanteil bei Content-Management-Systemen wird auf gut 60 % geschätzt. Dass das einmal der Fall sein würde, war 2003, als die Software als System zur einfachen Verwaltung von Blogs veröffentlicht wurde, kaum abzusehen.

In der Tat ist die relative Einfachheit des Systems bis heute eines der schlagenden Argumente, die für den Einsatz der Software sprechen. Eine einfache WordPress-Website kann auch mit vergleichsweise wenigen technischen Kenntnissen innerhalb weniger Stunden eingerichtet werden.

Wer mithilfe des CMS ganze Webshops oder Unternehmenswebsites gestalten will, sollte aber natürlich dennoch die Unterstützung von Profis in Anspruch nehmen.

Weiterhin zeichnet das System sich durch enorme Flexibilität und Erweiterbarkeit aus. Zehntausende vorgefertigte Plug-ins stehen für die Software zur Verfügung. Damit eignet WordPress sich für die Entwicklung von Websites in unterschiedlichster Größe. Ob privates Blog, Webshop oder die Website des Weißen Hauses, das CMS ist vielseitig genug, um diese sehr unterschiedlichen Einsatzszenarien abzudecken.

WordPress im Überblick:

• das am weitesten verbreitete CMS der Welt
• einfache Installation und Einrichtung
• sehr flexibel erweiterbar
• große Auswahl vorgefertigter Themes und Plug-ins

Im unmittelbaren Vergleich ist Drupal deutlich weniger weit verbreitet. Rund 1,9 % aller Websites werden mit DR betrieben. Unter den Web-CMS-Lösungen hat das System damit einen Marktanteil von etwa 3,4 %. Doch auch das bedeutet, angesichts der Gesamtgröße des Webs, natürlich eine beeindruckende Nutzungszahl für das im Jahr 2000 erstveröffentlichte System.

Die besondere Stärke des Systems (gerade auch im Vergleich mit dem WP-Ansatz) ist seine Fähigkeit, Daten in vergleichsweise aufwendigen Strukturen zu verwalten. Die einzelnen Inhalte können in sehr unterschiedlichen Formaten abgelegt und in komplexen Taxonomien organisiert werden.

Aufgrund der geringeren Verbreitung werden für das Drupal-CMS deutlich weniger vorgefertigte Plug-ins und Themes angeboten. Zwar listet die offizielle Website des Projekts ebenfalls zehntausende Erweiterungen auf, doch ein Großteil davon ist nicht mit den aktuellsten Versionen des CMS kompatibel.

Darüber hinaus gilt das DR CMS als sehr sicher. Im Vergleich zu anderen CMS ist es nur relativ selten von Sicherheitslücken betroffen.

Drupal im Überblick:

• sehr solide, sichere Software
• viele fertige Erweiterungen
• sehr flexible Datenstrukturen
• komplexer in der Einrichtung und Wartung

Was sind die Gemeinsamkeiten der beiden Lösungen?

Die vorgestellten Content-Management-Systeme werden beide als kostenlose, frei zugängliche Open-Source-Software angeboten. Das bedeutet, der Programmcode der Software kann nicht nur komplett eingesehen werden, sondern darf auch nach Belieben verändert und erweitert werden. 

Im Fall der beiden CMS heißt das vor allem, dass Unternehmen und Anwender, die sich für eine der Lösungen entscheiden, sich sicher sein können, die Software auch in Zukunft ohne Einschränkungen benutzen zu können. Bei Nutzung proprietärer CMS-Lösungen, deren Code nicht frei zugänglich ist, ist darauf leider kein Verlass.

Auch die technischen Voraussetzungen für die Nutzung sind bei den Systemen ähnlich. Beide Lösungen sind in PHP entwickelt und setzen in der Standardkonfiguration auf MySQL bzw. MariaDB als Datenbank im Hintergrund. Drupal kann allerdings auch mit einer Reihe anderer Datenbanksysteme genutzt werden.

Funktional bieten beide Systeme einen flexiblen Baukasten, um Websites unterschiedlichster Größe zu realisieren. Das WP-System versteht sich dabei etwas mehr als Out-of-the-Box-Solution, die grundsätzlich ohne aufwendiges Konfigurieren benutzt werden kann. Der DR-Ansatz dagegen begreift das System deutlich stärker als bloße Backend-Lösung, die als flexibler Unterbau für individuelle Entwicklungsprojekte dient. Dennoch kann das System ebenfalls als Fertiglösung für den Aufbau einer einfachen Website genutzt werden.

Welches System ist „besser“?

Eine ganz klare Antwort auf diese Frage, das sollte beim Lesen des Beitrags bis hierher klar geworden sein, kann es nicht geben. In vielen Fällen gilt aber, dass WordPress aufgrund seiner Einfachheit und weiten Verbreitung die erste Wahl ist. Gerade bei kleineren Projekten ist der zusätzliche Aufwand, der mit der Nutzung von Drupal einhergeht, oft nicht zu rechtfertigen. Dennoch gibt es auch eine ganze Reihe von Szenarien, in denen Drupal die bessere Option darstellt.

Insbesondere bei der Einrichtung von Systemen mit komplexeren Datenstrukturen erweist sich das CMS im direkten Vergleich oft als die stabilere Alternative. Vor allem die sogenannten „Custom Content Types“, die in DR angelegt werden können, erlauben deutlich vielfältigere Anwendungen. WP kann, auch wenn es hier mittlerweile ebenfalls die Möglichkeit gibt, Beiträge in unterschiedlichen Varianten zu konfigurieren, seine Herkunft als Blogsoftware nicht ganz verleugnen. Im Kern werden alle neuen Einträge hier nämlich wie ein Textbeitrag behandelt. Das kann zum Beispiel beim Aufbau eines Ticketing- oder Buchungssystems mitunter in die falsche Richtung gehen.

Zudem bietet Drupal bessere Möglichkeiten, die Zugriffsrechte für verschiedene Nutzer zu konfigurieren. Während WP nur eine überschaubare Menge unterschiedlicher Rollen wie „Autor“ oder „Administrator“ zulässt, können in DR unterschiedliche Rechte sehr frei eingestellt werden. Das kann zum Beispiel für Onlineshops relevant sein, bei denen verschiedene Mitarbeiter auf unterschiedliche Datenbestände Zugriff erhalten sollen.

Demgegenüber spricht die extrem weite Verbreitung ganz klar für WordPress. Viele Webdesigner entwickeln Themes und Plug-ins für das CMS. Für Unternehmen, die ihre Website mit WordPress realisieren lassen, ist damit gesichert, dass sie auch in ein paar Jahren noch passende Entwickler für das Projekt finden werden. Drupal-Profis sind dagegen rarer gesät, sodass die Suche nach Unterstützung zumindest kurzfristig oft etwas schwieriger ist.            

Interessante Beiträge:

Ein Vergleich der beiden Content Management Systeme auf dem Kinsta Blog

Informationen zu WordPress und Drupal

Bilder: Canva

Der Autor: Sascha Thattil arbeitet bei YUHIRO und hilft Unternehmern und Unternehmen beim einfachen Aufbau von Programmier-Teams in Indien. YUHIRO ist ein deutsch-indisches Unternehmen welches IT Firmen, Agenturen und IT Abteilungen Softwareentwickler bereitstellt.

Die einfache Erstellung von Webseiten ist in den vergangenen Jahren zu einem wichtigen Markt geworden. 

Content Management Systeme wie WordPress gelten als die am meisten verbreitete Basis für Websites auf der Welt. 

Aber es gibt auch noch komplexere Systeme, die sich sogar noch einfacher bedienen lassen und neue Optionen bieten. Webflow (im Beitrag auch mit WF abgekürzt) hat sich in diesem Bereich einen Namen machen können. 

Der Vorteil liegt hier nicht nur in der einfachen Gestaltung, sondern in dem Komplettpaket aus Design und Hosting. Dabei sind vor allem die vielen Möglichkeiten für Anwender besonders interessant. 

Es stellt sich aber die Frage, wie hoch die Kosten für eine solche Webseite eigentlich wirklich sind.

Was genau ist Webflow?

Webflow fällt unter die Kategorie der Baukasten-Systeme. 

Das bedeutet, dass entscheidende Elemente der Webseite einfach mit wenigen Klicks erstellt werden können. 

Der Nutzer kann dabei nicht nur aus verschiedenen Vorlagen auswählen, sondern die Seite in der Regel weitestgehend nach dem What You See Is What You Get Prinzip aufbauen. Solche Systeme gab es in der Vergangenheit bereits und selbst viele Hoster, etwa 1&1, bieten dabei entsprechende Möglichkeiten an. 

Der entscheidende Unterschied gegenüber anderen System ist der Funktionsumfang. 

Dazu kommt, dass man bei der Nutzung von Webflow das Hosting für die eigene Seite gleich mitbestellen kann.

Webflow hat sich im Vergleich mit Anbietern wie Jimdo besonders dadurch einen Namen gemacht, dass es sehr flexibel einsetzbar ist und für die unterschiedlichsten Anwendungszwecke skaliert werden kann. 

Die entsprechenden Funktionen sind sowohl für einen eigenen Blog interessant als auch für den grundsätzlichen Betrieb eines Shops im Internet. Dazu kommt, dass die Plattform verschiedene Funktionen für die Kollaboration anbietet. 

Es ist aber eben dieser Funktionsumfang, der dafür sorgt, dass die Kalkulation der Kosten zu einer Herausforderung werden kann – besonders dann, wenn man in diesem Bereich bisher noch nicht mit anderen Systemen gearbeitet hat.

Unterstützung durch einen Webdesigner

Es kann sein, dass man auf professionelle Unterstützung, durch einen Webdesigner, der sich mit diesem Tool auskennt, zurückgreifen muss. Denn die Bedienung ist für einen Laien dann doch nicht so einfach.

Die Stundensätze liegen in diesem Bereich meistens bei zirka 70 Euro bis 150 Euro. Dabei ist der Markt für solche Experten derzeit eher dünn. Weshalb man mit eher hohen Stundensätzen rechnen muss.

Wie berechnen sich die Kosten bei der Nutzung?

Schauen wir uns zum Anfang erstmal die Nutzungskosten an.

Generell ist die Kostenstruktur bei dem Software as a Service so aufgebaut, dass nur für das bezahlt werden muss, was man auch wirklich nutzen möchte. 

Verschiedene Preismodelle erlauben es, im Zweifel nicht nur flexibel entsprechend dem Wachstum der eigenen Projekte im Internet aufzustocken, sondern auch nur die Funktionen auszuwählen, die auch wirklich benötigt werden. 

Dazu kommt, dass die Webseite am Anfang sogar vollkommen kostenlos benutzt werden kann. Ein kurzer Überblick über die wichtigsten Eckdaten bei den Kosten:

• Die Basisfunktion von Webflow kann vollkommen kostenlos benutzt werden. So kann man sich beispielsweise in die Funktionen einarbeiten. Für den Betrieb einer Webseite reicht die kostenlose Version allerdings in den meisten Fällen nicht und viele der Grundfunktionen anderer Pakete sind gar nicht oder nur eingeschränkt verfügbar. Das Problem ist jedoch, dass man in dieser kostenfreien Version keine eigene Domain nutzen kann. Man nutzt sozusagen eine Subdomain von WF, was für eine professionelle Nutzung eventuell nicht so gut ist.
• Man sollte daher auf die nächsthöhere Version setzen, welche 14 US Dollar (rechnen wir der Einfachheit halber einen Euro pro einem US Dollar. Es wären also 14 Euro umgerechnet) im Monat kostet.
• Für den Betrieb größerer Webseiten gibt es verschiedene Pakete. Eine Internetpräsenz mit vielen Inhalten lässt sich beispielsweise bereits ab 23 Dollar im Monat realisieren.
• Für eine professionelle Unternehmenspräsenz macht der Plan für 39 Dollar Sinn.
• Wenn man es als Lösung für mittelständische Unternehmen oder große Konzerne nutzen will, sollte man sich mit dem Vertriebsteam von WF zusammentun. Diese werden dann einen entsprechenden Preis berechnen.

Preise von WF

Durch die unterschiedlichen Pläne für die Bezahlung ist eine transparente Planung der eigenen Kosten möglich. 

Während 23 Dollar beispielsweise auf den ersten Blick recht teuer erscheinen – besonders im Vergleich mit den Leistungen mancher deutschsprachiger Hoster – sollte nicht vergessen werden, dass hier nicht nur das Content Management System geliefert wird. Auch die Seite selbst wird gehostet und nutzt dabei eine Infrastruktur, die für Projekte unterschiedlichster Größe ausgelegt ist. 

Es ist also eine Kombination von Produkten, die dafür sorgen soll, dass alle Leistungen für den Aufbau und Betrieb einer Webseite aus einer Hand geliefert werden.

Mehrsprachigkeit

Wenn man die Internetseite auch auf mehreren Sprachen haben will, dann muss man ein zusätzliches Lizenzpaket buchen.

Hier die Liste:

Onlineshop

Man kann mit WF auch einen Onlineshop erstellen. Dafür gibt es eine separate Preistabelle:

Das Tolle bei den höheren Tarifen (ab 74 Dollar) ist, dass die Transaktionsgebühr von 2 Prozent entfällt.

Wenn man einen professionellen Onlineshop erstellen lassen möchte, kann man WF auch mit Shopify vergleichen. Da es ähnliche Optionen bietet und eventuell Stärken im eCommerce hat.

Individuelles Web Design

Wie bereits erwähnt, wird man als Laie höchstwahrscheinlich das WF Werkzeug nicht selbst bedienen. Sondern wird auf einen Experten in diesem Bereich zurückgreifen.

Hier ein paar Beispiele Budgets mit welchen man rechnen kann:

Es kann sich lohnen, diese Beträge zu investieren. Denn einmal gebaut, kann man die Onlinepräsenz für die nächsten Jahre verwenden. Denn in den meisten Fällen werden keine großen Änderungen vorgenommen. In den meisten Fällen lohnt sich solch eine Investition, denn man kann bereits durch wenige mehr Kunden im Jahr, die man dazu gewinnt, die Ausgaben amortisieren.

Für wen und welche Bedürfnisse ist der Einsatz geeignet?

In den letzten Jahren hat sich die Branche für unterschiedliche Tools zur Gestaltung von Webseiten stetig vergrößert. 

Auch sind solche klassischen Content Management Systeme wie WordPress heute so gestaltet, dass sie auch von Nutzern ohne größere Vorkenntnisse bei Bedarf installiert werden können. 

Allerdings haben die meisten dieser Optionen den Nachteil, dass sie entweder mit einem geringen Funktionsumfang angeboten werden oder eben doch Vorkenntnisse benötigen. 

So lässt sich WordPress mit der Hilfe von vorgefertigten Designs und Templates zwar einfach aufsetzen und betreiben – schon bei kleinsten Änderungen wird aber auch hier in der Regel wieder Aufwand in die Richtung von Programmierung spürbar.

Webflow versucht genau diese Lücke zu schließen und den Anwendern ein Produkt zu liefern, das einen großen Funktionsumfang hat, aber besonders auf eine leichte Bedienung setzt. Das Anwenderprofil ist dabei einfach erklärt: prinzipiell ist die Plattform für jeden geeignet. Das liegt vor allem an den Kernfunktionen, die eben keine Einarbeitung benötigen, sondern mit denen vom ersten Klick an gearbeitet werden kann:

• Einfache Design-Bearbeitung per Mausklick. Sämtlicher Code, der für ein modernes Webdesign geschrieben werden muss, wird automatisch im Hintergrund erstellt. Zwar gibt es Elemente, die als Vorlagen genutzt werden können, der Anwender ist allerdings nicht darauf beschränkt und hat weitestgehenden Spielraum in der Gestaltung.
• Schnelle Bearbeitung von Inhalten durch unterschiedliche CMS-Funktionen. Content jeder Art, ob statische Unterseite oder dynamischer Blog-Eintrag, können einfach eingefügt werden.
• Verschiedene Bearbeiter möglich. Das bedeutet, dass mehrere Personen an der Webseite arbeiten können, ohne dass ein voller Zugriff auf die technische Basis gewährt werden muss.
• Selbstverständlich sind auch solche Basics wie Responsive Design oder Suchmaschinenfreundlichkeit als Funktionen bereits hinterlegt und erlauben daher eine einfache Vermarktung der Webseite.

Das System überzeugt in diesem Fall also vor allem dadurch, dass es sich für Projekte unterschiedlichster Größe anbietet. 

Sollte die eigene Webseite im Laufe der Zeit wachsen und ist ein größerer Umfang an Funktionen und Inhalten nötig, kann das ebenfalls einfach umgesetzt werden. 

In diesem Fall kann zudem einfach auf ein größeres Abo gewechselt werden, um auch die nötige technische Infrastruktur zu schaffen, die mit dem Betrieb einer solchen Seite einhergehen kann.

Webflow mit Hilfe vom Profi – gute Webseite und passende Beratung

Ein Vorteil der Struktur von Webflow liegt darin, dass die Bearbeitung nicht unbedingt vom Besitzer der Webseite selbst erfolgen muss. 

Die unterschiedlichen Rollen im System erlauben es beispielsweise, dass sämtliche Aufgaben rund um das Design und die technische Verwaltung an einen Profi übergeben werden. 

Das kann ein professioneller Webdesigner sein oder ein IT-Profi, der sich genau auf diesen Bereich spezialisiert hat. 

Für die Betreiber der Webseiten bedeutet das, dass sie sich auf die eigentlichen Kernaufgaben im Internet konzentrieren können. 

Sie sorgen dafür, dass mehr Besucher auf die Seite kommen und hier Geschäfte abgewickelt werden. 

Der Profi kümmert sich darum, dass das Design ansprechend ist und die Seite so funktioniert, wie es sich Betreiber und Besucher wünschen.

Solche Managed Services können die Kosten natürlich nach oben treiben. Allerdings können viele Aufgaben, vom eigentlichen Aufbau bis hin zum Betrieb, in Hände gegeben werden, die Erfahrung in diesem Bereich haben. 

Besonders jene, die sich um ihre eigentlichen Geschäfte kümmern möchten, ohne dabei auf die Vorteile einer modernen Webseite zu verzichten, profitieren von diesem Service. 

Webflow ist hier eine besonders beliebte Plattform, weil sie ebenso viele Möglichkeiten bietet und in den unterschiedlichsten Branchen und bei verschiedenen Größen Anwendung finden kann. 

Eine Beratung kann hier helfen, um sich die Vorteile maßgeschneidert für das eigene Business erklären zu lassen und am Ende eine Entscheidung zu treffen.            

Interessante Links:

Die offizielle Pricing Website des Herstellers

Mehr Informationen zu den Kosten in diesem Blog Beitrag

Bilder: Canva

Der Autor: Sascha Thattil arbeitet bei YUHIRO und hilft Unternehmern und Unternehmen beim einfachen Aufbau von Programmier-Teams in Indien. YUHIRO ist ein deutsch-indisches Unternehmen welches IT Firmen, Agenturen und IT Abteilungen Softwareentwickler bereitstellt.

Wer heute eindrucksvolle Webseiten fernab von starren Templates erstellen möchte, die den Responsive-Design-Gedanken konsequent umsetzen, greift zunehmend auf den Webflow-Builder zurück. 

Developer mit entsprechenden Kenntnissen sind daher heute stark nachgefragt und sie müssen mit vielfältigen Anforderungen ihrer Auftraggeber umgehen können.

Worum handelt es sich bei bei diesem Tool genau?

Webflow ist ein Tool des gleichnamigen US-amerikanischen Unternehmens für die Entwicklung von Webseiten direkt im Browser. 

Das Werkzeug stellt der Anbieter als Software as a Service (SaaS) bereit, womit eine jederzeitige Online-Zugänglichkeit von jedem Gerät und Ort aus besteht. 

Mithilfe von Webflow soll es einfacher gelingen, neue Webseiten zu bauen und seine Ideen als Webentwickler umzusetzen.

Der entscheidende Vorteil des Angebots besteht darin, dass die Erstellung der Webseiten ohne Code erfolgt. Dieser No-Code-Ansatz beschleunigt die Entwicklung und eröffnet diese auch solchen Designern, die über keine umfangreichen Programmierkenntnisse verfügen. 

Die Erzeugung des notwendigen Codes wie etwa HTML, Javascript oder CSS erfolgt automatisch durch die Software im Hintergrund. Dennoch sind spezielle Kenntnisse im Umgang mit Webflow gefragt, um Ergebnisse erzielen zu können, die allen Anforderungen an professionelle Webseiten genügen. 

Das gilt gerade dann, wenn maßgeschneiderte Lösungen gefragt sind, die exakt dem jeweiligen Bedarf im Unternehmen entsprechen. Daher hat sich mit dem Webflow-Entwickler hier ein eigenes Berufsbild heraus geprägt.

Als Content-Management-System (CMS) konkurriert Webflow mit anderen Angeboten wie dem seit vielen Jahren etablierten WordPress. Webflow wächst stark, kommt ohne Code aus und bietet ein hohes Maß an Designfreiheit. 

Der visuelle Entwicklungsansatz und die Flexibilität in der Umsetzung von Webseiten-Projekten sowie die einfache Integration von SEO tragen dazu bei, dass Webflow als bedeutsames CMS der Zukunft gilt.

Um diese Aufgaben kümmern sich die Programmierer

Das Aufgabenspektrum der Webflow-Entwickler ist vielfältig und umfasst Arbeiten, die sich auf die direkte Anwendung des Tools beziehen als auch vorbereitende und Managementaufgaben. 

Die wesentliche Herausforderung für jeden Webflow-Developer besteht darin, die bestehenden Designkonzepte in Webflow (im Beitrag auch mit WF abgekürzt) umzusetzen und damit also aus einem Katalog mit verschiedenen Anforderungen letztlich die gewünschten Webseiten zu erzeugen.

Um diese Aufgaben bewältigen zu können, reichen Kenntnisse in Bezug auf das Webflow-Tool alleine nicht aus. Der Entwickler muss auch mit dem Kunden kommunizieren und ermitteln, welche Art von Webseite überhaupt gewünscht ist und was diese können soll. Das Projektmanagement gehört ebenso zu den Aufgaben wie die Anwendung allgemeiner Designprinzipien.

Der WF-Entwickler muss in der Lage sein, Webseiten und Landingpages nach Kundenanforderung erstellen zu können. Er verwaltet bereits bestehende Web-Projekte und kümmert sich auch um SEO-Maßnahmen, um dem Ergebnis in den Suchmaschinen zu einer besseren Sichtbarkeit zu verhelfen. Damit das funktioniert, arbeitet er mit anderen Teams zusammen, die zum Beispiel aus Copywritern oder Designern bestehen.

• Zusammengefasst sind das die drei wichtigsten Aufgaben der Webflow-Experten:
• Entwicklung
• Design
• Projektmanagement
• Kundenkommunikation

Für Unternehmen ergibt sich aus dieser Bündelung von Tätigkeiten in einer Person der Vorteil, dass sie mit nur einem Ansprechpartner auskommen. Das hilft dabei, Projekte in der Webentwicklung mit einem geringeren Organisations- und sonstigen Aufwand umzusetzen und die Strukturen schlank zu halten.

Welche Ausbildung muss ein Experte in diesem Bereich mitbringen?

Die wichtigsten Kenntnisse des WF-Developers beziehen sich auf den WF-Service selbst und die Möglichkeiten, die er für die Erstellung von Webseiten bietet. Entwickler in diesem Bereich bringen typischerweise grundlegende Kenntnisse in der Webentwicklung mit und haben auch ein Verständnis für die Programmierung zum Beispiel im Rahmen von HTML oder CSS erlangt. 

Auch wenn die Arbeit mit dem WF-Tool rein visuell erfolgt, ist es wichtig, den automatisch generierten Code zumindest verstehen und überprüfen zu können, auch wenn der Entwickler ihn nicht direkt selbst schreibt. WF-Developer bringen daher Fähigkeiten mit, die sich mit jenen klassischer Webentwickler überschneiden.

Webflow-Developer sind entweder Freiberufler oder als Angestellte fest in die jeweiligen Teams in der Webentwicklung in den Unternehmen integriert. Sie bringen ein tiefes Verständnis für die Struktur und das Layout von Websites mit und kennen sich mit der WF-Plattform und deren Funktionen und Möglichkeiten sowie mit den Details der Webflow-Dokumentation aus.

Viele dieser Fähigkeiten können die Entwickler im Selbststudium erlernen. Sie sammeln Erfahrungen mit dem WF-Tool und setzen Projekte eigenständig um. Sie verstehen sich darauf, vorgegebene Designs ihrer Auftraggeber präzise im WF-Tool umzusetzen. 

Häufig sind mehrere Jahre Berufserfahrung notwendig, um den verschiedenen Vorstellungen von der fertigen Webseite entsprechen zu können. Dazu gehört auch, auf während eines Projekts wechselnde Anforderungen reagieren zu können. 

Zudem ist es wichtig, dass die Entwickler ein ausgeprägtes ästhetisches Verständnis mitbringen und einschätzen können, ob das Ergebnis zum Beispiel in Hinblick auf die Anwenderfreundlichkeit ausreichend ist.

Mit welchen Stundensätzen ist zu rechnen?

Der Stundensatz  ist abhängig von Faktoren wie der Erfahrung, der Region oder der Komplexität des Projekts. Hinzu kommt die Frage, ob der Kunde wünscht, dass neben der WF-Plattform noch weitere Tools zum Einsatz kommen sollen. Weiterhin ist die aktuelle Marktnachfrage nach WF-Developern zu berücksichtigen.

Einsteiger mit wenig Erfahrung können bereits Stundensätze zwischen 50 und 70 Euro verlangen. Wer bereits mehrere erfolgreich abgeschlossene Projekte vorweisen kann, rechnet von 80 bis 120 Euro in der Stunde ab. Experten mit umfangreichen Erfahrungen und Kenntnissen können aber auch deutlich mehr von ihren Auftraggebern verlangen.

Diese Technologien kommen bei der Entwicklung der Webseiten zum Einsatz

Bei der Erstellung von Webseiten mithilfe des WF-Tools dreht sich alles um die Gestaltung ästhetisch ansprechender Webseiten mit einfacher Bedienung und allen Funktionen, die das Nutzererlebnis verbessern.

1) WF-Plattform

Das zentrale Werkzeug für den WF-Entwickler ist die WF-Plattform selbst. Sie stellt die wesentlichen Funktionen zur Verfügung, die zum Beispiel für die visuelle Hinzufügung von Elementen notwendig sind. Zudem ist es möglich, mithilfe dieses Werkzeugs interaktive Funktionen für die Besucher der Webseiten umzusetzen.

2) Responsive Design

Webflow-Entwickler müssen sich mit dem Konzept des Responsive Designs hervorragend auskennen. Die Darstellung der Webseiten muss auf allen Endgeräten und bei allen Anzeigeformaten die gleiche hohe Qualität und Funktionalität erreichen. 

Das gilt gerade in Hinblick auf mobile Endgeräte mit ihren kleineren Bildschirmen. Funktion und Ästhetik sollten im Idealfall unabhängig vom Gerät und der Bildschirmgröße oder -auflösung sein. Ein guter WF-Developer verfügt über die Erfahrung, das umsetzen zu können.

3) WF CMS

WF-Entwickler kennen sich mit dem Webflow Content Management System (CMS) aus und nutzen dieses, um die dynamischen Inhalte auf den Websites zu verwalten. Dieses Tool hilft dem Developer dabei, die Inhalte effizient zu aktualisieren und zu organisieren.

4) HTML, CSS, Javascript

Grundsätzliche Kenntnisse bezüglich HTML (Hypertext Markup Language), CSS (Cascading Style Sheets) und Javascript sind bei einem gut ausgebildeten WF-Developer vorhanden. Er kann den Code lesen und bei Bedarf anpassen, auch wenn er ihn nicht selbst erstellt.

5) Sonstige Design-Tools

Neben WF selbst können weitere Design-Werkzeuge zum Einsatz kommen. Zu nennen sind zum Beispiel Adobe XD oder Sketch. Welche Werkzeuge hier gefragt sind, hängt vom jeweiligen Auftraggeber und den besonderen Anforderungen des jeweiligen Projekts ab.

Interessante Links:

Website eines Webflow Programmierers

Mehr zum Website Tool auf Wikipedia

Bilder: Canva

Der Autor: Sascha Thattil arbeitet bei YUHIRO und hilft Unternehmern und Unternehmen beim einfachen Aufbau von Programmier-Teams in Indien. YUHIRO ist ein deutsch-indisches Unternehmen welches IT Firmen, Agenturen und IT Abteilungen Softwareentwickler bereitstellt.

WordPress (kurz WP) ist bereits die am meisten genutzte Content Management Software (System um Inhalte Online zu verwalten). Das hat verschiedene Gründe. Ausser den vielen Vorteilen gibt es auch ein paar Nachteile. Für alle die eine Entscheidung, für oder gegen das System, treffen müssen, zeigt dieser Artikel ob es eine passende Lösung sein kann.

Vorteile von WordPress

SEO

SEO steht für Suchmaschinenoptimierung, und steht für die Auffindbarkeit Ihrer Webseite bei den verschiedenen Suchmaschinen wie Google oder Bing.

Hier ist eines der grössten Vorteile von WordPress. Wie kein anderes Content Management System (CMS) schafft es WordPress ganz weit oben in den Suchmaschinen-Rankings gefunden zu werden.

Ps: Natürlich müssen Grundlagen der On-Page SEO (nicht erschrecken vor dem Wort, hier mehr darüber) eingehalten werden, was wiederum kein Hexenwerk ist.

WordPress und Google

Besonders die Suchmaschine steht in einer besonderen Liebesbeziehung mit WordPress. Die Hintergründe sind mir persönlich nicht klar, aber Google hat eine Vorliebe WordPress Webseiten ganz vorne bei den Suchresultaten anzuzeigen.

Themes

Themes sind herunterladbare Layouts, die man auf das WordPress System aufspielen kann. Dadurch kann man das komplette Design der Webseite sehr schnell verändern.

Man kann Themes mit Anzügen vergleichen. Anstatt den Anzug zu nähen und anzuziehen, kann man den Anzug einfach fertig kaufen und verwenden. Das erleichtert die Erstellung einer ansprechenden Webseite ungemein.

Unendlich viele Plugins

Plugins sind kleinere Softwaremodule die man ganz einfach bei WordPress hinzufügen kann. Man muss diese nur auswählen und auf installieren klicken, schon sind diese Programme lauffähig.

Das Wort Plugin kommt aus dem Englischen und bedeutet soviel wie „Einsteckelement“, wie ein Legosteinchen, kann man es einfach der WordPress Seite hinzubauen.

Es gibt Plugins für die Verbesserung der Suchmaschinenauffindbarkeit, für Formularelemente und viele viele mehr.

Früher musste man diese Plugins sehr teuer programmieren. Unter Umständen kostet die Programmierung eines solchen Softwaremoduls mehrere tausend Euro. Heutzutage werden diese Elemente von der WordPress-Entwicklergemeinschaft kostenlos bereitgestellt.

Updates

Das Internet entwickelt sich jedes Jahr, ja sogar jeden Monat, rasant weiter. Eine „normale“ Hand-programmierte Webseite würde daher nur für wenige Monate technologisch relevant sein. Da die Änderungen der Webtechnologien eventuell so stark sein werden, dass diese Art von Webseite nicht mehr richtig im Internet-Browser dargestellt werden.

WordPress (WP) schafft hier Abhilfe. Fast jeden zweiten bis dritten Monat gibt es ein Update, das man automatisiert einspielen lassen kann. Dadurch bleibt die Webseite auf Basis von WordPress immer Up-To-Date.

Ladezeit

Das WP-System ist ein Leichtgewicht unter den CMS. Dadurch lädt die Webseite auf Basis dieser Software sehr schnell, was natürlich gut ist, denn ein Web-Besucher möchte nicht mehrere Sekunden warten, bis die Seite geladen hat.

Durch zusätzliche Plugins kann man die Ladezeiten zusätzlich beschleunigen.

Einfach zu nutzen

Ein weiterer toller Vorteil ist, dass der Betreiber der Seite nur rudimentäre Kenntnisse haben muss um Änderungen vorzunehmen.

Es lassen sich ganz einfach neue Seiten, Bilder, Videos etc. hinzufügen.

Um die Seiten zu gestalten braucht man nur etwas Kenntnisse in HTML, welche man sich innerhalb von 2 bis 3 Tagen aneignen kann.

Es gibt jedoch auch einen sogenannten zusätzlichen WYSIWYG Editor, auf welchem man nicht einmal HTML Kenntnisse benötigt, um die Seiten zu erstellen.

Blog

Am Anfang war WordPress eher als Blog-System bekannt. Daher hat es hierfür sehr viele Funktionalitäten, die sich auch über die Jahre hinweg verbessert haben.

Zum Beispiel lässt sich WordPress sehr einfach an Social Media Profile wie zum Beispiel bei Facebook, Twitter etc. anbinden.

Nachteile von WordPress

Nicht so sicher wie andere CMS

Ein Vorteil, die leichte Bauweise, von WP wird bei der Sicherheit wiederum zum Nachteil.

Für Angreifer ist das CMS um einiges einfacher zu beschädigen.

Jedoch ist das höchstwahrscheinlich für Webseiten von Selbstständigen oder KMU nicht wirklich entscheidend, da sich auf dem System oftmals keine unternehmenskritischen Informationen befinden.

Dieses Problem könnte man umgehen, indem man jede Woche automatisiert eine Backup-Datei erstellt. Auch hierfür gibt es ein Plugin, welches man kostenfrei herunterladen kann.

Design Einschränkungen

Wie andere CMS auch, gibt WordPress eine bestimmte Vorgabe, wie die Layouts aussehen müssen. Daher kann man die Designs nicht so gut gestalten.

Für ein sehr stark individualisiertes Design wäre hierbei wiederum eine Hand-programmierte Lösung, auf Basis von HTML, CSS3 und JavaScript, geeigneter.

Nicht unbedingt als Enterprise Lösung geeignet

Grössere Mittelständische Unternehmen und Grossunternehmen brauchen oftmals komplexere Intranet-Systeme. Hierfür benötigt man unter anderem die Möglichkeit an verschiedene Nutzer unterschiedliche Rechte zu vergeben. Zum Beispiel sollte die Personalabteilung nicht unbedingt auf die Daten der Vertriebsmannschaft zugreifen können.

Hier kann WordPress eher schlecht als recht behilflich sein.

Für komplexe Systeme helfen dann eher CMS wie Drupal oder Typo3.

Stabilität

Auch beim Thema Stabilität ist WP nicht unbedingt die beste Lösung.

Packt man zum Beispiel zuviele Plugins auf die Seite, dann fängt das CMS an, zum einen langsamer zu werden. Zum anderen kann es sein, dass die Seite komplett abstürzt und man die Seite aufwendig reparieren muss.

Performance

Solange man nur wenige Hundert bis wenige Tausend Besucher pro Tag hat, kann WP gut mithalten.

Sollten die Besucherzahlen jedoch rasant steigen, dann sollte man auf ein anderes CMS oder eine Hand-programmierte Lösung übergehen. Denn WP ist für solche starken Besucherströme nicht ausgelegt, oder kann sie zumindest nicht verarbeiten.

Fazit

Falls Sie eine Einzelperson oder ein kleineres KMU sind, dann lohnt es sich auf WordPress zu setzen, da es einfach zu installieren und zu warten ist. Zum anderen werden Sie von Ihren Kunden und Partnern einfach durch die Suchmaschinen gefunden.

Wenn Sie zusätzliche Funktionalitäten brauchen, dann können Sie diese ganz einfach durch die vorhandenen Plugins hinzufügen, und müssen diese nicht aufwändig programmieren lassen.

Welches CMS würden Sie bevorzugen? Planen Sie eine WordPress Webseite? Wo sehen Sie die Vor- und Nachteile dieses Systems?

Wir freuen uns auf einen Austausch. Nutzen Sie hierfür das untenstehende Kommentarsystem.

Interessante Links:

Hier ein paar weitere Vorteile und Nachteile des Content Management Systems

Noch mehr Informationen zu WordPress

Der Autor: Sascha Thattil arbeitet bei YUHIRO und hilft Unternehmern und Unternehmen bei der Erstellung von einfachen und komplexen WordPress Webseiten. YUHIRO ist ein deutsch-indisches Unternehmen welches Web Applikationen und Mobile Apps entwickelt.

Dieser Artikel zeigt die Gesamt-Kosten für eine Webseite auf. In unserem alltäglichen Geschäft bekommen wir öfter die Anfrage „Was kostet eine Webseite„. Diese Frage wollen wir in diesem Blogpost beantworten. Auch weil man zur Zeit noch keine guten Artikel zu dem Thema im Internet finden kann.

I – Definition Webseite

Hier die Definition die in Wikipedia steht:

„Als Webseite (eine Wortzusammensetzung aus „Web“ und „Seite“), Webdokument, Internetseite oder kurz Seite wird ein Dokument als Bestandteil eines Angebotes oder einer Website im World Wide Web bezeichnet, das mit einem Browser unter Angabe eines Uniform Resource Locators (URL) abgerufen und von einem Webserver angeboten werden kann. In diesem Zusammenhang wird auch von einer HTML-Seite oder einem HTML-Dokument gesprochen.“

Kurz gefasst: Eine Homepage ist eine Plattform im Internet um sich oder sein Angebot zu präsentieren und oder zu verkaufen.

II – Erste Schritte

1 – Konzeption der Webseite

Bevor man eine Webseite erstellt oder erstellen lässt, sollte man sich über grundlegende Dinge Gedanken machen.

• Zielgruppe: Wer ist meine Zielgruppe? Zum Beispiel: Männlich, zwischen 30 und 40 Jahren, Arbeitet in der Geschäftsführung und kommt aus der Baustoffbranche
• Alleinstellungsmerkmal: Wie unterscheide ich mich von meinen Wettbewerbern? Zum Beispiel: Einziger Anbieter mit Expertise in einem bestimmten Bereich
• Ziele: Welche Ziele verfolge ich mit der Webseite? Zum Beispiel: Anfragen über das Kontaktformular; Anruf über die Hotline; Markenbekanntmachung; Zum Produkt oder der Dienstleistung weiterbilden

2 – Kleine Webseite oder Grosse?

Technisch lässt sich heute vieles umsetzen. Es gibt die Möglichkeit Webvisitenkarten zu erstellen, die lediglich 100 bis 300 Euro kosten. Bis hin zu elaboraten Webseiten mit Warenwirtschaftssystemen und angebundenem Onlineshop. Daher ist eine Pauschalaussage über einen Preis eines solchen Projektes fast nicht möglich. Was jedoch machbar ist, ist es einen Überblick, über die verschiedenen Teilbereiche die eine Webseite beinhalten kann, zu geben.

3 – Viel besuchte Webseite?

Es gibt einige Seiten bei denen man bei der Konzeption bereits davon ausgehen kann, das sehr viele Personen diese gleichzeitig besuchen werden. Das kann zum Beispiel bei Unternehmen der Fall sein, die bereits eine starke Präsenz haben, jedoch im Internet noch nicht zu finden sind.

Bei stark besuchten Seiten müssen auch weitere Bereiche beachtet werden. Der Server muss performant genug sein um die Besucherlast auszuhalten, passende Verschlüsselungen der Zugänge (zum Beispiel Zahlungsbereich oder Kundenbereich) müssen implementiert werden, die Präsenz muss auf Ladezeiten optimiert werden. Das sind nur einige Bereiche die man bei stark besuchten Internetpräsenzen beachten muss.

Einige CMS Systeme sind auf hohe Besucherzahlen ausgerichtet. Eines davon ist TYPO3, aber auch viele andere CMS können die Anforderung erfüllen.

III – Zu berücksichtigende Themen bei einer Webseite:

1 – Logo

Der erste Schritt zur Webseite wird meistens das Logo sein. Denn das Design des Logo’s ist ausschlaggebend für das Design der Rest der Webseite. Es gibt hier verschiedene Möglichkeiten ein Logo umzusetzen. Zum Beispiel gibt es Plattformen wie 99designs.com. Dort kann man sich sein Logo in einer Art Wettbewerb erstellen lassen (Preise zwischen 299 US Dollar und 1299 US Dollar). Initial werden grundlegende Anforderungen an das Design in das Portal gestellt. Daraufhin bewerben sich viele Designer (meistens mehr als 20) mit ihren Designvorschlägen. Nach Abschluss des Projektes wird ein Gewinner gekürt.

• Vorteil: Sehr viele Designvorschläge aus denen man wählen kann
• Nachteil: Von der Einstellung des Projektes bis zum Abschluss vergehen zirka 3 Wochen

Die andere Möglichkeit ist mit der Agentur, von der Sie die Webseite erstellen lassen, auch das Logo zu erstellen.

• Vorteil: Enge Zusammenarbeit möglich, welche Ihre Anforderungen eins zu eins umsetzen können
• Nachteil: Weniger Auswahlmöglichkeiten als bei Plattformen wie 99designs.com

Da das Logo viele folgende Designtätigkeiten beeinflusst, sollte man sich hier einige Gedanken machen:

• Passt das Logo zu meinem Corporate Design
• Passt das Logo zu den Emotionen die ich mit der Marke vermitteln möchte
• Werden meine Werte in dem Logo wiedergespiegelt

Man sollte aber auch beachten, dass bekannte Werbeagenturen auch ganze Prozesse zur Erstellung solcher Logo’s haben, die mehrere Wochen und Monate dauern. Dort kann dann ein Logo nicht selten zwischen 15’000 Euro und 100’000 Euro liegen. Für das Deutsche Bank Logo wurde zur Erstellungszeit zirka 100’000 Mark gezahlt.

2 – Design der Webseite

Das Design der Webseite selbst wird oftmals in der Software von Adobe namens Photoshop oder Figma erstellt. Auch hier kann man eng mit der Agentur zusammenarbeiten um ideale Ergebnisse zu erhalten. Bei der Erstellung der Photoshop Datei (beziehungsweise der Photoshop Bilder zu den einzelnen Seiten) sind der Phantasie keine Grenzen gesetzt. Jedoch sollte man stets auf die Umsetzbarkeit und die Kosten, einer Umwandlung in ein HTML Design, achten.

Um Kosten zu sparen könnte man diesen Teilbereich selbst erledigen. Hierfür braucht es Einarbeitungszeit in die Photoshop Software, da diese nicht sehr intuitiv gestaltet ist. Einfacher Handhabbar sind Systeme wie Inkscape welche auch für Laien nutzbar sind.

Designkonzept: 2’500 Euro bis 15’000 Euro für kleinere Projekte

3 – Erstellung HTML Datei

Um das Design dem Internet verständlich zu machen, muss man das Photoshop Design in HTML programmieren. Der Aufwand entsteht je nach Komplexität der Photoshop Dateien, sowie den weiteren Anforderungen.

HTML/ CSS Umwandlung: 500 Euro bis 7’000 Euro für kleinere Online Präsenzen

4 – Einbindung in ein CMS System

Es gibt viele Content Management Systeme (CMS) Systeme, wie zum Beispiel WordPress, Joomla, Drupal und viele mehr. Diese sind vorprogrammierte Systeme die man für die Umsetzung von Webseiten nutzen kann. Auch hier gibt es verschiedene Möglichkeiten der Umsetzung.

A – Erstellung eines eigenen Templates anhand der HTML Datei

Nach der Erstellung der HTML Datei muss das Ganze in einem Template erstellt werden, so dass diese in den unterschiedlichen CMS zur Verfügung gestellt werden kann.

B – Alternative: Fertige Templates verwenden

Es gibt auf verschiedenen Plattformen, wie zum Beispiel www.themeforest.net, vorprogrammierte Templates. Diese kosten von 20 Euro bis 200 Euro. Diese kann man direkt in die CMS Systeme einspielen.

• Vorteil: Hierdurch erspart man sich die aufwendige Erstellung der Photoshop Datei, der Erstellung der HTML Dateien und die Einbindung in ein Template. Auch ein Laie kann es umsetzen
• Nachteil: Die fertigen Templates sind nur gering an eigene Bedürfnisse anpassbar

C – Vorteil der Nutzung eines CMS Systems

Die Programmierung des Administrationsbereiches und des Backends (die Prozesse die im Hintergrund ablaufen) sind mit einem hohen Aufwand verbunden. Ein Content Management System beinhaltet die meisten der benötigten Funktionen. Die Erstellung von neuen Seiten oder neuen Funktionen wird durch das CMS vereinfacht. Auch gibt es viele Plugins die man kostenfrei nutzen kann. Das beste Beispiel für ein CMS das für Webpräsenzen genutzt werden kann ist WordPress. Aber auch Systme wie Joomla, Drupal, TYPO3 und viele kleinere Anbieter können interessant sein. Einer der Hauptnachteile bei CMS Systemen ist, das diese nicht mehr so flexible sind, wie komplett handprogrammierte Webseiten.

5 – Grafiken, Button

Auch hier gibt es jeweils die kostengünstige und die aufwendigere Variante. Plattformen, wie zum Beispiel www.graphicriver.net, bieten viele fertige Grafiken und Buttons an. Diese können einfach eingebunden werden.

Die aufwändigere Variante besteht darin, die Buttons von einem Grafiker/ Webdesigner erstellen zu lassen. Der Stundensatz liegt hier meistens zwischen 80 und 120 Euro.

6 – Professionelle Fotos oder doch lieber von der Stange?

Bei den Fotos kann man auf Plattformen wie www.istockphoto.com oder www.fotolia.de zurückgreifen. Dort stellen professionelle Fotografen ihre Bilder zum Kauf zur Verfügung. Bilder sind dort von unter einem Euro bis hin zu kleineren Euro Beträgen erhältlich.

Bei einem höheren Budget, sowie einem Bedürfnis ein starkes individuelles Image aufzubauen, macht es Sinn einen professionellen Fotografen einzubinden. Gute Bilder sind bei der Imagepflege nicht zu unterschätzen.

Professioneller Fotograf: 1’500 bis 10’000 Euro (wenige, hochwertige Fotos)

7 – Content: Selbst erstellt oder vom Content Writer

Qualitativ hochwertige Texte können den Unterschied ausmachen, zwischen einer erfolgreichen und einer unerfolgreichen Webseite. Texte die den Leser begeistern und zum weiterlesen animieren, erhöhen die Chancen auf die Durchführung der gewünschten Aktionen seitens des Seitenbesuchers.

Daher stellt sich die Frage ob man die Texte selbst erstellt oder durch einen professionellen Content Writer anfertigen lässt. Selbst erstellt, bleiben die Kosten hierfür sehr gering. Ein professioneller Content Writer kostet etwa 100 Euro und mehr pro Stunde. Bei Internetpräsenzen mit hoher Seitenanzahl können so, hohe Kosten entstehen. Alternativ könnte man bestimmte Seiten selbst erstellen und einige wichtige Seiten, zum Beispiel die Startseite, vom Texter erstellen lassen.

Dabei sollte man zwischen Content Writer (Texter) und Copy Writer (Werbetexter) unterscheiden. Heutzutage gibt es zudem Experten die sich auf Conversion Rate optimierte Texte spezialisiert haben.

Ein Text mit 1000 Wörtern: zirka 50 bis 200 Euro

8 – SEO und SEA

Eine Webpräsenz hat auch das Ziel im Internet gefunden zu werden. Ansonsten wäre eine Erstellung dieser nicht wirklich sinnvoll. Zwei Wege um im Internet gefunden zu werden sind Suchmaschinenoptimierung (Englisch: Search Engine Optimization, kurz SEO) und Suchmaschinenmarketing (Englisch: Search Engine Advertising, kurz SEA). Für beide Themen finden Sie weitere Artikel auf dem YUHIRO Blog. Dort sind diese ausführlich beschrieben.

9 – Umsetzung für Mobile Endgeräte

Immer mehr Personen nutzen Mobile Endgeräte um auf das Internet zuzugreifen. Daher macht eine Umsetzung im sogenannten

A – Responsive Webdesign

Sinn. Hierbei passt sich das Seiten-Layout den verschiedenen Bildschirmgrössen der Mobilen Geräte an. Je nach dem ob die Seite auf Basis eines CMS oder handprogrammiert ist entsteht hier ein kleinerer oder grösserer Aufwand.

Responsive: zirka 1’000 bis 7’500 Euro. Meistens je nach Design und Testing (es muss geprüft werden, ob es auch auf allen Endgeräten, wie zum Beispiel Tablets und unterschiedlichsten Smartphones richtig funktioniert. Im Beitrag mehr dazu).

Weitere Möglichkeiten der Umsetzung für Mobile Endgeräte im Folgenden:

B – Mobile App

Eine weitere Möglichkeit der Umsetzung für Mobile Endgeräte ist die Erstellung von Mobile Apps (zum Beispiel auf Basis von Android, iOS (iPhone/ iPad), Windows Phone). Der Vorteil der Umsetzung als Mobile App ist das diese für die kleineren Bildschirme optimiert ist und diese auf die Funktionen der Smartphones oder Tablets, wie zum Beispiel GPS, Foto und weitere zugreifen kann.

Ps: Mobile Apps sind meistens eigene IT Projekte. Denn die Programmierung wird in separaten Programmiersprachen wie zum Beispiel Kotlin für Android und Objective-C für iOS erstellt. Dabei kann der Preis für eine App bereits teurer sein als für die Internetpräsenz. Bei kleineren Seiten sollte man daher auf die weiteren Optionen setzen. Oder Option A – Responsive.

C – Adaptive Webdesign

Adaptive Webdesign ist eine weitere Möglichkeit. Hierbei werden, meistens 3, verschiedene Versionen (beziehungsweise Seitenlayouts) für die unterschiedlichen Endgeräte erstellt. Meistens handelt es sich hierbei umd die Grössen für PC/ Laptop Screen, Tablet und Smartphone.

D – Mobile Version

Die vierte Möglichkeit, neben Responsive, Mobile App und Adaptive ist die Erstellung einer eigenen Mobilen Version. Ein Erkennungsprogramm schaut von welchem Endgerät (Mobile oder Desktop) die Webseite aufgerufen wurde und sendet danach entweder die Desktop oder die Mobile Version. Ein gutes Beispiel hierfür ist die Seite von „Zeit“ die die Version mobil.zeit.de ausliefert.

10 – Social Media Anbindung

Die Einbindung von Social Media Plugins (zum Beispiel Like Button von Facebook, oder Twitter), Social Media Kommentare (Facebook, Disqus etc.) oder Social Logins (Facebook, Twitter, Google Plus etc.) erhöhen die Visibilität als auch die Verbreitung der Informationen der Webseite.

Wird der Content der Seite als qualitativ hochwertig oder interessant eingeschätzt, dann werden die Informationen mit Freunden und Kollegen geteilt. Da die verschiedenen Social Media Betreiber an einer Anbindung ihrer Systeme interessiert sind, gibt es viele kostenfreie Schnittstellen, die man verwenden kann. Zudem sind diese relativ einfach in die eigene Internetpräsenz einzubauen.

11 – Newsletter Programm

Oftmals werden Kunden gebeten sich in ein Newsletter Programm einzutragen. Dies ist meistens eine Option beim Kauf der Ware oder bei der Registrierung. Hierbei werden wöchentlich Nachrichten über das Unternehmen, den Onlineshop oder generelle Informationen versendet.

Die Erstellung kann mit Drittsystemen einfach umgesetzt werden. Wysija oder Mailchimp sind bekannte Anbieter, die zum Beispiel auch eine einfache Einbindung in CMS Systeme ermöglichen.

12 – Videopräsentation

Eine Videopräsentation kann einen starken Eindruck hinterlassen. Die heutigen Nutzer des Internets sind sich gewöhnt audiovisuell Unterhalten zu werden. Nicht zuletzt sind Plattformen wie Youtube so beliebt. Es ist höchstwahrscheinlich der Fall, das sich der Besucher lieber ein Video über Sie anschaut, als das er sich einen langen Text durchliest.

Einfache Videos lassen sich mit Onlinetools erstellen. Hierbei werden Vorlagen verwendet. Diese kann man bereits für kleine Eurobeträge umsetzen.

Eine andere Variante ist es, eine professionelle Videoagentur zu beauftragen. Die Kosten hierfür starten ab 1’500 bis 25’000 Euro pro Video.

13 – Einbindung eines Blogs

Ein Blog kann vielseitig verwendet werden. Das Newsletter kann mit den Informationen aus dem Blog befüllt werden, Links des Blogs können in Foren verteilt und Social Media Seiten können mit Bloginformationen aktualisiert werden. Die Blogeinträge selbst werden nach einiger Zeit auch auf Google erscheinen (vorausgesetzt man hat die Texte und den Content suchmaschinenfreundlich gestaltet)

Einige CMS sind auf Blogs spezialisiert. Das bekannteste ist WordPress, hier gibt es viele Plugins mit denen man sehr schnell, ansprechende Blogs erstellen kann. Eine Einrichtung durch ein Internetunternehmen kostet ab 200 Euro für den Blog.

14 – Kontaktformulare zur Leadgenerierung

Viele Seiten im Internet nutzen Kontaktformulare auf der Startseite oder auf den Folgeseiten um Kundendaten zu generieren (Fachjargon: Leadgenerierung). Auch hier kann man auf eine einfache Umsetzung mit Hilfe von Kontaktformular-Plugins setzen, die frei erhältlich sind. Für die Startseite und die Banner eignen sich jedoch oftmals Spezialanfertigungen. Diese wirken ansprechender auf den Nutzer.

15 – Rechtliches bedenken

Die rechtliche Seite wird meistens wenig Beachtung geschenkt. Jedoch sollte man diesen Punkt nicht unterschätzen, denn das könnte hohe Folgekosten in Form von Abmahnungen mit sich ziehen.

Ein gutes Impressum, AGB und Datenschutzbestimmungen sollten dabei sein.

Ein weiterer wichtiger Punkt für die Adressengenerierung ist das sogenannte Opt In. Bei der Zustimmung des Erhalts von Telefonaten oder Emails durch den Nutzer, muss dieser die Wahl haben dies mit seiner eigenen Einwilligung zu tun. Dafür kann man zum Beispiel ein kleines Programm einrichten welches dem Nutzer eine Email mit Bestätigungslink sendet. Auch zu beachten ist, das die Aktionen die zur Zustimmung benötigt werden, nachweisbar sind. Das heisst das die IP Adresse des Nutzer und die weiteren Daten gespeichert werden müssen. Nur dann ist ein Nachweis, der auch rechtlich Bestand hat, möglich.

Falls weitere Daten, zum Beispiel über Google Analytics, gesammelt werden gelten weitere spezielle Regelungen. Um sich hier auf sicherem Boden zu bewegen lohnt es sich einen, auf Internetrecht spezalisierten, Anwalt zu engagieren.

16 – Anbindung Drittsysteme

Die Anbindung von Onlineshops, CRM Systemen (Kundenverwaltung) und Warenwirtschaftssysteme kann unter anderem ein grosser Aufwendungsblock werden. In einigen Fällen wird die Einbindung von Schnittstellen notwendig. Diese können von Drittanbietern bereitgestellt, oder selbst programmiert werden.

Anbindung Drittsysteme: 5’000 bis 80’000 Euro

17 – Seitenanzahl

Die Seitenanzahl kann einen Einfluss auf den Aufwand haben, je nach dem ob die Seiten individuell oder einheitlich gestaltet werden sollen.

IV – Spezial Themen:

1 – Conversion Rate Optimierung

Eine Internetpräsenz wird oftmals dafür gebaut um neue Kunden zu gewinnen oder die Besucher der Seite zu einer bestimmten Aktion zu bewegen. In den letzten Jahren hat man erkannt, das die Platzierung der Buttons, die Farbgestaltung, Garantien, Siegel und weitere Bestandteile der Seite einen starken Einfluss auf die Konversionsrate (Besucher zu der Anzahl der Personen die auch die gewünschte Aktion unternimmt) hat.

Einfache Konversionsoptimierungen kann man selbst vornehmen.

Handelt es sich jedoch um grosse Webseiten mit hohen Besucherzahlen, dann lohnt sich die Einschaltung eines Unternehmens das sich auf die Conversion Rate Optimierung (CRO) spezialisiert hat.

2 – Landing Pages

Sogenannte Landing Pages haben sich in den letzten Jahren etabliert um die Konversionsrate zu erhöhen.

Schaltet man zum Beispiel eine Google AdWords Kampagne (Google Werbung, Hier mehr zum Thema Landing Pages), ein Teilbereich im SEA, wurden über lange Zeit die Startseite der Webpräsenz, im Link, angegeben. Auch hier hat man erkannt das dies wenige Interessenten gewinnt. Mehr Sinn macht die Erstellung von für den Linkbesucher speziell angefertigte Landing Pages (sozusagen Miniwebseiten) die direkt auf die Bedürfnisse des Kunden eingehen.

Beispiel: Ein Kunde sucht mit den Wörtern „Autohaus in München“ auf Google. Er bekommt einen Werbelink angezeigt. Nach dem Klick auf den Link kommt der Besucher, nicht auf die Startseite des Autohauses, sondern eine Landing Page die auf die Bedürfnisse des Besuchers eingeht. In diesem Fall wird es das Bedürfnis sein sich über einen Autokauf einfach zu informieren und gegebenenfalls einen Termin mit dem Autohaus zu vereinbaren. Karl Kratz, der Guru der Landing Pages, hat darüber einen guten Artikel verfasst. Hier gehts zum Artikel von Karl Kratz.

V – Spezialeffekte und Trends beim Websitebau

In den letzten Jahren haben sich einige Trends im Webdesign hervorgetan. Diese sind unter anderem Parallax Effekte, Megamenüs, Webpages mit nur einer Seite. Diese sind im Folgenden beschrieben.

1 – Parallax Scrolling

Bei dem Parallax Scrolling bewegen sich die Hintergrundbilder langsamer als die Bilder im Vordergrund. Diese Technik sorgt für einen interessanten Effekt. Beispiele für Parallax Scrolling werden in diesem Artikel beschrieben.

2 – Megamenü

Anstatt kleine Menüs anzuzeigen, werden bei dem Überfliegen des Menüs mit dem Mauszeiger grosse Menüs mit vielen Informationen angezeigt. Megamenüs helfen dem Seitenbesucher bei der Orientierung auf der Webpräsenz.

3 – Ein-Seitige Webseiten

Bei diesem neuen Trend werden alle Information auf einer einzigen Seite dargestellt. Man kommt zu den verschiedenen Bereichen, durch scrollen mit der Maus oder über den Klick auf die Navigation. Ein grosser Nachteil dieses Trends ist die Suchmaschinenoptimierung, da man jeweils nur eine Seite für die Suchmaschinen optimieren kann.

VI – Weitere periphere Bereiche die Folgekosten verursachen:

1 – Testen der Lösung

Nach dem Aufbau der Seite durch die Webfirma muss die Lösung getestet werden. Zum Beispiel die Performance bei vielen Zugriffen, die Kontaktformulare und Weitere. Viele Tests können jedoch auch vom Abnehmer übernommen werden, wenn das gewünscht ist.

Testing: 500 Euro bis 15’000 Euro

2 – Hosting

Die Präsenz im Internet muss auf einem Server gehostet werden. Bei kleineren Homepages kann das wenige Euro betragen. Bei grösseren Unterfangen werden mehrere Hundert Euro dafür fällig.

3 – Wartung

Da sich das Internet ständig weiterentwickelt, wird es auch notwendig die Webseite von Zeit zu Zeit upzudaten und zu Warten. Internetagenturen bieten hier Wartungsverträge auf Jahresbasis oder Ausbesserungen auf Stundenbasis. Ein Wartungsvertrag auf Jahresbasis kann sinnvoll sein, da man hier einen genauen Kostenüberblick hat. Bei Verträgen auf Stundenbasis können die Kosten in die Höhe schiessen, da sich über das Jahr hinweg sehr viele kleine Wartungsthemen zu grossen Problemen weiterentwickeln.

VII – Pflichtenheft/ Lastenheft oder Wie Sie Ihre Anforderungen an eine Webpräzens, einer Internetagentur, weitergeben können

Es gibt viele Anfragen in denen die Anforderungen nicht klar sind. Bei einer Einschätzung des Angebotes wird daher, durch die Internetagentur, immer ein Puffer nach oben hin eingebaut. Denn oftmals ist es schwer, im nachhinein, das Budget für die Erstellung der Seite zu erhöhen.

Die Einreichung eines Pflichtenheftes/ Lastenheftes, vor der Erstellung des Angebotes, kann die Kosten für die Webseite verringern. Denn hierdurch wird es der Internetagentur einfacher eine passende Offerte zu erstellen, die zum Beispiel keinen grossen Spielraum beim Preis beinhaltet.

VIII – Projekte ins Ausland vergeben

Ein Weg den Aufwand gering zu halten, ist es das Projekt ins Ausland zu vergeben. Länder wie Indien oder Russland haben niedrigere Stundensätze bei gleicher Qualität. Acht geben sollte man jedoch bei der Auswahl des IT Unternehmens. Die Qualität der angebotenen Dienstleistungen unterscheiden sich, besonders im Ausland, erheblich. Empfehlenswert sind Unternehmen die bereits Erfahrung im Umgang mit Personen oder Unternehmen aus dem deutschsprachigen Raum haben.

Durchschnittlicher Stundensatz Agentur in Deutschland 100 bis 150 Euro.
Durchschnittlicher Stundensatz professionelle Agentur in Indien 25 bis 70 Euro.

Kostentabelle für eine Webseite

Interessanter Link zum Thema Website-Kosten:
>> Webkosten-Kalkulator <<

Fazit

Die Frage was eine Webseite kostet wir in diesem Artikel nicht zu Hundert Prozent beantwortet, da diese nach Anforderungen variieren. Der Text gibt jedoch einen Einblick über die verschiedenen Themen, die bei der Erstellung einer Webpräsenz zu beachten sind.

Der Autor: Sascha Thattil unterstützt Unternehmer und Unternehmen bei der Erstellung von Entwicklerteams in Indien. Er arbeitet bei YUHIRO, einem deutsch-indischen Unternehmen das sich auf die Implementierung von Onlineshops, Webseiten, Mobile Apps und Software spezialisiert hat.

Das Konzept der Landing Page hat eine grosse Verbreitung gefunden. Auch weil die sogenannten Conversion Rate bei solchen Webseiten höher ist. Hier Vergleich der beiden Optionen.

Einführung

Zum Start des Internets ging es einfach darum eine Online Präsenz zu haben.

Das Konzept der Homepage klang damals und auch heute noch sehr interessant. Man hat eine Website auf der alle Informationen über zum Beispiel das Unternehmer aufgelistet ist.

Die Referenzen, der Newsletter (mit Newsletteranmeldung), das Kontaktformular, Neuigkeiten, ein Blog und viele weitere Komponenten hat solch eine Website.

Die Problematik hierbei ist jedoch, dass solch eine Seite im Internet viele Ziele verfolgt. Besser ist es, eine gezielte Seite zu haben, die sich nur um ein Ziel dreht. Damit war die Idee zu Landing Pages (kurz LP) geboren.

Hier die Unterschiede:

Viele Ziele vs. Ein Ziel

Wenn ein Besucher auf die Website (kurz WS) kommt, dann kann er oder sie aus unterschiedlichsten Optionen wählen. Man kann auf Links klicken und kommt auf neue Seiten, oder man kann auf das Menü klicken, und man kommt auf Unterseiten.

Bei einer LP sieht das bereits anders aus. Es gibt nur – ein Ziel – dies kann eines der oben genannten sein. Zum Beispiel das “Ausfüllen eines Kontaktformulars”. Es kann zwar sein, dass auf der Landing Page ein Link oder ein Menü ist, diese führen jedoch alle auf das Kontaktformular.

Es gibt auf der LP auch keine Möglichkeit auf eine andere Seite zu gelangen. Sogar der Standardlink über das Logo wird abgeschaltet, so dass der Besucher tatsächlich nur zwei Optionen hat. Entweder das Ausfüllen des Kontaktformulars oder das Schliessen des Browserfensters.

Das zeigt auch schon die Macht einer Landing Page.

Conversion Rate Optimierung wird vereinfacht/ A/B Testing

Bei einer WS kann ein Besucher alles mögliche für Dinge machen. Es ist relativ schwer etwas zu optimieren. Denn man weiss nicht, welche Änderung, welche Erhöhung der Conversion Rate ( Anzahl Besucher versus der Zahl an gewünschten Kundenhandlungen) gebracht hat.

Bei einer LP ist das anders. Hier könnte man für einen Teil des Traffic (Besucherstrom via dem Internet) auf eine bestimmte Version der LP leiten (auch A/B Test geleitet) und schauen welchen Effekt das auf das bestimmte Ziel hat.

Beispielsweise könnte Version A gleich bleiben und Version B einen prominenten roten Button haben.

Man leitet 50 Prozent der Besucher auf Version A und 50 Prozent auf Version B. Nun sieht man, dass über einen Zeitraum von 2 Monaten, 10 Kontaktformulare auf Version A ausgefüllt wurden und 20 Kontaktformulare auf Version B.

Das spricht klar dafür, dass Version B besser ist, und man übernimmt den roten Button in die Hauptversion. So kann man Schritt für Schritt testen und die Conversion Rate erhöhen.

Eine lange Seite vs. Mehrere Seiten

Auch das ist eine Besonderheit einer LP. Die Landing Page ist meistens eine lange Internetseite auf der man hoch und runter scrollen kann. Anders als bei einer Webseite, auf der man auf viele Hauptseiten und Unterseiten springen kann.

Gezielte Ansprache vs. Allgemeine Ansprache

Eine WS hat meistens einen relativ allgemeinen Ton. Man spricht alle möglichen Kundengruppen aus seiner Zielgruppe an. Denn man weiss nicht, wer die Webpage besucht.

Bei einer LP ist das anders. Hier könnte es, um ein einfaches Beispiel zu nehmen, eine Seite geben, die nur Frauen anspricht und eine die nur Männer anspricht. Und eine weitere die Kinder anspricht.

Die LP für die Erwachsenen hat eher formelle Farben, während die Seite für die Kinder eher bunt und spielerisch aufgebaut ist.

Auch das führt zu einer höheren Conversion Rate. Denn die Besucher fühlen sich durch die direkte Ansprache angesprochen. Und führen schon eher die gewünschte Handlung, wie einen Anruf beim Unternehmen, durch.

Ein Produkt vs. Mehrere Produkte

Eine Website führt meistens alle Produkte eines Unternehmens auf. Bei einem Onlineshop könnten das zum Beispiel unterschiedlichste Haushaltsprodukte sein.

Eine LP führt dagegen oftmals nur ein Produkt oder eine Produktgruppe. Zum Beispiel Kochtöpfe.

In diesem Beispiel könnte die LP auf die Vorteile dieser speziellen Kochtöpfe eingehen und andere Vertrauensstiftende Zeichen geben.

Eine Landingpage setzt hier oftmals auf:

1. Kundenreviews: Kunden werden aufgezeigt, welche positive Erfahrungen mit dem Produkt gemacht haben. Meistens werden auch fünf Sterne benutzt, um die Qualität aufzeigen.
2. Siegel: In manchen Fällen handelt es sich um offizielle Siegel von Verbraucherorganisationen. In vielen Fällen sind es jedoch selbst erstellte Siegel, welche die hohe Qualität aufzeigen sollen.
3. FAQ: Eine LP hat zum Beispiel auch einen Abschnitt, in welchem die wichtigsten Fragen beantwortet werden (Häufig gestellte Fragen).
4. Hero Bild: Dieses Bild ist meistens ganz oben Links oder Rechts (Above the Fold) und zeigt daneben die drei wichtigsten Vorteile für den Kunden.
5. Bekannt aus: Hier werden Publikationen aufgezeigt, wie Magazine oder Online Zeitschriften, welche bereits über das Produkt positiv berichtet haben. Dabei werden die Logos dieser Magazine oder Firmen genutzt.

Tendenz hin zur LP als Website

Eine WS ist relativ aufwendig in der Verwaltung. Man muss sicherstellen, dass alle Seiten richtig funktionieren. Nicht selten muss man darauf achten, dass alle Seiten auch auf Tablets und Smartphones richtig dargestellt werden.

All das führt dazu, dass besonders kleine und mittelständische Unternehmen immer mehr auf Landing Pages als Websites setzen. Dabei sind alle wichtigen Informationen auf einer Seite gelistet. Es gibt eventuell noch eine weitere Seite, welche die Blogartikel führt.

Das reduziert den Aufwand für die Wartung der WS. Gleichzeitig kann man diese Seite ständig optimieren. Auch das A/B Testing für nur eine Seite wird einfacher fallen.

Zudem ist es heutzutage möglich, mit Dingen wie Videotestimonials viel mehr Informationen auf nur einer Seite zu transportieren.

Was für Webseiten spricht

Einige Webseiten führen viele Produkte. Hier macht es keinen Sinn nur eine LP als Website zu haben.

Hier setzen Unternehmen zunehmend auf den Ansatz, einzelne Unterseiten/ Produktseiten in Form einer LP aufzusetzen. Dass heisst, mit Hero Bild, Referenzen oder Reviews pro Produkt, Qualitätssiegel und einem bestimmten Ziel – zum Beispiel den Klick auf den “Kaufen” Button.

Fazit

Das Konzept der Landing Page hat viele Vorteile:

• Gezieltere Ansprache
• Fokus auf eine Aktion des Kunden
• Bessere Performance Optimierung der Seiten mit A/B Tests
• Fokus auf bestimmte Produktgruppen

Im Bereich des klassischen Brandings kann eine Website jedoch immer noch eine Option sein. Oder wie erwähnt bei WS mit vielen Unterseiten und vielen Produkten.

Was sind Ihre Erfahrungen?

Interessante Links:
Homepage und Landingpage Unterschied erklärt auf morefire

Ein Vergleich auf dem Marketingblatt Blog

Bilder: Canva

Der Autor: Sascha Thattil arbeitet bei YUHIRO und hilft Unternehmern und Unternehmen beim einfachen Aufbau von Programmier-Teams in Indien. YUHIRO ist ein deutsch-indisches Unternehmen welches IT Firmen, Agenturen und IT Abteilungen Softwareentwickler bereitstellt.

Es gibt Webseiten unterschiedlichster Grösse. Von der kleinen Homepage bis zur Webplattform eines Konzerns.

Alle diese Onlinepräsenzen profitieren von einer Wartung. Im Beitrag mehr dazu.

Einführung

Am Anfang steht die Idee eine Onlinepräsenz zu erschaffen. In den meisten Fällen fallen die meisten Punkte an:

• Konzeption: Es wird besprochen was die Ziele der Website sind und vieles mehr.
• Wireframing/ Design-Phase: Der Designer macht sich ans Werk und arbeitet mit Tools wie Photoshop und Sketch und Wireframes und die ersten Designs zu erstellen.
• Umsetzung in die Programmiersprache oder das CMS: In der Konzeptionsphase wird bereits besprochen, welchen Weg man geht. Eine Umsetzung mit HTML, CSS oder doch lieber mit PHP oder einem PHP Framework wie Laravel? Oftmals werden auch Content Management Systeme (CMS) wie WordPress oder TYPO3 genutzt. Das ist der Schritt, in dem das Design, in ein vom Webbrowser verständliches Format umgewandelt wird.
• Testing: In diesem Schritt wird die Internetpräsenz auf unterschiedlichen Endgeräten (Mobile, Tablet, Desktop) und unterschiedlichen Browsern (Chrome, Mozilla, etc.) getestet und geschaut ob die Darstellung auf allen Geräten passt.

Im letzten Schritt findet dann die Übergabe an den Kunden und die Live-Schaltung statt.

Die Homepage oder das Internetportal ist nun online.

Ist jetzt jedoch alles vorbei und der Kunde kann die Website für die nächsten Jahre einfach so nutzen? Antwort: Wer eine professionelle Onlinepräsenz betreibt, der sollte eine Wartung mit dem Webdesign-Dienstleister oder der Internetagentur vereinbaren.

Wie funktioniert das?

Bei kleineren WordPress Installationen ist es relativ einfach. Man muss lediglich die Plugins, Themes und WordPress Versionen erneuern. Das geht zum Teil mit wenigen Klicks. Aufwändig wird es nur, wenn grössere WordPress Versions-Updates kommen. Dann muss man ein Backup erstellen, bevor man das Upgrade durchführt.

Eine solche Website Wartung kann man sicherlich für eine Pauschale bekommen. Zum Beispiel jährlich 10 bis 20 Prozent des Budgets, welches man für die Website-Erstellung verwendet hat. Hat die Internetseite beispielsweise 2800 Euro gekostet, dann zahlt man für die jährliche Wartung zirka 280 bis 560 Euro. D.h. zirka 23 bis 46 Euro im Monat. Es lohnt sich. Denn der Webentwickler wird auch von Zeit zu Zeit ein Backup der kompletten Installation machen und dafür sorgen, dass die Internetseiten erreichbar bleiben.

Bei grösseren Implementierungen wird es dann schon etwas komplexer.

Ein Beispiel wäre eine elaborate TYPO3 Website. Hier ist es nicht immer einfach ein Upgrade durchzuführen. Zum Teil müssen Plugins neu entwickelt werden. Das Update kann mehrere Tage, Wochen und in manchen Fällen Monate dauern. Die Programmierarbeiten sind dementsprechend höher.

Eine Wartung wird hier von Fall zu Fall vereinbart. Eventuell wird eine simple Betreuung für kleines Geld umgesetzt. Wenn es jedoch um Versions-Änderungen geht, muss man sich die Web-Präsenz genau anschauen.

Ähnlich verhält es sich auch für Individualprogrammierungen basierend auf PHP. Zum Teil müssen solche Programme nach einigen Jahren komplett neu geschrieben werden. Hier ist es oftmals sogar so, dass es Festangestellte PHP oder Webentwickler gibt, die ständig Änderungen und Verbesserungen an der Anwendung vornehmen. Zum Beispiel die Entwicklung neuer Module. Die Website Wartung läuft hier parallel.

Auch dies lohnt sich. Besonders wenn es sich um Internetanwendungen mit einem hohen Umsatz handelt. Besonders Konzerne die mit Agenturen zusammenarbeiten gehen diesen Weg.

Geht es auch ohne?

In der Realität werden die meisten Webseiten nicht gewartet. Nach der Übergabe durch die Werbeagentur oder den Webdesigner gibt es keine separate Wartung. Das liegt auch an den Kosten, für welche es dann am Ende doch kein Budget gibt, da man nur für die Umsetzung geplant hat, nicht für die spätere Betreuung.

Für WordPress Content Management Systeme (CMS) bedeutet das, dass oftmals die Plugins, Themes und auch die CMS Versionen nicht aktualisiert werden. Irgendwann merkt man dann, dass man die Plugins nicht mehr richtig verwenden kann.

Erst zu diesem Zeitpunkt wendet sich der Homepage Betreiber an die Agentur, welche die Seite erstellt hat. Um dann festzustellen, dass dieser kein grosses Interesse hat, die Upgrades durchzuführen. Einfach weil der Aufwand so hoch ist und beim Kunden oftmals das Verständnis fehlt, warum es so teuer ist. In diesem Prozess wird dann oftmals nach Alternativen geschaut, um jemanden zu finden der diese Aufgaben übernimmt.

Falls die Updates über Jahre nicht vorgenommen wurden, ist der Aufwand dementsprechend höher. Besser wäre es gewesen von Anfang an einen Wartungsvertrag mit dem IT Dienstleister zu vereinbaren.

Auch bei komplexen Webportalen kann man ähnliches feststellen. Hier wird oftmals ein Freelancer engagiert, der die Betreuung übernimmt. Jedoch muss auch ein Freiberufler darauf achten, dass es sich für diesen finanziell lohnt. Besonders Wartung ist nicht immer interessant für diesen, da es sich nicht wirklich um innovative Arbeit handelt. Zudem muss dieser wegen kleinen Projekten mit dem Kunden verhandelt. Was nicht immer eine spannende Sache ist.

So wird auch bei grossen Portalen, welche zum Teil gute Umsätze einbringen, auf eine professionelle Betreuung verzichtet. Nur wenn dann nach einigen Jahren alles anfängt langsamer zu laufen und Bugs zum Vorschein treten (zum Beispiel weil der Server eine neue PHP Version hat, aber die Programmierung auf einer alten PHP Version umgesetzt wurde). Ab dann wird dann auch die Geschäftsführung hellhörig und macht sich auf die Suche nach einem Partner der die langfristige Wartung übernimmt.

Vorteile einer professionellen Betreuung

Die Vorteile einer langfristigen Betreuung der jeweiligen Homepage ode Webpräsenz sind vielfältig. Zum einen stellt man sicher, dass die Anwendung immer verfügbar ist und zum anderen spart man sich einen enormen Aufwand, welcher dann später auftritt.

Eine Webagentur hat zudem oftmals einige Werkzeuge im Einsatz. Beispiele sind ein Online-Monitor, um zu prüfen, wie die Uptime ist (Uptime = wieviel Prozent der Zeit ist die Website Online und wann nicht). Auch andere Tools kommen zum Einsatz.

Zum anderen kann eine Internetagentur auch dafür sorgen ein Troubleshooting vorzunehmen, wenn zum Beispiel ein Upgrade mal nicht funktioniert, weil ein Plugin nicht kompatibel ist oder ähnliches.

Fazit

Eine Website Wartung durch eine Agentur oder einen Freelancer kann sich durchaus lohnen. Viele Profis raten zudem ab, dass der Kunde selbst Hand anlegt und die Updates und ähnliche Massnahmen selber durchführt. Das liegt auch daran, dass wenn es mal zu einer Herausforderung kommt, der Kunde meistens dann wieder auf den Profi zurückgreifen muss. Und ob die Internetagentur, etc. zu genau diesem Zeitpunkt Kapazitäten frei hat ist nicht unbedingt geklärt.

Was sind Ihre Erfahrungen?
Pflegeverträge für eine Homepage in der Übersicht
Wartung von NETALB

Bilder: Canva

Der Autor: Sascha Thattil arbeitet bei YUHIRO und hilft Unternehmern und Unternehmen beim einfachen Aufbau von Programmier-Teams in Indien. YUHIRO ist ein deutsch-indisches Unternehmen welches IT Firmen, Agenturen und IT Abteilungen Softwareentwickler bereitstellt.

Fast alle sind heutzutage mit dem Smartphone im Internet unterwegs. Gleichzeitig bevorzugen viele jedoch den Desktop-Browser, um Bestellungen zu tätigen, etc. Da es dort etwas bequemer ist. All das muss man im Webdesign berücksichtigen.

Im Beitrag mehr dazu wie Responsive für Smartphones, andere mobile Endgeräte und Desktop Browser funktioniert.

Einführung

Am Anfang war das Internet.

Klassischerweise nutze man einen Desktop Rechner und einen Browser wie den Internet Explorer, um das Internet zu erreichen.

Damals war die Arbeit für jemanden der ein Webdesign umsetzt, relativ einfach. Man musste nur für einen sogenannten “Viewport” ein Design erstellen. Der Viewport ist vereinfacht gesagt, dass was der Nutzer im Browser sieht – das Sichtfenster. Es gab auch nicht viele unterschiedliche Monitorgrössen. Der Webdesigner musste also im Idealfall nur ein Design erstellen, um alle Monitorgrössen, Webbrowser und Desktopsysteme abzudecken.

Mit dem Erscheinen des iPhones im Jahr 2007 sollte sich jedoch alles ändern.

Seit dem Release dieser Innovation, sind viele neue mobile Endgeräte erschienen. Auch die Medium Versionen namens Tablets und Phablets wurden kreiert.

Die Entstehung von Android hat zu noch mehr Diversität geführt. Anders als das iPhone und iOS, wird Android von unterschiedlichsten Firmen genutzt, um deren mobile Endgeräte zu bespielen.

Zudem haben viele auch ihre eigenen Browsersysteme herausgebracht. Neben dem Internet Explorer gibt es jetzt starke Browser wie Google Chrome, Mozilla Firefox und einige mehr.

Eine unendlich grosse Zahl an Bildschirmgrössen, Betriebssystemen und Browsern

Die Zahl der Bildschirmgrössen ist fast unendlich. Da fast jeder seine eigenen Dimensionen für seine Smartphones und Tablets hat. Keines gleicht dem anderen zu 100 Prozent.

Zudem hat nicht jeder Internetnutzer die neueste Version des Browsers installiert. Manche haben alte Versionen.

All das hat den Bereich Webdesign verändert. Und eine neue Kategorie in der Webentwicklung war geboren, das sogenannte Responsive Webdesign.

Wie kann man so eine Internetseite erstellen?

Der erste Schritt im Design Prozess ist es, mehrere Versionen der Website in Photoshop oder Sketch zu erstellen (beide Werkzeuge werden von Designern genutzt, um die Bildschirme darzustellen). In den meisten Fällen sind es drei Versionen. Eine für Smartphones (kleine Bildschirme), Tablets (mittlere Screens) und Monitore (grosses Design). Oftmals kommt noch eine vierte Variante, Laptops, dazu.

Es werden jedoch nicht drei unterschiedliche Versionen der Website durch den Webentwickler erstellt. Sondern dieser geht wie folgt vor:

Zitat von Siteways, Richard Albrecht:

“Idealerweise hat man den gleichen Inhalt und Aufbau (Content und HTML(5)) und unterscheidet die Darstellung nur anhand unterschiedlicher Formatierungsbefehle (CSS(3)).

Dazu kann man mittels CSS3 Media Queries (was so viel heißt wie „Abfragen der Medien welche die Website anzeigen“) Formatierungsbefehle auf bestimmten Bildschirmgrößen einschränken.”

Mit unterschiedlichen Programmierbefehlen, kann man die Website zudem dazu anweisen, einige Bereiche im kleinsten Responsive Webdesign nicht anzuzeigen. Man könnte zum Beispiel einen grossen Slider, welcher im Desktop-Browser gut aussieht, jedoch im Smartphone nicht zur Geltung kommt, ausblenden.

Im Tablet würden einige Bilder zudem untereinander, anstatt nebeneinander angezeigt.

Responsive vereinfacht damit den kompletten Webdesign Prozess. Anstatt alles dreifach zu entwickeln, wird es nur einmal programmiert, jedoch mit einigen Befehlen in CSS3, um die Darstellung unterschiedlich anzuzeigen.

Besonderheiten dieses Ansatzes

Das Responsive Design gilt als moderne Methode, um Webseiten auf vielen Webvarianten anzeigen zu können. Ohne alles doppelt und dreifach zu entwickeln.

Dieser Ansatz hat jedoch auch seine Einschränkungen. Es ist zum Beispiel nicht zu 100 Prozent für mobile Endgeräte optimiert. Denn in Smartphones oder Tablets, gibt es Funktionalitäten, wie Touch oder die vertikale und horizontale Ansicht (wenn man den Bildschirm dreht, zum Beispiel). All das kann ein solches Webdesign nicht optimal abdecken.

Nicht ohne Grund stellen grosse Internetportale fast immer eine Android und eine iOS App zur Verfügung, wo diese Funktionalitäten optimal umgesetzt werden.

Eine mobile, sogenannte Native, App lohnt sich jedoch nur bei sehr grossen Projekten. Bereits bei Webseiten die jeweils “nur” für die Aussendarstellung einer grossen Marke genutzt werden, ist der Aufwand für mehrere Mobile Apps zu hoch. Denn um eine Native App zum Beispiel für Android zu entwickeln, benötigt es den Gleichen oder mehr Aufwand, als die Website-Variante zu erstellen.

Zudem wird auch die Bereitschaft der Nutzer sehr gering sein, die Mobile App einer Marke herunterzuladen.

Der Responsive Ansatz ist hier um ein vielfaches besser. Nur muss man davon ausgehen, dass die Mobilen Ansichten nicht zu 100 Prozent optimal sein werden, wie das bei Apps der Fall ist.

Mobile App versus Webdesign

Hier noch einige Punkte die man beachten sollte, wenn man eine App mit einem Webdesign, welches man über einen Browser aufruft, vergleicht.

• App greift auf CPU/ Rechner des Smartphones zu: Damit ist es um einiges performanter als eine Website über den Internetbrowser, welches dadurch keinen direkten Zugang zur CPU hat.
• Native Apps sind auf Touch optimiert: Auch die Bedienung durch berühren ist in Nativen Apps direkt mit dem Betriebssystem wie iOS oder Android abgestimmt. HTML5 (welches man im Webdesign nutzt) ist zwar schon sehr modern, kann aber nicht alle Funktionalitäten eines Smartphone Gerätes abrufen.

Adaptive?

Neben dem Begriff Responsive hat sich auch Adaptive etabliert.

Bei Responsive ist alles sehr flüssig und es gibt keinen starken “Brüche” von einer Variante zur nächsten (zum Beispiel von Desktop zu Tablets).

Bei dem Adaptive Webdesign ist das anders. Hier werden bis zu sechs Versionen der Website designt. Die Programmierung erkennt, welche Grösse das Endgerät hat und spielt die passendste Version aus. Die üblichsten Breiten in Pixel sind dabei: 320, 480, 760, 960, 1200, und 1600 Pixel.

Abbildung: Laut Designers Insights sind die besten Grössen: Desktop – 1200 Pixel (Breite), Tablet – 768 Pixel (Breite), Smartphone – 320 Pixel (Breite). Die Abmessungen, wenn man das Tablet oder das Smartphone horizontal hält, findet man in der Abbildung.

Der Aufwand ist hier wiederum höher, da auch hier separate Designs für jedes dieser Grössen erstellt werden.

Der Vorteil ist hier, dass die Darstellung besser sein wird, als bei dem zuerst genannten Ansatz.

Jedoch, welcher Entscheider in Webprojekten möchte seinen Vorgesetzten um die Freigabe von 6 oder mehr Designs fragen?

Die Entscheidung fällt dann am Ende doch auf das einfachere Responsive Webdesign.

Fazit

Der Responsive Ansatz wird in den meisten Webseiten-Projekten, ob klein oder mittelgross, verwendet. Er gibt den optimalsten Output für die vielen Browser, Bildschirme und Systeme.

Denn mit der Zeit wird es nur mehr Bildschirmgrössen, Betriebssystem und ähnliche geben, und nicht weniger. Damit ist man auch für die Zukunft gerüstet.

Was sind Ihre Erfahrungen?

Interessante Links:
Responsive auf Wikipedia beschrieben
Mehr Informationen zu Responsive Design

Bilder: Canva, designersinsights.com

Der Autor: Sascha Thattil arbeitet bei YUHIRO und hilft Unternehmern und Unternehmen beim einfachen Aufbau von Programmier-Teams in Indien. YUHIRO ist ein deutsch-indisches Unternehmen welches IT Firmen, Agenturen und IT Abteilungen Softwareentwickler bereitstellt.