Responsinator, le simulator d’écrans

Le nom fait référence au design « responsive », adaptatif. Le site vous montre comment votre site est vu depuis un iPhone, un smartphone, iPad et tout autre écran. Vous rentrez simplement votre URL. Cela vous permet de vérifier en quelques secondes l’adaptabilité de votre site. Ce n’est pas parfait.

simulation depuis un iphone en portrait
simulation depuis un iphone en portrait
simulation depuis un iphone en paysage
simulation depuis un iphone en paysage
simulation depuis uniPad  en portrait
simulation depuis uniPad en portrait

Cela illustre surtout la difficulté de gérer des écrans à la définition si différente, d’un iPhone à 320ppp à un vieil écran en 72ppp. La densité varie de 1 à 4,5. Une Typo prévue pour un Mac d’avant déluge exprimé en pixel peut paraitre 4,5 fois plus petite sur un iPhone 5.

allez donc visiter et découvrir sur responsinator l’adaptabilité des sites que vous connaissez. Bonne découverte

 

 

Site des mimipinson

Il est déjà en ligne. J’aurai du en parler avant. C’est une compagnie montmartroise, du cancan donc.
travaillant sur un ordinateur portable, longtemps je me suis basé sur une largeur fixe de 960 pixels. Puis sont arrivés les iPhones et autres smartphones. J’utilisai un script pour les reconnaitre et afficher un thème wordpress dédié aux téléphones portables. Puis les tablettes iPad sont arrivées. Gérer les différents formats devient de plus en plus compliqué.
Aujourd’hui, si je rencontre un prospect, je lui indique le site, il sort son smartphone, il regarde sur place. Alors mieux vaut que le site soit lisible depuis un smartphone avant d’être lisible sur un ordinateur.
C’est dans cette optique que j’ai choisi pour le site des mimipinson un thème « responsive design » que je traduis en « design adaptatif ».
Le thème sélectionné est Scherzo de Leon Paternoster.

Monsieur Paternoster en parle très bien :

Scherzo automatically adjusts its layout according to the width of the device that views the theme. This means that mobile devices will display a one column layout. Wider screens (desktop monitors and the iPad, for example) display a two column version.

Ce qui pourrait se traduire ainsi dans une traduction toute personnelle :

Scherzo s’adapte automatiquement et à la volée à la largeur de votre écran. En somme, sur les écrans peu larges le site apparait sur une colonne, sur les écrans plus larges (ordinateurs ou iPad) il apparait en deux colonnes.

Il incorpore les nouvelles balises d’HTML5.
Je ne vous montre pas d’image tant que je n’ai pas figé le design du site, tant que je n’ai pas compris les interactions CSS entre mère et fille. A suivre donc… et bonne visite chez mimipinson.com