Archive de mars 2010

Maquettes interactives : le design dans le navigateur

Par raphaelle, publié dans Design le 23 mars 2010

Tags : contenu, css3, Design, process

Toujours à la recherche de nouveaux process, outils et pratiques, je me suis penchée sur l’idée de ne plus passer par Photoshop pour la création graphique de sites, mais de passer tout de suite à l’intégration. Francis Chouquet (fran6art) parle de « maquettes interactives« .

Le sujet fait un peu de bruit depuis quelques mois, certains voient les avantages de cette manière de travailler, d’autres ne sont pas prêt d’abandonner Photoshop de ci-tôt. Et bien sûr il y a ceux qui se situent au milieu.

Pourquoi une idée aussi farfelue ?

Tout Designer Web soucieux des meilleures pratiques en matière d’ergonomie, de référencement et d’accessibilité, saura que le contenu d’un site est primordial. Alors pourquoi ne pas structurer le contenu d’une page avant de passer à la couche design ? Voilà d’où est née l’idée du « designing in the browser », ou en français, du design dans le navigateur.

Cette manière de travailler n’est pas nouvelle, mais la naissance de CSS3 lui donne un intérêt nouveau. En effet, il est maintenant possible de créer de nombreux effet tels que des ombres, des rotations, des transparences et des dégradés, avec CSS3.

Vous me direz, CSS3 ne marchera pas dans de nombreux navigateurs populaires, alors pourquoi compter dessus ? Il y a plusieurs réponses possibles à cette question ;

1. On pourrait dire que justement, cette méthode va permettre de concevoir un site avec les principes de « dégradation gracieuse » en tête. Peut-être que IE n’aura pas de coins arrondis ni d’ombre, mais on peut faire en sorte que la page reste visuellement intéressante et ergonomique sans ces éléments de design.
2. Travailler dans le navigateur dès le début peut permettre d’éduquer son client de manière plus efficace : il verra tout de suite les différences d’un navigateur à l’autre au lieu de s’étonner qu’au final, son site n’est pas tout à fait le même que la maquette sous Photoshop.
3. On peut choisir cet outil de travail comme point de départ, mais rien ne nous empêche d’altérer le code et de rajouter des images par la suite pour que certains effets soient visibles sur tous les navigateurs. Avant tout l’intérêt est de ne pas travailler dans un format statique. On peut même faire des captures écran et les envoyer au client si on veut mais ça perd un peu de son intérêt.

Photoshop vs. le navigateur

Alors bien entendu chaque méthode a ses avantages et ses inconvénients. Dans Photoshop il sera sans doute plus rapide d’arriver à un design satisfaisant. D’après Dan (Wuup), qui a testé le design dans le navigateur pour ses clients, la phase du design initial est plus longue que dans Photoshop mais au final on gagne du temps sur le développement et donc sur la totalité du projet.

Je pense que les deux méthodes sont valables ; qu’on travaille dans Photoshop ou dans le navigateur, il s’agit de choisir un outil de création graphique qui sera le plus adapté à un projet et à un Designer Web.

Dan coupe la poire en deux en suggérant que le design d’une ou deux pages soit fait dans Photoshop, et le reste du site dans le navigateur. Ça me parait assez raisonnable comme approche, mais je ne suis pas sûre que ce soit très novateur.

Au moins, si on est le genre de Designer Web qui sait coder, on a le choix des outils. Mais ça c’est un autre débat qui fait du bruit depuis plusieurs années…

Quelques liens

• sxsw.beercamp.com : voici un site qui a été réalisé non seulement dans le navigateur, mais surtout avec aucune image – que du code !
• 24ways.org (en anglais) : Meagan Fisher exprime son dégoût pour Photoshop et son approche du design qui consiste à commencer par le contenu.
• Design Shack (en anglais) : voici une liste d’astuces et d’outils pour aider à concevoir un site dans le navigateur.

Typographie, navigateurs et CSS

Par raphaelle, publié dans Web design le 19 mars 2010

Tags : css, Design, intégration, navigateur, texte, typographie

Récemment, alors que j’étais en phase d’intégration d’un site dont je venais de réaliser la maquette graphique, je me suis heurtée à quelques problèmes de rendu de typographie.

Il faut savoir que le site en question a un fond très foncé avec du texte clair, et que j’ai plus souvent conçu des sites clairs au texte foncé (meilleure lisibilité).

1er problème : rendu du texte plus gras sur mac

A ma grande surprise, mes titres en Palatino italisés apparaissaient en gras sur Mac. Je savais que sur Mac le texte était plus gras que sur Windows, ce que je ne savais pas c’est que l’écart est encore plus élevé quand le fond est foncé et le texte clair. En plus de ça chaque navigateur a un rendu un peu différent. Je n’étais pas prête à accepter une telle injustice donc je me suis lancée en quête d’une solution.

Je n’en ai pas trouvé à ce jour. Les différentes valeurs de font-weight (100, 200, … 900) ne servent à rien si la famille de police d’écriture ne contient pas suffisamment de variations, ce qui est souvent le cas. J’espérais trouver un moyen de tricher un peu avec de Javascript, sans succès.

Pour éviter ce genre de surprise, je vais peut-être essayer TypeKit sur le prochain projet. C’est une bibliothèque de polices d’écritures qui ne coûte pas cher (gratuit jusqu’à 2 polices pour un site) et qui est censée avoir un impact négligeable sur la performance du site. Cela me permettra de jouer sur les différentes variations d’une même police (extra light, light, roman, etc.).

2ème problème : rendu du letter-spacing

Dans Photoshop j’avais choisi de réduire l’espacement entre les lettres par -5 pour les titres. Dans ma feuille de style j’ai donc joué avec différentes valeurs de letter-spacing afin d’arriver à un résultat similaire. J’étais plutôt satisfaite de la valeur -0.02em. Sauf que ça ne marchait ni dans IE6 ni dans IE7, mais ce qui me dérangeait le plus était que ça ne marchait pas bien dans Chrome alors que le rendu devrait être le même que sur Safari (en théorie).

Je n’ai pas trouvé d’explication valable mais sur un forum on m’a proposé d’utiliser la valeur -1px au lieu d’une valeur relative en EMs et c’est l’option que j’ai choisie. J’utilise toujours des valeurs relatives pour le texte mais dans ce cas particulier j’estime que ça n’enlève rien à l’accessibilité du site.

Par contre sur la dernière version de Firefox pour Mac (3.6), les lettres de mes titres sont un peu trop serrées. A propos de Firefox, voici un article qui révèle quelques bugs qui varient d’une version de Firefox à l’autre. Mon problème pourrait en être un de plus.

Au final j’ai donc choisi la valeur -1px car elle rend bien sur la plupart des navigateurs. Après tout, peu de gens sont sur Firefox pour Mac et quand bien même ils utiliseraient ce navigateur, c’est tout à fait lisible.

Conclusion

Il faut accepter que les rendus seront un peu différents d’un navigateur à l’autre et que ça fait partie du jeu. En tant que designer web avec des qualités d’intégrateur, j’ai toujours envie que le site soit la réplique exacte de mon PSD, puisque c’est ce que le client a validé, cependant certains détails échapperont toujours à notre contrôle.

Quand on pense au temps que le designer passe à rendre son site « joli » dans tous les navigateurs, l’idée de travailler directement dans celui-ci fait sens. Nous explorerons cette idée dans le prochain article.

Stage Développement d’Applications Web – Paris 4/6 mois – Avril à Septembre 2010

Par julien, publié dans Recrutement le 02 mars 2010

Tags : Application Web, développement, paris, php, stage

Ca y est, notre dernier projet est dans les starting-blocks. Pour nous aider à le développer, nous recherchons un(e) Développeur Web PHP, ambitieux(se) et motivé(e). Le projet concerne le développement d’une Application Web innovante en mode SaaS. A partir de fin mars 2010.

Vous travaillerez principalement sur le développement d’un projet interne, une Application Web qui sera lancée en beta test fin Avril. Vous pourrez également être amené(e) à travailler sur d’autres projets clients (Sites Internet, Intranet, Applications Métiers) de l’agence.

Nous vous proposons une expérience enrichissante, au sein d’une petite équipe agile encadrée par un Développeur confirmé (anglais impératif) et pourquoi pas de nous rejoindre à la fin du stage. Ah oui, vous pourrez également vous faire le pied marin car nous sommes … sur une péniche. Indemnité de stage à négocier.

Au menu

• développement d’applications fiables, sécurisées et testées
• intégration avec des APIs tierces
• intégration du Web Social à l’application (LinkedIn, Twitter, Facebook, …)
• optimisations et améliorations itératives
• un produit opérationel qui sera lancé avant la fin de votre stage
• l’apprentissage et la mise en application des meilleures pratiques de développement

Profil

Vous êtes :

• passionné(e) par le développement d’Applications Web
• force de proposition, à l’écoute, en veille permanente
• curieux(se) et dynamique
• autonome et communiquant(e) dans votre façon de travailler
• motivé(e) à participer au développement d’une startup

Vous avez :

• une réelle envie de vous investir dans un projet ambitieux
• de très bonnes connaissances en PHP5/MySql, la connaissance d’un ou plusieurs frameworks PHP
• l’habitude de la Programmation Orientée Objet, de l’écriture de Tests Unitaires, des Méthodes Agiles
• de bonnes connaissances en administration système

Vous aimez :

• trouver de nouvelles solutions
• être autonome dans votre travail
• travailler en petite équipe
• parler anglais / écrire anglais (le responsable technique est anglophone)

Si vous vous reconnaissez dans cette description de poste, écrivez-nous à recrutement*_at_*soluo.fr, en précisant la référence webdev1003, et parlez-nous d’un projet que vous avez réalisé dans le cadre de vos études et dont vous êtes fier, d’un challenge que vous avez relevé. Nous ne manquerons pas de vous répondre.

---

Soluo is looking for an intern in PHP Web Programming to join the development team in Paris. The focus of this internship will be the core developement of a SaaS Web Application. The intern should start at the end of March 2010.

You will be involved in Web Application design and development, third-party integrations (Social Networks such as Twitter, LinkedIn, Facebook) via Web Services / API / XML, development and integration of reporting tools, design and implementation of SQL databases.

We are offering an enriching experience, within a small and agile team, mentored by a senior architect. And hey, maybe you could end up joining the team? Forgot to ask how good is your sea-legs as you will be working in an amazing boat on the Seine. But don’t worry, you should get used to it within 2 weeks.

In this internship you will:

• develop sclalable, secure and reliable Web Applications
• integrate third-party applications
• use Social Web platforms to enhance the App (LinkedIn, Twitter, Facebook, …)
• learn to optimise and enhance through iterations
• get satisfaction in seeing the product launch before the end of your internship
• learn and implement development best practices

Profile

You are:

• passionate about Web Application Development
• curious and proactive
• constantly reseraching innovative solutions
• enthusiastic about getting involved in a startup

You have:

• strong skills in PHP5 and MySQL and experience developing in one of the main php5 mvc frameworks
• experience in OOP, Test Driven Development and Agile Methods
• good system administration skills
• a good level of English

You like:

• being autonomous in your work
• working in small teams
• speaking and writing in English, obviously

If you think this is you, just drop us an email at recrutement*_at_*soluo.fr, specifying the reference webdev1003. Tell us about a challenging project you are proud of which you have realised in the framework of your studies. We will get back to you.