Was hat Text, die Enter-Taste mit Responsive zu tun?
Viel. Denn Text-Darstellung auf dem Desktop ist nicht gleich Text-Darstellung auf mobilen Geräten. Die Enter-Taste erzeugt wie in Word auch in den Website-Editoren Absätze.
Absätze nehmen immer den vollen zur Verfügung stehenden Platz ein. Die Darstellung auf kleinen, meist mobilen Geräten kann so schon mal ganz anders aussehen als gewünscht.
Texte
Wichtiger Bestandteil in Webseiten: Text.
Für die Darstellung gibt es so viele Möglichkeiten. Schriftart, Schriftfarbe, Fett, kursiv...
Wir möchten natürlich den Text auch in der Website gut lesbar darstellen. Viel Text dicht aneinander gereiht lässt sich bekanntlich schlecht lesen.
Doch was passiert eigentlich wenn wir auf die Enter-Taste drücken?
Der Cursor wird auf die nächste Zeile gesetzt. Fein, so war es gewünscht.
Aber auch die Tastenkombination Shift+Enter erzeugt eine neue Zeile und ein HTML-Code. <br /> Nur wird durch diese Tastenkombination kein neuer Absatz erzeugt.
Mein Text wie es der Browser liest
Ein normaler Text in einem Absatz in HTML dargestellt.
<p>mein Text in einem ganz normalen Absatz der auch schon etwas länger ausfallen kann. Je nachdem wie viel ich hier zu schreiben habe < /p>mein Text in einem Absatz mit weichen Umbruch in HTML dargestellt:
<p>mein Text und jetzt einen weichen Zeilenumbruch <br /> und jetzt kommt der restliche Text in einer neuen Zeile</p>Was der normale User gerne macht
Und auch Profis (wie ich) sind da nicht immer ausgeschlossen.
Viele User gehen her, nehmen die Ansicht wie diese ihnen zur Verfügung steht und passen die Zeilen mit der Enter-Taste an. D.h. es wird bestimmt wo die Zeile endet. Auch den Text des Absatzes mittig setzen ist schnell per Klick auf das Icon erledigt.
In der Regel wissen die wenigsten, dass Sie mit der Enter-Taste einen neuen Absatz erstellen.
Was so auf einen großen Bildschirm gut aussieht, den Satz optimal auf die Breite gebracht, sieht auf kleineren Ansichten, nicht mehr so gut aus. Im schlechtesten Fall verliert der Text die Aussagekraft. Oder ist so zerstückelt, dass die Lesefreude schnell vergeht.
Beispiele grau unterlegt.
so wäre die Darstellung von Text mit direkter Formatierung am Text auf einem mobilen Gerät, bzw. bei einer kleiner Anzeigebreite:
Ich bin ein Text mit manchmal nicht immer gut durchdachter besonderer Formatierung.
Ich stehe in einer neu erzeugten Zeile, weil ich so viel besser aussehe, bzw. keinen unschönen Umbruch erzeugen sollte.
Und bin mit der Enter-Taste in mehreren Zeilen verteilt.
Am Bildschirm mit großer Anzeigebreite sieht der Text übersichtlich aus.
Ich bin ein Text mit manchmal nicht immer gut durchdachter besonderer Formatierung.
Ich stehe in einer neu erzeugten Zeile, weil ich so viel besser aussehe, bzw. keinen unschönen Umbruch erzeugen sollte.
Und bin mit der Enter-Taste in mehreren Zeilen verteilt.
Was der User beachten sollte:
Den Text nicht nur auf der normalen Ansicht prüfen.
Sie haben kein mobiles Gerät zur Hand?
Browser wie Chrome, FF bieten auch mobile Ansichten an.
Browser Chrome: Einstellungen > weitere Tools > Entwicklertools - in der Leiste über den Code finden Sie ein Icon was einem Handy ähnelt. Testen Sie ein wenig.
Für Webseiten die Jimdo mobile Ansicht benutzen:
Rufen Sie ihre Website im Browser auf. Gehen Sie in die Adresszeile und fügen die Endung /?mobile=1 ein. Verkleinern Sie das Browserfenster auf die Breite eines Handys.
Was ist eigentlich ideal
Für Webseiten gilt: Fließtext nutzen.
Es sollte nur dann ein neuer Absatz erzeugt werden, wo auch einer sein soll. D.h. Nach 3-5 Zeilen Text die Enter-Taste betätigen und so eine Atempause erzeugen.
Die CMS-Systeme mit der einfachen Bedienung wie in Word verführen uns. Der User sieht nicht was im Hintergrund geschieht. Oder haben Sie schon mal auf dieses Icon </> in Jimdo geklickt?
Das dort angezeigte (HTML) ist für den Laien ein Grauß. Aber doch manchmal hilfreich.
Doch wie umgeht man solche Fallen mit Absatz (<p>..) und weicher Umbrüche (<br />)?
Ideal ist es, den Text für die Website in einem einfachen Editor zu schreiben und dann in die Website einzufügen. Danach folgt die Formatierung mit den Icons die im Website-Editor zur Verfügung stehen.
So mal nebenbei: Wir drücken auch gern die Enter-Taste um ein wenig Abstand zwischen den Zeilen zu erzeugen. Dort wird dann auch ein Absatz erzeugt. Nur ist dieser leer.
Da im Standard (da ist Jimdo nicht allein) der User nur die Zeilenhöhe des Textes bestimmen kann, wird dies auch weiterhin so erfolgen. Alternativ könnte ein Style, welcher einem Absatz einen Abstand gibt Abhilfe schaffen.
Kommentar schreiben