Upgrade von Joomla 3 auf Joomla! 4: Eine Einführung vom Experten

Da könnte noch ein "seit der Zeit" nach "Wir sind dabei" rein, so klingt es nicht schön.

Sagte ich auch schon mehrfach ....

Oder eben

"Wir sind dabei, seit Joomla noch Mambo hieß"

Eben "sind .... seit" oder "waren ... als" und nicht "sind ... als"

Und ebenso natürlich das "hiess" als "hieß".

Moment mal...
Du hast also diese ganzen Infos alle auf EINE Seite gestopft.
Also, ich bin ja schon zäh und selbst das Thema hat mich ein bisschen interessiert - aber nach der Hälfte fing ich an zu scrollen, weil mir die Textwüste zu langweilig wurde.

Kommt da noch was mit bunten Bildchen rein?
Oder ein paar Call2action-Buttons?
Womöglich sogar noch Überschriften, die nicht Schwarz sind?

Nur so fürs Auge und so...

Nein, das muss so sein. Das ist der neue Joomla-Look, für den man 2 MB an CSS Daten und etliche Addons lädt Hat auch einen riesen Vorteil. Der Text da ist endlich mal in einer Flucht, das hat schon Seltenheitswert. Und Bilder sind immer ganz böse. Da klebt dann der Text immer direkt dran oder die sind so riesig, dass man mobil sich erst mal den Finger wund wischt, bis man an dem vorbei ist. Oder es ist so ein Oberlehrer mit Zeigefinger.

*duckundweg*

Gerüchteweise soll es auch Bilder geben, auf denen die Aufforderung "Jetzt buchen" steht und dann ist das gar nicht klickbar.

Warum kommt ein Inhaltsverzeichnis erst zum Schluss?

Ich glaube langsam, das ist ein Cache-Problem oder so. Keine Ahnung, gestern hatte ich auf der Seite gar kein Inhaltsverzeichnis. Am Tablet war eines, aber unten, heute morgen war dann eines da, links am Rand, nun ist wieder keins da Und es wird ein CSS geladen, das gar nicht da ist, aber auch nicht immer, nur so jeden dritten Reload (fbaca362568917d363110a6f427b4918a3b98a0dc4a5c59fc58a6848ef00f41c.css)

Nur mal so als Hint:
Kann man da nicht so nen "Scroll2top"-Button einbauen, wenn man nicht ganz oben auf der Seite ist?
Wenn man da mitm Handy was in der nicht sehr einladenden Inhaltsangabe anklickt, landet man mitten im Text.
Und da steckt man dann fest. Man muss ich erst einen abwischen, um wieder nach oben zu kommen.

Alternativ wäre auch ein Sticky Header mit Zugriff auf die Navigation hilfreich.

Sticky Header 😅 war zuvor drinnen. Dann jumpt der aber falsch bei den Ankern und das eigentliche Sprungziel ist hinter dem Header. So wie jetzt halt, nur dass der Header absolut darüber liegt. Da ist man dann quasi wiklich mittem im Text und muss erst mal den Anfang suchen. Für den ist dann top halt nicht Unterkante Header, sondern Oberkante Bildschirm.

Die Frage wäre, wie eine so einfache Seite so viele Probleme hab kann.

Aber wegen dem ToTop. Das machen mobile Browser doch von alleine, oder? Ich habe auf meinen Seiten und hier im Forum immer zwei. Den eigenen und den vom Browser.

Zitat von Synonym

Sticky Header 😅 war zuvor drinnen. Dann jumpt der aber falsch bei den Ankern und das eigentliche Sprungziel ist hinter dem Header. So wie jetzt halt, nur dass der Header absolut darüber liegt. Da ist man dann quasi wiklich mittem im Text und muss erst mal den Anfang suchen. Für den ist dann top halt nicht Unterkante Header, sondern Oberkante Bildschirm.

Die Frage wäre, wie eine so einfache Seite so viele Probleme hab kann.

Dagegen gibt was:
https://bloggerpilot.com/sprungmarken-f…et-ausgleichen/

Hm; platz 2 und 3 bei den groessten elementen die eingebunden werden sind die "Roboto" fonts, die (fuer mich) beim oberflaechlichen drueberscrollen genauso aussehen wie Arial oder Sans-Serif.

Und bei so einer schmucklosen text-only seite ohne irgendwelchen firlefanz ganze 10 JS und 7 css files einzubinden spricht ja auch nicht gerade fuer das CMS.

Und da mache ich mir immer gedanken das mein code vielleicht moppelkotze und ueberladen ist...

Roboto zählt auch zu den nicht wirklich verbreiteten Fonts:

Hier mal ne Liste, welche Fonts so ziemlich sicher auf Endgeräten vorhanden sind:
Courier New: 99,5%
Arial 99,4%
Verdana 99,1%
Times New Roman 99,1%
Trebuchet MS 98,7% 98,6%
Impact 98,5%
Comic Sans MS 98,3%
Arial Black 98,7%
Tahoma 98,3%
Microsoft Sans Serif 96,6%
Lucida Console 95,5%
Lucida Sans Unicode 95,3%
Palatino Linotype 94,1%
Franklin Gothic Medium 93,8%

Ich pers. verwende meist Tahoma, da ich keinen Blocksatz verwende.

Die Roboto ist eine sehr verbreite (Web-)Font, alleine schon aus dem Grund, dass die Google an vielen Stellen selbst verwendet und in vielen CMS geladen wird, alternativ auch OpenSans. Das Problem dabei ist nur, dass man diesen Vorteil völlig knicken kann, wenn man die Fonts lokal vom Server lädt. Ich für meine Fall hatte früher auch immer Roboto oder OpenSans eingebunden und das dann wegen den Ladezeiten aufgegeben. Genauso wie dieses ganze Icon-Zeug. Da wird dann meist ein Font geladen oder gar zwei, nur weil ein einziges Symbol irgendwo benutzt wird, das auch noch völlig belanglos ist. Braucht man auch nicht. Da kann man schlicht ein UTF-8-Zeichen nehmen oder eben ein ganz normales, das ähnlich ausschaut oder SVG oder, wenn es was wie Dreiecke etc sein soll, schlicht Border und pures CSS.

Ich habe da als Fonts nur noch "-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;"

catcat Wo hast Du denn diese Liste der Fonts her? Mir scheinen da ein paar zu fehlen und andere eigentlich zu hoch eingestuft zu werden. Da gab es ja Änderungen, gerade im Bereich Microsoft Win 10 und 11, aber auch bei Apple.

Das Problem bei den Schriften ist ja, dass die auf allen Geräten nahezu gleich aussehen sollen und das wird mit Systemschriften schwierig, vor allem mit der eigentlich sehr schönen "Tahoma". Die hat völlig andere Laufweiten wie die anderen Systemschriften. Bei normalen Texten ist das egal, wenn man aber viel mit Boxen arbeitet, wo dann auch die Zahl der Zeilen limitiert ist, schaut das dann oft komisch aus bei anderen Geräten. Die Roboto ist ansonsten halt die Systemschrift von Android und extrem auf die Lesbarkeit auf Smartphones ausgelegt. Die "Segoe UI" ist die "neue" Systemschrift von Windows.

Die Arial kann man eigentlich überall nehmen, aber die schaut oft schwierig aus. Vor allem bei Buchstaben wie "ili". Da sind die Zeichen zu dicht beieinander und oft auch irgendwie "kantig" auf Displays.

Die
Segoe UI (Windows ab v8)
San Francisco (Mac)
Roboto (Android ab v4)
sehen hingegen alle fast gleich aus.

Problem bei Joomla oder eher dem Template ist, dass es die Roboto erzwingt als externe Schrift. Also selbst bei Android, wo sie nativ vorhanden wäre, wird die von Joomla geladen. Und da dann noch das Problem, dass die Deklaration der Font zwar im Master-CSS ist und gecached werden könnte, aber der Abruf der Font in einem anderen CSS steht und das per "lazy-stylesheet" eingebunden wird. Da kann das System dann so schnell sein wie es mag oder cachen, das flackert dann immer.

Oder eben die "Font Awesome 6 Free". Wie oben schon erwähnt. Eine riesige Schrift, die auf der Seite nichts anderes macht, als rechts unten beim ToTop das Dreieck anzuzeigen. Also 150 Kb für ein Zeichen.

Die Liste ist so 1-2 Jahre alt und wurde wohl international gemessen.

Aber ich glaube mich zu erinnern, dass es eine Möglichkeit gibt mittels 2-3 Zeichen in der CSS, dem User-Browser zu sagen, er soll sein Roboto (oder einen anderen Font) nehmen, anstatt den Roboto-Font, den Du anbietest. Du hebelst das Nachladen Deines evtl leicht abweichenden Fonts also aus.

Und was das von Dir erwähnte "Eine riesige Schrift, die auf der Seite nichts anderes macht, als rechts unten beim ToTop das Dreieck anzuzeigen. Also 150 Kb für ein Zeichen."... jo. Da musste dann halt ein anderes Zeichen als "Dreieck" nehmen. Abspecken ist das Zauberwort.
Man braucht keine 5 MB-Bibliothek, wenn man nur 2-3 Icons oder EINE Slideshow will.

Ja, das geht. Local verwenden, wenn verfügbar, ansonsten laden. Das ist da in dem Template aber nicht integriert Da gibt es nur laden per src url() und wenn nicht möglich, dann Fallback auf Systemschrift. Was Du meinst und eben auch richtig wäre, wäre ein src local().

Bei dem ganzen Zeug verstehe ich die CMS nicht. Warum machen die überhaupt so einen Unfug? Schriften ok, das mag man noch verstehen, wobei auch nicht wirklich, aber mit den ganzen Symbolen? Das Dreieck da im ToTop kann man mit 5 Zeilen CSS-Code erstellen. Schaut fast identisch aus. Andere laden zig verschiedene Versionen der Font-Awesome-Schrift für unterschiedliche Dinge. Manche nur eine extra Version für das Icon vom Hamburger Menü? Oder ein Icon vom "Inhaltsverzeichnis", damit sich das dann dreht, wenn man es aufklappt. Das geht alles mit CSS pure.

Irgendwie habe ich das Gefühl, die ganzen Entwickler arbeiten nach dem Motto: Neues Template oder Addon oder Modul? Erst mal Schriften einbinden, ob ich die brauche egal, die müssen zuerst rein.

Irgendwie bauen die alle immer falsch rum auf. Das sollte so wenig sein wie möglich und dann erweitert, wenn benötigt. Auch CSS allgemein. Warum werden da teils 6000 bis 7000 CSS-Klassen ausgeliefert, wenn 98% davon auf der Webseite gar nicht benutzt werden? Geht das nicht modular? Also nur das zusammenbauen, was die Seite auch wirklich benutzt? Sollte ein CMS doch eigentlich können, ist ja schließlich selbst modular und weiß eigentlich, was wo benutzt wird.