✔ Responsives Webdesign - Überflüssig?

[Alice]

Hallo Freunde.

Im Rahmen einer modernisierung meiner Webseite, bin ich gerade dabei, die Webseite Responsive zu gestalten.
-
Dabei stellt sich mir folgende Frage.

Ich habe eine Tabelle mit 4 Zellen nebeneinander. Diese "spreche" ich mit Kindselektoren ab, um mein HTML-Bereich sauber und übersichtlich zu halten.

main > table > tbody > tr > td:nth-child(1)
main > table > tbody > tr > td:nth-child(2)
main > table > tbody > tr > td:nth-child(3)
main > table > tbody > tr > td:nth-child(4)

So...

Nun blende ich für das Responsive Design die TD's 3 und 4 mittels "display: none;" aus.

Frage:
Wäre es empfehlenswert die restlichen Stylesheets ebenfalls zu löschen, weil die eh nicht mehr benötigt werden?

Zum Verständnis:

main > table > tbody > tr > td:nth-child(1)
main > table > tbody > tr > td:nth-child(1) > span /* Farben, Formen, Abstände */

main > table > tbody > tr > td:nth-child(2)
main > table > tbody > tr > td:nth-child(2) > h3 /* Farben, Formen, Abstände */

main > table > tbody > tr > td:nth-child(3)
main > table > tbody > tr > td:nth-child(3) > span /* Farben, Formen, Abstände */
main > table > tbody > tr > td:nth-child(3) > span > div /* Farben, Formen, Abstände */

main > table > tbody > tr > td:nth-child(4)
main > table > tbody > tr > td:nth-child(4) > h4 /* Farben, Formen, Abstände */
main > table > tbody > tr > td:nth-child(4) > footer /* Farben, Formen, Abstände */
main > table > tbody > tr > td:nth-child(4) > footer > div /* Farben, Formen, Abstände */

Wäre es Ratsam die "gestalter" Elemente darunter zu entfernen?

main > table > tbody > tr > td:nth-child(1)
main > table > tbody > tr > td:nth-child(1) > span
main > table > tbody > tr > td:nth-child(2)
main > table > tbody > tr > td:nth-child(2) > h3
main > table > tbody > tr > td:nth-child(3)   /* display: none; */
main > table > tbody > tr > td:nth-child(4)   /* display: none; */

 

[SpiceLab]

Für gewöhnlich sind die Media Queries in derselben CSS-Datei untergebracht. Somit können die Regeln darin auch nicht entfernt werden.

 

[Alice]

Ich mache das anders, da die Webseite zu Umfangreich ist.

<link rel="stylesheet" media="screen and (min-width: 1024px) and (max-width: 40000px)" href="desktop.css" />

 

[SpiceLab]

Wenn da separate CSS-Dateien existieren, sieht's natürlich anders aus, und ihr Inhalt unterscheidet sich dann entsprechend voneinander.

 

[SpiceLab]

Auf den Punkt gebracht, um Deine Frage konkret zu beantworten: was in einer der nachfolgenden CSS-Dateien mit display:none versteckt wird, benötigt darin natürlich keine weiteren Formatierungen mehr aus desktop.css. Das gilt selbstverständlich auch für dessen Kind(er)element(e).

 

[Alice]

Ich muss also nur sicherstellen, die nicht benötigten Elemente zu deaktivieren. Der rest kann gelöscht werden.

Danke.

 

[SpiceLab]

Ganz genau

Durch

main > table > tbody > tr > td:nth-child(3)   /* display: none; */

ist

main > table > tbody > tr > td:nth-child(3) > span /* Farben, Formen, Abstände */
main > table > tbody > tr > td:nth-child(3) > span > div /* Farben, Formen, Abstände */

obsolet.

 

[Alice]

Keine Ahnung ob ich für die folgende Frage ein neues Thema starten sollte...?

Ich habe in meinem Forum im Header auf der linken Seite ein Logo und auf der rechten Seite eine kleine vertikale Navigation. Beide Elemente mit "position: absolute;" posioniert. Jetzt kam mir jedoch die Idee das ganze Zeug in eine Ul-Auflistung zu packen, um das Reponsive Design genau nach meinen wünschen zu gestalten.

Habe dazu eine kleine Demo vorbereitet.

http://jsfiddle.net/vkjws3wz/1/

1.) Ist das "okey" so?
2.) Denkfehler
3.) CSS-Fehler

Ist es "empfehlenswert" ein Li mit einer absoluten Position zu positionieren?

 

[SpiceLab]

Und wieder die Gegenfrage: was soll an dieser Technik nicht in Ordnung sein?

Wenn Du es so aufbauen willst, und alles anstandslos funktioniert, warum nicht?

 

[Alice]

Weil ich das gefühl habe das Ul-Element - so - falsch einzusetzen. So als würde man klassische Tabellen für das Design verwenden. Never.

Wie findest Du es denn persönlich so? Wenn "schlecht"... besserer Vorschlag?

Ich muss ja jetzt wegen den "reponsiven Design" meine Gestaltungsweise ändern, um später nur noch das CSS anzupassen. Das HTML bleibt ja "stehen".

Mit dieser Vorgehensweise (Ul/Li) kann ich später das Logo und das Menü als "Hamburger" (Icon) direkt nebeneinander oder sauber Untereinander (iPhone 4) ausrichten ohne groß zu fummlen.

Mich "stört" hauptsächlich das a) "absolute" in einem Li und b) der H1-Tag in einem Li + Nav* Element.

* Vielleicht interpretiert es Google&Co falsch als Überschrift der Navigation.