Web Development in Design & Code
Zusammen mit Prateek Saxena habe ich sein WordPress-Theme „zuari“, welches ich auch für diese Seite verwende, mit Dark-Mode Support ausgestattet.
Das Theme ist ab sofort auf GitHub und in kurzer Zeit auch auf WordPress.org in der aktualisierten Version verfügbar:
Seit der Einführung des Darkmodes in iOS 13 und Mac OS Mojave ist dieser endgültig in der breiten Gesellschaft angekommen.
Auch große Websites/Apps wie Reddit und YouTube bieten diesen schon seit längerem an.
Um das Design entsprechend anzupassen, sind auch passende Farben zu verwenden. Welche Farben in iOS und Mac OS Verwendung finden, habe ich hier aufgelistet (wird fortlaufend aktualisiert):
| Farbe | HEX-Code | RGB-Code | Vorschau |
| Grau 6 | #242426 | rgb(36,36,38) | |
| Grau 5 | #2c2c2e | rgb(44,44,46) | |
| Grau 4 | #3b3a3c | rgb(58,58,60) | |
| Grau 3 | #48484a | rgb(72,72,74) | |
| Grau 2 | #636366 | rgb(99,99,102) | |
| Grau 1 | #98989d | rgb(152,152,157) | |
| Pink | #ff375f | rgb(255,55,95) | |
| Lila | #bf5af2 | rgb(191,90,242) | |
| Indigo | #5e5ce6 | rgb(94,92,230) | |
| Blau | #0a84ff | rgb(10,132,255) | |
| Teal | #64d2ff | rgb(100,210,255) | |
| Grün | #30d158 | rgb(48,209,88) | |
| Gelb | #ffd60a | rgb(255,214,10) | |
| Orange | #ff9f0a | rgb(255,159,10) | |
| Rot | #ff453a | rgb(255,69,58) |
Hierbei handelt es sich um Systemfarben, die sich je nach Möglichkeit auch auf deiner Seite wiederfinden sollten, wenn du einen Dark-Mode einführst.
Während Grau 1-6 Hintergrund- und Labelfarben definieren, sind die anderen Farben jeweils für Buttons, Warnungen, Symbole und ähnliches gedacht.
„Ja, wir könnten jetzt was gegen den Klimawandel tun, aber wenn wir dann in fünfzig Jahren feststellen würden, dass sich alle Wissenschaftler doch vertan haben und es gar keine Klimaerwärmung gibt, dann hätten wir völlig ohne Grund dafür gesorgt, dass man selbst in den Städten die Luft wieder atmen kann, dass die Flüsse nicht mehr giftig sind, dass Autos weder Krach machen noch stinken und dass wir nicht mehr abhängig sind von Diktatoren und deren Ölvorkommen. Da würden wir uns schön ärgern.“
Marc Uwe Kling
Mobile First Development ist mittlerweile der Branchenstandard. Einmal nach diesem Prinzip gearbeitet, möchte man eigentlich nicht mehr zurück.
Die Zeiten der extra Mobile-Seiten sind vorbei (obwohl sich diese im Bezug auf <noscript> und ähnliches immer noch als nützlich erweisen können), genau so die Zeiten der Desktop-Seiten, die in voller Größe auf dem Smartphone-Display dargestellt werden.
Der erste Entwurf der Seite sollte bereits auf Smartphone-Größe angepasst sein:
Achtet hierbei bereits darauf, wie Links funktionieren sollen, ob bestimmte Effekte genutzt werden sollen, etc. Dabei könnt ihr euch durchaus Gedanken machen, ob diese sowohl auf mobilen Geräten, als auch auf dem Desktop funktionieren.
Erst dann wird eine Desktop Seite, aufbauend auf dem Smartphone-Mockup erstellt:
Und nun wird es schwierig: Mobile First mag super für die mobile Gestaltung sein, schränkt aber die Desktop-Gestaltung ein. Achtet unbedingt darauf, dass die User-Expierence auf dem Desktop nicht unter dem mobilen Design leidet. Vermeidet das „Hamburger-Menü-Icon“ auf der Desktop-Variante und nutzt den vollen Platz des größeren Bildschirms aus. Selbiges gilt für Tablets.
Demnächst wird hier mehr zum Thema Mobile-First erscheinen.