Cette section est close pour le moment.
Mais je n'arrête pas la veille, loin de là. Retrouvez mes projets sur Github et sur cette page qui sera à jour plus régulierement


Ressources

Définition de ressource : (nom féminin) Qui peut fournir ce dont on a besoin.
Vous l'aurez compris, sur cette page ce ne sont pas vraiment des tutoriels, c'est plutôt des penses-bêtes plus ou moins fournis mais qui vous permettront d'avoir des bases concernant la programmation.
Recherche par tag

Un outil web indispensable pour contrôler le responsive design

Un outil web indispensable pour contrôler le responsive design
Publication : Le 31/10/2012 à 00:17:46

Introduction

Une solution simple pour vérifier si son responsive design est bien adapté aux différents écrans c'est d’investir. Rendez-vous sur Amazon munissez-vous de votre carte bleue et il vous suffira de commander un mini-pc, un iPad, une tablette nexus 7, un galaxy S III, un iPhone 4S (sans oublier l'iPhone 5 puisque la résolution n'est pas la même), un Nokia Lumia, un grand écran 40', etc...

Quoi ? La facture est trop élevée ? Je comprends, si vous êtes comme moi et que vous préférez une solution beaucoup moins onéreuse vous pouvez vous diriger vers un outil web bien pratique, "Viewport resizer".

Comment ça marche ?

Ce site vous propose de configurer plusieurs tailles d'écran, de générer un favori qui ne sera pas un lien vers un site web mais un bout de code javascript, un bookmarklet.

Ensuite, à vous de jouer, quand vous surferez sur un site, ou si vous en développez un, vous n'aurez qu'à lancer le favori, ce qui générera une barre d'outil en haut de votre page avec les différentes tailles.

Ultra simple à l'utilisation et très léger, que demander de plus ?

Etape 1 : Configurer les tailles d'écran

Pour configurer votre barre d'outil, vous avez deux solutions :

La première, en créant le lien dans l'espace dédié en respectant les paramètres suivants :

- data-viewport (Indispensable) : Taille de l'écran, en séparant la largeur de la hauteur avec un astérisque.
- data-version (Option) : Permet d'ajouter une infobulle sur l’icône.
- data-icon (Option) : Pour personnaliser le lien avec une image, vous avez le choix entre handy, blackberry, mobile, phone, smartphone, iphone, ipad, ipod, android, tablet, ipad, notebook, macbook, laptop, screen, desktop, display et tv.
- class="active" : pour définir la taille par défaut.
<a data-viewport="320x568" data-version="5" data-icon="iphone" class="active">iPhone 5</a>
La seconde solution c'est tout simplement de cliquer sur les supports que vous voulez dans la liste proposée.

Beaucoup plus rapide, mais le manque de personnalisation peut être embêtant (mais vous aurez la possibilité d'éditer les liens avant de générer le favori).

Pour ma part, je suis parti sur cette base :
<a data-viewport="320x480" data-icon="iphone" data-version="ipho.">Apple iPhone, iPod Touch</a><a data-viewport="320x568" data-icon="iphone" data-version="5">Apple iPhone 5</a><a data-viewport="768x1280" data-icon="smartphone" data-version="lumia">Nokia Lumia 920</a><a data-viewport="320×480" data-icon="android" data-version="ace">Samsung Galaxy Ace</a><a data-viewport="360×640" data-icon="android" data-version="nexus">Samsung Nexus</a><a data-viewport="480×800" data-icon="android" data-version="S">Samsung Galaxy S</a><a data-viewport="600x1024" data-icon="tablet" data-version="kindf">Amazon Kindle Fire</a><a data-viewport="800x1280" data-icon="tablet" data-version="kf hd">Amazon Kindle Fire HD</a><a data-viewport="768x1024" data-icon="ipad" data-version="ipad">Apple iPad (2-3rd, mini)</a><a data-viewport="400x683" data-icon="small-tablet" data-version="tab">Samsung Galaxy Tab</a><a data-viewport="1024x768" data-icon="display" data-version="17&#8243;">17&#8243; Display</a><a data-viewport="1280x800" data-icon="notebook" data-version="pc port">Widescreen</a><a data-viewport="2560x1600" data-icon="display" data-version="30&#8243;">30&#8243; Apple Cinema Display</a>

Etape 2 : Ajouter votre marque-page dans le navigateur

Une fois votre choix fait, lancer la génération.
Si tout se passe bien, vous aurez votre barre d'outils en haut de votre page, cliquez sur le petit i, et enregistrer le favori dans votre navigateur.

Conclusion

Vous avez plus qu'à surfer normalement sur le net, et dès que vous voulez voir ce que donne le site sur un autre support, lancer le snippet.

De quoi faire quelques économies ?

Sur le même thème

Un outil web indispensable pour contrôler le responsive design
Publication : Le 31/10/2012 à 00:17:46

Suggestion :

Un outil web indispensable pour contrôler le responsive design

Un outil web indispensable pour contrôler le responsive design