Tout gris, tout bleu… notre nouveau site Web se veut être
une petite vitrine d’expérimentation technologique.

Mise en page 100% CSS

Réalisé sans la technologie Flash pour une compatibilité maximum, les effets de transitions sont le fruit des dernières possibilités offertes en autres par Jquery/AJAX/CSS  permettant notamment des effets de transitions fluides, et une couche d’interactivité sur boutons…

Il est donc 100% compatible Iphone, Ipad… (vous pouvez lire ou relire flash Vs Html5 pour en comprendre la justification)  et par voie de conséquence, tous smartphones et tablettes sous androïd, symbian, windows-mobile…

Textes 100% compatibles Web et moteurs de recherche

Ça n’a l’air de rien comme ça, mais les typographies utilisées sont « du vrai texte ».
Les (gros) titres et sous-titre ne sont pas des images (à une ou deux exceptions près). Nous utilisons les polices Jeanne et Fertigo, pour l’ensemble de notre charte graphique, dont ce blog, nous avons donc cherché un moyen de conserver cette charte typos également sur le Web, en gardant à l’esprit la possibilité de tendre vers 100% de contenu visible par Google, ce qui ne gâche rien.

Nous sortons donc des traditionnelles possibilités bridées du Web : Arial, Verdana, Times etc connues de tous… grace à l’interfaçage du site avec la technologie « Typekit »
(là aussi vous pouvez lire ou relire le retour de la typo pour en savoir +) qui offre la possibilité de « mapper » un panel de typos sur un site web, en déclarant celui-ci dans leur API (moyennant un abonnement annuel très raisonnable) avec une comptabilité totale avec la plupart des navigateurs récents.

…et une petite appliweb en cours

Enfin, nous travaillons à optimiser la consultation du site sur vos smartphones. À travers un petit outil simple et en profitant du back-office mis en place pour gérer tous nos contenus en même temps. Nous proposerons très prochainement à chacun, la possibilité de consulter d’un clic notre book des travaux les plus récents… mais cela fera l’objet d’une prochaine news, car un peu de teasing, n’a jamais fait de mal à personne, et ferait même plutôt du bien à une bonne communication ;-).

Merci à nos amis développeurs www.gramm.pro et www.webeasybox.com pour avoir travaillé de concert à la mise en place de toute la configuration technique.

Vous la vouliez hier globale, vous l’affectionnez aujourd’hui à 360 °…
A tout cela rien d’anormal mais attention, nous vous invitons à prendre garde au fait qu’il y a degrés et degrés. Merci de prêter attention autant au terme utilisé qu’au sens qui lui sera donné !

Le premier 360° parle d’une communication qui, parce que bien maîtrisée et bien développée, se joue des angles les plus tranchants en évitant les pièges de l’évidence pour que, sur des voies même parfois très fréquentées, tout roule et tourne rond avec suffisamment de régularité et de puissance que même une armée de grains de sable ne saurait prétendre être un danger. On aime ce 360° toujours conçu sur-mesure, qui nous permet de posément vous parler, dans un même temps, d’outils print et technologies web, d’associer de façon logique communication interne et externe, de penser en parallèle, communications : institutionnelle, produit, évènementielle, opérationnelle, presse…

Le deuxième 360 ° vous est proposé à tort avec un grand « C » ! Il dépasse alors de loin la faute de frappe. Il est à lire comme une communication mal comprise, portée par des promoteurs mal formés qui vous vendent ce “C” majuscule comme étant la première lettre du sujet de cet article. Il en résulte un étrange bouillon qui s’élabore naturellement à une température trop élevée et duquel s’évapore un brouillard d’incompréhension se prétendant pourtant au départ “fumet”. Un menu composé d’ingrédients souvent mal dosés et presque toujours pré cuisinés vous est ici proposé. Bienvenue au rayon d’une communication vendue en pack à l’étale “Stop affaire”, “Top prix”, “Promo Pack”… L’univers clinquant du “tout pour pas cher” vous ouvre les bras, vous n’avez que l’embarras du choix. Ils sont nombreux à se partager le rayon, à se pousser du coude pour abîmer le plus possible le package du voisin quand ça n’est pas pour simplement le copier. Et comment ne pas craquer pour celui qui brille en tête de gondole en vous proposant un ensemble d’outils certes mille fois vus mais à vos couleurs à vous ? « Comment ? Vous n’avez pas encore de logo ? Qu’à cela ne tienne, avec l’achat de notre pack “Com’il Faut*”, celui-ci vous est offert ! Un pack que nous avons déjà vendu plus de 1 200 fois c’est vous dire son succès ! Sinon nous avons “C comme Ça*” qui est un peu moins cher mais là, c’est sans garantie de tenue dans le temps et cela, que vous soyez ou non content… »

*Toutes ressemblances avec le nom d’un package existant ou d’une société de communication en fonction ne sauraient être autre que le fruit du hasard ! Même si cet article prétend dénoncer la trop grande prolifération d’une concurrence vous ventant un degré de compétence mensonger en vous vendant des solutions forcément sans fond, il n’y a dans celui-ci aucune intention dirigée vers telle offre commerciale ou telle société existante.

Décoration murale dans la caserne de Ulvenhout par Staynice. Elle permet de visualiser les interventions des dix dernières années en les représentant par des cercles et en les disposant géographiquement à l’endroit exact où elles ont eu lieu. (le site de Staynice, c’est ici !).

Le kit de visualisation de données fait-main de Jose Duarte permet de créer des graphiques en 3 dimensions en peu de temps, avec des moyens très simples. (flickr de Jose Duarte, par là !).

« Les 7 sommets » et « Informations nutritionnelles » par Audrée Lapierre, graphiste canadienne spécialisée dans la visualisation de données. (les travaux d’Audrée Lapierre sont ici ! )

Les intérêts sociaux dans la population danoise prennent la forme de diagrammes photographiques, par Peter Ørntoft (son portfolio est là !).

Pour un graphiste, créer une maquette de magazine est un bel exercice de style : le document doit ressembler à un magazine en général mais à aucun en particulier, il doit avoir sa propre identité. D’édition en édition, le comité de rédaction, composé d’hébergeurs, d’élus, de membres des GTJ et d’une rédactrice (Constance Rameaux), a su étoffer les textes et dénicher des photos de plus en plus exploitables. Loin des clichés et des sourires figés des banques d’images à l’américaine, les photos cédées de bon cœur par les randonneurs animent largement les articles tout au long du magazine : les tranches de vie spontanées et les personnages “nature” jouent un rôle primordial pour donner envie au lecteur de venir pratiquer les GTJ.

Imprimé avec des encres végétales sur un papier recyclé, le magazine se veut être le reflet des valeurs de l’association, dont le respect et l’amour de la nature. Il est gratuit et disponible auprès de l’association ainsi que chez les hébergeurs adhérents.

Du haut de ses 24 pages, le dernier numéro sorti il y a quelques semaines a définitivement l’allure d’un magazine qui sort des sentiers battus, empreint de simplicité et d’authenticité, à l’image des GTJ.

Pour en savoir plus sur les Grandes Traversées du Jura, c’est ici !

Iphone Apps, ou Webapps, l’heure du choix !

Alors si vous en êtes là, c’est l’heure du choix, et l’introduction d’une nouvelle notion avec laquelle il faudra composer : Vaut-il mieux faire une « Apps » ou une « Webapps »…

L’Apps est « l’ADN » de l’Iphone…

Pour bien comprendre l’iphone « Apps » est donc un petit programme à installer uniquement pour iphone, développé en Objective C, en accord (de licence) et avec les moyens mis à disposition par Apple pour la mettre en œuvre, notamment son SDK (Software Développement Kit), avec lequel tout programmeur devra composé pour devenir « Iphone développeur ».

… La Webapps est un site web « classique » mais optimisés.

La Webapps, sera quand à elle une application réalisée avec les langages ouverts du développement Web et basée sur le HTML. C’est donc un site, ou mini-site Internet parfaitement adapté certes à l’iphone, mais également à la plupart des téléphones mobiles récents, car la Webapps peut alors s’exporter vers d’autres systèmes mobiles tel que Androïd (développé par Google) et que l’on retrouve sur les HTC,  par exemple, ou WindowsPhone embarqué sur les téléphones Microsoft, pour ne citer qu’eux.

Hormis cette grosse différence donc, peux de choses distingue au premier abord l’Apps de la WebApps. Voici néanmoins quelques éléments de comparaisons :



L’application Iphone est un formidable outil de buzz au potentiel graphique, ergonomique, technique important, c’est une vitrine technologique évidente pour votre entreprise. Par contre elle nécessite de composer avec l’environnement fermé d’Apple, les temps de validation, le coût de développement spécifique. Soyons clairs « travailler » avec Apple, est un gage de qualité, la marque dispose d’une notoriété spontanée extraordinaire.

La Web application, du fait des avancées récentes notoires dans le langage HTML avec l’arrivée du CSS3 notamment, tend à s’approcher de plus en plus de l’apps native Iphone sur biens des points .D’excellents exemples prouvent qu’à première vue il n’est plus possible de distinguer la Webapps de l’apps en terme de graphisme et ergonomie, son développement est simple, rapide, moins onéreux. La Web application dispose d’un atout évident, elle est compatible avec la plupart des configurations mobiles du marché.

Tout dépend du projet, des publics, du budget, c’est évident.

L’apps est probablement plus orienté « grand public » et divertissement, la Webapps sera plus facile à intégrer à un environnement existant ça peut être un « sous-domaine » Web, à vocation mobile, de votre site principal.

Enfin, pour compléter votre éducation, faites un détour par le site de cet étonnant calligraphe français qui bien qu’autodidacte, s’avère être, à force de travail et de curiosité, un professionnel comme on aime à les dénicher sur la toile et qui apparaît (bien que caché) à nos yeux, un génial sculpteur de lumières (découvrir ses travaux).

Sans surprise, Vincent officie dans les domaines de la culture et de la musique. Il crée des affiches pour des événements musicaux, des pochettes d’albums, des illustrations pour des sites de musique… Couleurs raffinées, sobriété des formes et recherche typographique poussée, voilà le langage de Small Studio. Et c’est tout naturellement que le graphiste s’immerge dans les concerts hip-hop pour produire des illustrations en live, aux côtés du musicien Lileanarrative. Le principe est simple, pendant que les DJ’s déroulent leur set, Vincent, tel une éponge, absorbe la musique et la restitue sous forme d’illustrations, projetées directement sur scène, pour le plus grand plaisir des spectateurs. Des créations graphiques en live, spontanées et rafraîchissantes à découvrir sur viméo : http://vimeo.com/10590838. Et pour découvrir Small Studio, c’est par ici : www.smallstudio.fr

Au départ était le modem 56 k

Un beau jour de 1993, arriva sur nos ordinateurs, une petite bête curieuse, avec une planète qui tournait dans le coin, … l’Internet. Dans nos petites têtes de graphistes curieux, ce que nous n’appelions pas encore une révolution, juste une possible évolution du Minitel, suscita alors une grande perplexité : «soyons francs, c’est lent !»… puis une grande curiosité : «soyez francs, ça va toujours être si lent ?» enfin, il fallu s’y résoudre, il faudrait composer avec…

Pour le graphiste web, l’apprentissage de l’adversité !

Il faudrait oublier la liberté d’une feuille A4, entrer dans le monde du 640×480, bande passante 56 K, t’es sur Netscape ou Explorer ? intégrer la notion de référencement, se mettre aux bases du HTML, penser en RVB.Et ce que nous craignions arriva… un premier dossier de site web, à concevoir, puis deux, puis trois,… allez on se lance !

Alors, tout y passa : les animations d’accueil inutiles en Gif et Flash (Le règne du «Skip Intro»), des résolutions d’écran minuscules, des images en vignettes (sinon le purgatoire), du pixelisé/compressé à mort, des nouveaux graphiques effets affreux (surenchère d’ombres portés exagérées, de boutons lumineux, clignotants, sifflants, tourbillonnant) aucune notion (mais encore aucune règle) d’ergonomie, du texte négligemment jeté à la va vite, avec a peu près autant de possibilité que sur un panneau d’autoroute… bref, l’anarchie ou la liberté totale (question de points vue) , mais surtout l’apprentissage pour tout le monde.

Il y eut aussi, et demeure, la question de la typographie… trouver le responsable ne servirait à rien, mais quelqu’un, quelque part décida, un jour, que le Web se serait, en gros, l’utilisation de la Times ou de l’Arial, corps 12, point ! Celui là même ajouta que quiconque s’affranchirait de cette règle élémentaire serait condamné à réaliser ses boutons de sommaire, en flash, en allemand (20% plus long), avec de la Comics sans.

Depuis 15 ans, très peu de solutions typographiques

Bref, une règle pré-domina pendant 15 ans, le concepteur web devait s’appuyer sur un tout petit lot de caractères prés installés pour avoir la certitude que ces derniers sont compatibles Web et donc bien rendus par les différents navigateurs…

Ah si, Flash… et ses limites.

Mais, au même titre que la vie trouvera toujours un chemin en milieu hostile, le fraîchement nommé, Web designer trouva vite un terrain de sports entre les buildings. Ainsi, il découvrit et aima immédiatement Flash, car Flash lui autorisait à peu près tout, ce que les ciseaux, oups…pardon !, les balises des développeurs lui interdisaient… les grandes images, les effets animés, les typographies vectorisables. Pour ne plus avoir à s’embarrasser avec le poids des fichiers, il inventa même la barre de téléchargement (le «loading», voire même le loading créatif, même puisqu’il faut toujours s’amuser un peu)  enfin il pouvait travailler à nouveau librement, faire des titres verticaux, écrire «Bienvenue» en très gros, puis faire des ronds dans l’O (de typo)…  car il s’ennuyait à nouveau !

Oui, Il avait fait le tour des effets de Flash, le Web avait changé, ses belles animations, à part quelques superbes exceptions (exposition Monet), soyons francs, n’amusait plus personnes, plus le temps !, impossible à référencer, difficile à mettre à jour, bref lourdes à gérer pour tout le monde, on lui demandait d’aligner les modèles de pages sur les principes ergonomiques standardisés, on lui assénait du CSS, du CMS, des feuilles de styles, il faudrait faire simple, carré, sommaire en haut, et de préférence en Arial ou alors en Times… fin de la partie le Web menait 2.0.

Mais le web a à nouveau changé (oui, je sais, il change souvent !), parfaitement bicéphale il s’étale en très grand (jusqu’a 1024 pixels de large, mais si !) sur nos écrans, et en tout petit sur nos mobiles, il gagne un peu en largeur, beaucoup en hauteur, le site Internet est un espace d’interaction, d’échange, d’information, on parle de média «social» dans lequel le discours prime, avec le phénomène Blog le fond à repris de l’espace sur la forme, l’écriture est au cœur des préoccupations, il faut toujours faire entrer un maximum d’information dans un espace restreint, mais l’idée de rendre tout cela beaucoup plus digeste a enfin, fait son chemin…
Aujourd’hui, des raisons d’espérer.

D’abord il y a l’initiative du W3C ( lire : le W3C élargit la typographie pour le web ), visant à élargir la palette des possibilités typographiques sur le web (Pour mémoire le W3C est LE consortium mondial dons les membres, acteurs de l’Internet, œuvrent au développement des standards du web ).
Ce nouveau mot d’ordre d’amélioration de la richesse typographique trouve de nombreux avantages évidents en terme de visibilité, accessibilité, créativité, c’est peut-être enfin une voie ouverte vers le respect de la charte graphique d’une marque, en totale adéquation ergonomique et technique.

Ensuite il y a l’émergence de prestataires qui ont intégré la nécessité de solutions de gestion de polices compatibles avec les exigences techniques du Web. C’est le cas de typekit : moyennant un forfait raisonnable, typekit ouvre aux webdesigners et aux développeurs apte à l’intégrer, une large palette typographique utilisable comme des polices «standards», c’est incontestablement une nouvelle liberté, celle de revenir aux bases de la mise en page, à la diversité, au titrage, aux lettrines etc…

A voir : le site de Mike Davis, un bel exemple « typekit » 100% texte, 100% compatible W3C & moteurs de recherche.

Enfin, il y a l’émergence de nouvelles interfaces d’accès au web, les smartphones, les netbooks, les touchbooks et/ou les tablettes, pour lequel la nécessité de réinventer un mode lecture, enrichie, semble une évidence. la notion de «magazine numérique» fait son chemin, il suffit de voir pour cela le portage du magazine Wired, sur Ipad, à titre d’exemple, pour comprendre : texte et interactivité ne font qu’un.

Sur ces nouveaux supports, la mise en page prend une nouvelle dimension,  l’organisation et la hiérarchie de l’information seront indispensables, car le mode de lecture est multi-niveaux, d’un glissé de doigts s’ouvre un nouvel espace, d’un touché nait une nouvelle fonctionnalité, plus que jamais la nécessité de codifier un texte prend un sens, ne serait-ce que pour accompagner le lecteur dans son cheminement au sein d’un article, éviter de le perdre, l’aider à avancer et à profiter de nouvelles données multimédias (au sens propre) sans le déstabiliser.

Alors, oui, la typographie, peut entrer par la grande porte dans l’univers Web et plus généralement dans l’édition numérique, les webdesigners sont prêts (ils l’ont tant attendu !), les développeurs aussi, et la standardisation de solutions aux normes W3C favorisera l’adoption. Les éditeurs de logiciels (adobe notamment) intégrent progressivement à leurs solutions logiciels «print» des extensions leurs permettant d’intégrer des contenus multimédias, si tout le monde s’y met, s’ouvriront alors, forcément de nouvelles perspectives créatives.