Pixme : Conception de sites Internet sur mesure à Compiegne (Oise, 60) - Webmaster indépendant.

Vous êtes ici : Accueil > Pixme - Le blog > Pixme > Et voilà la V3 !

Et voilà la V3 !

Réagir.

La société Pixme! existe officiellement depuis début 2007. Le premier site Internet a vu le jour très peu de temps après le début de l'activité, pour être remplacé, presque trois ans plus tard, par la V2... Et presque deux ans plus tard par la V3 que voici. Examinons la carte d'un peu plus près...

Hé ?! Mais... Ta nouvelle version, on dirait la même que l'ancienne, ou j'ai la berlue ??

hé hé...

Non, vous n'avez pas la berlue ! Visuellement, c'est très approchant...

Et pourtant... C'est tellement différent !

Voyons donc voir ce qu'il y a au menu :

Techniquement parlant :

Html5

Passage du xHtml (transitional 1.0) au tout nouveau tout beau html 5 avec son lot de nouvelles balises.

Révolution CSS 3.

Passage du CSS 1 directement au CSS3, permettant  tout un tas d'effet auparavant possible qu'en utilisant des technologies alternatives type flash ou javascript : Transitions, ombrages, coins arrondis, rotations, opacités, couleurs rgba, etc etc...

Rien que ces deux modifications (html 5 + CSS 3) ont pour conséquence une diminution drastiques du nombre de blocs dans le code source (92 à 57) et une suppression de très nombreuses images servant au design du site.

Vous profiterez des effets de CSS3 si vous naviguez avec autre chose qu'Internet Explorer... A ce propos, les utilisateurs d'IE (27% sur ce site) seront surement déçus de cette nouvelle version du site, et je les comprends ! J'y reviendrais prochainement, dans un autre article ;-)

La feuille de style devrait être packée prochainement (ou l'est peut-être au moment ou vous lisez ces lignes).

Enfin, je devrais introduire l'utilisation des media-queries sous peu (si ce n'est pas encore fait au moment ou vous lisez ces lignes) ainsi qu'une feuille de style dédié à l'impression.

UTF8.

Le changement d'encodage permet une maintenance beaucoup plus aisée, et une compatibilité nettement plus large avec tous les pays, tous les navigateurs, et simplifie de beaucoup la création des flux RSS, par exemple...

Cela en revanche a obligé à modifier la structure de la base de données, et à repasser sur tous les contenus pour supprimer tous les encodages html.

Un soupçon de jquery.

J'y reviendrais dans la partie "contenus", mais pour rendre les références plus vivantes, j'ai introduit un peu de jquery sur la page des références.

Une cure d'optimisation MySql.

La base a perdu de nombreuses tables (certaines inutilisées, d'autres pas optimisées), et a gagné quelques index. Elle est passée intégralement à l'UTF8, certains champs, basés sur d'anciens modules, se sont vus renommés, bref, c'est optimisé, efficace, et plus facile à maintenir !

Amélioration de la performance.

Le tout pour une amélioration de la performance globale, et en particulier celle de la vitesse de chargement des pages !

Url-rewriting.

Le nom des pages a été retravaillé, pour améliorer à la fois le référencement, et l'homogénéité d'ensemble.

En conséquence, un gros travail a également été fait sur le sitemap.xml pour l'actualiser avec toutes ces nouvelles données, ainsi que sur la génération des flux rss.

Redirections 301.

Enfin, toujours dans le but doptimiser (et préserver) le référencement, les anciennes url de la V2 sont toutes redirigées par des redirections permanentes (301) vers les nouvelles URL ! Ouf !

Édition en front.

Et pour finir, une modification d'importance, mais que vous ne verrez probablement jamais :

  • Suppression du site d'administration,
  • Intégration de l'édition en front (administration intégrée au site). C'est beau, et autrement plus convivial !
  • Lien de connexion sur détection d'IP.

...Et, enfin, une version mobile !

Les CSS3, avec l'introduction des media-queries, permettent de s'affranchir de la version CSS "Handled", et de faire un "responsive layout", un design qui s'adapte à la largeur de l'écran. Désormais, vous pouvez consulter ce site sur téléphone mobile, tablette, et tout périphérique sans avoir à zoomer/dézoomer continuellement !

...Et au niveau des contenus ?

Là encore, il fallait repenser l'intégralité du site, certaines idées de départ fonctionnait plutôt mal...

  • Arborescence revisitée : Certaines rubriques n'étaient pas mises à jour, et à la réflexion, n'apportaient rien. À la trappe !
  • Ergonomie repensée : Outre la page d'accueil et sa rubrique "acutalités" jamais actualisée, l'ancien "style switcher" n'apportait pas grand chose. La maquette semblait plaire "telle quelle". Par ailleurs, l'ordre des menus n'était finalement pas très cohérent et n'incitait pas forcémment à la transformation. C'est revue et corrigé ! Les titres, en particulier dans les blogs, n'étaient pas clicable, c'est désormais le cas. Bref, beaucoup de "petites touches" qui améliorent la sensation d'ensemble.
  • L'arborescence n'était pas limpide, donc à la trappe le superflu, réduction du nombre de rubriques, consolidation, et hop, on se contentera du peu que l'on a !
  • En passant certains contenus ont été revisités et mis à jour, ça ne mange pas de pain ! Quelques fautes d'orthographe détectées se sont vues corrigées... Certaines précisions ont été apportées pour améliorer le référencement. Et enfin, la mise en forme de certains articles a été revue, bref, que du bon !

 

Publié le 23 Novembre 2011. Dernière édition : 06 Décembre 2011.

Viadeo

Partager cette page sur : Ajouter à facebook. Ajouter à twitter. Ajouter à viadeo. Ajouter à LinkedIn.

Commentaires

Pas encore de commentaire. Serez-vous le premier ?

Ajouter un commentaire :

(20 caractères maximum).

(en chiffres)