[pro] Site pour designer freelance

Salut à toute la communauté !

Voilà mon premier site pour un professionnel.

C'est mon premier vrai site sans éditeur wysiwyg ou CMS.

Je souhaiterais donc avoir votre avis sur ce site. Aussi bien au niveau des bugs que de la propreté du code.

Merci beaucoup pour vos avis éclairés qui me permettront de progresser

Le lien est le suivant : Cliquez ici
Modifié par timtim (05 Apr 2012 - 11:04)

Alors gros point noir : les textes en images, tu tues ton référencement, il n'y quasi aucun texte référençable sur tout le site, c'est vraiment une chose à corriger pour un site PRO (et même non pro)
Modifié par Fabious (02 Apr 2012 - 10:12)

Oui je sais bien, mais comment faire autrement ?
Les boutons ont été créés de toute pièce sans taper de texte, il n'existe pas de police correspondant à ce texte.
J'ai quand même utilisé la balise alt et j'ai nommé les pages avec un mot clé précis. Est-ce que je peux faire mieux ?
Modifié par timtim (02 Apr 2012 - 10:13)

timtim

a écrit :
Oui je sais bien, mais comment faire autrement ?
Les boutons ont été créés de toute pièce sans taper de texte, il n'existe pas de police correspondant à ce texte.
J'ai quand même utilisé la balise alt et j'ai nommé les pages avec un mot clé précis. Est-ce que je peux faire mieux ?

Trouver une police adéquate. Avec @font-face, tu as le choix, non ?

A voir ton code source, tu as un problème d'encodage : dans ton code, les caractères accentués apparaissent sous forme de points d'interrogation dans des losanges noirs. La balise <meta charset="UTF-8"> ne suffit pas pour avoir de l'UTF-8. Il faut enregistrer les fichiers HTML dans le format correspondant (le Bloc-notes de Windows fait ça très bien).

Je n'aime pas ta présentation de toi à la troisième personne. Tu parles de toi. Le discours à la première personne me semble plus logique.

En affichage en taille réelle (MacBook Pro, résolution 1440 X 900), j'ai une barre de scroll horizontale.

Salut !

Dans démarche créative l'image est floue j'ai un grand ecran et du coup l'image est étirée plus que sa taille réelle et ca floute... une image plus grande ou un min-size par ici

Dans les parties graphisme/architecture/design ajouter un petit texte a coté/sur les images parce-que la c'est le flou total (au figuré cette fois ci ! ) il faut guider un peut plus.

Idem que la première remarque sur la page "Guilhem" en rajoutant le fait que comme ton texte est une image, en plus d'etre floue quand trop grand, il deviens trop petit quand on réduit l'écran.

Un petit formulaire de contact sur la page éponyme, c'est rapide, pas compliqué et tellement confortable !

Bonne continuation !

@Fabious, le commanditaire ne souhaite pas être spécialement référencé pour ses projets, mais surtout pour son boulot.
Sur les mots-clés design, graphisme, architecture, création artistique, etc. Pas sur les marques pour lesquelles il a bossé. Du coup

@thierry : Je ne m'étais jamais penché sur l'utilisation de cette propriété. Elle permet d'utiliser une typo perso alors ? Il faudrait donc que le commanditaire crée une typo ? C'est bien ça ?
Merci pour le problème d'encodage, je vais voir ça de plus près. J'enregistrais les fichiers avec Notepad++, mais je n'ai pas vu d'option spécifique à l'encodage lors de l'enregistrement.
Pour la présentation à la 3ème, personne, j'en parlerais au commanditaire (car ce n'est pas moi héhé).
Et effectivement, le positionnement est là où j'ai le plus de mal. Je vais essayer de mettre une largeur max un peu moins importante.

@Laurent : Effectivement, je n'ai pas eu l'occasion de tester sur de grands écrans. Merci.
Pour les infos textuelles dans la galerie, c'est un choix du commanditaire, cependant, je vais lui soumettre l'idée à nouveau pour essayer de le faire changer d'avis.
Le formulaire de contact est une idée sur laquelle on avait réfléchi, mais on se posait la question du spam. Pensez-vous que ça peut être un nid à spam ?


Merci beaucoup pour tous vos commentaires !
Modifié par timtim (02 Apr 2012 - 10:56)

timtim a écrit :
Effectivement, je n'ai pas eu l'occasion de tester sur de grands écrans. Merci.
Pour les infos textuelles dans la galerie, c'est un choix du commanditaire, cependant, je vais lui soumettre l'idée à nouveau pour essayer de le faire changer d'avis.

Rien a redire alors, le client est roi, même si il a tord (c'est nous les expert et on l'avait prévenu pourtant !)

timtim a écrit :
Le formulaire de contact est une idée sur laquelle on avait réfléchi, mais on se posait la question du spam. Pensez-vous que ça peut être un nid à spam ?

Non. En php ton adresse mail est invisible et il suffit de rajouter un petit truc (visible comme un captcha ou invisible comme du JS) bloquant l'envoi de message par des robots pour les plus parano
J'ai jamais reçu de spam via mes formulaires en tout cas !

J'ai oublié de dire aussi que comme tout le texte est en image, quelqu'un ayant des problèmes de vue ne peut pas grossir le texte, cela pose je pense quelques problèmes d'accessibilité

timtim

a écrit :
Je ne m'étais jamais penché sur l'utilisation de cette propriété. Elle permet d'utiliser une typo perso alors ? Il faudrait donc que le commanditaire crée une typo ? C'est bien ça ?

Non, non, @font-face te permet d'utiliser n'importe quelle police, il n'y a plus besoin que les visiteurs l'aient sur leur PC, à condition d'en avoir les droits.

Sinon, tu peux (notamment) utiliser Google Web Fonts.

Explications et liens ci-dessous :

Comment utiliser une fonte «non-standard» sur un site Web ?

Bonne continuation.

Très très très long à charger.
Personne n'ira très loin dans la navigation de ton site, je suis désolé de te le dire

Pas de réelle structure html, des images pour les liens (à voir comme dit plus haut font-face), des images pour les textes.
Bref, de l'image partout là où tu aurais pu t'en passer.

a écrit :
Fabious, le commanditaire ne souhaite pas être spécialement référencé pour ses projets, mais surtout pour son boulot.
Sur les mots-clés design, graphisme, architecture, création artistique, etc. Pas sur les marques pour lesquelles il a bossé. Du coup

Là, ton client ne sera absolument pas référencé ce qui est dommage puisque je penses que tu as planché sur ce site.

L'image c'est l'option de facilité. Dans l'état actuel ce site n'est pas vendable.

@Laurent :
Ok pour le formulaire, on y jettera un oeil:)

@Thierry :
Oui donc n'importe quelle police à condition que cette police existe. On va voir ça de plus près. Merci en tout cas.

@Fahrenheit :
Effectivement c'est un peu long, je m'en rends compte à l'instant, en local le problème ne se faisait pas sentir. Et en fibre optique non plus.

Qu'entends-tu par "pas de réelle structure html" ?

Je pense qu'un ajout de lien vers "projet suivant" et "projet précédent" pourrait rendre le site davantage navigable.

Quand au référencement, je rectifie mes propos : le commanditaire ne souhaite pas être référencé. Ce site est destiné à ses contacts.

Cela dit, je vais bien entendu me pencher du côté de l'optimisation des liens et textes.

Merci encore à tous pour vos avis

Bonjour,

C'est assez chaotique sous IE8. Ca vaudrait p't'être le coup que tu vérifie ton site avec.

Bonjour,

a écrit :
C'est mon premier vrai site sans éditeur wysiwyg ou CMS.

Zut j'utilise des CMS, je fais des faux sites?

Sinon quelques détails:

Dans le menu: il est écrit «demarche créative» au lieu de «démarche créative» le titre est «GAZ creation» au lieu de «GAZ création». Il vaut mieux éviter les erreurs de français.

Dans la partie architecture (je me demandais si c'en était vraiment.. en fait pas. Pourquoi appeler ça ainsi? ) il y a plein de «travail en cours bientôt sur le site». ça fait pas terrible de cliquer sur un aperçu pour aboutir dans un cul-de-sac.
Modifié par kustolovic (03 Apr 2012 - 09:08)

@Laurie-Anne :
En effet ... Ça me découragerait presque ...

@kustolovic :
Non bien sûr tu fais sans doute de vrais sites, mais quand je dis "vrai site", c'est un site qui servira à quelque chose. J'ai déjà créé des sites avec NotePad++, mais c'était seulement pour les cours ou bien pour faire des tests, des sites qui n'ont jamais été mis en ligne.
De mon point de vue, pas de vrais sites donc. Puisque vus uniquement par moi (et éventuellement une ou deux autres personnes).

Pour ce qui est des accents, c'est apparemment un problème d'encodage. Pas d'erreurs de français.
Pour un architecte, on parle d'architecture, pour un designer, on peut en parler aussi. Cependant l'un travail sur la structure du bâtiment, l'autre sur son aménagement. Le terme précis serait "architecture d’intérieur", mais quand on parle de design, cela va sans dire.


Merci encore pour vos commentaires, je vais me pencher là-dessus plus en profondeur et je reviendrai sûrement vers vous pour voir si d'autres problèmes persistent

Merci beaucoup !

Salut,

timtim a écrit :
En effet ... Ça me découragerait presque ...

Mais il ne faut pas ! En fait tu utilises des balises HTML5 qui ne sont pas reconnues par IE8 et inférieur. Il faut les créer via Javascript et ensuite leur appliquer un style par défaut (display: block) et là ça deviendra tout de suite moins chaotique.

Pour le JS Google met à disposition un petit script qui fait le travail pour nous, il ne te restera plus qu'a leur appliquer un style par défaut en CSS:

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Modifié par Gili (03 Apr 2012 - 14:19)

Merci Gili, c'est pourtant ce que j'utilises

Saurais-tu ce qui ne va pas dans mon code qui fait que ça ne fonctionne pas ?
J'ai mis display:block pour tous les éléments html5 et j'ai inséré le lien vers html5shim sur toutes mes pages...

Une idée ?

Merci

Haha, ne me remercie pas voyons, j'avais regardé avec firebug sous firefox, tu m'étonnes que j'avais pas vu que tu l'utilisais

Sinon j'ai lancé ton site sur IEtester (IE8) au boulot, et je n'ai pas remarqué d'anomalie, mis à part le menu qui n'a pas de width, le contenu qui sort de la boite est alors caché.

Bon histoire que mon commentaire serve à quelque chose je vais quand même te donner mon avis sur le site :

Au niveau du code, c'est pas très propre surtout au niveau du positionnement où tu as placé la majeur partie de tes conteneurs en position: absolute. C'est pas ce qu'il y a de plus propre, et si tu vises un site consultable sur différents périphériques je pense que c'est un mode de positionnement à éviter. (Quand on met un élément en position absolute, le float ne sert plus à rien (je dis ça car tu as ce genre de déclaration)).

Tu utilises aussi des margins de 400px pour ton positionnement, le margin/padding ne sert pas à positionner les éléments.

Et puis, on te l'a déjà dis, mais je le redis tout est en image, faut vraiment faire quelque chose à ce niveau. Comme pour ton footer où tu as carrément mapé ton image, il y avait vraiment plus simple à ce niveau là.

Au niveau de tes alts, ils sont rempli mais malheureusement pas de façon pertinente, par exemple dans la rubrique "design" les images sont mentionnées par "design projet 1" hors ce n'est pas une description de ce que l'ont voit sur l'image. Le alt doit être un descriptif du visuel de l'image.

Un autre problème plus important selon moi est que quand je clique sur un élément du menu je me retrouve sur une page, mais rien ne m'indique sur laquelle je suis. Pas un élément graphique dans le menu qui me spécifie où je suis (autre couleur du lien actif ou quoi), ou même ni de titre, que ce soit la balise hN ou la balise title (celle-ci doit être différente sur chaque page (c'est bon pour le référencement en plus)). Pourquoi ne pas avoir mis de titre ? ton document n'a aucune structure.

Au niveau de la navigation c'est assez frustrant le nombre de clique qu'on doit subir pour parcourir les images du portfolio (cliquer pour voir, revenir en arrière recliquer) alors qu'avec une lightbox tout se déroulerai sur la même page. Perso moi ça me décourage ^^.

Bonne continuation
Modifié par Gili (03 Apr 2012 - 18:22)

Je n'ai pas beaucoup de temps en ce moment, mais j'ai quand même lu ton commentaire qui me sera très utile !

Le positionnement est vraiment mon plus gros défaut (ce n'est pas le seul ^^ mais je pense que c'est l'un des plus handicapants).

Quelqu'un aurait une idée pour que mon positionnement soit mieux foutu ? Ce que j'aimerais faire, c'est que le logo en arrière plan soit au milieu de l'écran et que le menu soit centré verticalement pour bien se placer par rapport au logo.
Et du coup, il faudrait que la galerie soit également centrée par rapport au logo en arrière plan.

Au début, j'étais parti sur un site qui s'adapterait à toutes les résolutions, mais je pense qu'il vaudrait mieux en faire au plus simple dans un premier temps.

Pensez-vous que ce serait une bonne idée de faire une autre version du site pour les grosses résolutions ? Avec une détection javascript, ça donnerait quelque chose ?

Encore merci !

Ah oui et bien vu pour la lightbox, je n'y avais pas pensé, mais c'est une technologie qui me semble être une bonne alternative.
Sinon, je pensais ajouter des liens sur les côtés pour accéder au projet suivant ou au projet précédent.
Modifié par timtim (03 Apr 2012 - 19:34)

Salut à tout le monde !

Je reviens vers vous après avoir pas mal modifié le site que j'avais proposé en début de mois.

Je vous remet le lien : [Modération : le lien se trouve déjà en haut de la page]

J'ai repensé la navigation entre les projets à l'aide d'une lightbox.
J'ai optimisé toutes les images pour le web.
J'ai également travaillé la compatibilité entre les navigateurs.

Pouvez-vous me donner votre avis sur cette "nouvelle" version ?

Merci
Modifié par Laurie-Anne (12 Apr 2012 - 17:55)