Jugendbuchtipps.de hat ein neues Layout!
Es war leider notwendig, obwohl ich das alte Layout (siehe Screenshot unten) mochte … Aber da war nichts zu machen. Die Layoutvorlage (bei WordPress Theme genannt), die ich verwendet habe, war veraltet und wäre nicht mehr mit neuen PHP-Datenbank-Versionen gelaufen. Und auf die muss man bald umstellen, weil die alten Versionen abgeschaltet werden (und davon abgesehen ja Sicherheitsprobleme haben).
Von daher habe ich das Wochenende mit der Layout-Umstellung verbracht. Da ich in diesen Dingen kein Fachmann bin, war es viel Trial & Error – aber unterm Strich bin ich nun sehr zufrieden. Manches wie die neue Menüleiste oben ist ein Fortschritt. Glücklich bin ich aber vor allem, weil alles im Großen und Ganzen reibungslos geklappt hat (für die Fachleute: ich habe die neue Version in einer staging-Umgebung bei meinem Provider erstellt, dann übertragen).
Wie lange Jugendbuchtipps.de das alte Layout hatte, weiß ich leider nicht mehr so genau. Aber es waren in jedem Fall 10 Jahre, weil ich eine vorhin alte Mail gefunden habe, in der das alte Theme (Restimpo genannt) erwähnt wurde. Das war 2016. Nun hoffe ich jedenfalls, dass ich für die nächsten Jahre von größeren Layoutarbeiten verschont werde!
Solltet ihr Probleme bemerken, so nutzt bitte die Kommentarfunktion unten. Ich werde die nächsten Wochen selbst kritisch auf alles schauen. Und Feedback – ob positiv oder negativ – ist jederzeit willkommen!
(Ulf Cronenberg, 12.07.2026)
Entdecke mehr von Jugendbuchtipps.de
Melde dich für ein Abonnement an, um die neuesten Beiträge per E-Mail zu erhalten.
Michael M.
Da das Internet-Archiv viele alte Versionen dieser Seite gespeichert hat, kann man dort schön nostalgisch stöbern: https://web.archive.org/web/20030000000000*/https://www.jugendbuchtipps.de
Dort finde ich das alte Layout sogar schon Anfang 2015, wenngleich mit anderem Foto in der Kopfzeile: https://web.archive.org/web/20150214045503/http://ulfcronenberg.macbay.de/wordpress/
Ein paar kleine Fehler hat das neue Layout noch:
* Fährt man mit der Maus über die Links in der rechten Seitenspalte (sowohl „schicke mir“ unter „Info-Email“ als auch sämtliche Links unter „Kategorien“, so überlagern sie den nachfolgenden Text.
* Ein paar Texte sind auf Englisch (oder etwas, das fast wie Englisch aussieht …): „You May Also, Like !“ und „Your email address will not be published.“ Auch sollte in „Schreibe Einen Kommentar“ das „einen“ wohl besser klein sein.
* Die Sternchen nach den Pflicht-Kommentar-Feldern rutschen bei mir in die nächste Zeile.
* Persönlich finde ich die Einblende-Animationen eher störend und zumindest zu langsam.
* Auf kleinen Bildschirmen werden Teile der Kopfzeile (insbesondere das Veröffentlichungsdatum, manchmal aber auch der Titel) verdeckt. Auf sehr breiten Bildschirmen sieht es dagegen etwas merkwürdig aus, wenn das Hintergrundbild der Kopfzeile sich wiederholt.
Ulf Cronenberg
Hallo Michael,
vielen Dank für deine ausführliche Rückmeldung – bin dir sehr dankbar dafür. Das mit den Links, die beim Drüberfahren nach rechts rutschen, ist mir aufgefallen, ich muss mal schauen, ob ich den Code finde, wo ich das deaktivieren oder rausnehmen kann. „You May Also, Like!“ hab ich gesehen, ist aber leider nicht in der Sprachdatei zu finden, die anderen englischen Stellen muss ich mal anschauen.
Ja, das mit den kleinen Bildschirmen und der Artikelüberschrift ist ein Problem. Ließe sich wohl bloß lösen, wenn ich die Überschrift aus dem Kopf nehme und darunter beim Artikel voranstelle. Ich fand auf dem Computer allerdings den Artikeltitel im Header schon gut und smart, aber muss vielleicht doch drauf verzichten. Und das sich wiederholende Header-Bild bei breiten Bildschirmen ist nicht auf der Startseite, nur bei Artikel zu sehen. Schau ich mir mal an. (Ich selbst habe einen großen Bildschirm, aber Webseite ziehen sich bei mir nie über die ganze Breite.)
Viele Grüße
Ulf
Ulf Cronenberg
Hallo Michael,
ich habe einige Probleme gelöst. Die Links in der Sidebar rutschen nun nicht mehr in den nachfolgenden Text, wenn man mit der Maus drüberfährt. Die Überschrift und Kategorien hab ich aus dem Header genommen und über den Text gestellt (schweren Herzens) – aber nun sollten sie auch für mobile Leser/innen gut zu sehen sein. Das Header-Bild bei den Artikel wird nun nicht mehr wiederholt auf breiten Bildschirmen. Die Einblendeanimationen dürften reduziert oder weg sein. Nicht lösen konnte ich zwei Dinge: Das „You May Also, Like !“ in der Übersetzungsdatei ist übersetzt, wird aber anders als die anderen Übersetzungen nicht übernommen. Keine Ahnung, warum – damit muss ich wohl leider leben. Auch das mit den Sternchen beim Kommentar weiß ich nicht zu fixen.
Noch mal danke für deine gründliche Rückmeldung,
viele Grüße
Ulf
Michael M.
Sieht ziemlich gut aus! Ein paar Kleinigkeiten noch:
Ich sehe im benutzerdefinierten CSS die Regel
#secondary .widget a:hover,
#secondary .widget a:focus{
transform: translateX(15px);
-webkit-transform: translateX(0px);
}
Die 15px oben sollten auch 0px sein, auch wenn das so lange nicht auffallen wird, wie alle Browser noch -webkit-transform unterstützen.
Ich würde noch ein
.widget-title { text-transform: none; }
beim benutzerdefiniertem CSS ergänzen, die sture Großschreibung in Überschriften sieht gerade bei „3 Kommentare Auf “Jugendbuchtipps.De Hat Ein Neues Layout!”“ ziemlich ungünstig aus.
Und die Sternchen für die Pflichtfelder könnte man mit
.required { position: absolute; right: 1em; }
hochziehen (ich scheue zwar ein bisschen vor absoluter Positionierung zurück, aber alle meine anderen Versuche sahen ziemlich blöd aus).
Ulf Cronenberg
Danke, Michael, hab die Sachen, die du genannt hast, umgesetzt. Die Großschreibung in Kommentar-Hinweis ist weg, das Sternchen sitzt im Feld. Vielen Dank. Schön, wenn einem jemand hilft, der Ahnung davon hat. Bei mir ist das nur trial & error. Ich verstehe manches, aber hab es nie richtig mit CSS gelernt.
Michael M.
Ich habe noch ein Problem gefunden: Bei https://www.jugendbuchtipps.de/2024/08/26/buchbesprechung-ursula-poznanski-scandor/ und einigen weiteren Seiten kommen die Kommentare oben, der Inhalt unten, und die Seitenleiste ganz am Ende. Das Problem steckt im fehlerhaften alt-Attribut in img loading=“lazy“ decoding=“async“ src=“https://vg07.met.vgwort.de/na/94bba2d0a4de45e7927a3497ebe8095d“ width=“1″ height=“1″ alt=“ Das zerschießt dann die Struktur auf diese unerwartete Weise.
Ulf Cronenberg
Verstehe ich es richtig, dass das Problem ist, dass beim alt-Attribut das zweite Anführungszeichen fehlt? Das war leider ein Problem, dass ich eine Zeitlang falsch kopierte VG-Wort-Pixel-Links verwendet habe … Dann muss ich wohl mal schauen, wo das so ist. Wird ein bisschen Fleißarbeit …
Hab es getestet: Zweites Anführungszeichen drin, schon wird alles korrekt angezeigt. Danke für den weiteren Tipp, Michael!
Michael M.
Ja, durch das fehlende zweite Anführungszeichen gehörte der folgende Inhalt versehentlich zum alt-Attribut. Dadurch wurde das öffnende div-Tag verschluckt, womit im weiteren Verlauf die schließenden div-Tags falsch zugeordnet wurden und damit Inhalte in den falschen Containern landeten. Das alte Layout war bei solchen Fehlern wohl nicht anfällig, aber im neuen Layout ist genau festgelegt, welcher Container wo hingehört, sodass sich die falsche Reihenfolge ergab. Schon erstaunlich, wie ein so kleiner Fehler so große Auswirkungen haben kann.
Ulf Cronenberg
Das alte Theme hat da auch einen Fehler produziert, der aber recht harmlos war. Da war dann nur der Text der letzten Zeile an der falschen Stelle …