[Amateur] Site de Peter Mouse

Bonjour à tous,

À propos de moi

Appelez-moi Hopper.
Je connais le HTML5 et CSS3. Je comptes bientôt apprendre le PHP.
Enfin, après avoir maîtrisé les deux premiers langages susmentionnés !

Ma demande
J'ai codé pour le fun cette page (index.html), le contenu du site étant à 100% faux.

J'aimerais avoir des retours sur le design et le code du site, au cas où j'aurais commis une erreur. (Le site est censé s'adapter à toutes les configurations d'écran.)
Le lien de la page est : http://hopper.alwaysdata.net/

http://i.imgur.com/klxryl.jpg

Précédemment
Auparavant, j'ai crée deux pages pour un site (encore faux et encore pour le fun).
Le sujet est disponible à ce lien : http://forum.alsacreations.com/topic-18-60009-1-Amateur-Project-Fortune.html.
http://i.imgur.com/WHbLvl.jpg

Merci pour votre aide,
Modifié par hopper (29 Feb 2012 - 21:40)

Bonjour,

Petite réaction, rapido : ton anglais n'est vraiment pas bon. Même pour un site "just for fun", il faudrait faire l'effort de te relire et de demander à quelqu'un (anglais natif de préférence) de te relire.

Laurie-Anne a écrit :
Petite réaction, rapido : ton anglais n'est vraiment pas bon. Même pour un site "just for fun", il faudrait faire l'effort de te relire et de demander à quelqu'un (anglais natif de préférence) de te relire.

Pourtant, je ne vois pas d'erreurs orthographiques. Mais, sans doute, y-a-t-il des redondances et quelques mal-dits. Je le conçois, puisque je n'ai jamais connu d'histoire d'amour avec la langue de Shakespeare ; merci pour la remarque, je vais voir avec un pote ou un cousin.
Modifié par hopper (29 Feb 2012 - 21:40)

Franchement, bravo !

À part un petit excès de h1 (mais bon je chipote) et un reset universel (pas top, mais sur un petit projet ça passe), c'est de très bonne facture (surtout si ce n'est pas ton métier).

Je te donnerai juste un petit exercice de style : reproduire la même chose mais en partant de la résolution mobile ("mobile first" comme on dit) pour aller vers le desktop (avec des min-width au lieu de max-width).
Seul inconvénient : il faudra passer par des astuces en JS (respond.js pour ne citer que lui) pour que ça passe sous IE < 9.

Kaelig a écrit :
Franchement, bravo !

À part un petit excès de h1 (mais bon je chipote) et un reset universel (pas top, mais sur un petit projet ça passe), c'est de très bonne facture (surtout si ce n'est pas ton métier).

Je te donnerai juste un petit exercice de style : reproduire la même chose mais en partant de la résolution mobile (&quot;mobile first&quot; comme on dit) pour aller vers le desktop (avec des min-width au lieu de max-width).
Seul inconvénient : il faudra passer par des astuces en JS (respond.js pour ne citer que lui) pour que ça passe sous IE &lt; 9.

Non, tu as vu juste, ce n'est pas mon métier. Mais, c'est une passion que je cultive, depuis un petit peu de temps !

En retirant le reset universel, il y a des marges qui se forment toutes seules. Et même en spécifiant à body la valeur 0 pour padding et margin, ça ne marche pas. Je ne vois pas de solution.

Ça serait intéressant, je vais peut-être relever ce challenge. Un exemple de site qui a été développé de la sorte ? (Un peu d'inspiration ne fait pas de mal.)

Grand merci à toi !
Modifié par hopper (29 Feb 2012 - 21:57)

Alors il y a plusieurs approches pour faire un reset, perso je conseille celle d'Eric Meyer.
http://meyerweb.com/eric/tools/css/reset/

Tu peux aussi faire un tour vers Normalize.css de Nicolas Gallagher, une approche très intéressante bien que carrément différente.

Pour l'approche mobile first, ça se passe par là…
L'idée : http://stuffandnonsense.co.uk/projects/320andup/
Une application intéressante : http://137pillarshouse.com/

Courage !

Ce qu'il faut surtout éviter quand on fait un reset, c'est le outline:none; car sinon, quand on navigue au clavier, on n'a plus de repère pour localiser notre curseur.

Sinon, comme pour l'autre site, celle-ci passe parfaitement sur ma config avec couleurs personnalisées pour l'affichage des sites.

hopper a écrit :
Pourtant, je ne vois pas d'erreurs orthographiques. Mais, sans doute, y-a-t-il des redondances et quelques mal-dits.

Surtout des erreurs de grammaire, de conjugaison et un petit peu de traduction mot-à-mot.

a écrit :
I imagine the design of your website on paper. This makes, I send you the model.

Makes n'est ni le bon mot, ni la bonne conjugaison. Ce n'est pas le présent mais le participe passé (comme en français, d'ailleurs) qu'il faut utiliser, avec le bon mot : done.

a écrit :
It's not great?

Is it...

a écrit :
I am an ambitious person who likes the challenge.

Des défis il n'y en a pas qu'un, donc on oublie "the"

a écrit :
I love the cinema

Idem, tu ne parles pas d'un bâtiment spécifique où un projette des films.

a écrit :
Your website is compatible with the current and mobile browsers

the "current" quoi ? il est impossible d'être mobile et d'actualité ? il manque "desktop".



Pourquoi utiliser l'anglais si tu ne te sens pas à l'aise avec ?

Laurie-Anne a écrit :
Is it...

"Isn't it" non ?
Modifié par timtim (01 Mar 2012 - 12:35)

"is it not" est aussi correct, tout dépends du style que l'on veux donner (personnellement, je trouve que dans le contexte ça donne un meilleur rythme).

IshimaruChiaki a écrit :
Ce qu'il faut surtout éviter quand on fait un reset, c'est le outline:none; car sinon, quand on navigue au clavier, on n'a plus de repère pour localiser notre curseur.

Sinon, comme pour l'autre site, celle-ci passe parfaitement sur ma config avec couleurs personnalisées pour l'affichage des sites.

Je suis ravi de voir que ça marche chez toi.

Laurie-Anne a écrit :
Pourquoi utiliser l'anglais si tu ne te sens pas à l'aise avec ?

J'ai corrigé les erreurs que tu as relevées. Encore, une fois merci !

Pour te répondre, je ne vois pas où est le mal. Le contenu du site est faux et en plus, je voulais m'entraîner un petit peu. Donc, j'ai essayé de jouer avec la langue de Shakespeare, à l'image de Jean Dujardin.

Des critiques au niveau du design ?

-http://www.youtube.com/watch?v=Ik-RsDGPI5Y
Modifié par Laurie-Anne (02 Mar 2012 - 16:27)

Bonjour, niveau graphic design:

La typo utilisée est une typo condensée avec un petit oeil. Ce qu'il fait qu'elle est peut lisible pour du texte de contenu. (pour les titres, ok). De plus, tu as dû mettre qu'une seule police, le gras étant visiblement un faux gras vraiment moche. Idem pour l'italique.

Niveau couleurs, tu utilises 5 couleurs de fond différentes, et qui ne se retrouvent nulle part ailleurs. Certaines se marient mal. Essaie de limiter. Par exemple la petite bande bleu ciel du haut attire l'oeil car elle jure un peu, ce qui est problématique car elle ne sert absolument à rien. La décoration, c'est comme croiser les flux, c'est mal .

Quant à la mise-en-page, j'ai quelques doutes, mais il faudrait pouvoir voir quelques pages pour voir comment cela tient la route avec des contenus différents.

Pour terminer, dire « mon contenu est fictif » critiquez la conception graphique, ça n'a pas vraiment de sens. Du moment que la création graphique sert à mettre en valeur le contenu difficile de parler vraiment sans contenu.

@Laurie-Anne et @timtim, pour vous départager je propose :
"It is great, isn't it?"


Sinon c'est peut-être amateur mais amateur éclairé quand même, belle réalisation.
Evidemment tout n'est pas parfait, m'enfin cela reste du bon boulot.

Suggestions et critiques :

- c'est le sempiternel débat mais à quoi sert de dire à l'utilisateur d'IE6 qu'il doit changer de navigateur, à 90% les mecs ont juste pas le choix

- l'anglais est incompréhensible, à la limite du contre-sens

- "References... coming soon", laisse tomber les teasings, cela marche sur les blogs à tutos ou les forums mais pas sur un site perso, je serais toi je laisserais vide.

- Les illustrations sont pas mal choisies mais pas vraiment parlantes à l'image du courrier postal par avion, le rapprochement est pas évident avec la livraison d'un site

- le formulaire renvoie sur gmail, très agaçant d'avoir à renvoyer le message
Modifié par jmlapam (03 Mar 2012 - 01:02)

@kustolovic
C'est intéressant ce que tu dis. En ce qui concerne la typographie, je vais essayer d'utiliser la version de la police en gras et en italique. Mais, perso, je ne trouve pas la police moche.

Niveau couleurs, je me suis inspiré d'une palette de couleurs, dégoté sur Color Combinations. Je vais tenir de tes remarques.

Mon contenu est fictif, au fond, mais, il a été imaginé normalement. Enfin, j'espère que tu comprends mes paroles. Merci !

@jmlapam
- Dire à l'utilisateur d'IE6 qu'il doit changer de navigateur... ça sert juste à prévenir l'utilisateur que le site n'est pas optimisé pour son navigateur, prévention, prévention !

- L'anglais incompréhensible, à la limite du contre-sens ? Tu pourrais détailler, parce que je ne vois rien. Normal ?

- "References... coming soon" ! Devrais-je te rappeler que le contenu du site est faux ? C'est juste pour remplir, sinon le design paraît un peu vide.

- Pour les illustrations, je recherche un côté vintage, vieux.

- Je sais, pour le formulaire, j'apprends PHP, ça va vite venir.

hopper a écrit :


@jmlapam
- Dire à l'utilisateur d'IE6 qu'il doit changer de navigateur... ça sert juste à prévenir l'utilisateur que le site n'est pas optimisé pour son navigateur, prévention, prévention !

- L'anglais incompréhensible, à la limite du contre-sens ? Tu pourrais détailler, parce que je ne vois rien. Normal ?

- &quot;References... coming soon&quot; ! Devrais-je te rappeler que le contenu du site est faux ? C'est juste pour remplir, sinon le design paraît un peu vide.

- Pour les illustrations, je recherche un côté vintage, vieux.

- Je sais, pour le formulaire, j'apprends PHP, ça va vite venir.

Salut, je crois que tu n'as pas compris, je suis d'accord avec toi sur le côté "avertissement"
cependant moi ce que je te dis c'est que la plupart des utilisateurs d'IE6 ne sont soit pas du tout dans ta cible, soit parfaitement au courant mais n'ont pas le choix, voire les deux.

- > oui ton anglais n'est vraiment pas bon et on t'a déjà signalé beaucoup d'erreurs. Mets-toi en relation avec un pote qui maîtrise, ce sera plus rapide.

- > Ok pour le fake, je t'indique juste "au cas où" que c'est pas une pratique super payante si tu dois faire ton site perso ou ton blog ou autre... tu fais tes modifs en local, puis tu upload pour changer tout.

-> les illustrations peuvent être vintage tout en étant mieux choisies.

Salut

Merci, tout le monde !
Si quelqu'un a d'autres critiques constructives, qu'il n'hésite pas.

'Lut, je te donne mon humble avis :

- globalement, pas assez de padding, ce qui est flagrant notamment au niveau des icônes sociales, qui touchent presque le bord de la fenêtre.

- la police est pas très belle et l'italique/gras sont pas authentiques, je suppose que t'as calé un font-style: italic juste comme ça ...

Et l'ensemble donne une impression assez étrange, je sais pas pourquoi ... peut-être aussi parce que c'est trop encombré.

hopper a écrit :
Merci, tout le monde !
Si quelqu'un a d'autres critiques constructives, qu'il n'hésite pas.

Ah j'adore, donc dernière fois que tu auras mon avis sur quoi que ce soit. J'aime bien prendre du temps comme cela pour détailler et que cela ne serve à rien...

Salut

@Stephanelam
Quelqu'un a déjà relevé le problème des polices. Je vais devoir changer ça. Le padding, mouais ! Et pourrais-tu m'éclairer un peu plus sur l'impression étrange ?

@jmlapam
N'est-ce pas extrémiste ?
Ce n'est pas parce que je n'ai pas répondu à ton message que je ne l'ai pas lu. Au contraire, il est très constructif. Et détrompe-toi, tes conseils vont servir à quelque chose. J'apprends le PHP et je compte faire bientôt une mise-à-jour.
Les points que tu as mentionné sont pertinents. Patience...
Allez, milles merci !