Für das Autohaus König & Partner durften wir eine neue...
Darkmode: Stolperfalle für Webdesigner
Wer kennt ihn nicht, den Darkmode – mittlerweile die Grundeinstellung von vielen Nutzern. Kein Wunder, schließlich kann so – je nach Display – unter Umständen etwas Akku eingespart werden. Für die Augen ist er auch oft – vor allem abends – angenehmer als ein Bildschirm, der so hell ist, dass man fast denkt, das Licht am Ende des Tunnels zu sehen. War es zunächst ein praktisches Feature für Smartphones, greifen nun auch viele am Laptop oder PC zu den dunkleren Einstellungen der Browser. Heißt also: War der Darkmode vor ein paar Jahren noch der neue heiße Shit, ist er heute keine Seltenheit mehr. Er ist zum Standard für alle die geworden, die beim Blick auf ihr Display nicht die ganze Zeit eine Sonnenbrille tragen wollen. Warum das nun wichtig ist? Ganz einfach, für uns Webdesigner ergibt sich somit eine kleine (oder große) Stolperfalle, die es unbedingt zu beachten gilt.
Webdesigner sehen schwarz
Für gewöhnlich gestalten wir unsere Websites nicht im Darkmode, sondern im Standardmodus unserer Browser – also hell. Wir mussten allerdings feststellen, dass sich ein Blick auf die „dunkle Seite der Macht“ doch mal lohnt. Vor allem um Probleme zu beheben, von denen man vorher nicht wusste, dass sie existieren. Zum Beispiel, wenn man eine dunkelgraue Schrift auf weißem Hintergrund verwendet, die sich dann auf schwarzem Hintergrund im abgedunkelten Modus irgendwie nicht mehr ganz so gut lesen lässt. Oftmals werden die Kontraste zwar automatisch angepasst, manchmal allerdings auch nicht. 🙁 Auch bei Bildern sollte man nochmal genauer hinschauen. Ein freigestelltes Objekt sieht als JPG auf weißem Hintergrund super aus. Im Darkmode ist es auf dem dunklen Background allerdings von einer weißen Box umgeben. Unter Umständen sieht das auch ganz gut aus – oder eben nicht. In solchen Fällen, muss man als Webdesigner dann eingreifen. Natürlich gibt es die Möglichkeit nochmal ein komplett neues Template anzulegen, das dann aktiviert wird, wenn der Darkmode eingeschaltet ist. Das bedeutet allerdings einen deutlichen Mehraufwand, weil man ja quasi zwei Websites erstellt. Alternativ kann man aber auch speziell nach den Stellen suchen, die Probleme machen und diese dann mit ein paar CSS-Anweisungen beheben. Auch eine Kombination aus beiden Ansätzen ist natürlich möglich.
Ohne Fleiß, kein Preis
Kling erst mal alles nicht so besonders schwierig und ist an sich auch tatsächlich kein Hexenwerk. Über die Wichtigkeit vom responsive Design muss mittlerweile nicht mehr aufgeklärt werden. Doch die Beachtung des abgedunkelten Modus wird leider oft vergessen. Außerdem gestaltet es sich an manchen Stellen dann tatsächlich doch nicht ganz so einfach, wie es zunächst scheint. Denn eine Website, die auf einem iPhone im Darkmode gut aussieht, sieht auf einem Smartphone von Samsung vielleicht wieder ganz anders aus. Es existieren also nicht nur Unterschiede zwischen den verschiedenen Farbmodi, sondern auch noch zwischen den Geräteherstellern. Damit Ihre Website im Darkmode nicht zu einem kompletten Blackout wird, empfiehlt sich also die Prüfung möglichst vieler Eventualitäten. Vielleicht fragen Sie sich jetzt: „Wer hat denn die Zeit dafür?“. Na ja, also ganz einfach: Wir. Denn das gehört schließlich zu unserem Job. 🙂
Come to the dark side
Wir haben zwar leider gerade keine Cookies parat, aber uns ist es sehr wichtig, dass unsere Websites nach Möglichkeit in sämtlichen Einstellung und auf allen gängigen Geräten gut aussehen. Und das sollte der Anspruch jedes Webdesigners sein. Ganz egal, ob man nun einen Kompromiss zwischen Aufwand und Aussehen eingeht und nur ein paar CSS-Befehle nutzt, um die gröbsten Probleme zu beheben oder ob man wirklich tiefer in die Materie eintaucht und so ein optimales Design im hellen und abgedunkelten Modus entwickelt. Am Ende gilt: Die Website für möglichst alle User nutzbar zu machen – unabhängig vom präferierten Darstellungsmodus.
Übrigens: Für viele Websites existiert auch gar keine Darkmode-Variante. In diesem Fall sieht die Seite genauso aus wie im Standardmodus. Doch sobald sich die Website im Darkmode verändert, empfiehlt es sich sie auch dementsprechend anzupassen.