[intermediaire] portolio web - http://www.moya-jackson.com

Bonjour à tous,

voilà, il y a quelque temps je me suis décidé à refaire mon site web sérieusement.

J' adore faire de la 3d et surtout de la 3d et encore de la 3d, mais aussi de l' identité visuelle et du print, mais le web, j' avais encore jamais vraiment essayé.

je ne suis pas webdesigner, mais j' étais curieux de voir comment fonctionne cette technologie
et ça m' a permis de réaliser que c' était tout un art, entre connaissances techniques, graphisme, accessibilité, l' évolution constante de cette technologie, le référencement, etc...

faire des sites web statiques, ça peut encore aller mais quand j' ai vu la complexité que pouvait avoir certains sites, blindés en php, javascript, ajax, et compagnie, on peut dire que c' est un sacré boulot !

Du coup, c' est plutôt un loisir, qui m' a permis aussi de réaliser mon portfolio ainsi que le site d' un ami qu' il faut que je finisse.

Alors, je me suis dit, mais par quoi vais-je commencer, résultat : go google !

C' est ainsi que j' ai acheté le dvd html/css elephorm de Florent Verschelde apportant des bases solides, puis je me suis orienté vers grafikart.fr pour m' initier au php et javascript, merci à eux, et évidemment je me suis documenté sur de nombreux sites dont alsacréation à la hauteur de mes besoins.

Dans mes objectifs, je voulais quelque chose de simple et efficace.

Alors, j' ai sorti mon carnet de croquis et dessiné quelque chose de simple comme je le voulais.

J' ai également commencé un blog wordpress disponible sur le site, qu 'il faudrait que je termine.

Je n' ai pas voulu m' embêter trop avec la compatibilité, notamment IE 6 mais le site semble globalement fonctionner sur les navigateurs récents.

vos avis constructifs sont les bienvenue, code et design.

http://www.moya-jackson.com

En vous remerciant d' avance pour votre temps accordé.
Modifié par legaia (13 Aug 2010 - 15:01)

Hello,

Le design de ton site est sympathique, même s'il est assez minimaliste, on voit bien pire
Par contre, ton usage des espaces insécables l'est beaucoup moins (sympathique) : tu pourrais les éviter en utilisant des marges internes via css.

Dans tes galeries de projets, tu as énormément de texte contenu dans des images. Pour le coup, ce texte est totalement inaccessible. Comme il s'agit de contenu informatif, il ne faut pas le mettre dans une image (et il y a bien trop de contenu pour utiliser l'attribut alt).

Sinon, la meta keywords ne sert à rien, et il faudrait appeler tes scripts js en fin de document (avant </body>).
Pour finir, attention avec les adresses email en clair dans ton document, tu risque de recevoir très rapidement beaucoup de pubs pour des trucs plus ou moins utiles Essaye de mettre en place un petit formulaire de contact sécurisé, il y a pleins de scripts/tutoriels sur internet

A+
Modifié par audrasjb (11 Aug 2010 - 18:22)

très bien, merci audrasjb, je vais prendre en compte tout ce que tu m' as dit et effectuer les corrections nécessaires.

Pour l' aspect minimaliste, c' est volontaire, par contre certaines choses ne sont pas visible sur firefox 3.6 mais sur les dernières version de chrome et safari oui, (transitions css, boutons arrondis sur certains coins mais pas d'autres).

Bonjour,

Ton site est effectivement très beau, tes présentations également. Par contre, avec un viewport de 1024px un ascenseur horizontal apparait, il faudrait réduire la taille du site (ou la rendre partiellement fluide).

Pour le code :
* Ton code comporte énormément d'espaces (tab en début de ligne principalement), ces espaces prennent de la place (Google page speed annonce un gain de 50% en poids si tu minifie la page, c'est beaucoup). Même sans minifier la page, supprimer les espaces non nécessaires (tout en gardant ton indentation) ne ferait pas de mal.

* Le titre de ta page est bien trop long (et ce n'est pas le but de la balise title d'accueillir des mots clés) pour être pertinent : vas droit au but !

* La meta description ne sert pas non plus à mettre des mots clés. Son seul et unique intérêt (car non elle n'est pas utilisée pour le référencement des sites) est qu'elle offre une courte description de la page dans les résultats des moteurs de recherche. Son contenu doit donc être orienté pour le visiteur potentiel (une bonne description peut pencher un visiteur pour un site plutôt qu'un autre) et non pour le robot.

* Comme signalé par audrasjb la meta keywords ne sert à rien et peut être supprimée. Il en est de même pour la meta Author.

* Il est préférable de placer les scripts en base de page, de les externaliser et de les regrouper en aussi peu de fichiers que possible.

* À quoi sert ton <div class="pixel"></div> ? Je n'ai pas vu de styles associés à une classe pixel.

* Tu fais un peu de divite.

* Title, sur les liens, sert à apporter une information supplémentaire à l'intitulé du lien et nécessaire à la bonne navigation du visiteur. Un title qui répète ou paraphrase l'intitulé d'un lien ne sert strictement à rien (pire il apporte une surcouche d'information redondante et pouvant causer une confusion). Title, sur les liens, est, à 99% du temps, totalement inutile.

* Title, sur les images, est totalement inutile et redondant. À supprimer.

* &nbsp; ne doit pas être utilisé pour positionner les éléments, il existe la balise span et le CSS pour cela...

* Même si cela n'invalide pas ton code, il est préférable de ne pas oublier les guillemets pour les valeurs d'attributs.

* Veilles à bien respecter les règles de typographique, notamment sur la position des espaces dans la phrase. Il ne faut pas d'espace après une apostrophe.

Bonjour,

Laurie-Anne a écrit :


* Même si cela n'invalide pas ton code, il est préférable de ne pas oublier les guillemets pour les valeurs d'attributs.

Pourtant cela n'est plus obligatoire en html5 non ?

knarf a écrit :
Pourtant cela n'est plus obligatoire en html5 non ?

Oui, sauf s'il y a plusieurs classes. Pour éviter les erreurs, cela reste donc une bonne pratique (à mon sens bien sûr).

Ok!

Laurie-Anne a écrit :
Oui, sauf s'il y a plusieurs classes. Pour éviter les erreurs, cela reste donc une bonne pratique (à mon sens bien sûr).

Au mien aussi !

Hello,

knarf a écrit :
Pourtant cela n'est plus obligatoire en html5 non ?

Ce n'est pas obligatoire dans les versions précédentes de HTML non plus.

Merci beaucoup laure-marie d' avoir pris le temps, je vais me pencher sur tout ça.

je viens aussi d' installer google page speed ^^,

pour la classe pixel, c' est un résidu qu 'il faut que j' enlève, c' était pour la ligne horizontale, finalement stylé sur l' élément nav.

oulà laurie-anne plutôt, je suis fatigué moi ^^, (par contre on peut pas réédité ses messages !? donc double post)

édit : je viens de comprendre, on n' est pas loggué si on laisse un message directement, du coup je pouvais pas voir le bouton éditer désolé pour le double post.

sinon, ok pour les guillemets, toutes bonnes habitudes sont bonnes à prendre !

ces vrai que mes title de page sont un peu longues, mais d' après ce que j' ai vu, il fallait pas que ça dépasse 100 caractère, et c' était bien pris en compte pour le référencement, du coup je sais pas trop quoi faire.

j 'utilise cet outil pour voir si mon titre est bon en longueur :

http://www.outiref.com/

peut-être réduire à 70 caractère comme indiqué ici :

http://www.webrankinfo.com/dossiers/debutants/balise-title

Car, je veux bien pas trop abusé des balises, mais j' ai l' impression que les sites les mieux référencés n' hésitent pas à le faire... quel est la bonne méthode ? être bien clean avoir pile 70 caractères au risque de passer derrière, ou alors ce n 'est qu 'un mythe, 4 - 5 mots bien choisi suffisent ?

je vais retourner faire des recherches sur le référencement, car je m' y perds un peu
Modifié par legaia (12 Aug 2010 - 15:03)

Quand on débute en référencement, le mieux est de ne pas trop s'en préocuper et de se concentrer sur le bien être de l'utilisateur.

Pour ton titre, il est préférable d'adopter le schéma "[titre de la page] - [Nom du site]" plutôt que "[Nom du site] - [Mots clés]".

très bien, merci beaucoup pour tes conseils Laurie-Anne, je vais bien étudier tout ça et optimiser au mieux.

@Julien

Oui tout à fait.

Hello

Je vais rajouter mon "petit grain de sel" de chieuse : jolie site, tout polissé, jolies finitions, du coup pour moi il manque un truc, le favicon !!

Bah oui c'est dommage d'avoir un site sympa et d'avoir l'horrible icône de page toute grise dans la bar de navigateur

Sinon je pense que de page d'erreur 404 pourrait être améliorée également. Bon c'est déjà pas mal d'en avoir une, mais perso je me sens un peu agressée par le gros " page introuvable!" en CAPLOCKS: svp monsieur ne criez pas sur moi j'ai rien fait j'ai juste tapé un truc faux dans l'url :'( Bon j'abuse un peu, mais je suis sure qu'il y a moyen de la rendre plus "userfriendly", par exemple en mettant un message plus sympa du style " désolé il semblerait que la page que vous avez demandé n'existe pas", puis en proposant des alternatives à l'utilisateur. Ce qui se fait souvent :
- des "autres articles" qui pourraient l'intéresser (dans le cas de blog)
- un formulaire de recherche (ou un lien vers le formulaire)
- un lien vers la page d'accueil par exemple
- un lien ou un formulaire pour contacter le webmaster et le prévenir de l'erreur
- si quelqu'un veut compléter la liste...
Voici un article (en anglais mais pleins d'images) de smashing sur quelques pages 404 sympa tu y trouveras pleins d'exemples je pense et d'inspiration. J'avoue que je suis toujours autant fan du "whoops looks like we lost one" de Frye/Wiles.
Je mentionne la page 404 car je pense vraiment que dans le cas de ton site, il est possible de faire quelque chose de vraiment sympa, voir fun pour l'utilisateur.

Merci beaucoup saiko sama pour ton grain de sel

Tu as raison, je vais rajouter un favicon et améliorer la page d' erreur 404.

Merci pour le lien de smashing aussi, il y a de bonnes idées !

Alors, promis, je vais m' appliquer à améliorer tout ça .
Modifié par legaia (15 Aug 2010 - 13:46)