Screendesign | Welche Breite bei der Desktop- und Mobilien-Version?
Marc Marx
- mobile
Ein herzliches Hallo in die Runde!
Schön, hier zu sein!
Ich möchte mich dem Thema Screendesign zuwenden und weiß zum Beispiel nicht, bei welcher Breite ich anfangen soll. Man soll ja die Website um den Inhalt aufbauen. Das Ganze nennt sich dann Mobile First. Nehme ich da 320 Pixel als Basis oder ist es wirklich so, dass ich es abhängig vom Inhalt mache? Und wie sieht es bei der Desktop-Version aus? Nehme ich da 1.280 Pixel oder 1.920 Pixel?
Vielen lieben Dank für Eure Hilfe
Marc
@@Marc Marx
Ich möchte mich dem Thema Screendesign zuwenden und weiß zum Beispiel nicht, bei welcher Breite ich anfangen soll. Man soll ja die Website um den Inhalt aufbauen. Das Ganze nennt sich dann Mobile First.
Das nennt sich Webdesign.
Mobile first ist eine Art, Webdesign umzusetzen – und gewiss nicht die schlechteste. Mobile first heißt von klein nach groß zu denken. Schmaler als 320px werden Smartphones vielleicht nicht sein. Es gibt aber noch kleinere Geräte: Smartwatches bspw.
Wobei an dem Begriff das „mobile“ irreführend ist. Beim Webdesign sollten man nicht in Kategorien mobile/tablet/desktop denken, sondern an kleine, mittelgroße, große, ganz große Displays (und jeweils im Hoch- und Querformat); und nicht in Kategorien. Es gibt keine Grenzen, sondern fließende Übergänge.
Das beantwortet auch deine Frage:
Nehme ich da 1.280 Pixel oder 1.920 Pixel?
Weder, noch. Gar keine Pixelbreite. Wenn Breakpoints nötig sind, dann dort, wo es der Inhalt erfordert. Das heißt: bei verschiedenen Komponenten einer Seite durchaus auch unterschiedliche Breakpoints.
Mit modernen Techniken wie CSS Grid und Flexbox kommt man aber oft auch ohne Breakpoints aus.
Und Längenangaben nicht in Pixel (vergiss, das es so etwas überhaupt gibt), sondern relativ zu anderen Dingen wie Schriftgröße (em
/rem
), Breite der Box (%
) oder Größe des Viewports (vw
/vh
).
LLAP 🖖
Hallo Gunnar,
vielen Dank für Dein Feedback. Ich habe aber irgendwie eine Denkblockade 😀 Mal angenommen ich erstelle einen Onepager bestehend aus:
Da muss ich doch dem Logo und dem Titelbild jeweils eine Größe zuweisen oder? Oder ist es so, dass es in meinem Ermessen liegt, was die kleinste und größte Ansicht ist? Ich benötige doch einen Ausgangspunkt …
Bitte entschuldige meine Fragerei 😀
Hallo
Mal angenommen ich erstelle einen Onepager bestehend aus:
- Logo
- Titelbild
- Überschrift
- Absatz
Da muss ich doch dem Logo und dem Titelbild jeweils eine Größe zuweisen oder?
Ja. Die Größe des Logos kann sich aber beispielsweise bei schmalen Viewports [1] auf dessen Breite beziehen, zum Beispiel 100% der verfügbaren Breite einnehmen, aber auf breiteren Viewports gemeinsam mit der Überschrift Teil der Kopfzeile sein, deren Hintergrund das Titelbild ziert.
Oder ist es so, dass es in meinem Ermessen liegt, was die kleinste und größte Ansicht ist?
Wenn du eine Website nicht für bestimmte Anzeigegrößen un- oder beschränkt zugänglich gestalten willst, kannst nicht du die Instanz sein, die erlaubte Minimal- oder Maximalgrößen voraussetzt. Es gibt sie praktisch nicht. Die Möglichkeiten, eine Website anzuzeigen sind zu unterschiedlich, als dass du als Autor sie alle kennen oder gar berücksichtigen könntest.
Einer benutzt sein Smartphone, ein anderer sein Tablet, beide ihre Geräte mal im Hoch-, mal im Querformat. Ein nächster hat ein Laptop als Hauptgerät und noch ein anderer benutzt einen 4K-Fernseher als Display am PC. Letzterer hat aber wegen schlechter werdender Augen eine Normschriftgröße von 32px eingestellt, womit die Seitenbreite etwa der eines Full-HD-Displays entspricht. Da ist noch einer, der einen Zweitmonitor hochkant betreibt und sein Browserfenster dort darstellt, womit sich die Breite dieses Browserfenster auf den Wert beschränkt, der für einen Monitor als Höhe angegeben wird. Ach ja, nicht zu vergessen sind jene Besucher, die den Platz auf ihrem Display zwischen mehreren Programmen aufteilen, wo das Browserfenster bei jedem eine andere Größe hat.
Du siehst, das ist eine unbestimmbar große Palette an Möglichkeiten.
Ich benötige doch einen Ausgangspunkt …
Der Anzatz „Mobile First“ ist schon ein guter solcher. Dabei bestimmst du mit einer fertigen HTML-Struktur der Dokumente zuerst im CSS die grundlegenden Eigenschaften und das Layout für schmale Viewports. Danach bestimmst du mittels Media-Queries für breitere Viewports weitere Angaben und überschreibst, wo nötig, zuvor für schmalere Viewports bestimmte Regeln mit für breitere Viewports geeigneteren Regeln.
Das ist nicht mal eben gelernt oder getan. Wenn du dich mit dem Thema aber ernsthaft auseinandersetzen willst, ist das ein wesentlicher Teil, der dir, wenn erlernt, als stabile Grundlage dienen kann.
Tschö, Auge
der Viewport ist die im Browserfenster für die Anzeige einer Seite verfügbare Fläche (Breite und Höhe). ↩︎
Hallo Auge,
ganz herzlichen Dank für Dein Feedback. Okay, dass mit den verschiedenenGröße habe ich kapiert. Nur mal angenommen, ich erstelle mich jetzt an den Onepager ... Ich füge einen Header, eine Section und einen Footer jeweils mit Inhalt hinzu. Wenn ich auf nun auf die Vorschau gehe, ist alles so breit wie mein Bildschirm. Ich habe zum Beispiel eine Auflösung von H 1.920 Pixel x B 1.080 Pixel. Wenn ich das nun kleiner haben möchte, gebe ich dem Ganzen ein Breite. Bis dahin ist das doch richtig oder? Wenn nun aber jemand auf die Website geht, der einen viel breiteren Monitor hat, hat also ein wenig Pech gehabt oder?
Viele Grüße
Marc
Hallo
ganz herzlichen Dank für Dein Feedback. Okay, dass mit den verschiedenenGröße habe ich kapiert.
Guter Anfang.
Nur mal angenommen, ich erstelle mich jetzt an den Onepager ... Ich füge einen Header, eine Section und einen Footer jeweils mit Inhalt hinzu. Wenn ich auf nun auf die Vorschau gehe, ist alles so breit wie mein Bildschirm.
Ja, das ist das Normalverhalten in HTML. Also: Soweit, so gut.
Ich habe zum Beispiel eine Auflösung von H 1.920 Pixel x B 1.080 Pixel.
Dein Bildschirm ist Hochkant? 😉 Selbst wenn nicht, breit ist breit und an der Stelle stellt sich deine Frage nach der Einschränkung der Seitenbreite schon allein, weil bei der vom System vorgegebenen (und vom Benutzer nicht anders eingestellten) Schriftgröße die Textzeilen elendig lang werden. Das will man nicht lesen müssen.
Wenn ich das nun kleiner haben möchte, gebe ich dem Ganzen ein Breite. Bis dahin ist das doch richtig oder?
Richtig. Jetzt kommt es aber darauf an, was genau du da tust.
em
und rem
beziehungsweise %
, vw
und vh
(letzere hat Bezug zur Viewporthöhe) vorschlug. Damit erledigt sich grundsätzlich auch deine folgende Frage:Wenn nun aber jemand auf die Website geht, der einen viel breiteren Monitor hat, hat also ein wenig Pech gehabt oder?
Nein, das hat er bei Verwendung relativer Einheiten für die Größen eben nicht (ungünstige Browsereinstellungen ausgenommen).
Ich ziehe an den meisten Stellen für Breiten den Bezug zur realen Schriftgröße mit em
vor, da sich somit das Verhältnis von Schrift(größe) und Containerbreite nicht mehr ändert. Es gibt aber auch Werte, bei denen ich mit rem
einen festen Bezug zur Basisschriftgröße des Browsers herstellen will. Containerhöhen sollten übrigens im Allgemeinen nicht angegeben werden. Je nach Schriftart und -größe kommt es zu unterschiedlichem Platzbedarf für Text, der mit vorgegebener Höhe zu Abschneidungen führen kann. Das will man nicht.
Ich möchte aber auch sagen, dass in einem Browser mit ungünstigen Einstellungen auch mit Verwendung relativer Größenangaben Platzverschwendung durch leere Flächen auftreten wird. Wenn ein Benutzer einen 4K-Display benutzt, in seinem Browser die Schriftgröße bei den meist systemseitig vorgegebenen 16px belässt und das Browserfenster im Vollbildmodus anzeigt, kann man die Breite des Inhalts so sehr relativ angeben, wie man will, es kommt Murks dabei heraus. Je nach verwendeter Einheit für die Breite wird entweder der Inhalt in seinem Container sehr schmal dargestellt oder der Container wächst schön mit, die Schrift aber nicht, was zu sehr langen Zeilen führt. In einem solchen Fall kann und muss der Benutzer selbst gegensteuern, das kannst du nicht.
Tschö, Auge
Hej Marc,
herzlich willkommen und Glückwunsch zu deinem coolen Vornamen! 😉
Wird Zeit, dass wir der Mathiasesierug hier mal was entgegen setzen! 😉
@Auge hat geschrieben:
Je nach verwendeter Einheit für die Breite wird entweder der Inhalt in seinem Container sehr schmal dargestellt oder der Container wächst schön mit, die Schrift aber nicht, was zu sehr langen Zeilen führt. In einem solchen Fall kann und muss der Benutzer selbst gegensteuern, das kannst du nicht.
Dazu wollte ich noch ergänzen: entscheidend ist, dass dein Design dem Nutzer genau dazu die Möglichkeit gibt: nachzujustieren. Wie Auge bereits sagte, möchte er vielleicht größere Schriften verwenden oder nciht den ganzen Bildschirm nutzen, um daneben noch einen Film gucken oder die Aktienkurse in einem zweiten Browserfenster im Auge zu haben - oder was auch immer.
Wenn du zuerst mit mobilen kleinen Bildschirmen begonnen hast, solltest du auch für Breakpoints oder minimal-maximal-Angaben für Flexboxen oder Grids immer em
als Einheiten verwenden. Dann fällt Dein Layout auch auf dem Desktop in die Darstellung für kleine Bildschirme zurück, so dass alle Inhalte vernünftig angezeigt werden.
Wenn Dein onepager wenig Inhalte hat, können die einzelnen Elemente bei genügend Platz auch nebeneinander stehen. Dann hat man auf großen Bildschirmen ggfs. etwas ähnliches wie eine Tageszeitung vor sich. Und im Idealfall passt die ganze Seite auf den Schirm und man muss gar nciht mehr scrollen (wobei das ein geringer Vorteil ist und niemals Absicht sein sollte. Denn wie gesagt: es wäre Zufall, wenn es bei jemandem so funktionieren würde, weil es von zu vielen unbekannten abhängt).
Also:
1.) mit der kleinsten Displaygröße beginnen: die kann auch weniger als 320px breit sein und Pixel sind eine schlechte Ausgangsbasis, daher
2.) am besten ausschließlich relative Einheiten für Breiten, Höhen, Schriftgrößen, Breakpoints usw verwenden (meist dürften em
und rem
sinnvoll sein, manchmal %
oder vw | vh
manchmal aber auch eine Kombination, wie calc(100% - 2rem)
wenn eine Box in ein Elternelement mit oder ohne Inneabstand bündig eingepasst werden soll. - In CSS-Kalkulationen kannst du beliebig Einheiten miteinander kombinieren.
Marc
@@marctrix
herzlich willkommen und Glückwunsch zu deinem coolen Vornamen! 😉
Wird Zeit, dass wir der Mathiasesierug hier mal was entgegen setzen! 😉
Hach, wenn sich der @dedlfix doch bloß zu seinem coolen Vornamen bekennen würde! 😉
LLAP 🖖
Tach!
Hach, wenn sich der @dedlfix doch bloß zu seinem coolen Vornamen bekennen würde! 😉
Namen sind Schall und Rauch, und nicht jeder ist mit seinem Namen glücklich, auf dessen Vergabe man ja keinen Einfluss hatte.
dedlfix.
@@Gunnar Bittersmann
Mit modernen Techniken wie CSS Grid und Flexbox kommt man aber oft auch ohne Breakpoints aus.
siehe Beispiel
LLAP 🖖
ich zur zeit besechtig mich mit diesen sachen...ich bin neue mit html/css .. ich kann dir empfehlt dieser Link, ich habe meine Media für Desktop , Tablet und Mobil mit dieser Parametar geschrieben, und die meisten Geräten funzionier Gut mit diesem Parameter... aber Später du sollst mit CSS arbeit..., dann wenn eine Geräte nicht funzioniert , kannst du selbe bauen der Parameter (nochmal weise der Gerät sagt ihre PX , von Breite und Lange) , dann mit einem Virtual Tablet und Mobil kanns du selbe der Parameter abgleichen... einiger Online Virtual Tablet und Smarphone : 1 , 2 , 3 und 4 .
ich hoffe das du mein "deutsch" verstehst... ☺️
Hallo Gunnar, Auge und liebewinter,
jetzt habe ich es kapiert. Es sitzt zwar noch nicht zu 100 Prozent aber ich bin auf einem guten Weg.
Ich danke Euch ganz herzlich für Euer großartiges Feedback. Das ist ganz großes Kino!
@liebewinter: Ich habe alles verstanden. Dankeschön!
Liebe Grüße
Marc
was ich meint mit
...dann mit einem Virtual Tablet und Mobil kanns du selbe der Parameter abgleichen...
sind die CSS Parameter , weil du der PX von dem Gerät hast...
Wie habe meine Css Parametar für meine Desktop geschrieben…
/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {
body {
display: grid;
display: -ms-grid;
background-color: #ebf5d7;
grid-row-gap: 5px;
grid-template-columns: 8% 74% 18%;
grid-template-areas:
"header header header"
"nav nav nav"
"main main infoBox"
"footer footer footer";
-ms-grid-columns: 8% 74% 18%;
-ms-grid-row: 120px 80px 103px 200px 110px 90px;
-ms-grid-gap: 5px;
}
.dropdown-content a {
padding: 10px 12px;
}
.dropdown:hover .dropdown-content {
top: 28px;
}
}
body > header {
grid-area: header;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
-ms-grid-row: 1;
-ms-grid-row-span: 1;
background-image: url("Bilder/view.JPG");
background-repeat: no-repeat;
padding: 65px;
}
body > nav {
grid-area: nav;
-ms-grid-column: 1/3;
-ms-grid-column-span: 3;
-ms-grid-row: 2;
background-color: #d2f5c4;
margin: 1px;
}
body > main {
grid-area: main;
display: block;
-ms-grid-column: 2;
-ms-grid-row: 3;
-ms-grid-row-span: 3;
margin: 1px;
background-color: #eaf6e5;
box-sizing: border-box; /* margin wo der test anfang */
padding: 10px; /* margin wo der test anfang , padding für den margin */
}
body > #furtherInformation {
grid-area: infoBox;
-ms-grid-column: 3;
-ms-grid-column-span: 3;
-ms-grid-row: 3;
-ms-grid-row-span: 3;
margin: 1px;
background-color: #d2f3c6;
}
body > footer {
grid-area: footer;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
-ms-grid-row: 6;
-ms-grid-row-span: 6;
background-color: #99ee7a;
}
@@ liebewinter
ich kann dir empfehlt dieser Link
Nein, diese Vorgehensweise ist nicht empfehlenswert. Aus mehreren Gründen:
Es werden irgendwelche willkürlichen Breakpoints verwendet, die rein gar nichts mit dem Seiteninhalt zu tun haben (sondern sich auf irgendwelche Geräte beziehen, die irgendwann mal aktuell waren).
Es werden stacked media queries verwendet. Das ist meist nicht das, was man will. ☞ overlapping vs. stacked
Die Breakpoints sind in px
anstatt in em
angegeben ☞ PX, EM or REM Media Queries?
LLAP 🖖
@@Gunnar Bittersmann
Nein, diese Vorgehensweise ist nicht empfehlenswert. Aus mehreren Gründen
Genau das hatte ich dir aber auch schon vor ein paar Tagen mit auf den Weg gegeben.
LLAP 🖖
Hallo , ich habe die Brekpoints in PX geschrieben weil ich habe auf einiger Blogs gelesen das ist Besser PX benutz als EM...☺️
aber jetzt werden die Breackpoints zum EM gewechsel...☺️
Hallo in die Runde 😀
ich möchte gerne in Affinity Designer ein Screendesign erstellen. Ich möchte einfach ein bisschen scribbeln und mein Scribble dann als Vorlage nutzen. Dabei reicht mir eine Desktop- und eine Mobile-Ansicht. Welche Breiten wären hier sinnvoll?
Liebe Grüße und 1.000 Dank
Marc
ich bin auch neu mit diesem sachen... so von hier und NUR für Desktops und Smartphonen (iPad und Ähnliche..) .
/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {
//CSS
}
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
//CSS
}
/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 480px) {
//CSS
}
Hier sind das Wert in PX gegeben , und wie Gunnar Bittersmann mir sagtet.. es besser mit EM geben . So , das Formula von PX nach EM zu wandel;
em = px ÷ 16
Beispiel;
320px ÷ 16 = 20em
Hallo liebewinter,
em = px ÷ 16
Das ist falsch. Es gibt keine feste Gleichung.
Bis demnächst
Matthias
Das ist falsch. Es gibt keine feste Gleichung.
Aber hier sagt das 16px a 1.000em sind , kannst du Bitte Erklärt warum falsch ist , nur um zu wiessen.. ☺️
Hej Matthias,
em = px ÷ 16
Das ist falsch. Es gibt keine feste Gleichung.
Für die Angabe von Brakpoints ist das genau der richtige Ansatz: man will ja gerade, dass sich die Darstellung ändert, wenn beispielsweise mehr als 20 m nebeneinander passen.
Es erleichtert auch die Arbeit, insbesondere die QS, wenn man schaut, welcher Breakpoint auf Basis dieser Formel am ehesten den bekannten, weit verbreiteten Monitor-Auflösungen entspricht. So reduziert man die Stellen, an denen sich das Design verändert, was die Testerei erheblich vereinfacht.
Ich gehe seit zehn bis 15 Jahren so vor und kann das wirklich empfehlen.
Dennoch ist Dein Hinweis wichtig, damit sich der CSS-Autor noch mal klar macht, dass dann bei einer Schriftgröße von 200% das em
32px groß ist — und eben nciht 16px. Genau das ist ja die Idee hinter em und rem: der Nutzer der Seite hat es in der Hand, die Seite an seine Bedürfnisse anzupassen und der Autor sorgt "nur" noch dafür, dass das Layout das aushält, also ansehnlich und bedienbar bleibt.
Marc
@@Matthias Apsel
em = px ÷ 16
Das ist falsch. Es gibt keine feste Gleichung.
Ja. Aber: es gilt in den meisten Browsern in der Grundeinstellung.
Es gilt nicht, wenn der Nutzer eine andere Schriftgröße einstellt. Und es gilt nicht in Browser-Exoten wie dem UC Browser, wo 1em 19px entspricht.
Um von den px-Werten wegzukommen und in em umzurechnen, ist das Teilen durch 16 schon nicht ganz falsch.
LLAP 🖖
Hallo an Alle,
ich möchte mich noch einmal ganz herzlich be Euch bedanken. So viel Input. Sensationell. Ich hoffe, dass ich hier demnächst was zurückgeben kann.
Noch eine letzte Frage: Mal abgesehen von der Umsetzung in HTML und CSS, möchte ich heute mit meinem Screendesign anfangen. Ich erstelle das im Affinity Designer. Mein Notebook hat eine Auflösung von B 1.280 Pixel. Nehme ich das nun als Ausgangspunkt ein Breite von 1.280 Pixel? Hier mal ein Bild von meiner Arbeitsfläche:
Viele Grüße und 1.000 Dank
Marc
wie frühr habe gesagt , ich bin neu mit diesen sachen ... aber wie der Beipiel die gegeben habe ,wenn du füllst von CSS
/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {
auch hast für deine Netbook , wenn dieser Parametar passen nicht für deine Netbook , weil kleine ist , du kannst für Tablet füllen.. .Aber ich sage dir , das ich mit diesen Parametar , meisten Netbook's erreiche ..
/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
//CSS
}
/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
//CSS
}
noch andere Sache... ich denke das du Windows benutze bist , ich bin Linux... , deshalb kann ich dir nicht gut helfe ... aber wie möchtest deine Projekt prüft ? , benutztst du ein Server ? und nur für Information... ich habe 1 Monat gebraucht um die Media Query für vielen Geräten erreichbar zu machen .... auch weil ich arbeite...
Hallo liebewinter,
herzlichen Dank für Dein Feedback. Ich werde jetzt mal alles auswerten 😀
Viele Grüße
Marc
das ist , ich bekomme von dir -1 ?
-1? Da habe ich aus Versehen was falsches geklickt. Bitte entschuldige. Ich verscuche es rückgängig zu machen.
Liebe Grüße
Marc
keine sorge... ich brauche keine Punkte bekomme um mich Besser zu Fühlen ..., meine Meinung über das Leben ist , nehmen und geben....das ist Solidarität...
ich arbeite als Spüler und bin keine junger mehr .. aber als ich lerne meine Webseite zu bauen habe ein bissen gelernt ,so wenn nächste mal eine Frage hast , kannst du fragen.. aber sicher hier gibt es MeisterInnen/Meister die besser antworten können als ich....
Ich hoffe das du schafft mit deinem Project !
Hallo liebewinter, hallo liebs Forum!
Ich komme anscheinend mit dem Bewertungssystem nicht klar :) Ich möchte mich noch einmal bei allen ganz herzlich bedanken.
@ liebewinter: Ich danke Dir von ganzem Herzen für Deinen Einsatz! Ich finde es großartig, dass Du Dich weiterbildest. Und wer weiß: Vielleicht hast Du in naher Zukunft Dein eigenes Unternehmen. Ich wünsche Dir alles, alles Gute!
Viele Grüße
Marc
Hallo Marc,
einfach nochmal auf's Minus klicken. Und wenn Du am deinem eigenen "Danke schön" den Lösungshaken setzt, bekommst Du die 15 Punkte, nicht liebewinter.
Rolf
@@Rolf B
einfach nochmal auf's Minus klicken.
Mach ich dann gleich mal. Oh, da war schon jemand schneller.
Und wenn Du am deinem eigenen "Danke schön" den Lösungshaken setzt, bekommst Du die 15 Punkte, nicht liebewinter.
Den Lösungshaken kann nur der Threadersteller setzen.
LLAP 🖖
@@ liebewinter
das ist , ich bekomme von dir -1 ?
Von wem auch immer, unverdient war der Minuspunkt nicht.
px
irgendwo im Stylesheet verdient einen Minuspunkt.Alles Dinge, die ich schon mal erwähnt hatte.
LLAP 🖖