Die Media-Queries bringen mich zum Heulen...
0 
Rolf B
1 
Auge
0 0 Auge
0 
Gunnar Bittersmann
0 0 Rolf B
0 
Michael_K
Die Media-Queries bringen mich zum Heulen...
JürgenB
Matthias ScharwiesHallo an Euch Alle! Wie schon geschrieben, bin ich erst seit Kurzem wieder daheim und habe die Website sofort wieder auf den "Schreibtisch" zurück bekommen, mit dem freundlichen Hinweis: Die Mobilansicht geht gar nicht ( stimmt!!!!!) und muss /sofort!/ neu gestaltet werden, weil wir ansonsten am 01.03. bei Google aus dem Ranking fallen und ich bin schuld daran. Zudem sei auf einem 10" Pad die Schrift so klein, dass einige Gemeindeglieder diese nicht lesen können, das 3-fache drop- down- Menü nervt und der ausdruckbare Gemeindebote im PDF- Format fehlt. Also habe ich mich seit Freitag mal ran gemacht und das Menü verändert und den Gemeindeboten eingebunden. Die Änderungen habe ich noch nicht auf den Server geladen- sind aber fertig! Dann wollte ich - mal eben schnell- die Mobilansicht ändern! Denkste...
Was habe ich vor: Ich möchte 3 verschiedene Viewportgrößen ansprechen. 1. bis 600px; 2. von 600px bis 1370px und 3. von 1370px bis - open end.
Um keine ellenlange und damit unübersichtliche .css- Datei zu bekommen, habe ich zuerst im HTML-Text ( zur Probe nur in der index.htm) drei .css Dateien eingebunden.
**HTML**
<head>
...
<link rel="stylesheet" href="css/index_mobile.css">
<link rel="stylesheet" href="css/index_medium.css">
<link rel="stylesheet" href="css/index.css">
`<meta name="viewport" content="width=device-width, initial-scale=1.0"> `
</head>
**CSS** mit je einer Angabe:
@media (max-width: 600px) {
@media (min-width: 600px) and (max-width: 1370px) {
@media (min-width: 1370px) {
Ergebnis: Nur die index.css wird eingelesen und über alle Größen hinweg angezeigt.
Könnt Ihr erkennen, wo mein Denkfehler liegt? In diesem Moment überlege ich gerade, ob ich nicht den Term:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
vor die .css- Aufrufe platzieren müßte. Das probiere ich gleich mal aus. Ansonsten hoffe ich auf ein paar freundliche Ideen von Euch.
Wenn alle Stränge reißen- dann mach ich "kurzen Prozess" und schreibe a) den Inhaltstext um (mit Grid - oder Flexmodell) oder b),ich schreibe eine "mobile-Version" als 2. Homepage und setze einfach einen Link: " hier gehts zur mobilen Version" auf die index.htm . Das Ganze dann auf einen anderen Server- und fertig bin ich... . Das ist saudoof- und ist ja nur doppelte Pflegearbeit- ich weiß... und evtl. wäre das Google-Ranking dann auch nicht mehr das, was es mal war. Ich sitze bereits gut 24 Stunden daran- und bin keinen einzigen Schritt weiter gekommen.
Liebe Grüße von (einem frustrierten) Michael ( und dabei soll ich mich doch nicht aufregen...🤔 )
P.s.: 1370px ist genau der Wert, wo der 2-spaltige Hauptinhalt der index.htm auf eine Spalte ( unschön) umgebrochen wird.
-
Hallo MichaelS,
die Responsivität deiner Seite hatte ich bisher noch nicht im Blick. Wenn Du 3 CSS Dateien einbettest und jede einen @media Block hat, sollten sie aber auch alle 3 geladen werden. Prüfe das in den Entwicklerwerkzeugen - im Inspektor (sind die <link> Elemente da) und im Netzwerk-Tab (wird die .css Datei geladen). Je nach Hoster hast Du ggf. veraltete Daten in einem Cache, eliminiere das zur Not durch einen Cache-Buster (hänge sowas wie ?bust=8234723 an die URL an, der Parametername ist frei wählbar, die Zahl ist ein Zufallswert, verändere den Wert um ein Neuladen zu erzwingen. Hintergrund: Caches beachten URL Parameter und cachen nur URLs mit komplett identischer URL, aber dem Webserver ist beim Laden der CSS Datei der Parameter egal).
Kannst Du die Seite auf euren Server bringen - z.B. in ein test-Verzeichnis? Dann könnte man sich live anschauen, was da passiert.
Es ist allerdings wenig sinnvoll, das komplette CSS für 3 Breiten vorzuhalten. Das meiste wird gleich sein. Baue die Seite deshalb für die minimale Breite auf (mobile first Ansatz) und füge dann CSS für breitere Viewports hinzu, die dann Dinge nebeneinander setzen oder vergrößeren.
Gib deinem Body nicht width:100vw. Bei breiten Screens ist das unlesbar. Setze lediglich eine max-width von ca 60em - je nach Vorhandensein von Deko-Elementen auf der Seite kann man das noch etwas variieren. Mit margin:0 auto zentrierst Du den Inhalt dann horizontal; das hast Du schon drin. Ok.
Eins stößt mir noch auf: Die font-size Angaben in vw. Die führen in der aktuellen Form dazu, dass auf kleinen Viewports die Schrift viel zu klein ist. Auf einem sehr breiten Bildschirm (und meiner ist 3840px breit!) dagegen ist sie viel zu riesig.
Wir hatten das Thema Fontsize basierend auf Viewportbreite früher schon einmal, ich weiß allerdings nicht, ob im Zusammenhang mit Dir. Wenn ich in deinem Body aber
font-size: calc(0.8em + 0.6vw);sehe, dann glaube ich, dass es für deine Seite war.Empfehlung: Vergib auf dem :root Element eine Basis-Fontsize. Wenn die basierend auf der Viewportbreite sein soll, dann so, dass es eine Minimal- und Maximalgröße gibt. Dazu kann man die clamp-Funktion verwenden. Die ist ist seit 2 Jahren in allen Browsern außer IE verfügbar, aber der interessiert nicht mehr. Ein älteres iPad, das nicht upgedated wurde, könnte aber schon betroffen sein. Diese Geräte ignoreren clamp und würden die Standardfontgröße des Gerätes verwenden, UND DAS IST OKAY SO.
:root { font-size: clamp(0.9rem, 2vw, 2rem); }Das sind beispielhafte Werte, die Du für Dich prüfen solltest. Angegeben wird Minimum, flexibler Wert und Maximum. Das :root Element ist die höchste Ebene im Elementbaum, d.h. wenn nichts weiter festgelegt wird, gilt diese Angabe für alle. Wenn Du dann für Überschriften oder Textabschnitte andere Fontgrößen haben möchtest, setze sie in rem. Damit stehen sie in Relation zur Basisfontgröße und skalieren genau wie diese mit der Viewportbreite. Ich rate dazu, 1rem als Schriftgröße nicht zu sehr zu unterschreiten, vor allem, wenn Du ein älteres Publikum hast.
Rolf
--
sumpsi - posui - obstruxi-
Lieber Rolf, ganz, ganz herzlichen Dank! So wirds jetzt umgesetzt- von mir. Sorry, wenn ich Dir- und Anderen- mit meinem Anliegen den Sonntagabend störe. Ist nicht böse gemeint! Ich bin nur wirklich z.Z. zutiefst verunsichert, weil ich gar keinen " Anfasser" für das Problem zu greifen bekam.
Mit "vw" ist das so eine Sache. Ich hatte irgendwo gelesen, daß dies die Rettung von allen Schriftskalierungsproblemen in Webseiten sein soll. Scheint doch vll. etwas zu euphorisch gedacht und geschrieben worden sein.
Lange Rede- kurzer Sinn... ich mach mich ans Werk und berichte!
Liebe Grüße von Michael
-
Hallo MichaelS,
Sorry, wenn ich Dir- und Anderen- mit meinem Anliegen den Sonntagabend störe.
Quatsch. Wenn ich am Sonntagabend ins Forum schaue, bin ich doch selbst schuld, oder? Es ist ja nicht so, dass wir über einen Piepser alarmiert würden, wenn es ein neues Posting im Forum gibt. <😉>Eher solltest Du Dich dafür entschuldigen, dass Du für eine kirchliche Website den Heiligen Sonntag missachtest und daran arbeitest. Wenn das dein Pastor herausfindet 🤯 </😉>
Schriftskalierungsproblemen
Wenn man die Schrift denn skalieren möchte. Das ist ein Gimmick, dessen Nutzen man im Einzelfall sehr genau prüfen sollte.
Rolf
--
sumpsi - posui - obstruxi-
OK,, Danke für den Hinweis!
-
Lieber Rolf, liebe Foristen...
bitte fragt nicht warum oder wieso- jetzt scheint es zumindest so, als könnte es funktionieren, wie ich es mir vorstelle.
Ich habe mal einige wesentliche Seiten auf meinen Versuchsserver geladen. Verkleinert man - aus dem Vollbildmodus heraus- jetzt die Browser, wird zunächst die Desktopvariante der Seite angezeigt. ( Merkmal: Hintergrund Verlauf mit schräg verlaufenden Ortsnamen.)
Ab einem festgelegten Punkt dann der nur im HTML formatierte HTML- Text. die dazugehörige CSS habe ich noch nicht neu erstellt und hochgeladen!
Auf 7" Tablet und kleiner, verkleinert, dann das pinke Kreuz mit abgeschnittenem Inhaltsfenster.
Da ich die von Rolf mit erstellte "Desktopvariante" über alles schätze, bleibt die wie sie ist. Also muss ich die Mobil- und Mediumvariante nachträglich bauen. Das sollte nunmehr hoffentlich kein unlösbares Problem für mich darstellen.
Der Versuchsserver ist erreichbar unter:
http://michaelschedler.bplaced.net?bust=1
(Edit Rolf B: URL zum Link gemacht)
Dir, Rolf, nochmals ganz besonders einen herzlichen Dank! Auch für die ?bust= Sache. Wo und wie lernt man das? Die ganze Fülle an Informationen zu HTML,CSS, PHP, JavaScript u.v.m. wie kann man sich das alles nur merken? Ich habe schon mit der Programmierung meines Arduino zu kämpfen- und das ist ganz gewiss für Viele keine Kunst und kein Problem!
Herzlichsten Dank sagt Michael
-
Hallo MichaelS,
Wo und wie lernt man das?
Wo? Unter anderem hier. Und in den Weiten des Netz, mit viel Hilfe von Tante Google und Onkel Bing.
Wie? Unter großen Schmerzen 😉 und mit viel Zeitaufwand. Indem man das Thema seit 20 Jahren betreibt, mal intensiv, mal extensiv, und dann geht's einem wie den Jüngern - so blöd sie sich auch immer wieder anstellten, etwas blieb doch hängen. Und das teilt man dann gerne.
Rolf
--
sumpsi - posui - obstruxi-
Hallo,
Rolf schrieb: <😉>Eher solltest Du Dich dafür entschuldigen, dass Du für eine kirchliche Website den Heiligen Sonntag missachtest und daran arbeitest. Wenn das dein Pastor herausfindet 🤯 </😉>
Ich verrate es ihm ja nicht !!!!!!😜
So, ich habe jetzt die ganze Sache hinbekommen. Ursache des Ganzen war ein "and". Im Netz ( https://www.mediaevent.de/css/media-queries.html ) war das so beschrieben:
@media only screen and (min-width:600px) (max-width:920px){Ich habe das gelesen und erst jetzt ist mir aufgefallen, dass sich der Beitrag gar nicht auf externe CSS- Dateien bezieht, sondern auf die von Dir vorgeschlagene Variante. Jedenfalls habe ich zwischen der Min. und der Max.- Angabe ein "and" eingefügt- und bums... es funktioniert.
Ich habe es auf http://michaelschedler.bplaced.net jetzt vollständig hochgeladen. Man beachte die Schriftfarbe von: Evang. Kirche im Süden Anhalts, die von Lila zu rot wechselt.
So, jetzt ist Schluss für heute !
Gute Nacht und Dank von Michael
-
Hallo MichaelS,
wenn ich mir das so anschaue, wird eine Smartphone-Ansicht deiner Seite schwierig. Typischerweise verwendet man dann aufklappende Menüs, und die sind bekanntlich ohne JavaScript kaum bedienbar lösbar. Höchtens mit dem <details> Element. Aber dann besteht noch das Problem, dass Du zwei Navigationen hast, eine im Kreuzbalken und eine im Stamm; wie man die in der Mobilansicht gut darstellt ohne zuviel Platz für Inhalt zu vergeuden ist mir noch nicht recht klar.
Rolf
--
sumpsi - posui - obstruxi-
Hallo Rolf, Ich bin gerade dran... Ich denke, ich werde im Menü ( HTML noch einige Klassen (.sichtbar, . unsichtbar und .box) einfügen, um einen kleinen Button ( keinen Hamburger) als "Menü", zu erstellen, der das Menü ausplappt. Die Box, bzw. das Menü kann ich mit :target ansprechen.
.menue(:target) .inhalt, .menue:not(:target) .unsichtbar, .menue:target .sichtbar { display: none; } .menue:target .box {display: block; } .box { /* box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3); */ padding: 20px 20px 1px; /* Innenabstand des Menüs */ margin: 30px 100px 10px; /* Aussenabstand des Menüs */ } .sichtbar, .unsichtbar { padding:10px; background: rgb(254, 164, 0); box-shadow:none!important; color:#fff; font-weight:bold; } .sichtbar:hover, .unsichtbar:hover { background: rgb(255, 214, 118); color:#fff!important; transition:0.2s all ease-in-out!important; } Quelltext hierDas Menü besteht einfach aus 5o. 6 rows einer Flexbox.
Alles Weitere blende ich mit display: none; aus und nehme dann nur die Inhalte aus <main> auf. Ohne viel Bramborium untereinander und mit Anstand- äh nein... Abstand! Ganz unten dann ( im bereits angelegten footer) ein Link zu den Gemeindeseiten. Dieser Link wird in den anderen CSS- Dateien dann wieder gesperrt.
Keine Ahnung ob das funktioniert, aber so ist der Plan.
Gruß von Michael
-
@@MichaelS
um einen kleinen Button ( keinen Hamburger) als "Menü", zu erstellen, der das Menü ausplappt. Die Box, bzw. das Menü kann ich mit :target ansprechen. […]
Keine Ahnung ob das funktioniertRolf sagte doch schon, dass das nicht funktioniert. „aufklappende Menüs, und die sind bekanntlich ohne JavaScript kaum bedienbar lösbar.“
aber so ist der Plan.
Kein guter Plan.
Besserer Plan: responsives Menü. Mit
buttoninnerhalb(!) desnav-Elements.Bei großem Viewport ist das Menü permanent sichtbar und der Button nicht sichtbar:
display: none; und auch nicht im accessibility tree, d.h. nicht bei Tastatur erreichbar.Bei kleinem Viewport ist der Button sichtbar und schaltet bei jedem Click sein
aria-expanded-Attribut zwischen"true"und"false"um, was anzeigt (d.h. im Screereader ansagt), ob das Menü ausgeklappt ist oder nicht.Das Menü verschwindet per
[aria-expanded="false"] + ul { display: none }(prinzipiell; im verlinkten Codepen ist es geringfügig anders gemacht).Weiterhin muss man dafür sorgen, dass das Menü beim Drücken der Esc-Taste schließt.
Wenn das Menü nicht wie in diesem Beispiel den Seiteninhalt nach unten schiebt, sondern sich über ihn legt, muss außerdem noch dafür gesorgt werden, dass sich das Menü schließt, wenn mit der Maus außerhalb geclickt wird oder bei Tastatursteuerung der Fokus aus dem Menü herauswandert.
Bin zufällig gerade wieder dabei, ein solches Menü umzusetzten …
😷 LLAP
--
„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
— Joachim Gauck über Impfgegner-
Hallo Gunnar,
Bei großem Viewport ist das Menü permanent sichtbar und der Button nicht sichtbar: display: none; und auch nicht im accessibility tree, d.h. nicht bei Tastatur erreichbar.
Bei kleinem Viewport ist der Button sichtbar und schaltet bei jedem Click sein aria-expanded-Attribut zwischen "true" und "false" um, was anzeigt (d.h. im Screereader ansagt), ob das Menü ausgeklappt ist oder nicht.
Das Problem ist hier, dass es zwei Navigationen gibt: im Kreuzbalken und im Stamm. Ich bin seit gestern nachmittag am Basteln, wie man das am besten lösen könnte, und verwende dafür Code-Teile aus einem Pen von Dir. Ist das okay?
Was ich nicht verstanden habe, ist die Anforderung, dass der Button im nav liegen muss. Ist das für die Bedienbarkeit zwingend? Das macht die Layoutsteuerung deutlich komplizierter.
Und im Fall von Michael gibt's zwei Navis - da entsteht die Frage, in welche der Button gehört.
Mein Plan ist zur Zeit, im Narrow Viewport das Kreuz-Layout wegzulassen, die beiden Navis nebeneinander zu platzieren und einen Aufklappbutton einzublenden. Ich bin nur gestern nicht so weit gekommen, etwas vorzeigen zu können, und heute muss ich wieder arbeiten. Die Herausforderung ist, das ganze HTML so zu gestalten, dass man im Wide Viewport das Kreuz-Layout (mit Navi in Balken und Stamm) rein per CSS herstellen kann.
Nein, ich halte dein Bier nicht dafür 😉
Rolf
--
sumpsi - posui - obstruxi-
Hallo Rolf, hallo Gunnar,
Was ich nicht verstanden habe, ist die Anforderung, dass der Button im nav liegen muss. Ist das für die Bedienbarkeit zwingend? Das macht die Layoutsteuerung deutlich komplizierter.
und was ich immer noch nicht verstanden habe, warum ein Buton mit Aria-Attributen, warum kein Details/Summary?
Gruß
Jürgen-
Hallo JürgenB,
die Platzierbarkeit des Menübuttons relativ zum Menü könnte dann eingeschränkt sein, aber ich bastele gerade mit display:contents auf dem details-Element und damit wird es sehr interessant.
Außer für die armen Socken, die vom zombIE verfolgt werden.
Rolf
--
sumpsi - posui - obstruxi -
@@JürgenB
und was ich immer noch nicht verstanden habe, warum ein Buton mit Aria-Attributen, warum kein Details/Summary?
Ich glaube, die Unterstützung in AT ist noch nicht so dolle.
Außerdem bin ich mir nicht sicher, ob ein Screenreader die Elemente auch ihrer Funktion entsprechend verständlich ansagt.
Und wie willst du es anstellen, dass das Menü bei breitem Viewport immer offen ist und kein Hamburger-Icon zu sehen ist?
S.a. CSS-Kniffliges zum Wochenende
😷 LLAP
--
„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
— Joachim Gauck über Impfgegner-
-
Hallo Gunnar,
Und wie willst du es anstellen, dass das Menü bei breitem Viewport immer offen ist und kein Hamburger-Icon zu sehen ist?
Gruß
Jürgen
-
-
-
Servus!
Hallo Gunnar,
Bei großem Viewport ist das Menü permanent sichtbar und der Button nicht sichtbar: display: none; und auch nicht im accessibility tree, d.h. nicht bei Tastatur erreichbar.
Bei kleinem Viewport ist der Button sichtbar und schaltet bei jedem Click sein aria-expanded-Attribut zwischen "true" und "false" um, was anzeigt (d.h. im Screereader ansagt), ob das Menü ausgeklappt ist oder nicht.
Das Problem ist hier, dass es zwei Navigationen gibt: im Kreuzbalken und im Stamm.
Es gibt nicht so viele Unterseiten - weswegen ich beide zu einer - evtl. sogar ohne Dropdown zusammmenfassen würde.
- Wer wir sind
- PFARRBEREICH GÖRZIG
- PFARRBEREICH WEISSANDT-GÖLZAU
- ...
- Was wir tun
- Gottesdienste
- Gemeindeleben
- Rückblicke
- Kontakt
- Impressum
- Datenschutz
Die Herausforderung ist, das ganze HTML so zu gestalten, dass man im Wide Viewport das Kreuz-Layout (mit Navi in Balken und Stamm) rein per CSS herstellen kann.
Ich würde den horizontalen Balken (ohne Inhalt) als Pseudoelement zum header packen. Der lila Stamm wäre die Navigation, die sich bei breiten Viewports etwas nach rechts schiebt.
Im Mobilmodus müsste sie sich natürlich über die ganze Breite erstrecken.
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“-
Hallo Matthias,
Es gibt nicht so viele Unterseiten - weswegen ich beide zu einer - evtl. sogar ohne Dropdown zusammmenfassen würde.
Das habe ich auch schon überlegt, aber mir kommt das wie eine persönliche Niederlage im Kampf gegen den Browser vor. Das Wide Layout hat eine Navi im Stamm und eine im Balken. Und nur, weil man das mit CSS nicht mobiltauglich umschalten kann, soll man die ganze Navi umbauen? Hmpf!
Rolf
--
sumpsi - posui - obstruxi-
Servus!
Hallo Matthias,
Es gibt nicht so viele Unterseiten - weswegen ich beide zu einer - evtl. sogar ohne Dropdown zusammmenfassen würde.
Das habe ich auch schon überlegt, aber mir kommt das wie eine persönliche Niederlage im Kampf gegen den Browser vor. Das Wide Layout hat eine Navi im Stamm und eine im Balken. Und nur, weil man das mit CSS nicht mobiltauglich umschalten kann, soll man die ganze Navi umbauen? Hmpf!
Nein, bei den fertigen Layouts gab's schon so einen Fall mit 2 Navigationen: CSS/fertige_Layouts/Design09. Da wusste/weiß man ja nicht, was dahinter steckt.
Hier geht es wie bei einer Schule darum, die einzelnen Unterseiten passend zu gruppieren, damit Inhalte schnell gefunden werden.
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“-
Hallo Matthias,
hui, das ist das erste Mal, dass ich den Viewport-Emulator zu sehen bekomme 😂
Das ist ein Menü, das ständig offen ist, und Quick-Links zu den Teilen der Seite. Ok, auch eine Idee.
Rolf
--
sumpsi - posui - obstruxi-
Servus!
Hallo Matthias,
hui, das ist das erste Mal, dass ich den Viewport-Emulator zu sehen bekomme 😂
Weil das Bsp so komisch war, haben wir es nicht überarbeitet und unter src/selfhtml.org gehostet.
Wsl. ist es das letzte Beispiel mit Viewport-Emulator.
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
-
-
-
- Wer wir sind
-
-
@@Gunnar Bittersmann
Bin zufällig gerade wieder dabei, ein solches Menü umzusetzten …
Nö, doch nicht. Abgewimmelt.
In dem Fall ist das Menü so klein (4 Punkte), dass ein Verstecken hinter Hamburger-Icon nicht sinnvoll ist. Das kann man auch auf kleinen Viewports immer anzeigen.
Ein kurzes Gespräch mit der Grafikerin kann einigen Entwicklungsaufwand sparen. Gut, wenn man nicht Wasserfall-Entwicklung macht. Nicht Nacheinanderarbeit, sondern Zusammenarbeit ist angesagt.
😷 LLAP
--
„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
— Joachim Gauck über Impfgegner-
Hallo Gunnar,
der Wasserfall ist die Raketentechnik der 60er Jahre. Sprich: Die Idee, das eine Brücke, ein Staudamm, eine Saturn V und eine Software nach den gleichen Designprinzipien konstruiert werden sollten.
Als man noch Software in Lochkarten piekste und ein Compile-Job eine Nacht durchlief, mag das gestimmt haben.
Gottseidank sind wir seither etwas agiler geworden.
Rolf
--
sumpsi - posui - obstruxi
-
-
-
-
-
-
-
-
-
-
-
Servus!
Es ist allerdings wenig sinnvoll, das komplette CSS für 3 Breiten vorzuhalten. Das meiste wird gleich sein. Baue die Seite deshalb für die minimale Breite auf (mobile first Ansatz) und füge dann CSS für breitere Viewports hinzu, die dann Dinge nebeneinander setzen oder vergrößeren.
Ich bin ja grad an einem Stylesheet für's Wiki dran und vermisse eigentlich eine beispielhafte Gliederung im SELF-Wiki. Passender Ort wäre wohl hier:
- CSS/Tutorials/Einstieg/Ausblick (Die Seite hieß mal "Guter CSS-Stil")
Auf die Schnelle gefunden habe ich: CSS Coding Guidelines – CSS Code besser schreiben, formatieren und organisieren
Ungefähr in der Mitte findet sich der Abschnitt „SMACSS“
SMACSS (Gesprochen: »Smacks«) steht für »Scaleable and modern Architektur for CSS«. In erster Linie ist SMACSS eine Sammlung vom Hilfestellungen und Namenskonventionen zur Organisation von CSS-Projekten.
Der CSS-Code wird dabei in folgende Bereiche untergliedert:
- Base
- Elementares Styling von HTML-Elementen.
- Layout
- Unterteilung der Website in grobe Sinnabschnitte wie Header, Footer, Content etc.
- Module
- Wiederverwertbare Bereiche des Layouts – z. B. Boxen, Formulare, Slider etc.
- State
- Zustände von Elementen – z. B. .is-collapsed für Accordions.
- Theme
- Styling für eventuelle Themes, bei multimandantenfähigen Projekten.
Problem ist bei mir, dass ich viele Mediawiki-Einstelungen erst normalisieren muss, um sie dann entsprechend zu formatieren.
Würdet ihr die Dark Mode-Media-Queries für jeden Selektor einzeln (bzw. für 2-3 Selektoren) oder für jeden Bereich vornehmen?
In einem typischen Layout würde ich im Layout als zweiten Unterpunkt die Media Queries für breitere Viewports (=Elemente nebeneinander) einfügen
Das mit dem Theme würde ich doch in die einzelnen Bereiche integrieren und nicht in einen eigenen Punkt bringen. Ich habe viel davon schon in der Farbpalette am Anfang drin.
Was haltet ihr davon?
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“-
Hallo Matthias,
Würdet ihr die Dark Mode-Media-Queries für jeden Selektor einzeln (bzw. für 2-3 Selektoren) oder für jeden Bereich vornehmen?
Schwierige Frage - ich kann die Performance von vielen Mediaqueries nicht einschätzen. Wenn man genau einen @media-Block hat, muss der Browser das nur einmal abfragen und hat auch nur eine Gruppe Regeln, die er bedingt anwenden muss. Macht man das an zweiunddrölfzig Stellen im Stylesheet, könnte das für die Layout-Engine deutlich aufwändiger sein. Ich habe aber keine Ahnung, ob das ein Problem ist.
Rolf
--
sumpsi - posui - obstruxi-
Hallo
Würdet ihr die Dark Mode-Media-Queries für jeden Selektor einzeln (bzw. für 2-3 Selektoren) oder für jeden Bereich vornehmen?
Schwierige Frage - ich kann die Performance von vielen Mediaqueries nicht einschätzen. Wenn man genau einen @media-Block hat, muss der Browser das nur einmal abfragen und hat auch nur eine Gruppe Regeln, die er bedingt anwenden muss. Macht man das an zweiunddrölfzig Stellen im Stylesheet, könnte das für die Layout-Engine deutlich aufwändiger sein. Ich habe aber keine Ahnung, ob das ein Problem ist.
Ich vermute, dass das erst dann zu einem offensichtlichen Problem wird, wenn man es mit dem Hin-und-Her-Geschalte stark übertreibt. Ich würde hier – aus dem Bauchgefühl heraus – der Lesbarkeit des Codes mehr argumentatives Gewicht zugestehen.
Tschö, Auge
--
200 ist das neue 35. -
Servus!
Hallo Matthias,
Würdet ihr die Dark Mode-Media-Queries für jeden Selektor einzeln (bzw. für 2-3 Selektoren) oder für jeden Bereich vornehmen?
Schwierige Frage - ich kann die Performance von vielen Mediaqueries nicht einschätzen. Wenn man genau einen @media-Block hat, muss der Browser das nur einmal abfragen und hat auch nur eine Gruppe Regeln, die er bedingt anwenden muss. Macht man das an zweiunddrölfzig Stellen im Stylesheet, könnte das für die Layout-Engine deutlich aufwändiger sein. Ich habe aber keine Ahnung, ob das ein Problem ist.
Danke, ich schau mal, dass ich es bis zum Wochenende übersichtlich hinkrieg. Dann kann ich das immer noch später zusammenfassen.
Viele Festlegungen kommen mir wie magic numbers bzw. doppelt gemoppelt vor, ich trau mich aber nicht, alles auf Standard zu setzen.
#selfhtml-navigation { font-size: .91em } #p-personal h3, #selfhtml-navigation h3 { display: none } #selfhtml-navigation ul { list-style: none; float: left; } #p-personal li, #selfhtml-navigation li { line-height: 1.125em; float: left } #selfhtml-navigation li { font-size: 1.2em; }Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“-
Hallo Matthias,
alles ausdrucken, an die Wand pinnen und dann wie ein Kriminalist bunte Fäden spannen 😉
Rolf
--
sumpsi - posui - obstruxi-
Servus!
Hallo Matthias,
alles ausdrucken, an die Wand pinnen und dann wie ein Kriminalist bunte Fäden spannen 😉
Ich hör jetzt auf, genieße die Sonne und mache zuhaus am großen Bildschirm weiter.
Andererseits schien Mitte März im Oktober so weit weg.
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
-
-
-
-
-
Hallo
Wie schon geschrieben, bin ich erst seit Kurzem wieder daheim und habe die Website sofort wieder auf den "Schreibtisch" zurück bekommen, mit dem freundlichen Hinweis: Die Mobilansicht geht gar nicht ( stimmt!!!!!) und muss /sofort!/ neu gestaltet werden, weil wir ansonsten am 01.03. bei Google aus dem Ranking fallen …
Wann ist man damit um die Ecke gekommen?
… und ich bin schuld daran.
Gab's da nicht 'was von Ratiop… ähhm im Vaterunser?
Jetzt mal unabhängig davon, was man an Google nicht mögen kann oder verurteilenswert findet, wir reden hier doch von der Website einer kirchlichen Gemeinde, oder? Eine Gemeinde, die einen geografisch umrissenes Einzugsgebiet hat. Eine Gemeinde, die ihren Gliedern [1] Informationen und eventuell Dienstleistungen bietet, die aber vermutlich nicht um neue Seelen wirbt, die nicht sowieso anderweitig über die Adresse der Website informiert werden könnten.
Für jemand, der mit seiner Website ein undefiniertes Publikum erreichen will, ist das Google-Ranking hierzulande, aufgrund der marktbeherrschenden Stellung dieser Suchmaschine, essentiell. Aber bei einem eng umrissenen und auch anders erreichbaren und auf die Website aufmerksam gemacht werden könnenden Publikum halte ich das allein selig machende Google-Ranking für das sprichwörtliche Goldene Kalb.
Abschläge im Google-Ranking hin oder her, aber auf der wievielten Ergebnisseite sollte eine Gemeinde bei der Suche nach „Kirchengemeinde in Kleinsiehstenich“ [2] wohl zu finden sein? Es ist ja nun nicht so, dass es für eine Ortschaft beziehungsweise ein Gebiet in einer Stadt üblicherweise mehrere Gemeinden einer Konfession gäbe.
Tschö, Auge
--
200 ist das neue 35.
-
Hallo Auge!
Danke für Deine Nachricht. "Um die Ecke" ist das bei einem Telephonat ( Ich war noch etwas "outside" gestellt)so um den 15...17.02. Da wurde mir gesagt, daß die Änderungen absolut notwendig und unaufschiebbar wären. Das war eine Person, die in einem Werbestudio als Grafik- und Webdesigner arbeitet, aber leider wegen Überarbeitung kein Ansprechpartner für mich sein will in Sachen Website. Dann habe ich meine KollegeInnen informiert- ich brauche ja das OK zu Veränderungen an der Seite. Danach ging das am 19.02. los mit der Überlegung, was das Ziel sein soll und welche Schritte ich dafür zu durchlaufen habe.
Allerdings, mit der Schuld... ja, ich habe es gewusst, daß die Seite nicht auf meinem Handy nutzbar ist. Aber, ehrlich... ich habe es einfach laufen lassen, obwohl mich auch einige wenige Gemeindeglieder daraufhin angesprochen haben.
Ich habe dann geduckt und habe tatsächlich die Bestätigung im Netz gefunden, dass Google da etwas in dem Crawler- Programm zum 01.03. umstellt.
In einer wesentlich früheren Website für eine andere Gemeinde habe ich die Website auf Platz 1 im Ranking gebracht, was angesichts der touristischen Bedeutung auch wichtig war.
Ob es bei dieser Seite absolut so wichtig ist, ist Ansichtssache. Manche sehen es als ein MUSS an, auf der ersten Google-Seite zu finden sein, Anderen ist es einfach nur egal. Z.Z. finde ich uns ( bei Duckduckgo) an 2. Stelle und dann mehrfach.
Das ist eine psychologische Einstellung. Vielleicht hast Du schon mal etwas Code weitergegeben und versehentlich einen Punkt vergessen. Kein Problem- für 99,998% der Menschheit, denn irren ist menschlich. Nur die 0,002% eröffnen alle Schleusentore, daß es nur so tobt. Und die können dann richtig Rabatz machen, wie wir ja bei Herrn Putin erleben müssen. Die Kunst ist ja - für mich- nicht, die Seite www.ich-weis-nichts.de zu platzieren. Doch, wer gibt das bei einer Suche schon ein. Gesucht wird immer nach konkreten Inhalten. Also z.B.: " Css background-radient". Da möchte SelfHTML gewiss nicht auf Seite 21 zu finden sein.
Gruß von MichaelS
-
Hallo
Hallo Auge!
Danke für Deine Nachricht. "Um die Ecke" ist das bei einem Telephonat ( Ich war noch etwas "outside" gestellt)so um den 15...17.02.
Ok, also nicht erst vorgestern oder gestern. So wirkte das nämlich auf mich und das hielte ich für überaus kurzfristig.
In einer wesentlich früheren Website für eine andere Gemeinde habe ich die Website auf Platz 1 im Ranking gebracht, was angesichts der touristischen Bedeutung auch wichtig war.
Ob es bei dieser Seite absolut so wichtig ist, ist Ansichtssache.
Wie gesagt, es gibt gute Gründe, eine Seite möglichst gut in den Suchergebnissen platzieren zu wollen. Es gilt aber eben nicht in jedem
Manche sehen es als ein MUSS an, auf der ersten Google-Seite zu finden sein, Anderen ist es einfach nur egal. Z.Z. finde ich uns ( bei Duckduckgo) an 2. Stelle und dann mehrfach. Fall.
Ja, das Verlangen, auf Seite 1 zu stehen, ist groß, aber da ist auch nur begrenzt Platz. Egal, wie sehr man quengelt, abseits von Lazy Loading gibt es auf einer Suchergebnisseite halt nur 10 oder 20 Ergebnisse. Und die Betreiber dieser Angebote sind halt auch dran interessiert, dort zu stehen. Das ist wie mit dem Highlander, von dem es nur einen (oder eben 10 oder 20) geben kann oder der recht freien Umschreibung des archimedischen Prinzips, die da sagt, wo ein Körper ist, könne kein anderer sein.
Das ist eine psychologische Einstellung. Vielleicht hast Du schon mal etwas Code weitergegeben und versehentlich einen Punkt vergessen. Kein Problem- für 99,998% der Menschheit, denn irren ist menschlich. Nur die 0,002% eröffnen alle Schleusentore, daß es nur so tobt. Und die können dann richtig Rabatz machen …
Ja klar, das sind die Gleichen, die früher™️ mit ihrem Browser mit dessen Konfiguration auf ihrem Gerät die neue Website geprüft und alles moniert haben, was bei ihnen nicht wie gewünscht aussieht und funktioniert, obwohl es allerlei gute Gründe gegeben haben mag, es so zu gestalten, damit es bei anderen überhaupt funktioniert.
Und von wegen „früher“, das mag heute nicht anders sein, aber ich bin nicht mehr in der Situation, das beurteilen zu können.
Die Kunst ist ja - für mich- nicht, die Seite www.ich-weis-nichts.de zu platzieren. Doch, wer gibt das bei einer Suche schon ein.
Üblicherweise die Auftraggeber für die Erstellung der Seite und jene tatsächlich vielen Leute, die die Suchmaske des Suchmaschinenbetreibers ihrer Wahl als Adresszeile benutzen.
Gesucht wird immer nach konkreten Inhalten. …
… mit den oben genannten Abstríchen …
… Also z.B.: " Css background-radient". Da möchte SelfHTML gewiss nicht auf Seite 21 zu finden sein.
Natürlich nicht. Und wie gesagt, eine möglichst gute Positionierung in Suchergebnissen anzustreben, ist nicht verurteilenswert. Aber es ist einerseits nicht für jeden Platz auf Seite eins und andererseits sollte die Platzierung in den Suchergebnissen, natürlich abhängig von der Art des Abgebots, nicht wie der heilige Gral behandelt werden. Wenn ich meinem Publikum, das an meinen Diensten interessiert sein könnte, die Seite anderweitig ans Herz legen kann[1], sollte man auch nicht alle Energie auf eine Platzierung auf Seite eins der Suchergebnisse verschwenden.
So, genug der religiösen Anspielungen.
Tschö, Auge
--
200 ist das neue 35.
in einer Kirchengemeinde kann man das ↩︎
-
-
-
@@MichaelS
Um keine ellenlange und damit unübersichtliche .css- Datei zu bekommen, habe ich zuerst im HTML-Text ( zur Probe nur in der index.htm) drei .css Dateien eingebunden.
Und was ist mit den bei allen Viewportgrößen gemeinsamen Dingen wie Hintergrund, Textfarbe, Schrift, …? Die wiederholst du jeweils? Keine gute Idee.
Übrigens lassen sich mit Grid und Flexbox und
minmax,min,max,clampso manche Layouts auch ohne Breakpoints umsetzen. Beispiele: Bildergalerie, An die Freude@media (max-width: 600px) { @media (min-width: 600px) and (max-width: 1370px) { @media (min-width: 1370px) {Die Breakpoints sind falsch. Bei 600px breitem Viewport gilt sowohl der erste als auch der zweite Block; bei 1370px breitem Viewport gilt sowohl der zweite als auch der dritte Block.
Oft ist es auch keine gute Idee, stacked media queries zu verwenden. ☞ overlapping vs. stacked
Breakpoints sollten nie in
px, sondern inemangegeben werden. ☞ PX, EM or REM Media Queries?😷 LLAP
--
„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
— Joachim Gauck über Impfgegner-
Hallo Gunnar,
es ist schon wieder etwas früh geworden und ich muss in ein paar Stunden wieder loslegen. Daher nur ganz kurz.
Ich habe mir erlaubt, Deine Vorlage bei "codepen.io" mal zu verändern- und zwar habe ich Dein Menü in ein schnell gebasteltes Flex-Item, also in eine Flexbox gepackt. Flexbox mit 2 Items bei 2 Spalten in die 1. Spalte (5em breit) habe ich einen ewiglangen Text hineinkopiert. in der Zelle der 2. Spalte dann Dein Entwurf. Fazit: Ein Umbruch unter den langen Text. OK, das hätte ich durch ändern der Spaltenbreite hier ändern können, aber, wenn die Spalte farblich gestaltet ist, läuft die ins unendliche, bzw. ich habe keine Ahnung, wie ich das unterbinden könnte. Genau dies ist auf meiner Seite mit der Klasse "stamm" das Problem.
Ich habe, nicht zuletzt auch auf Hinweis und Rat von Rolf versucht, in einer css- Datei alles zu organisieren. Am Ende fand ich mich selber nicht mehr durch. Da wurde was eingeschaltet und ausgeschaltet, neu strukturiert... . Zu jeder Zeit muss ich wissen- und erkennen, was ich wie und warum gemacht habe. Es nützt ja nichts, wenn ich in 2 Monaten ratlos vor der Seite stehe und keinen Schimmer habe, wie ich das zum Laufen gebracht habe. Daher bin ich auch etwas vorsichtig, blind JS einzusetzen, was ich nicht gut nachvollziehen kann. Einfach, logisch, nachvollziehbar muss es sein.
Ich habe jetzt nicht die hochgeladene Datei "index_medium.css" kontrolliert, aber auf meinem Rechner ist in dieser Datei vermerkt: @media only screen and (min-width:601px) and (max-width:1439px){
Ich glaube, daß gleiche Größenangaben in verschiedenen Dateien gestern zu Problemen geführt haben. Bin mir aber nicht mehr sicher. Das mit px. und em. an dieser Stelle kannte ich noch nicht. Danke: Wieder etwas dazugelernt.
Die mobile Ansicht wird ganz einfach gestaltet. Keine großen Farbspielereien Einfach nur Überschrift, dann das Menü als eine Spalte über den Viewport und 5- 6 rows. Dann kommt schon der <main> Teil dran, also die wechselnden Inhalte. Im bereits angelegten Footer dann ein Link zu den Pfarrbereichen. Das wars. Also kurz, knapp und bündig.
Gruß von MichaelS
-
Hallo MichaelS,
Daher bin ich auch etwas vorsichtig, blind JS einzusetzen, was ich nicht gut nachvollziehen kann. Einfach, logisch, nachvollziehbar muss es sein.
Ja schon. Aber ein wirklich bedienbares Dropdown-Menü bekommst Du ohne Script nicht hin. Wenn es nur eine Navigation gäbe, dann könnte man das mit einem details-Element lösen. Aber Du hast zwei.
Ich bastele gerade mit display:contents für ein details-Element, das scheint vielversprechend.
Die mobile Ansicht wird ganz einfach gestaltet. Keine großen Farbspielereien Einfach nur Überschrift, dann das Menü als eine Spalte über den Viewport und 5- 6 rows.
Ich bin gespannt, wie Du das mit den beiden Navis löst.
Rolf
--
sumpsi - posui - obstruxi
-
-
-
Mal eine dumme Frage: Warum nutzt du nicht fertiges CSS Framework wie Bootstrap 5? Das kommt nun ohne jquery aus und so groß ist es nicht. Dafür kommt es aber mit einem Konzept, das von Anfang an auf responsive Design ausgelegt ist?
-
Hallo Michael_K,
antwortest Du im richtigen Thread? Jörg macht jQuery und kämpft damit, während MichaelS bisher vermieden hat, sich mit JavaScript anzulegen.
Und ob Boot[st|c]rap die Lösung oder das Problem ist, darüber gehen die Meinungen weit auseinander…
Rolf
--
sumpsi - posui - obstruxi-
Hallo Rolf und alle
ja, in der Nacht bin ich nicht mehr so ganz aufnahmefähig, da lässt die Konzentration schon spürbar nach... Danke, dass Du den Text im falschen Thread korrigiert hast. Ich habe soeben nochmals eine mobile Version auf:
http://michaelschedler.bplaced.netgeladen. Die mobile Version (Handy) sollte stimmen, die mittlere Version ist fast fertig und die Desktopansicht muss in dem <main> Bereich formatiert werden.Und schon gibt es ein neues Problem! Dazu habe ich eine Frage: Es ist möglich, Inhalte auf dem Handy so zu beschreiben, dass diese entweder im Landscape- oder im Portrait-Format angezeigt werde.
Aber:
Ist es auch möglich, innerhalb einer ganzen Website, die im Portrait-Format angezeigt wird, einzelne Seiten im Landscape-Format anzeigen zu lassen? Ich finde auf die Schnelle nichts, wo ich nachlesen könnte.
Gruss an einem wahrlichen " Aschermittwoch" von Michael
Hier noch ein kleines Video zu Nachdenken:
https://www.youtube.com/watch?v=hRyhfRBm7_Q-
Hallo MichaelS,
gerade beim Stammtisch diskutiert - eher nein.
Aber wir empfehlen Dir responsive Tabellen, wenn's Dir um die Gottesdienste-Tabelle geht.
Rolf
--
sumpsi - posui - obstruxi-
Hallo Rolf,
herzlichsten Dank für diesen wertvollen Hinweis! Ich arbeite das morgen mal durch. Der Ansatz ist sehr klug. Alles in einem Guss, und dennoch so verschiedenen, dass es angepasst werden kann.
Danke!!! ( Auch wenn Du damit Dir mittlerweile die Wände tapezieren kannst, es ist ernst und aufrichtig gemeint! )
Gruss von Michael
-
Hallo Michael,
Ich habe Deine Seite mal ein bisschen aufgeräumt.
http://svg.bplaced.net/kirche/kinder.htm
Das müsste man aber noch optimieren
Bei den tabellarischen Daten zur Jugendarbeit habe ich nur 3 Spalten Wo, Wann und Wer verwendet und untereinander notiert.
Das könnte man auch beim Gottesdienst so machen:
Evtl. könnte das Datum aus der Tabelle raus in eine Überschrift packen.
Ich würde auch wieder zuerst den Ort, dann erst die Uhrzeit notieren.
10.30 Uhr würde ich als 10:30 notieren.
Evtl. könntest Du den Pastor in einen span setzen und per CSS (nicht <b>) fett markieren, das Thema gleich danach. In kleinen Viewports mit
table span {display:block;}untereinander, in großen nebeneinander.Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
-
-
-
-
-