Hallo. Ich schreibe mir gerade eine Website zusammen und habe eine
Frage, welche das Thema responsive design und dynamische Webseiten
betrifft.
Abhängig von der device-width des aufrufenden Gerätes gibt es zwei
css-Dateien, eine Desktop- und eine Mobil-Variante. Läuft!
1
<link rel="stylesheet" type="text/css" media="screen and (min-width: 499px)" ref="d1.css">
2
<link rel="stylesheet" type="text/css" media="screen and (max-width: 498px)" ref="d2.css">
Ich würde gerne aber auch die HTML-Inhalte entsprechend anders
gestaltet, je nachdem, ob ein Desktop-Rechner oder ein Handy die Seite
aufruft.
Wie oder besser gesagt, womit würdet Ihr sowas angehen? Java-Script?
Müsste ich mich einarbeiten, weil ich es eigentlich meiden wollte.
Dynamisch mit Python und CGI? Würde mir eher liegen, da es schon in
anderer Sache läuft.
Oder gibt es vielleicht eine weniger aufwendige Lösung, ähnlich wie bei
Aufrufen unterschiedlicher css-Dateien, so dass ich, abhängig von der
Device-Breite unterschiedliche html-Dateien aufrufen kann?
So etwas wird in anderer Form doch auch schon für unterschiedliche
Sprachen eingesetzt. Dann müssten doch auch unterschiedliche Inhalte
machbar sein, oder irre ich mich da?
Sorry wegen der irreführenden Überschrift. "Menüsteuerung" und dann
erwähne ich das in meiner Frage nicht mal. Grundsätzlich wollte ich auch
eine andere Menüsteuerung als alternativen Inhalt, daher der Titel.
Du kannst Klassen erzeugen, die bei einem der beiden Stylesheets nicht
gerendert werden.
Dieser Schnipsel blendet z.B. bei mir auf mobilen Seiten die zweite
Menü-Ebene (also alle ul-Elemente unterhalb ul innerhalb des divs mit
der ID #Menu) aus:
1
@media only screen and (max-width:481px) {
2
3
div#Menu ul * ul {
4
display:none;
5
}
6
}
Das geht natürlich nicht nur mit IDs, sondern auch mit Klassen.
Hallo Walter, danke für die Antwort.
Würde es auch gehen, wenn ich zwei Textklassen definiere, eine, sagen
wir für die Desktop-Variante und eine Mobile und Erstere dann einfach
über display:none; ausblende, wenn ein mobiles Gerät die Seite aufruft?
Bleibt der Bereich dann einfach leer oder ist der Bereich quasi
entfernt, so dass nachrückende Elemente nach oben aufrücken?
Ganz wichtig und als Erstes: Keine Pixel, sondern rem angeben. 499px auf
einem Phone mit Retina Display sind was anderes als auf einem mit 400 x
300px, bei gleicher Bildgröße.
Zweitens, Du kannst auch eine CSS verwenden und mit @media umschalten.
Wie anders sollen die Inhalte sein? Gleicher Inhalt und nur anders
angeordnet? Anderer Inhalt? Gleicher Inhalt und nur andere / kleinere
Menüs?
Es gibt da viele veschiedene Ansätze. Für mich ist dabei rausgekommen:
Moderne HTML5-Elemente wie article, footer, menu vereinfachen die Sache
enorm. Und ohne JS geht eigentlich nicht. Man kann da was mit HTML5
zusammenbasteln, aber so richtig funktioniert das nicht, und es ist
deutlich umständlicher als ein paar Zeilen JS.
Ich mache es zum Beispiel so, dass das Seitenmenu bei schmalen
Browserfenstern nach links rausgeschoben wird, sprich die ganze Seite
bekommt ein Offset von -10rem. Nur oben ist ein Burger-Button, mit dem
das Menu wieder eingeblendet wird. Das funktioniert sogar, wenn man das
Tablet von Hoch auf Quer stellt.
Aber wie gesagt, es gibt sehr viele Wege und es hängt von der Art der
Webseite ab, welches man bevorzugt. Es gibt diverse Seiten, die das
beschreiben und es gibt sogar Generatoren, die entsprechende Codegerüste
bauen.
Peter S. schrieb:> Würde es auch gehen, wenn ich zwei Textklassen definiere,
Andersherum: Die Klassen bleiben immer gleich. Nur das Rendern ändert
sich, weil die Klassen im CSS unterschiedlich definiert sind.
Peter S. schrieb:> Bleibt der Bereich dann einfach leer oder ist der Bereich quasi> entfernt, so dass nachrückende Elemente nach oben aufrücken?
Bei display:none; wird das Element so behandelt, als sei es nicht im
Quelltext vorhanden. Willst Du leeren Platz erzeugen: visibility:hidden;
Karl K. schrieb:> Und ohne JS geht eigentlich nicht.
Ansichtssache. Ich komme mittlerweile wieder ohne aus - habe aber auch
keinerlei Problem damit, daß das Layout nicht auf allen Geräten
hundertprozentig gleich aussieht, sondern lediglich gut darstellbar ist.
@ Karl K.
rem ist notiert, danke für den Tipp.
Was die Inhalte angeht, hatte ich an ganz andere gedacht. Auf der
Desktop-Version sollte ein längerer Text stehen und auf dem mobilen
Gerät wollte ich unter anderem auf eine deutlich verkürztere Version
zurückgreifen, damit man sich dort keinen Wolf liest. Auch die
Menüpunkte könnten etwas verkürzt sein. Bsp. Desktop-Menü: Aus Jahrgang
könnte bspw. Jg. werden, wobei das nicht so wichtig ist. Nur damit klar
ist, das es um andere Inhalte geht.
Meine Menüsteuerung habe ich ähnlich wie Du derart gestaltet, dass das
Menü nach links versetzt wird und eine andere Form annimmt, wenn es
mobil wird. Woran ich nicht gedacht habe, war, dass worauf Walter mich
hingewiesen hat, nämlich das ich Untermenüs ausblenden kann.
Frage, was hälst Du denn von Python/cgi? Ich würde Python gegenüber
Java-Script favorisieren. Wäre das praktikabel, wenn ich den Inhalt der
Startseite dynamisch über diese Variante erzeugen würde? Wäre vielleicht
auch etwas umfangreicher, aber möglich. Die Frage ist, ist das auch
sinnvoll oder gibt es irgendwelche Bedenken, welcher Art auch immer, die
dagegen sprechen würden? Effizienz mal ausgenommen.
Lach, mir fällt gerade auf, dass Walter die Frage beantwortet hat. Kein
Java-Script und Python/cgi, nein nein nein.
Ich schreibe einfach Klassen/IDs in meine zwei css-files und schreibe
zwei Texte mit unterschiedlichem Klassen-/ID-Tag in die index.html.
Mittels display:none; lasse ich dann entweder das Eine oder Andere
anzeigen. Genauso wie ich es wollte.
Ginge sicherlich auch simpler, aber ich wollte, dass meine Seite ganz
ohne Java-Scripte und co. auskommt.
Ich hasse diese "responsive" Designs. Sie raten rum, was der Anwender
wohl will, liegen oft (bei mir fast immer) daneben und bieten keine
Möglichkeit, die andere Variante auszuwählen.
Die herkömmliche Methode über "www.seite.de" und "m.seite.de"
funktioniert dagegen hervorragend.
foobar schrieb:> Die herkömmliche Methode über "www.seite.de" und "m.seite.de"> funktioniert dagegen hervorragend.
Wow, Du hast ne eigene TLD im Intranet?
Abgesehen davon, dass man dann jede Seite zweimal erstellen muss,
Änderungen immer zweimal vornehmen muss...
Karl K. schrieb:> foobar schrieb:>> Die herkömmliche Methode über "www.seite.de" und "m.seite.de">> funktioniert dagegen hervorragend.>> Wow, Du hast ne eigene TLD im Intranet?
Bahnhof?
> Abgesehen davon, dass man dann jede Seite zweimal erstellen muss,
Nicht "muss", "kann". Der Webserver darf gerne auf beide URLs die
gleichen Inhalte ausliefern. Sinnvoll wäre natürlich, wenn angepasste
Daten geschickt würden (z.B. unterschiedliche Stylesheets oder
Grafiken).
Peter S. schrieb:> Ich würde gerne aber auch die HTML-Inhalte entsprechend anders> gestaltet, je nachdem, ob ein Desktop-Rechner oder ein Handy die Seite> aufruft.
Meiner Meinung nach vermischst du hier Bildschirmformat und Art des
Rechners. Gerade bei der heutigen Gerätevielfalt ist das aber nicht mehr
das selbe.
Art des Rechners (für mich):
- Desktop: meistens großer Bildschirm, Mausbedienung
- Handy: meistens kleinerer Bildschirm, Touchbedienung
... Laptop, Tablet usw. fehlen
Wenn du jetzt versuchst anhand der Bildschirmgröße zu ermitteln, was es
für ein Gerät ist, liegst du warhscheinlich häufig daneben (z.B. Laptop
mit Touch, großes Tablet). Was passiert, wenn man sein Smartphone dreht
und sich dadurch der Text ändert?
Ich würde es eher so angehen:
1) Alles sollte mit der Maus und mit Touch bedienbar sein. d.h. keine zu
kleinen Buttons.
2) Definiere sinnvolle Grenzen für einzelne Element bei denen du diese
änderst. z.B. Menüleiste wird reduziert oder eingefahren, je kleiner das
Bild wird. Textspalten könnten bei zu schmalem Bild eingeklappt werden.
Karl K. schrieb:> Ganz wichtig und als Erstes: Keine Pixel, sondern rem angeben.
Das ist richtig, aber der Grund ist falsch.
> 499px auf> einem Phone mit Retina Display sind was anderes als auf einem mit 400 x> 300px, bei gleicher Bildgröße.
Die Pixel in CSS sind keine physikalischen Pixel, sondern CSS-Pixel.
Beim iPhone 6 beispielsweise sind 2x2 physikalische Pixel ein logisches
CSS-Pixel.
In rem (oder auch em, je nachdem) macht man das, damit die User zoomen
können und die Webseite trotzdem noch funktioniert, d.h. als Teil der
Barrierefreiheit.
M.K. B. schrieb
>1) Alles sollte mit der Maus und mit Touch bedienbar sein. d.h. keine zu>kleinen Buttons.
label for="toggle" ☰
Klein ist relativ. Ich finde die obige Lösung eigentlich ganz gut. Das
sich durch den Link öffnende Menü kann man ja nach Gusto ausgestalten.
Da sagt kleiner, dass das extrem klein sein muss.
>Meiner Meinung nach vermischst du hier Bildschirmformat und Art des>Rechners. Gerade bei der heutigen Gerätevielfalt ist das aber nicht mehr>das selbe.
Der Gedanke war, ungeachtet der Anfangs angegebenen 498px Grenze (nur
ein Beispielwert), etwa bei 10 Zoll Hochformat umzuschalten. Wenn das
selbe Gerät dann im Querformat das große Menü anzeigt,works for me. Ich
wollte auch nicht jedes auf dem Markt verfügbare Gerät abdecken.
Responsive Design ja, aber man muss es auch nicht auf die Spitze
treiben, ist meine Meinung.
Bin auch kein Freund davon, mittels Browserweichen jeden noch so alten
IE abzudecken. Irgendwann ist auch mal gut. Gibt garantiert auch noch
Leute, die Win XP und so nutzen.
Thread beobachten
Seitenaufteilung abschalten