[Amateur] Graphiste, premier site

Bonjour à tous.
Je suis graphiste indépendant depuis 1 an et j'ai toujours aimé apprendre des choses.
Je me suis donc repenché sur le code (j'avais totalement perdu de vu le programme depuis le lycée, bcp de changements depuis le turbo pascal ).
J'ai fait en tout et pour tout 5 jours de formation intensive css html et tout le reste c'est de l'autodidacte. Merci bcp à tout le petit monde d'alsacréations d'ailleurs, sans vous je ne serais jamais arrivé si loin.
Je vous présente donc mon site.
Il est sorti ce matin, tout frais tout neuf. Pas terminé bien sûr mais il fallait que je le lance. C'est le printemps, les cerisiers sont en fleurs et je suis en résonance avec eux.
Le code est vraiment au plus simple et ne dépasse pas le css2 (je crois ). Mais je dis peut-être déjà des âneries. Je suis vraiment novice, je préviens.
Vous pouvez critiquer le fond comme la forme, c'est fait pour ça.
J'ai utilisé Firefox et Chrome pour les vérifications. Sur mon vieux pc (6 ans d'age) je n'ai que la version 8 d'IE et bien évidemment rien ne marche avec cette charrette à bœufs (pardon pour les amateurs de ce navigateur).

Ah oui, beaucoup de liens fonctionnent au survol et c'est mon vrai problème, ce site ne peut pas fonctionner avec les tablettes. Là j'aurai vraiment besoin de conseils car c'est toute ma mise en page qui est à remettre en question .

Merci d'avance.
Modifié par Lich (20 Mar 2014 - 20:54)

Oui tu a raison, c'est toute la mise en page qui est remise en question (mais quel @!/$*€ je fais )

Ton site bien, qu'il comporte quelques jolies illustration n'est pas du tout ergonomique, en effet il y a le problème de survole que tu as soulevé, mais aussi un problème de cohérence dans ta charte graphique et d'accessibilité dans la navigation, en plus d'un gros soucis de référencement.

Premièrement le menu, tu as mis en bas, ne comporte que des image de cerisier donc au premier coup d'oeil on ne pense pas que c'est un menu (réinventer la roue ce n'est pas être innovant ). En plus sa position le place sur mon écran (mais comme sur beaucoup d'autre j'ai une résolution assez standard) en dehors de ma fenêtre donc je suis obligé de scroller pour comprendre qu'il y a un menu.

Pour ce qui est de la cohérence de ta charte graphique, chacune des sections de ton site est différente dans le style ce qui demande à l'utilisateur d'apprendre sur chaque section une nouvelle manière de naviguer.

Pour le référencement (mais pas que), il n'y a aucun texte sur ton site donc les robots de google ne feront pas le boulot, mais tu perdra aussi les visiteurs qui en tombant sur ton site ne comprendront pas quelle est le but de celui ci.

Tu utilise des images extrémement lourde, bien que ton site ne soit pas finit il faut quand même que tu réduise leur poid.

Pour le survol, tu ne peux pas l'utiliser a tord et a travers, il faut que sans que l'utilisateur est quoique ce soit à faire sur ta page, le contenu essentiel s'affiche. L'animation du survol est quelque chose de trè intéressant autant visuellement que pour le contenu, mais il doit être utilisé pour enrichir l'information essentiel avec une infos suplémentaire comme dans le cas des tooltips.

Enfin, je pense que tu devrait revoir le design de ton site (et ici design ne veut pas seulement dire "déco" mais surtout interface utilisateur, ergonomie ...) car en l'état, ton site est peu utilisable. Pour cela tu devrait t'inspirer de ce qui as déjà était fait. L'inspiration tant qu'elle ne tourne pas au plagiat est un excellent moteur de création.

J'espère ne pas te démoraliser, mais comme tu l'as préciser, en 5 jours tu ne peux pas, aussi intensifs soient-ils, faire le tour du html, du css (et encore ces languages s'apprennent vite) mais surtout de la création web.

Merci thej8 pour la critique.

Aïe, c'est pas gagné apparemment.

Il va d'abord falloir que je fasse quelques recherches sur l'ergonomie, c'est un sujet assez flou pour moi pour le moment.

J'ai choisi une taille réduite pour l'ensemble (900x860), je pensais que le menu (auquel je vais rajouter un peu de texte) serait visible pour la plupart des écrans... Il faut croire que non.
Les images sont lourdes, sûrement. J'ai tous enregistré pour le web, mais en qualité élevée. Je pense que ça vient du fait que la page en charge une dizaine à chaque fois. À réduire donc, mais la qualité risque d'en prendre un coup. Jusqu'où peut-on descendre pour que ça reste acceptable dans sa visibilité ?

Beaucoup de choses à prendre en compte d'un seul coup.
Mais non, je ne me démoralise pas, je te rassure.

Au boulot.
Modifié par Lich (24 Mar 2014 - 10:10)

Je viens de tester à nouveau et le temps de chargement et redevenu acceptable, peut être un coup de mou de ton serveur ...

C'est déjà ça.
De mon côté j'ai refait mon index.
Le texte/image est présent dés le début (menu principal et sous menu), c'est pas plus laid et c'est plus explicite.
Modifié par Lich (25 Mar 2014 - 09:36)

C'est mieux au niveau de la comprhéension, mais met toi à la place de monsieur google. Monsieur google est un robot, il est pas très malin mais pourtant il est très fort en math. Il va donc arriver sur ta page et comme monsieur google n'est pas très malin il ne comprendra pas les images et ne réferencera pas on site

En gros il faut que ton site soit plus sémantique.

J'entends bien, et j'enregistre.
Les keywords ou la description en Meta Name ne sont donc pas suffisants.
Arrrrh

Lich a écrit :
Les keywords ou la description en Meta Name ne sont donc pas suffisants.
Arrrrh

Voir inutile dans le cas de la meta keyword : sujet sans cesse rabâché sur les forums...

Lich a écrit :
Aïe, c'est pas gagné apparemment.

Hélas non.

Pour commencer : en 2014, un doctype en html5 serait le bienvenu...

Salutation.
Modifié par Olivier C (24 Mar 2014 - 17:45)

Ok, merci Olivier.
Tu me conseilles donc de renommer le doctype de toutes mes pages.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">

Si j'ai bien compris ce tout que j'ai lu ce matin (vive le café).

D'un autre côté, je planche actuellement sur un menu déroulant en index (exclusivement en texte ) qui décrira le plan du site.

Nan, garder les meta dans ton header va te permettre un meilleur référencement mais ce que veut dire Olivier (si il me permet de l'appeler par son prénom) c'est que ce n'est qu'un paramêtre de l'équation, et il ne suffisent pas. Il faut donc coupler cela à d'autre paramêtre qui sont un texte avec de nombreux mots clé directement dans ta page (entre les <body></body>) mais aussi une page sémantiquement correcte avec un ratio texte/image important, une vitesse d'affichage elevé ....

Pour comprendre mieux cela je t'invite à faire un tour sur les blogs SEO et référencement qui pullulent sur la toile.

Mais avant s'attarder vraiment sur le référencement il faut reconcevoir ton site,( en intégrant tout de même une petite pensé pour ton référencement).

Bonjour,
petit message en coupe-vent,

Je suis fan du favicon et des curseurs qui changent au survol du menu

C'est très épuré, joli et original.

Par contre, si tu désires un jour rendre compatible ton site sur les mobiles, il sera probablement nécessaire de faire une version mobile à côté, car il y a bon nombre de visuels et je ne pense pas que l'expérience utilisateur serait probante en le rendant responsive (à moins d'abuser des media queries, ce qui n'est en soi pas réellement judicieux dans ce cas précis).

Concernant ton Doctype, il me paraît un peu vide, tu pourrais rajouter des <meta> comme author, description et tags, qui permettent d'améliorer un peu le référencement de ton site mais surtout l'apparence de celui-ci dans les moteurs de recherche (titre, sous-titre, liens raccourcis) ,notamment Google.
Il n'y a pas de viewport, ce qui est un point déterminant pour les mobiles, puis un HTML Shiv ne fait pas de mal non plus, mais ça c'est un choix personnel.

Bonne continuation

Bon, c'est reparti.

J'ai complété mon doctype (title description et tags).

J'ai rajouté un menu déroulant comprenant le plan de mon site. Bien galère pour un novice .
Je ne suis pas encore sûr de moi sur ce coup là... mais je pense que ça aide en rajoutant pas mal de texte descriptif dans mon body.
J'irai jeter un œil sur les blogs SEO bientôt.

ohweb, merci bien pour le compliment .
En ce qui concerne le responsive et la version mobile, si je commence à me lancer là dedans, je peux penser à changer de métier. Je n'y connais vraiment rien et n'ai pas assez de temps pour m'y mettre malheureusement.

En tout cas, merci encore tout le monde pour les critiques et conseils, ça motive drôlement pour continuer.

Bonjour,

Tes efforts commencent déjà à payer


Comme tu le vois la description a déjà été référencée,
C'est un peu mieux pour le référencement de ta page d'accueil sur google, mais pour référencer un site il faut que chaque page soit référencée ! Du moins, pour améliorer sa visibilité

En effet si tu dois modifier chaque page à la main en html, cela peut paraître laborieux mais je pense que le jeu en vaut la chandelle.

Une petite précision sur les balises <meta>, elles doivent être renseignées en minuscule, par souci de cohérence et "d'élégance du code" (les balises en majuscules datent de HTML4, voire HTML3), mais cela reste purement conventionnel, chacun fait comme il veut.

a écrit :
En ce qui concerne le responsive et la version mobile, si je commence à me lancer là dedans, je peux penser à changer de métier. Je n'y connais vraiment rien et n'ai pas assez de temps pour m'y mettre malheureusement.
En tout cas, merci encore tout le monde pour les critiques et conseils, ça motive drôlement pour continuer.

Sans forcément t'atteler à l'intégration en responsive, tu peux toutefois te renseigner sur la notion de viewport qui n'est en soi pas compliqué et te permettrait d'uniformiser facilement et rapidement l'aspect de ton site par défaut sur tous les mobiles confondus en une simple balise <meta>...

http://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html

Tous les sites en HTML5 dignes de cette appellation devraient en posséder un.

En plus de choisir la taille du site en largeur par défaut, ils te permettent d'activer ou désactiver le zoom sur les mobiles et d'autres petites astuces sympathiques.

Bonjour,

Je n'ai pas tout lu, mais la première réaction que j'ai en voyant ce site : trop d'effets tue l'effet.

J'aime l'idée de l'herbier, avec les 4 fleurs, il fallait capitaliser dessus sans ajouter d'éléments parasites. Comme ces grosses images qui dépassent au survol, ces arbres en bas qui luttent avec la composition florale, la boule verte en plastique dans un style incompatible, le "tous droits…" aussi discret qu'une mouche dans la soupe, les noms (photo, maquette… ) moyennement intégrés.
Je n'aime pas la photo de bourgeons dans un sens inversé sur un fond carré, c'est incompatible. Le dessin en hover en haut à droite est plus en accord mais pourquoi si gros ?

Le dessin "plan du site" est dans un style encore différent. En hover, c'est trop compliqué. Et au moindre décalage de souris, on perd tout le menu.

La mention « Graphisme, à venir… » fait désordre pour un portfolio. Quitte à y coller des maquettes, la partie graphisme ne peut pas rester vide.

Je serais resté sur l'idée de l'herbier qui dès le départ place un univers graphique qui n'a pas été exploité correctement. Au survol, pas de grosses photos mal composées mais une représentation différente de la fleur (découpe, peinture, photo, shéma… ) qui se calque sur le dessin initial. Ou bien juste un texte au survol, dans une couleur neutre (gris, brun, encre… ) identique pour tout.

Une seule police de caractère pour tout, toujours dans un style herbier. Là on a plusieurs polices dans des couleurs inutiles et des styles "Microsoft Word". Dommage, il existe de très belles polices dans le style "plume/herbier" qui bien utilisées peuvent d'avérer très payantes, même pour mettre en valeur des travaux modernes.

Quand je clique sur maquette, la page est assez jolie, mais là encore on sort du sujet, avec des dessins kitsch/baroques (la tête de mort… ), la dentelle… Là encore ça manque d'unité visuelle. Si vous placez un herbier sur la home, tenez-vous en à ça. Si vous vouliez indiquer un univers plus "fourre tout" il fallait l'installer dès la page d'accueil, qu'on ait pas l'impression de passer sur un autre site en changeant de page, ou que l'unité graphique du site n'est pas maîtrisée.

Le plus simple est de faire des planches photoshop (templates) de chaque rubrique en essayant de donner la même cohésion à l'ensemble dès le départ, à retoucher l'ensemble jusqu'à ce que cela fonctionne bien. Et ensuite seulement passer à l'intégration.
Là il est évident que vous avez mis la charrue avant les bœufs, erreur classique. Du coup vous commencez sur un style pour la page d'accueil, vous ne l'exploitez pas à fond et y apportez des éléments parasites, pour au final partir sur quelque chose d'autre dans les autres pages, sans véritable cohésion d'ensemble.

Plutôt que de bidouiller la bête, prendre un crayon et du papier, et dessiner tout le site, le redessiner jusqu'à ce que cela fonctionne.

Voilà pour moi. Ces quelques conseils pour vous aider à recentrer tout ça. Car là si l'idée de départ est intéressante, le principal souci est de rester sur cette idée, de la faire vivre, de la développer. Plutôt que de vous éparpiller au petit bonheur la chance, et de vous laisser balader par votre PC.


Edit : je déteste le favicon qui n'a rien à voir avec le site. Le style plexiglass, ça a été enterré avec iOS 6.
Modifié par spongebrain (28 Mar 2014 - 14:55)

Entièrement d'accord pour le logo-favicon. Changé depuis, juste pas mis à jour à l'époque sur le site.
Pour la police c'est un peu compliqué vu le style des polices universelles du web. Il me faut faire du texte-image, ça me bloque au niveau du référencement... Héberger une police nécessiterait quelques connaissances en javascript ce qui n'est pas encore mon cas. J'y travaille.
Curieux de voir ton propre site en tout cas spongebrain.
Modifié par Lich (03 Apr 2014 - 18:26)

https://www.google.com/fonts
Il n'y a pas tout, mais ça peut servir. Et pas une ligne de javascript.
Ensuite, vous pouvez reprendre les polices en image ou les afficher directement en ligne, c'est à voir en fonction de votre maquette.

Le gros de ma critique ne porte pas en priorité sur la police de caractère, mais sur le fait que vous n'ayez pas exploité à fond le thème que vous avez choisi et sur le fait que vous vous dispersez en partant dans des axes différents. Une composition en herbier c'est un choix assez radical, si vous y ajouter des petits arbres et des images mal coordonnées au survol, ça casse l'idée.

Le top aurait été d'avoir des images au survol qui se calquent sur l'original, et une maquette très dépouillée façon herbier. Pas besoin de plus.

Pour mon site perso, bas j'ai bien un portfolio, mais il est tellement classique avec ses 20 lignes de HTML que vous seriez déçu. Pour le reste je posterai quand je le jugerai utile. Et j'espère bien que j'aurai des retours constructifs. Positifs ou négatifs.
Modifié par spongebrain (03 Apr 2014 - 18:55)