Je me suis fait un petit site web personnel avec formulaire de contact ici. Vous pourriez me faire part de vos remarques sur le design (grandement basé sur les standards bootstrap).
La couleur principale est le bleu car il me semble qu'elle est très liée à l'informatique.
Je vais pinailler parce que tu n'as pas de contenu !
Tout me semble un peu gros, on a envie de reculer.
En suite, le responsive n'est pas bien géré : tu nous mets un menu hamburger alors qu'il y a largement la place de laisser les liens, et il y a une étape où tes colonnes sont bien trop étroites, ce qui crée de vrais textes à trous, et globalement le redimensionnement est haché alors que tu aurais très bien pu utiliser des valeurs en pourcentages et/ou calc() pour avoir des colonnes qui changent de largeur harmonieusement, avec un min-width pour qu'elles passent automatiquement à la ligne quand la fenêtre est trop petite. En gros, aucune media query n'était nécessaire pour faire la même chose en mieux. Même remarque sur le formulaire évidemment. Les gens prennent de très mauvaises habitudes avec les media queries. C'est important de maîtriser CSS2 : c'est pas devenu has-been, c'est toujours aussi essentiel.
Enfin, la hauteur des parties est bizarre : le premier slide s'adapte correctement à la hauteur de la fenêtre, ça c'est cool, mais le slide formulaire est trop petit. Du coup c'est pas joli, on voit un bout du slide du dessus. C'est normal qu'un slide soit plus haut que l'écran quand il a du contenu qui dépasse, mais ce n'est pas normal qu'il soit plus petit : ça détruit le concept de ce genre de mise en page et on se sent "à l'étroit".
Petit bonus : tu pourrais avoir une navigation un peu plus animée que de simples ancres et ajouter un bouton ou un truc sur le premier slide invitant l'utilisateur à passer au slide suivant. Parce qu'il y a ton menu en haut mais un site sur lequel la page d'accueil est vide et pour lequel il faut cliquer sur des liens pour avoir ne serait-ce qu'une seule information (je suis où ? c'est quoi ce site ?) - encore plus si les liens sont planqués dans un menu hamburger - c'est pas un site, c'est un puzzle : il faut que tu partes du principe que l'utilisateur n'a pas envie d'être sur ton site, il préfèrerait être sur Facebook, et tu dois tout mettre en oeuvre pour capter son attention, créer de l'intérêt et surtout faire en sorte que la navigation coule toute seule.
Donc si je résume on a envie de reculer, on se sent à l'étroit et on se demande quoi faire Je le répète, c'est du pinaillage, mais le diable est dans le détail et quand le site est simple il doit être d'autant plus irréprochable.
Bon, et l'anglais est un peu maladroit
- Edité par tabouretBleu 17 juillet 2017 à 15:56:26
Ahah merci pour ce retour. Pour les fautes et/ou mauvaises formulations je suis preneur.
Je vais commencer à travailler sur ce dont tu m'as parlé.
En effet, Bootstrap considère qu'à partir d'une certaine largeur on appartient aux médias tablettes et smartphone. Je pense qu'il passe automatiquement en menu hamburger sans vérifier s'il y a la place d'afficher les liens ;
Qu'entends-tu par colonnes trop étroites et textes à trous ? Je vois pas trop de quoi il s'agit :/
Pour CSS 2 je sais mais j'ai pas encore vraiment mis de CSS... Juste des classes bootstrap (je ferai ça proprement plus tard) ;
Tu penses que je devrais faire un height: 100vh; pour chaque `ligne` ?
Enfin tu suggères que j'intègre une navigation style `diaporama` avec des petites transitions afin d'intéresser l'utilisateur ou du moins rendre sa navigation fluide ?
Si t'as aussi des suggestions de contenu je prends car à part un portfolio une fois que j'aurais fait une ou deux choses j'ai pas trop d'idées :/
EDIT : Je me suis un peu perdu mais je peux pas reset le site. Je le fais demain donc (j'ai pas de vrai PC sous la main donc je modifie tout via SSH :/)
- Edité par Alexandre Gérault 17 juillet 2017 à 18:59:57
plutôt un min-height, de façon à ce que les slides plus longs débordent.
Je n'irais pas jusqu'au diaporama, il faut qu'il garde l'impression d'avoir la main, mais ne serait-ce qu'ajouter une flèche vers le bas au moins sur la "page d'accueil" pour qu'il comprenne que ça se passe en bas, et sur laquelle il peut cliquer pour faire dérouler.
Il faut que l'utilisateur comprenne la page. Il faut qu'il comprenne qu'il a une barre de défilement et des boutons, que ça fait la même chose et que c'est au choix.
Concernant les colonnes, je parle de ça :
C'est pas à moi de suggérer le contenu. C'est ton portfolio, fais ce qui te plaît. Un CV ou au moins un résumé des compétences ça peut pas faire de mal.
Bon après je vais pas te relire et je ne suis pas bilingue, mais ça ne se dit pas "even having a lot of difficulties". On dirait "even though I experience a lot of difficulties" ou "despite my difficulties" par exemple. Tu as tendance à traduire mot pour mot, or la grammaire et les idiomes ne sont pas les mêmes entre l'anglais et le français.
- Edité par tabouretBleu 17 juillet 2017 à 19:52:15
Ah oui en effet, sur ta capture d'écran on voit bien les trous. J'ai pas du prendre le temps de les trouver avec la vue adaptative de Firefox
EDIT : Ah oui, effectivement j'ai pas relevé qu'elles étaient trop étroites... Autant pour moi je vais faire le nécessaire pour un min-width
Sinon je suis d'accord pour l'anglais et je pense que je vais choisir despite my difficulties parce que c'est le seul que je connaisse
Je pense qu'en effet un espace compétence/CV peut être intéressant, merci.
Par contre, je reviens sur
tabouretBleu a écrit:
Enfin, la hauteur des parties est bizarre : le premier slide s'adapte correctement à la hauteur de la fenêtre, ça c'est cool, mais le slide formulaire est trop petit. Du coup c'est pas joli, on voit un bout du slide du dessus. C'est normal qu'un slide soit plus haut que l'écran quand il a du contenu qui dépasse, mais ce n'est pas normal qu'il soit plus petit : ça détruit le concept de ce genre de mise en page et on se sent "à l'étroit".
Donc, si je réorganise mon code de tel sorte que chaque slide possède l'attribut class="slide" je devrai faire un :
.slide {
min-height: 100vh;
}
Seulement, le slide avec le formulaire est vide du coup il faudrait que je trouve quelque chose pour le remplir...
Merci beaucoup pour tes remarques, ça m'aide beaucoup.
EDIT 2 : J'utilise pour le moment beaucoup Bootstrap mais je me demande si, pour une version terminée, il ne vaut pas mieux avoir un fichier CSS ce qui serait plus léger et qui ne contiendrait donc que les règles nécessaires . De plus, le code HTML serait plus propre non ? (Enfin j'y suis pas encore mais ce sont des questions que je commence à me poser en voyant mon code )
- Edité par Alexandre Gérault 18 juillet 2017 à 15:13:35
Me voici de retour. J'ai fait quelques changement et je pense que c'est un peu mieux. J'ai remarqué que j'avais oublié de faire un menu . Ça arrive ne t'inquiète pas.
Donc si je résume :
Texte généralement moins GROS ;
Meilleur design responsive pour les colonnes ;
Code plus propre (adieu Bootstrap) ;
Footer chaotique pour le moment
Voila, je pense avoir bien résumé. J'attends tes retours.
Ah et voici ce que j'ai pas encore fait :
Ajouter du contenu ;
Le système pour une meilleure navigation (ce que j'avais fait était moche) ;
- Edité par Alexandre Gérault 20 juillet 2017 à 15:22:25
La gouttière entre tes colonnes est trop petite quand la largeur de la page est réduite. Il n'y a aucune raison pour qu'elle soit définie en pourcentage. Tu devrais lui donner une valeur fixe, et dans la largeur de tes colonnes, utiliser calc. Par exemple calc(33.33% - 30px) avec un margin: 0px 15px; partout pour que ce soit centré même quand une colonne va à la ligne. Bon par contre ce serait plus joli en utilisant flexbox (la colonne à la ligne prendrait toute la largeur disponible). Tu peux utiliser une media query pour ça si tu ne veux pas utiliser flexbox (c'est sur le chemin qu'il ne faut pas faire 50 media queries)
J'utiliserais aussi hyphens: auto; (en pensant à préciser la langue dans l'attribut lang de la page). Ça ne fonctionne pas partout mais ça fera du bien à ton texte là où ça marchera.
- Edité par tabouretBleu 20 juillet 2017 à 19:29:49
Une colonne qui va à la ligne en prenant 1/3 de l'espace c'est bizarre. Ce serait plus propre si elle s'étendait sur toute la largeur, ou si tu supprimais totalement l'affichage en colonnes quand la fenêtre est trop petite.
On s'en fout que ce soit sur une tablette ou autre, il faut que ton site soit beau quelle que soit la dimension de la fenêtre. C'est comme ça qu'on faisait avant, je comprends pas pourquoi depuis qu'on a plus de fonctionnalités CSS on se permet d'avoir des dimensions moches.
Eh bien avant en fait je ne faisais pas de responsive
Je vais relire la doc car j'ai en effet du passer à côté de quelque chose.
Sinon oui on s'en fout que ce soit sur tablette c'était juste à titre informatif...
EDIT : Je savais pas qu'il y avait une page sur Flexbox sur le cours d'OC (je l'ai pas lu depuis je sais pas combien d'année...)
EDIT 2 : Oui je viens de comprendre d'où vient mon erreur : j'attribue une valeur au width des enfants du bloc flex... Ce qui a pour effet de l'empêcher de prendre toute la largeur une fois à la ligne. De plus, les deux qui restent sur la même ligne ne prennent donc que 33.33% chacun au lieu de 50% (sans compter marges intérieures/extérieures et box-sizing etc). Je dois donc trouver comment leur allouer dynamiquement la largeur disponible. Je te tiens au courant
- Edité par Alexandre Gérault 21 juillet 2017 à 14:03:29
Je l'oublie toujours la doc, c'est une système un peu complexe, il faut le dire, et je ne savais pas non-plus qu'il y avait un cours sur OC. Tu as bien compris pour le width, tu ne bénéficies pas de flex ici en fait.
La fonctionnalité est bien mais tes gouttières et des marges sont mal proportionnées. C'est vrai pour le titre Who I am aussi d'ailleurs. Il y a plus d'expace après qu'avant alors que logiquement le texte qui suit est associé au titre alors que le titre n'est pas associé au slide précédent. Même erreur à la fin du slide.
Tu as toujours un problème de justification sur les textes à la limite. Ça aiderait beaucoup le hyphens: auto;
Les blancs c'est aussi important que les pleins dans une mise en pages
Tu es obligé de plus ou moins centrer le contenu par rapport à une largeur maximum car quelqu'un qui a un écran immense n'a pas envie d'avoir un texte qui s'écoule sur 10km, maintenant, tu pourrais décider de complètement changer la mise en pages à partir d'une certaine largeur (tout mettre à l'horizontal par exemple). Il n'y a pas de limite.
Il y a plus d'expace après qu'avant alors que logiquement le texte qui suit est associé au titre alors que le titre n'est pas associé au slide précédent. Même erreur à la fin du slide.
Logiquement je devrai donc mettre une marge avant plus importante qu'une marge après ?
Pour le hyphens je viens de lire la doc et effectivement la valeur auto semble être la plus simple.
tabouretBleu a écrit:
Tu es obligé de plus ou moins centrer le contenu par rapport à une largeur maximum car quelqu'un qui a un écran immense n'a pas envie d'avoir un texte qui s'écoule sur 10km, maintenant, tu pourrais décider de complètement changer la mise en pages à partir d'une certaine largeur (tout mettre à l'horizontal par exemple). Il n'y a pas de limite.
Il faut que les éléments qui ont un rapport de sens ou de hiérarchie plus proche soient aussi plus proches géométriquement. C'est très intuitif. On fait des paquets composés de paquets plus petits eux-même composés de paquets, etc. comme des amas de galaxies, galaxies, systèmes solaires, systèmes planétaires, etc.
Je reviens après un moment d'absence. Je travaillais (et c'est pas fini) sur le design d'un site qui sera cette fois plus orienté pro (présentation de mes capacités de développeur, quels services je propose etc).
Du coup, je me suis dit que je devrai peut-être retravaillé celui-ci avec un système de grille comme je l'avais déjà fait auparavant.
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Blog - GitHub
Blog - GitHub
Blog - GitHub
Blog - GitHub
Blog - GitHub
Blog - GitHub
Blog - GitHub
Blog - GitHub
Blog - GitHub