CSS Seite für Handys gestalten?

[LeanderAT]

Eine kurze Frage:

Wenn ich für Handys Seiten gestalte, nehme ich da die direkte Auflösung her, z.B. 320x480...und verwende alles in ganz klein (Logo, Grafiken)?

Oder gestalte ich alles mit einem Multiplikator, z.B. in 960x1440 und das Handy passt alles dann automatisch in den kleineren Screen?

 

[Tzk]

Du legst die Seite einfach komplett skalierbar aus. Die Schriftgröße und ähnliches kannst du ebenfalls entsprechend definieren. Logos würde ich dann als Vektordateien hinterlegen und fertig. Dann brauchts keine Pixel.

 

[Bagbag]

Im Idealfall hast du Vektorgrafiken, geht das nicht, dann hast du jedes Bild in mehreren Auflösungen und nimmst das nächst-größere, geht auch das, aus welchem Grund auch immer, nicht, nimmst du lieber ein unnötig großes als zu kleines.

 

[Genscher]

Normalerweise macht man es so, dass man ja diese berühmten CSS Grenzen hat (z.B. bei bootstrap).
Man nimmt für jede dieser Grenzen die Obergrenze für die Grafik. D.h. in der Realität hat man so 3-4 Grafiken pro Auflösung. Das gilt aber nur für große "featured" Bilder, z.B. "Team" Bilder, Produktbilder, usw.

Für alles andere Vektorgrafiken, wie schon geschrieben.

 

[Nase]

Alternativ gibt es noch das <picture>-Element, wenn man den Internet Explorer nicht mehr unterstützen muss und kein Javascript will.

[1] https://developer.mozilla.org/de/docs/Web/HTML/Element/picture
[2] https://caniuse.com/#feat=picture

Ansonsten gibt es noch ein Polyfill dafür.

[3] https://github.com/scottjehl/picturefill

 

[Genscher]

... kein Javascript will.

Öhm, das alles funktioniert nur auf CSS Basis, alles ohne Javascript: CSS Viewport

 

[Nase]

Wenn du Polyfills nutzt, läuft das über Javascript.

 

[LeanderAT]

Danke!

 

[LeanderAT]

Bitte ganz dringend noch eine Antwort zu dem, was ich im anderen Thread geschrieben hab!

1) Ich habe nun die Desktopversion fertig. Mobile kommt erst.

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

Wenn ich vier Media Queries verwende und alle min-width und min-height sind, kann das zu Problemen führen oder nicht?

@Media only screen and (min-width: 1px) and (min-height: 1px) -> Design 1
@Media only screen and (min-width: 980px) and (min-height: 600px) -> Design 2
@Media only screen and (min-width: 1143px) and (min-height: 700px) -> Design 3
@Media only screen and (min-width: 1437px) and (min-height: 880px) -> Design 4 (groß)

Hab mit allen Auflösungen getestet und bei mir funktioniert es!

Mit Design meine ich, dass in der CSS nur das Hintergrundbild anders ist und die px-Angaben für die Divs.

Geladen wird in der CSS immer die LETZTE zutreffende Angabe, richtig?
Hat jemand eine Auflösung, die nicht durch Design 2, 3 oder 4 aufgefangen wird, so wird Design 1 geladen.

2) Ist Microsoft Edge ein vollwertiger Browser? Meine Seite sieht mit allen Browsern normal aus. Mit Microsoft Edge aber sind so komische Striche. Kann das CSS nicht?

https://abload.de/img/edgelvi0y.jpg

Im CSS steht nur, dass sich die Farbe ändern bei hover und wenn man wo klickt, kommen Striche oben und unten.

PS Microsoft Edge kann auch das @ media only screen nicht richtig. Lädt bei mehreren Angaben untereinander die falsche, die dann zu klein ist.

 

[Bagbag]

Wenn ich vier Media Queries verwende und alle min-width und min-height sind, kann das zu Problemen führen oder nicht?

Nein, keine Probleme. Wenn sie zutreffen, werden sie angewandt, wenn nicht, dann nicht.

Geladen wird in der CSS immer die LETZTE zutreffende Angabe, richtig?

Ja.

Ist Microsoft Edge ein vollwertiger Browser?

Ja, eigentlich schon, doch sind die Microsoft Browser bekannt dafür, bei allem möglichen CSS und JavaScript Probleme zu bereiten (weil sie vieles erst später Unterstützen als die Konkurrenz). Deshalb beachte ich, zumindest Privat, deren Browser gar nicht mehr. Was funktioniert, das funktioniert, was nicht, das halt nicht. Wer die Browser unbedingt nutzen will (oder muss) hat halt auf meinen Seiten Pech.

An sich empfiehlt es sich jedoch, zumindest für das Layout, dafür Frameworks wie Bootstrap, Bulma, Semantic UI, Foundation, UIkit, Skeleton, Spectre und vielen mehr, zu nutzen. Das vereinfacht einem das Leben sehr. Einige dieser Frameworks kann man auch an seinen Designbedarf anpassen.

PS: Heutzutage ist es "out" für die mobile Variante eine eigene URL zu haben. Einerseits ist das doof, wenn man Links teilt, andererseits hat der Entwickler damit mehr Aufwand. Dank modernem CSS ist das Gott sei Dank nicht mehr nötig.

 

[LeanderAT]

Vielen Dank!

Ich hab im CSS einfach die normalen Links, die hover, die aktiven usw. eingegeben...und hab keine Ahnung, wieso da Edge einen weißen Strich macht beim Bewegen der Maus.

Ja schon, aber der "Entwickler" bin ja ich und für meine Bedürfnisse reicht es. Bin ja auch kein großer Anbieter von irgendwas, sondern eine kleine Band mit wenigen Klicks. Eine mobile Version mach ich nur der Vollständigkeit halber. Ist auch kein Aufwand, weil die andere Möglichkeit (eine Version für alles) viiiel länger dauert und mir auch das know-how fehlt. Bzw. das, was ich könnte und was funktionieren würde, gefällt mir nicht.

 

[Bagbag]

Bei mir ist die Darstellung im Edge und Firefox übrigens gleich (ohne diese Striche). Welche Edge Version hast du denn?

 

[LeanderAT]

Hab auf dem Laptop meiner Freundin getestet. Sie verwendet den Firefox, hat wegen Win10 aber auch den Edge installiert. Anscheinend aber nie upgedatet, weil sie ihn nicht verwendet.
Also hast du keine weißen Streifen in deinem Edge?

 

[Bagbag]

Der Edge aktualisiert sich afaik mit den Funktionsupdates von Windoof. Wenn diese nicht ausgesetzt sind, müsste der Edge aktuell sein.

So schaut es bei mir aus:


Schaut bei mir bis hinab zum IE9 korrekt aus. Das Problem liegt also woanders.

 

[LeanderAT]

Super, danke!

Ergänzung (25. August 2018)

Noch eine Frage: Die Zeile <meta name="viewport" content="width=device-width,initial-scale=1"> bringt NUR für Handys was oder? In der Desktopversion benötige ich sie nicht?

 

[Bagbag]

Rein theorethisch muss es nicht NUR Handys betreffen, in der Praxis ist das aber so.
https://developer.mozilla.org/de/docs/Mozilla/Mobile/Viewport_meta_tag

 

[LeanderAT]

Danke!

 

[mastaqz]

Eine kurze Frage:

Wenn ich für Handys Seiten gestalte, nehme ich da die direkte Auflösung her, z.B. 320x480...und verwende alles in ganz klein (Logo, Grafiken)?

Oder gestalte ich alles mit einem Multiplikator, z.B. in 960x1440 und das Handy passt alles dann automatisch in den kleineren Screen?

Das Stichwort heißt "Mobile First".
Basis für kleine Devices bauen und beim Erfüllen der Media Queries zusätzliche Qualitätsstufen liefern.
Native Auflösung (Image Resolution = Screen Resolution) wird bei den meisten Bildern bei normalen Sitzabständen auch nicht benötigt. Und alle Bilder nach dem Resizen optimieren (imagemin, tinypng etc.).
Ausnahme kann sein, wenn das Bild der eigentliche Content ist, bspw. bei einem Fotograf, der seine Bilder präsentiert. Aber selbst da macht man eigentlich eine kleine Vorschau und dann beim Hovern oder Klicken nur Fullsize.

Ein User mit einem 960*540 Device benötigt kein 1440*960 Bild.
Das senkt die User Experience, speziell bei unbeständigen Netzen (Bahnfahrt etc.).
Ob du das per Media Query oder "img srcset" umsetzt, ist dir überlassen.

 

[LeanderAT]

Danke! Ich bräuchte eigentlich nur was Tabellenmäßiges.

https://abload.de/img/tabcset5.jpg

Waagrecht macht A 15% aus, Logo 70%, B 15%. Bei A und B kommen kleine Infos rein (Sprache, Datum der Aktualisierung usw.)....

Der Content kommt in das Feld darunter.

Mit den alten HTML-Tabellen kann ich das, aber mit CSS muss ich es erst mal anschauen.

Mein Handy hat 288x420, Samsung Galaxy Mini 2 (sehr klein). Da soll eine Logografik auch nur ca. 100px hoch sein oder soll ich alles größer machen und das Handy rechnet dann runter? Das hab ich noch nicht so verstanden.

Also, falls ich eine bildschirmfüllende Grafik nehmen würde, ob die dann 288x420 sein soll oder das Doppelte und das Handy rechnet runter.

Bzw. wenn ich eine Grafik, die dann auf Vollbild gestreckt wird, nehme, wie groß soll die sein für alle Handys?
_______________
15% 70% 15%

 

[mastaqz]

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images