Le design du site s’adapte à l’écran du périphérique utilisé. Tout cela à partir d’une url unique.

Donc fini les sous-domaine inutile m.exemple.com ou bien encore http://www.synerghetic.net/mobile/

Une url unique permet de résoudre les problèmes de référencements liés à la duplication du contenu sur des sous-domaine.

Je vais à présent revenir sur des points plus techniques abordés lors de ma conférence au pôle mobile de Synerg’heTIC.

Media queries

Les medias queries sont des techniques utilisées en CSS3. Elles permettent de définir une feuille de style en fonction de certaines propriétés du navigateur. Pour faire du responsive design nous allons utiliser la propriété max-width, qui permet d’appliquer une taille maximale d’écran, jusqu’où les feuilles de style seront appliquées.

@media screen and (max-width:480px){
    /*code */
}

Ici, on pourra par exemple modifier les différents blocs de note site pour leur appliquer une largeur relative à taille de notre écran.

@media screen and (max-width:480px){
    div{ width:90%;}
}

jQuery mobile

Certains associent directement responsive design avec les media queries. Mais je rappelle que le principe est d’adapter le site en fonction de l’appareil utilisé.

On peut donc utiliser un framework tel que jquery mobile pour réaliser note site. On peut l’utiliser exclusivement pour l’affichage sur iPhone et Android comme dans l’exemple suivant en PHP :

if ( strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'Android') )
{
      //On charge jQuery mobile
}

Voici deux exemples de site en responsive design :

• Avec les media queries : Cuisine kawaii le livre
• Avec jQuery Mobile (sur iPhone et Android) : Développeur web mobile

La première partie de la conférence était axée sur le modèle ergonomique à respecter pour les applications Android à savoir: l’application Twitter. En effet cette application a été réalisée conjointement par Twitter et Google, avec pour objectif de déterminer un standard, un petit peu comme l’a fait le Google Nexus One au niveau des standards hardware.

Trois éléments principaux sont désormais à considérer comme des standards : L’action Bar, le quick action popup et la présentation de la Home page.

Action bar

L’action bar représente ce que l’on pourrait nommer le header de l’application. En plus de contenir le logo de l’application, servant aussi de retour à la home, l’action bar doit contenir la fonction de recherche sur son extremité droite, si celle-ci à lieu d’exister bien-évidemment. Mais surtout elle doit contenir un bouton d’accès à la fonctionnalité principale de l’application.

Dans le cas de l’application twitter c’est la fonctionnalité permettant de « tweeter » que l’on retrouve.

Le Quick Action Popup

Le Quick Action popup a pour objectif de remplacer le context menu. Le context menu c’est ce menu secondaire qui apparait comme une light box dans les applications Android. Peu esthétique et à l’ergonomie moyenne, on comprend cette volonté de s’en passer.

Le quick action popup se veut bien plus direct et esthétique. Il se symbolise par un menu, lié à un élément, un tweet dans notre cas, contenant plusieurs actions illustrées par des logos. Disposé à l’horizontale celui-ci autorise le scroll horizontal, ce qui permet d’ajouter un nombre conséquent d’options ou d’actions. De plus il faut savoir que les applications Android sont capables de supporter des plugins et c’est dans ces quick action popup que l’on va retrouver ces derniers.

La Homepage

Enfin la Homepage d’une application Android doit se présenter sous une forme simple et explicite : l’action bar est une

série d’îcones explicites et titrées symbolisant les différentes fonctionnalités de l’application. Ceux-ci doivent être de taille conséquente et très réactifs, Google insiste sur cette volonté d’instantanéité.

Ce sont donc les attentes de Google en terme d’application sur leurs système d’exploitation mobile.

La deuxieme conférence a été animée par @ludovic_perrier, co-fondateur de Diota Soft, entreprise qui propose ses savoir-faire en matière de Réalité augmentée, 3D, géolocalisation, temps réel,…

Le sujet de cette seconde partie était plus orienté vers les différents usages d’Android liés à ses spécificitées techniques (boutons physiques par exemple).

La navigation sur le mobile

Afin de ne pas reproduire certaines erreurs présentes sur quelques applications Android, comme le bouton retour inutile, voici un schéma présentant les différents boutons de navigation Android qu’il est important de prendre en compte pour l’utilisabilité de votre application.

En fonction des constructeurs, la position des boutons varie.

De ce fait, lors de la création de jeux mobiles, il est intéressant de laisser la possibilité à l’utilisateur de pouvoir configurer lui même ses touches, problème que l’on ne trouve pas sur iPhone.

Voici quelques règles d’or qu’il est important de connaitre et d’appliquer

• Pouvoir annuler l’action.
• L’appli ne doit pas être en pleine écran, il faut laisser la barre des titres.

En effet, un utilisateur, lorsqu’il utilise une application, aime bien pouvoir avoir accès à l’heure, ou voir ses nouveaux mails. Il ne faut pas non plus abuser de la modularité d’Android, notamment avec la profondeur de navigation (Maximum 4 sous-menu de nav)

Toute action doit avoir une réaction visible :

• Eviter les vues défilantes (Scroll view)
• Quand c’est intuitif, pas besoin d’aide (repensez au petite trombone de notre cher et
• tendre Word !)
• PENSER comme M. TOUT LE MONDE !

Que deviendra Android dans le futur ?

L’avenir est prometteur pour Android, et Google compte bien s’implanter sur les ordinateurs, la Télévision, avec comme exemple récent la Google TV. Un avenir prometteur donc pour le géant américain, qui nous dévoilera encore de nombreux projets dans les mois à venir…

Apple : des contraintes salvatrices

Le premier type de contrainte auquel va se confronter l’ergonome/designer sera celui de l’ergonomie imposée par la plateforme. Particulièrement dans le cas d’iOS, le célèbre système d’exploitation mobile d’Apple. En effet Apple impose certaines règles ergonomiques sur la plupart des applications. Les ressources en ligne d’Apple indiquent que l’ergonomie d’une application doit reprendre les usages ergonomiques de la plateforme. Il faut entendre par là qu’il est nécessaire d’utiliser le système de navigation de l’OS comme l’arborescence horizontale ou encore le système de tri par onglets.

Apple autorise bien évidemment une alternative à ce type d’ergonomie, mais celle-ci requiert davantage d’efforts de la part des développeurs. Ce type de design se base sur la métaphore. L’application doit donc se baser sur des éléments visuels présents dans « le monde réel » et reproduire une mécanique d’interaction proche de ce qu’il se ferait dans la vraie vie. Ce choix se fera en fonction de la manière dont est piloté le projet, selon les coûts, la qualité ou les délais.

Android : une liberté à maitriser

Pour la plateforme Android les problématiques sont différentes. Le designer aura une marge de manœuvre bien plus importante au niveau de son interface. Toutefois il devra obligatoirement prendre en compte les contraintes des résolutions multiples dès le début de la conception. En effet la multiplicité des terminaux Android engendre un nombre de résolutions conséquent. Lors de la conception il faudra donc prendre en considération la résolution des écrans des terminaux, leur densité (nombre de pixels par rapport à la surface de l’écran) mais aussi le ratio de l’écran (panoramique ou non).

Ces paramètres influencent l’équipe entière et ne doivent jamais être perdus de vue. Dans les kits de développement fournis par Google il existe une technologie nommée 9-patch qui permet de simplifier cette gestion de résolution via une gestion avancée des fichiers PNG.

Voici donc les premières contraintes auxquelles les designers orientés mobilité devront se confronter. Certains choix graphiques devront être réfléchis avec prudence car ils seront les facteurs déterminants du bon déroulement d’un projet mobile.

Nous rentrerons, au cours d’un prochain billet, dans les détails opérationnels de cette problématique. En attendant, bons tests et n’oubliez pas : soyons mobiles !

Ce site répond au besoin d’obtenir des informations sur des oeuvres rencontrées au hasard de promenades oisives dans les rues. Comparez une visite dans un musée à un passage dans une rue remplie d’oeuvres urbaines diverses et vous aurez saisi l’utilité de la chose en quelques instants : dans un musée, deux pas vous permettent de lire les informations relatives aux oeuvres (nom de l’artiste, date de réalisation, descriptif de l’oeuvre, …). Dans la rue, comment les obtenez-vous ? Pour les non-initiés à la culture « underground » des artistes de rue, il sera quasi impossible d’obtenir ne serait-ce que de très simples informations sur ce qu’ils ont sous les yeux.

La solution à cela : créer une base de données d’oeuvres urbaines en leur associant des informations de géolocalisation. Ainsi, lorsqu’un admirateur se tiendra devant une oeuvre et aura la volonté d’en apprendre plus, il n’aura qu’à consulter son iPhone, seul terminal supporté, et l’Urban Art Guide qui lui fourniront des informations sur les réalisations les plus proches de sa position. Evidemment, la base de données sera créée au fil du temps par les utilisateurs eux-mêmes qui référenceront des oeuvres au fur et à mesure de leurs découvertes et de leurs recherches d’informations. Tout cela permet également de prévoir des visites selon les endroits regorgeant d’oeuvres de rue, tout comme vous le feriez devant un plan de musée.

Le deuxième aspect de ce service, c’est la création d’un catalogue d’oeuvres d’art urbaines qui référencera, normalement à vie, des oeuvres qui sont pour la plupart éphémères à cause de dégradations, de l’usure du temps ou de démolitions des supports.

Pour l’instant, seuls les berlinois et les utilisateurs d’iPhone peuvent utiliser ce service. Espérons donc que celui-ci puisse être étendu à d’autres villes et à d’autres terminaux mobiles sous peu.

Le site : Urban Art Guide

Profitons de ce tour de force pour faire un tour du marché des navigateurs. À ce jour il existe quatre grands moteurs de rendu HTML (fonction vitale qui permet de générer les pages web) : Webkit (Moteur utilisé par Safari), Gecko (Moteur utilisé par Firefox), Trident (Moteur utilisé par Internet Explorer) ou Presto (Moteur utilisé par Opera). Chacun de ces moteurs évolue d’année en année en essayant de réaliser un score parfait aux différentes versions de l’Acid Test (version 1, version 2 et version 3). Ces tests ont été créés pour que les navigateurs évoluent en respectant les standards du web, les développeurs se surpassent donc d’année en année pour être les premiers à passer le test avec succès. Les premiers à avoir passer le Test Acid 3 sont les développeurs de Webkit suivis le lendemain par ceux d’Opera (fin mars 2008).

À cause de cette évolution fulgurante de nos navigateurs, à quoi doit on s’attendre pour les prochaines années à venir ? Le W3C (Organisme qui établit les nouveaux standards pour le web) a commencé les tables rondes pour une nouvelle version de CSS (CSS 3)  et une mise à jour de HTML (HTML 5). Les premières idées qui pourraient être validées dans cette nouvelle version de CSS seraient entre autres la propriété border-radius (pour arrondir les angles de vos blocs), la propriété resize (permettant à vos visiteurs de redimensionner un bloc de la page sans librairie JavaScript supplémentaire), la propriété text-shadow (ajoute une ombre à votre texte) et bien d’autres encore. Si vous souhaitez obtenir plus d’informations vous pouvez consulter le document de référence pour les réflexions sur CSS 3. HTML 5 (ou XHTML 5)  quant à lui risque d’apporter des fonctionnalités très intéressantes aux développeurs, on compte parmis les idées énumérées (et déjà quasiment validées) les balises vidéo (permettant d’insérer directement une vidéo), audio (permettant d’ajouter un fichier audio), canvas (permettant de dessiner des formes et d’intéragir avec [visualiser avec Firefox 3]) et section (permettant d’augmenter la sémantique du contenu). Ces premières refléxions autours du HTML 5 sont très bien illustrées chez A List Apart [Anglais].

Qui parle d’évolution pour les années à venir ne peut mettre de côté l’avenir du web mobile, iPhone et autre pseudo gPhone vous donneront la possibilité de consulter vos mails et de surfer n’importe où et n’importe quand grâce à leur connexion permanente sur la toile via la 3G, Edge ou autre. Ces utilisations feront croître la part de marché des navigateurs mobiles et c’est dans ce sens que travaillent les équipes des acteurs du marché, Mozilla avec Fennec, Apple avec Safari, Microsoft avec Mobile Explorer, Opera avec Opera Mobile.

Mais l’innovation passe par l’évolution et sur ce point les différences entre les forces en présence sont nombreuses. Microsoft s’est longtemps assis sur son trône de leader du marché sans s’occuper de la concurrence. En 2001, une fois arrivé au sommet le géant américain a stoppé ses laboratoires de R&D pour Internet Explorer, c’est la fin de l’évolution pour quelques années. Pendant ce temps la fondation Mozilla constituée d’anciens de Netscape lance le projet Firefox pour relancer l’évolution du web. Sept années plus tard Mozilla continue de ronger les parts de marché de Microsoft qui s’est remis au travail avec la publication d’Internet Explorer 7 en 2006 et la sortie de la beta 1 d’Internet Explorer 8 en mars 2008. En parallèle de tout cela Opera et Safari continuent leur développement légèrement en retrait du marché mais en allant toujours dans le sens de l’innovation démontrant ainsi que l’évolution a repris son cours et que d’ici quelques années nous aurons tous un navigateur performant et ce, qu’importe sa marque et sa plateforme.

J’ai découvert il y a maintenant 2 semaines un service web fonctionnant avec la voie sur IP, j’ai nommé YES. Ce service lancé par le groupe digitrad, spécialisé dans les services de télécommunications pour les entreprises, vous offre la possibilité de créer un numéro de téléphone multimédia gratuitement. D’accord c’est du déjà vu avec Skype et consort… Néanmoins ce service mérite que l’on en parle puisqu’il se démarque en donnant la possibilité aux utilisateurs de rediriger les appels de ce numéro vers une ligne fixe ou son mobile, tout cela pour le prix d’un appel local !

Pour cela, c’est très simple, il vous suffit de vous connecter sur yes.digitrad.com et de créer un compte gratuitement en choisissant votre numéro de téléphone parmi 8 choix possibles (d’autres numéros vous seront proposés si vous rafraichissez la page). Une fois sur votre espace personnel, vous pourrai définir le message de votre répondeur ainsi que la musique d’attente durant la redirection du numéro.

Le meilleur reste à venir…

Je me rappel le jour où j’ai connu ce service : tout excité, je me précipite de configurer tous les paramètres et appel aussitôt sur mon portable pour me rendre compte de l’efficacité ou non du système. J’ai ainsi été ravis de voir que l’application marche véritablement très bien avec un rendu son très correct. Une fois ma petite expérience finie, je m’empresse d’en parler à quelques amis lorsque me vient une question : les appels locaux émis depuis ma freebox sont gratuits, alors est-il possible que celui passé sur mon nouveau numéro virtuel le soit également ? Et la réponse est… YES ! Effectivement, j’ai réédité plusieurs fois l’expérience est le constat est sans appel. Ma consommation téléphonique est bien de 0€ !

D’autres raisons d’utiliser YES

Les avantages de Yes ne s’arrêtent pas là, Les utilisateurs de ce service peuvent également émettre depuis leurs mobiles vers 130 destinations internationales pour le prix d’un appel local. A noter qu’une fois votre numéro créé, vous aurez aussi la possibilité de recevoir les messages de votre répondeur sur l’adresse email de votre compte Yes. De nombreuses autres fonctionnalités sont annoncées dans un proche avenir.

YES va faire du bruit

Digitrad, avec sa nouvelle offre de téléphonie grand public sur internet, proposant aux particuliers des tarifs encore plus attractifs que la concurrence, lance un pavé dans la marre et il est sans nul doutes que YES va faire parler de lui ces prochaines semaines. La question à se poser est de savoir comment la concurrence va-t-elle réagir ?

« Après plusieurs années passées au service de la communauté des développeurs, nous avons réalisé l’importance d’un self-service orienté vers les particuliers, demandeurs d’une expérience d’achat plus appropriée. [...] TryPhone™ perment aux consommateurs de prendre le contrôle total du processus d’achat sans avoir à mettre les pieds dans un magasin ». Faraz Syed, PDG de Mobile Complete

Ainsi, vous pouvez sélectionner le mobile de votre choix et faire apparaître une image virtuelle de celui-ci, en ayant la possibilité d’appuyer sur les touches, de jouer avec les fonctionnalités et de lancer les programmes. Le catalogue est pour le moment léger : seulement 14 mobiles sont disponibles (dont l’Iphone, et le LG Prada), mais Mobile Complete promet l’enrichir continuellement avec plusieurs nouveaux modèles chaque semaine.

Il est aussi possible de comparer différents modèles côte à côte.

A la différence des applications flash ou autres programmes basés sur l’émulation, TryPhone™ est accessible gratuitement pour le consommateur, mais tire parti de tous les avantages de sa plateforme technique DeviceAnywhere™ qui, développée à partir de la technologie unique propriétaire Direct-to-Device™, permet aux développeurs d’applications mobiles d’accéder en direct et à distance à plus de 1000 terminaux depuis leur écran d’ordinateur.

MCRM : gestion relation client mobile

La complexité de la MCRM vient de la proximité naturelle des clients avec leur portable. La campagne ne doit pas être intrusive et le client ne doit pas se sentir comme étant une vache à lait. Cependant, il veut être tenu informé des nouveautés, de l’actualité (générale ou mobile), du suivi dès sa commande…

Par conséquent, les messages non affectifs et directs sont à bannir pour réussir sa campagne. L’aspect intrusif d’une campagne marketing sur mobile via sms par exemple est strictement légiféré; les annonceurs sont tenus de ne pas contacter des clients ayant refusés de recevoir ce type de sms.

Contact every one : les exemples

La stratégie d’Orange porte sur plusieurs secteurs, du m-commerce au marketing direct en passant par la gestion relation client (mCRM). L’outil autorise le contact pour l’envoie d’un message sur plusieurs medias (sms, mms, fax, mail, vocal mobile, vocal fixe…).

Cas Setelem : faire suite à une demande de documentation sur internet pour un coût réduit (0,28€ contre 4€ avant) tout en augmentant le taux de transformation.
Cas SNCM : montre aussi l’intérêt du mCRM en permettant de prévenir les passagers des perturbations éventuelles sur le voyage. La relation client est alors renforcée et l’image de l’entreprise améliorée.

Comment vont réagir les annonceurs face à la généralisation de l’internet (du vrai et non de la 3G ou autres) sur nos mobiles adorés?