Mise en ligne de proov.fr

Posté par sylvain le dans les catégories MODx, Typographie, Webdesign, Wordpress avec 3 commentaires
Sylvain Prevost Design Webstudio

Cela faisait un bail que je voulais me monter un site perso, mais j’ai toujours manqué de temps pour y parvenir. Donc après mon arrivé au chômage, il était temps de s’y mettre :)

Je ne vais pas m’étaler sur le sujet, il s’agit principalement d’avoir un portfolio et une présence sur le net, chose que tout webdesigner se doit d’avoir. C’était l’occasion aussi de me mettre au célèbre WordPress, un des CMS les plus connus (et reconnu).

Le contenu

Pour l’instant, c’est une simple vitrine avec la présence d’un blog. J’y ajouterai des articles quand j’aurai le temps.

Mais ça devrait évoluer en fonction de mon activité de freelance. La page d’accueil notamment, subira beaucoup de changements: elle devra mettre plus en avant la création de site suivant tous ses aspects : création, intégration, référencent, formation etc.

Le design

Après 10 mois en agence web, à créer des designs web pour tout type de client. J’ai pu acquérir pas mal de technique. Et observé que le design web est avant tout une mode. Et comme tout le monde le sait, la mode, c’est cyclique. Il semblerait que nous revenons à des tendances minimalistes et épurées.

La fonte LiebeErika©

Épuré oui, mais il faut garder le sens du détail. J’ai tenu à utiliser tout ce que j’aime pour ce projet. Tout d’abord une belle typo, et j’ai trouvé mon bonheur dans la newsletter « Myfonts top font of 2010 », elle s’appelle LiebeErika. Ensuite, les couleurs, j’adore ce bleu-vert sur un fond gris clair auquel j’ai ajouté un légé bruit. L’effet de plus en plus à la mode. Enfin, les coutures sur les bannières ou les boutons, ça ajoute une connotation de « fait main », gage de qualité :)

La technique

Après m’être essayé à l’HTML5 pour mon CV en ligne début 2010, j’ai été emballé par cette nouvelle sémantique et suivi de près les avancés dans ce domaine. Je ne suis pas développeur, donc pour moi ça se résume à des nouveaux éléments et une manière de coder plus propre et plus lisible.

J’ai donc utilisé HTML5 Boilerplate, avec Modernizr pour cibler les navigateurs. Ça me permet de faire quelques ajustements pour IE 6 et 7. Il y a quelques effets CSS3 mais rien de bien méchant.

Au final, le site est rendu parfaitement sur Firefox 3.6, Firefox 4, Safari, Chrome, Opera et Internet Explorer (notre bon vieux IE6 s’en sort quand meme très bien).

Le back end, WordPress 3.1

C’était la nouveauté pour moi, étant un fervent utilisateur du CMS MODx depuis ses débuts en 2006, je n’avais jamais vraiment accroché sur un autre CMS. Et je dois dire que j’ai été conquis… Pourtant, je suis assez maniaque de ce côté là, je veux que ce soit le CMS qui s’adapte à ce que je fais, et non l’inverse.

Pour obtenir le Grade A sous Yslow, il suffit de suivre les recommendations Yahoo.

WordPress a vraiment tout pour plaire, il est ultra personnalisable, certains le compare même à un framework (comme MODx), son interface d’administration est un régal à utiliser. Et il est rapide, très rapide. Avec le plug-in W3 Total Cache et quelques ajustements (au niveau du .htaccess et de la gestion du cache), j’atteins sans trop de problème 94/100 et le grade A sous Yslow.

Je ne maitrise pas encore la bête, loin de là, mais la prochaine étape, c’est la personnalisation de l’interface d’administration via functions.php.

Conclusion

Deux mois de travail avec quelques nuits blanches pour le design, l’intégration en HTML5, l’apprentissage de WordPress, la conversion en thème WordPress, l’optimisation du site et le référencement. Certains pourront penser que c’est long mais l’apprentissage d’un CMS n’est pas si évident. En tout cas, le résultat rempli pleinement mes attentes, voire plus :)

3 réactions

  • discounted christian louboutin dit :

    Le à 10:44

    Interesting, still I\’ve came accross one completely opposite blog post the other day

  • Pedrolito dit :

    Le à 10:11

    Bonjour,

    Ton site est vraiment bien!
    Cependant on attend toujours de nouveaux post …
    ;)

    • sylvain dit :

      Le à 10:49

      Héhé merci :)

      J’ai des idées d’articles, mais ça prends du temps ^^

      See ya doude :)

  • Laisser un commentaire

    Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

    Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

    ↑ Retour en haut