Apples Dark Mode Farben

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):

FarbeHEX-CodeRGB-CodeVorschau
Grau 6#242426rgb(36,36,38)
Grau 5#2c2c2ergb(44,44,46)
Grau 4#3b3a3crgb(58,58,60)
Grau 3#48484argb(72,72,74)
Grau 2#636366rgb(99,99,102)
Grau 1#98989drgb(152,152,157)
Pink#ff375frgb(255,55,95)
Lila#bf5af2rgb(191,90,242)
Indigo#5e5ce6rgb(94,92,230)
Blau#0a84ffrgb(10,132,255)
Teal#64d2ffrgb(100,210,255)
Grün#30d158rgb(48,209,88)
Gelb#ffd60argb(255,214,10)
Orange#ff9f0argb(255,159,10)
Rot#ff453argb(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.

Mobile First: Wie starte ich?

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:

“ ≡ “ vermeiden!

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.

Analytics/Statistiken für Webdevelopment auswerten

Um mehr über Nutzer und deren Nutzungsverhalten zu erfahren, nutzen einige Websites Analytics-Services, wie zum Beispiel Google Analytics oder Matomo (ehemals Piwik).

Das ist vor allem wichtig für e:Commerce-Seiten-Betreiber, die genau erfahren wollen, wo ein User abspringt oder warum ein User den Warenkorb verlässt (z.B. fehlende Zahlungsmethoden). Diese Seiten oder Optionen findet man unter „Absprungseiten“.

Interessant wird es für Webdeveloper aber vor allem bei den Sprachen, den installierten Plugins und Browsern. Wie ich in einem anderen Artikel aufgezeigt habe, wird der Internet Explorer praktisch gar nicht mehr benutzt, weshalb auch die Entwicklung für diesen eingestellt werden kann.

Diese Seite wird überhaupt nicht von Internet Explorer-Usern besucht

Dieser Nutzer benutzt ein iOS Gerät mit Safari

Auch wichtig zu wissen ist, woher die User kommen: Von einer Suchmaschine (Google, Bing, etc.) oder von einer anderen Seite? Oder rufen sie die Website direkt auf?

Beim User links war die Seite auf Platz 12 der Suchergebnisse, beim User rechts sogar auf Platz 1.

Was kann ich mit diesen Daten machen?

Wenn man weiß, woher die User kommen (hier Google), kann man sich auf das SEO auf diese spezielle Seite konzentrieren. Auf einer anderen Seite habe ich zum Beispiel sehr viele User, die über Bing auf die Seite gelangen. Dementsprechend habe ich dort die Webmaster-Tools von Bing im Einsatz, während bei den meisten anderen Seiten die Google Webmaster Tools verwendet werden.

Außerdem kann man bei einigen Suchmaschinen den gesuchten Begriff und die Platzierung in den Suchergebnissen sehen. Sollte die Seite nicht weit oben in den Ergebnissen sein, muss die SEO optimiert werden.

Mit den Browser- und Sprachdaten lässt sich herausfinden, ob vielleicht eine mehrsprachige Seite in Betracht kommt und ob man neuere CSS-Eigenschaften nutzen kann. Dafür müssten die User nämlich hauptsächlich neuere Browser verwenden. Außerdem lassen sich oft genutzte Bildschirmgrößen super als Vorlage für media-queries für das Responsive und Mobile-First Design nutzen.

Für Webshop-Betreiber kommt dann noch in Frage, die durchschnittliche Kaufkraft der Kunden über deren Geräte auszuwerten.

Website schneller machen – mit den Tips von Google PageSpeed Insights

Level: Anfänger
Sprachen: HTML, .htaccess, CSS

Eine schnelle Ladezeit verbessert das Google Ranking in jedem Fall.

Um die Ladezeit und die Verbesserungsmöglichkeiten einer Seite anzuzeigen, stellt Google die sogenannten „PageSpeed Insights“ zur Verfügung. Außerdem ist „Googles Lighthouse“ direkt in den Chrome Entwicklertools unter „Audits“ zu finden.

Ein guter Score (im Bereich von 90-100 Punkten) ist zu empfehlen, um das User-Erlebnis, als auch das SEO zu verbessern.

Folgendes sollte dringend beachtet werden:

Nutze minimierte Stylesheets und JavaScript-Dateien

Um die Ladezeiten zu verkürzen, reicht es oft schon aus, CSS und JS-Dateien zu verkleinern. Dies geht mit sogenannten Minifiern, welche als Plugins für viele Code-Editoren (zum Beispiel Minify für Sublime Text) zur Verfügung stehen oder Online genutzt werden können.

Wichtig ist außerdem, dass wichtigere Scripts und Styles zuerst geladen werden (dies kann auch über eine Inline-Integration passieren) und unwichtigeres später. Daher ist es ratsam, JS-Dateien nicht im <head>-Bereich der Seite, sondern ganz unten vor dem </body>-Tag einzufügen:

<!Doctype html>
<html lang="de">

<head>
<!-- Falsch! -->
<script src="assets/unwichtigescripts.js"></script>
</head>

<body>
<!-- Richtig! -->
<script src="assets/unwichtigescripts.js"></script>
</body>

</html>

Nutze neue Bildformate

Anstelle von JPEG oder PNG Bildern, ist es ratsam, neuere Formate wie JPEG 2000 oder WebP zu verwenden. Die neueren Formate sparen vor allem Dateigrößen ein.

Es gibt viele Converter, die Bilder in diese Formate umwandeln.

Da die Formate .webp und .jp2 noch nicht von allen Browsern unterstützt werden, muss ein Fallback eingerichtet werden:

<picture>
  <source srcset="img/bild.webp" type="image/webp">
  <source srcset="img/bild.png" type="image/png"> 
  <img src="img/bild.png" alt="">
</picture>

Nutze „lazy-loading“ für Bilder und iFrames

Zwar ist ist das neue „loading=lazy“-Attribut bisher nur in Chrome verfügbar, wird aber in Zukunft auch in andere Browser integriert. Außerdem gibt es entsprechende Plugins für WordPress und co.

Durch dieses Attribut werden Bilder und iFrames erst dann geladen, wenn sie auch sichtbar sind.

<img src="bild.webp" loading="lazy" alt="">
<iframe src="iframe.html" loading="lazy"></iframe>

Cache für Dateien einrichten

Um die Ladezeiten weiter zu verkürzen, müssen einige Dateien gecached werden. Dafür verwenden wir die .htaccess-Datei, um die zu cachenden Dateien zu definieren und die „Lifetime“ des Caches festzulegen:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html "access plus 500 seconds"
ExpiresByType font/ttf "access plus 180 days"
ExpiresByType image/gif "access plus 180 days"
ExpiresByType image/ico "access plus 180 days"
ExpiresByType image/jpeg "access plus 180 days"
ExpiresByType image/jpg "access plus 180 days"
ExpiresByType image/png "access plus 180 days"
ExpiresByType image/jp2 "access plus 180 days"
ExpiresByType image/webp "access plus 180 days"
ExpiresByType text/css "access plus 14 days"
ExpiresByType text/javascript "access plus 14 days"
ExpiresByType application/x-javascript "access plus 14 days"
ExpiresByType application/javascript "access plus 14 days"
</IfModule>

Die Speicherdauer kann natürlich nach Belieben geändert werden. Sinnvoll ist es, Bilder länger zu cachen, da sich diese im Regelfall nicht ändern. JavaScript- und CSS-Dateien sollte man eher kürzer speichern, es sei denn, du hast nicht vor, an diesen Änderungen vorzunehmen.

Wenn all diese Tips befolgt wurden, sollte die Seite nun einen deutlich besseren Score erreichen. Google gibt aber auch dann weiterhin Infos, wie der Score verbessert werden kann.