Website Aufbau – Welches Design soll deine neue Website haben?

Beim Website Aufbau gilt heutzutage Mobile first.

2022 betrug der Anteil mobiler Endgeräte 85 %. Eine mobil optimierte Website ist daher zwingend erforderlich, denn Google nutzt Informationen, die auf der mobilen Version einer Website gefunden werden, um die Suchergebnisse zusammenzustellen.

Weil deine Website in jedem Gerät ein bisschen anders dargestellt wird, ist der Aufbau einer Website seit der Verbreitung von Smartphones und Tablets komplizierter als früher: Auf einer responsiven Website werden die Elemente a) skaliert und b) verschoben: Je nach Größe des Bildschirmes bildet der Browser die Elemente untereinander oder nebeneinander ab und – je nach zur Verfügung stehendem Platz – kleiner oder größer. Die Schrift ist meist gut lesbar, und die Länge einer Zeile entspricht der Breite des Bildschirmes – hochkant ist die Lauflänge schmaler als quer. Auf dem Smartphone sieht man alle Elemente untereinander.

Website Aufbau: Boxed oder Widescreen macht wenig Unterschied – außer auf dem Desktop.

Einen spürbaren Unterschied macht die Entscheidung, ob man lieber Boxed oder Widescreen mag, nur auf dem Desktop. Dort sieht man auch den Hintergrund einer Boxed-Seite. Auf kleineren Monitoren bildet der Browser das Hintergrundbild meist nicht ab.

Die Hauptnavigation ist auf mobilen Geräten oben.

Egal, wie man die Website gestaltest: Der Benutzer erwartet die Navigation oben. Bei neuen Projekten verbirgt sie sich auch auf größeren Monitoren hinter dem sogenannten Hamburger-Menü: drei übereinander liegende horizontale Striche. Klickt man auf die drei Striche, öffnet sich eine Liste mit den Unterseiten. Alle wichtigen Angebote müssen direkt dort erreichbar sein, sonst wird der Benutzer ungeduldig. Und klickt die Seite wieder weg.

Soll der Header ein Hintergrundbild haben?

Der Gestaltungsspielraum beim Website Aufbau ist trotzdem recht hoch, wie dir meine zahlreichen Projektbeispiele zeigen. Wir können immer noch einen farbigen Header und Footer haben oder mit einem Hintergrundbild arbeiten. Das Menü kann unterhalb des Logos stehen oder daneben. Das Menü kann sogar unterhalb eines Fotos stehen, wenn du dies möchtest, und statt eines Fotos kann ich einen Film einbetten.

Ich verwende beim Website-Aufbau im Wesentlichen die folgenden Versionen:

Boxed Classic:

Sandra Borm

Bei diesem Website Aufbau wird ein Bild oder eine Farbe als Hintergrund verwendet, aber auf kleineren Geräten (Laptop, Tablet und Handy) sieht man den Hintergrund nicht mehr. Die Navigation geht nicht über die gesamte Breite, sondern endet an den beiden Kanten. Der Fußbereich kann dunkel oder hell sein und geht ebenfalls nur bis zur Kante.

Widescreen I:

Bei dieser Website läuft auf jeder Seite ein eigenes Panorama-Foto über die gesamte Bildschirmbreite. Das Foto ist als festes Bild eingebaut, so dass es sich bei kleineren Bildschirmen einfach 1:1 verkleinert. Der Kopfbereich enthält links das Logo und rechts die Navigation. Dies funktioniert, wenn es nicht zu viele Menüpunkte gibt, die in einer Reihe stehen müssen. Kopf- und Fußbereich sind gefärbt oder mit einem Hintergrundbild ausgestattet.

Der Nachteil von Widescreen-Formaten ist, dass man bei der Auswahl von Fotomaterial eingeschränkt ist: Die Bildaussage muss in einen schmalen Ausschnitt passen (Briefkastenschlitz), damit der Besucher sieht, dass unter dem Foto noch Text steht. Wenn du selbst Fotos schießen lässt, muss der Fotograf ein Weitwinkelobjektiv benutzen. Lies auch diesen Artikel zum Bildausschnitt.

Widescreen II:

Wie Widescreen I, aber hier ist das Panorama-Foto nicht als Bild eingebaut, sondern als Hintergrund. Dadurch kann man vor dem Foto Text einblenden, aber man muss das Foto 3x einbauen (für drei Bildschirmgrößen) und jeweils festlegen, wie viel davon zu sehen ist. Ein weiterer Unterschied ist, dass ich bei diesem Website Aufbau mit Content Boxes gearbeitet habe („Meine Säulen in der Therapie“). Unten (nicht im Bild zu sehen) gibt es einen Teaser mit Foto zum Profil.

Widescreen III:

Website Aufbau

Nicht immer muss eine Widescreen-Seite Fotos enthalten, die über die gesamte Bildschirmbreite gehen. Auf dieser Website haben wir mit kleinen Fotos gearbeitet. Bei diesem Modell kannst du leicht selbst Seiten anlegen, weil du die entsprechenden Fotos nur kleinrechnen, aber nicht zuschneiden musst.

Widescreen IV:

Marketing Heilpraktiker

Hier ist alles Widescreen: Nicht nur das Hauptfoto, sondern alle Elemente nutzen die ganze Bildschirmbreite.
Dieser Aufbau ist etwas anspruchsvoller als die oberen Variationen, weil ich die Fotos als Hintergrundbilder eingebaut habe. Je nach Bildschirmgröße verschiebt sich der Bildausschnitt, so dass ich ihn für jedes Foto gesondert anpassen muss.

DAS SAGEN KUNDEN:

Es hat mir wahnsinnig viel Spaß gemacht mit Frau Albrecht meine Webseite, Flyer und die Logogestaltung. Ich hatte das Gefühl, dass sie sich sich auf eine ungewöhnliche Art und Weise in meine Vorstellungen hineinversetzen konnte. Wir kamen immer schnell zum Ziel. Die Texte sind wunderbar geschrieben, so dass mich meine Patienten oft daraufhin ansprechen. Ich kann Ihre Leistung uneingeschränkt weiter empfehlen. Vielen herzlichen… Read more „“

Marina Hirsch-Sanders, Heilpraktikerin

Ich wollte dir schon lange die Rückmeldung zu unserer Webseite geben: Immer wieder bekomme ich Klienten, die sagen, ich habe die Homepage gesehen und ich habe gewusst, das passt, da muss ich hin. Und mit diesen Menschen klappt die Zusammenarbeit tatsächlich hervorragend, da muss ich dann immer an deinen Briefing-Fragebogen (oder wie man das nennt? ) denken. Also echt,… Read more „“

Maria Pollack
Melanie Göttner

Genau diese Art der intensiven Betreuung habe ich gesucht. Liebe Michaela, unsere Zusammenarbeit begann im Februar 2014. Zum Glück hast Du erst mal Ordnung in mein inneres und äußeres Chaos gebracht: Deine sensible und einfühlsame Art, mit Menschen umzugehen, hat mich dazu bewegt, Dir mein erstes Grundgerüst der Internettexte einfach ungeordnet zuzusenden! Das würde ich normalerweise niemals tun. Das war mein erster Lernschritt und ich bin froh, dass es so… Read more „“

Melanie Göttner, Heilpraktikerin für Psychotherapie

Es war von Anfang an eine sehr klare, kompetente und einfühlsame Führung durch den ganzen Prozess. Gleichzeitig war es für mich auch eine kreative Freude mit Michaela Albrecht zusammen zu arbeiten. Ich kann sie nur empfehlen als… Read more „“

Gerda Huber-Rieger, spirituelles Mentoring & Ernährungsberatung

Nach einem langen Weg, den Michaela immer zugewandt und kompetent mit mir gegangen ist, hat sich nun ein kleines Wunder für mich erfüllt. Mein Traum von einer eigenen Praxis hat ein wunderschönes, fundiertes und leicht zugängliches Gesicht bekommen in Website und Printmedien. Die Werbung für meine Praxis ist nicht nur ästhetisch ein Traum, sondern auch dank der Zusammenarbeit mit Frau Oberhofer sicher(er) vor Abmahnungen und auf dem neuesten DSGVO-Stand. Michaelas… Read more „“

Dr. Anne Splettstößer, Ayurveda & Yoga

Ich bin happy! Mein Wunsch war es, eine übersichtliche und mich gut repräsentierende Homepage zu erhalten und dabei auch bei technischen Fragen unterstützt zu werden. Michaela hat meine Bedürfnisse verstanden und sehr kompetent und einfühlsam umgesetzt. Danke dafür!… Read more „“

Sandra Borm, Heilpraktikerin für Psychotherapie

Liebe Michaela, es war mir ein große Freude, mit Dir zusammenzuarbeiten. Schon beim ersten Telefonat war ich von Deiner offenen und unkomplizierten Art die Themen anzugehen begeistert. Mit hoher fachlicher Kompetenz und großem Einfühlungsvermögen hast Du es geschafft aus meinen Ideen und Vorstellungen eine Homepage zu gestalten, die mich immer wieder aufs Neue begeistert. Auch die auf Basis der Homepage gestalteten Flyer sind super gestaltet und entsprechen voll meinen Vorstellungen.… Read more „“

Bärbel Straßer, Massagen und Energiearbeit

Liebe Frau Albrecht, vielen Dank für Ihre Beratung und der mir entsprechenden Umsetzung meiner Webseiten! Auch wenn Klienten noch nicht so klar in ihren Zielen sind oder nicht wissen, wie ein Text zu formulieren ist, so finden Sie bei Ihnen eine tolle Begleitung und Unterstützung. Sie haben die Gabe, sich individuell auf Menschen einzustellen und mit Achtsamkeit und Respekt mit Ihren Ideen zu begleiten. Mich hat Ihre Vielseitigkeit, Transparenz und… Read more „“

Nadine Maier, Heilpraktikerin und Coach

17 Jahre konnte ich mich nicht zu einer Website durchringen. Jetzt ist durch Michaela Albrecht endlich das Undenkbare sehr professionell realisiert worden. Ich habe diese Zusammenarbeit als intensiv, informativ und stets liebevoll zugewandt sowie sehr professionell erlebt. Auch die Wahrung des juristisch Erlaubten ist mir im Laufe des Entstehungsprozesses besonders klar geworden, was ich sehr zu schätzen weiß. Ich würde mich immer wieder für Frau Albrecht… Read more „“

Konstanze Molck, Heilpraktikerin

Frau Albrecht war und ist weiterhin meine Adresse für das Marketing rund um meine Heilpraktikerpraxis. Von der Entwicklung eines Logos, über die Erstellung meiner Website bis hin zu Flyern etc. Die Zusammenarbeit ist angenehm unkompliziert und absolut professionell – sehr… Read more „“

Sabine Bramsiepe

Ich hätte mir keinen besseren Webdesigner für mich vorstellen können. Liebe Michaela, vielen Dank für alles, ich bin total glücklich mit meiner Webseite! Ich fühle mich von ihr repräsentiert, ich bin sicher, dass die Texte, die ich geschrieben habe, nach deinen Jonglierkünsten konform mit dem Heilmittelwerbegesetz sind, ich hatte das Gefühl, dass meine Wünsche und Bedürfnisse jederzeit ein offenes Ohr bei dir fanden, und du umgesetzt hast, was nur irgend… Read more „“

Birgit Beckherrn, Heilpraktikerin

Michaela hat meine Seite großartig gestaltet! Vor allem aber, hat sie mich in dem Prozess begleitet mich zu finden, Worte zu finden mich selbst darzustellen und vorzustellen. Sie hat die richtigen Fragen gefragt und in den wichtigen Momenten einen kühlen Kopf bewahrt als ich unsicher war ob etwas so richtig ist. Ich kann ihr gar nicht genug danken und sie weiter empfehlen. Zudem ist sie ein so feinfühliger, liebevoller herzlicher… Read more „“

Heike Maier
Susanne Zulauf

Wow, ich bin noch ganz erfüllt und auch stolz von meiner neuen Seite, die nun fertig ist. Viele meiner engeren Freunde wussten wie lange ich an einer neuen Website für frauenheilkundliches geschrieben, gegrübelt, gestaltet habe, um es immer wieder über den Haufen zu werfen. Ich hatte mich verändert, andere Methoden, noch intensivere Schwerpunkte für die Frauenheilpraxis kreiert, da war meine alte Seite nicht mehr passend. Aber ich bastelte alleine herum,… Read more „“

Susanne Zulauf, Heilpraktikerin

Besonders gefiel mir Frau Albrechts Besonnenheit und stets positive Sichtweise.

Ich habe aufgrund einer Empfehlung aus meinen Bekanntenkreis Kontakt zu Frau Albrecht aufgenommen und habe es nicht bereut. Die Zusammenarbeit war unkompliziert und immer verlässlich. Wir haben uns zunächst auf die Namensfindung konzentriert und dabei eng abgestimmt, bis wir beide der Meinung waren, das Richtige gefunden zu haben. Besonders gefiel mir Frau Albrechts Besonnenheit und stets positive Sichtweise. Nach 6 Monaten mal mehr und mal weniger intensiver Zusammenarbeit ist eine… Read more „Besonders gefiel mir Frau Albrechts Besonnenheit und stets positive Sichtweise.“

Barbara Täte, conecto Karriereberatung

Vielen Dank für die gute Zusammenarbeit und den stets netten und konstruktiven Kontakt! Ich bin froh, daß ich Sie mit der Erstellung meiner Homepage beauftragt habe. Meine Patienten und Bekannten haben die Homepage sehr… Read more „“

Carina Keil, Heilpraktikerin

Michaela Albrecht habe ich als höchst kompetent erlebt, geduldig, humorvoll, strukturiert, kreativ, engagiert, authentisch und auf dem aktuellsten Wissensstand zum Thema Online Marketing und SEO. Ich bin mehr als zufrieden mit meiner neuen Webseite und werde häufig auf diese… Read more „“

Maria Codreanu, Heilpraktikerin

Ich bin mit allem sehr zufrieden. Sie macht ihre Arbeit wirklich sehr gut. Man merkt, dass im Vordergrund die Zufriedenheit ihrer Kunden steht. IMMER WIEDER… Read more „“

Maurice Johnson, Heilpraktiker

Ich bin mit der Website, die Frau Albrecht mir erstellt hat, sehr glücklich und zufrieden. Frau Albrecht ist eine absolut versierte und kompetente Fachfrau, die sich technisch bestens auskennt. Mir persönlich hat auch ihre kreative Art sehr angesprochen, da ich sehr hohe ästhetische Anforderungen an meine Seite stellte. Ich konnte sie alles fragen, und bekam stets ein sehr ehrliches Feedback, was mir weitergeholfen hat. (Frau Albrecht fragt auch direkt zu… Read more „“

Friederike Müller

Liebe Michaela, es war einfach wundervoll wie spielerisch und leicht du meine Internetseite entwickelt hast. Ich hatte das Gefühl, wir sind gemeinsam zu den Delfinen geschwommen und du hast alles umgesetzt, was wir erlebt haben. Ich möchte mich aus tiefsten Herzen bei dir und der geistigen Welt bedanken, dass ihr mich so unterstützt habt und so mein Projekt in die Welt getragen habt. In tiefer Verbundenheit Angelika Thaler (Die Website… Read more „“

Angelika Thaler, Energiearbeit

Vielen Dank für deine professionelle und zugleich wertschätzende Art und Weise, die unsere Zusammenarbeit für mich so bereichernd gemacht hat. Ich danke dir, dass du mich durch diesen für mich oftmals schwierigen Prozess so unterstützend begleitet hast. Die Zusammenarbeit mit dir und das Erstellen meiner Seite hat mich sehr bereichert. Ohne dich wäre vieles für mich so nicht möglich gewesen. Meine Website gefällt mir, und von denen, die sie besuchen… Read more „“

Heike Rahden, Systemischer Coach

Ein von Herzen kommendes Dankeschön! Frau Albrecht hat mir eine wirklich schöne Webseite erstellt, die so gut zu mir und meinem Wesen passt. Meine zunächst doch recht nebulösen Wünsche und Vorstellungen hat Frau Albrecht aufgenommen und Klarheit und Struktur in mein Kuddelmuddel gebracht. Es war mir eine Freude mit Frau Albrecht zu arbeiten. Ihre unendliche Geduld und ihre Motivation und unaufdringliche Zielstrebigkeit haben mir sehr gut getan. Frau Albrecht erklärte… Read more „“

Susanne Mingers

Vielen lieben Dank, ich bin jetzt mit meiner Website sehr zufrieden! Nach langem Suchen im Netz bin ich auf Michaelas Seite gestoßen. Mich hat sofort die authentische Art ihrer Website angesprochen. Dies hat sich auch schon im ersten Telefonat mit Michaela bestätigt. Es gibt kein langes „drum herumreden“. Damit hat sie es geschafft mein volles Vertrauen zu erhalten. Mit dieser Basis sind wir in den Prozess gegangen und haben gemeinsam… Read more „“

Martin Beck