Für unsere aktuelle Kampagne haben wir uns entschieden die benötigten Landing Pages nach dem Minimalprinzip komplett intern zu erstellen. Aus Sicht einer UX Agentur versuchen wir hier ebenso den Spagat zwischen der Bearbeitung von Kunden-Projekten und der eigenen Agentur-Entwicklung zu schaffen.

Innerhalb der Vorgaben ‘gute Qualität’, ‘geringe Kosten’ und ‘Geringe Entwicklung- und Reaktionszeit’, können wir die nötigen Ressourcen für Konzeption, Design und Projekt-Management weitestgehend intern abdecken. Lediglich Frontend Entwicklung fehlt uns in unserem Team.

An dieser Stelle kommen sogenannte Website-Builder ins Spiel. Mit diesen Baukästen lassen sich in kurzer Zeit, ohne weitere IT-Vorkenntnisse, professionelle Webseiten erstellen. Wir haben unterschiedliche Website-Builder verglichen und uns letztendlich für Squarespace entschieden.

Die Vorarbeiten bzgl. Konzept und Design wurden bereits erledigt. Durch kurze interne Abstimmungswege haben wir es geschafft, in kurzer Zeit acht Landing Pages zu erstellen. Nun geht es an die technische Umsetzung.

„Fügen Sie Ihrer Website Bilder hinzu, ganz einfach per Drag-and-drop. Genauso leicht lassen sich verschiedene Bereiche verschieben, ergänzen oder entfernen. Schriftarten, Farben und Seitenkonfigurationen können Sie individuell anpassen – so machen Sie Ihre Seite unverwechselbar. […] Unsere Templates funktionieren auf Geräten aller Art optimal: Ist Ihre Website einmal entworfen, können Sie in der Vorschau einfach überprüfen, wie sie auf anderen Bildschirmgrößen aussieht.“

Soweit die verkaufsoptimierte Squarespace-Beschreibung. Soll sich die eigene Webseite jedoch mehr von der Masse abheben oder gar das ganz individuelle Corporate Design widerspiegeln, ist ein wenig mehr Aufwand notwendig.

Getting Started

Das Setup einer Webseite ist denkbar einfach. Nach der Registrierung steht eine Fülle an vorgefertigten Templates zur Verfügung, die über einen WYSIWYG-Editor mit Inhalten gefüllt werden müssen.

Über das Side-Menu kann der Benutzer zwischen den einzelnen Hauptbereichen wechseln. Von hier aus kann auf die Page- und Design-Bearbeitung, als auch auf die leistungsstarken Tools für E-Commerce, Marketing und Analytics zugegriffen werden. Wir haben uns hauptsächlich auf die Page- und Design-Bearbeitung konzentriert. Das notwendige Marketing Know-How für die Kampagne selbst kommt von eminded.

Alleine durch den Inhalt ist das eigene Corporate Design aber noch nicht umgesetzt. Für Design-Anpassungen bzgl. Farben, Schriftarten, Positionierung und Abstände bietet Squarespace gute Möglichkeiten, die eigenen Anforderungen umzusetzen. Je nach verwendetem Template sind die Möglichkeiten mehr oder weniger spezifisch. Unsere Erfahrungen mit Squarespace beruhen alle auf dem Template “Miller”, aus der Brine-Familie.

Squarespace UI

Den Vorteil eines WYSIWYG-Editors spielt Squarespace m.M.n. nur halbwegs gut aus. Wie zuvor erwähnt, unterscheidet Squarespace die Bearbeitung von Website-Elementen und Element-Formatierung.

Zwar lassen sich im Seiten-Editor alle Website-Elemente mühelos verschieben und (inhaltlich) bearbeiten, ein Styling mit z.B. Farben und Schriftgrößen lässt sich an dieser Stelle jedoch noch nicht vornehmen. Dazu muss erst (umständlich) über das Side-Menu in den Design-Editor gewechselt werden.

Dieses Vorgehen weicht nicht nur von fast jeder Style-Bearbeitung ab, wie es in den gängigen Design- oder Textbearbeitungssoftwaren üblich ist, sondern nimmt der Bearbeitung der Webseite oftmals auch den Flow.

Klarer und verständlicher wird diese Trennung allerdings, sobald individuelle Styles nicht länger über den Editor eingestellt werden, sondern über eigenes CSS.

Im Design-Editor sind die Optionen bewusst eingeschränkt, um durch die Verwendung konsistenter Formatierungen ein einheitliches Erscheinungsbild für die Website zu schaffen. Aus diesem Grund organisiert Squarespace (ebenso wie CSS) Text in Kategorien wie Body Text, Navigation und Überschriften (H1, H2 und H3). Während die spezifischen Optionen je nach Template variieren, gelten Änderungen an einer Schriftgruppe seitenübergreifend.

Was aber, wenn diese Anpassungsmöglichkeiten nicht ausreichen? Hierzu bietet Squarespace die Möglichkeit eigenes CSS einzufügen (Grundwissen über CSS vorausgesetzt). Vorweg sei allerdings gesagt, dass versucht werden sollte, möglichst viele Anpassungen über den Design-Editor vorzunehmen. Dadurch bleiben die Ladezeiten der Seite relativ gering.

Schriftbild anpassen

Individuelles Corporate Design beinhaltet meist auch eine hauseigene Schriftart. Squarespace bietet zwar eine Menge an Standard-Schriften an, Custom Fonts müssen allerdings über CSS eingebettet werden (Anleitung zum einbetten von Schriftarten). Sobald die neue Schriftart hinzugefügt wurde, kann sie über CSS jedem Text auf der Webseite individuell zugewiesen werden.

Farbpalette bearbeiten

Die meisten Farben lassen sich über die Design-Einstellungen für die unterschiedlichsten Elemente im Editor definieren. Spezialfälle, z.B. wechselnde Hintergrundfarben auf einer Seite (wie wir es verwenden), lassen sich allerdings nicht definieren.

Glücklicherweise weist Squarespace jedem eingefügten Element eine ID zu, sodass die Sektionen über eigenen CSS Code einzeln mit einer neuen Hintergrundfarbe angepasst werden können.

Ein angepasstes Schriftbild und die richtigen Farben bringen die Webseite schon auf ein gutes Niveau und kommen dem eigenen Corporate Design bereits sehr nahe. Mit gezielten CSS Anpassungen bzgl. Abständen, Style der Eingabefelder und CTA-Buttons entsteht aus einem Mainstream Template nach und nach eine professionelle Landing Page im Corporate Look.

Responsive Design

Squarespace betont zwar, dass alle Templates für mobile Geräte optimiert sind. Es sollte einem jedoch bewusst sein, dass Squarespace den Desktop-First Ansatz verfolgt. Sobald es zu mobilen Ansichten kommt, verfliegen die einfachen Bearbeitungsmöglichkeiten förmlich.

Ein Bearbeitung der Elemente ist nur in der Desktop-Ansicht möglich. Zwar passt sich die Spaltenbreite auf mobilen Geräten an, eine unterschiedliche Spaltenanzahl für ein und dasselbe Element auf Desktop oder mobilen Views zu definieren, ist jedoch nicht möglich.

Ebenso passt sich das Schriftbild nicht automatisch an kleinere Bildschirme an. Eine H1 beispielsweise, die auf Desktop mit einer Größe von 50pt angegeben ist, bleibt auf einem Smartphone ebenso groß. Unter Umständen ist es notwendig Texte auf Grund des geringeren Platzes, für alle Screengrößen in einer verkürzten Form zu formulieren (Mobile First Ansatz).

Bilder werden zwar proportional skaliert, oft ist es aber notwendig den Bildausschnitt von Anfang an neu zu wählen oder das Bild gänzlich anders zu gestalten (da sich CTAs oder Texte mit Bildelementen überlagern).

In beiden Fällen bietet Squarespace keine Möglichkeit unterschiedliche Texte oder Bilder für unterschiedliche Bildschirmgrößen zu pflegen.Ein kleiner CSS Trick hilft uns allerdings, auch dieses Problem zu lösen. Im Desktop View werden hierzu sowohl das Desktop-, als auch das Mobile-Element angelegt. Über CSS Media Queries und die entsprechende Display Property wird nun abhängig von der Bildschirmbreite entweder das Desktop- oder das Mobile-Element ein- oder ausgeblendet.

Fazit

Mit Squarespace lassen sich schnell und kostengünstig Webseiten erstellen. Die (Desktop-) Bearbeitungsmöglichkeiten bestechen durch ihre Einfachheit und direkte Eingabe in der Web-Oberfläche, es sind keine Code-Anpassungen notwendig.

Bei der Bearbeitung der Elemente verfolgt Squarespace offenbar einen ‘Desktop First’ Ansatz. Sollen die Webseiten allerdings auch auf mobilen Geräten halbwegs gut aussehen, sollte der Anwender für die Bearbeitung des Inhalts ‘Mobile First’ denken (selbst wenn der meiste Traffic über Desktop kommt).

Wäre es möglich Elemente für Ansichten auf mobilen Geräten Breakpoint-spezifisch in der Web-Oberfläche anzupassen, wären auch die letzten Vorbehalte gegen Squarespace aus dem Weg geräumt.

Sicherlich lassen sich einige Anpassungen auch durch andere Methoden lösen. Unsere beschriebenen CSS-Lösungen verändern jedoch nur das Styling und greifen nicht in den Quellcode der Seite ein.

Mit begrenzten internen Entwicklungs-Ressourcen bietet Squarespace einen guten Kompromiss zwischen Entwicklungszeit, externen Abstimmungen und Kosten. Fairerweise sei noch gesagt, dass die interne Ressource welche die Landing Pages baut, für diese Zeit keine Kunden-Projekte bearbeiten kann.

‍