responsive Design - Wie heangehen

[1cK3]

Hallo liebe Alle,
Dies ist mein erster Beitrag hier und ich freue mich, einen Raum gefunden zu haben, in den ich diese folgende Frage unterbreiten kann.

Vorgeschichte:
Ich habe ein mir sehr wichtiges Projekt recht stümperhaft (prozedural, nicht responsiv, ohne jegliche Sicherheit) vollendet und dabei PHP gelernt.
Nun soll das ganze nochmal ordentlich und möglichst nach allen Regeln der Kunst gemacht werden.

die Frage:
Doch dieses responsive Design stellt mich doch vor Fragen, deren Beantwortung mir im Selbststudium nicht möglich war.
Ich weiß, wie ich ein Design bastel, das sich durch relative Größenangaben dem Viewport anpasst. Ich weiß, wie ich mit media-queries ein spezifisches Design schreiben kann und ich weiß, dass ich den mobile-first- Ansatz beachten soll.

Aber ich frage mich: Wie kann ich spezielle HTML-/PHP- Elemente für ein spezielles Device (Smartphone) einbauen? Denn gern würde ich spezielle Elemente in Buttons auslagern, zum Beispiel die Navigation. (So wie es https://netzpolitik.org/ tut: Die Navigation verschwindet bei Smatphone-Breite hinter einem Button.)
Wenn ich das aber tu, dann habe ich je nach Situation leere HTML-Elemente (die Navigation/ UL). Blende ich diese via PHP ein oder aus oder wie löst mensch so etwas professionell/ elegant? Gibt es eine Musterlösung? Steh ich auf dem Schlauch?

Die Seite soll aus Gründen der Barrierefreiheit für Skeptiker_Innen ohne JS funktionieren.

vielen Dank im Voraus für Tips und Anmerkungen.

[sysop]

Lösung biete ich dir keine, dafür ist das Thema zu umfangreich.

Generell wird RD (responsive Design) mit CSS(3) gelöst.

Generell funktioniert das so:
Nach Herausfinden der Auflösung des Endgerätes wird eine entsprechendes Stylesheet geladen, dass die Anzeige für das Endgerät optimiert. Relative Grössen, die den Viewport des Endgerätes übersteigen sind zu vermeiden. Die Navigation erfolgt in den meisten Fällen in Form von Listen, die sich beliebig über CSS anpassen und stylen lassen.

In meinen Augen wird dabei eines der wichtigsten Prinzipien der letzten Jahre, genauer gesagt des Internets überhaupt, auf den Kopf gestellt, bzw. ad absurdum geführt.
Habe ich vor ein paar Jahren noch gepostet, dass das Design unabhängig von der Auflösung erfolgen sollte, geht RD genau den umgekehrten Weg und straft meines Aussagen von früher folglich Lügen.
Ansichten im Wandel der Zeit halt...

[1cK3]

Hallo Sysop,
danke für die schnelle Antwort.

Ich konnte mein spezifisches Problem tatsächlich lösen. Stichwort: responsive Navigation und Hamburger Button.

Für alle, die ähnliche Probleme haben:
Auf dem mobile wird die Navigation via "checkbox-hack" ein-ausgeblendet (display:hidden vs. display:block), sodass nur der berühmte Hamburger-Button zum Menü führt.
Bei größeren Bildschirmen (media-query) kann mensch die Navigation dann wieder einblenden und formatieren und den Hamburger-Button ausblenden.

display:block und display:hidden seien allerdings bei barrierrefreien Auftrittten nicht geeignet, da sie vom Screenreader ignoriert würden (hab ich gelesen). Aber da gibt es wohl auch Workarounds.

Allen mit dem selben Problem wünsche ich, dass das weiterhilft. Entsprechend würde ich den thread jetzt als gelöst markieren, wüsste ich, wie das geht.
Wie geht das?

liebe Grüße
1cK3