Diese Dokumentation fasst die heutigen Änderungen zusammen, die sowohl in der Bastbox als auch in BoardHQ durchgeführt wurden. Ziel war es, die Nutzererfahrung durch responsives Design und optische Verbesserungen auf mobilen Geräten zu optimieren.

1. Responsive Ausblendung von GIF-Bildern in Tabellen

Ausgangslage
In mehreren Tabellen werden GIF-Bilder angezeigt. Diese Bilder nehmen auf schmalen Bildschirmen (mobile Geräte oder enge Browserfenster) viel Platz ein und erschweren die Lesbarkeit.

Umsetzung
– Den <td>-Elementen, die die GIF-Bilder enthalten, wurde die CSS-Klasse .hide-on-small zugewiesen.
– Per CSS Media Query wird die Klasse unter 800 Pixel Viewport-Breite ausgeblendet:

@media (max-width: 800px) {
  .hide-on-small {
    display: none !important;
  }
}

Ergebnis
Wenn der Bildschirm schmaler als 800 Pixel ist, verschwinden die GIF-Bilder in den Tabellen. Der Text bleibt uneingeschränkt sichtbar und besser lesbar.

2. Ausblendung des Teamspeak-Banners im Footer bei schmalen Bildschirmen

Ausgangslage
Ein Teamspeak-Banner wird im Footerbereich eingebunden, um den Online-Status des Teamspeakservers zu visualisieren. Bei schmalen Viewports sollte auch dieses Banner ausgeblendet werden, damit der Footer übersichtlich bleibt.

Umsetzung
– Die <p>-Umgebung mit dem Banner erhält ebenfalls die Klasse .hide-on-small.
– Die bestehende Media Query sorgt dafür, dass auch dieses Banner unter 800 Pixel ausgeblendet wird.

Beispiel:

<p class="credits-right fright hide-on-small">
  <a href="https://bastbox.de/projekte/#rss-feeds">
    <img src="https://www.tsviewer.com/promotion/dynamic_sig/sig.php/clan150x19_all/1130115.png" alt="Teamspeak Banner" />
  </a>
  ...
</p>

3. Entfernung der Datumsanzeige bei den letzten Änderungen im Shortcode

Ausgangslage
Der Shortcode <!-- wp:plugins/list-last-changes /--> zeigt die zuletzt geänderten Seiten inklusive Änderungsdatum an. Für eine übersichtlichere Darstellung sollte das Änderungsdatum ausgeblendet werden.

Umsetzungsmöglichkeiten

span.list_last_changes_date {
  display: none !important;
}

4. Responsive Darstellung der zuletzt hinzugefügten Bilder auf der Startseite

Ausgangslage
Die zuletzt hochgeladenen Bilder werden auf der Startseite angezeigt. Um eine optimale Darstellung auch auf schmalen Bildschirmen zu gewährleisten, sollen die Bilder responsiv sein und sich flexibel an die Bildschirmbreite anpassen.

Umsetzung
– Die Bilder werden in einem flexiblen Container mit CSS Flexbox dargestellt.
– Der Abstand zwischen den Bildern wird mit der CSS-Eigenschaft gap gesteuert.
– Die Breite der einzelnen Bild-Container wird per CSS-Calc-Funktion responsive an die verfügbare Breite angepasst.
– Bei schmalen Anzeigen schrumpfen die Bilder proportional, um Überlaufen zu vermeiden und eine saubere Darstellung sicherzustellen.

Wichtig: Die CSS-Klasse latest-images oder ähnliche sollte im Plugin- oder Theme-Code entsprechend verwendet und mit responsive CSS versehen sein.

—

Zusammenfassung

Bereich Änderung Effekt
Tabellen mit GIF-Bildern .hide-on-small CSS-Klasse hinzugefügt, bei <800px wurden GIF-Bilder ausgeblendet Bessere Lesbarkeit auf kleinen Bildschirmen
Teamspeak-Banner im Footer .hide-on-small zu Banner-Element hinzugefügt, Banner bei <800px ausgeblendet Footer bleibt schlank auf mobilen Geräten
Shortcode „Last Changes“ Datum via Shortcode-Template oder CSS ausgeblendet Klarere und fokussierte Übersicht zuletzt geänderter Seiten
Startseite – Zuletzt hochgeladene Bilder Responsive Flexbox-Layout für Bilder mit flexiblem Abstand und Breite Optimale Darstellung der Bilder auch auf mobilen Endgeräten

Diese Änderungen verbessern maßgeblich die mobile Nutzererfahrung und sorgen für einen klaren, strukturierten und übersichtlichen visuellen Auftritt auf Bastbox und BoardHQ.

Links = Weniger als 800 Pixel Bildschirmbreite // Rechts = Mehr als 800 Pixel Bildschirmbreite.

  • Beispiel im BoardHQ – das GIF-Bild (Detektiv mit Lupe) und der rechte Teil der Fußzeile verschwinden bei einer Bildschirmbreite von weniger als 800 Pixeln.
  • Hinzu kommt, dass die letzten 5 Bilder, die dort angezeigt werden, nun nicht mehr die feste Größe von 245 x 245 Pixel behalten, sondern sich bei schmalen Bildschirmen ebenfalls proportional verkleinern, sodass immer 5 Stück nebeneinander passen.
Besucherzähler: 137