Content first oder Mobile first?

Laut Insidern so diskutiert wie Pizza mit Ananas oder Nutella auf Butter

Susanne Stenshorn | 03.04.2023
Lesedauer: ca. 00:02:26 | Schwierigkeit: Leicht

Was ist das Wichtigste an einer Website und womit fängt man an? Den Inhalten? Dem Design? Der mobilen Version? Das ist in meiner Welt (außerhalb der Baukästen) ein großes Thema. Hier streiten sich die Geister. Die Diskussionen sind hitzig wie die Sportfans bei Schalke gegen Bayern oder die Fastnachtsjecken bei „Alaaf“ oder „Helau“.

WordPress Fenster zum Beiträge erstellen
WordPress: Fenster indem Beiträge erstellt werden.

Fangen wir damit an zu erklären, warum dieses Thema für Baukasten-Fans unwichtig ist. Im Baukasten ist das Design stark begrenzt. Du kannst die Grenzen zwar dehnen, aber irgendwo ist Schluss. Darum ist das Thema Design vom Tisch. Mobil und Desktop werden vom Baukasten automatisch verbunden und müssen nur minimal (oft nicht mal das) angepasst werden. Hier kann der Designer einfach in der Ansicht arbeiten, die ihm am besten liegt.

Codest du deine Website (wie ich auch) ist das ganz etwas komplizierter. Hier hat jede Seite gute und schlechtere Argumente.

So soll das Design zum Beispiel den Content nur unterstützen also muss der Content zuerst stehen. Oder die Websites werden heute eh meist mobil besucht, da ist die mobile Ansicht viel wichtiger als die Desktopansicht.

Das geht noch ewig so weiter, aber wir lassen es bei den beiden. Denn eine große Schwäche haben alle Argumente. Am Ende muss sowieso alles stehen. Und unter uns: Mir ist es egal ob eine Website zuerst entworfen, mobil gecodet oder für den Desktop gemacht wurde. Hauptsache sie klappt und macht Spaß.

Das ist wahrscheinlich nicht die eine richtige Lösung, die du gesucht hast. Aber die gibt es auch nicht. Welchen Ansatz du verfolgst und wie du am effizientesten arbeitest und so dass es dir am meisten Spaß macht, musst du selbst herausfinden. Das ist das Spannende am Coden. Jeder macht es anders und trotzdem versteht jeder jeden.

Damit der Beitrag hier vielleicht doch hilfreich ist verrate ich dir noch wie ich vorgehe. Ich mache es nämlich nochmal anders. Vision first – könnte man das nennen.

Beispiel Code
Codebeispiel (von mir) um Content zu erstellen.

Zuerst entwickle ich (mit Kunde im Idealfall) eine Vision. Die Geschichte der Website sozusagen. Storytelling das sich in Design und Texten wiederfindet. Dann läuft alles parallel. Das Grundgerüst für meine Illustrationsbasierten Websites steht schon (nutze ich immer wieder) und ist sehr flexibel gehalten. Ich arbeite mit dem Flex-Model (flexible Boxen für den Inhalt – das System wird auch von den meisten Baukästen verwendet) und so werden Inhalte, die ich einbaue, schon sehr gut an alles angepasst. Im Grunde habe ich mir meinen eigenen Baukasten erschaffen. Nur ohne Grenzen und super individuell für meine Projekte.

Content und Design wachsen zusammen. Nicht gegeneinander sondern miteinander. Ein bisschen wie eine Kletter-Pflanze, die langsam mit dem Gitter, an dem sie klettert, verschmilzt. Am Anfang sind es einzelne teile die komisch aussehen, aber nach und nach wird eine wunderschöne Geschichte draus. Jedes Website-Element hat seine tiefere Bedeutung und ist ein wichtiger Teil des großen Ganzen.

Ich persönlich kann Geschichte besser in der Desktop-Ansicht erzählen. Darum code ich zuerst hier. Wenn die Seite dann steht schaue ich wo ich mobil etwas wegkürzen kann und passe die mobile Ansicht an.

Dieser Vorgang wird dann für jede Unterseite wiederholt. So ist auch jede Unterseite individuell. Ein eigenes Kapitel, quasi. Das klingt aufwendig, und ist es auch, aber das Ergebnis lohnt sich.

Und so code ich meine Websites. Durchdacht, kreativ und mit Spaß.


Die Bilder sind ein vereinfachtes Beispiel. Gecodet wird das Layout im Stylesheet und bei WordPress gibt es unzählige Fenster um verschiedene Dinge einzustellen.