nicht angemeldet
Gunnar Bittersmann
marctrix
marctrix
Tabellenkalk
Matthias Apsel
Matthias Scharwies
Gunnar Bittersmann
Gunnar Bittersmann
marctrix
Hallo, ich möchte eine neue Homepage erstellen. Wie ich gelesen habe, soll man von kleinen Screens zu größeren entwickeln. Wo aber/mit welcher Breite (in em) fange ich an?
hallo
Hallo, ich möchte eine neue Homepage erstellen. Wie ich gelesen habe, soll man von kleinen Screens zu größeren entwickeln. Wo aber/mit welcher Breite (in em) fange ich an?
Mit 0em
Ist deine Frage aber, ab welcher Grösse ist eine Sonderbehandlung möglich, so hängt die Antwwort vom konkreten Inhalt ab.
Hallo,
Wo aber/mit welcher Breite (in em) fange ich an?
Mit 0em
Ich muss doch keine Seite machen für ein Gerät mit der Breite 0em. Selbst in einem Gerät mit 10em (~160px) kann man doch nichts sinnvolles unterbringen.
hallo
Ich muss doch keine Seite machen für ein Gerät mit der Breite 0em. Selbst in einem Gerät mit 10em (~160px) kann man doch nichts sinnvolles unterbringen.
Darum sage ich ja, es geht um konkrete Inhalte. Pauschal kann man schlecht Empfehlungen geben.
Wenn du eine vornehmlich Textbasierte Seite hast, so gibt es erfahrungsgememäss ein idealen Zeilenumbruch zwischen 60 und 80 em. Bei grösseren viewportst hast du also potentiell Platz für alternatives Layout neben dem Text.
hallo
Ich muss doch keine Seite machen für ein Gerät mit der Breite 0em. Selbst in einem Gerät mit 10em (~160px) kann man doch nichts sinnvolles unterbringen.
Darum sage ich ja, es geht um konkrete Inhalte. Pauschal kann man schlecht Empfehlungen geben.
Wenn du eine vornehmlich Textbasierte Seite hast, so gibt es erfahrungsgememäss ein idealen Zeilenumbruch zwischen 60 und 80 em. Bei grösseren viewportst hast du also potentiell Platz für alternatives Layout neben dem Text.
Es geht mir nicht um größere Viewports. Welchen Sinn aber hat ein Zeilenumbruch bei 60 em, wenn der Viewport nur 10em breit ist? Und bei einer Breite des Viewports von 5em kann man doch nicht sinnvolles unterbringen, es sei denn man nimmt eine Schriftgröße, die nur mit einer starken Lupe lesbar ist, ganz abgesehen von der Anzeige von Bildern.
Servus!
Es geht mir nicht um größere Viewports. Welchen Sinn aber hat ein Zeilenumbruch bei 60 em, wenn der Viewport nur 10em breit ist?
Da (bei 10em) brauchst du ja auch keine weitere Festelgungen. Mein Handy hat um die 25em.
Interessant wird es nur ab 40-50em, wo du evtl. etwas (evtl. ein aside?) neben den Hauptinhalt positionieren willst.
Was @beatovich meinte, dass du ab 80em evtl. eine max-width:80em oder so etwas anbringst, damit die Zeilenlängen nicht zu lang werden. Das wird in einer media queries abgrefragt, die bei unter 80em überhaupt nicht aktiv ist.
@media (min-width: 50em) {
article {
max-with: 80em;
columns: 2 40em;
}
}
Und bei einer Breite des Viewports von 5em kann man doch nicht sinnvolles unterbringen, es sei denn man nimmt eine Schriftgröße, die nur mit einer starken Lupe lesbar ist, ganz abgesehen von der Anzeige von Bildern.
Herzliche Grüße
Matthias Scharwies
@@beatovich
Wenn du eine vornehmlich Textbasierte Seite hast, so gibt es erfahrungsgememäss ein idealen Zeilenumbruch zwischen 60 und 80 em.
Nein. Zwischen 60 und 80 Zeichen pro Zeile. Bei Proportionalschriften sind das so in etwa die Hälfte in em: zwischen 30em und 40em.
LLAP 🖖
Hej Gunnar,
Nein. Zwischen 60 und 80 Zeichen pro Zeile. Bei Proportionalschriften sind das so in etwa die Hälfte in em: zwischen 30em und 40em.
Hätte ich erst gelesen, könnte ich mir das Schreiben sparen.
Kann sogar hinkommen mit den 30em. Vermutlich hast du das — in Gegensatz zu mir — nicht geschätzt… 😉
Marc
Hej beatovich,
Wenn du eine vornehmlich Textbasierte Seite hast, so gibt es erfahrungsgememäss ein idealen Zeilenumbruch zwischen 60 und 80 em.
Fast. Es gibt eine Empfehlung für leicht lesbare Texte, dass Zeilen nicht länger als 60 bis 80 Zeichen sein sollten.
Da „m“ den meisten Platz aller Buchstaben benötigt, sind Zeilen mit 80em auf jeden Fall viel zu lang.
Hier sind meiner persönlichen Erfahrung nach Zeilen mit 40em bis 60em das absolute Maximum. Weniger als 40em sollte es aber auch nicht sein. Die häufigen Zeitenwechsel führen sonst auch zu schnellerer Ermüdung.
Alternativ kannst du auch eine andere Einheit verwenden, z.B. ex. Das kommt der durchschnittlichen breite eines Zeichens schon wesentlich näher.
Marc
Hallo,
Alternativ kannst du auch eine andere Einheit verwenden, z.B.
ex. Das kommt der durchschnittlichen breite eines Zeichens schon wesentlich näher.
Das ist auch ein schöner Kompromiss zwischen em und px…
Gruß
Kalk
hallo
Fast. Es gibt eine Empfehlung für leicht lesbare Texte, dass Zeilen nicht länger als 60 bis 80 Zeichen sein sollten.
Da „m“ den meisten Platz aller Buchstaben benötigt, sind Zeilen mit 80em auf jeden Fall viel zu lang.
grr ich hätte wohl ex schreiben sollen. Ihr habt natürlich recht.
Ging mir aber primär darum ein einfach verständliches Beispiel zu bringen.
Andere Beispiele wären:
Hallo marctrix,
Fast. Es gibt eine Empfehlung für leicht lesbare Texte, dass Zeilen nicht länger als 60 bis 80 Zeichen sein sollten.
Da „m“ den meisten Platz aller Buchstaben benötigt, sind Zeilen mit 80em auf jeden Fall viel zu lang.
Hier sind meiner persönlichen Erfahrung nach Zeilen mit
40embis60emdas absolute Maximum. Weniger als40emsollte es aber auch nicht sein. Die häufigen Zeitenwechsel führen sonst auch zu schnellerer Ermüdung.Alternativ kannst du auch eine andere Einheit verwenden, z.B.
ex. Das kommt der durchschnittlichen breite eines Zeichens schon wesentlich näher.
Die gelben Posting-Bereiche sind 51em breit. Die vorletzte Zeile in dem Beitrag, auf den ich geantwortet habe, enthält bei mir (font-family: calibri) 99 Zeichen.
Bis demnächst
Matthias
Servus!
Hallo,
Wo aber/mit welcher Breite (in em) fange ich an?
Mit 0em
Ich muss doch keine Seite machen für ein Gerät mit der Breite 0em. Selbst in einem Gerät mit 10em (~160px) kann man doch nichts sinnvolles unterbringen.
Ja, aber du musst auch keine akustische Warnmeldung rausbringen: "Ihr Bildschirm ist so klein, dass selbst ein mittellanges Wort keinen Platz hat.
Lies dir mal dieses Tutorial durch: CSS/Tutorials/Einstieg/Media_Queries
Erster Satz: Was vielen nicht bewusst ist: HTML an sich ist responsiv - Elemente wie Überschriften und Absätze nehmen die gesamte Breite des Viewports ein und brechen überstehenden Text um, so dass er nach unten in einer neuen Zeile dargestellt wird.
und dann Kapitel 2.1: Breakpoints: Inhalt über Design
Herzliche Grüße
Matthias Scharwies
Hallo
Lies dir mal dieses Tutorial durch: CSS/Tutorials/Einstieg/Media_Queries
Dort sehe ich als kleinste min-width-Angaben 30em. Wenn ich das Beispiel ausführe, kann ich mit meinem Browser nur auf gut 19 em verkleinern, kann also nicht sehen, wie dies bei 10em aussehen würde.
Hej Dennis,
Dort sehe ich als kleinste min-width-Angaben 30em. Wenn ich das Beispiel ausführe, kann ich mit meinem Browser nur auf gut 19 em verkleinern, kann also nicht sehen, wie dies bei 10em aussehen würde.
Du kannst weiter verkleinern, wenn du die Entwicklerwerkzeuge am rechten Rand öffnest. Dann lässt sich der viewport beliebig zusammenschieben.
Die Sache ist (wie du an den Beispielen siehst), dass du für Bildschirme mit weniger als 20em oder 320px eigentlich nichts machen musst. Verhindere einfach nicht, dass Nutzer von so kleinen Bildschirmen Anpassungen vornehmen können.
Bilder sollten dann die volle Breite des Bildschirms einnehmen. Hier wäre ein width: 100% sicher angebracht. Kommt aber auf den HTML-Kontext an.
Marc
hallo
Die Sache ist (wie du an den Beispielen siehst), dass du für Bildschirme mit weniger als 20em oder 320px eigentlich nichts machen musst. Verhindere einfach nicht, dass Nutzer von so kleinen Bildschirmen Anpassungen vornehmen können.
Das stimmt so nicht. Tabellen verhalten sich auch auf kleinen Viewports wie Tabellen, und gerade das will man ihnen eventuell abgewöhnen. Das muss man aber gar nicht pauschal machen, sondern könnte via JS auf Bedarf gemacht werden.
Hej beatovich,
Die Sache ist (wie du an den Beispielen siehst), dass du für Bildschirme mit weniger als 20em oder 320px eigentlich nichts machen musst. Verhindere einfach nicht, dass Nutzer von so kleinen Bildschirmen Anpassungen vornehmen können.
Das stimmt so nicht. Tabellen verhalten sich auch auf kleinen Viewports wie Tabellen, und gerade das will man ihnen eventuell abgewöhnen. Das muss man aber gar nicht pauschal machen, sondern könnte via JS auf Bedarf gemacht werden.
Ja, ich habe nicht alle Ausnahmen bedacht. Das ist sicher richtig! Eine hatte ich schon selber nachgeliefert (Bilder).
Gibt sicher noch mehr!
Marc
@@Dennis W.
Selbst in einem Gerät mit 10em (~160px) kann man doch nichts sinnvolles unterbringen.
Nicht?
.jpg)
(Foto: ayustety, CC-BY-SA 2.0)
LLAP 🖖
Ich denke an eine Homepage, die auch zahlreichen Text und Bilder enthält.
@@Dennis W.
Ich denke an eine Homepage, die auch zahlreichen Text und Bilder enthält.
Warum sollte das nicht auf einer Smartwatch dargestellt werden können?
LLAP 🖖
Ich weiß nicht, ob es ein Vergnügen ist dies auf einem Miniscreen zu lesen:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. -_________________________________ |
| Bild
|_________________________________
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Hallo,
Ich weiß nicht, ob es ein Vergnügen ist dies auf einem Miniscreen zu lesen:
Wer mit einem Miniscreen surft, dem gehts wohl nicht vorrangig um Vergnügen…
Gruß
Kalk
Das Beispiel hat doch bestimmt mehr als 10em, passbook hat schon 10em?
@@Dennis W.
Das Beispiel hat doch bestimmt mehr als 10em
Möglich.
Der Punkt ist: Gehe von gar nichts aus. Stelle die Inhalte untereinander dar.
(Ob deine Seite auf einer Smartwatch besonders gut nutzbar ist, soll nicht deine Sorge sein. Möglicherweise ist die Smartwatch das einzige Gerät, was der Nutzer gerade zur Verfügung hat.)
Wenn genügend Platz in der Breite vorhanden ist, kannst du Inhalte auch nebeneinander plazieren. Wieviel „genügend“ ist, hängt von deinen Inhalten ab.
An der Stelle siehst du ggfs. einen Breakpoint vor (@media (min-width: …)) – wenn es nicht auch ganz ohne Breakpoints geht (Flexbox, Grid).
LLAP 🖖
Hej Dennis,
Wo aber/mit welcher Breite (in em) fange ich an?
Mit 0em
Ich muss doch keine Seite machen für ein Gerät mit der Breite 0em. Selbst in einem Gerät mit 10em (~160px) kann man doch nichts sinnvolles unterbringen.
Bei 10em ist es zwar schwierig, aber wenn man gute Augen und ein gutes Display hat, kann man bei entsprechend kleiner Schrift durchaus kurze Texte lesen.
160px können übrigens auch das gesamte Sichtfeld einnehmen. Dann muss man Buchstabe für Buchstabe lesen, geht bei entsprechender Vergrößerung auch. Wenn man zu den glücklichen gehört, denen solche Implantate das Entziffern von beispielsweise Schlagzeilen so ermöglichen in Räumen, die für die Nutzung eines Screenreaders zu laut sind.
Marc