• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Lange Wörter verhindern Responsiv-Webdesign!

Overtone

Neues Mitglied
Auf der Webseite Freelance-Market.de werden zahlreiche Freelancer-Profile angezeigt. Soeben wird die Seite umfangreich in Sachen “responsives Webdesign” überarbeitet. So passt sich die Seite dynamisch an die jeweilige Fensterbreite an. Bei schmalen Fenstern haben wir jetzt das Programmierproblem, dass wir längere Wörter nicht automatisch umbrechen können.

Zur Demonstration könnt Ihr mal auf http://www.freelance-market.de/c/IT-Webdesigner gehen und das Fenster sehr schmal ziehen. Dann sieht man, dass beim ersten Nutzerprofil die langen Begriffe “Suchmaschinenoptimierung” und “Suchmaschinenwerbung” über die Spalten (natürlich DIV)-Begrenzung hinaus laufen.

Zwei Lösungsansätze scheiden leider aus:
1. Wordwrap: Schneidet bei einer vorgegebenen Zeichenlänge strikt ab, ohne die orthografischen Regeln der deutschen Silbentrennung zu berücksichtigen. Mit einer Funktion ist es zwar dahin gehend zu erweitern, dass nicht die Zeichenlänge, sondern die Wortlänge berücksichtigt wird, jedoch wird auch dann die Silbentrennung nicht berücksichtigt. Darüber hinaus wird das jeweilige Wort IMMER getrennt, und nicht, wie gewünscht, nur bei fehlender Browserbreite!
2. Händische Korrektur der Datenbank-Einträge (Problem Die Seite soll auch in einen breiten Fenster gut erscheinen, also nicht etwa wie “Suchmaschinen-Werbung” )
Welche Lösungsvorschläge habt Ihr?
 
Werbung:
Hallo,

ich würde es mit klassischen und bewährten Methoden machen:

- weniger Spalten
- unwichtige Informationen weglassen (ja, die gibt es)
- die Informationen bei sehr kleinem Bildschirm / Fenster auf mehrere Seiten verteilen

Gruss

MrMurphy
 
Ich hatte vor längerer Zeit mal ein Script in JS geschrieben, welches beim Skalieren des Browsers Schriftgrößen an Containerbreiten anpasste. Das war ein absoluter Performance-Killer.

Man kann per Media-Queries Schriftgrößen anpassen, wordwrap verwenden, min-width für Container setzen und Elemente ausblenden. Mit JavaScript lassen sich Zeichenketten kürzen und Texte in Popups verlegen, aber es läuft immer auf Kompromisse heraus. Eine perfekte Lösung haben auch Provider wie Facebook, Google+, XING & Co. bisher nicht gefunden.
 
Werbung:
Wenn man Kontrolle über den Content hat, kann man bei kritischen Begriffen ein oder mehrere "­" einfügen. Dies zeit eine erlaubte Stelle an, bei der bei zu geringer Fensterbreite getrennt werden darf.
 
Zurück
Oben