Scrollbar Styling Webdesign

Im Webdesign erhält die Scrollbar wenig Aufmerksamkeit. Verständlicherweise, denn heute wird meist per Finger oder Trackpad gescrollt und nicht wie vor 15 Jahren per Klick auf den Pfeil nach oben oder unten. Oft braucht man die Scrollbar gar nicht wahrzunehmen und wird sogar ausgeblendet. Wie kann man jedoch zwecks Design die Scrollbar bewusst einsetzen?

Wie ist die Situation im Jahr 2017 für eine so denkbar einfache Sache? Erstaunlicherweise sehr schlecht. Sogar Google hat bei Gmail eine gestylte Scrollbar. Jedoch nur in Webkit-Browsern wie Chrome, Safari und Opera, nicht bei Firefox, Edge sowie den meisten mobilen Browsern.

caniuse.com stellt die Unterstützung vom sogenannten CSS Custom Scrollbar Specification so dar:

Für Cracks als CSS3-Tag würde das so aussehen:

  • ::-webkit-scrollbar
  • ::-webkit-scrollbar-button
  • ::-webkit-scrollbar-track
  • ::-webkit-scrollbar-track-piece
  • ::-webkit-scrollbar-thumb
  • ::-webkit-scrollbar-corner
  • ::-webkit-resizer

Zum Glück gibt es diverse Javascript-Plugins, die einem helfen, die Webkit-Beschränkungen zu umgehen. Die meisten sind leider nicht sehr zuverlässig.
Für das ARCHIV-KALK-Projektatelier habe ich eine Webseite geschrieben, welche dieses Plugin verwendet. Die Scrollbar spielt im Design eine zentrale Rolle. Das minimalistische Layout und die klaren, punktuierten Akzente, durch die optisch an Windows 2.0 angelehnten Objekte, sollen eine Grundlage für ein solides User Experience bilden.

Die Webseite sieht so aus:
www.ARCHIV-KALK.ch

(le)

Kritik
von Kim Schläpfer

Idee

Um für das Projektatelier ARCHIV-KALK eine geeignete Online Plattform zu geben, sass ich mit meinen Freunden zusammen. Gemeinsam haben wir das Layout und das angestrebte User Experience geplant. Es sollte wie auch ihre Projekte elegant und minimalistisch sein. 

Produktion

Als unerfahrener Web Entwickler brauchte ich sehr lange bis ich eine funktionierende Lösung gefunden habe. Viele Wege füren nach Rom, aber auch sehr viele in die Pampa. So brauchte ich etliche Anläufe, Trial & Errors mit verschiedenen Ansätzen bis ich die jetzige VersionAber sogar diese hat einige Ecken und Kanten und funktioniert nicht perfekt in manchen Browsern. Es war ein langer und steiniger Weg die Webseite von Null aus zu produzieren. Es hat mich aber sehr viel weitergebracht im Bereich Webentwicklung und natürlich konnte ich die Erfahrungen aus den Modulen Interaktive Medien 1,2 und 3 nutzen. Für die Zukunft würde ich das ganze mit einer Datenbank versehen, um die Beiträge nicht manuel nachtragen zu müssen. In diesem Fall war mir dies jedoch noch nicht so wichtig, da es nur 1-2 Beiträge pro Jahr sind, und ich die Datenbank Geschichte erst dieses Semester kennengelernt habe. Die Scrollbar funktioniert so richtig gut nur in den Webkit-Browsern. Für zukünftige Projekte würde ich auf Support für Firefox & Co. verzichten und mich auf die Webkit-Browser konzentrieren.

Fazit

Durch viele Versuche und falsche Anläufe lernte ich sehr viel. Dieses Projekt hat mich definitiv sehr viel weiter gebracht und ist eine gute Vorbereitung für meine Major Wahl Media Application.

Keine Kommentare

Schreibe einen Kommentar