Website für welche niedrigste Bildschirmbreite optimieren?
Hallo liebe Webdesigner und Grafikdesigner,
Für welche niedrigste Bildschirmbreite sollte man seine Website optimieren ??? Nutzen noch viele Menschen Smartphones mit Bildschirmbreiten von nur 320px ???
Meine Zielgruppe: überwiegend Unternehmen aller Art und Selbständige.
Danke vorab und VG!
3 Antworten
Wieso benötigst du so eine Untergrenze? Gestalte die Website doch einfach responsive so, dass sie auf allen Endgeräten einigermaßen ordentlich ausgespielt wird.
Stelle die Größe relativ zur Fontgröße ein oder relativ zur Bildschirmgröße. Siehe auch:
So klein, wie es noch Sinn macht. Wenn in einer Zeile nur ein Buchstabe steht, dann ist es zu klein. Ein Wort pro Zeile ist auch eher ungünstig. Bisschen größer sollte es schon sein.
Wenn du das in Zahlen haben möchtest. Das dürfte etwa folgendes sein:
0,5 * 30em
Für 30 Buchstaben (mit der Annahme, dass die Breite etwa die Hälfte der Höhe ist). Je nach Anwendung kann es aber auch mehr oder weniger sein.
Hi Provence,
Die empfohlene minimale Breite für responsives Webdesign liegt heute bei 360px oder 375px, da die meisten modernen Smartphones mindestens diese Breite haben.
320px (z. B. iPhone SE 1. Generation, ältere Android-Geräte) wird immer seltener genutzt.
360px – 375px (z. B. Samsung Galaxy S9, iPhone X, neuere Geräte) ist heutzutage der Standard für mobile Optimierung.
Eine gut optimierte Website sollte auf folgenden Breakpoints (Umbruchpunkten) sauber skalieren:
- ≥ 1440px → Große Bildschirme (Desktops, Widescreens)
- ≥ 1024px → Laptops & Tablets im Querformat
- ≥ 768px → Tablets im Hochformat
- ≥ 375px - 414px → Moderne Smartphones (iPhone 11-15, Samsung Galaxy S-Serie)
- Optional: ≥ 320px → Falls du absolut sicherstellen willst, dass ältere Geräte kein Problem haben
Falls du sichergehen willst:
max-width: 100%und
overflow-wrap: break-word;nutzen.
LG
Ich benötige die Untergrenze, da ich die H1-Überschriften mit Clamp einstelle. Sie sind recht groß und lassen sich in der Schriftgröße für den Desktop nicht auf schmalen Smartphone-Bildschirmen abbilden. Deshalb muss ich für den Clamp-Code eine Untergrenze festlegen.