Simbla 2016: Responsive Websites für jedermann

Dank zahlreicher Baukästen und Website-Builder ist es möglich, sich im Handumdrehen – und ohne Kenntnisse in HTML, CSS und JavaScript – eine eigene Website zusammenzustellen. Oftmals mangelt es diesen Websites an gestalterischer, aber auch technischer Qualität. Simbla ist ein Website-Builder, der sich sowohl an Profis richtet, die selbst per HTML auszeichnen können, als auch an Laien, die einfach per Drag-and-Drop eine Website bauen möchten. Die mit Simbla erstellten Websites sind darüber hinaus vollständig responsiv und somit für die Darstellung auf Mobilgeräten wie Tablets und Smartphones geeignet.

Mit Template oder leerer Seite starten

Hat man sich kostenlos beim Simbla Website-Builder angemeldet, kann direkt die erste Website angelegt werden. Wer nicht selbst gestalten möchte, kann eines der vielen kostenlosen Templates verwenden. Die Templates sind mit exemplarischen Inhalten ausgestattet und haben eine Live-Demo, so dass man vorab einen guten Eindruck von Aussehen und Funktionalität bekommt.

Alle Templates sind kategorisiert, so dass du schnell das richtige für dein Projekt auswählen kannst. So gibt es Branchenkategorien unter anderem für Gastronomie, Technologie und Immobilien. Damit findest du im Vorfeld bereits ein für deine Branche passendes Template und passt dieses später einfach deinen eigenen Wünschen an.

Galerie mit Templates

Wer lieber ohne Templates arbeitet, startet mit einer komplett leeren Website und baut diese ohne Vorlage selbst auf.

Masterseiten definieren und Seiten anlegen

Egal, ob man mit Template oder einer leeren Seite beginnt: Alle Inhalte der Website sind modular konzipiert. Es gibt Header- und Footer-Elemente, in denen beispielsweise Logo und Navigation sowie Links zu sozialen Netzwerken untergebracht sind. Alle Elemente sind bereits gestaltet. Farben und Schriften sind also bereits in einem Theme hinterlegt. Über eine Palette wählst du ganz einfach aus verschiedenen Themes eines aus. Aber du kannst das Aussehen aller Elemente natürlich nach Belieben ganz individuell anpassen. Farben, Schriften, Größen und Positionen definierst du weitestgehend frei.

Jedes auf einer Seite platzierte Element besitzt mit „Edit“ und „Design“ zwei Menüpunkte, um Funktionalität beziehungsweise Aussehen anzupassen. Beim Header besteht so die Möglichkeit festzulegen, ob dieses beim Scrollen fixiert sein, oder per Fade- beziehungsweise Slide-In eingeblendet werden soll.

Je nach Element stehen weitere Menüpunkte zur Verfügung. Bei einer Navigation bestimmst du unter anderem das Aussehen der einzelnen Menüpunkte. Diese lassen sich als einfacher Text, als Text mit Rahmen oder als Text auf abgerundetem Rechteck darstellen. Schrift und Farben (auch für Hoverzustände) sind ebenfalls definierbar. Bei der Auswahl einer Schrift stehen die Systemschriften sowie eine Vielzahl von Webschriften zur Verfügung.

Masterseite anlegen mit festen Elementen

Natürlich können in einem Website-Projekt mehrere Seiten angelegt werden. Diese fügst du im Header- oder Footer-Bereich einer Navigation hinzu. Alle Seiten lassen sich individuell gestalten und mit Inhalt füllen. Es besteht zudem die Möglichkeit, sogenannte Masterseiten anzulegen. Dort werden dann feste Bereiche definiert, die auf allen Seiten identisch sein sollen. Dank einer Masterseite ist gewährleistet, dass alle Seiten diese festen Bestandteile beinhalten. Es ist auch möglich, mehrere Masterseiten für eine Website anzulegen.

Aussehen eines Elementes festlegen

Jede Masterseite enthält einen „Dynamic Content“-Bereich. Dieser dient als Platzhalter, um dort auf den einzelnen Seiten später die individuellen Inhalte zu platzieren.

Vielfältiger Inhalt: Texte, Bilder, Videos und Intros

Für die Inhalte deiner Seiten stehen dir eine Vielzahl von Elementen zur Verfügung, mit denen du Texte und Bilder in unterschiedlicher Darstellung einbindest. Es gibt klassische Vorlagen, um Texte und Bilder zu kombinieren. Für Teamvorstellungen gibt es ebenfalls Vorlagen, bei denen Bilder mit entsprechenden Bildunterschriften möglich sind.

Intro-Element

Da Videos eine immer größere Rolle spielen, stellt dir Simbla auch hierfür einige spezielle Inhalte-Elemente zur Verfügung. So kannst du sowohl YouTube-Videos als auch eigene HTML5-Videos von einer beliebigen Quelle einbinden. Auch den beliebten Trend, Videos als Hintergrund einzubinden, unterstützt Simbla. Dazu steht dir eine eigene Bibliothek mit zahlreichen Videos, aus denen du auswählen kannst, zur Verfügung. Außerdem hast du die Möglichkeit, Videos in einer Endlosschleife oder nur einmalig abspielen zu lassen.

Für die Darstellung von Bildern gibt es ein neues Karussell-Element, mit dessen Hilfe du Bilder als Bilder-Slider darstellst. Du wählst dabei einfach Bilder aus und entscheidest dich für einen Slider- oder Fade-Effekt für den Wechsel der Bilder. Die Zeit für den automatischen Wechsel stellst du individuell fest. Auch das Aussehen der Pagination sowie der Navigationspfeile kannst du auswählen.

Einstellungen für Bilderkarussell

Für die Gestaltung deiner Startseite gibt es spezielle Intro-Elemente . Hierüber kannst du sehr eindrucksvoll mit großformatigen Bildern und prägnanten Überschriften Aufmerksamkeit erregen. Auch Videos, Links und Slider platzierst du sehr einfach in so einem Intro.

Volle Breite für Inhalte

Alle Inhalte, die du hinzufügst, werden standardmäßig in voller Breite des Browserfensters dargestellt – so, wie man es von vielen zeitgemäßen Websites kennt. Du kannst die Breite und Höhe der einzelnen Container deiner Inhalte auch anders darstellen.

Anpassbare Größe für Container

Wenn dir eine klassische Darstellung mit Begrenzungen an den seitlichen Rändern lieber ist, stellst du dies einfach ein. Ebenso kannst du die Höhe der Container anpassen. So kann ein Container eine automatische Höhe einnehmen oder die volle Fensterhöhe. Zwischengrößen von winzig, über klein bis groß sind ebenfalls möglich.

Dank der Einstellungsmöglichkeiten für die Containergrößen bist du sehr flexibel, was die Darstellung und Gestaltung deiner Website angeht.

Inhalte per Text- und Bildbearbeitung hinzufügen

Integrierte Bildbearbeitung

Hat man eine Seite in ihren Grundfesten angelegt, geht es an die Fleißarbeit. Texte und Bilder müssen eingebunden werden. Dank integrierter Textverarbeitung und Bildbearbeitung gelingt dies schnell und ist dazu noch unkompliziert.

Integrierte Textverarbeitung

Mit der integrierten Bildbearbeitung werden Bilder beschnitten und vergrößert beziehungsweise verkleinert. Du kannst das Bild drehen und einen Ausschnitt definieren. Bildmaterial steht einem über eine eigene Mediengalerie mit zahlreichen kategorisierten Fotos zur Verfügung. Natürlich ist auch das Hochladen eigener Bilder oder der Verweis auf externe Quellen möglich.

Texte gibst du direkt im Website-Builder ein. Dank einer integrierten Textverarbeitung stehen dir gängige Formatierungsmöglichkeiten zur Verfügung. Schriftart und -größe, sowie -farbe lassen sich ebenso definieren wie die Textausrichtung. Auch Aufzählungen, Einrückungen und Textlinks sind möglich.

Pro-Modus für mehr Möglichkeiten

Standardmäßig wird Simbla in einem Modus ausgeführt, der die gestalterische und inhaltliche Bearbeitung ausschließlich über eine grafische Bedienoberfläche ermöglicht. Im Pro-Modus stehen dir weitere Funktionen für eine weitergehende Bearbeitung zur Verfügung.

So kannst du beispielsweise die einzelnen Elemente eines Bereiches – Container, Reihen und Zeilen – individuell bearbeiten. Der Pro-Modus wird einfach über eine Schaltfläche ein- und ausgeschaltet. Er sollte von erfahrenen Nutzern verwendet werden, da die komplexen Bearbeitungsmöglichkeiten auf Kosten der Übersichtlichkeit gehen. Allerdings hat man im Pro-Modus die volle Kontrolle über alle Inhalte.

Darstellung im Pro-Modus

Außerdem gibt es im Pro-Modus ein spezielles HTML-Element. Dieses erlaubt es, eigenen HTML-Quelltext in die Seite einzubinden. Alles, was Simbla als fertiges Inhaltselement nicht anbietet, kann auf diese Weise selbst ausgezeichnet werden.

Individuelles CSS, JavaScript und Media-Queries

Wem die vielseitigen Möglichkeiten, Inhalte bereitzustellen und zu gestalten, nicht ausreichen, kann selbst noch ganz individuell CSS und JavaScript per Editor eingeben. Vor allem die Möglichkeit, eigenes JavaScript zu hinterlegen, gibt dir sehr viele Freiheiten.

Über den Media-Queries-Editor bearbeitest du CSS sogar für spezielle Geräte-, beziehungsweise Browsergrößen. Standardmäßig sind Pixelangaben für Tablets und Smartphones hinterlegt. Aber auch die Angabe einer individuellen Auflösung ist möglich.

Responsive Vorschau

Das Besondere an Simbla ist – wie bereits erwähnt – das responsive Design aller Websites. Es gibt eine Preview-Seite, welche die Website wahlweise als Desktop-, Tablet- oder Smartphone-Version ausgibt. Bilder werden im responsiven Layout entsprechen verkleinert dargestellt. Das Menü wird per Burger-Icon eingeblendet und in Spalten angeordnete Inhalte werden untereinander dargestellt.

Vorschau für verschiedene Geräte

Beim Anlegen und Gestalten einer Website mit Simbla muss man sich selbst keinerlei Gedanken über die Darstellung auf Mobilgeräten machen. Gerade Laien und semi-professionellen Webdesignern dürfte dieser Ansatz sehr entgegen kommen.

Kostenloser Plan und kostenpflichtige Pläne

Eine einfache Website, die wenig Speicherplatz benötigt, kann kostenlos angelegt werden. Wer allerdings mehr als 300 Megabyte Speicherplatz und Bandbreite benötigt, muss auf einen der kostenpflichtigen Pläne umsteigen. Diese kosten zwischen 72 und 288 Euro im Jahr und verfügen über mehr Speicherplatz und Bandbreite.

Außerdem hat man bei den kostenpflichtigen Plänen die Möglichkeit, die Website über eine eigene Domain zu erreichen. Ansonsten muss man sich damit begnügen, dass die Website unter „sites.simbla.com/NameDerWebsite“ aufzufinden ist.

Fazit

Simbla beeindruckt mit seiner einfach zu bedienenden grafischen Oberfläche. Trotz der vielen inhaltlichen und gestalterischen Möglichkeiten ist alles übersichtlich gehalten. Dank des Pro-Modus haben erfahrene Nutzer noch sehr viel mehr Möglichkeiten, ein Webprojekt zu individualisieren.

Der Quelltext wird per HTML5 ausgegeben und jede Seite ist responsiv gestaltet – optimiert für Desktopgeräte, Tablets und Smartphones. Wer beruflich nichts mit Gestaltung und Webentwicklung am Hut hat, wird mit Simbla ebenso zurechtkommen und Freude dran haben, wie erfahrene Webentwickler und professionelle Designer.

Simbla definiert sich als „Easy Website Builder„, wobei das Easy nicht misszuverstehen ist. Simbla ist einfach zu verwenden, bietet aber nicht nur einfache Funktionalitäten.

(dpe)