Responsive Design in Mobilansicht: 176px

[Luebeck]

Hallo,

ich habe meine responsive Webseite im Flexbox-Design erstellt. Um das Responsive Design zu prüfen, verwende ich das folgende Tool:

Screenfly / Test Your Website at Different Screen Resolutions

Test your website on any screen size including desktops, tablets, televisions, and mobile phones.

quirktools.com

Hier habe ich soweit die Seite überprüft, ob wirklich alle Texte auf ein Display mit 176px passen, d. h. ich will untere Balken zum verschieben vermeiden. Bei einem langen Text sind Probleme aufgetreten. Ich sende hierzu am besten die Screenshots:


Der Rote Bereich ist der Textbereich, der gelbe Bereich ist der Body.

Hat jemand ein Tipp, wie ich vermeiden kann, dass der Text nicht über den roten Bereich hinauskommt? Das ist nur bei dieser Bildschirmgröße der Fall..

Vielen Dank

 

[MrMurphy]

176px Breite oder ähnlich geringe Breiten kommen in der Praxis wohl kaum vor. Probleme mit langen Worten treten hingegen immer mal wieder auf.

a) Zunächst sollten bei schmalen Fenstern Leerflächen wie in deinem Fall der body-Bereich vermieden werden.

b) In lange Worte können Leerzeichen eingefügt werden, dadurch werden sie häufig auch besser lesbar. Das mag grammatikalisch nicht immer korrekt sein, hilft aber zusätzlich Menschen, die Leseschwächen haben.

c) Die Schrift sollte eine Mindestgröße haben. Die zu verkleinern sollte also vermieden werden. Webseitenersteller neigen leider dazu die Schriften viel zu klein zu machen.

d1) Die meisten Browser verfügen heute über eine Silbentrennung. Die kann mit der CSS-Angabe

body {
 hyphens: auto;
}

aktiviert werden. Die funktioniert leider nicht in allen Browsern und zudem nicht so gut wie in Textverarbeitungen.

d2) Deshalb bevorzuge ich in lange Worte an passender Stelle im HTML-Quelltext

­

(Soft Hypen) einzugeben.

Donau­dampf­schifffahrts­kapitäns­anwärter­patent

Also ähnlich wie die falschen Leerzeichen. Bei Bedarf bricht der Browser an den Stellen um und fügt einen Bindestrich ein. Das ist also eine Art vorgegebene Silbentrennung und funktioniert in allen Browsern problemlos.

Dabei suche ich im fertigen Text im Editor mittels "Regular expression" alle Worte mit mehr als 14 Buchstaben und füge dort das Soft Hypen an passenden Stellen über den Zwischenspeicher ein. In der Praxis sind das in deutschen Texten grade mal 2 bis 5 Worte, der Aufwand ist also gering, die Wirkung groß, da lange Worte auch im normalen Fließtext bei Umbrüchen unschöne Lücken am rechten Rand reißen.