Articles de mars 2012

Google Maps 8-bit pour le NES

Génial! Le populaire service de cartographie Google Maps sera enfin disponible pour notre bon vieux Nintendo 8-bit.

Le King approuve!

Site Web de MINI: un exemple à ne pas suivre

Même si le King ne croit pas que le site Web du constructeur automobile MINI soit le pire de l’industrie automobile, il ne croit pas que ce soit le meilleur non plus, loin de là.

La marque MINI projette une image de petite voiture pour les gens branchés, alors que leur site Web semble projeter tout le contraire. Leur site n’est pas pratique et pourrait être plus agréable à naviguer.

Le King tient cependant à souligner que la version canadienne du site est moins pire que sa consœur américaine. Cette dernière étant 100% en Flash cela n’impressionne guère le King, celui-ci étant allergique à cette technologie désuète.

Trop de niveaux de menus

Un bel exemple tout simple de choses qui pourraient être améliorées c’est l’organisation des menus. 4 niveaux de sous-menus c’est franchement trop. Ils auraient eu avantages à prendre 5 minutes pour remanier un peu l’architecture de leur contenu pour éviter ce genre de choses. Il n’y a rien de pire que d’avoir à creuser pour trouver ce qu’on cherche. Surtout que dans leur cas leur principal produit c’est leurs voitures neuves mais que c’est aussi les éléments les plus profonds.

On cache les voitures bien profond, histoire que les gens ne les trouvent pas

Le King n’approuve pas!

Livre: Responsive Web Design

Écrit par Ethan Marcotte ce livre est un incontournable pour quiconque débute en responsive web design. Ça explique bien les bases et les étapes du développement d’un site web « responsive ». Pour ceux qui ne le sauraient pas, Ethan Marcotte est celui qui est à l’origine du terme « responsive web design » alors il sait de quoi il parle.

Achetez-le sur Amazon au coût de 20,16$.

Table des matières :

  • Principes du responsive design
    • Attachez vos ceintures
    • Responsive architecture
    • La voie à suivre
  • La grille flexible
    • Composition flexible
    • Créer une grille flexible
    • Marges et espacement flexibles
  • Les images flexibles
    • Retour aux (codes) sources
    • Images fluides
    • Mosaïque d’arrière-plan flexible
    • Apprenez à aimer overflow
    • Négociez votre contenu
    • Images et grilles flexibles, tenez-vous bien
  • Les media queries
    • Cicatrisation douloureuse
    • Le problème en question
    • Traînasser vers plus de réactivité
    • Un robot plus « responsive »
    • Les media queries en action
    • Au sujet de la compatibilité
    • Pourquoi la flexibilité ?
  • Passer au responsive, design
    • Une question de contexte
    • Mobile first
    • Vers un responsive workflow
    • Être « responsive » et responsable
    • L’amélioration progressive revisitée
    • Va et sois « responsive »
  • Ressources

Le King a lu ce livre et il le recommande vivement.

Facebook: quelques erreurs à éviter

Petite mise en situation: on est le soir et le king se connecte sur son compte Facebook et tombe là-dessus. Qu’a-t-il envie de faire?

A-t-il envie de « RT » le premier statut? A-t-il envie de partager le deuxième statut sans aucune espèce de raison? Ou peut-être a-t-il soudainement envie de réserver une salle pour une réception qu’il n’organisera jamais?

Aucune de ces réponses!

Tout ce dont le King a envie est de se désabonner de toutes ces pages.

Premièrement, on n’est pas sur Twitter. Donc cessez de dire aux gens de « RT » votre statut. C’est comme si vous alliez chez Burger King et que vous commandiez un Big Mac, vous allez passer pour un con.

Deuxièmement, ne demandez pas aux gens de partager votre page à moins de leur donner une bonne raison de le faire. À la place, postez du contenu digne d’intérêt. Les gens vont le partager d’eux-mêmes sans que vous ne leur demandiez.

Troisièmement, ne postez pas 15 statuts aux 2 minutes. C’est agressant. Une présence sur les médias sociaux est supposé de se faire en continu. Pas seulement à 10h le soir où vous décidez soudainement de poster les 40 messages que vous avez notés sur des Post-titsTM.

Le King a parlé!

Générer des codes QR personnalisés

Créer des codes QR personnalisés n’aura jamais été aussi facile.

Mais qu’est-ce qu’un code QR me demanderez-vous? C’est là que Wikipédia revient à la rescousse :

Le code QR est un type de code-barres en deux dimensions (ou code matriciel datamatrix) constitué de modules noirs disposés dans un carré à fond blanc. En anglais, QR est l’abréviation de Quick Response, signifiant que le contenu du code peut être décodé rapidement. Destiné à être lu par un lecteur de code-barres, un téléphone mobile, un smartphone, ou encore une webcam, il a l’avantage de pouvoir stocker plus d’informations qu’un code à barres, et surtout des données directement reconnues par des applications, permettant ainsi de déclencher facilement des actions comme :

  • naviguer vers un site internet, ou mettre l’adresse d’un site en marque-page ;
  • faire un paiement direct via son cellulaire (Europe et Asie principalement) ;
  • ajouter une carte de visite virtuelle (vCard, MeCard) dans les contacts, ou un événement (iCalendar) dans l’agenda électronique ;
  • déclencher un appel vers un numéro de téléphone ou envoyer un SMS ;
  • montrer un point géographique sur Google Maps ou Bing Maps ;
  • coder un texte libre ;
  • etc.

Source: Wikipédia

Pour générer un code QR personnalisé le king vous recommande d’utiliser le service Unitag. C’est simple, facile et gratuit. Cela vous permet entre autre d’intégrer un logo, choisir des couleurs, arrondir les coins, etc.

Pour des codes QR « standard » et sans personnalisation vous pouvez utiliser le service de Kaywa.

Dans le cas des codes QR personnalisés le king vous recommande fortement de les tester avec un ou plusieurs modèles de téléphones intelligents car les risques qu’ils ne fonctionnent pas sont élevés.

Have fun!

Trouvez des icônes pour votre projet web

Trouver des belles icônes libre de droit et gratuite pour un projet web n’est pas toujours une chose évidente.

Le site préféré du king pour chercher des icônes est Icon Finder. C’est un moteur de recherche mais seulement pour des icônes gratuites.

Il faut toutefois faire attention et bien lire les licences. Parfois on n’a pas le droit d’utiliser une icône dans un projet commercial, ou d’autres fois on doit citer son auteur.

Responsive Design: Différents points de rupture

Qu’on se le dise: le responsive web design, ça torche!

La première étape du processus consiste à étudier les différents appareils pour lesquels le design sera conçu. À partir des résultats, on compile une liste de points de rupture : les largeurs que notre design réactif devra satisfaire. Ce tableau propose un exemple de liste de ce type.

Cela ne signifie pas que les résolutions inférieures ou supérieures à un seuil seront ignorées, ou que notre design ne s’adaptera pas aux appareils dont la résolution n’est pas listée. Mais construire une liste de ce genre aide à définir l’étendue des travaux, nous permet d’identifier les appareils les plus fréquemment utilisés par notre public et d’utiliser leurs résolutions respectives comme critères de référence.

Extrait tiré du livre « Responsive Web Design » de Ethan Marcotte.

320 pixels
Appareils à petit écran, comme les téléphones en mode portrait.

480 pixels
Appareils à êtot écran, comme les téléphones en mode paysage.

600 pixels
Petites tablettes, comme le Kindle d’Amazon (600×800) et le Nook de Barnes & Noble (600×1024) en mode portrait.

768 pixels
Tablettes de dix pouces comme l’iPad (768×1024) en mode portrait.

1024 pixels
Tablettes comme l’iPad (1024×768) en mode paysage, ainsi que certains ordinateurs portables, netbooks et ordinateurs de bureau.

1200 pixels
Écran large, principalement les ordinateurs portables et de bureau.

Vive le roi des internets!!!

Le King est là! Prosternez-vous!