Responsive Websites erstellen mit Simbla

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010...

Die Anforderungen an eine zeitgemäße Website sind in den letzten Jahren stark angestiegen. Da Websites zunehmend mit Smartphone und Tablet aufgerufen werden, ist ein reponsives Webdesign auf der Basis von HTML5 und CSS3 mittlerweile zu einer Minimalanforderung für jede Website geworden, die sich auch nur halbwegs als zeitgemäß bezeichnen möchte. Daher gehört auch beim Website-Bilder Simbla die Erstellung responsiver Weblayouts einfach dazu.

simbla

Einfacher Start mit Template oder Wizard

Es heißt, aller Anfang sei schwer. Beim Simbla-Website-Builder ist dies definitiv nicht der Fall. Willst du eine neue Website erstellen, entscheidest du dich zunächst, ob du mit einem Template oder per Wizard anfangen möchtest. Bei den Templates stehen dir über 75 verschiedene Vorlagen zur Verfügung. Da ist für alle Branchen und Hobbys etwas dabei. So gibt es Templates für klassische Unternehmen sowie für Kreative, für gastronomische Angebote sowie für Immobilienmakler und Tierliebhaber.

Das Besondere: Alle Templates lassen sich anschließend individualisieren. Farben und Schriften passt du ebenso an wie das eigene Logo, welches du hochlädst und einbindest. Außerdem sind die Templates responsiv und setzen auf HTML5 und CSS3. Für dich bedeutet dies, dass du dir keinerlei Gedanken darüber machen musst, ob und wie deine Website auf verschiedenen Geräten aussieht.

Der Wizard: Schnell zur eigenen responsiven Website

Der Wizard: Schnell zur eigenen responsiven Website

Auch bei der Verwendung des Wizards wird stets sichergestellt, dass deine Website responsiv ist. Beim Wizard wählst du keine Vorlage für die Gestaltung. Stattdessen wählst du verschiedene Optionen, aus denen anschließend das Grundgerüst für deine Website gebaut wird. So entscheidest du dich beispielsweise, ob du eine klassische Website mit mehreren Seiten oder einen One-Pager anlegen möchtest.

Am Ende hast du eine leere Website mit entsprechenden Vorgaben und füllst diese mit Inhalt.

Responsiv vom Layout bis zum Inhalt

Hast du das Layout für deine Website festgelegt, muss diese natürlich noch mit Inhalt gefüllt werden. Dazu bietet dir Simbla zahlreiche Widgets an, mit denen du unterschiedliche Inhalte auf den Seiten deiner Website platzierst.

Unter anderem stehen dir verschiedene „Content“-Blöcke zur Verfügung, mit denen du Texte und Bilder hinzufügst. Darüber hinaus gibt es „Multimedia“-Blöcke, die es dir erlauben, Fotogalerien oder Videos in deine Website einzubinden.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht
Bild-Text-Komposition per Widget einfügen

Bild-Text-Komposition per Widget einfügen

Natürlich sorgt Simbla bei allen Inhalten dafür, dass auch diese responsiv dargestellt werden. So werden Text-Bild-Kompositionen, die in der Desktopansicht nebeneinander angeordnet sind, bei Smartphones automatisch untereinander platziert. Bilder werden jeweils so verkleinert, dass sie maximal die Breite des Displays einnehmen – also nie aus dem sichtbaren Bereich hinausragen.

Wie du eine responsive Website mit Simbla erstellst, ist also keine Frage, mit der du dich an den Webentwickler deines Vertrauens wenden musst. Ganz ohne Kenntnisse in HTML5 und CSS3 legst du hier los und kannst dir sicher sein, dass das Ergebnis auf allen Geräten gut aussieht.

Mobilvorschau deiner Website

Mobilvorschau deiner Website

Im Übrigens gibt es eine Preview-Ansicht, in der du deine Website sowohl für Desktop- als auch für Mobilgeräte darstellen kannst. So wechselst du spielend zwischen einzelnen Geräteansichten und siehst immer genau, wie deine Website auf den unterschiedlichen Geräten aussieht.

Interaktionen mit Online-Datenbank

Eine weitere Besonderheit von Simbla ist die Möglichkeit, eine Online-Datenbank anzulegen und Inhalte daraus auf deiner Website darzustellen. Auch hierbei setzt der Website-Builder keinerlei Kenntnisse in Datenbanken voraus.

Hast du eine Datenbank angelegt, erstellst du eine Tabelle und legst Spalten für einzelne Werte an. Anschließend kannst du beliebig Datensätze erstellen. Das kann ein Produktkatalog oder eine Linkliste sein. Neben einfachen Texten und Zahlen hinterlegst du in deinen Tabellen auch Bilder, HTML-Quelltext und GPS-Koordinaten.

Schnell und einfach eine Online-Datenbank anlegen

Schnell und einfach eine Online-Datenbank anlegen

Über eine spezielle, automatisch angelegte Tabelle, legst du Benutzer an, die sich anschließend über ein Login-Formular in einem geschützten Bereich deiner Website anmelden können. Somit kannst du beispielsweise deinen Kunden ein spezielles Informations- und Serviceangebot anbieten, welches anderen Besuchern deiner Website vorenthalten bleibt.

Wer bereits große Datenmengen hat und diese in die Datenbank von Simbla überführen möchte, nutzt einfach die Importfunktion. Diese erlaubt es dir, Daten als CSV-Datei zu importieren. Im Übrigen ist ein Export deiner Tabellen in eine CSV-Datei möglich.

Um Inhalte der Datenbank auf deiner Website zu nutzen, stehen dir im Website-Builder zahlreiche spezielle Datenbank-Widgets zur Verfügung. So gibt es unter anderem Login-, Logout- und Registrierungsformulare, mit denen sich Benutzer für deine Website registrieren und sich anschließend an- und abmelden können.

Datenbank-Widgets

Datenbank-Widgets

Das „Form to Database“-Widget gibt dir zudem die Möglichkeit, auf deiner Website ein Formular einzubinden, dessen Inhalte in eine deiner Datenbank-Tabellen geschrieben werden.

Natürlich kannst du den Inhalt einer Datenbank einfach als Tabelle auf deiner Website veröffentlichen. Dazu steht dir das Widget „Data Table“ zur Verfügung. Hierbei wählst du aus, welche Spalten auf deiner Website dargestellt werden sollen. Hast du Bilder in deiner Tabelle hinterlegt, bietet sich zudem das Widget „Data Gallery“ an. Mit diesem kannst du spielend einfach eine Bildergalerie mit den Bildern erstellen, die sich in einer deiner Datenbank-Tabellen befinden.

Daten einfach per Diagramm visualisieren

Daten einfach per Diagramm visualisieren

Dank des „Chart“-Widgets ist es dir sogar möglich, Diagramme zu erstellen, welche die Werte deiner Tabelle darstellen. Gerade bei Tabellen mit numerischen Werten kannst du diese sehr schön als Torten-, Balken- oder Kurvendiagramm darstellen. Auch hierbei ist die Konfiguration sehr einfach. Über ein Formular wählst du jene Spalten aus, die beispielsweise für die X- und Y-Achse eines Diagramms berücksichtigt werden sollen.

Zu guter Letzt gibt es noch das „Counter“-Widget, welches dir die Anzahl der Tabellenzeilen oder die Summe von Werten einer Spalte jeweils hochzählt.

Schnell Dashboards mit Diagrammen erstellen

Die verschiedenen Diagramm-Widgets geben dir eine schnelle Möglichkeit, Dashboards mit zahlreichen statistischen Daten zu erstellen. So kannst du fix einen Überblick über registrierte und aktive Benutzer deiner Website erstellen oder andere beliebige Werte aus deiner Datenbank visuell aufbereitet ausgeben.

Beispielhaftes Dashboard mit verschiedenen Zählern und Diagrammen

Beispielhaftes Dashboard mit verschiedenen Zählern und Diagrammen

Weder Kenntnisse in Datenbanken, noch in Programmierung oder HTML- beziehungsweise CSS-Auszeichnung sind notwendig. Und auch bei den Diagrammen wird natürlich sichergestellt, dass diese responsiv sind und auf allen Geräten und Auflösungen ansprechend und übersichtlich dargestellt werden.

Fazit

Die verschiedenen Tarife

Die verschiedenen Tarife

Simbla ist nicht nur für kleine Websites interessant, sondern ebenfalls für umfangreiche Internetpräsenzen, die auf komplexe Datenbanken und zeitgemäße Gestaltung und Technik setzen. Dabei ist alles intuitiv zu bedienen. Neben mehreren kostenpflichtigen Tarifen gibt es für den Einsieg einen kostenlosen Tarif, mit dem du all die vorgestellten Möglichkeiten bereits produktiv einsetzen kannst.

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.