Warum unsere Kunden ihre Webseite kaputt layouten können

Einleitung / Basics

Bereits seit einiger Zeit haben wir unseren neuen cubetech Core im Einsatz. Intern nennen wir das Ding liebevoll "gutenbase" - eine Mischung aus Gutenberg (der Wordpress Editor) und Base (unser Kern). Dieses System erlaubt es uns, dass wir sehr schnell zu sichtbaren Resultaten kommen und uns dann auf die Details oder Spezialfeatures für unsere Kunden konzentrieren können.

Technisch gesprochen setzen wir darauf, dass wir Bootstrap 5.x einsetzen, was uns ein grosses Set an Basiselementen bietet. Diese Basiselemente können wir dann dem Kundenwunsch entsprechend verändern, erweitern oder auch etwas komplett Neues entwickeln.

Nebst den vielen Modulen, welche wir nach Bedarf verwenden und weiterentwickeln, sind drei davon von zentraler Bedeutung:

• Zeilen
• Spalten
• "Fullwidth"

Ich möchte nachfolgend diese Elemente kurz erläutern.

Zeilen / Spalten

Von Bootstrap kennt man das sogenannte Grid System. Ein Grid besteht aus einer Zeile (Row) und darin enthaltenen Spalten (Column). Normalerweise geht man von einem 12-Spalten System aus, somit können viele gebräuchliche Layoutvarianten verwendet werden. Beispielsweise zwei Spalten/Zeile (50%, oder 6/12), 3 Spalten (33 oder 4/12) oder 4 Spalten (3/12).

Das Grid basiert ausserdem darauf, dass für verschiedene Geräte (vereinfacht: Handy, Tablet, Computer) verschiedene Layouts zum Einsatz kommen können. So mag es auf einem Computer sinnvoll sein, dass 4 Elemente pro Zeile dargestellt werden, auf Tablet sind es noch 2 und auf dem Handy noch 1 Element.

Ein Beispiel:

Für die Teamansicht einer Firma macht es ggf. Sinn, dass auf einem Computer 4 Menschen angezeigt werden - Foto, Name, Funktion und Kontaktdaten. Aus Platzgründen werden auf einem Tablet nur noch 2 Menschen pro Zeile angezeigt. Und auf dem Handy wird nur ein Mensch pro Zeile angezeigt.

Somit hätten wir bei 8 Mitarbeitenden auf einem Computer 2 Zeilen mit jeweils 4 Einträgen. Bei Verwendung eines Tablets sind es bereits 4 Zeilen mit jeweils 2 Einträgen. Und auf dem Handy wird jeder Eintrag separat angezeigt - somit 8 Zeilen. Klingt kompliziert? Ist es nicht! Öffne die Seite cubetech.ch/team sowohl auf Deinem Computer wie auch auf Deinem Handy.

Wenn jetzt ein Mitarbeiter neu in der Firma beginnt musst Du diesen nur noch erfassen - um die Darstellung kümmert sich das erwähnte Grid System. Es sind keine weiteren Schritte notwendig :)

Fullwidth

Immer wieder gibt es Webseiten, welche normalweise den Inhalt innerhalb eines sogenannten "Containers" anzeigen. Das heisst, dass links und rechts vom Bildschirm eine gewisse Fläche leer ist. Studien haben belegt, dass die Ausnutzung der gesamten Bildschirmbreite nicht sinnvoll ist, da dies das Lesen des Textes extrem erschwert. Beispiel gefällig?

Öffne diese Datei und lies sie entweder im Browser oder in Deinem bevorzugten Editor. Aber Achtung: Bitte Fenster maximieren bzw. auf die ganze Breite aufspannen!

Für die andere Variante lies folgenden - exakt gleichen - Text durch:

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rhetorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren. Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis ihm ein paar heimtückische Werbetexter auflauerten, es mit Longe und Parole betrunken machten und es dann in ihre Agentur schleppten, wo sie es für ihre Projekte wieder und wieder missbrauchten. Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch. Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rhetorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren. Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis ihm ein paar heimtückische Werbetexter auflauerten, es mit Longe und Parole betrunken machten und es dann in ihre Agentur schleppten, wo sie es für ihre Projekte wieder und wieder missbrauchten. Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch.Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rhetorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren. Doch alles Gutzureden 

Ich weiss, dieses Beispiel ist ein bisschen weit her geholt - es soll aber verdeutlichen, warum wir diese Container einsetzen. Es ist nach wie vor gleich viel Text und ich gehe davon aus, dass Du die ersten paar Worte - maximal die ersten 2 Zeilen - gelesen hast und danach bis hier gescrollt bist. Aber wenn wir dieses Beispiel auf sinnvolle und aussagekräftige Texte erweitern, wird schnell klar, dass Dein Kunde (interessante) Texte zwar lesen will, jedoch muss ein Besuch der Physiotherapie - auf Grund des hin- und her Bewegen des Halses - nicht zwingend nötig sein :)

Und trotzdem!
Manchmal will man Inhalt über die gesamte Seite anzeigen. Sei es um beispielsweise einen Slider (Slider vor "Mitgliedschaften") auf die ganze Seitenbreite anzuzeigen oder weil man eine optische Trennung/Hervorhebung ("Aktuelles vom Solarzholzbauer") haben will.

Genau aus diesem Grund gibt es unser "Fullwidth"-Element. So können wir den verschiedenen Bedürfnissen Rechnung tragen.

Flexibilität

Wenn Du jetzt noch immer am lesen bist, dann interessiert dich dieses Thema. Danke dafür! Es ist oft ein Thema, welchem - meiner Meinung nach - nicht genügend Aufmerksamkeit geschenkt wird. In der Konsequenz führt dies zu Frust, Mehrkosten und einer negativ behafteten Zusammenarbeit.

Falls es Dir noch nicht bewusst ist: Ich bin ein Techie. Grundsätzlich interessieren mich Dinge wie "Marketing", "Design" und auch "alles sollte aus einem Guss kommen" herzlich wenig. Trotzdem gibt es für mich nichts Schlimmeres, als wenn jede zweite Seite einer Webseite anders aussieht. Ein Widerspruch? NEIN! Ich will, dass unsere Kunden die Möglichkeiten haben (fast) alles zu machen, was sie machen wollen. Ich will aber auch, dass die Webseiten unserer Kunden sich rund anfühlen (ich schreibe bewusst nicht "schön", da dies sehr im Auge des Betrachters liegt).

Auch hier wieder ein - abstraktes - Beispiel:
Kunde A hat sämtliche Möglichkeiten und nutzt diese auch. Keine Seite sieht aus wie die Andere. Alles kann - nichts muss. Kunde B hält sich strikt an die Vorgaben, egal ob es sich um eine normale Inhaltsseite oder um einen Jubiläumsevent handelt.

Meiner Meinung nach sind beide Varianten - freundlich gesagt - suboptimal:

Kunde A hat keinen roten Faden!
Wenn ich ein Buch lese, dann erwarte ich über den gesamten Inhalt den gleichen Stil, die gleiche Grammatik und das gleiche Zeitkonstrukt. Wenn ich eine Webseite "durchklicke" will ich gewisse Referenzpunkte - unterbewusst - immer gleich haben. Beispielsweise das (Titel-)Bild der jeweiligen Seite ist grad direkt nach dem Titel, danach kommt ein Einleitungstext und danach kommen die Details. Wenn dies nicht so ist, dann fühlt sich das Ganze nicht "rund" an. Die Webseite - und somit Du als Anbieter - fühlt sich im besten Fall unprofessionell und im schlimmsten Fall unseriös an.

Kunde B macht alles immer gleich!
Kunde B macht all dies, was Kunde A falsch macht komplett richtig. Alle Elemente immer gleich, Schriftgrössen schön abgestimmt Alles super. Aber: Leider auch langweilig. Stell Dir vor, dass Kunde B einen 10 Jahres Event nach dem Motto "anders als alle anderen" macht - die Seite dazu sieht dann jedoch genau gleich aus wie 99% seiner anderen Webseiten. Laaaaangweilig! Wie cool wäre es, wenn Du für diesen *einen* Spezialfall einfach das Layout "auf den Kopf" stellen könntest. Zuerst ein paar Bilder, danach Titel, danach 2-3 Zitate und abschliessend (!) noch ein redaktioneller Beitrag. Ha! Deine Kunden wären happy! Stattdessen machst Du einen Titel, danach das Titelbild (evtl. sogar ein "falsches"), anschliessend kommt ein nichtssagender Einleitungstext (weil das muss so!) und wenn wir uns gaaaanz weit aus dem Fenster lehnen kommt danach noch ein einigermassen spannender Text. Was wählst Du?

Entscheidungen

Die soeben aufgeführten Beispiele sprechen eine deutliche Sprache! Ich würde fast wetten, dass Du....

• ...bei Kunde A der Meinung bist, dass gewisse Referenzpunkte sinnvoll sind.
• ...bei Kunde B spätestens nach der 3. Seite den Browser schliesst - einfach weil es immer wieder dasselbe und langweilig ist.
• ...bei Kunde A spätestens nach 3 Klicks den Browser schliessen würdest, weil es einfach unübersichtlich ist.
• ...bei Kunde B - sofern Du via Direktlinkt/Suchmaschine - darauf gestossen bist, die "Eventseite" zwar anschauen würdest, jedoch danach den Browser schliesst.

Stell Dir einmal vor wir könnten das Ganze mischen. Mischen heisst nichts anderes, als das BESTE aus beiden Welten vereinen. Nicht "alles" - nur das Beste. Das ist ein kleiner, aber wichtiger Unterschied. Um das zu verdeutlichen: Wenn Du älter als 30 Jahre bist, schau Dir dieses Youtube Video an - es ist ein "Mashup" von Evanescence und Linkin Park. Das ist ein tolles Beispiel wie "das beste aus beiden Welten" funktionieren kann. Wenn Du jünger als 30 Jahre bist: Fear not! Schau Dir TikTok Stitches an - da gibt es hunderte wenn nicht tausende Beispiele dafür :)

Fazit:
Es ist eine Entscheidung nötig. Willst Du Flexibilität oder nicht? Nutzt Du diese sinnvoll oder nicht?

Entscheidung!

Der vorherige Abschnitt nannte sich "Entscheidungen" - Du bist nun am Punkt wo Du dich entscheiden musst. Willst du ein starres System, welches keine Spezialfälle erlaubt oder willst Du ein System, welches Dir alle Möglichkeiten bietet?

Es ist ganz alleine DEINE Entscheidung.  Wenn Du der Meinung bist Du weisst es besser, dann mach es so - wir stehen Dir nicht im Weg. Wie erwähnt, hast Du mit unserem System (fast) alle Möglichkeiten. Tu mir einfach bitte einen Gefallen: Wenn Du keine Kunden findest oder nur 5sec Verweildauer in Deinem Google Analytics siehst: Schreib mir ein Mail!

Wenn Du - gefühlt - alles richtig machst und trotzdem keine neuen Kunden gewinnst... auch dann: schreib mir ein Mail!

Fazit

Gehen wir davon aus, Du hast Deine Webseite zwar zu 95% gleich gebaut aber trotzdem sind 5% Spezialfälle. D.h. 95% Deiner Seiten haben das gleiche Look & Feel und 5% sind "irgendwie anders". TOLL! Du hast Traffic auf Deiner Webseite und auch teilweise Anfragen - per Formular, per Mail, per Telefon - aber leider klappt's trotzdem nicht... Gut! Weil dann bin ich raus :) Ich kann Dir als Techie hunderte Tipps geben - aber nur was Deine Webseite angeht. Wenn es um kommunikative Themen geht, dann ist Mario definitiv ein besserer Ansprechpartner!

Fazit reloaded

Das klingt jetzt alles fürchterlich kompliziert. Ist es nicht!

Wichtig ist, dass DU weisst, was Du machen willst. Vertrau mir: Wir werden Dir ohne zu zögern ins Gesicht sagen, wenn wir der Meinung sind, dass Du auf dem "Holzweg" bist! Wir wollen mit Dir zusammen das BESTE für dich und Deine Kunden erreichen!

Ruf uns an, schreib uns, schreib mir - wenn Du Direkt mit einem Techie reden willst - oder komm einfach vorbei. Wir sind da und wir helfen Dir, dass Du das erreichst, was Du im Internet erreichen willst.

Schulung

Ganz zum Schluss wieder zurück zum Anfang.

Ich schrieb anfangs, dass unsere Kunden sehr viele Möglichkeiten haben. Zu dieser Aussage stehe ich zu 100%.
ABER: Es ist wichtig, dass Du als unser Kunde folgendes weisst:

• was sind meine Möglichkeiten?
• was soll ich tun und was mach Sinn?
• was sollte ich vermeiden?
• was darf ich auf keinen Fall tun (weil ich sonst riskiere dass der Techie SELBER anruft!)

Und mit diesen 4 Punkten sind wir beim Thema Schulung.

Ich glaube sehr, sehr fest daran, dass unsere Kunden durchaus in der Lage sind, zwischen "hey isch ja cool" und "hey macht vou Sinn" unterscheiden zu können. Ich weiss, dass ich als Techie meistens der "Spielverderber" bin.

Ich gebe Dir aber hier und jetzt ein Versprechen:
Wenn Du mit uns ein Projekt umsetzt, Du sowohl konzeptionell wie auch technisch mit uns zusammenarbeitest, dann wirst Du mit dem Ergebnis zufrieden sein! Es braucht sowohl dich (Du weisst wovon Du redest was Dein Produkt angeht) wie auch uns (wir wissen wie man erfolgreiche Webseiten baut). Nur Du alleine bringst genau so wenig wie nur wir alleine - lass uns zusammen ein tolles Projekt umsetzen!

Und da ich als Titel dieses Bereichs "Schulung" verwendet habe:
Eine Webseite ohne dazugehörige Schulung ist eine tote Webseite! Wenn Du nicht bereit bist dich mit Deiner eigenen Webseite und deren Weiterentwicklung auseinander zu setzen, wieso sollen dann Deine Kunden sich mit Deinem Produkt / Deiner Dienstleistung auseinandersetzen?

Ende

Ich bin 100% überzeugt - gerne auch im persönlichen Gespräch - dass, wenn Du als Kunde und wir als Dein Dienstleister toll zusammenarbeiten, wir sowohl für dich wie auch für Deine Kunden etwas Tolles erschaffen können. Nur Du, nur wir - das geht nicht.

Und darum: Wir geben Dir mit unserem cubetech Core sämtliche Möglichkeiten!

Ob Du diese Möglichkeiten verwendest und zu Deinem Vorteil nutzt oder ob Du einfach Deine Freiheit bei Deiner neuen Webseite schätzt, ist Dir selbst überlassen. Wir als Dein Umsetzungs- und Beratungspartner können Dir nur eine Empfehlung aussprechen!

Falls Du nun wirklich DEN GANZEN BEITRAG gelesen hast, hast Du sicher mindestens eine Frage, ein Bedenken oder einen Zweifel.
Melde dich bei mir und lass uns das diskutieren - im besten Fall ergänze ich danach diesen Blogpost mit Deiner Frage - win/win :)