Kategorien
Design Editoren Essentials Freebies, Tools und Templates Webdesign

8b: Einfacher Website-Baukasten für mobilfreundliche Seiten

Keine oder nur wenig Ahnung von Webentwicklung, und trotzdem muss eine Website her? Mobilfreundlich soll sie sein und möglichst kostengünstig? – Der jüngst veröffentlichte Website-Baukasten 8b verspricht leichteste Bedienbarkeit und modern designte, responsive Ergebnisse. Werfen wir einen Blick auf die Funktionen und wagen wir einen kleinen Selbstbauversuch …

Kategorien
Inspiration Showcases

Geht doch: 25+ schicke Websites aus dem Homepage-Baukasten

Heute wollen wir uns mal wieder mit einem der Lieblingsthemen professioneller Designer beschäftigen – dem Homepage-Baukasten. Alles Geschimpfe nutzt nichts, die Dinger sind einfach nicht aus der Welt zu reden. Im Gegenteil, es werden eher mehr denn weniger. Das Versprechen ist aber auch zu verlockend. Ohne technische Kenntnisse soll man hervorragend aussehende Websites im Handumdrehen gestalten können. Da freut sich die Betreiberin des kleinen Schmucklädchens um die Ecke ebenso wie der Inhaber der Zweirad-Schrauberbude in Hintertupf. Manch Service richtet sich mittlerweile sogar direkt an Printdesigner, die sich ein Stück vom Webdesign-Kuchen abschneiden wollen. Egal, zu welcher Gruppe Sie gehören. Die folgende Zusammenstellung von Beispielen verschiedener Dienste zeigt, wie weit Sie im Spätsommer 2013 ohne Code-Kenntnisse kommen können…

Eins sei noch vorweg geschickt. Die folgenden Beispiele können zwar ohne Code-Kenntnisse, nicht jedoch ohne Ideen realisiert werden. Das grafische Konzept, das Navigationsdesign, die Informationsarchitektur, das alles nimmt Ihnen natürlich ein Homepage-Baukasten nicht ab. Es sei denn, Sie können und wollen Ihr Konzept in eines der stets vorhandenen, vorgefertigten Templates pressen. Individualität erreichen Sie dann jedoch nicht.

WebStartToday.com

Wie die meisten bekannten Homepage-Baukästen richtet sich auch  WebStartToday an kleine Unternehmen und Freiberufler. Auf der Basis eines Drag-and-Drop-Interfaces kümmert sich der Baukasten ansatzweise auch um SEO-Freundlichkeit. Geboten werden Tausende von Templates aus 72 Branchen, womit weite Bereiche real existierender Bedarfe abgedeckt sein dürften. Der Dienst bietet bei der Anpassung der Templates hilfreiche Tipps und Tricks, vor allem auch mit Blick auf SEO und kann im ersten Jahr komplett kostenfrei verwendet werden.

Reed Grey Woodworking

AquaVie Day Spa

Electrify Fitness

Intuit.com

Auch Intuit wendet sich an die Zielgruppe kleiner Unternehmen. Hier findet man lediglich einige hundert Designs vor, dafür glänzt der Dienst mit ausgezeichnetem Support, bietet E-Commerce- und Social-Media-Integration. Intuit kann 30 Tage lang kostenfrei ausprobiert werden.

Coco Lassial Apron Co.

Gentle Hands Canine Care

Elk Mountain Rentals LLC

Wix.com

Wix ist schwer zu schlagen, wenn man mal vom Namen absieht, denn Wix ist kostenlos. Es gibt zwar Premium-Angebote, diese beziehen sich jedoch auf Speicher und Bandbreite, das Featureset des Dienstes an sich ist kostenlos nutzbar. Wix bietet wenige vorgefertigte Designs, aber viele Möglichkeiten, eine Website zu gestalten, wenn man denn eine Idee hat, wie diese aussehen soll. Wenig verwunderlich, dass Wix zu den Lösungen gehört, die auch von Webdesignern eingesetzt wird.

Sue-Sue’s

The Punch and Judy Show

Richard Overton

Breezi.com

Breezi richtet sich direkt an Webdesigner, die den Einstieg in den Code vermeiden wollen (oder mangels Know-How müssen). Breezi limitiert seine Nutzer kaum. Auch anspruchsvolle Designs sind damit machbar. Erstellte Sites können mit einer Fülle zusätzlicher "Apps" aufgepeppt werden und sind automatisch responsiv. Designs in Breezi sind sog. Skins, die in Sekundenschnelle über die vorhandene Site gestülpt werden können – interessant für Wankelmütige.

BlackStoneIndonesia

Katherine Morgan Design

Fragments of Winter

Christine Brizendine

Design Printworks

Mint Wedding Cinematography

Weebly.com

Weebly ist beliebt bei vielen Menschen, aber vor allem bei Budgetorientierten. Denn Weebly gehört zu den günstigsten Diensten, ist im Basis-Featureset sogar kostenlos. Der Dienst erzeugt standard-kompatible Sites, die SEO-optimiert, Social Media vorbereitet und mit Analytics ausgestattet sind. Neben Apps für iOS und Android bietet Weebly seit kurzem Optionen zur Erstellung mobil-freundlicher Seiten.

Arancini Bros.

Zestwishes.co

Kaylee’s Education Studio

IM-Creator

Auch IM-Creator richtet sich neben der Zielgruppe der Kleinunternehmen und Freelancer direkt an Designer, die den Einstieg in das Coding scheuen. Die vorhandenen Templates sind in ihrer Mehrzahl von freiberuflichen Webdesignern beigesteuert worden – vermutlich ein Grund, wieso IM-Creator zu den vielfältigeren seiner Art gehört.

Wiggley Bottom Farm

Alex Steenfeldt

Chikin and Fish

Quails in the Nest

TheDigitalArtist.com

MoonFruit.com

MoonFruit richtet sich ebenfalls an Freunde des geringen Budgets. Kommt Ihre Site mit 20 MB auf 15 Seiten aus, dann kostet MoonFruit keinen Cent. Premium-Pläne bieten mehr Speicher und Bandbreite, sowie mehr Features, etwa E-Commerce-Unterstützung und bald auch den Betrieb von Blogs.

Shortlaunch.com

Emma Illustration

In Your Dreams

Re-loved Vintage

Raw Xclusive

Webydo.com

Webydo kann zwar grundsätzlich von Endkunden verwendet werden, Zielgruppe ist aber eindeutig der Designer. Webydo ist ambitioniert gestartet und steht mittlerweile auch als White-Label-Variante zur Verfügung. So kann sich jeder Designer in Webydo häuslich einrichten. Das System übernimmt auf Wunsch sogar die Rechnungsstellung gegenüber den Kunden. Etliche Kooperationen mit etwa E-Commerce-Firmen sind darauf angelegt, die Fähigkeiten von Webydo in Bereiche zu erweitern, in denen man bislang nicht um das Coding herum kommt.

Stella and Lori

Yoav Gurin

Gallery Born

Punko

Wie die gezeigten Websites erkennen lassen, sind die Zeiten, in denen Website-Generatoren nur Schund produzierten, endgültig vorbei. Wenn man sich nun noch vorstellt, dass diese Tools von erfahrenen Designern bedient werden und nicht direkt vom Endkunden, dann könnten da richtige Schmuckstücke entstehen. Die Vorteile für berufsmäßige Seitenersteller liegen auf der Hand. Die Erstellungsdauer wird verkürzt, der Preis kann sinken, muss aber nicht. In jedem Fall können Designer Zeit sparen, was sich – so oder so – wieder finanziell auswirken wird.

Natürlich gerät jeder Website-Baukasten an seine Grenzen, wenn es um die Erstellung komplexer Web-Apps mit Interaktionsmöglichkeiten geht, aber die durchschnittliche Web-Präsenz schafft er definitiv.

(th/dpe)

Kategorien
(Kostenlose) Services Design Essentials HTML/CSS

8+ Formulargeneratoren für die eigene (mobile) Homepage

Formulargeneratoren sind so alt wie das Netz und entstammen der Zeit der alten Geocities und anderer Selbstbau-Website-Heimstätten. Niemand der dort Aktiven hatte Ahnung von HTML, teilweise war auch der Codezugriff gar nicht möglich. So wurden Formulargeneratoren, sogar Gästebuchgeneratoren galt es zu erdulden, zur Selbstverständlichkeit. Bevor Sie jetzt denken, dass diese Dienste heutzutage völlig überflüssig wären, sollte erwähnt werden, dass die heutigen Generatoren mit denen aus grauer Vorzeit zumeist (leider nicht stets) nur noch den schlechten Ruf gemein haben. Ich habe mir einige dieser Vertreter angesehen und dabei auch vor mobilen Websites nicht halt gemacht. Erschrecken Sie nicht: auch von der üblen Sorte sind noch haufenweise am Markt…

5 Formulargeneratoren für die klassische Website

Hier werden wir sie finden, die Gespenster der Vergangenheit ;-)

Der Formular-Chef

Das erste Tool für die Erstellung von HTML-Formularen ist der Formular-Chef. Mit Hilfe dieses kostenlosen Tools können Sie ganz hundsgemeine Formulare erstellen, wie sie jeden Tag im Alltag benötigt werden. Auf der Hauptseite wird Ihnen das Tool kurz vorgestellt. Dann können Sie sich die Grundkonfiguration eines Formulars anschauen, sich über die Minimalanforderungen informieren, sowie die Beispielformulare ansehen. Bei den Beispielformularen handelt es sich um Templates. Sie suchen sich einfach einen Formulartyp aus und erhalten den entsprechenden Code kostenfrei.


Beispielformulare als Templates


Start: die Grundkonfiguration

Beim Stöbern auf der Webseite des Formular-Chef finden Sie zahlreiche weitere Informationen zu Features, aber auch Anleitungen und FAQs. Das Tool richtet sich nach meinem Verständnis vornehmlich an die Anfänger im Webdesign, respektive den DIY-Homepagebauer.

All U Want

Nicht „all you can eat“, aber trotzdem sehr nützlich, wenn es um einen kostenlosen Formgenerator geht. All U Want bietet Ihnen kostenlose Homepage-Tools für die eigene Webseite. Hier finden Sie Features für Umfragen, Gästebucheinträge, Formulare, Formmailer oder Fotoalben. Die angebotenen Features können vom Nutzer mit einem individuellen HTML-Code oder einem Link in die Homepage integriert werden. Um den Zugang zu diesen Features zu erlangen, müssen Sie sich bei dem Anbieter registrieren. Das ist kostenlos. Laut All U Want werden Ihre Daten nicht an Dritte ohne Ihr Einverständnis weitergegeben. Auch dieser Dienst ist vor allem für diejenigen hilfreich, die keine (oder keine guten) HTML-Kenntnisse haben.


All U Want: ein Überblick über die Tools

Frontend DWFormgenerator

DW-Formmailer soll laut der Beschreibung des Anbieters ein Tool für Profis sein. Damit ist es möglich, individuelle Formulare zu erstellen. Der Formmailer dient zur Übermittlung von Daten, die in ein Web-Formular eingegeben wurden. Das Tool kann sowohl kostenlos als auch gegen Bezahlung, dann mit erweiterten Möglichkeiten verwendet werden.


DWFormgenerator: die Startseite

Kingtools

Auch für die Verwendung der Kingtools wird kein HTML-Wissen benötigt. Kingtools bietet Ihnen 20 Homepagetools. Die Tools können schnell in die Webseite eingebunden werden und sind einfach zu verwalten. Das Design kann per CSS individuell angepasst werden. Um das ganze Paket zu erhalten und in die Webseite einbauen zu können, ist eine Registrierung notwendig. Vorsicht: auch wenn das Angebot sehr verlockend aussieht, so muss man mit dem Datenschutz doch aufpassen. Der Betreiber behält sich vor, persönliche Daten der Nutzer beispielsweise für Werbung oder Marktforschung weiterzugeben.


Kingtools: ein Überblick

Interwebline

Interwebline ist ein weiteres Portal für Seitenbetreiber, welches zahlreiche Tools kostenlos anbietet, unter anderem auch einen Formmailer. Für Neulinge auf dem Gebiet der Homepageerstellung wird ein Support angeboten. Für Fortgeschrittene und Profis sind verschiedene Tools geeignet, mit deren Hilfe die Webseite aufgestockt werden kann. Auf der gut strukturierten Webseite finden Sie zudem Tutorials für HTML-Anfänger, einige Infos zum Thema Graphik, sowie Tipps und Tricks. Eine interessante Quelle für Anfänger und (Semi-)Profis!


Interwebline: die Startseite

Drei Dienste, die Kontaktformulare für mobile Geräte generieren

Das mobile Internet entwickelt sich rasch. Noch vor wenigen Jahren schien es undenkbar, eine Webseite auf einem mobilen Gerät auch nur anzuschauen. Heute gehört es zum Alltag. Wer sich mit Webdesign beschäftigt, muss sich nicht nur um eine „normale“ Version seiner Webseite kümmern. Vielmehr wird immer häufiger zusätzlich eine mobile Variante gefordert. Das betrifft dann natürlich auch etwa Kontakt- und andere Formulare. Im folgenden stelle ich Ihnen ein paar Dienste vor, welche dabei helfen wollen, Kontaktformulare für mobile Webseiten schnell zu erstellen.


So können Ihre mobilen Formulare aussehen

Get Formly: online mobile Formulare erstellen

Erster Dienst, welcher es erlaubt, mobile Webseitenformulare schnell zu erstellen ist Get Formly. Sie können sofort online ein eigenes Formular erstellen. Der Dienst ist allerdings nicht kostenlos. Nur eine Demo Version eines Formulars kann erstellt werden. Um ordentlich mit dem Dienst zu arbeiten, muss man sich für einen von drei Tarifen entscheiden, den Geldbeutel auspacken und kann erst dann los legen. Eine gute Einführung in die Dienstnutzung vermittelt Ihnen ein aussagekräftiges Bild. So können Sie qualifiziert entscheiden, ob sich die Investition wohl für Sie lohnen wird.

Klicken Sie auf „Build your first form“, werden Sie zu einer Formularauswahl weitergeleitet. Um zu verstehen, was die jeweilige Formularart bedeutet, führen Sie den Mauszeiger über den jeweiligen Button. Beispielsweise möchten Sie ein Multiple-Choice-Formular basteln. Ziehen Sie den entsprechenden Button in ein Feld, welches sofort bei der Auswahl rechts erscheint. Ein Menu entsteht, in dem sich Ihre Frage und Antwortmöglichkeiten befinden. Der Dienst schlägt Ihnen irgendeine beliebige Frage vor, weist Sie aber sogar darauf hin, dass Sie doch lieber eine interessantere Frage verwenden sollten.


Get Formly: Formulare erstellen mit Tipps

Der Hinweis auf eine interessantere Frage ist nicht der einzige, der Ihnen begegnen wird. Buchstäblich jeder Button wird erläutert. Nachdem Sie sich da durchgecklickt haben, können Sie endlich weitere Optionen zu Ihrem Formular hinzufügen und schliesslich auf „Preview“ klicken.


Vorschau eines fertigen Formulars

Schlussendlich geben Sie Ihre E-Mail-Adresse an und wählen ein Passwort. Get Formly verspricht Ihnen, Ihr Postfach nicht mit Spam zu füllen.


Um Ihr Formular zu erhalten,müssen Sie erst Ihre E-Mail-Adresse angeben

Form Smarts

Formsmarts ist ein Dienst, welcher ebenfalls eine Möglichkeit bietet, Formulare für mobile Geräte zu erstellen. Hier gibt es sowohl kostenpflichtige Versionen als auch eine kostenlose Basic-Version. Um die Basic-Version nutzen zu können, müssen Sie sich erstmal registrieren. Nach der Bestätigung der E-Mail-Adresse kann es nun mit der Formerstellung losgehen. Melden Sie sich mit Ihrem Account an, klicken Sie auf „My Forms“ auf der Startseite unten. Geben Sie alle notwendigen Informationen ein und klicken Sie auf „Create Forms“. Danach gehen Sie auf „create fields“ und erstellen Sie ein Feld. Sind Sie damit zufrieden, klicken Sie auf den Button „Forms“. Sie erhalten einen Code für Ihren Formular.


Embed Code Ihres Formulars

Um weitere Einstellungen im Formular durchzuführen, klicken Sie auf den Bleistift in der oberen Menüleiste. Ein Fenster mit weiteren Einstellungsmöglichkeiten erscheint. Nicht alle Funktionen können bei der Basic-Version genutzt werden, allerdings halte ich persönlich diese für nicht nötig. Für die private Webseite reichen meiner Meinung nach die angebotenen Möglichkeiten vollkommen. Nachdem Sie fertig sind, speichern Sie die Einstellungen unter „save changes“. Sind Sie mit allem zufrieden, kopieren Sie den Code und bauen ihn auf Ihrer Webseite ein. Wie Sie es am besten tun sollten, erfahren Sie indem Sie auf das Fragezeichen neben „URL“ klicken. Ihnen werden ausführlichste Informationen darüber gegeben, wie Sie Ihr Formular in Ihre Webseite einbauen können.

P-Form

Noch eine Quelle zum Erstellen von HTML5-Formularen, welche auch für eine mobile Webseite geeignet sind, ist pForm. Hier wählen Sie als erstes ein Layout in IHrer Wunschfarbe. Unten klicken Sie auf „Next“. Im Menu rechts wählen Sie eine Formularart. Dann gestalten Sie Ihr Formular beliebig und nachdem Sie fertig sind, klicken Sie auf „Download Form“. Der HTML-Code samt Bottom, Header, den CSS-Dateien und weiterem Zubehör kommt zu Ihnen in einer zip-Datei verpackt. Was ich gut finde: hier ist keine Registrierung oder die Angabe einer E-Mail-Adresse notwendig.


P-Form: ein kleines Beispiel

Fazit: Als ich auf der Suche nach Möglichkeiten zur Erstellung mobiler Formulare war, musste ich feststellen, dass die meisten davon nicht kostenlos sind. Viele versprechen zunächst, sie seien kostenlos. Dann aber verlangen sie eine aufwändige Registrierung und am Ende stellt sich heraus, dass nur ein Formular kostenlos erstellt werden kann. Die kostenlosen Anbieter reichen meiner Meinung nach nur für sehr simple Formulare. Möchten Sie aber etwas Qualitatives haben, empfehle ich Ihnen doch den Griff zum Geldbeutel. Zum Schluss habe ich für Sie noch drei nette Mobile-Forms-Anbieter aufgelistet, welche nicht kostenlos sind, aber dafür durch die Qualität an Formularen eher überzeugen.

  • iFlyMobi-Applikation zur Erstellung von mobilen Formularen.
  • DeviceMagic: mobile Formulare werden mittels eines Online-Designers erstellt.
  • Mobify: ein Editor für die Erstellung von mobilen Webseiten (und Formularen).

(dpe)