Breek › Blog

Ergonomie : pourquoi un scroll vaut dix clics

sbordage — Sat, 04 Feb 2012 07:24:33 +0000

Un billet intéressant sur uxmovement.com qui reste, hélas, toujours d'actualité : doit-on limiter la hauteur du site ou scroller. Ne rigolez pas. J'ai vu une maquette la semaine dernière qui ne faisait pas plus de 640 pixels de haut (et ce n'était pas du responsive-design-mobile-first !). A croire que tout les 5 ans, on recommance comme en 1999...

Bref, l'auteur dresse un rapide comparatif entre clic et scroll et en profite pour lister les avantages du scroll :

Large développement des gestures grâce aux touchpads évolués (un éfleurement délicat suffit pour revenir 2 pages en arrière ou descendre en bas de page).
Rapidité supérieur des gestures par rapport au clics. Ce qui n'est pas négligeable quand c'est répété des milliers de fois dans la même journée.
Logic de lecture : avec le scroll on lit dans l'ordre de rédaction ce qui n'est pas forcément le cas avec des liens
Scroller garde le lecteur dans une dynamique de lecture alors que le clic est disruptif
Scroller évite d'attendre le chargement d'une nouvelle page.

Il arrive à la conclusion que le clic est la meilleure solution pour les marketers (suivi statistique plus fin, génération de trafic...) alors que le scroll est la meilleure solution pour l'internaute. Alors dans quel camps êtes vous ?

Source : http://uxmovement.com/navigation/why-scrolling-is-the-new-click/

Wordpress : 5 players à ne pas manquer

sbordage — Mon, 30 Jan 2012 10:11:22 +0000

Zoom Video Gallery

Un vrai player permettant de mixer fichiers locaux et vidéos Youtube / Viméo.

Simple à installer
3 skins différentes
Cross-browser (IE6, IE7, IE8, IE9, Firefox 2, Firefox 3, Firefox 4, Safari 4, Safari 5, Opera, Chrome)
Alternative HTML5 : fonctionne avec iPad, iPhone...
Vidéos, images, sons hébergées sur Youtube, Viméo, Amazon S3 ou en local
Panneau d'administration complet
Appelable via un shorcode de type [] et une fonction PHP

Prix : 15 à 75 $
Démo : http://bit.ly/zUH1IC
Téléchargement : http://bit.ly/wR31Aq

uBillboard

Un plugin fournissant un puissant slider supportant la vidéo.

Plusieurs sliders, y compris sur la même page
Fonctionne avec YouTube et Vimeo
Redimmensionnement auto des images
6 skins différentes
Panneau d'administration complet
Plus de 20 transitions (configurable slide par slide), lecture auto et aléatoire
Editeur de contenu supportant le HTML
Possibilité d'utiliser les posts en tant que slide !
Live Preview
Import / Export
Appelable via un shorcode de type [] et une fonction PHP

Prix : 20 $
Démo : http://bit.ly/z6W0ju
Téléchargement : http://bit.ly/zNQiQV

Vimeo Video Player

Une gallerie vidéo puissante adaptée aux sites avec de nmbreuses vidéos mais limité à Vimeo.

Plusieurs sliders, y compris sur la même page
Playlist, recherche...
3 skins différentes
Support de Google Analytics
Editeur de contenu supportant le HTML
Cross-browser (IE6, IE7, IE8, IE9, Firefox 2, Firefox 3, Firefox 4, Safari 4, Safari 5, Opera, Chrome)
Appelable via un shorcode de type [] et une fonction PHP

Prix : 16 $
Démo : http://bit.ly/wR64sE
Téléchargement : http://bit.ly/wG3xCq

JW Player for WordPress

Développé par LongTail Video, le créateur de JW Player. Gratuit.

Plusieurs sliders, y compris sur la même page
Skins personnalisables
Alternative HTML5 : fonctionne avec iPad, iPhone...
Cross-browser
Appelable via un shorcode de type [] et une fonction PHP
Totalement intégré à Wordpress (librairie média, etc.)

et tout ce que sais faire JWP !

Prix : Gratuit
Téléchargement : http://bit.ly/ygg9al

MediaElement.js - HTML5 Video & Audio Player

Lecteur HTML5 avec Fallback Flash ou Silverlight. Tout en shortcode. Ultra efficace pour les geek / webmasters.

100% HTML5 avec fallback flash et Silverlight :-)
Cross-browser
Puissant système de shorcode de type [], appelable avec une fonction PHP
Skin 100% personnalisables
Supporte les formats MP4, OGG, WebM, WMV, MP3, WAV et WMA
Supporte WebSRT (pour les sous-titres notamment)
Totalement intégré à Wordpress (librairie média, etc.)

Prix : Gratuit
Téléchargement : http://bit.ly/AoyteH & http://bit.ly/xgYTpA

Management : gérer ses réunions à la Larry Page

sbordage — Fri, 20 Jan 2012 09:20:43 +0000

Je viens de lire une brève que beaucoup de managers de grandes entreprises devraient méditer :-)

Lors de son retour à la tête de Google, Larry Page a décidé d'optimiser le déroulement des réunions de ses 30000 collaborateurs.

L'occasion surout de rappeler des principes basics :

Une réunion doit servir à décider. Cela implique la présence d'un décideur et d'une décision à prendre. Sans décision ou décideur, pas de réunion.
Une réunion sert à discuter de vive voix. Donc pas plus de 10 participants. Sinon c'est la cohue :-)
Tous les participants de la réunion doivent apporter des idées, sinon ils n'ont rien a y faire.
Ne jamais attendre la date de la réunion pour décider. Si une décision doit être prise, provoquer une réunion. Tout de suite.

Beaucoup d'évidences et de bon sens en somme !

Source : http://www.businessinsider.com

drushmake.me : générer ses makefile drupal 7 ou 6 en 1 clic

sbordage — Wed, 18 Jan 2012 10:14:53 +0000

Chez Breek, nous avons découvert Drush au Drupalcon de Wahington DC en 2009.
Depuis, et tous ceux qui connaissent l'outil seront d'accord, nous ne pouvons pas nous en passer !

Seulement voilà. De temps en temps, on se trouve dans une situation où nous n'avons pas nos makefile sous la main.

C'est là que drushmake.me vous sauve la vie.
L'outil génère des makefile pour drupal 6 et 7 avec la plupart des modules les plus utilisés (cck, views, panels, übercart...).

Le site : http://drushmake.me/
Notre tuto : Drush et Drush make en 5 minutes

Encore une licence WireframeSketcher à gagner sur http://uxmovement.com

sbordage — Wed, 11 Jan 2012 17:45:48 +0000

Si vous voulez tester gratuitement cette solution utilisée par Disney, Siemens, eBay, Subaru... dépéchez vous !

Ca se passe ici http://uxmovement.com/giveaways/win-5-free-licenses-for-wireframesketche...

Premailer améliore la compatibilité de votre emailing en 1 clic

sbordage — Wed, 21 Dec 2011 08:12:44 +0000

Pour être certains que sa newsletter ou son emailing s'affiche correctement dans tous les navigateurs, il est important de respecter certaines règles et notamment d'utiliser des styles inline et des chemins CSS absolus.
Du coup, on obtient vite une newsletter difficilement modifiable et maintenable.

Premailer règle le problème en :

transformant les classes en styles inline
supprimant les IDs inutilisés
supprimant les commentaires

Le résultat est fourni avec en plus une version txt bien pensée et une checklist de compatibilité.

Simple et efficace.

Icon Finder, trouver ses icons en un tour de main

sbordage — Wed, 14 Dec 2011 18:10:07 +0000

Pratique, rapide, de bonne qualité. Icon Finder est le genre de service à enterrer dans ses favoris "au cas où".

Le filtre sur les licences, la possibilité de filtrer (via la fiche de l'icon) sur un designer... font gagner beaucoup de temps.

iPlotz : wireframes faciles et collaboratives

sbordage — Tue, 06 Dec 2011 14:48:24 +0000

iPlotz est un outil de création de wireframe / cinématique en ligne -un simple navigateur suffit- qui peut aussi être installé en local sur n'importe quel ordinateur (Linux, Windows, Mac).

Ca tombe bien. Chez nous, certains ont des Macs, d'autres des PCs, d'autres les deux... Difficile du coup de trouver un bon outil cross-plateforme qui puisse en plus exporter son travail dans un format lisible par nos clients (genre PDF).

iPlotz propose pas moins de 3 formats d'export :

Image
PDF
HTML

et 2 solutions de partage :

par URL
avec un embed

Si ses librairies d'objets sont encore pauvres pour le prototyping iPad, iPhone et Android (enfin il y a déjà l'essentiel), il y a tout le nécessaire pour prototyper des sites et applications web.

L'outil fait même mieux que beaucoup de ses concurrents type App Sketcher.

Franchement, sa simplicité d'utilisation, sa richesse fonctionnelle et ses possibilités de collaboration (exports, annotations, travail en local puis en ligne...) sont bluffant.

Un test plus approfondi s'impose !

Jumpchart : optimiser la structure et la récolte du contenu

sbordage — Thu, 01 Dec 2011 14:57:22 +0000

Les chefs de projet expérimentés le savent : "le contenu et l'hébergement sont les deux sources principales de retard dans un projet web". Le contenu, en particulier, est souvent difficile à structurer puis à récolter sous une forme facilement exploitable. Bien que de nombreuses solutions existent -de a saisie directe dans Axure, Powerpoint à un bon vieux Google doc- aucune n'est vraiment adaptée.

Jumpchart est là pour combler ce manque. La solution offre une interface de collaboration en ligne centrée sur la structuration et le partage du contenu (voir le prototypage rapide pour des sites très simples).

Sous une apparence très simple, il est possible de créer toute l'arborescence en quelques clics puis d'ajouter tout type de contenu, y compris des formulaires (je n'ai pas testé l'ajout de flash), sans oublier les métas.
Cerise sur le gâteau, une mise en page sur 1 ou 2 colonnes est proposée.

Ensuite, il suffit de collaborer avec les membres que l'on ajoute en 1 clic. Il est possible de séparer les observateurs des collaborateurs tout aussi facielement.

Malheuresement tout travail mérite salaire. La rançon de cette facilité d'utilisation est donc un coût assez élevé, de 25 à 50 $ par mois selon le nombre de pages et d'utilisateurs. Si l'outil est utilisé sur tous les projets de l'agence, pas de problème. D'autant que la syntax est celle des wiki (Textile), donc le travail peut être encore accéléré :-).

Vous pouvez toujours essayer la version gratuite pour vous faire une idée.

Paper Browser, vous avez aimé les PDFs, les carnets arrivent !

sbordage — Wed, 30 Nov 2011 08:00:15 +0000

Plus le temps passe et moins je commence mes wireframes dans Powerpoint (je sais, je suis rétrograde, maintenant tout le monde utilise Axure, pas Powerpoint).
Je dessine plutôt des croquis illisibles sur des coins de table puis j'affine et j'affine et j'affine...

Bref. Au bout de 2 ou 3 itérations très rapides, je suis prêts à formaliser un peu plus.
Mais, à ce moment là, j'ai souvent la flème d'attaquer avec un logiciel. C'est là que Paper Browser intervient.

Après avoir essayé pas mal de modèles (y compris le template 960.gs officiel), je m'apperçois que je reviens toujours sur ceux de Paper Browser.

Et bien ça tombe bien, car nos amis de Rain Creative Lab Design ont décidé de les imprimer et les packager sous forme de magnifiques carnets.

J'en veux un ! J'en veux un !...