Umstellung auf responsive/Neukonzeption
1 
Robert B.
0 
Rolf B
0 Felix Riesterer
Umstellung auf responsive/Neukonzeption
Guten Abend,
ich soll endlich eine Anwendung, die nur für den PC entwickelt wurde, für schmale Viewports anpassen.
Ich habe längere PHP-, HTML- und CSS-Erfahrung, bin aber in einem Alter, wo man nicht mehr so schnell etwas Neues (Grid, Flexbox und all das andere) lernt!
Mein Motto ist also nicht "learning by doing" sondern "doing by copying".
Ich hoffe, hier Unterstützung zu finden.
Als Vorlage wünschte ich mir eine Beispielanwendung, die am Host etwa folgendermaßen aussieht:
Am Smartphone soll es etwa so aussehen:
-
Moin Gabriele
ich soll endlich eine Anwendung, die nur für den PC entwickelt wurde, für schmale Viewports anpassen.
ob dieser Ansatz oder gerade der umgekehrte besser sind, wird hier gerade diskutiert.
Ich habe längere PHP-, HTML- und CSS-Erfahrung, bin aber in einem Alter, wo man nicht mehr so schnell etwas Neues (Grid, Flexbox und all das andere) lernt!
Mein Motto ist also nicht "learning by doing" sondern "doing by copying".
Ich hoffe, hier Unterstützung zu finden.
Das Motto von SELFHTML lautet Die Energie des Verstehens, daher ist unser Ansatz „learning (and understanding) by doing“. Meiner bescheidenen Erfahrung nach führt unverstandenes Kopieren nie zum gewünschten Ergebnis, weil man nicht versteht, was weshalb passiert. Das Resultat ist zudem unwartbar und voller Cargo Cult. Natürlich hat eine Lernkurve eine Steigung, aber die ist niedriger als unwartbaren, unverstandenen Code wieder und wieder komplett wegwerfen zu müssen, weil etwas nicht passt.
Als Vorlage wünschte ich mir eine Beispielanwendung, die am Host etwa folgendermaßen aussieht:
Am Smartphone soll es etwa so aussehen:
Ich denke, dass Dir unser Wiki sehr weiterhelfen kann, z.B. auch die CSS-Tutorials wie
- https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Webseiten_responsiv_umbauen
- https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid
- https://wiki.selfhtml.org/wiki/CSS/Media_Queries
Viele Grüße
Robert-
Hallo Robert,
Meiner bescheidenen Erfahrung nach führt unverstandenes Kopieren nie zum gewünschten Ergebnis, weil man nicht versteht, was weshalb passiert.
Bei meiner geschilderten Erfahrung kannst Du davon ausgehen, dass ich nicht blind kopiere sondern schon gezielt hinschaue, was ich mache.
Schönen Gruß
Gabriele
-
Moin Gabriele,
Meiner bescheidenen Erfahrung nach führt unverstandenes Kopieren nie zum gewünschten Ergebnis, weil man nicht versteht, was weshalb passiert.
Bei meiner geschilderten Erfahrung kannst Du davon ausgehen, dass ich nicht blind kopiere sondern schon gezielt hinschaue, was ich mache.
dann steht Der Energie des Verstehens ja nichts im Weg – Rolf und ich habe Dir bereits hoffentlich hilfreiche Fragen gestellt und Tipps gegeben.
Viele Grüße
Robert -
Hallo Gabriele,
und dann kannst Du bestimmt auch meine Rückfragen beantworten. Ohne Antworten ist ein Musterlayout ein Stochern im Nebel.
Rolf
--
sumpsi - posui - obstruxi
-
-
Hallo Gabriele,
Roberts Hinweise auf das Wiki sind auf jeden Fall hilfreich. Das Thema "Menü" wird in der Artikelgruppe Navigation behandelt. Dies richtig und zugänglich zu machen, ist nicht trivial. Ob es mit den neuen command-Attributen ohne JavaScript lösbar ist, weiß ich noch nicht. Bisher brauchte man JavaScript für eine gute UX bei Assistenztechniken.
Ein @media-gesteuertes Grid-Layout für deine Seite scheint auf den ersten Blick trivial. Aber…
Du sagst, du hast Erfahrung. Dann solltest Du wissen, dass zwei Screenshots/Skizzen nicht reichen, um etwas hinreichend genau zu spezifizieren. Spontan fallen mir folgende Unklarheiten auf:
- Sollen Thema1 bis Thema10 in der "Schmal" Ansicht hinter dem Hamburger-Button erscheinen?
- Sind die Links zu Datenschutz und Impressum am unteren Bildschirmende festgenagelt oder muss man, um sie bei längerem Artikeltext zu erreichen, nach unten scrollen? Oder anders gefragt: welche Teile der Seite sollen scrollen, wenn der Artikel oder auch die Themenbox zu hoch sind?
- Es sieht so aus, als würde der "Text" neben dem "Bild" nicht über die Breite der Themenliste hinausragen und der "Seitentitel" über dem Artikel zentriert sein. Was soll im Layout passieren, wenn da nicht "Text", sondern "Textverarbeitungsprogramm" steht? Was soll passieren, wenn dieser "Text" in den "Seitentitel" hineinragt? Nach welchen Vorgaben soll die Breite verteilt oder umgebrochen werden?
- Wo landet in der schmalen Ansicht die Themen-Überschrift? Und vor allem: Was ist <h1> und was ist <h2>? Wenn die Themen-Überschrift die h1 sein soll, dann darf sie nicht einfach weggelassen werden.
Die Auswirkungen der Antworten können von klein bis gravierend reichen. Ohne Antworten ist zu vermuten, dass ein Muster-Wireframe deinen Wünschen nicht gerecht wird.
Rolf
--
sumpsi - posui - obstruxi-
Hallo Rolf,
Ein @media-gesteuertes Grid-Layout für deine Seite scheint auf den ersten Blick trivial
meine Skizze ist nur eine erste Idee, wie es aussehen könnte. Ich bin ziemlich frei, was die Ausführung angeht. Daher die Frage nach einer ähnlichen, "trivialen" Anwendung.
Schönen Gruß Gabriele
-
Liebe Gabriele,
kurze Antworten haben das Potenzial missverstanden zu werden. Je kürzer die Antwort, desto größer das Potenzial.
Ich bin ziemlich frei, was die Ausführung angeht.
Gut für Dich. Sagt uns hier aber nicht, wie Du es jetzt wirklich haben willst.
Daher die Frage nach einer ähnlichen, "trivialen" Anwendung.
Besser wäre eine konkretere Beschreibung gewesen, wie es (für's erste) genau aussehen und funktionieren soll. So sind wir keinen Deut schlauer. Leider.
Liebe Grüße
Felix Riesterer
-
Rekonstruktion des Beitrags vom 06.05.2025 18:05 nach Thread-Teilung. Popover-Diskussion ist hier
Hallo Gabriele,
eine "ähnliche, triviale Anwendung" habe ich nicht in der Schublade. Eine triviale Webseite verzichtet auf großartiges Layout und stellt alle Elemente untereinander, ohne Nebeneinander oder Popups. Was Du möchtest, ist deutlich mehr als trivial und muss korrekt geplant werden, andernfalls ist die Seite unzugänglich.
Meine Fragen beziehen sich darauf, welche Bedeutung deine Oberflächenelemente haben und wie sie sich verhalten sollen. Wie ich schon sagte: die Antworten auf meine Fragen können starken Einfluss auf das Ergebnis haben. Wenn ich falsche Annahmen treffe, zeige ich Dir ein Musterlayout, an dem Du Dir nachher die Finger brichst, weil die Grundkonzeption nicht passt. Oder das Du nachher mit "Diesen Scheiß haben die Schwachköpfe bei Selfhtml gemacht und es ist völlig unbrauchbar" in die Gegend posaunst.
Was ich zu fragen vergaß: Welche Bedeutung haben "Bild" und "Text" oben links? Ich vermute ein Logo, bzw. zusammen die Wort-Bild Marke des Seitenanbieters. Stimmt das?
Ich habe mal eine Demo gemacht: https://jsfiddle.net/r8q4t6mf/1/
Kommt das Deinen Vorstellungen nahe? Die Breite kannst Du anpassen, indem Du den senkrechten Trennbalken zwischen den Fenstern mit der Maus verschiebst. Ein Bild hatte ich keins zur Hand, darum ist da dieses div mit dem Farbverlauf drin. Aber weil es ein Bild simuliert, habe ich ihm das alt-Attribut verpasst.
Das Hamburger-Menü habe ich mit dem Unicode Zeichen ︙gemacht. Für 3 Streifen gibt's andere Zeichen oder Du machst Dir ein SVG-Bild dazu. Dieser BLÖDE Menübutton zeigt, wie schnell der Aufwand eskaliert, wenn Du eigene Controls auf der Seite haben willst. Aber ohne das ganze Zusatzgeraffel ist der Button für Nutzer von Assistenztechniken nur ein höchst obskures Gebilde, und ein eingebautes Browser-Feature "Menü-Button" gibt's nicht. Mit dem Command- und Popover-API kann man vielleicht etwas machen, aber nach meinem Kenntnisstand funktioniert da die Positionierung der Popovers nicht 100%-ig.
<button type="button">︙</button><button type="button" aria-expanded="false" aria-controls="main-menu"> <span aria-hidden="true">︙</span> <span class="visually-hidden">Themenauswahl</span> </button>Farben sind eh Schall und Rauch und visualisieren hier höchstens, welches Element wo und wie groß ist. Das Menü ist mit JavaScript gesteuert. Eine Logik, die es auch bei kaputtem/fehlendem JavaScript sichtbar macht, fehlt noch, ist aber für einen Produktiveinsatz eigentlich nötig. Aber damit wird das ganze Gedöns nochmal deutlich komplexer.
Zum Verständnis dessen, was ich gemacht habe, solltest Du das Wiki konsultieren.
Ich behaupte keinesfalls, dass diese Demo die einzige Wahrheit ist. Man kann das auch ganz anders lösen und Perfektion habe ich aus Zeitgründen eh nicht angestrebt.
Rolf
--
sumpsi - posui - obstruxi
-
-
Liebe Gabriele,
kann es sein, dass Du mir einst ein leckeres Kürbiskernöl geschenkt hattest?
Liebe Grüße
Felix Riesterer
-
Hallo Felix,
leider nein, aber was nicht ist, kann ja noch werden 😉
Gruß Gabriele
-