Schluss mit dem Stochern im Nebel. Meine Sammlung praxiserprobter Website Tipps gibt Dir echte Orientierung rund um Webdesign, Strategie, Design und Technik.
Als ich noch zu Schulzeiten, so um 2001 herum, mit Webdesign angefangen habe, war die Welt noch eine ganz andere. Damals wurden Websites mit HTML-Code auf Basis von Tabellen erstellt, technisch war fast alles fix und starr (Responsiveness wurde erst mit dem Siegeszug des Smartphones ein paar Jahre später relevant) und ein vergessenes schließendes Tag (das ist so eine Klammer </>) konnte einem den ganzen Tag verderben.
Schriften beschränkten sich auf die paar systemweiten Klassiker wie Arial, Verdana oder Times, echte Webfonts kamen erst viel später. Internet Explorer war damals King und weil die meisten noch mit Modem und 56k ins Netz gingen, zählte jedes Kilobyte. Ein zu großes Bild, und die Seite baute sich quälend langsam von oben nach unten auf.
Seitdem hat sich fast alles verändert, nur eine Sache nicht: Eine gute Website entscheidet immer noch darüber, ob Menschen Dir vertrauen und bei Dir kaufen oder ob sie nach drei Sekunden schon wieder weg sind. Seit einem Jahrzehnt bin ich offiziell als Webdesignerin selbstständig und habe seitdem über hundert Websites gebaut, die meisten davon auf Basis von WordPress und Elementor.
In meinem Blog teile ich regelmäßig Tipps, wie Du Deine Website verbessern kannst. Für diesen Artikel habe ich diese zusammengetragen: Die Essenz aus vielen Stunden am Bildschirm und im Backend, aus vielen Kund:innenprojekten und aus eigenen Fehlern und Learnings. Nimm Dir raus, was Du gerade brauchst, oder spring über das Inhaltsverzeichnis direkt zu Deinem Thema.
Inhalt
Alle Anfang (auch Deiner Website) ist Strategie
Bevor Du Dir Gedanken um den Look Deiner Website machst, solltest für Dich erst einmal definieren, wofür Deine Website überhaupt da sein soll. Meine Tipps, damit Deine Website für Dich arbeitet und nicht einfach nur schön anzuschauen ist:
- Unabhängig davon, ob Du Deine Website selbst erstellen oder erstellen lassen möchtest, solltest Du Deine Webauftritt strategisch an Deinen Marketingzielen ausrichten. Diese grundlegenden Fragen solltest Du im Vorfeld beantworten können, damit Deine Website nicht nur schön, sondern auch strategisch erfolgreich wird.
- Begreif‘ Deine Website nicht als digitale Visitenkarte, sondern als Dein wichtigstes Marketinginstrument, das rund um die Uhr für Dich arbeitet. Deine Website ist 24/7 erreichbar, während bunte Instagrambildchen und Facebookposts schnell im Feednirvana verschwinden. Sie verkauft für Dich, während Du im Urlaub bist oder Zeit mit Deinen Liebsten verbringst.
- Nutz‘ Deine Startseite als digitales Schaufenster und zeig dort, was bei Dir gerade aktuell ist, statt sie einmal zu bauen und nie wieder anzufassen. Mein Standardspruch: Nur was gesehen wird, kann gekauft werden 😉
- Du musst nicht zur Vollzeit-Webdesignerin werden, aber um sie im Griff zu haben, solltest Du Dir weitergehendes Wissen aneignen (oder Dir entsprechende Unterstützung an die Seite holen).
- Rechne ehrlich nach, was Dich das ewige Selberbasteln an Zeit kostet, bevor Du es als gespartes Geld verbuchst. Meine Kundin Gabriele hat mir erzählt, dass ihre neue Website ihre Expertise endlich angemessen zeigt und sie deshalb höhere Preise verlangen kann. Das ist am Ende oft mehr wert als das Geld, das man mit Selberbasteln vermeintlich spart (und zu oft mit mehr Zeit bezahlt 😅).
- Vermeide die typischen Anfängerfehler und behandle Deine Business-Website vom ersten Tag an wie ein Werkzeug, nicht wie ein Bastelprojekt. Gerade weil einem die eigene Website so am Herzen liegt, verliert man sich leicht im Feilen an Schriften, Farben und Fotos. Dabei entscheidet weniger die Perfektion im Detail, sondern ob klar wird, welche Infos Interessierten den nächsten Schritt zu Deinem Angebot leicht machen.
- Deshalb sorg‘ dafür, dass in Sekunden klar wird, für wen Du was tust, denn eine schöne Seite ohne klare Botschaft bringt Dir keine Kund:innen. Ich spreche gerne von der 3-Sekunden-Regel: Den Besucher:innen Deiner Website muss sofort klar sein, ob Dein Angebot für sie Relevanz hat, damit sie bleiben und weiterscrollen – ansonsten sind sie – schwupps – direkt wieder weg.
- Denk‘ bei jeder Unterseite den nächsten Schritt mit und frag Dich, was die Besucher:innen hier als Nächstes tun sollen. Du willst sie aktiv führen und kannst nicht erwarten, dass sie Deine Website von selbst komplett von oben nach unten durchstöbern.
- Manchmal braucht es keinen großen Relaunch, sondern nur einen Refresh, um Klarheit, Struktur und Präsenz zurückzugewinnen. Meine Kundin Heike fand ihre Website nach dem Refresh moderner & klarer und viel leichter zu handhaben. Für sie war es genau die Unterstützung, die sie gebraucht hat 😍
Die Seiten, die wirklich zählen
Du kennst den Spruch: Papier ist geduldig. Ich setz einen drauf und sage: Das Internet ist unendlich. Was ich damit sagen will – Deine Website kann unendlich breit oder tief werden. Sie muss aber nicht von Anfang an riesig sein, sondern darf mit der Zeit wachsen. Hier ein paar Seiten, von Anfang darüber entscheiden können, ob jemand bleibt oder wegklickt:
- Behandle Deine Startseite wie das Cover Deiner Website und verbinde Angebot, Persönlichkeit und einen klaren nächsten Schritt.
- Gestalte jeden Hero-Abschnitt so, dass in unter drei Sekunden klar ist, worum es geht, und zwar auf jeder Unterseite, nicht nur auf der Startseite.
- Strukturier‘ Header und Menü so, dass sie Orientierung geben statt zu überfordern, und wirf raus, was niemand braucht.
- Schreib‘ Deine Über-mich-Seite für Deine Wunschkund:innen und nicht als Lebenslauf, denn sie ist eine der meistbesuchten und vertrauensbildendsten Seiten überhaupt. Kleines Geständnis: Meine ist nach wie vor fast leer, weil der Entwurf (Über mich-final-Versuch-47-jetzt-aber.doc) nach wie vor in der Schublade liegt 🙈 Schuster, schlechte Leisten, ich weiß … Vielleicht der beste Beweis dafür, wie leicht ausgerechnet die eigene wichtigste Seite liegen bleibt, wenn man ständig an den Websites anderer arbeitet.
- Bau‘ Deine Angebotsseite mit klarer Struktur, echten Nutzenargumenten und visuellen Ankern, damit aus Interesse eine Anfrage wird.
- Zeig‘ in Portfolio und Case Studies echte Ergebnisse statt hübscher Bildchen, denn Vertrauen entsteht über Belege. Ich sehe immer wieder, wie Kund:innen genau deshalb Anfragen bekommen, weil sich Besucher:innen in einer Case Study wiedererkannt oder gedacht haben: „Das will ich auch!“.
- Fokussier‘ Deine Landingpage mit der Rule of One auf ein Ziel, ein Angebot, eine Handlung.
- Mach es auf Deiner Kontaktseite so leicht wie möglich, Dich zu erreichen, und gib das gute Gefühl, hier melden zu dürfen.
- Verschenk‘ Deine Danke- und Fast-fertig-Seiten nicht, sondern bestätige die Aktion und weis klar auf den nächsten Schritt hin.
- Präsentier‘ Deine Blogseite und Dein Archiv so, dass Leser:innen leicht mehr von Dir entdecken. Nur was gesehen wird, kann auch gelesen werden.
- Verwandle Deine 404-Fehlerseite von einer Sackgasse in einen charmanten Wegweiser zurück in Dein Angebot.
Design, das wirkt
Wenn Strategie und Inhalte stehen, darf es gerne so richtig hübsch werden, aber bitte mit System. Mein Tipps dazu:
- Leg‘ globale Schriften in Elementor einmal sauber fest, statt sie Seite für Seite zu überschreiben und einen Flickenteppich zu erzeugen. Nichts ist nerviger, wenn Du eine Schriftgröße änderst und diese manuell auf zwanzig Unterseiten einzeln anpassen musst.
- Setz‘ auf Fluid Typography, damit sich Deine Schriftgrößen stufenlos an jedes Gerät anpassen.
- Verhindere hässliche Wortumbrüche und einsame Zeilen mit ein bisschen CSS für Silbentrennung und Textausbalancierung.
- Bring‘ mit CSS Ordnung in Aufzählungen und Nummerierungen, statt Dich mit den lieblosen Standard-Listen abzufinden.
- Heb‘ wichtige Textstellen gezielt wie mit einem Textmarker hervor, aber sparsam, sonst verpufft die Wirkung.
- Entferne den überflüssigen Abstand nach dem letzten Absatz im Text Editor, der so viele Layouts unruhig macht.
- Setze Animationen gezielt und dezent ein, denn auch hier gilt Qualität vor Quantität, sonst wird Deine Seite zum Jahrmarkt – alles blinkt und leuchtet und buhlt um Aufmerksamkeit. Ich sage immer: Bloß, weil Du es animieren kannst, musst Du lange noch nicht 😉
- Gib einem 08/15-Layout mit überlappenden Elementen und negativen Margins einen echten Wow-Faktor. Manchmal haben die kleinsten Anpassungen die größte Wirkung.
- Lockere starre Raster mit einem Bento Grid auf, wenn Du ein modernes, aufgeräumtes Layout willst.
- Mit saisonalen Spielereien wie dem Schneeflocken-Effekt kannst Du Deine Website an die Jahreszeit anpassen. Achte aber hier auch darauf, diese nur gezielt und vereinzelt als Highlight einzusetzen.
- Gönn‘ Dir selbst ein optisches Schmankerl und gestalte Deine WordPress-Loginseite, denn auch kleine Details zahlen auf ein rundes Markenbild ein.
Elementor und WordPress ohne Chaos
Während ich Webdesign noch mit HTML und CSS gelernt habe, sind WordPress und Elementor inzwischen meine Tools der Wahl. Meine Tipps für ein optimales Zusammenspiel:
- Leg‘ beim Start mit Elementor zuerst Struktur und Designsystem an, bevor Du die erste Seite baust. So gehst Du nicht im Elementor Dschungel verloren und arbeitest dabei von Anfang an so effizient wie möglich. Ein fremdes Theme brauchst Du mit Elementor Pro, das eigene Hello-Theme kommt als weiße Leinwand, weil Du alle Einstellungen bei Elementor machst.
- Entscheide bewusst zwischen Elementor und Block Editor, statt alles in den Pagebuilder zu zwingen.
- Schreib Blogartikel im Block Editor und spiel sie über ein Elementor Template aus, statt jeden Beitrag einzeln zu bauen.
- Kombinier‘ Block Editor und Elementor so, dass Du Designfreiheit bekommst, ohne die Performance zu opfern, also das Beste aus beiden Welten hast.
- Elementor und Elementor Pro bieten Dir jede Menge Widgets. Mache Dich damit vertraut, was welches Widget genau kann bzw. macht.
- Verzichte auf performance- und datenschutzkritische Widgets, wenn eine schlanke Lösung denselben Zweck erfüllt.
- Die Zukunft heißt Elementor V4 und Atomic Design. Aber no Stress, Du musst Deine Seite (noch lange) nicht neu bauen.
- Steuere mit dem Plugin Dynamic Visibility, welche Inhalte wann erscheinen, etwa für zeitlich begrenzte Aktionen.
- Pflege Dein aktuelles Angebot über einen Shortcode zentral an einer Stelle und spiel es in allen passenden Beiträgen aus.
- Falls Du noch die „alten“ Elementor Startseiten (aka Landingpages) nutzt, wird es jetzt echt Zeit, die auf normale Seiten umzuziehen.
- Bau Dir einen mitscrollenden Header, der auch mit großem Logo elegant bleibt.
- Setz die Elementor Galerie per Shortcode auch im Block Editor ein, statt Dich für eine Welt entscheiden zu müssen.
- Setz Ankerlinks, um gezielt auf einzelne Abschnitte einer Seite zu verlinken, denn gerade auf langen Seiten ist das Gold wert.
- Gönn‘ Deinen Besucher:innen auf langen Seiten einen Back-to-Top-Button für mehr Bequemlichkeit.
- Bau Dir Deinen eigenen Linktree auf der eigenen Domain, statt Reichweite an fremde Dienste zu verschenken.
- Weise mit einem dezenten Video Pop-up charmant auf Dein Angebot hin, ohne aufdringlich zu wirken.
- Zeig Pop-ups abhängig von der URL, damit Deine Freebies und Hinweise zur jeweiligen Seite passen.
- Halt Dein Angebot mit einem sichtbaren Banner präsent, denn nur was gesehen wird, kann gebucht werden.
- Verwandle einen Google-Drive-Link in einen echten Ein-Klick-Download für eine bessere User Experience.
- Tausch Bilder über die Media-Funktion aus, ohne die URL zu ändern, damit keine Links und kein SEO brechen.
- Lass die Copyright-Info im Footer sich automatisch aufs neue Jahr aktualisieren, statt sie jeden Januar von Hand zu ändern.
- Halt Ordnung im WordPress-Backend, damit Du schneller arbeitest und Dich nicht jedes Mal neu zurechtfindest. Eines meiner absoluten Pet Peeves (etwas, das einen persönlich extrem stört, für andere aber oft trivial ist) – unnötiges Chaos im Backend 🤮
- Formatiere Deine in Word oder Google Docs geschriebenen Texte mit ein paar Hacks vor, um sie in Sekunden perfekt formatiert in den Block Editor zu kopieren.
- Du willst professionell bloggen? Nutze fertige Bausteine für Deine Blogbeiträge, um schneller für Struktur, Design und Funktion zu sorgen.
Performance und Ladezeit bringen Tempo rein
Eine langsame Seite verliert Menschen, bevor sie Deinen ersten Satz gelesen haben. Meine Tipps, um mehr Tempo aus Deiner Website zu holen:
- Schneide Bilder vor dem Hochladen auf die Größe zu, in der sie tatsächlich ausgespielt werden, und komprimiere sie danach. Zu große Bilder sind der Speicherplatzfresser Nummer eins und in meinen Kund:innenprojekten fast immer die erste Stelle, an der ich beim Thema Ladezeit fündig werde.
- Prüf mit dem Inspect-Tool des Browsers, in welcher Größe ein Foto real angezeigt wird, bevor Du es aufbereitest.
- Achte auf Dateiformat, Dateiname und Alt-Text, denn Bildoptimierung ist Performance und SEO in einem.
- Lade Hintergrundvideos erst nach Interaktion oder per Lazy Loading, statt sie sofort mitzuschleppen.
- Setze schwere Effekte und Animationen nur dosiert ein, weil jede Spielerei Ladezeit kostet.
Eine Website für wirklich alle
Barrierefreiheit ist ein Thema, das mir sehr am Herzen liegt. Die folgenden Tipps lösen nicht alle Accessibility Probleme, sind aber schon ein guter Anfang:
- Der wichtigste Tipp vorneweg: Fang bei der Barrierefreiheit einfach an, Schritt für Schritt, statt vor der vermeintlich riesigen Aufgabe zu kapitulieren. Manchmal können kleine Verbesserungen schon große Wirkung zeigen.
- Versteh‘ Barrierefreiheit nicht als lästige Pflicht, sondern als Marketing-Booster, der mehr Menschen erreicht statt sie auszuschließen.
- Wähle gut unterscheidbare Schriften, bei denen sich Zeichen wie großes I, kleines l und die Eins klar auseinanderhalten lassen.
- Erzeuge Buchstabenabstände nie über eingefügte Leerzeichen, sondern über die Letter Spacing-Eigenschaft, sonst zerlegt der Screenreader das Wort.
- Prüfe Deine Farbkontraste mit einem Tool, statt Dich auf Dein Auge zu verlassen. Super wichtig für die Lesbarkeit Deiner Texte.
- Verlass‘ Dich bei Links nie allein auf die Farbe, sondern mach sie zusätzlich klar als Link erkennbar.
- Schreibe sprechende Linktexte wie „zum Anmeldeformular“ statt „hier klicken“, damit auch aus dem Zusammenhang gerissen klar bleibt, wohin sie führen. Nichts nervt Menschen, die auf Screenreader u.Ä. angewiesen sind mehr, wie wenn alle Links „Hier“ heißen 😂
- Optimiere die Weiterlesen-Links Deiner Blogübersicht, damit Screenreader-Nutzer:innen wissen, was sich dahinter verbirgt.
- Mach Deine Seite komplett per Tastatur bedienbar und teste das selbst einmal nur mit der Tab-Taste.
- Gestalte Fehlermeldungen mit klarem Text und einem eindeutigen Icon, nicht allein über die Farbe Rot.
- Beschrifte jedes Formularfeld mit einem echten Label statt nur mit einem Platzhalter, der beim Tippen verschwindet.
- Gib nach dem Absenden eines Formulars eine klare Rückmeldung, was gerade passiert ist.
- Vergib aussagekräftige Alt-Texte für Deine Bilder, damit sie für Screenreader und Suchmaschinen lesbar werden.
- Ergänze Videos und Audios um Untertitel und Transkripte, denn das ist barrierefrei und SEO-stark zugleich.
- Setz Hintergrundvideos barrierearm ein und liefere die wichtigen Inhalte zusätzlich als Text.
Vertrauen aufbauen und aus Besucher:innen Kund:innen machen
Deine Website soll Dich dabei unterstützen, bei Besucher:innen Vertrauen aufzubauen und sie in Interessierte zu verwandeln, denen der nächste Schritt leicht fällt. Mit diesen Tipps kannst Du aus Besuch Kundschaft machen:
- Menschen kaufen von Menschen, denen sie vertrauen. Der Know-Like-Trust-Faktor – ein Prinzip, das gerade für Selbstständige den Unterschied zwischen Erfolg und Misserfolg ausmachen kann – ist dabei ein ausschlaggebender Faktor.
- Lass‘ mit Social Proof, Trust Signals und Testimonials andere für Dich sprechen, statt Dich selbst zu loben.
- Formuliere Deine Call-to-Actions als konkreten nächsten Schritt und achte bewusst auf Buttontext, Formulierung und Position.
- Setz‘ Videos ein, um die Verweildauer zu erhöhen und Persönlichkeit zu zeigen, aber behalte dabei Ladezeit und Barrierefreiheit im Blick.
- Gestalte Formulare so einfach und verständlich wie möglich und frag nur ab, was Du wirklich brauchst.
- Beachte beim Formular Widget die Best Practices für Kontakt- und Anmeldeformulare, damit mehr Menschen sie auch ausfüllen.
- Gewinne mit einem attraktiven Lead Magnet neue Newsletterabonnent:innen, statt auf gut Glück um Anmeldungen zu bitten.
- Baue mit Ressourcen wie Checklisten und Templates Vertrauen auf und sammle nebenbei neue Kontakte für Deine Liste.
- Wenn Du Endverbraucher:innen verkaufst, richte den gesetzlich nötigen Widerruf sauber ein, denn Vertrauen entsteht auch über Rechtssicherheit.
Am Ball bleiben
Eine Website ist nie wirklich fertig. Diese Tipps sorgen dafür, dass sie auch in einem Jahr noch rundläuft.
- Spiel WordPress-Updates in der richtigen Reihenfolge ein, statt blind auf „alles aktualisieren“ zu klicken. Mir hat gerade erst das Caching Plugin die eigene Website zerschossen, weil es mit dem WordPress Update nicht kompatibel war. Es passiert also auch den Profis 😁
- Halt Deine Website konsequent aktuell, denn ein vernachlässigtes System rächt sich irgendwann. Und dann helfen auch keine Updates mehr, sondern die einzige Lösung lautet platt machen und neu bauen.
- Teste große Änderungen zuerst auf einer Stagingsite, bevor Du sie live schaltest.
- Kümmer Dich um den Mailversand Deiner Website, damit Kontaktanfragen nicht unbemerkt im Nirwana verschwinden. Wenn Du Glück hast, meldet sich eine Interessierte, wenn sie auf ein ausgefülltes Kontaktformular nichts von Dir hört. Wenn nicht, können Dir wochen- oder monatelang Anfragen durchrutschen – autsch.
- Nutze KI auf Deiner WordPress-Website als Unterstützung, aber behalte die Kontrolle über Inhalt und Qualität. Ich nutze KI jeden Tag, aber würde ihr nie vollen Zugriff auf meine live Website geben.
- Mach Deine Website vor dem Urlaub startklar, damit Blog, Newsletter und Verkäufe auch ohne Dich weiterlaufen.
- Und gönne ihr nach Deiner Rückkehr einen kurzen Check, etwa 20 Minuten mit einem Kaffee, statt sie erst wieder im Notfall anzufassen.
- Versteh Deine Website als etwas Lebendiges, denn sie ist nie fertig, und genau das ist gut so. Denn Deine Website darf mit Deinem Business mitwachsen und Dich immer wieder auf neue Art unterstützen.
Und jetzt Du
Über neunzig Tipps sind schön, aber vielleicht denkst Du gerade: Das will ich alles gar nicht selbst machen. Genau dafür bin ich da. Wenn Du Deine Website lieber in erfahrene Hände geben möchtest, statt weiter zwischen Widgets und CSS zu jonglieren, dann lass uns reden. In einem kostenlosen Kennenlerngespräch schauen wir gemeinsam, was Deine Seite wirklich braucht und wie ich Dich dabei unterstützen kann.
Zuletzt geprüft im August 2026. Diesen Artikel erweitere ich regelmäßig um neue Tipps.