screensizemap.com

Screen Size Map bietet eine visuelle Vergleichskarte fuer Viewport Groessen in device independent Pixel und unterstuetzt die Planung responsiver und fluider Layouts.

Das Angebot ordnet gaengige Bildschirm und Viewport Formate so an, dass Unterschiede und Ueberschneidungen schnell erkennbar werden. Im Mittelpunkt steht der Vergleich der Viewport Breite, weil sie fuer UI und Responsive Design oft aussagekraeftiger ist als die Hoehe. Dazu werden Bildschirmbreiten in sechs Groessenklassen von XS bis XXL gebuendelt und farblich voneinander abgegrenzt. Ergaenzend werden zu aehnlichen Breiten alternative Hoehenvarianten dargestellt, um typische Abweichungen innerhalb einer Breitenklasse sichtbar zu machen.

Ein weiterer Bestandteil ist die Einordnung nach Verbreitung: Die Karte nutzt zusammengefuehrte Statistikdaten aus verschiedenen Web Ressourcen und bereitet sie so auf, dass weltweite Nutzungsanteile als Popularitaetsstufen erkennbar werden. Diese Popularitaetsdarstellung basiert auf Browserstatistiken aus den Jahren 2021 bis 2023 und wird in drei Kategorien gruppiert. Dadurch laesst sich bei der Gestaltung von Breakpoints, Komponenten und Layoutregeln besser abschaetzen, welche Viewport Groessen im Alltag haeufig vorkommen und welche eher selten sind.

Fuer die technische Einordnung erklaert Screen Size Map den Begriff device independent Pixel (dp oder dip). Statt physische Masse wie Zentimeter oder die reine Geraeteaufloesung zu verwenden, beschreibt dp Layoutgroessen unabhaengig von der Pixeldichte. Das hilft insbesondere bei der Entwicklung digitaler Produkte, die auf Geraeten mit unterschiedlicher Aufloesung und Device Pixel Ratio konsistent wirken sollen. Ein Beispiel verdeutlicht, wie dieselbe dp Breite je nach Displaydichte in unterschiedlich vielen Geraetepixeln gerendert wird, ohne dass sich die wahrgenommene Groesse im Layout aendert.

Praktisch im Arbeitsalltag ist auch die Moeglichkeit, die Karte als Tabelle zu betrachten und als druckbares Poster zu nutzen. Das Poster dient als schnelle Referenz, wenn bei Design und Entwicklung Unsicherheit ueber typische Viewport Pixelgroessen besteht, und ist auch in einer schwarzen Variante verfuegbar. Zusaetzlich gibt es einen redaktionellen Beitrag zu Responsive Design sowie UX und UI und zu Umsetzungsoptionen in Designprozessen und Teams. Weitere Details und der Zugriff auf die Karte sind unter https://screensizemap.com gebuendelt, inklusive Optionen zum Anpassen der Darstellung und zum Vollbildmodus.