Steve Jobs l’avait annoncé prétentieusement et prématurément il y a quelques années :* “Flash est mort”. Sans être aussi catégorique, il est vrai que Flash a au moins repris la place qui était la sienne : servir des contenus multimédia.

Adobe, à la traîne

La remise en cause du monopole de Flash, lancée par Apple avec ses appareils sous iOS, a offert à Adobe l’opportunité de de pencher sur l’un de ses produits phares pour en faire un outil efficace et prêt à être intégré dans des appareils mobiles.
Les équipes ont travaillé d’arrache-pied pour livrer des versions optimisées, mais jamais assez pour se voir ouvrir les portes d’iOS. Pendant ce temps, HTML 5, CSS 3 et jQuery faisaient leur trou, aidés par le succès de la plateforme mobile d’Apple
Quatre ans après, Adobe produit bien une version de Flash pour tablettes et smartphones mais qui n’a rien à voir avec la version “de bureau” tant en termes d’ergonomie que de performances. Échec !

Une ouverture pour les standards

Apple a finalement entraîné avec elle de nombreux acteurs du marché sur la voie du développement de solutions alternatives à Flash, sur le chemin d’un web “nouveau” : plus réfléchi, plus efficace et vraiment multi-plateformes.
Les diaporamas en Flash ont trouvé leurs maîtres en JavaScript, capables de s’adapter à tout appareil avec une dégradation progressive du fonctionnement et une lisibilité parfaite même sans activer JavaScript.
Les menus animés sont devenus lisibles par les moteurs de recherche, sans perdre de leur dynamisme, animés d’effets jQuery ou CSS.

Une conception pensée différemment

La conception sans Flash nécessite de se creuser un peu plus les méninges pour trouver une solution pratique et compatible.
Dans les faits, il suffit de ne plus penser à ce que l’on pourrait faire avec Flash et comment le reproduire avec les outils alternatifs mais directement imaginer à partir des librairies disponibles ce qu’il serait possible d’en faire.
Avec la mine d’informations disponibles sur jQuery et avec des projets comme Modernizr, la réflexion se transforme vite en fonctions et en animations réelles.

Un exemple de conception intelligente : la page de présentation de l’iPhone 4S décortiquée par John B. Hall. Je cherchais bien trop loin (et dans la mauvaise direction) comment les blocs avaient bien pu être animés pour arriver de cette manière.
Au final, la mise en œuvre démontre une grande maîtrise des techniques de transformation CSS pour arriver à quelque chose de tellement simple que je n’y aurai pass pensé au premier abord…

Flash à sa place

Flash perd du terrain, au profit des standards, de solutions légères et compatibles “sans limites” et c’est une bonne chose. La technologie d’Adobe retourne à ses premières amours, pour le plus grand bien du web.
Nous n’arrêterons pas de l’utiliser mais l’utiliserons comme nous aurions toujours dû le faire plutôt que de céder aux sirènes de la facilité.

Cela fait 4 ans qu’au sein de ladybug nous avons remplacé Flash à chaque fois qu’il était possible de le faire sans dégrader l’expérience utilisateur. Cela nous a créé de gros défis sur des projets où Flash, omniprésent au départ a définitivement disparu en quelques mois au bénéfice du référencement naturel et de l’ergonomie générale.

Aucun regret !

Le programme de la refonte

• une simplification des contenus : plus courts et plus clairs pour aller à l’essentiel
• une nouvelle optimisation du référencement naturel, objet principal des premières refontes réalisées en 2005 et 2007
• une nouvelle charte graphique : plus actuelle, plus efficace et une arborescence simplifiée

Les clés du nouveau design

Intégré lors de la seconde refonte du site, la photo du téléphone rouge est devenue l’image marquante et démarquante de la société faisant souvent l’objet de remarques « amusées » des clients. Il était un passage obligé de la nouvelle page d’accueil et a désormais pris une place plus importante. La page d’accueil garde la même différenciation qu’auparant avec sa couleur sombre préservée sur les autres pages pour l’en-tête et le pied de page.

Les contenus devant être plus synthétiques, nous avons choisi de rédiger pour chaque page, sur les bases des anciens textes, une introduction d’accroche et trois points détaillant les prestations et leurs avantages.

Le pied de page a pris de l’embonpoint en intégrant le « Qui sommes-nous » ainsi qu’une zone « Vos questions » offrant à l’internaute de créer un lien direct avec la dirigeante de la société en rendant le site plus « personnel ».

L’éco conduite, un traitement à part

Sur la base de la page d’accueil, l’éco-conduite a le doit a un traitement différencié des autres de pages de contenu afin de servir de page d’atterrissage pour des communications spécifiques.

Inspiré de la « Paper City » de Joel Henriques, les dessins ont été créés spécifiquement pour Atouts Prospects avec l’intention de créer un visuel original à l’instar du téléphone rouge de la page d’accueil.

Les petits détails

Le design du site est minimaliste ce qui ne nous a pas empêché d’y placer quelques raffinements esthétiques tels que les lignes de séparation de l’en-tête et du pied de page qui changent de couleur dès que l’internaute survole ces zones. La couleur de surlignement est rouge sur l’ensemble du site à l’exception de la page éco-conduite qui se pare de vert pour tous les éléments actifs (liens et boutons).

En cas d’erreur (page non trouvée), la page « 404″ offre un clin d’oeil au téléphone rouge de la page d’accueil et place l’internaute en rase campagne avec une cabine téléphonique comme solution de secours. Page peu vue, mais petite surprise nécessaire pour re-router les visiteurs égarés !

Sur le plan technique, sans encore aller piocher dans une structure HTML5, le site fait appel à quelques règles CSS3 de base (arrondis, ombrés) pour affiner encore l’esthétique en assurant une compatibilité maximale et une expérience identique quelque soit le navigateur.

En conclusion

Le site Atouts Prospects, version 2011, a fait l’objet d’une prestation complète allant du conseil sur l’organisation de l’information à la réalisation et au référencement en passant par la rédaction des contenus et la création graphique.

Si vous cherchez une société pour réaliser une prospection téléphonique efficace ou rédigez vos scripts d’appels percutants, n’hésitez plus et visitez le site atouts-prospects.com !

Alors ici, les araignées ont remplacé les coccinelles…

Il est temps de faire un sérieux ménage de printemps et de reprendre la rédaction d’articles…

J’en profite aujourd’hui pour parler de la société qui se charge de l’entretien de nos locaux.
Avec le développement durable, l’éco-taxe et toutes ces nouvelles recommandations et réglementations, le choix d’un prestataire d’entretien devient de plus en plus pointu pour que celui-ci soit en mesure de vous débarrasser de déchets informatiques, qu’il utilise des produits écologiques et économiques, etc…

Notre choix s’est donc logiquement porté sur Kéréma pour leur écoute, une qualité de service irréprochable couronnés par un sérieux et une disponibilité à toutes épreuves !

Visitez le site de Kéréma, la propreté au sens propre…

Ça paraît tellement vrai… et vous, vous avez compté ?

Vous désirez découvrir le web-marketing, gérer des campagnes de publicité et d’affiliation sur internet ? Développer le buzz (online et offline) autour des sites de nos clients, participer à la mise en place de nouvelles opérations ?

Alors nous sommes faits pour nous rencontrer : contactez-nous pour en savoir plus.

Au menu de cette refonte : la mise en place d’animations autour des menus pour une navigation agréable et ludique et la réorganisation des pages pour un accès facile à l’information.

Vous trouverez donc tout ce qu’il faut savoir sur la chirurgie esthétique, l’épilation laser, le botox, … et pour les messieurs, un mini-site sur la calvitie !

Les animations ont été travaillées en Ajax afin d’éviter l’emploi de Flash et de rendre l’ensemble des contenus accessibles aux personnes handicapées comme aux moteurs de recherche.

La prochaine étape sera une validation Accessiweb de niveau Bronze au minimum.

Cette possibilité, bien pratique pour ceux qui bougent beaucoup avec leur ordinateur portable, vient d’être bloquée filtrée par Free pour des questions de protection contre le spam.

Afin de retrouver l’accès à votre serveur SMTP, voici les manipulations à effectuer :

1. Connectez-vous à « votre compte Free »:http://subscribe.free.fr/login/ et identifiez-vous,
2. Cliquez sur le menu « Fonctionnalités optionnelles de la Freebox » (en bas à droite),
   
3. Cliquez sur « Configurer » en regard du titre « Autres fonctions »,
   
4. Décocher la case « Blocage SMTP sortant » puis Validez.
   

Il ne vous reste plus qu’à ne pas oublier de relancer la Freebox !

Excellente surprise, on parle de ladyTax, ladyCrypt et ladyMailEncode !

Je vous invite bien entendu à lire l’article au complet pour (re)découvrir quelques perles.

J’en profite pour passer l’information que ladyTax commence à faire ses premiers pas sous Windows Vista…

Cela devient presque une pièce incontournable de l’accompagnement d’un site, demandée lors de la plupart des projets de création ou de refonte !

Ainsi, Sérénité-Assur ouvre la marche avec Blog-Assur, premier blog sur l’assurance, riche d’informations pratiques et de définitions et embarquant quelques perles…

Toujours dans le domaine de l’assurance, le site Assurance-Online.fr s’agrémente d’un blog qui décortique les nouveaux produits et vous donne son avis éclairé sur les dernières brèves de l’assurance.

Et vous, c’est pour quand ?