Hallo Wikianer,
viele von euch hatten schon angefragt, wann die neuen Breakpoints auch in den deutschen Communitys kommen. Es ist soweit – das „Breakpoints-und-Typografie-Update“ wird am 2. Juli 2015 in unseren Communitys eingeschaltet. Überall sonst auf Wikia ist dieses Update bereits seit ein paar Wochen aktiv. Einige von euch haben sicher das Thema in der englischen Community gesehen, oder vielleicht sogar verfolgt.
Die Veränderung war dringend nötig und ist auch passiert, um Wikia auf dem neuesten Stand zu halten, wie wir im Blog-Beitrag über die Evolution von Wikia beschrieben hatten. Es ist sehr schwer, ohne die Breakpoints das Layout so zu gestalten, dass es auf alle Bildschirme passt. Benutzer erreichen uns auf Handys, Tablets, Laptops und Desktop-Geräten. Der Unterschied von einem Handy zu einem XL-Bildschirm ist enorm. Es gibt Studien zu den Layouts und Breakpoints, in denen es darum geht, das Leseerlebnis des Benutzers zu verbessern. Deren Ergebnis hat uns dazu bewogen, diese Veränderung zu machen. Top-Webseiten, wie zum Beispiel Amazon, benutzen das Prinzip schon länger.
Zu den Breakpoints kommen Typografie-Updates. Die Modifikation der Typografie passiert nur beim größten Breakpoint, den wir hier Desktop XL nennen. Dies betrifft die Ansicht auf den Bildschirmen, die breiter als 1595px sind. Wir haben hierzu ein Beispiel, wie ein Bildschirm mit und ohne Breakpoints aussieht, um die Veränderungen, die die Breakpoints mit sich bringen, zu verdeutlichen.
Das Breakpoints-und-Typografie-Update wird ab Mittwoch, dem 2. Juli 2015, aktiviert.
Breakpoints
Wo wir sonst das flexible Layout hatten, haben wir jetzt definierte Breakpoints, die das Verhalten voraussagbar machen. Dies soll verhindern, dass Vorlagen nicht wie gewollt funktionieren, oder einfach nur „verkehrt“ aussehen. Unser Ziel ist es, dass die Seite so funktioniert, dass sie sich großen Bildschirmen anpasst. Dies wird über das Browserfenster gesteuert. Merke: Die Bildlaufleiste (Scrollbar) wird als außerhalb der Grenzen der Bildschirmmaße angesehen.
Hier ist eine Liste der Breakpoints und der Bildschirmbreiten:
Breakpoint | Breite vom Inhaltsbereich | Bildschirmbreite minimum | Bildschirmbreite maximum | Anteil am Gesamtzugriff |
---|---|---|---|---|
Tablet/Hochformat | 768px | 768px | 1023px | 16% |
Tablet/Querformat | 1024px | 1024px | 1084px | 50% |
Desktop | 1084px | 1084px | 1594px | |
Desktop XL | 1238px | 1595px | ∞ | 34% |
Typografie
Hierbei konzentrieren wir uns auf die Lesbarkeit und die Zeilenlänge, die sich Studien zufolge als das jeweils beste Leseerlebnis herausgestellt hat. Im Moment verändert sich bei Wikia nur die Zeilenlänge. Mit der Modifikation der Typografie passt sich die Größe und Höhe der Schrift dem größten Breakpoint (Desktop XL) an. In der Tabelle unten könnt ihr die Details dazu finden. Neu dazugekommen sind Desktop- und Tablet-Breakpoints.
Liste der Veränderungen bei den Breakpoints:
Tablet und Desktop | Desktop XL (1595px und breiter) | |
---|---|---|
Zeichengröße/Zeilenhöhe | Zeichengröße/Zeilenhöhe | |
H1-Überschrift | 28/28 | 34/34 |
H2-Überschrift | 20/22 | 28/30 |
H3-Überschrift | 17/22 | 22/24 |
H4-Überschrift und Zitat | 15/22 | 20/28 |
Textkörper | 14/22 | 16/26 |
Unsere Absicht ist es, die Veränderungen nur bei Überschriften, Textkörper und Zitaten zu machen. Ein Problem, dem wir begegnen, sind die Vorlagen. Die meisten Fehler, die du möglicherweise siehst, wirst du lösen können, indem du im jeweiligen Wikia das lokale CSS anpasst.
Änderungen testen
Die Änderungen können vor dem Release getestet werden, indem ?oasisbreakpoints=1&oasistypography=1
an die URL einer Seite angehängt wird: http://de.gameofthrones.wikia.com/wiki/Daenerys_Targaryen?oasisbreakpoints=1&oasistypography=1
Um die Änderungen zu sehen, muss dein Bildschirm mindestens 1595px breit sein.
Eine Hilfeseite zu den Breakpoints gibt es auch schon!
Update
Die Breakpoints-und-Typografie-Modifikation wird jetzt erst am 2. Juli 2015 in den deutschen Communitys eingeschaltet. Wenn du einen Fehler entdeckst, hinterlasse uns bitte einen Kommentar, oder schreib uns über Spezial:Kontakt. Wir freuen uns auch wie immer über jede Art von Feedback!
Willst du weitere Updates von Fandom erhalten? Klicke hier, um diesen Blog zu verfolgen.