Der wahre Zauber hinter den Pixeln: Wie die richtige Bildgröße deine Website von ‚bäää‘ zu ‚wow‘ verwandelt“

Bist du auch manchmal frustriert, wenn deine Bilder auf deiner Website nicht so aussehen, wie du es dir vorgestellt hast? Keine Sorge, du bist nicht allein! Oft liegt das Problem daran, dass man die falsche Größe für die Bilder verwendet. Aber keine Panik – in diesem Blogartikel werde ich dir helfen, die perfekte Bilder-Größe für deine Website zu entdecken.

Egal, ob du eine Webseite für deinen Blog, dein Unternehmen oder für andere Zwecke erstellst, die richtige Bildgröße spielt eine entscheidende Rolle für ein ästhetisches und professionelles Erscheinungsbild.

Also, lehn dich zurück, nimm dir eine Tasse Tee und lass uns gemeinsam diese wichtige Frage klären: Wie findest du die perfekte Bilder-Größe für deine Website?

Klein, aber Oho! Warum die Größe auf Websites doch wichtig ist!

Es gibt mehrere Gründe, warum die Bildgröße auf Websites wichtig ist. Erstens verlangsamen zu große Bilder die Ladezeit der Seite erheblich. Das kann sehr frustrierend für die Benutzer sein, da es unnötig lange dauert, bis die Seite vollständig geladen ist. Zweitens beeinträchtigen zu kleine Bilder die visuelle Qualität der Website. Pixelige und unscharfe Bilder wirken unprofessionell und mindern das Gesamterlebnis für die Besucher. Darüber hinaus kann eine falsche Bildgröße die Struktur der Seite negativ beeinflussen. Zum Beispiel können Bilder überlappen oder den Text unleserlich machen.

Daher ist es entscheidend, immer darauf zu achten, dass die Bilder die optimale Größe haben, um die bestmögliche Darstellung zu gewährleisten und Probleme zu vermeiden. Was genau das bedeutet, findest du anschließend im Detail.

Es gibt verschiedene Bildformate, die sich auf die Ladezeit und Qualität der Bilder auswirken können. Die bekanntesten sind JPEG, PNG und GIF. Jedes Format hat seine eigenen Eigenschaften und eignet sich für verschiedene Verwendungszwecke.

JPEG (Joint Photographic Experts Group) ist ein beliebtes Format für Fotos und Bilder mit vielen Farbabstufungen. Es verwendet eine verlustbehaftete Komprimierung, was bedeutet, dass die Dateigröße reduziert wird, jedoch ein gewisser Qualitätsverlust entstehen kann. JPEG-Bilder sind in der Regel klein und werden schnell geladen, was die Ladezeit deiner Website verbessert. Dieses Format eignet sich gut für Bilder mit vielen Details und Farben, wie beispielsweise Produktfotos.

PNG (Portable Network Graphics) ist ein weiteres verbreitetes Bildformat. Im Gegensatz zu JPEG verwendet es eine verlustfreie Komprimierung, was bedeutet, dass die Bildqualität nicht beeinträchtigt wird. PNG-Bilder können jedoch größere Dateigrößen haben als JPEG-Bilder, was zu einer längeren Ladezeit führen kann. PNG eignet sich gut für Bilder mit Transparenz, da es einen Alphakanal unterstützt, der eine genaue Kontrolle über den Hintergrund ermöglicht. Es wird oft für Logos, Icons und Grafiken verwendet.

Von „jpg“ bis „png“: Welches Bildformat zeigt auf Websites die schönste Pose?

Es gibt verschiedene Bildformate, die sich auf die Ladezeit und Qualität der Bilder auswirken können. Die bekanntesten sind JPEG, PNG und GIF. Jedes Format hat seine eigenen Eigenschaften und eignet sich für verschiedene Verwendungszwecke.

JPEG (Joint Photographic Experts Group) ist ein beliebtes Format für Fotos und Bilder mit vielen Farbabstufungen. Es verwendet eine verlustbehaftete Komprimierung, was bedeutet, dass die Dateigröße reduziert wird, jedoch ein gewisser Qualitätsverlust entstehen kann. JPEG-Bilder sind in der Regel klein und werden schnell geladen, was die Ladezeit deiner Website verbessert. Dieses Format eignet sich gut für Bilder mit vielen Details und Farben, wie beispielsweise Produktfotos.

PNG (Portable Network Graphics) ist ein weiteres verbreitetes Bildformat. Im Gegensatz zu JPEG verwendet es eine verlustfreie Komprimierung, was bedeutet, dass die Bildqualität nicht beeinträchtigt wird. PNG-Bilder können jedoch größere Dateigrößen haben als JPEG-Bilder, was zu einer längeren Ladezeit führen kann. PNG eignet sich gut für Bilder mit Transparenz, da es einen Alphakanal unterstützt, der eine genaue Kontrolle über den Hintergrund ermöglicht. Es wird oft für Logos, Icons und Grafiken verwendet.

GIF (Graphics Interchange Format) ist ein älteres Bildformat, das vor allem für animierte Bilder bekannt ist. Es verwendet eine Indexfarbpalette und eine verlustfreie Komprimierung. GIF-Bilder haben normalerweise eine kleinere Dateigröße als JPEG oder PNG, sind aber aufgrund der Animationen manchmal etwas größer. Die Verwendung von GIFs kann die Ladezeit der Website erhöhen, daher sollte ihre Verwendung für kleine animierte Elemente abgewogen werden.

Bei der Auswahl eines Bildformates ist es wichtig, die Vor- und Nachteile zu berücksichtigen. Die optimale Wahl hängt von der Art des Bildes, der gewünschten Qualität und der Ladezeit der Website ab. Oft ist es ratsam, JPEG für große Bilddateien zu verwenden, PNG für Bilder mit Transparenz und GIF für kleine Animationen. Eine korrekte Optimierung der Bildergröße und des Formats kann dazu beitragen, die Ladezeit zu reduzieren und gleichzeitig die Qualität der Bilder beizubehalten.

Vor- und Nachteile von „svg“-Bildern im Vergleich zu anderen Bildformaten

Ein weiteres Bildformat, das wir nicht vernachlässigen sollten, ist SVG (Scalable Vector Graphics). Im Gegensatz zu den zuvor genannten Bildformaten handelt es sich bei SVG um ein vektorbasiertes Format. Das bedeutet, dass SVG-Bilder aus mathematischen Pfaden und Formen bestehen, anstatt aus Pixeln wie bei JPEG, PNG oder GIF.
Ein großer Vorteil von SVG ist die Skalierbarkeit. SVG-Grafiken können ohne Qualitätsverlust beliebig vergrößert oder verkleinert werden, was ideal ist, wenn du deine Website auf verschiedenen Geräten oder Bildschirmgrößen anzeigen möchtest. Zudem haben SVG-Bilder normalerweise eine kleinere Dateigröße als vergleichbare JPEG- oder PNG-Bilder, da sie keine Rasterinformationen enthalten.

Ein weiterer Vorteil von SVG ist, dass sie ideal für grafische Elemente wie Logos, Symbole oder Illustrationen geeignet sind, die eine hohe Präzision erfordern. Da SVG-Bilder aus mathematischen Formeln bestehen, bleiben sie stets gestochen scharf, unabhängig von ihrer Größe oder Auflösung.

Allerdings haben SVG-Bilder auch einige Nachteile. Da sie vektorbasiert sind, können sie komplexe und detaillierte Bilder nicht so gut darstellen wie JPEG oder PNG. Fotografien oder Bilder mit vielen Farbabstufungen sind für SVG nicht gut geeignet. Zudem unterstützen ältere Browser möglicherweise kein SVG, was zu Kompatibilitätsproblemen führen kann.

Die Verwendung von SVG-Bildern erfordert also eine sorgfältige Abwägung der Vor- und Nachteile. Wenn du einfache Grafiken oder Icons auf deiner Website verwendest und Wert auf hohe Skalierbarkeit und optimale Bildqualität legst, ist SVG eine gute Wahl. Für komplexe Bilder oder Fotografien könnten jedoch andere Bildformate wie JPEG oder PNG besser geeignet sein.

Das neue Bildformat „WebP“

Seit einiger Zeit gibt es auch das von Google entwickelte Format „WebP“. Mit dieser Technologie werden auf Websites hochwertige Bilder angezeigt, die aber deutlich kleiner sind, als Bilder in den zuvor erwähnten herkömmlichen Formaten. Dieses Format verkürzt die Ladezeiten einer Website.

Die Vorteile von WebP sind offensichtlich. Dank der besseren Komprimierung kann deine Website schneller geladen werden, da die Dateigrößen kleiner sind. Das ist super für die Benutzererfahrung, denn keiner hat Bock darauf, ewig auf Bilder zu warten. Außerdem kann das auch die Ladezeit der gesamten Website verbessern – das ist ein klarer Pluspunkt!

Es gibt aber auch Nachteile. WebP wird noch nicht von allen Browsern unterstützt, zum Beispiel von älteren Versionen des Internet Explorers. Das bedeutet, dass einige Benutzer möglicherweise Probleme haben, deine WebP-Bilder anzuzeigen. Das ist natürlich nicht so toll.

Also, du solltest WebP in Betracht ziehen, wenn du die Ladezeit deiner Website verbessern möchtest und bereit bist, mögliche Inkompatibilitäten mit einigen Browsern in Kauf zu nehmen. Es ist ein ziemlich durchdachtes und revolutionäres Format – aber du musst abwägen, ob die Vorteile für deine Website die Nachteile überwiegen.

Quiz: Mitarbeiterin des Monats oder Büroschläferin?

Teste doch mit einem Quiz, wie gute Deine Website bereits für Dich arbeitet. Ist sie die Top-Performerin oder eher die Schlaftablette der digitalen Welt.

Lass Dich überraschen und erfahre mehr über Deine Mitarbeiterin. Mit dem Ergebnis erhälst Du ein paar Tipps, wie Du Deine Website zur echten   Wonder Woman machst.

Es ist ein wichtiger Faktor beim Erstellen einer Website und kann den Unterschied zwischen einem professionellen Look und einem unordentlichen Durcheinander ausmachen. Die Bildgröße hängt von verschiedenen Faktoren ab, einschließlich der Breite deiner Website und des gewünschten Formats deines Bildes (JPG, PNG oder GIF).

Aber im Allgemeinen solltest du darauf achten, dass deine Bilder nicht zu groß sind – sie sollten nicht mehr als 250 Kilobyte pro Bild betragen. Wenn sie größer sind, kann dies die Ladezeit deiner Website beeinträchtigen. Denke auch daran, Bilder vor dem Hochladen zu komprimieren. Dies kann helfen, die Dateigröße zu reduzieren und die Ladezeit zu verbessern. Eine gute Auflösung für das Web beträgt normalerweise 72 Pixel pro Zoll. Und wenn es um WordPress geht, kannst du verschiedene Plugins verwenden, um den Prozess des Anpassens von Bildgrößen noch einfacher zu machen.

Ich persönlich halte nicht viel davon, Bilder auf Websites im Nachhinein durch Plugins anzupassen. Ich lade die Bilder bereits in der richtigen Größe und Auflösung hoch. So ein Plugin kann allerdings sinnvoll sein, um Bilder anzupassen, die bereits zu groß hochgeladen wurden.

Auf der folgenden Grafik findest du eine Darstellung, welche Größe du auf Websites, wann verwenden solltest:

Webtaugliche Bilder made easy: Wie du sie perfekt abspeicherst!

Okay, also du hast jetzt schon einiges über Bildgrößen für Websites gelernt. Aber wie speicherst du deine Bilder eigentlich richtig fürs Web ab?

Zunächst solltest du das richtige Dateiformat wählen.

JPEG: für hochwertig Fotos und Farbtreue.
PNG: für Fotos, Grafiken und Logos mit einem transparenten Hintergrund. Bei Fotos verwendet man das, wenn ein Teil eines Fotos freigestellt ist.
GIF: für animierte Grafiken
Webformate: WebP für Bilder und SVG für Logos, sind spezielle Web-Formate.

Verwende niemals ein großes Bild mit hoher Auflösung für einen kleinen Platz auf deiner Website – dadurch wird die Dateigröße unnötig groß und die Ladezeit leidet darunter. Überprüfe auch immer die Pixel-Dimensionen des Bildes (Breite x Höhe), um sicherzustellen, dass es nicht größer ist als nötig.

Mein Tipp: Ich gebe euch einen kurzen Einblick, wie ich bei der Vorbereitung für Website-Bildern vorgehe.

1. Ich verringere die Auflösung auf 72ppi und passe die Pixelgrößen an.
2. Dann passe ich die Pixelgrößen an und speichere das Bild.
3. Fall das Bild immer noch mehr als 100 KB hat, lade ich das Bild in das Tool „TinyPNG“ hoch und komprimiere es verlustfrei.
4. Zum Schluss wird das Bild in WebP konvertiert. Dazu verwende ich „Convertio“.

Auflösung und Pixelgröße passe ich mittels Photoshop an. Du kannst aber jedes andere Programm dafür verwenden, wie beispielsweise „I love IMG“ 

Schwere Last oder federleicht? Wie Bilder die Ladezeiten deiner Website beeinflussen

Eine der Auswirkungen von zu großen oder zu kleinen Bildgrößen auf deine Website ist die Ladezeit. Zu große Bilder können dazu führen, dass deine Website langsam lädt, was sowohl für Benutzer als auch für Suchmaschinen frustrierend sein kann. Niemand wartet gerne mehrere Sekunden, bis eine Seite vollständig geladen ist. Laut Studien verlassen Benutzer oft Websites, die länger als 3 Sekunden zum Laden benötigen. Das kann zu einem erheblichen Verlust von Besuchern und potenziellen Kunden führen.

Auf der anderen Seite können zu kleine Bilder auch ein Problem darstellen. Wenn Bilder vergrößert werden, um in bestimmte Bereiche der Website zu passen, können sie pixelig und unscharf erscheinen, was das Gesamterscheinungsbild deiner Website mindert. Dadurch haben Besucher möglicherweise Schwierigkeiten, die Inhalte deiner Seite zu erkennen oder zu lesen, was eine schlechte Benutzererfahrung zur Folge hat.

Es ist also wichtig, die richtige Balance zu finden, um die Ladezeit deiner Website zu optimieren und gleichzeitig eine optimale Benutzererfahrung zu gewährleisten. Die perfekte Bilder-Größe kann dieses Problem lösen und sowohl eine schnelle Ladezeit als auch eine ansprechende Optik bieten. In den nächsten Abschnitten werden wir uns genauer damit befassen, wie du die richtige Größe für deine Bilder ermittelst.

Fazit

Nun ja, es gibt nicht wirklich eine universelle Antwort darauf, welche Bildgröße am besten geeignet ist. Es hängt alles von deiner Website und dem Verwendungszweck des jeweiligen Bildes ab. Wenn du jedoch ein paar Dinge im Hinterkopf behältst – wie zum Beispiel die Auflösung und das Komprimieren von Bildern – kannst du sicherstellen, dass deine Bilder auf der Website großartig aussehen werden.

Und vergiss nicht: Zur Not, hat WordPress auch einige tolle Tools zur Verfügung gestellt, um dir bei der Optimierung deiner Bilder zu helfen!

Die wichtigsten Fragen in Kürze (FAQ)

Schärfer als je zuvor: Wie du mit verführerischen Fotos deine Website zum Strahlen bringst

Was wäre, wenn ich dir sage, dass es eine einfache Möglichkeit gibt, deine Webseite strahlen zu lassen?

In der heutigen digitalen Welt wird die Aufmerksamkeitsspanne der Menschen immer kürzer. Daher ist es entscheidend, visuell ansprechende Inhalte zu präsentieren. Indem du verführerische Website-Fotos verwendest, kannst du Besucher magisch anziehen und einen umwerfenden ersten Eindruck hinterlassen.

Also, wenn du dich fragst, wie du das Beste aus deinen Bildern herausholen kannst, um Besucher anzulocken – du bist hier genau richtig! In dieser Blog-Reihe zeige ich dir, wie du mit ein paar Tipps und Tricks deine Website mit atemberaubenden Fotos zum Leben erwecken kannst.

Wir starten mit 10 hilfreichen Tipps, wie du verführerische Fotos und Bilder auf deiner Website einsetzen kannst. Du gewinnst die Aufmerksamkeit der Besucher und bewegst sie dazu, länger auf deiner Seite zu bleiben. Von der Auswahl hochwertiger Bilder bis zur Verwendung von starken Emotionen ist alles dabei. Also, lass uns loslegen und deine magische Website auf das nächste Level bringen!

Schaffe eine visuelle Geschichte

Nutze Fotos, um eine Geschichte zu erzählen. Ein Bild sagt oft mehr als tausend Worte und kann die Aufmerksamkeit der Leser auf sich ziehen. Verwende ansprechende Bilder, die das Thema deiner Website unterstützen und Emotionen wecken. Verwende Bilder, die das Thema deiner Website widerspiegeln und für deine Zielgruppe relevant sind.

Betrachte sie als visuelle Unterstützung für deine Inhalte.

Setze auf hohe Qualität

Investiere in hochwertige Fotografien, um einen professionellen und vertrauenswürdigen Eindruck zu hinterlassen. Achte darauf, Fotos zu verwenden, die scharf, gut beleuchtet und von hoher Qualität sind. Vermeide hingegen verschwommene oder pixelige Bilder, die das Interesse der Leser verlieren können.

Achte auf eine gute Auflösung und schärfe deine Fotos gegebenenfalls nach. Vermeide es, allzu häufig auf Stockfotos zurückzugreifen.

Sorge für Vielfalt

Nutze eine Vielzahl von Fotos, um das Interesse der Leser aufrechtzuerhalten. Verwende unterschiedliche Perspektiven, Farbpaletten und Bildtypen, um visuelle Abwechslung zu bieten. Experimentiere auch mit verschiedenen Bildformaten wie Collagen oder Diashows, um das visuelle Erlebnis zu bereichern. Nutze zudem kontrastreiche Farben.

Achte darauf, Bilder mit starken Farbkontrasten zu verwenden. Dies zieht das Auge des Besuchers an und sorgt dafür, dass dein Bild heraussticht.

Emotionen wecken

Emotionale Bilder bleiben den Besuchern länger im Gedächtnis und erzeugen ein positives Gefühl. Verwende deshalb Fotos, die Emotionen hervorrufen und eine Verbindung zu den Lesern herstellen. Bilder von glücklichen Menschen, inspirierenden Landschaften oder farbenfrohen Produkten können das Interesse wecken und positive Gefühle auslösen. Menschen lieben es, andere Menschen zu sehen. Verwende authentische Bilder von Menschen, die deine Zielgruppe repräsentieren, um eine persönliche Verbindung herzustellen.

Denke auch daran, dass Bilder von echten Menschen oft authentischer und ansprechender wirken.

Menschen schaffen Emotionen 🥳

Quiz: Mitarbeiterin des Monats oder Büroschläferin?

Teste doch mit einem Quiz, wie gute Deine Website bereits für Dich arbeitet. Ist sie die Top-Performerin oder eher die Schlaftablette der digitalen Welt.

Lass Dich überraschen und erfahre mehr über Deine Mitarbeiterin. Mit dem Ergebnis erhälst Du ein paar Tipps, wie Du Deine Website zur echten   Wonder Woman machst.

Passe das Design an

Achte darauf, dass sich dein Bild in das Gesamtdesign deiner Website einfügt und harmoniert. Eine gute Integration sorgt dafür, dass der Fokus des Besuchers nicht vom Inhalt abgelenkt wird. Nutze gezielt Farben: Farben haben einen großen Einfluss auf unsere Stimmung und unser Empfinden. Nutze daher bewusst bestimmte Farbtöne für deine Bilder – je nachdem welche Botschaft du damit transportieren möchtest.

Nutze Menschen im Kontext

Zeig deine Produkte oder Dienstleistungen gemeinsam mit Personen. Das kann bei ihrer Arbeit, aber auch bei Freizeitaktivitäten sein. Dies schafft erheblich mehr Authentizität, als wenn du reine Produktbilder verwendest. Erzähle eine Story und erkläre dabei über verschiedene Schritte, was genau passiert.

Verwende visuelle Hierarchie

Platziere die wichtigsten Bilder an prominenten Stellen auf deiner Website, um die Aufmerksamkeit der Besucher zu lenken. Nutze beispielsweise große Bilder als Hintergrund oder platziere sie in einem Slider auf der Startseite. Aber halte es einfach und übersichtlich. Überlade deine Website nicht mit zu vielen Bildern – halte sie lieber simpel und übersichtlich. Weniger ist oft mehr!

Optimierte Ladezeiten

Achte darauf, dass deine Bilder in der richtigen Größe und Auflösung vorliegen, um die Ladezeit deiner Website zu optimieren. Lange Ladezeiten können das Interesse der Leser schnell abschwächen. Nutze auch geeignete Dateiformate wie JPEG, PNG oder die neuen Webformate WEBP oder SVG um die bestmögliche Bildqualität bei einer angemessenen Dateigröße zu gewährleisten.

Tierfotos gehen immer 😉

Handlungsaufforderungen einfügen

um das Interesse der Leser zu kanalisieren. Füge beispielsweise einen Button oder eine Schaltfläche hinzu, die zum Weiterlesen, zum Kauf eines Produkts oder zum Ausfüllen eines Kontaktformulars anregt. Zum Beispiel könntest du ein Bild von deinem Produkt mit dem Text “Jetzt kaufen” versehen oder ein Foto eines Events mit dem Button „Anmelden“.

Mobile Optimierung

Vergiss nicht, dass viele Menschen Websites über Mobilgeräte aufrufen. Stelle sicher, dass die Bilder auch auf kleinen Bildschirmen gut angezeigt werden und keine wichtigen Informationen verdeckt werden. Teste deine Website auf verschiedenen Geräten, um sicherzustellen, dass die Fotos eine optimale Darstellung bieten.

Diese Tipps sollen dir helfen, verführerische Fotos auf deine Website zu integrieren und das Interesse der Leser zu wecken. Experimentiere und finde heraus, welche Bilder am besten zu deinem Thema und Zielgruppe passen. 

 Insgesamt gilt

Es gibt kein Patentrezept für die perfekten Bilder – aber mit ein wenig Fingerspitzengefühl und Kreativität kannst du deine Besucherinnen begeistern! Sie ziehen die Aufmerksamkeit der Besucherinnen auf sich und lassen deine Website professioneller aussehen.

Im zweiten Teil…

… dieser Serie geht es um SEO und Ladezeiten für Website-Bilder, denn Bilder und Fotos werden oft unterschätzt, wenn es um SEO geht.

Responsive Webdesign: Was solltest Du darüber wissen?

In den letzten Jahren sind Websites schneller und optisch attraktiver geworden. Deren ursprüngliche Aufgabe haben sich stark verändert. Viele Features sind nun möglich, die vor einiger Zeit noch als Wunschvorstellung galten. Auch die Geräte, über die auf Deine Homepage zugegriffen wird, haben sich verändert. War es früher meist der PC, über den Websites besucht wurden, finden Deine Besucher*innen heute hauptsächlich durch Smartphone oder Tablet zu Dir.

Deine Website auf allen Endgeräten benutzerfreundlich darzustellen, ist wichtig. Stell sicher, dass Deine Seite in Responsive Design erstellt wird. Was das genau bedeutet und worauf Du achten solltest, erkläre ich Dir nun.

Deine Website – auf jedem Gerät perfekt dargestellt

Hast Du schon einmal erlebt: Du siehst Dir eine Website am Handy oder Tablet an und irgendwas passt da nicht?

• Das Design sieht eigenartig aus.
• Das Menü funktioniert nicht richtig.
• Ein Button liegt über dem Text.
• Grafiken sind verschoben.
• Bilder wirken viel zu groß.

Das geschieht, wenn die Website nur für den Desktop optimiert und nicht flexibel auf andere Endgeräte reagiert. Sie ist nicht „responsive“. „Responsive“ bedeutet auf Deutsch so viel wie „reagierend“. Die Optik, Grafiken, Bilder und Texte reagieren flexibel mit Veränderungen auf das Endgerät. Das heißt: Wird eine Website auf einem Smartphone angezeigt, sieht das Design meist etwas anders aus als auf dem Desktop. Schließlich ist der Bildschirm erheblich kleiner. Viele Funktionen werden nicht mit einer Maus, sondern mit dem Finger „angeklickt“.

Bis vor rund 10 Jahren wurden Websites für mobile Geräte separat erstellt. Sie waren unter Subdomains erreichbar. Der Aufwand dafür war groß. Zum Glück habe findige Programmierer das „Responsive Webdesign“ entwickelt. Uns Webdesignerinnen wird dadurch viel Arbeit erspart.

Hast Du schon einmal erlebt: Du siehst Dir eine Website am Handy oder Tablet an und irgendwas passt da nicht?

• Das Design sieht eigenartig aus.
• Das Menü funktioniert nicht richtig.
• Ein Button liegt über dem Text.
• Grafiken sind verschoben.
• Bilder wirken viel zu groß.

Das geschieht, wenn die Website nur für den Desktop optimiert und nicht flexibel auf andere Endgeräte reagiert. Sie ist nicht „responsive“. „Responsive“ bedeutet auf Deutsch so viel wie „reagierend“. Die Optik, Grafiken, Bilder und Texte reagieren flexibel mit Veränderungen auf das Endgerät. Das heißt: Wird eine Website auf einem Smartphone angezeigt, sieht das Design meist etwas anders aus als auf dem Desktop. Schließlich ist der Bildschirm erheblich kleiner. Viele Funktionen werden nicht mit einer Maus, sondern mit dem Finger „angeklickt“.

Bis vor rund 10 Jahren wurden Websites für mobile Geräte separat erstellt. Sie waren unter Subdomains erreichbar. Der Aufwand dafür war groß. Zum Glück habe findige Programmierer das „Responsive Webdesign“ entwickelt. Uns Webdesignerinnen wird dadurch viel Arbeit erspart.

Warum ist responsive Webdesign für Deine Seite wichtig?

Wie oft am Tag denkst Du Dir „Das google ich mal?“ Ob Du unterwegs, im Büro oder daheim bist: Wenn Du Informationen suchst, fragst Du „Dr.“ Google. Ebenso wie über 90 % aller Internetnutzer*innen weltweit. Mehr als 55 % aller Besucher*innen, gelangen dabei über mobile Endgeräte, wie Smartphone oder Tablet auf die Website.

Diese Zahl zeigt, wie wichtig es ist, dass Deine Website vor allem auf diesen Geräten optimal dargestellt wird. Du kannst damit rechnen, dass dieser Wert in den nächsten Jahren weiter wächst. Responsive Design gewinnt zunehmend an Bedeutung, da die Auswahl an unterschiedlichen internetfähigen Geräten stetig steigt.

Deine Website ist Deine virtuelle Visitenkarte: Das Aushängeschild für Dein Business. Mit einem gut inszenierten Auftritt in allen Medien hinterlässt Du den perfekten ersten Eindruck. Hier zeige ich Dir einige Gründe, warum Deine Seite unbedingt responsive gestaltet sein sollte:

• Platzierung in Suchmaschinen: Seit 2021 verwendet Google zuerst die mobilen Versionen Deiner Website für die Indexierung und das Ranking.
• Absprungrate verringert sich: Weniger Besucher*innen, die Deine Website besuchen, verlassen diese sofort wieder. Warum? Weil die Seite benutzerfreundlich gestaltet ist.
• Anstieg an Website-Besucher*innen: Die Hälfte aller Besucher*innen gelangen über mobile Endgeräte auf Deine Website
• Bessere Bedienbarkeit: Durch responsive Design werden Menüs und Inhalten an den Touch-Screen angepasst und können leichter bedient werden.
• Geringerer Wartungsaufwand: Da nur mehr eine Website für alle Endgeräte benötigt wird, hält sich die Anzahl der Aktualisierungen in Grenzen
• Nahezu identische Inhalte: Es ist nicht mehr nötig, Inhalte für die jeweiligen Seiten in Größe und Auflösung anzupassen, da dies automatisch geschieht.

Quiz: Mitarbeiterin des Monats oder Büroschläferin?

Teste doch mit einem Quiz, wie gute Deine Website bereits für Dich arbeitet. Ist sie die Top-Performerin oder eher die Schlaftablette der digitalen Welt.

Lass Dich überraschen und erfahre mehr über Deine Mitarbeiterin. Mit dem Ergebnis erhälst Du ein paar Tipps, wie Du Deine Website zur echten   Wonder Woman machst.

Design-Entwicklung: Was ist zu beachten?

Desktop, Tablets und Smartphones haben unterschiedliche Displaygrößen. „Das weiß ich doch“, meinst Du jetzt sicher und rollst mit den Augen. Aber ist dir schon mal aufgefallen, dass die Darstellung einer Website auf einem mobilen Endgerät oft anders aussieht als auf einem Desktop?

Da die Displays von Smartphones klein sind, ist es manchmal bei der Erstellung der mobilen Versionen sinnvoll, verschiedene Funktionselemente zu reduzieren. Du meinst, das geht ja nicht, denn sonst fehlt was? Ich kann Dich beruhigen ;-). Wir Webdesignerinnen fügen bei den Desktop-Ansichten oftmals grafische Elemente hinzu, um die großen Bildschirme ansprechend zu gestalten. Bei kleinen Anzeigen ist das nicht nötig und wir konzentrieren uns auf das Wesentliche.

Um Inhalte auf das Wesentliche zu reduzieren, sollte man sich im Vorfeld gut überlegen:

• Was hat Priorität?
• Welche grafischen Elemente werden unbedingt benötigt?
• Was kann weggelassen werden?

Wichtig ist: Gestalte die Seite so, dass der Nutzer sie gerne besucht und leicht findet, wonach er sucht.

• Mobile Endgeräte verfügen nicht über eine Maus. Auf einem Touchscreen ist präzises Anklicken nicht möglich.
• Unterschiedliche Design-Blöcke passen sich an die jeweilige Bildschirmgröße an.
• Die Größe der Bilder verändert sich.
• Mit einer geänderten Navigation – zum Beispiel einem „Burger-Menü“ (Icon einfügen) – vereinfachst Du die Bedienung.
• Buttons müssen gut platziert sein und die richtige Größe haben, um sie am Touchscreen ohne Probleme antippen zu können.
• Links dürfen nicht zu knapp nebeneinander platziert werden, damit der Besucher diese exakt „trifft“.
• Funktionen, die auf einer mobilen Ansicht nicht unbedingt notwendig sind, werden weggelassen. So hältst Du den kleinen Bildschirm übersichtlich.
• Nicht jede Schriftart ist für mobile Endgeräte geeignet.

Mein Tipp:

Wenn Du Deine eigene Website planst oder überarbeiten möchtest, solltest Du immer Wert darauf legen, dass sie im „Responsive“ Design erstellt wird. Nur so kannst Du erfolgreich Besucher*innen anziehen und zu Deinen Kund*innen machen.