XCELcam 2014

Bonjour,
une nouvelle version de xcelcam.com à vue le jour aujourd'hui.

Contrairement à d'habitude, pour cette version, nous avons fait affaire avec une boîte de design. Cette dernière s'est chargé de la conception et de la production.

Niveau expérience, c'est pas trop comme on l'aurait voulu. J'ai pour ma part dù participé activement au projet... en corrigeant plusieurs chose juste avant la mise en prod. L'impression est qu'ils ont mal calculé le temps que ça prendrait pour faire tout ça et que à la fin ils ont bâclé certaines zones.

Le site demande encore de nombreuses corrections ici et là.

Mais j'ai un doute...
J'aurais besoin de vos critiques, surtout au niveau du code. Peut-être serez-vous en mesure de confirmer ou d'infirmé mon impression?

D'avance, merci!
-www.xcelcam.com
Modifié par juliesunset (05 Feb 2014 - 18:29)

Bonjour,

Graphiquement, c'est trés réussi. J'ai eu l'envie de m'acheter une caméra!

Pour le reste, j'y reviendrai plus tard.

Salut,

Je n'ai regardé que la page d'accueil pour le code. Je ne vais pas parler de l'aspect visuel. L'aspect visuel est très sympa. Bravo pour l'infographiste.

Le problème se situe au niveau de l'intégration (pour le back on peut pas le voir) et comme tu l'as dit, il y a eu des petites choses bâclées et c'est franchement dommage :
- Il y a du code JS dans la page. Ce qui a pour effet : Si on veut utiliser le même script dans un autre endroit du site, ce code sera dupliqué.
- Je ne pense pas que ce code fonctionne :

$(function(){
				// Colorbox product images
				if( $().colorbox ){
					$("a.accessoires_prod").colorbox({innerWidth: "80%", innerHeight: "70%"});
				}
  
            });

D'une part, il y a une profusion de document ready et d'autre part, je ne connais pas ce type d'expression $().colorbox. Après je peux me tromper, je n'ai pas la sciences infuse.

En ce qui concerne le HTML, la page n'est pas du tout valide. J'ai vu pleins d'erreurs de syntaxe. Ce qui a pour effet que si tu veux de ton côté ajouter une fonctionnalité en JS ou styliser un élément, tu risques de voir plus de bugs graphiques.

Aussi dans le code source, j'ai vu des styles dans les balises. ex :

<div style="display:none;">

Je trouve ça moyen comme pratique. Le jour où on doit donner un autre comportement à ce noeud, ça va être simple de comprendre qu'il y a un style en ligne.... sinon paye tes !important.....

Le contenu du slider me fait flipper. Les textes sont en image sans alternatives textuelles.

Je t'invite à regarder le résultat sur lynx. Là ça fait flipper.... Chez moi ça donne :
erreur 406
Modifié par niuxe (25 Jan 2014 - 04:04)

Merci BEAUCOUP pour ton commentaire Niuxe!

Donc tu confirme mon impression sur plusieurs points.

niuxe a écrit :

Le problème se situe au niveau de l'intégration (pour le back on peut pas le voir) et comme tu l'as dit, il y a eu des petites choses bâclées et c'est franchement dommage :

Niveau Front, j'ai l'impression que la personne qui a coder ça est plutôt orienté back... du coup niveau intégration elle est à la ramasse... C'est l'impression que j'ai.

niuxe a écrit :
En ce qui concerne le HTML, la page n'est pas du tout valide. J'ai vu pleins d'erreurs de syntaxe. Ce qui a pour effet que si tu veux de ton côté ajouter une fonctionnalité en JS ou styliser un élément, tu risques de voir plus de bugs graphiques.

Finalement, j'ai plus de boulot que je ne croyais...

niuxe a écrit :
Aussi dans le code source, j'ai vu des styles dans les balises. ex :

<div style="display:none;">

Je trouve ça moyen comme pratique. Le jour où on doit donner un autre comportement à ce noeud, ça va être simple de comprendre qu'il y a un style en ligne.... sinon paye tes !important.....

Les styles en-ligne j'avais remarqué et j'était pas trop contente quand j'ai vue ça... y'en a partout! Donc je ne sais plus ou donner de la tête pour corriger ça.

niuxe a écrit :
Le contenu du slider me fait flipper. Les textes sont en image sans alternatives textuelles.

Moi aussi ça ma fait flipper. C'est l'un des premier commentaires qu'on leur a fait... maintenant qu'on a dépasser le temps impartie, c'est moi qui devra faire les modifications pour arranger ça. En ce qui concerne les alt="" je pense qu'il n'y en avait pas un seul de remplis correctement...

niuxe a écrit :
- Il y a du code JS dans la page. Ce qui a pour effet : Si on veut utiliser le même script dans un autre endroit du site, ce code sera dupliqué.

Truc que je doit corriger...

niuxe a écrit :
- Je ne pense pas que ce code fonctionne :

$(function(){
				// Colorbox product images
				if( $().colorbox ){
					$("a.accessoires_prod").colorbox({innerWidth: "80%", innerHeight: "70%"});
				}
  
            });

D'une part, il y a une profusion de document ready et d'autre part, je ne connais pas ce type d'expression $().colorbox. Après je peux me tromper, je n'ai pas la sciences infuse.

JS et moi, c'est 2... c'est ma bête noir. Donc je ne rien peu confirmer de ce côté. Pour ce qui est du code cité, je ne pourrais pas dire si ça fonctionne, c'est en le testant que je vais voir.

niuxe a écrit :
Je t'invite à regarder le résultat sur lynx. Là ça fait flipper.... Chez moi ça donne :
[url=une erreur 406 si je ne m'abuse]

Je ne suis pas sûr de comprendre ce que je voit...

Sympa, c'est très frais, j'aime bien.

Attention, t'as une ressource mal chargée :

a écrit :

Failed to load resource: the server responded with a status of 404 (Not Found) \http://www.xcelcam.com/img/menu.png

Y a un peu de parallax c'est bien pas surdosé. Faut optimiser les images par contre, ça lague un peu.

Pour le moment, ton application a l'aire de tourner à peu près bien. Là où c'est inquiétant et que ton site n'est pas accessible depuis n'importe quel browser. Lynx le prouve. Je t'invite à lire cet article afin de comprendre ce qu'est ce browser et pour quelle utilisation il est destiné. Par axemple, la page d'accueil d'Alsacreations.com donne ceci (on voit la partie haute de la page) :
http://img15.hostingpics.net/pics/726756temp.png .

En tout premier, tu devrais voir le problème des alt. Pour les styles en ligne, je ne pense pas que ce soit la priorité. Il faudrait régler ce problème de validation html si tu veux faire évoluer le site. L'erreur de Lynx est je pense relativement inquiétante. Je suis allé voir un crawler. J'avais un lien, et le lien est down . Finalement, je suis tombé sur ce lien qui apparemment est pas si mal. Donc un crawler peut passer sur ton site pour le référencement en testant ce lien.

Pour cette écriture JS, perso je ne la connais pas. Dans la console, je vois une erreur de jquery la librairie et c'est tout :

event.returnValue is deprecated. Please use the standard event.preventDefault() instead. jquery-1.10.1.min.js:5

. Donc il se peut que ce soit ça. Logiquement, son code fait penser à s'il y a la présence des ancres avec la classe accessoire. Mais je trouve que c'est mal formulé. Il faudrait voir ce que dit les autres browsers dans la console. Je pense à IE notamment. Parce que chez moi je vois aucune erreur mise à part ce que j'ai dit précédemment. Donc j'en conclus que c'est une écriture autorisée (perso jamais vu), ou que le browser est permissif (FF/Chrome). Comme je t'ai dit, ça a l'aire de tourner. C'est peut être des faux prolbèmes.
Modifié par niuxe (25 Jan 2014 - 04:31)

jmlapam: merci de m'avoir signalé l'image manquante. Pour ce qui est des images à optimiser, je prend note et ça va dans la "To do list"

Merci pour le lien Niuxe, le test ultime donc! Je garde ça en mémoire pour la refont du site SPYPOINT sur lequel je travail en ce moment.
Je regarde pour les alt, merci.

En fait c'est pire qu'on ne le croyait... on a testé sur iPhone 3Gs ce matin, le rendu est dégueux. C'était pourtant un point TRÈS important pour nous au vue de nos statistiques de site. Sur Nexus 7 en mode horizontal ça passe moyen. Bref, on est pas content du tout.

Bonjour Julie,

Je confirme, sur iPad air, le site est tout collé sur la gauche, sauf la vidéo qui se colle à droite !

Sinon, la maquette est claire et efficace.

Merci pour ton retour Spongebrain! D'ailleurs, si tu pouvais m'envoyer un (des) screenshot ça serait TRÈS apprécier, merci.

J'ai mes repères sur mac, mais sur iOS je suis une vraie buse.
Incapable de faire une capture d'écran. Le plus simple serait de regarder sur un iPad emprunté (le modèle sur lequel j'ai testé est l'iPad air/Chrome).

Bouton du bas et celui du haut en même temps.
-http://www.youtube.com/watch?v=K6WooxythlM

Salut,
Le temps de répondre et d'aller sur le site pour faire la capture… le problème décrit avant a disparu. Le site occupe désormais toute la largeur de la tablette (horizontal/vertical), aussi bien sur safari que sur chrome (iPad air).
Par contre, la toute première photo qui a une petite bande blanche sur la droite un peu plus larges que les autres images qui touchent le bord. Histoire de chipoter.
Ceci dit, je remarque que le footer aussi a une bande blanche sur la droite alors qu'à gauche le noir va jusqu'au bord. Le texte y est trop collé sur le bord gauche alors qu'il y a largement la place pour décoller ou centrer les textes du footer.

En fait, que ce soit sur chrome ou safari, on a un filet blanc à droite sur toute la hauteur du site, ce qui n'est pas le cas à gauche. Ça n'a rien à voir avec l'ascenceur. Ce filet se transforme en bande de plusieurs pixels sur la première photo et dans le footer noir.

Pour la capture (merci pour l'astuce ) j'ai juste le haut du site, lien ci-dessous hébergé chez Jupload car l'image en Retina fait plus de 3 Mo :
http://images.jupload.fr/1391087886.png
On voit notamment le filet blanc à droite sur la zone orange, et la bande blanche à droite plus large sur la photo. En zoomant et en calant l'image sur le bord c'est très visible.

Voilà pour moi.

Niveau graphisme, rien n'a redire

Spongebrain: Merci pour le feedback, j'avais déjà relever c'est petits détails qui apparaissent également sur Nexus7.
C'est comme ça un peu partout sur le site. Sur certaines pages il n'y a carrément pas de marge sur les côtés, du coup on a parfois de la difficulté à scroller.

Des petits détails, oui, mais au vue des stat. de fréquentation du site pour les tablettes et mobile ça a sont importance. Et on avait bien spécifié ce point aux concepteurs.