#Howto: set breakpoints correctly? | EN/GER
To start off with the good news: you will probably never have to read this article because our default breakpoints already work for 99% of all use cases.
#######Für Deutsche Version nach unten scrollen#######
In order for your charts and to be displayed properly on all devices and screen sizes, you can easily set “breakpoints” with 23degrees.io.
Breakpoints are predefined screen sizes in the editor. You can use them to set the size scaling for the fonts in the graphics.
An example: I created a graphic and chose the font size 35 for the title of the graphic, otherwise the labels and labels of the axes are quite large. The graphics look very good on my desktop screen. In order for the graphic to look the same on all devices and screen sizes, it must be able to adapt to all screen sizes. This is where breakpoints and font scale come into play.
If I do not adjust the font scale to the screen size (breakpoints), I might end up with a title that is way too large on small screens so that the actual chart is barely readable (see GIF). Conversely, the labeling on a very large screen can be too small.
For this reason, I use a lower font scale for small screens. In this specific example, I have a very large title (font size 35). That’s why I have to set the scaling for small screens, cell phones, tablets, etc. very low. In this case, I choose a font scale of 0.6 for the breakpoint width 360px (60% of the original size), for 480 px a font scale of 0.7 and so on. The larger I set the actual font size in the chart or map, the smaller the font scale should be for small screens. Conversely, if I choose a small font size, I have to adjust the font scale accordingly for large screens.
CAUTION!!! If you include several graphics in one article, make sure that the breakpoints (width and font scale) are set the same for each graphic. Otherwise you will get different sized fonts in one article.
The easiest way to achieve this is, by using our templates.
Write us: office@23degrees.io
twitter: @23degrees_io
fb: @23degrees.io
ig: @23degrees_io
###############German################
How to: Wie setze ich Breakpoints korrekt?
Um mit der guten Nachricht zu beginnen: Du wirst diesen Artikel wahrscheinlich nie lesen müssen, da unsere standard Einstellungen bereits für 99% aller Anwendungsfälle funktionieren.
Damit deine Charts und Maps auf allen Endgeräten gut lesbar sind und die UX nicht darunter leidet, wenn eine Grafik auf verschieden Bildschirmgrößen angezeigt wird, kannst du mit 23degrees.io sehr einfach “Breakpoints“ festlegen.
Breakpoints sind von dir im Editor vordefinierte Bildschirmgrößen. Anhand dieser kannst du die Skalierung der Fonts in den Grafiken einstellen.
Ein Beispiel: Ich habe eine Grafik erstellt und habe für den Titel der Grafik die Schriftgröße 35 gewählt, auch sonst sind die Labels und Beschriftungen der Achsen recht groß. Auf meinem Desktop-Bildschirm sieht die Grafik auch schon sehr gut aus. Damit die Grafik aber auch auf allen Endgeräten und Bildschirmgrößen gleich aussieht, muss sie sich an alle Bildschirmgrößen anpassen können. Hier kommen die Breakpoints und die Font Scale ins Spiel.
Wenn ich die Font Scale (die Skalierung der Schriftgröße) nicht an die Bildschirmgröße (Breakpoints) anpasse, kann es passieren dass ich auf kleinen Screens einen viel zu großen Titel habe und die eigentliche Grafik kaum noch lesbar wird (siehe GIF). Umgekehrt kann auf einem sehr großen Bildschirm die Beschriftung zu klein ausfallen.
Aus diesem Grund setze ich für kleine Screens eine geringere Font Scale. In diesem konkreten Beispiel habe ich einen sehr großen Titel (Schriftgröße 35). Deshalb muss ich die Skalierung für kleine Bildschirme, Handys, Tablets etc. auch recht gering ansetzen. In diesem Fall, wähle ich für den Breakpoint mit der “Width” 360 ein Font Scale von 0,6 -also 60% der Originalgröße-, für die 480 Pixel Breite ein Font Scale von 0,7 und so weiter. Je größer ich die Schrift im Editor einstelle, desto kleiner sollte die Font Scale bei kleinen Bildschirmen sein. Umgekehrt gilt: Wenn ich eine kleine Schriftgröße wähle, muss ich bei großen Bildschirmen die Font Scale dementsprechend anpassen.
ACHTUNG! Wenn ihr mehrere Grafiken in einen Artikel einbindet, achtet darauf, dass die Breakpoints (Width und Font Scale) bei jeder Grafik gleich eingestellt sind. Ansonsten bekommt Ihr unterschiedlich große Fonts in einem Artikel.
Am einfachsten geht das mit unserer Template Funktion.
