Am 09.05.25 durften Cleo und ich in eine etwas andere Bubble eintauchen. Wir haben das UX Camp Bremen 2025 in der Bremer Überseestadt besucht. Hier hatten Designer, Entwickler und natürlich auch SEOs die Möglichkeit, sich im Rahmen eines Barcamps über die verschiedensten Themen auszutauschen. Das Event startete mit einer inspirierenden Keynote von Ida Persson, die den Einfluss von Design kritisch beleuchtete und auf die möglichen negativen, sowie positiven Einflussfaktoren von Design hinwies.
Danach folgte die Sessionplanung und aus den geplanten 15 wurden am Ende sogar 19.
Mach dir das Leben nicht unnötig schwer - Native HTML Elemente
Als erstes schnappte ich mir einen Platz bei Timur Çelikel, Front End Developer, UX- und UI- Experte, der das Thema “Nutzung von nativen HTML Elementen” zur Diskussion stellte.
Native HTML-Elemente sind standardisierte, vom Browser direkt unterstützte HTML-Tags wie <button>, <form>, <select>, usw. Diese Elemente bringen bereits von Haus aus eine semantische Bedeutung, Standardverhalten, Tastatursteuerung und Styles mit. Sie unterscheiden sich von benutzerdefinierten Komponenten oder JavaScript Lösungen.
Nach einer Einführung von Timur in das Thema, folgte ein spannender Austausch zwischen allen, in dem Vor- und Nachteile herausgestellt wurden:
Vorteile für Entwickler, UXler und SEOs:
- Einfachheit: Weniger Code für Standardverhalten (z. B. <button> ist automatisch klickbar, fokussierbar)
- Konsistenz: Einheitliches Verhalten über Browser hinweg (Standardkonformität)
- Wartbarkeit: Leichter zu lesen, zu pflegen und zu debuggen
- Zeitersparnis: Kein Neuentwickeln von Grundfunktionen wie Datepicker
- Vertrautheit: In vielen Fällen kennen Nutzer das Verhalten (z. B. wie ein <select> funktioniert)
- Responsives Verhalten: Viele native Elemente passen sich automatisch Bildschirmgrößen an
- Performance: Schnellere Ladezeiten durch weniger JavaScript und einfache HTML Struktur
- Darstellung: Einfache Anpassung durch CSS (z. B. mit appearance: none; Entfernt natives Styling oder all: unset; Entfernt alle Styles und Verhalten → ACHTUNG: erzeugt wiederum wesentlichen Mehraufwand)
- Semantik: Suchmaschinen verstehen native Elemente in der Regel ohne Probleme
- Screenreader-Kompatibilität: Native Elemente haben automatisch richtige ARIA-Rollen und beschreibende Labels
- Tastaturbedienbarkeit: Eingebaute Keyboard-Navigation (z. B. mit <button>)
- Fokusmanagement: Automatisch korrektes Fokusverhalten ohne Extra-Code
Nachteile:
- Eingeschränkte Designflexibilität: Native Elemente sehen je nach Betriebssystem und Browser unterschiedlich aus und verhalten sich teils leicht unterschiedlich – was ein konsistentes UI-Design erschweren kann
- Limitierter Funktionsumfang: Custom-UI-Komponenten (z. B. die Auswahlmöglichkeit einer Daterange) erfordern oft eigenes Verhalten und lassen sich schwer mit ausschließlich nativen Mitteln umsetzen
- Eingeschränkte Interaktivität: Einige komplexe Interaktionen (z. B. Drag-and-Drop) sind mit nativen Elementen schwer oder gar nicht umsetzbar
Sehr interessant fand ich die Initiative der großen Browser-Anbietern, die seit 2022 stattfindet:
“Our shared objective is to enhance interoperability between web platforms, thereby simplifying the work of developers and enriching the overall experience for internet users.[...]Ultimately, Interop strives to eliminate inconsistencies between browsers and foster a unified vision within the industry.” (Quelle)
Was ich für mich mitgenommen habe:
- Native HTML-Elemente sind eine sichere Bank für Standardinteraktionen, weil sie mit Barrierefreiheit, SEO und Usability von Haus aus kommen
- Für einfache oder standardisierte Interaktionen (z. B. Formulare, Navigation, Buttons) sollte der Einsatz stets bevorzugt geprüft werden
- Custom-Elemente sollten nur verwendet werden, wenn native Elemente funktional oder gestalterisch nicht ausreichen
Fokus auf Minimalismus & Effizienz
Die zwei Themen “Nachhaltigkeit” und “Barrierefreiheit” zogen sich eingeleitet durch die Keynote durch den gesamten Tag.
Die prägnantesten Punkte des Tages in aller Kürze:
- Weniger ist mehr: Nutze einfache responsive Layouts und reduziere unnötige Animationen
- Reduziere die Dateigrößen (Bilder, Videos, Fonts)
- Verwende moderne Bildformate (z. B. WebP) und Lazy Loading
- Wähle einen Hosting-Anbieter, der auf erneuerbare Energien setzt
- Nutze standardisierte, gut dokumentierte Technologien
- Vermeide veraltete Plugins
- Baue sauberen Code: semantisches HTML
- Sinnvolle Seitenstruktur: So viele URLs wie nötig, aber so wenig URLs wie möglich
Natürlich muss immer abgewogen werden, welche Maßnahmen im Hinblick auf das Unternehmen umgesetzt werden können. Ein minimalistisches Design der Website passt nicht zu jeder Brand, aber zum Glück gibt es viele Möglichkeiten, wenigstens ein bisschen nachhaltiger zu werden.
Das Thema “Barrierefreiheit” war ebenfalls sehr präsent, aber da Sandra über dieses Thema bereits mehrfach berichtet hat, kommt dazu zu einem späteren Zeitpunkt sicher nochmal ein Beitrag von uns.
Falls Du jetzt schon mehr erfahren willst und Sandras Beiträge verpasst hast:
Fazit:
Lass die Bereiche Entwicklung, Design und SEO noch mehr zusammenwachsen und vor allem die Kommunikation besser werden. So können wir alle unsere Projekte viel besser umsetzen und uns gegenseitig supporten.
Denn was mir stark aufgefallen ist, wir schauen teilweise auf dieselben KPIs (worüber Cleo Dir in ihrem Beitrag noch mehr erzählt), wir brauchen an ähnlichen Stellen Ressourcen und Überzeugungskraft und wir verfolgen die gleichen Ziele.
Fragt nach und schafft gegenseitiges Verständnis für die Bereiche in Eurem Unternehmen.