Ich habe in letzter Zeit ein bisschen an meinem Blog geschraubt. (Als hätte ich in der Garage nicht schon genug zu schrauben!). Das betrifft sowohl die Technik im Hintergrund, als auch das Design. Ich hoffe, es gefällt!
Optische Änderungen
Die Veränderungen am Design springen vielleicht nicht sofort ins Auge, da ich bewusst behutsam vorgegangen bin: Die größte Änderung ist, dass der Blog, bzw. der Inhaltsbereich, jetzt ca. 200 Pixel breiter ist. (Zumindest auf Bildschirmen, die groß genug dafür sind. Am Smartphone wurde schon vorher die gesamte Breite ausgefüllt.)
Dadurch kann ich Fotos deutlich größer zeigen und das Layout insgesamt “luftiger” machen. Etwas größere Schrift, größere Abstände etc. Ich hoffe, dass es dadurch nicht nur besser aussieht, sondern auch besser lesbar ist.
Außerdem habe ich viele Details aufgehübscht. Die Ausrichtung der Überschriften, die Darstellung der Bildunterschriften, den Fußbereich etc.
Technische Änderungen
Bei der Technik ging es mir auch hauptsächlich um Details. Ich habe zum Beispiel die Kategorien aufgeräumt, damit mehr Ordnung herrscht und man sich auch gezielter in bestimmten Bereichen bewegen kann. Außerdem hoffe ich, dass unter den Blogbeiträgen nun noch besser passende Vorschläge zu finden sind. Bislang war das eher ein Glückspiel.
Probleme? Kritik? Wünsche?
Momentan läuft noch nicht alles ganz rund. Gerade bei älteren Beiträgen sind manche Bilder nicht richtig ausgerichtet oder leicht unscharf. Hier und da stimmt auch die Darstellung nicht. Um das zu beheben, muss ich Beitrag für Beitrag durchgehen … und das dauert ein bisschen.Falls jemand einen Fehler findet, kann er den gerne hier melden; ich behebe ihn dann sofort.
Außerdem würde ich mich natürlich über Feedback freuen! Was gefällt Dir? Was eher nicht? Und wo besteht noch dringender Handlungsbedarf?
Gratulation und Chapeau zum mutigen Schritt. Ich bastle seit Monaten an einem Wechsel des CSS zu Bootstrap herum – und komme aus dem Ausbügeln von Fehlern nicht mehr hinaus.
Daher läuft mein Blog bisher noch immer weiter mit 100% selbstgemachtem/-selbstverbocktem Code. 😀 Das mit den Bildern, welche in der Testphase irgendwo herumlungern wo man sie gar nicht haben will oder erwartet hat kenne ich also nur zu gut. 😉
Für mich als Informatikstudent UND MZ-Fahrer ist dieser Blog ein wahr gewordener Traum! In der MZ- und Simson-Szene wimmelt es nur so vor schlecht gemachten Webseiten und Shops. Teilweise steinalt in plain HTML. Über Regenbogenfarben und Comic Sans ist so ziemlich alles dabei was den ein oder anderen Webentwickler grün anlaufen lässt.
Der Ratracer Blog ist ein (fast) perfektes Gegenbeispiel! Interessante Beiträge, schlichtes aber ansehnliches und funktionales Design, hübsche Fotos obendrein! Insgesamt wirkt alles sehr stimmig und durchdacht. Dickes fettes Lob dafür! 🙂
Nur eine Sache Stört mich. Ich lese den Blog größtenteils Mobil auf dem Smartphone. In der mobilen Ansicht gibt es ein margin von 30px und die width für den Content (.entry-content) steht auf 80%. Mein Vorschlag: margin bleibt und nur die width auf 100% setzen. Damit ist weniger platzt verschenkt und ich muss mir die Seite nicht jedes mal rann zoomen bzw. das Handy drehen.
Edit: Ich habe gesehen das es eigentlich schon genauso sein sollte wie ich beschrieben habe. Jedoch greift dort die media query, welche die width für den Content auf 100% setzt nicht richtig. Ggf. könntest du hier mit !important arbeiten (unschön) oder die media query Regel anpassen, in dem du die id #main noch zwischen den beiden Klassen einfügst. (sprich: .singular #main .entry-content)
Ansonsten weiter so! Ich freue mich schon auf den nächsten Beitrag. 🙂
Hallo Homer!
Ganz vielen Dank für Dein ausführliches Feedback.
Ich bin mir nicht ganz sicher, welchen margin Du meinst. Ich habe jetzt mal das padding vom body auf 0 gesetzt. Damit geht der “weiße Bereich” auf dem Handy und Tablet über die gesamte Breite, das Hintergrundbild erscheint erst bei größeren Auflösungen. Ist das besser so?
Ich muss zugeben, dass ich die Seite selbst nur sehr selten mit dem Smartphone besuche und diese Ansicht deshalb stiefmütterlich behandle. Wie ich gerade gesehen habe, funktionieren die Überschriften auch nicht überall korrekt. Da muss ich wohl noch mal ran und mehr auf relative Angaben setzen.
Viele Grüße!
Martin
Hey Martin,
das mit dem Hintergrund war absolut ok. 😀 Es geht um die Klasse .entry-content. Hier sollte die width in der mobilen Ansicht eigentlich 100% betragen, die Regel wird aber überschreiben. Das führt dazu das 70px an Platz verschenkt werden (am Beispiel eines Endgerätes mit einem Viewport von 412px). Ich denke auf dem Screenshot wird das ganze ersichtlich, rechts ist so wie es eigentlich sein sollte. 🙂 tinyurl.com/ratracer-mobil
LG
Homer
Hi Homer,
ich glaube, jetzt habe ich es begriffen und hoffentlich auch korrekt angepasst. Zufrieden? 🙂
Viele Grüße!
Ja Perfekt! Vielen Dank! 🙂
Beste Grüße!