Ich habe das lange Wochenende genutzt, um meiner Website – dem eBildungslabor – ein neues Design zu geben. Das Ergebnis ist für mich nun erst einmal gewöhnungsbedürftig, aber ich mag es, dass ich durch das Full Site Editing im neuen Theme nun sehr viel mehr anpassen und gestalten kann. Vielen Dank an Anders Norén für das Poe Theme, das ich für dieses neue Design nutze.

Bei der Konzeption der Seite habe ich ein paar Veränderungen vorgenommen:

• Ich stelle mein Angebot im eBildungslabor nun etwas mehr ins Zentrum. Man wird direkt dazu eingeladen, mir eine Anfrage zu stellen. Und auch so etwas wie Referenzen sind deutlich sichtbarer.
• Ich versuche Nutzenden unterschiedliche Zugriffe zu meinen Inhalten zu geben: eine Kuratierung auf der Startseite mit sechs Empfehlungen, die Möglichkeit zur Zufallsauswahl eines beliebigen Blogbeitrags, eine prominentere Suche und ein einfacher Wechsel zwischen unterschiedlichen Kategorien.
• Ich habe angefangen ein bisschen Spielerei einzubauen. Unter anderem die bereits oben erwähnte Zufallsauswahl, aber auch ‚klickbare‘ Texte an unterschiedlichen Stellen.

Wer solch einen klickbaren Text nachbauen Will, hier ist ein Beispiel-Code dafür, der in einen HTML-Block eingefügt werden kann:

---

<p>
  <a id="begruessung" class="interaktiv" href="#"><span class="text">Hallo.</span></a>
  Dieser Text ist
  <a id="adjektiv" class="interaktiv" href="#"><span class="text">veränderbar</span></a>.
</p>

<style>
  .interaktiv {
    display: inline-block;
    color: #FF69B4;
    text-decoration: none;
    cursor: pointer;
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const maps = {
      begruessung: [
        "Hallo.", "Guten Tag.", "Guten Morgen.", "Moin.",
        "Schön, dass Sie hier sind.", "Guten Abend.",
        "Toll, dass du vorbeischaust.", "Servus.", "Willkommen.", "Hi."
      ],
      adjektiv: [
        "veränderbar", "klickbar", "lustig",
        "spielerisch", "individualisierbar", "remixbar"
      ]
    };

    const ids = ["begruessung", "adjektiv"];
    let lastTouched = 0;

    function rotate(id) {
      const span = document.getElementById(id).querySelector(".text");
      const list = maps[id];
      const current = span.textContent.trim();
      let idx = list.indexOf(current);
      span.textContent = list[(idx + 1) % list.length];
    }

    function handleEvent(e, id) {
      e.preventDefault();
      const now = Date.now();
      if (now - lastTouched > 300) {
        rotate(id);
      }
      lastTouched = now;
    }

    ids.forEach(id => {
      const el = document.getElementById(id);
      el.addEventListener("click", e => handleEvent(e, id));
      el.addEventListener("touchstart", e => handleEvent(e, id), { passive: false });
    });
  });
</script>

---

Wird dann zu:

Hallo. Dieser Text ist veränderbar.

Fertig bin ich mit der Website-Anpassung noch nicht. Insbesondere sind viele Kategorieseiten noch ziemlich Kraut und Rüben, weil ich früher einen Masonry Stil hatte und jetzt ein Grid, womit einheitlichere Bilder nötig werden. Ein bisschen werde ich das in den nächsten Tagen noch anpassen – und dann eben vor allem zukünftig darauf achten.

Prominenter ist nun auch die Verbindung ins Fediverse. Umso mehr freue ich mich also über Reaktionen und Kommentare! :-)

---

Beitrag weiternutzen und teilen

Dieser Beitrag steht unter der Lizenz CC BY 4.0 und kann somit gerne offen weitergenutzt und geteilt werden. Hier kannst du dir den Beitragslink und/oder den Lizenzhinweis kopieren.

---