Grafiken für Handyauflösungen pixelgenau oder vom Verhältnis?

[LeanderAT]

Hallo!

Wenn ich ein Hintergrundbild zurechtschneide, das je nach Handyscreen unterschiedlich groß ist, wähle ich es pixelgenau aus, also z.B. 360x640 oder wähle ich es x3 1080x1920? Manche Handys haben ja eine hohe Auflösung.

"60x640 pixels, at 200% DPI, is 720x1280 -- which is the viewport size of the HDTV standard (aka 720p).
At 300% DPI it is 1080x1920 -- which is the 1080p standard."

Wenn ich jetzt ein Bild mit 360 Breite nehme, weil das Handy so breit ist...aber es rechnet dann hoch, dann wirkt es ja unscharf.

Wie soll man das genau machen?

Einmal "pure" 360x640, einmal 720x1280, einmal 1080x1920?

 

[Qarrr³]

Wenn du es nur ausprobieren könntest, wie du es am besten findest...

 

[FranzvonAssisi]

Du kannst irgeneins nehmen. Wenn das Verhältnis falsch ist wird meistens ein Teil des Bildes abgeschnitten oder schwarze Balken gezeigt.

Wenn das Verhältnis stimmt wird das Bild passend skaliert, egal welche Auflösung.

Bilder mit kleinerer Auflösung wirken auf hochauflösenden Bildschirmen unscharf.

Bilder mit hoher Auflösung verärgern höchstens den Nutzer, weil das Bild mehr Speicherplatz beansprucht. Aber darauf achtet eigentlich niemand...

PS: Es wäre irgendwie sinnvoll, dass du deine nächsten Fragen etwas besser strukturierst (mmn). as Wenn du was zitiert, dann gibt bitte die Quelle mit an (einfach den Link). Außerdem wäre es hilfreich kurz zu erläutern, was du machen willst. "Wenn man Hintergrundbilder zuschneiden" ist nicht so aussagekräftig. Z.B. "ich möchte Hintergrundbilder auf meine Webseite stellen, so dass sich Handynutzer diese herunterladen können" Quasi die W-Fragen abarbeiten

Dann können wir dir auch leichter konkrete Antworten geben...

Lg

 

[Axxid]

Ich habe für mein Smartphone einfach PC-Wallpaper genommen und auf dem Handy den Ausschnitt ausgewählt. Alles andere war irgendwie unscharf.

 

[ElGonzo]

Kein Plan, was du genau vor hast, aber du solltest erstmal lernen, wie man eine Frage stellt.

Abgesehen davon, macht es wenig Sinn Bilder zuzuschneiden, da es bei Handys zu viele Unterschiedliche Auflösungen und dazu auch unterschiedliche Seitenverhältnisse gibt.
Was du auch nicht beachtet hast ist, dass Hintergrundbilder oft mit scrollen. Die müssten dafür also breiter sein, als das eigentliche Handydisplay!

 

[LeanderAT]

Danke!

Qarrr Ach echt!

Ich hab ein Xiaomi Redmi Note 5 mit 1080x2160. Vorher hatte ich ein Galaxy Mini 2 mit 320x480, nur funktioniert das jetzt nicht mehr. Dort hätte ich testen können, aber bei hohen Auflösungen aufm Handy kenn ich mich noch nicht aus, wie das jeweils unterschiedliche Maße interpretiert.

Ich verwende ein fixes Hintergrundbild...daher scrollt es nicht ausm Bild raus, sondern man scrollt den Text intern.

Ich mache je nach Auflösung Versionen mit angepasster CSS und einem eigenen Hintergrundbild. Bisschen mehr Arbeit, aber auch nicht sooo und ich mags so.

 

[Qarrr³]

Der Speicher, die Auflösung des Ausgangsmaterials und der Displays und die Skalierungsalgorithmen Sinne inzwischen so gut, dass man sich allen Aufwand sparen kann. Wie skaliert wird, hängt vom Launcher ab.

 

[LeanderAT]

Gibt es eine Möglichkeit, den eigentlichen freien Screen zu ermitteln? Wenn ich eine Grafik mit x Höhe, y Breite erstelle, passt sie nicht auf den Schirm, weil oben die Adressleise einiges an Platz einnimmt und unten eine Leiste mit Zurückbutton und anderem. Gibt da vordefinierte Größen oder ist das je nach Handy verschieden?

Ich will einfach die Website ansteuern und dann alles auf den Screen passend anzeigen. Ohne rumwischen oder doppelt tippen um die Seite reinzuzoomen oder sonstwie auf den Screen zu fitten.

 

[Crast]

Hintergrundbild: Ich wuerde dir zu

background-size: contain;

raten, sofern du nicht einen speziellen Ausschnitt haben willst.
Wenn einen besodneren Aussschnitt, dann mach 3 ode max. 4 unterschiedliche Queries, aber verwende ebenfalls diesn Code.

Es gibt zwei Sachen um die du dir Gedanken machen solltest
1. Blende ich das Bild in der Handy-Version ein (Text auf Bild schlecht lesbar, Traffic, ...)
2. Benutze ich das richtige Dateiformat mit der richtigen Komprimierung.

Zur Groeße:
Es gibt die relativen Groeßen Prozent (Einheit %, relativ zum Parent-Element), ViewWidth (Einheit vw, Relativ zur Breite des Viewports) und ViewHeight (Einheit vh, Relativ zur Hoehe des Viewport).

height: 100vh;

ist die komplette Hoehe die dir zur Verfuegung gestellt wird, ABER es gibt einen Hacken dabei.
Wenn die Adresszeile sichtbar ist, wird diese nicht von der VH abgezogen, erst wenn du sie wegscrollst, siehst du dann deine komplette Seite (Aufwunsch gibt es gerne eine ausfuehrlichere technische Erklaerung). Das sollte dir allerdings egal sein, solange du nicht aufwendig verschachtelte Elemente hast die sich scrollen lassen, also lediglich das hauptelement gescrollt wird.Falls doch kann es passieren, dass du den Adress-Leiste nicht weg kriegst.

Alternativ kannst du auch die calc() Funktion von CSS nutzen, diese wird aber nur in ca. 92% der aktuell verwendeten Browser unterstuetzt (Quelle: https://caniuse.com/#search=calc).
Damit kannst du aber z. B. sagen

height: calc(100vh - 64px);

um z. B. eine NavBar abzuziehen.

Fuer MobileDevices sind neben sauberen Queries aber auch Meta-Informationen wichtig.

<meta name="viewport" content="width=device-width, initial-scale=1">

Diese verwendete ich bei praktisch jeden Webprojekt an dem ich arbeite.

Und um den Content gut zu strukturieren und saubere Queries zu nutzen rate ich dir davon ab dir deine eigenen zu schreiben, stattdessen wuerde ich dir zu einem Framework raten. Dieser kuemmert sich um viele Sachen, die heute zu den Webstandards gehoeren.
Ein recht minimalistisches ist Skeleton genauso gut kannst du aber auch Foundation oder Bootstrap nutzen (Nur um ganz wenige zu nennen die es gibt, auf wunsch gerne auch noch weitere Vorschlaege).

 

[LeanderAT]

Super, vielen Dank für die ausführliche Antwort!

 

[Darrel]

@LeanderAT

Grundsätzliches: In der heutigen Zeit entwickelt man in der Regel nicht mehr für spezielle Endgeräte, es gibt also nicht mehr die vordefinierten Größen (ok, bei Apple gibt es die). Es gibt schlichtweg zu viele verschiedene Endgeräte, Displays, Aspect-Ratios, Auflösungen und Trends (z.B.: Stichwort "Notch").

Deswegen nutzt man beim Responsive Web Design Dinge wie relative Einheiten, skalierbare Vektorgrafiken und die Techniken, die Crast teilweise angesprochen hat.

Ermittlung des eigentlichen freien Screens:

Man kann den "eigentlichen freien Screen" mit Hilfe von Javascript ermitteln. Ein paar vielleicht hilfreiche Dinge wären

// Breite und Höhe des Browserfensters in Pixeln MIT Scrollbars eingerechnet
window.innerWidth                   
window.innerHeight

// Breite und Höhe OHNE Scrollbars, margin und border
document.documentElement.clientWidth
document.documentElement.clientHeight

Einer Sache, die @Crast angesprochen hat, würde ich widersprechen:

Und um den Content gut zu strukturieren und saubere Queries zu nutzen rate ich dir davon ab dir deine eigenen zu schreiben, stattdessen wuerde ich dir zu einem Framework raten.

Es spricht nichts dagegen sich die gängigen Breakpoints der beliebten Frameworks anzuschauen, denn die wurden sorgfältig mit Erfahrung und nach statistischer Auswertung ausgewählt.

Aber Media Queries, Layout und Design sollten nicht Einfluss auf den Content nehmen. Es sollte vielmehr genau anders herum sein: Der Content sollte das Design und das Layout bestimmen.

Die Media-Queries der Frameworks orientieren sich grob an Geräteklassen, weil sie keinen konkreten Inhalt als Ausgangspunkt haben. Hat man aber eigenen Content, dann passt man das Layout eben dann an, wenn dieser es erfordert.

Deshalb und weil es ein Wartungsalbtraum ist, immer für die neuesten Geräteklassen zu designen, setzen viele ihre Media Queries nach dem eigenen Inhalt (siehe: Google Developers - Responsive Web Design Grundlagen)

 

[Crast]

Es spricht nichts dagegen sich die gängigen Breakpoints der beliebten Frameworks anzuschauen, denn die wurden sorgfältig mit Erfahrung und nach statistischer Auswertung ausgewählt.

Natuerlich spricht nichts dagegen sich die Breakpoints an zu schauen, das sollte man so oder so tun, wenn man damit arbeitet, damit man das jeweilige Framework richtig versteht und verwendet.

Was meiner Ansicht nach dagegen spricht, komplett auf ein eigenes System zu setzen und sich nur "die gängigen Breakpoints der beliebten Frameworks anzuschauen" an zu schauen ist, dass
a) es ein sehr grosser Zeitaufwand ist selbstaendig alle notwendigen Quaries fuer die wichtigen/notwendigen Elemente zu schreiben.
b) es sehr fehleranfaellig ist, alles selbst zu schreiben, insbesondere wenn man nicht auf Technologien wie SASS oder Less zurueck greift (Mehr zu diesen Technologien findet man hier: CSS Preprocessor)
c) wofuer sollte man sich die muehe machen ein komplett eigenes Layout/Design zu schreiben, wenn es Vorlagen gibt die es einen erleichtern einen eigenes zu schreiben indem man es anpasst (OSS) oder ueberschreibt (CSS Regeln)?
d) Frameworks wie Sekeleton oder Foundation bieten in erster Linie nur das Groundgeruesst und sind genau dafuer gedacht, dass man es anpasst. Frameworks wie Bootstrap bieten hingegen schon ein "richtiges" Layout. Hier sind die Namen Programm: Skeleton, nur das Skelett, Foundation: nur eine Grundlage, Bootstrap: etwas vorgefertigtes.
e) Dank CNDs koennen somit die Stylessheets der Frameworks gecached werden, was Traffic und Ladezeit spart (interessant fuer mobile Endgeraete). Es muessen nur die Aenderungen geladen werden.

In der Softwareentwicklung wird nicht grundlos auf Frameowrks und Libraries zurueckgegriffen. Sie sparen Zeit und Arbeit, sind i. d. R. sicherer und verfolgen Standards.

Der Content sollte das Design und das Layout bestimmen.

Form follows function

 

[LeanderAT]

Danke für die Antworten!

Ich habe mir gestern noch einige Bandhomepages angesehen bzw. allgemeine. Der moderne Look gefällt mir einfach nicht. Schaut wie ein billiges Magazin aus, kein Inhalt, viele große, bunte Bilder....im Desktop ebenso - 1920x1080 Monitor, 24 Zoll...genug Platz, um eine Homepage schön wie ein aufgeschlagenes Buch darzustellen und stattdessen sind riesige Bilder reingeklatscht. 90% Fotos, kaum Geschriebenes. Es ist eh nicht sinnig, dass ICH eine Homepage für Handys mache bei meinen wenigen Views. Selbst große Bands mit 100k Fans haben weboptimierte Websites, die auf dem Handy schlecht aussehen.

So, zurück zum Technischen. Ich habe gesehen, dass mein Zugang mit dem Hintergrundbild, über dem der Inhalt scrollt, wenig Sinn macht, da alles zu klein wird.
Hier noch einmal die Seite: http://www.seelenpuls.at/hpneu/
Geht nur im Browser! Mit dem Handy aufgerufen kommt gleich die Handystartseite, die noch nicht fertig ist!

So wie im Browser kann es auf dem Handy schlecht aussehen. Der Inhalt fehlt noch meist, also nur z.B. auf "Poesie" klicken. Auf einem Handy geht das so nicht. Daher bau ich einen Button ein:
http://www.seelenpuls.at/hpneu/m_testx.php

Noch nicht fertig! Scrollt noch nicht usw.!

So ist halt arg wenig Platz...vielleicht nehm ich nur das Logo oben und mache den Bereich unter dem Menübutton ganz weiß...wie ich nach dem Text noch eine Grafik einbauen kann, hab ich noch nicht rausgefunden. Das geht nur im PHP. Mittels CSS erscheint die Grafik immer ganz oben statt nach dem lorem ipsum-Text. Ausnahme: Ich verwende top: xx px; ... nur kenne ich die Angabe ja nicht, weil ich nicht weiß, wie lang jeweils der lorem ipsum-Text jeder Seite ist. Ich kenn mich da wenig aus...ich probier immer herum und füge Codeschnippel aus dem Net ein, schaue dann, was rauskommt.

 

[Crast]

Es ist eh nicht sinnig, dass ICH eine Homepage für Handys mache bei meinen wenigen Views. Selbst große Bands mit 100k Fans haben weboptimierte Websites, die auf dem Handy schlecht aussehen.

Es ist nicht wichtig, wie viele Besucher du momentan hast, sondern wieviele du haben müsstest. Und Aussagen wie "Ich habe wenig Besucher, also brauche ich keine Seite die auch auf Handys gut aussieht" sind seit den letzten 2 oder 3 Jahren nichts mehr Wert. Die meisten Aufrufen von Webseiten werden über Mobile Endgeräte getätigt (Quelle: http://gs.statcounter.com/os-market-share/all/germany/#monthly-201709-201809-bar). zur SEO gehört seit einigerzeit dazu, dass die Webseiten responsive sind, Google geht sogar soweit, dass Seiten die es nicht anbieten, also schlecht auf mobilen Endgeräten dargestellt werden, weit schlechtere Rankings kriegen.
Die Auflösung 1920x1080 belegt sogar nur Platz 2 innerhalb deutschland. Platz 1 besetzt 360x640 (Quelle: http://gs.statcounter.com/screen-resolution-stats/all/germany/#monthly-201709-201809-bar).

Aber gut.. "zurück zum Technischen".

Darf ich fragen, warum du soviel Platz verschwendest, indem du eien großen weißen Rand hast, wenn du sagst, du möchtest den Platz besser nutzen als Bilder dort anzuzeigen?

Wenn ich mir die beiden Versionen anschaue, bin ich sehr davon überzeugt, dass man beide über einen Link als Responsive Website ausliefern kann.

Wenn ich dir einen guten Tipp geben darf: überleg dir erstmal was du genau möchtest. Dazu kannst du z. B. Zeichnungen anfertigen (oder auch ein Website Wireframe).

wie ich nach dem Text noch eine Grafik einbauen kann, hab ich noch nicht rausgefunden. Das geht nur im PHP. Mittels CSS erscheint die Grafik immer ganz oben statt nach dem lorem ipsum-Text.

Wenn es teil des Inhaltes ist, empfehle ich dir ein <img> zu verwenden. Wenn es aber ein Icon ist oder kein Bezug zu dem Text hat, kannst du CSS verwenden und z. B. in <i> oder <div> verwenden. In jedenfall musst du dafür ein neues Element (oder Pseudo-Element) verwenden.

 

[Darrel]

@LeanderAT
Probieren geht über Studieren und außerdem kostet das ja auch nichts Ich finde die Seite optisch eigentlich ganz ansprechend. Vom Design her, erinnert es mich an viele ältere Seiten, aber da dir den moderne Look nicht gefällt, muss das ja nichts schlechtes sein.

Kleiner Tipp: Es ist einfacher, wenn du einen Entwurf für das Handy machst und dich dann davon auf größere Screens hocharbeitest. Weil du von Anfang an wenig Platz auf mobilen Geräten zur Verfügung hast, überlegt man sich gleich welcher Inhalt wichtig ist und angezeigt werden soll.

Falls Interesse an dem Thema besteht, einfach mal „mobile-first design“ suchen.

@Crast
Ich habe nur geschrieben, dass ich nicht deiner Meinung bin was das Schreiben eigener Media Queries angeht und du machst daraus, dass jemand empfohlen hat, „ein komplett eigenes System zu setzen“? Oha

Frameworks haben Vor- und Nachteile und es kommt immer auf den jeweiligen Einsatzzweck an, ob sie gerade Sinn ergeben.

Und wenn man keinen Grund sieht ein komplett eigenes Design/Layout zu entwerfen und es einem schon zu zeitaufwendig ist, eigene Media Queries zu schreiben und Breakpoints zu setzen, dann sollte man mal stark drüber nachdenken, ob nicht doch „Fertiglösungen“ wie Squarespace, Wix, Jimdo und co. der bessere Weg sind.

 

[LeanderAT]

Danike für die Antworten!

"Darf ich fragen, warum du soviel Platz verschwendest, indem du eien großen weißen Rand hast, wenn du sagst, du möchtest den Platz besser nutzen als Bilder dort anzuzeigen?"

Welchen Link meinst du? Es ist nicht viel weißer Rand.
Bei dem http://www.seelenpuls.at/hpneu/m_testx.php schon, aber das ist rein der mobile Link.

 

[LeanderAT]

Ich habe jetzt einmal ein gaaaanz einfaches Grundkonzept gemacht.

http://www.seelenpuls.at/hpneu/m_test2018.php

Ich hätte noch zwei Fragen:

1) In der PHP habe ich "<meta name="viewport" content="width=device-width,initial-scale=1">".
Dennoch sieht es im Browser anders aus als auf meinem Handy. Wenn man auf den Menü-Button drückt, ist auf dem Handy viel mehr Platz und ich weiß nicht, warum. Wird der font-weight: bold-Effekt anders interpretiert? Die Größe für die Linkfelder habe ich mit 100px definiert, damit man das Problem gut sieht. Dann stößt durch den Bold-Effekt beim Hover über "Diskografie" das Kästchenende an den Text direkt an, während auf dem Handy noch mehr Platz ist. Warum? Zwar habe ich im Browser 320x480 Viewport eingestellt während mein Handy eine höhere Auflösung hat, aber der Fixwert von 100px müsste doch gleich sein?

Hier ein Screenshot, wie es bei mir aussieht: (siehe Attachment)
Code:

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffffff;
    font-size: 15px;
    width: 100px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;

2) Das Logo ist so eingebettet:

#logo {

position: absolute;
width: 320px;
height: 110px;
background-color: #ffffff;
box-sizing: border-box;
background-image: url(img/m_logo.jpg);
background-repeat: no-repeat;
background-position: center;
margin: 0px auto;
}

Ich würde aber gern nur EINE Grafikdatei verwenden...und je nach Handybreite x% an Größe eingeben. Momentan muss ich Pixelwerte verwenden, die der tatsächlichen Grafik entsprechen. Gebe ich z.B. 160 Breite ein oder verwende Prozentwerte, wird nur ein Teil der Grafik dargestellt, aber sie wird nicht als ganzes verkleinert.

Wäre sehr dankbar, wenn mir jemand hier noch weiterhelfen könnte!

 

[Crast]

Problem 1)
Schriften sind so eine Sache... es kann sein, dass dein Handy eine andere Schrift verwendet weil entweder die gewollte unbekannt ist oder eine andere Standardschrift genutzt wird. Insbesondere bei Schriften koennen unter verschiedenen Geraeten unterschiedliche Endergebnisse resultieren. Wenn du wissen moechtest weshalb das bei dir gerade der Fall ist, rate ich dir die Developer-Tools des Browser zu nutzen und zu das Equivalent fuer deinen Handy Browser. Dann die Werte vergleichen.

Problem 2)
Ich wuerde an der stelle statt einem background-image ein <img> verwenden. Dort ist mMn das Skallieren leichter. Auch Inhaltlich waere es "richtiger", da es ein Teil des Inhaltes ist/

img#logo {
   width: 80%; /* Breite 80% des Eltern-Elements */
   max-width: 320px; /* Breite aber max. 320px */
   height: auto; /* Die Hoehe wird automatisch anhand des Inhalts gewaehlt */
   margin: 0 auto; /* Kein Margin oben und unten, rechts und links dafuer automatisch waehlen (zentrieren) */
}

<img src="img/m_logo.jopg">

(Keine Garantie dass alles richtig ist bzw dein Wunschergebnis ist. Ich weiss nicht wie dein HTML aufgebaut ist und es kann sein. Ausserdem moechte ich einen Denkfehler bei mir nicht ausschliessen, habe es heute morgen nicht getestet.)

Alternativ kannst du die Property "background-size: contain" mit in das CSS aufnehmen, dann musst du in den Mediaqueries nur die jeweilige Groessen eintragen.

Weisser Rand:
Auf der Desktopversion hast du fest definiert 1437x880 Pixel. Damit hast du einen Festen Bereich. Bildschirme die Groesser sind als deine Vorgaben haben einen weissen Rand. Bei 1920x1080 waeren das 483x200 Pixel die nicht genutzt werden. Bei den anderen Aufloesungen ist ebenfalls ein gewisser Bereich nicht genutzt. Bei Praesentationen haben wir in der Schule immer gesagt man braucht x% Whitespace. Aber auch da Galt, dass diese x% gleichmaessig Verteilt sein sollten und nicht nur am Rand und in der Mitte alles auf einen Fleck. Kurz: Nutz doch die gesamte Flaeche.
Vorschlag/Idee: Setz oben oder Links die Navigation und dein Logo hin, damit gewinnst du in der Mitte, da wo dein Inhalt sein soll Platz fuer diesen. Wenn du das ganze wie ein Foto haben moechtest, koennen Elemente wie die Version, das Copyright, die Map usw ausserhalb des "Fotos" gesetzt werden, denn auch damit gewinnst du wieder Platz fuer deinen Inhalt.
(Das ganze soll nur als Anreitz dienen, bzw als konstruktive Kritik. Am Ende ist es voll und ganz deine Entscheidung.)

 

[LeanderAT]

Vielen Dank! Werds mir mal in Ruhe ansehen!

Die Schriften habe ich so: font-family: Verdana, Arial, sans-serif

 

[Crast]

Die Schriften habe ich so: font-family: Verdana, Arial, sans-serif

Soweit ich weiß wird Verdana bei Android nicht mit ausgeliefert. Bei Arial bin ich mir unsicher, glaube aber auch das wird unter Android standardmäßig nicht ausgeliefert. somit wird die default sans-serif des Betriebssystems genommen.
Bei iOS weiß ich das leider nicht, aber denke auch da ist wenn überhaupt Arial vorhanden.