Websitedimensions est un site internet qui propose des informations sur les résolutions d’écrans et navigateurs du marché.
Lorsqu’on va lancer un nouveau site, on se pose toujours des questions concernant la largeur et la hauteur.
Websitedimentions.com permet de répondre à cette questions avec des statistiques sur les résolutions les plus utilisées sur le web.
Le site vous guidera ainsi sur les bons choix, y compris dans les résolutions à adopter pour un responsive webdesign.
2 scénarios et réponses sont présentés sur le site:
Scénario 1: La hauteur du site est primordiale
Si vous ne souhaitez pas qu’une scrollbar apparaisse peut importe le navigateur et sa résolution d’écran, il va donc jouer sur un responsive webdesign et connaître les différentes résolutions utilisées sur le marché pour adapter vos media queries.
C’est ce que vous propose le site, avec un tableau mis à jour tous les mois :
| screen height | smallest screen width | in use worldwide (Jan 2012) |
|---|---|---|
| 768 px | 1024 px (up to 1360 px) | 28.4% |
| 800 px | 1280 px | 14.4% |
| 864 px | 1152 px | 1.5% |
| 900 px | 1440 px | 11.7% |
| 1024 px | 1280 px | 14.8% |
| 1050 px | 1680 px | 9.2% |
| 1080 px | 1920 px | 6.2% |
| 1200 px | 1920 px | 4.5% |
Le site donne aussi pour chaque périphérique mobile et résolution écran classique quelles sont les dimensions sûres que vous pouvez utiliser.
Scénario 2: La largeur du site est primordiale
A l’inverse, si votre design nécessite de tenir dans toute la largeur de l’écran, sans aucune scrollbar, vous aurez plutôt besoin de connaître les largeurs conseillées :
| device screen width | web site safe area | |
|---|---|---|
| width | height | |
| iphone portrait (320 px) | 310 px | 352 px |
| iphone landscape (480 px) | 468 px | 202 px |
| ipad portrait (768 px) | 750 px | 920 px |
| ipad landscape (1024 px) | 1010 px | 660 px |
| screen : 1024 px | 989 px | 548 px |
| screen : 1152 px | 1117 px | 644 px |
| screen : 1280 px | 1245 px | 580 px |
| screen : 1360 px | 1325 px | 548 px |
| screen : 1366 px | 1331 px | 548 px |
| screen : 1440 px | 1405 px | 680 px |
| screen : 1600 px | 1565 px | 680 px |
| screen: 1680 px | 1645 px | 825 px |
| screen : 1920 px | 1885 px | 855 px |
Toutes les données sont issues des stats W3C, donc sont plutôt pertinentes.
Le site vous propose aussi 2 outils pour mesurer avec présicion en direct la largeur et hauteur d’écran utilisable sur votre navigateur, ou le rendu de votre site dans les principales résolutions et périphériques mobiles.