[Pro, mais pas trop] Site d'agence

Bonjour,

Récemment, on m'a promis que le html, c'était devenu super facile et qu'on pouvait faire à peu près tout avec de nos jours. Je me suis donc attelé à refaire le site de mon agence en html... et je suis plutôt agréablement surpris. Ce n'est pas encore vraiment simple, mais je pense que d'ici quelques années, ce pourrait le devenir et que les perfs et les possibilités suivront certainement.

Bref, j'ai pu faire plus ou moins ce que je voulais faire ; mais niveau bonnes pratiques, je suis probablement complètement à la ramasse. Si vous pouvez jeter un coup d'oeil sur le code et me dire où ça pèche ; je vous en serait pas mal reconnaissant.

(oui, le fallback ie8 et - et la version mobile sont honteuses, mais bon...)

Salut,

Quelle est l'URL du site de ton agence ?

Ah bah oui tiens, ça pourrait servir.

http://wax-o.com/

Salut,

Rapidement :
* enlève la vidéo de fond d'écran : c'est le genre de chose qui fait vite consommer des ressources (inutilement), et donc faire tourner les ordinateurs à plein régime, si je puis dire ;
* j'éviterais de faire animer la cocarde News ;
* un bon point, en revanche, pour l'adaptation à différents écrans, dont les écrans de mobile.
Modifié par Victor BRITO (28 Nov 2011 - 16:46)

En partant du principe que je trouve rigodrôle d'avoir un site qui bouge de partout et que mes prospects trouvent ça rigodrôle aussi et que même si ça choque l'oeil des designers / dévelopeur web ; mes clients ne sont ni l'un ni l'autre et préfèrent comme ça (testé en live à de nombreuses reprises). Ça, ça ne changera pas. Pour les perfs, j'ai bien vu que ce n'était pas franchement du flash ; mais ça ne me fait pas trop peur non plus.

Mais par contre, je suis super preneur de conseils sur le code et sur l'utilisation des nouveaux éléments apportés par le html5 sur lesquels je suis un peu limite (un peu de sémantique par exemple). Ou sur l'optimisation technique de la page.
Modifié par fabien_ (28 Nov 2011 - 16:54)

Je vois pas de vidéo en fond, tu l'as enlevé ?

Le résultat final est forcément très pro, bien que les trucs qui bougent...bref
Niveau code, c'est codé comme en flash: tout est dans les scripts.
Résultat, je ne vois pas ton site(j'ai noscript activé par défaut), et google non plus (pas trop en tout cas, si on excepte le blog).
C'est probablement pas très grave pour une agence déjà bien établie (et vous semblez l'être), mais pour un free qui se lance...
Par ailleurs vérifie ton htaccess, il laisse voir des éléments qui devraient être inaccessibles.
Gzip n'a pas l'air d'être activé, et te permettrait de gagner en perfs facilement.
Pas de mise en cache du contenu côté browser cf ce thread.

Sinon, vous avez un graphiste qui roxxe.

paolo a écrit :
Sinon, vous avez un graphiste qui roxxe.

+1, c'est juste dommage que le site de l'agence soit tellement en dessous de vos réalisations.

Aussi dans les références j'ai pas compris à quoi ça vous sert d'afficher un Mac qui prend toute la page et qui ne contient rien et finalement de montrer les captures d'écran après. Ou alors y'a une fonctionnalité qui est cassée.

Et le formulaire de contact ne fonctionne pas, il renvoi sur une page manquante (formmail.php).
Modifié par jb_gfx (28 Nov 2011 - 17:58)

jb_gfx a écrit :
Je vois pas de vidéo en fond, tu l'as enlevé ?

Ah merde, ce n'est pas normal du tout ça. Tu visites avec quoi comme navigateur ?

paolo a écrit :
Le résultat final est forcément très pro, bien que les trucs qui bougent...bref
Niveau code, c'est codé comme en flash: tout est dans les scripts.

Ouais, je ne sais pas trop faire autrement. Je vais essayer de sortir des pages pour les références, ça sera plus accessible, tu as raison.

paolo a écrit :
Résultat, je ne vois pas ton site(j'ai noscript activé par défaut), et google non plus (pas trop en tout cas, si on excepte le blog).
C'est probablement pas très grave pour une agence déjà bien établie (et vous semblez l'être), mais pour un free qui se lance...

Je considère qu'un visiteur sans javascript et qui donc n'a ni facebook , ni google maps, ni gmail, ni youtube... sans un système complexe d'ajout d'exceptions (enfin complexe, disons non accessible à un internaute lambda) n'est pas un internaute dans ma cible.

Je me suis longtemps posé la question pour Google. C'est vrai qu'il ne voit pas la page avec les boulots. Mais bon, ça ne me dérange pas tant que ça au final. Et puis quand on aura le temps de mettre des trucs sur le blog (un jour), ça fera pas mal de pages. (et puis j'ai envie de dire des trucs aussi !)

paolo a écrit :
Par ailleurs vérifie ton htaccess, il laisse voir des éléments qui devraient être inaccessibles.

Ça ça m'ennuie plus déjà. Je n'y connais pas grand chose en .htaccess. Un petit lien ? Que vois-tu par exemple qu'il vaudrait mieux que je passe en inaccessible ?

paolo a écrit :
Gzip n'a pas l'air d'être activé, et te permettrait de gagner en perfs facilement.

Zut pourtant avec Yslow, ça me dit que c'est gzipé. C'est pas un truc que le serveur gère ça ?

paolo a écrit :
Pas de mise en cache du contenu côté browser cf ce thread.

C'est les "expire header" ça ?

paolo a écrit :
Sinon, vous avez un graphiste qui roxxe.

Merci !

jb_gfx a écrit :
Aussi dans les références j'ai pas compris à quoi ça vous sert d'afficher un Mac qui prend toute la page et qui ne contient rien et finalement de montrer les captures d'écran après. Ou alors y'a une fonctionnalité qui est cassée.

Ben pareil que pour le fond, ya des vidéos dans les écrans normalement. Là j'ai retesté sur plein de navigateurs, je l'ai toujours la vidéo... étrange.

fabien_ a écrit :

Ah merde, ce n'est pas normal du tout ça. Tu visites avec quoi comme navigateur ?

J'ai testé avec Firefox 8 et IE 8.

En effet avec Chrome et IE 9 y'a bien une vidéo en fond (particulièrement gênante pour la lecture du site).

Edit : je viens de tester un Firefox 8 sans aucune extension et c'est pareil, j'ai aucune vidéo.
Modifié par jb_gfx (28 Nov 2011 - 18:04)

Tiens, j'avais pas vu la vidéo avec ff. C'est juste uberchiant.

Pour l'instant, rien de "gênant" n'est visible, mais on peut lister tes répertoires.
Le jour où tu vas placer un truc privé pour un client par exemple, ça sera également accessible.
Il suffit d'ajouter une ligne Options -Indexes dans un htaccess placé à la racine.

fabien_ a écrit :

Je considère qu'un visiteur sans javascript et qui donc n'a ni facebook , ni google maps, ni gmail, ni youtube... sans un système complexe d'ajout d'exceptions (enfin complexe, disons non accessible à un internaute lambda) n'est pas un internaute dans ma cible.

Facebook, Gmail et Youtube fonctionnent aussi sans JavaScript.
Modifié par jb_gfx (28 Nov 2011 - 18:15)

paolo a écrit :

Sinon, vous avez un graphiste qui roxxe.

c'est quoi un graphiste qui roxxe?? je ne connais pas ce verbe, lol

effectivement, la vidéo de fond, on la voit sous chrome, mais pas sous Firefox ni IE 9

sinon c'est assez high tech...
J'aime pas trop l'association du noir et du jaune vif dans les taquets de menu... ça fait penser aux plots de sécurité que les agents d'entretien posent sur le sol quand ils nettoient pour signaler que ça glisse.....

quand la largeur de la fenêtre descend en dessous de 950 pixels, on perd l'affichage du menu et on obtient un fond complétement jaune.

j'ai pas épluché le code, mais ça sent le html 5 , lol

sous IE7 et IE8 (via ieTester) l'affichage est un vrai carnage.....

Hum sous IE8 (un vrai IE8) ça rend pas mal, il manque que les vidéos. IETester est nul pour tester le JavaScript.

lionel_css3 a écrit :

c'est quoi un graphiste qui roxxe?? je ne connais pas ce verbe, lol

Ben c'est un roxxor.

http://www.urbandictionary.com/define.php?term=you%20rock
Modifié par jb_gfx (28 Nov 2011 - 18:29)

jb_gfx a écrit :

Ben c'est un roxxor.

oui et c'est quoi un roxxor ..?

J'ai édité mon message précédent pour poster la définition.

You rock : t'assures
He rocks : il assure (qui se prononce rox et qui devient roxxe chez les jeunes punks comme Paolo )

Ça m'inquiète un peu ce que vous me dites sur ie8 et ff8.

Pour ff8, pourquoi il ne lit pas les vidéo ? oO

Pour ie8, vous n'êtes pas sensés voir le site. J'ai un petit bout de js :

 $(function($) {
	if(!document.createElement('canvas').getContext)
	{
		$('body').empty();
		$('body').append('<div id="fla" style="position:absolute; top:0; left:0; width:100%; height:100%;"><object codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="100%" height="100%"><param name="movie" value="siteflash.swf"><param name="quality" value="high"><param name="wmode" value="transparent"><embed src="siteflash.swf" quality="high" wmode="transparent" width="100%" height="100%" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></embed></object></div>');
	}
});

En gros, si le navigateur ne supporte pas le canva, ça supprime tout et ça met le flash à la place.


Pour facebook, si on essaye de s'y connecter sans js, on a ça :
"JavaScript est désactivé dans votre navigateur
Veuillez activer JavaScript ou utiliser un navigateur prenant en charge JavaScript si vous souhaitez utiliser Facebook. Vous pouvez également accéder à la version mobile de Facebook."

Pour gmail, tu n'a aucune des fonctionnalités qui font que le webmail sert à plus de choses qu'en 1990
...

Bref, naviguer sans js aujourd'hui, c'est quand même vraiment se priver de quelque chose.

a écrit :
quand la largeur de la fenêtre descend en dessous de 950 pixels, on perd l'affichage du menu et on obtient un fond complétement jaune.

Et tu n'as pas de texte dedans ? Normalement il y a un petit tableau avec un peu de texte. C'est juste une carte de visite pour les gens qui viennent avec un mobile.

a écrit :
Pour l'instant, rien de "gênant" n'est visible, mais on peut lister tes répertoires.
Le jour où tu vas placer un truc privé pour un client par exemple, ça sera également accessible.
Il suffit d'ajouter une ligne Options -Indexes dans un htaccess placé à la racine.

Je vais me chercher un petit tuto pour faire ça

fabien_ a écrit :

Et tu n'as pas de texte dedans ? Normalement il y a un petit tableau avec un peu de texte. C'est juste une carte de visite pour les gens qui viennent avec un mobile.

si.. y a du texte, un texte différent mais tu peux avoir des gens sur PC avec un écran 1024x768 qui sont pas en affichage plein écran ou qui ont les favoris d'affiché....et qui chopent cet affichage

logiquement, les portables, tu les détectes pas à 950px, mais bien plus bas....

je me demande s'il ne vaut pas mieux détecter les portables avec l'user agent, plutôt qu'avec les média queries... à voir...

lionel_css3 a écrit :

je me demande s'il ne vaut pas mieux détecter les portables avec l'user agent, plutôt qu'avec les média queries... à voir...

Très mauvaise idée, les mq sont la meilleure solution.