Artikelbild site123.me
Webtechniken

Prototypen für Webseiten ohne großen Zeitaufwand bauen

Es gibt Projekte, die brauchen (erstmal) keinen großen Aufwand. Wenn eine bestimmte Anzahl an Nutzern mit AdWords auf eine Landingpage geworfen werden um zu schauen, wie sie dort reagieren, genügt manchmal auch schon ein simpler Webseitenbaukasten.




Ein Beispiel für so einen Prototyp ist zum Beispiel eine Landingpage mit kurzem Video, einem beschreibenden Text und dem Ziel den Nutzer auf irgendein Element klicken zu lassen bzw. überhaupt eine Aktion durchzuführen.
Schön wäre es natürlich, wenn hier keine Kosten anfallen würden. Und in der Tat gibt es auch von den bekannten Anbietern eine kostenlose, aber eben auch eingeschränkte Version. Neben den üblichen Verdächtigen wie Wix oder Jimdo gibt es auch SITE123 Ausprobieren werde ich hier mal den eher unbekannteren der Drei, SITE123.

Websitebaukästen und echte Domains

In den kostenlosen Varianten der Webseitenbaukästen ist keine Domain enthalten. Erreichbar wird die Seite über eine Subdomain, die dann aber frei wählbar ist. Daraus wird dann testseite.site123.me.
Schön ist das nicht, für einen Test aber zumutbar. Ist schon eine Domain bei einem anderen Anbieter verfügbar, lässt sich diese auch entsprechend umleiten. Der Optik wegen.

Einrichten einer neuen Webseite

Das Benutzerkonto bei SITE123 ist schnell angelegt und direkt danach wird auch schon die Frage gestellt, welche Art von Webseite erstellt werden soll. 15 Arten stehen zur Auswahl. Befindet sich nichts passendes darunter, bietet sich die Option „Andere“ an.

Seitenvorlagen

Im folgenden Bildschirm möchte das System einige grundlegende Informationen zu der neuen Webseite haben.

Informationen zur Seite bei site123.meNach diesem Schritt präsentiert sich die neue Seite auch schon in fertigem Layout und gefüllt mit Beispielinhalten.

Vorgerfretigte SeiteDie Feinarbeiten an der Webseite

Bevor es an die eigentlichen Inhalte geht, lohnt ein Blick auf die Werkzeugleiste am linken Bildschirmrand. Da hier ein OnePager entstehen soll, lässt sich diese Funktion unter „Einstellungen“ aktivieren. Dadurch werden die einzelnen angelegten Unterseiten eben nicht als Unterseiten, sondern untereinander auf der Seite angelegt. Ideal also für die kleine Landingpage.
Unter „Bedingungen und Datenschutz“ lassen sich ebenfalls diverse Optionen aktivieren, darunter auch ein einblendbarer Cookie-Hinweis. Unter „SEO“ lässt sich ein individueller Title-Tag, eine Meta-Description und sogar Meta-Keywords vergeben (weitgehend unsinnig heutzutage).

Was unter „Sprache und Land“ eingestellt werden kann, ergibt sich aus dem Namen. Allerdings lässt sich hier auch ein Datums- und Zeitformat sowie die Zeitzone einstellen.

Sprache und Land einstellen

Unter „Plugins“ bietet SITE123 verschiedene Erweiterungen für die Webseite an. In der kostenlosen Variante gibt es lediglich das Plugin für Google Analytics, erst in der kostenpflichtigen Version lassen sich Remarketing-Tags von AdWords und Facebook, Webmastertools von Google oder Bing oder sogar Live-Chat-Tools in die Seite integrieren.

Plugins für die WebseiteSeiten bzw. Abschnitte einrichten

Wie oben bereits erwähnt, ist das Ziel einen OnePager zu erstellen. Die Navigation der Webseite bleibt dadurch erhalten, verlinkt nur eben nicht auf eine andere Seite sondern auf den jeweiligen Abschnitt unserer Landingpage.
Für die Bearbeitung dieser Abschnitte/Unterseiten ist das Menü „Seiten“ zuständig. Dort lassen sich Elemente löschen oder hinzufügen. Wenn die Reihenfolge der Anordnung nicht so gewünscht ist, lassen sich die einzelnen Elemente per Drag&Drop verschieben.

Seiten im ÜberblickJeder Abschnitt bei unserem OnePager bzw. Unterseite bei einem herkömmlichen Aufbau lässt sich mit anderen Funktionalitäten ausrüsten. Über den blauen Button „Bearbeiten“ lassen sich Text und Bilder eingeben, der „Pinsel-Button“ stellt verschiedene Layouts zur Auswahl. Beim typischen Einstellungszahnrädchen lässt sich in einem kleinen Pop-Up-Menü bestimmen, ob die Seite im Menü oder im Footer angezeigt werden soll. Ein weiterer Klick im Pop-Up auf „Seiteneinstellungen“ bietet die Möglichkeit eine Unter-Überschrift und eine Metabeschreibung einzugeben.

In der kostenpflichtigen Variante lassen sich zur besseren Strukturierung auch noch Kategorien erstellen.

Design – Farben, Formen, Schriften

Kommen wir zur Optik der Seite. Bisher haben wir uns im vom Start weg vorgegebenen Layout lediglich um die Schablonen für die Inhalte gekümmert, jetzt geht es darum hier ein wenig Farbe reinzubringen.
Zuständig dafür ist natürlich die Funktion „Design“. Hier auf jeden Menupünkt einzeln einzugehen, würde den Rahmen des Artikels sprengen. Einstellen lassen sich verschiedene Grundlayouts der Seite, Farbkombinationen für die Seite, das Design der Schaltflächen, Schriftarten, Links zu sozialen Netzwerken und sogar ein Newsletter-Abonnieren-Feld im Footer. Leider ist dieser auch nur dort platzierbar. Für weitere Formulare auf der Seite bietet SITE123 nur die Einbindung von Formularen des Dienstes 123Contactform an. Da dürfte die Namensähnlichkeit kein Zufall sein 😉

Design Vielfalt bei site123.me

Die Anmeldung dort und das Anlegen eines einfachen Formulares für das Dalassen der E-Mail-Adresse ist schnell erstellt, allerdings wollte es mir nicht recht gelingen, dieses auch in die Seite zu integrieren.
Auch sonst ist die Integration einzelner Call-To-Actions wie einen Button nicht unbedingt einfach. Ein Umweg über einen im Grafikprogramm selbst erstellten Button als Grafik und diese dann entsprechend zu verlinken ist auch nicht vorgesehen.

Fast vergessen: Für die Startseite lassen sich gesonderte Designeinstellungen bezüglich des Hintergrundes vornehmen. Hier stehen sogar Hintergrundvideos zur Auswahl, auch eigene YouTube-Videos lassen sich einbinden.

Fazit:

Bereits in der kostenlosen Version bieten sich hier doch recht viele Gestaltungsmöglichkeiten, die auch vom Design her wirklich einen guten Eindruck machen. Für einen ersten Prototypen und kleine Portfolio-Seiten ist SITE123 also gut zu gebrauchen. Unflexibel wird es beim Einbinden der nötigen Call-To-Actions, zumindest Textlinks lassen sich problemlos in den Inhalt einpflegen.




0 Kommentare zu “Prototypen für Webseiten ohne großen Zeitaufwand bauen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.