Wenn du das Divi Theme nutzt und über das Blog Modul deine Blogartikel darstellst, sieht das Datum standardmäßig nicht so schön aus:
Erst kommen die ersten 3 Buchstaben vom Monat, gefolgt vom Tag, dann ein Komma und die Jahreszahl.
Du kannst die Einstellung ganz easy anpassen, in dem du in den Bearbeitungsmodus gehst, die Blogmodul-Einstellungen öffnest und im Inhaltsbereich das Feld „Datumsformat“ anpasst:
Wenn du z. B. j. F, Y einträgst, bekommst du den Tag als Zahl dargestellt, gefolgt von einem Punkt, dann den ausgeschriebenen Monat, ein Komma und die Jahreszahl:
Du kannst hier alle Werte aus dem PHP-Datumsformat angeben, gefolgt von Leerzeichen, Kommata und Punkten deiner Wahl.
Anleitungsvideo:
Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Eine der am häufigsten gestellten Fragen an mich als Webdesignerin ist „Welche Bilder soll ich bloß auf meiner Website verwenden?“ Die Antwort darauf ist natürlich nicht in einem Satz zu beantworten, also habe ich einen Blogartikel daraus gemacht. Ich möchte dir hier zeigen:
wie wichtig gute Bilder sind
wo du Stockfotos bekommen kannst
was du für ein Website-Fotoshooting beachten solltest
wie du deine Bilder für Suchmaschinen optimieren kannst
welche technischen Anforderungen es an deine Bilder gibt
Warum sind gute Bilder so wichtig für deine Website?
Der Spruch ist zwar alt, aber einfach die Wahrheit: „Ein Bild sagt mehr als 1000 Worte“. Bilder vermitteln Stimmung, können Informationen transportieren, Botschaften unterstreichen. Die richtigen Bilder unterstützen dich dabei, deinen Besucher*innen das „Hier bin ich richtig“-Gefühl zu vermitteln, was super wichtig für deine Website ist. Bilder bzw. Fotos können den Unterschied machen zwischen „Website wirkt professionell“ und „Website wirkt stümperhaft“ oder auch einfach nur „Website wirkt unstimmig“. Sie lockern Textwüsten auf, machen deine Website attraktiver und können Geschriebenes nochmal verdeutlichen (z. B. in Infografiken). Gerade wenn du als Personal Brand unterwegs bist, also du selbst deine eigene Marke bist, helfen dir die richtigen Bilder dabei, deine Markenidentität auch konsistent einzusetzen. Du solltest die Bilder also auf jeden Fall sorgfältig auswählen, damit sie deine Message unterstützen. Nutze im Zweifelsfall lieber kein Bild, oder nur ein Icon / Piktogramm statt eines schlechten Bildes.
Tipps zur Auswahl ansprechender Bilder für Ihre Website
Um die richtigen Bilder auszuwählen, solltest du vor allem die folgenden Punkte berücksichtigen:
Was ist das Ziel des gezeigten Bildes? Soll es eher Emotionen wecken, Informationen vermitteln oder deine Markenidentität unterstreichen? Wenn dir das Ziel klar ist, kannst du die Bilder entsprechend besser auswählen.
Passen die Bilder zum Inhalt der Website und passt jedes einzelne Bild insbesondere zum Text, der gerade an der Stelle wo es eingesetzt wird vermittelt wird? Vermeide eine sogenannte „Text-Bild-Schere“ – dass du also zum Beispiel im Text schreibst von „Ausgebrannt und am Ende sein“, man auf dem Foto aber eine erholte, glückliche Frau sieht.
Ist die Bildqualität hervorragend? Die Bilder sollten scharf, gut belichtet und in hoher Auflösung sein (es sei denn, du hast aus künstlerischen Gründen z. B. extra unscharfe Bilder im Einsatz).
Überlege dir vorher gut, ob die Bilder auch zu deiner Zielgruppe passen und auch wirklich deine Wunschkund*in abholen – wenn du z. B. vor allem Rentner*innen als Zielgruppe hast, nutze eher Fotos von älteren statt jüngeren Frauen. So kann sich deine Zielgruppe besser mit den gezeigten Personen identifizieren.
Wenn du Stockfotos verwendest, versuche welche zu finden, die du nicht schon 100x auf anderen Websites gesehen hast.
Investiere, wenn es dir irgendwie möglich ist, unbedingt einmal in ein professionelles Fotoshooting. Du brauchst zu Beginn meist gar nicht viele Fotos, oft reichen schon 5 gute Bilder. Der Unterschied zwischen Handy-Selfies und professionellen Fotografen-Fotos ist riesig und sie werden deiner Website einen komplett anderen – professionellen – Look geben!
Vergleich Handyfoto vs. professionelles Fotoshooting
Welches Bildformat du nutzen solltest
Pauschal gesagt:
Für Fotos, Bilder mit vielen Farbverläufen und Details nimmst du am besten JPG/JPEG (Joint Photographic Experts Group). Diese Bilder solltest du nicht nachträglich verändern, da sonst die Qualität leidet.
Für Logos, andere Bilder mit transparentem Hintergrund und Bilder, die du nachträglich nochmal bearbeiten (z.B. zurecht schneiden musst), solltest du PNG (Portable Network Graphics) verwenden. Die Dateigröße ist etwas größer als bei JPG, dafür bleiben sie auch nach weiterer Bearbeitung gestochen scharf.
Die Bedeutung der Bildgröße und -komprimierung für eine schnelle Ladezeit der Website
Nicht zu vernachlässigen ist die Bildgröße für eine Website. Denn das die Ladezeit ein sehr wichtiger Faktor ist – nicht nur für deine Besicher*innen, auch für Google – habe ich schon ausführlich in diesem Ladezeit-Optimierungs-Blogartikel beschrieben. Eine grobe Faustregel ist, dass deine Bilder möglichst unter 200 KB bleiben sollten – was gerade bei sehr großen Bildern, die sich über die gesamte Breite der Website erstrecken, nicht immer zu schaffen ist. Du kannst die Bilder jedoch vor dem Hochladen in deine WordPress Mediathek noch komprimieren – z. B. mit den kostenlosen Diensten wie tinypng.com oder compressjpg.
Um die Dateigröße klein zu halten hilft es auch, die Bilder nur so groß einzubinden, wie es überhaupt nötig ist. Falls du nur ein kleines Foto für eine Kundenstimme benötigst, muss dies nicht 2000 x 2000 Pixel groß sein. Du kannst dich ganz grob an diesen Vorschlägen für die Abmessungen bei Website-Bildern orientieren:
Quelle: stefaniemotiwal.de
Weitere Tipps für die Optimierung deiner Bilder inkl. WordPress-Plugins, die dich dabei unterstützen, findest du hier.
Bilder für die Suchmaschinenoptimierung einsetzen
Bilder können dir sogar dabei helfen, dass deine Seite oder dein Blogartikel besser bei Google gefunden wird. Dazu solltest du:
einen aussagekräftigen Dateinamen für deine Bilder verwenden, die das relevante Keyword (Infos dazu findest du in meinem SEO-Blogartikel) oder eine Beschreibung des Bildinhaltes enhalten (statt IMG1320.jpg nimm lieber „website-optimierung.jpg“)
trage immer einen ALT-Text (alternativer Text) ein. Dieser wird angezeigt, falls dein Bild nicht geladen werden kann. Hier solltest du kurz und prägnant den Bildinhalt beschreiben, du kannst hier auch nochmal das Keyword verwenden
Bildbeschreibung – hier kannst du nochmal den Inhalt und Kontext des Bildes beschreiben und ebenfalls relevante Keywords unterbringen
Diese Felder kannst du in der WordPress Mediathek für jedes Bild füllen
Was du sonst noch für gute Website-Bilder beachten solltest
Bildsitemaps: Füge eine Bildsitemap zu deiner Website hinzu, um den Suchmaschinen zusätzliche Informationen über deine Bilder zu liefern. Eine Bildsitemap listet alle Bilder auf deiner Website auf und enthält relevante Metadaten wie Bild-URLs, Bildtitel und Bildbeschreibungen – dadurch können Suchmaschinen deine Bilder leichter indexieren und ranken. Du kannst dies z. B. mit kostenlosen WordPress-Plugins wie „RankMath“ oder „YoastSEO“ machen.
Mobile Optimierung: Stelle sicher, dass deine Bilder für die mobile Ansicht optimiert sind, d.h. gut angezeigt werden können (es darf nichts Wichtiges abgeschnitten sein) und vor allem gut lesbar sind.
Backlinks und Social Sharing: Hochwertige Bilder und insbesondere Infografiken haben eine höhere Wahrscheinlichkeit, geteilt und verlinkt zu werden. Achte darauf, dass deine Bilder für das Teilen in sozialen Medien optimiert sind, indem du Share-Buttons oder Links zu Social-Media-Plattformen bereitstellst (z. B. mit dem Plugin „Shariff“). Backlinks von anderen Websites, die auf deine Bilder verweisen, können ebenfalls zur Bild-SEO beitragen und somit dein Ranking verbessern.
Wo du hochwertige Fotos für deine Website finden kannst – Datenbanken für Stockfotos
Die wenigsten haben eine ausreichende Anzahl an Fotos für ihre Website zur Hand. Was also tun? Eine mögliche Lösung ist: Auf Stockfotos zurückgreifen! Hier musst du unbedingt genau die Lizenzbedingungen prüfen und einhalten, um nicht abgemahnt zu werden. Mögliche Stockfotos findest du auf:
Außerdem kannst du natürlich sogenannte Mockups selbst erstellen, das sind eine Art Vorschaubilder, die vor allem gern für Produkte genommen werden. Wenn du also eine PDF Datei oder einen Online Kurs hast, kannst du ein Mockup erstellen, um das ganze plastischer darzustellen und ansprechend aufzubereiten:
Es ist endlich soweit und dir steht ein professionelles Fotoshooting bevor? Super! Hier sind noch ein paar Tipps, um das Shooting bestmöglich vorzubereiten:
Website-Planung: Überlege dir im Vorfeld, für welche Unterseiten du wie viele Fotos brauchst und notiere dir auch die jeweilige Stimmung oder den Textabschnitt, um passende Bilder zu machen. Geht es eher um etwas Ernstes oder darfst du herzhaft lachen? Was muss unbedingt mit aufs Foto, damit alles passt? Was sollen die Bilder vermitteln? Professionalität? Freude? Vertrauen? Kreativität? Da lässt sich viel machen! Erstelle dann am besten eine Liste mit Fotos, die du benötigst. Denke unbedingt auch an die unterschiedlichen Formate und lass einen ausgewogenen Mix aus Hochformat und Querformatbildern machen.
Passende Location: Wähle eine Location, die zum Thema und Stil deiner Website passt. Das kann ein Büro, ein Studio, eine Außenkulisse oder ein spezieller Veranstaltungsort sein. Denke daran, dass der Hintergrund nicht zu überladen sein sollte, um den Fokus auf das Hauptmotiv zu lenken.
Requisiten und Details: Überlege, ob du Requisiten oder Details verwenden möchtest, um die Bilder interessanter und aussagekräftiger zu machen. Requisiten können dazu beitragen, das Thema oder die Botschaft der Website zu unterstützen. Achte darauf, dass die Requisiten nicht zu überladen wirken und das Hauptmotiv nicht überdecken. Bei mir gab es z. B. einen schönen Blumenstraß, ein Notizbuch und natürlich meinen Laptop!
Licht ist alles! Ohne passende Beleuchtung kann der Rest noch so super sein – die Bilder werden maximal halb so gut. Kläre also im Vorfeld, ob an der ausgesuchten Location auch ausreichend Licht vorhanden ist, oder wer welche Lampen organisieren muss.
Konsistenz und Branding: Stelle sicher, dass die Bilder zur Konsistenz und zum Branding deiner Website passen. Verwende Farben, Schriften und Stile, die bereits auf der Website vorhanden sind (oder eingesetzt werden sollen), um einen einheitlichen Stil zu gewährleisten. Du kannst sogar Kleidung in deinen Markenfarben oder einer neutralen Farbe tragen, damit alles gut zusammenpasst.
Mal nah, mal fern: Auf deiner Website kannst du es so halten wie im echten Leben: Du zeigst dich erst einmal von weiter weg, damit dich auch völlig fremde Menschen in Ruhe und mit Abstand kennenlernen können. Es ist uns oft unangenehm, wenn wir auf einer Website gleich in ein riesengroßes, fremdes Gesicht blicken. Achte also darauf, dass von dir sowohl Fotos von weiter weg mit großem Bildausschnitt gemacht werden, als auch von näher dran, die du dann z. B. auf deiner Über mich Seite verwenden kannst.
Stimmungsfotos: Wenn es das Kontingent erlaubt, lass auch noch Fotos nur von der Umgebung / dem Set oder den Requisiten machen, die du dann quasi statt generischer Stockfotos auf deiner Website verwenden kannst. Falls du eine Praxis hast, könnten das z. B. Praxisräume sein, ansonsten vielleicht ein Notizbuch mit Blumen oder andere Arbeitsmaterialien. Die von den gleichen Fotografen gemachten Bilder werden genau den gleichen Stil, die gleiche Beleuchtung etc. haben wie die von dir gemachten Fotos und passen somit 100x besser in deine Website als Stockfotos von irgendwelchen Datenbanken.
Ich hoffe, die Tipps aus diesem Blogartikel haben dir weitergeholfen und du hast ganz viel Spaß bei der Auswahl der Bilder für deine Website. Schreib mir gern in die Kommentare, welches deine Lieblings-Stockfotowebsite ist und ob du schon Fotografenfotos gemacht hast!
Hast du schonmal einen wichtigen Text direkt im Texteditor (z. B. Word) geschrieben? Falls ja, kennst du es vielleicht: Du bist blitzschnell abgelenkt vom eigentlichen Inhalt, weil du direkt die Formatierung anpassen möchtest. Du verbringst viel Zeit damit, die Farben der Überschriften einzustellen, die Zeilenumbrüche und -abstände perfekt einzustellen und schwupps, schon ist der Fokus komplett weg von dem, was du eigentlich vermitteln wolltest.
Genau so passiert es häufig auch mit der Website:
Vielleicht hast du mit Mühe und Not oder großartigen Anleitungen deine Website-Technik endlich ans Laufen bekommen?
Die Startseite ist angelegt und jetzt machst du dich endlich daran, sie zu schreiben und zu gestalten? Vorsicht! Wenn du jetzt nicht aufpasst und ein paar Schritte zurückgehst, kann es gut sein, dass du viel Zeit verschwendest und das Ergebnis maximal mittelmäßig wird.
Was passiert, wenn du deine Website ohne Plan erstellst
Der größte Fehler, den du machen kannst, ist dich ohne Planung an deine Website zu setzen und direkt den Inhalt so einzutragen, wie er in das voreingestellte Layout passt.
Im schlimmsten Fall hast du dir noch nicht mal überlegt, was du überhaupt schreiben willst und lässt es einfach so aus dir herausfließen. (Klar kann das auch MAL gut sein, aber dann doch besser in einem Texteditor, als auf der Website).
Was in den allermeisten Fällen dann geschieht:
Du bist frustriert, weil die Website überhaupt nicht so wird, wie du sie dir vorstellst.
Du vergleichst dich und dein Ergebnis mit anderen Websites – bei anderen sieht das alles so mühelos und stylisch aus, bei dir wie eine Vollkatastrophe. Du fühlst dich wie eine Versagerin.
Du stehst unter Stress, weil dich das alles viel mehr Zeit kostet, als geplant.
Du bist ratlos, weil du gar nicht genau weißt, was du überhaupt falsch machst und wie du es besser machen könntest.
Du verlierst den Mut, weil du so viel probiert hast und es einfach nicht klappt.
Du hast Angst, dass – weil deine Website so stümperhaft aussieht – niemand bei dir kauft.
Du zweifelst an dir und insgesamt auch an deiner Expertise und deinem Business – wenn du schon sowas einfaches wie Texte über dich und dein Angebot zu schreiben nicht hinbekommst.
Bestimmt hast du zwischendurch, als du nicht weitergekommen bist, schon Youtube und Google befragt – doch häufig sieht es in den Anleitungen anders aus als bei dir und das große Ganze fehlt, um wirklich zum Ziel zu kommen.
Du willst nicht aufgeben und versuchst es trotzdem weiter ohne Planung?
Vielleicht ist dir noch gar nicht bewusst, dass es auch anders gehen kann. Dass du mit der richtigen Unterstützung einen viel besseren Weg einschlagen kannst. Denn die Gefahr dabei, wenn du so weitermachst wie bisher ist,
dass du unverhältnismäßig viel Zeit verlierst
dass das Ergebnis trotzdem lääängst nicht so gut wird, wie es werden könnte
dass du dich gar nicht selbstbewußt fühlst mit deiner Website, vielleicht sogar dafür schämst (Website-Shame kommt tatsächlich relativ häufig vor!) und dich nicht traust, deine Wunschpreise als Expert*in zu verlangen
dass deine Website einfach gar nicht fertig wird, weil du nie mit ihr zufrieden bist
dass du über deine Website keine Kund*innen gewinnst und nichts verkaufst (worst case)
dass du viel weniger Zeit für andere wichtige Dinge in deinem Business hast
Dabei lässt sich das mit der richtigen Planung vermeiden.
So hilft dir ein Website-Plan beim Aufbau deiner Seite
Nach jahrelanger Erfahrung mit vielen vielen Kund*innen kann ich dir sagen: Das Ergebnis wird um Welten besser werden, wenn du dir vorher auch ausreichend Gedanken dazu machst, was und wen du mit deiner Website wie erreichen möchtest. Ein guter Plan hilft dir, erst einmal zu überlegen, WAS genau die jeweilige Seite für eine Aufgabe hat. Du strukturierst deine Texte, erstellst Zwischenüberschriften, baust einen roten Faden auf. Kurzum: Du planst deine Website strategisch und inhaltlich und bereitest diese Inhalte entsprechend auf (das geht für eine Website anders als für Buch oder Social Media), BEVOR du dich an die technische Umsetzung machst.
Stell dir mal vor:
Du weißt auf den Punkt, was auf deine Startseite gehört.
Du hast klare Texte mit Struktur – keine Textwüste mehr.
Deine Website „führt“ deine Besucher:innen gezielt zu deinem Angebot.
Du verlierst keine Zeit mehr mit unnötigem Rumprobieren.
Du fühlst dich richtig stolz auf das, was du da aufgebaut hast.
Ein guter Website-Plan hilft dir:
Deine Inhalte strategisch aufzubauen (nicht wie in einem Buch, sondern passend fürs Web)
Deine Texte mit einem roten Faden zu versehen
Deine Seiten-Ziele klar zu definieren
Und am Ende: deine Website wirklich fertigzustellen, ohne dich weiter zu verheddern.
Dein kostenloser Fahrplan zum Website-Planen
Wenn du beim Lesen gerade genickt hast und denkst: „Ja! Genau das fehlt mir!“ – dann ist mein Freebie perfekt für dich:
Der kostenlose Website-Fahrplan Ein PDF inkl. Videos, was dir ganz konkret zeigt, in welcher Reihenfolge du am besten vorgehst und was genau wann dran kommt – so sparst du dir ganz viel Zeit, Stress und Chaos!
Und wenn du direkt durchstarten willst…
…dann ist mein Kurs Weekend Website wie für dich gemacht. Denn hier geht’s nicht um die Theorie – sondern um die Umsetzung.
Du bekommst:
Einen strukturierten Schritt-für-Schritt-Plan
Eine Vorlage, in die du nur noch deine Inhalte einfügen musst
Ein System, mit dem du deine Website an einem Wochenende online bringst
Klingt zu schön, um wahr zu sein?
Dann schau’s dir einfach an (inklusive der vielen Kundenstimmen, die ihre Website damit schon erstellt haben): Hier geht’s zu Weekend Website
Fazit: Ohne Plan geht’s nicht – aber mit wird’s leicht
Wenn du willst, dass deine Website nicht nur irgendwie aussieht (falls sie überhaupt fertig wird), sondern wirklich funktioniert – dann nimm dir die Zeit für die Planung.
Es wird sich absolut lohnen, versprochen!
Und wenn du dabei Unterstützung möchtest, dann lad dir jetzt den kostenlosen Website-Fahrplan herunter – und mach es dir endlich leicht:
Hol dir jetzt deinen Website-Fahrplan inkl. Checkliste und Videos für 0 €:
Die meisten Selbständigen streben nach Perfektion in allen Bereichen. Du willst vermutlich auch, dass alles in deinem Business makellos aussieht – inklusive deiner Website.
Aber meine Meinung dazu ist: Es muss nicht immer perfekt sein – und das gilt auch für deine Website.
In diesem Blogartikel möchte ich mit dir sieben Gründe, warum deine Website nicht perfekt sein muss, teilen.
Außerdem will ich dir zeigen, warum es wichtig ist, dich auf das Wesentliche zu konzentrieren und zu akzeptieren, dass nicht immer alles perfekt sein kann.
Perfektion blockiert!
Wenn du vor einer Aufgabe stehst, die du noch nie gemacht hast und direkt perfekt machen sollst – wie geht es dir dabei? Du fängst vermutlich erst gar nicht an und bist total eingeschüchtert. Die Website-Erstellung ist dabei wie eine Schreibblockade: Es wird 1000x leichter, anzufangen, wenn du einfach drangehst mit der Einstellung “Ach, ich versuch’s einfach mal und schreibe einen ersten Entwurf”. Und dann schaust du ganz entspannt, was daraus wird. Vielleicht wird es gar nicht gut, etwas klappt nicht auf anhieb, liest sich schrecklich, passt nicht zusammen? Kein Problem, dann versuchst du es einfach nochmal.
Zeitersparnis
Hast du schonmal von der 80/20 Regel gehört? In 20% der Zeit kannst du das Ergebnis – in diesem Fall deine Website – schon zu 80% super machen! Du konzentrierst dich NICHT auf die Ausrichtung jedes einzelnen Pixels, verbringst NICHT Wochen auf Google Fonts auf der Suche nach der perfekten Schrift und formulierst deine Über mich Seite NICHT alle 2 Stunden wieder um. Sondern akzeptierst, dass deine Website jetzt erstmal „gut genug“ ist und einfach nach und nach weiterentwickelt werden darf. Wenn du dich nämlich mit den restlichen 20% bis zur Perfektion beschäftigen möchtest, kostet dich das erfahrungsgemäß nochmal ein Vielfaches der Zeit, die du für die 80% – eine echt gute Version deiner Website – benötigt hast.
Deine Website ist sowieso ein Prozess
„Hey, meine Website ist jetzt für immer fertig„. Hast du den Satz schonmal gehört? Ich noch nicht. Eine Website ist NIE fertig. Sie wächst mit dir und deinem Business mit und wird selbstverständlich immer mal wieder angepasst, überarbeitet, ergänzt, gekürzt. Das bedeutet auch, dass du dich jederzeit nochmal dransetzen und deine Website überarbeiten darfst. Ich finde, dass das den Druck rausnimmt, dass alles jetzt sofort perfekt sein muss. Auch auf meiner Website wirst du immer noch (hoffentlich nur) kleine Fehler finden, die trotz aller Sorgfalt immer auftreten. Aber ich nehme mir regelmäßig Zeit, schaue über den ein oder anderen Bereich nochmal drüber, passe meine Angebote an.
Mehr Authentizität
Das klingt vielleicht erstmal komisch, aber Perfektion kann tatsächlich manchmal künstlich und unnatürlich wirken. Und du dadurch unnahbar! Besucher*innen könnten sich wirklich ein wenig eingeschüchtert fühlen, wenn du mit einer pompösen, durchgestylten, absolut perfekten Website daherkommst. Eine Website, die nicht perfekt ist, bringt daher deine Persönlichkeit und Authentizität noch viel mehr zum Ausdruck – was gerade bei uns Personenmarken super wichtig ist. Das schafft eine Verbindung zu deinen Besucher*innen und lässt sie sich besser mit dir identifizieren.
Lerneffekt ist größer
Indem du dir erlaubst, Fehler zu machen und deine Website nicht perfekt sein zu lassen, gibst du dir Raum zum Lernen und Wachsen. Du kannst Feedback sammeln, Anpassungen vornehmen und dich kontinuierlich verbessern. „Durch Fehler lernt man“ – den Spruch hast du bestimmt schonmal gehört 🙂 Und genau das gilt eben auch für deine Website.
Fokus auf das Wesentliche
Eine Website, die nicht unbedingt perfekt sein muss, erlaubt es dir, dich auf das Wesentliche zu konzentrieren: Deine Inhalte und deine Botschaft. Du fokussierst dich darauf, Mehrwert für deine Besucher*innen zu bieten, anstatt dich ewig lang um Details zu kümmern, die später gar keinen Unterschied machen – z. B. wie dick eine bestimmte Trennlinie ist, ob eine ganz dezente Blume im Hintergrund um 5° zur Seite geneigt ist oder nicht, ob die eine Fußzeile noch 1 Pixel weiter nach rechts gerückt werden sollte.
Perfektion wird überbewertet
Beobachte dich selbst mal für eine Zeit. Wie schlimm ist es für dich, wenn bei jemand anderem nicht alles absolut perfekt aussieht? Schämst du dich für die andere Person fremd? Oder denkst du “halb so wild, kann ja jedem mal passieren”? Ein Mindset-Shift, der dir beim Umdenken helfen könnte: Den meisten wird es gar nicht auffallen, wenn nicht alles perfekt ist. Du beschäftigst dich vieeeeele viele Tage, Wochen oder gar Monate mit deiner Website und denkst alles bis ins Detail durch. Die meisten Besucher überfliegen deine Website (und dabei oft nur eine Unterseite oder einen Blogartikel), scannen die Texte grob ab, schauen sich die Fotos kurz an und suchen nach für sie relevanten Infos. Dabei fallen kleine Fehler tatsächlich selten auf und noch seltener ins Gewicht!
Fazit: Spar dir die Perfektion, auch wenn es schwerfällt! Damit hast du viel mehr Zeit und Energie, dich um das Wichtigste bei deiner Website zu kümmern:
einen Mehrwert für deine (potentiellen) Kund*innen zu bieten
authentisch zu sein und
mit deiner Zielgruppe in Verbindung zu treten.
Und das alles kannst du auch schaffen, wenn sich der ein oder andere kleine Fehler auf deiner Website eingeschlichen hat oder du noch nicht alles fertig gestellt hast.
Also lass den Perfektionismus los! Du wirst dadurch mehr Freiheit, Flexibilität und Zeit gewinnen, um dich auf das Wesentliche in deinem Business zu konzentrieren.
Zwei Wege, wie du jetzt loslegen kannst:
Du hast noch keine Website – oder willst komplett neu starten?
Dann ist Weekend Website dein idealer Startpunkt: In nur einem Wochenende erstellst du deine eigene professionelle WordPress-Website – klar, strukturiert und ohne dich zu verzetteln. -> Zu Weekend Website
Du hast schon WordPress und nutzt das Divi-Theme (oder willst umsteigen)?
Dann ist der Divi Powerkursperfekt für dich: Er hilft dir, mit dem Divi-Theme endlich richtig durchzustarten – mit aktuellen Anleitungen, Profi-Tipps und praktischen Hacks, die dich schneller ans Ziel bringen. Alle Infos zum Divi Powerkurs
Womit surfst du eher im Internet – mit dem Handy oder mit dem Computer? Gerade, wenn du unterwegs Mails liest, in denen spannenden Artikel verlinkt sind, oder von Instagram und Facebook Werbung oder interessante Empfehlungen erhältst, auf die du klickst, ist es vermutlich eher das Handy.
Und bestimmt hast du dich auch schon häufiger darüber geärgert, dass
eine Website auf dem Handy nicht wirklich nutzbar war,
Text über einem Foto unleserlich war,
du dich für einen Newsletter gar nicht eintragen konntest oder
ein Formular nicht funktioniert hat?
Bei der mobilen Version deiner Website gibt es einige Fallstricke, die du recht einfach umgehen kannst.
In diesem Blogartikel zeige ich dir:
warum eine optimierte Mobilversion so wichtig ist
worauf du bei der mobilen Website-Version achten solltest und
wie du deine Website für Mobilgeräte testen kannst.
Warum ist es so wichtig, seine Website für Mobilgeräte zu optimieren?
Ca. 65% der Besucher*innen rufen Websites vom Handy aus auf – Tendenz steigend! Spannend übrigens, dass der Tabletanteil so gering ist:
Auch die wichtigste Suchmaschine Google nutzt mittlerweile nur noch die mobile Version („mobile only“), um deine Website zu analysieren und einzuschätzen, auf welchem Platz sie für welches Suchwort ranken soll. Allein aus diesen beiden Gründe darfst du heutzutage die mobile Version deiner Website nicht mehr vernachlässigen.
Was ist bei der mobilen Version anders?
Viele Themes versuchen dir die Arbeit abzunehmen. Was das Divi Theme z. B. macht:
Elemente, die du nebeneinander darstellst, werden untereinander angeordnet. In den meisten Fällen ist das prima so. Es kann allerdings zu Problemen führen, wenn du Inhalte, die zueinander gehören, untereinander anordnest und sich jeweils daneben noch andere Elemente befinden. Lass mich das an einem Beispiel verdeutlichen:
Vielleicht hast du 3 Angebote nebeneinander platziert und möchtest die Buttons, damit sie auch bei unterschiedlicher Textlänge in den Angebotstexten auf gleicher Höhe anfangen, in einer neuen Zeile einfügen. Sieht in der Desktopversion super aus:
In der mobilen Version werden allerdings zuerst die Inhalte aus Zeile 1 nebeneinander angezeigt, danach die Inhalte aus Zeile 2. Das sieht dann so aus:
Und ist vermutlich nicht das, was du dir vorgestellt hast. Hier hast du im Grunde 2 Möglichkeiten: Du lässt es dir egal sein, ob die Buttons auf unterschiedlicher Höhe anfangen und platzierst sie direkt in der ersten Zeile unter der Textbox. Oder du blendest die komplette Version mit Zeile 1 und 2 für die Mobilversion aus und erstellst eine neue Variante nur für Handy und Tablet. Du siehst, es ist leider nicht immer ganz einfach, das zu entscheiden.
Worauf du bei der mobilen Version besonders achten musst
Gerade wenn du mit Pagebuildern wie z. B. dem Divi Builder oder Elementor arbeitest, gelten ein paar „Vorsichtsmaßnahmen“. Bei Divi sind viele geneigt, sich die Felder mit der Maus so hinzuziehen, dass es auf dem Computer hübsch aussieht. Please don’t! Divi fügt dann nämlich die entsprechenden Abstände pixelgenau hinzu – das ist prima für genau den Bildschirm, auf dem du jetzt arbeitest, aber NICHT für größere und kleinere Bildschirme. Und meist leider eine Katastrophe, wenn du es dir dann auf dem Handy anschaust. Oft fehlen dann deine Inhaltsbereiche ganz, weil sie einfach aus dem sichtbaren Bereich herausgeschoben wurden.
Was ich auch häufig sehe: Für die mobile Version wird ALLES mögliche individuell eingestellt. Also jede einzelne Schriftgröße, jeder Abstand, jede Bildgröße wird für die Tabletversion anders eingestellt als für die Desktopversion und für die Handyversion wieder anders. Das ist zwar möglich (und mit dem Divi Builder sehr einfach zu realisieren), macht die ganze Seite aber wesentlich langsamer. Je mehr individuelle Einstellungen du vornimmst, desto mehr Code wird die Seite am Ende enthalten, der dann auch immer geladen werden muss. Wann immer möglich beschränkst du dich also am besten darauf, einen guten Mittelweg zu finden, der auf allen Geräten gut aussieht.
Die einzelnen Punkte, die du unbedingt in der mobilen Version beachten und prüfen solltest, sind:
Hero Section
Wenn du ganz oben auf einer Seite ein schönes, großes Hintergrundbild einfügst und Schrift darauf platzierst, kommt es häufig vor, dass diese in der Handyversion über wichtige Teile des Bildes ragt.
Beispiel Desktopversion:
Beispiel Handyversion – diese könnte dann so aussehen:
Hier kannst du z.B. das Hintergrundbild in der mobilen Version ausblenden und separat einfügen.
Textgrößen
Wähle eine ausreichend große Größe (mind. 18, eher 20 Pixel) und prüfe dann, ob auch alles auf Handy (&Tablet) gut lesbar ist.
Abstände
Da sich die einzelnen Inhaltsboxen und Kästen auf Mobilgeräten ein wenig verschieben und anders darstellen, müssen manchmal die Abstände etwas vergrößert werden, damit kein Text in ein anderes Feld hineinragt.
Formulare
Rufe alle Formulare auf Tablet und Handy auf und fülle sie vollständig aus. Ist das problemlos möglich? Super! Falls einzelne Felder nicht lesbar oder abgeschnitten sind, solltest du nochmal nacharbeiten.
Buttons
Auch hier prüfst du, ob alle Buttons sichtbar und anklickbar sind.
Textfelder
Mit am häufigsten tritt der Fehler auf, dass Texte über die Ränder der Mobilgeräte ragen. Das liegt meist daran, dass händisch große Abstände in der Desktopversion eingestellt wurden, die dann fürs Handy übernommen worden sind. Hier darfst du also nochmal nachkorrigieren.
Ladegeschwindigkeit
Mit den Google Page Speed Insights kannst du kostenlos prüfen, wie schnell deine Website auf dem Handy oder der Desktopversion geladen wird. Das Tool macht dir auch Verbesserungsvorschläge und zeigt genau, was du angehen solltest (z.B. Bilder verkleinern). Wie genau das im Detail geht, kannst du übrigens in meinem „Speed me up“ Workshop lernen.
Theme
Die meisten neueren Themes sind mittlerweile responsive, also passen sich (mehr oder weniger automatisch) für Mobilgeräte an, wie schon oben erklärt. Einige veraltete Themes können das aber nicht. Achte hier vor allem bei der Auswahl darauf, wie lange das Theme schon nicht mehr aktualisiert worden ist und prüfe kritisch die Bewertungen anderer Nutzer*innen. Mit dem Divi Theme und dem zugehörigen Divi Builder oder alternativ dem Astra/WP Ocean Theme und dem Elementor Pagebuilder kannst du nichts falsch machen.
Spezialeffekte und -elemente
Jaaa, fancy Elemente machen Spaß, ich weiß! Aber oftmals sind sie auf dem Handy nicht so gut zu nutzen. Für die Desktopversion gibt es z. B. Klappkarten, die sich umdrehen und Inhalte zeigen, wenn man mit der Maus drüberfährt. Davon mal abgesehen, dass dies selbst am Computer oftmals nicht direkt ersichtlich ist, müsste man auf dem Handy aktiv auf das Bild klicken, damit etwas passiert. Intuitiv wissen das die wenigsten – also solltest du solche Effekte auch lieber nicht nutzen.
Menüs
Hast du schonmal versucht, ein Menü auf der 4. Ebene auf dem Handy zu bedienen? Gerade, wenn der Text im Menüeintrag etwas länger ist (und die Finger etwas dicker), ist das eine wahre Kunst! Am besten hältst du dein Menü schön klein und schlank (5-7 Punkte) und nutzt maximal 2 Ebenen, also einen Untermenüpunkt, wenn überhaupt.
Kontraste
Wir alle lieben Sonnenschein – aber weißer Text auf hellgelbem Button ist in der Sonne auf dem Handy leider kaum bis gar nicht zu lesen. Nutze also insbesondere für die mobile Version kontrastreiche Farben.
Widgets
Die Seitenleiste neben deinen Blogartikeln heißt zwar Seitenleiste – wird allerdings bei mobilen Geräten automatisch UNTER deinen Artikeln dargestellt. Falls du also unter deinen Blogartikeln sowieso z. B. eine Autorenbox hast, solltest du darauf achten, dass die Inhalte dann nicht doppelt / direkt hintereinander angezeigt werden.
Popups
Auch Popups musst du auf dem Handy prüfen – je nachdem, mit welchem Plugin oder Einbettungscode du sie konfiguriert hast, können diese schonmal aus dem Bild herausragen. Das ist sowohl ärgerlich, wenn das mit den Feldern zum Eintragen passiert – aber fast noch ärgerlicher, wenn man nicht an das X kommt, um das Popup auf dem Handy zu schließen (die Besucher*innen sind dann schnell verärgert).
Wie du die mobile Version testen kannst
Dass du die mobile Version auf deinem Handy und Tablet testen kannst, ist dir bestimmt klar. Aber falls du z. B. kein Tablet hast oder es direkt am Computer testen möchtest, geht das natürlich auch.
Im Browser
Jeder Browser hat die sogenannten Entwicklerwerkzeuge. Im Google Chrome kannst du z. B. auf „View“ / „Ansicht“ (je nachdem, ob du die deutsche oder englische Version nutzt) klicken, dann auf „Developer“ / „Entwickler“ und dort auf „Developer Tools“ / „Entwicklerwerkzeuge“. Mit dem Handy-Tablet-Symbol auf der rechten Seite kannst du die aktuell aufgerufene Website dann in der mobilen Version testen. Auf der linken Seite findest du voreingestellte Geräte inkl. der korrekten Abmessungen, du kannst allerdings auch händisch bestimmte Pixelmaße eintragen:
Eins meiner Lieblingstools, allein schon, weil es die einzelnen Bildschirme so hübsch nebeneinander in einem Mockup darstellt. Du kannst deine Website hier in 4 verschiedenen Bildschirmen anschauen und bedienen: Desktop (Auflösung: 1.600 x 992 Pixel), Laptop (1.280 x 802 Pixel), Tablet (768 x 1.024 Pixel) und Mobile (320 x 480 Pixel):
Hier kannst du mit einer bestimmten Bildschirmgröße direkt live, wie deine Website dann aussehen würde. Es gibt unzählige Gerätegrößen als Voreinstellung und du hast die Möglichkeit, ganz invdividuelle Auflösungen einzustellen:
Fazit
Ich hoffe, du konntest aus diesem Blogartikel ganz viel für dich mitnehmen und erstellst eine fantastische mobile Website für deine Besucher*innen!
In meinem Website Programm „Website leicht gemacht“ bekommst du übrigens schon mobil optimierte Vorlagen und ein komplettes Kapitel mit Anleitungen für die Bearbeitung der mobilen Version 🙂
Videoanleitung – Website mobil optimieren mit Divi
Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
und helfe Selbständigen aus der Coaching- Dienstleistungs- und Beratungsbranche dabei, ihre Website strategisch und professionell zu gestalten, um mehr Umsatz und Kund*innen zu gewinnen.
Endlich überzeugende Website-Texte ohne Schreibblockade!
Hol dir das Workbook „Website-Texte leicht gemacht“ inkl. konkretem Aufbau deiner Hauptseiten, vieler Tipps, KI-Prompts & mehr in dieser 50-seitigen PDF:
Empfehlungen für dich:
Sie sehen gerade einen Platzhalterinhalt von Calendly. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Sie sehen gerade einen Platzhalterinhalt von ProvenExpert.com. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
