[Amateur] http://orangedrink.ch/index.html

Bonjour à toutes et tous

Je pense arriver à la fin du développement de ce site que j'ai commencé il y a déjà un bon moment.

Il y a encore 2-3 petites choses à revoir, mais je voulais déjà savoir si j'avais bien bossé ou pas

http://orangedrink.ch/index.html

Au tout début, j'avais utilisé des float, mais cette fois, j'ai plutôt opté pour une mise en page en tableau.

Je sais que IE6 et IE7 ne prennent pas en compte ce procédé, mais je pense que les visiteurs utilisant ces navigateurs sont peu nombreux ( en regardant les logs d'un autre site que j'ai réalisé ).

En ce qui concerne l'affichage sur mobile, en ayant essayé sur un iphone 3 et un samsung ( je ne sais plus le type ), il me semble que cela s'affiche plutôt correctement, je n'ai donc pas opté pour un design pour mobile ou plus particulièrement en responsive design.

Pour ce qui est du code pour la page contact, j'utilise des sessions, à voir ici : http://forum.alsacreations.com/topic-20-61107-1.html

Voilà, je pense n'avoir rien oublié de préciser, je suis donc prêt à la critique

Je vous souhaite une excellente journée.

Marc
Modifié par marc.suisse (10 Apr 2012 - 11:22)

C'est un site très agréable, je trouve.

Le code est sérieux... mais pourquoi ne pas utiliser les possibilités de votre HTML5 en termes de balisage ? Ça éviterait les <div id="header">, <div id="corps">, <div id="footer">…

Salut, merci pour ta réponse

Eh bien, j'y avais songé, mais je ne rappelle plus la raison pour laquelle je n'ai pas opté pour cette possibilité.

Mais je me demande si cela n'était pas pour une question de compatibilité, je vais relire le livre de Raffael pour m'en assurer car il stipule quelque chose à la question de savoir si on peut utiliser ou pas ces balises.

Salut !

Joli ton site

Petites remarques :

- Le fond d'écran pique un peu les yeux quand on scroll, pourquoi pas le rendre fixe pour que juste le contenu défile ?

- Petit bug sur le formulaire de contact (j'ai le même ) :
si on scroll quand on a le message "Veuillez compléter ce champ", il ne s'affiche plus au même endroit.

- Perso je mettrais les scripts à la fin du code

- Comme dit avant, utiliser les balises HTML5

Une idée :

- Une petite page pour les erreurs 404 et 405 ?
Modifié par YA-Production (11 Apr 2012 - 16:17)

Salut, merci beaucoup pour tes conseils

Alors le fond d'écran fait un peu polémique autour de moi, plusieurs personnes ne le trouvent pas forcément adapté..

Je vais regarder quoi faire, mais je pensais reproduire grossièrement la peau d'une orange.

Pour le bug du formulaire, oui je sais, mais je pense plutôt qu'il s'agit d'un bug de firefox, je vais essayer avec chrome.

Pour les scripts, je pense que tu parles du javascript, il s'agit du code pour google analytics et ils disent de le mettre juste avant la balise de fermeture du head.

Enfin si c'est bien de cela que tu parles.. ?

Pour HTML5, je vais encore voir.

Pour finir, les erreurs 404 et 405, comme il ne s'agit pas d'un site dynamique à proprement dit, il va plutôt rester statique, je ne suis pas sûr que ce soit nécessaire, mais je vais me renseigner.

Je te remercie en tout cas ,c'est sympa de ta part

Bonsoir à toutes et tous

Personne ne m'a vraiment parlé du code en lui-même, avez-vous des critiques à faire à son sujet ?
Modifié par marc.suisse (12 Apr 2012 - 19:16)

Salut, ton site est sympa.

Quelques trucs en vrac :

- le fond est bien mais surement moins piquant en fixe comme dit dans un topic précédent,
- le menu n'est pas vraiment centré, perso j'aurais plutôt utilisé inline-block que float (subjectif),
- je trouve les <input> du formulaire un peu petit, ça mérite un width aussi long que le <textarea> et un padding pour aérer tout ça.

Côté code ça m'a l'air assez propre, il vrai que les balises HTML5 seraient les bienvenues vu le doctype.
Tu découpes tes déclarations background en CSS, tu peux les écrire en raccourci.

Sympa l'utilisation de table-cell pour mise en page générale

Ca passe au validateur HTML et CSS, j'ai testé : IE8 et IE9, Safari win, Chrome, Opera, FF11 et FF3.5 affichage niquel.

Peut -être des fixes pour IE < 8

Salut, je te remercie pour ta critique

Pour le background global, je vais regarder effectivement pour le mettre en fixe, mais on me conseille également de mettre du blanc à la place du noir pour les ombres de de la texture.

Pour le menu, je vais regarder ainsi que pour les inputs.

a écrit :
Tu découpes tes déclarations background en CSS, tu peux les écrire en raccourci.

Là, je n'ai pas bien saisi...

a écrit :
Peut -être des fixes pour IE < 8 cligne

Oui, je vais quand même essayer de trouver un moyen pour que l'affichage se fasse plus ou moins correctement sur IE6 et 7 .

Encore merci pour ton aide

a écrit :
Là, je n'ai pas bien saisi...

Tu peux déclarer tes backgrounds de façon raccourci :

exemple au lieu de :

background-image: url("images/fond.png");
background-repeat: repeat;
background-position: top left;

Tu peux faire :

background: url("images/fond.png") repeat top left;

En fait dans ton cas je pense que tu peux simplement enlever :

background-repeat: repeat;

Je pense que c'est le comportement par défaut donc inutile de le préciser.
Modifié par G3ronim0 (13 Apr 2012 - 14:48)

Hello!


Je pense moi aussi que ton background n'est pas terrible. Il n'est pas très beau (subjectif), n'a pas de raison d'être (objectif) et ces petites textures répétitives font un peu site d'il y a dix ans. Quitte à utiliser une texture, pourquoi pas une belle et grosse texture de peau d'orange, cela aurait du sens… Mais plutôt que de la reproduire "grossièrement" une belle photo de qualité sera plus agréable.

La photo de la petite fille et son orange fait un peu « photo de vacance de ma fille ». La photo de la dame qui je suppose doit être la mère de la fille sur la page de contact rend aussi cet effet, surtout le découpage rond… Alors que le visuel fait plus «produit marketté», ces photos reviennent plus sur des valeurs artisanales de petite entreprise familiale avec une com un peu naïve. Si les deux sont possibles, le mélange est déconcertant.

De manière générale, c'est plutôt clair, le contenu facilement accessible, la hiérarchisation compréhensive. On navigue agréablement dans le site.

Pour les détails:
- Le mot orangedrink dans le header est un peu flou ou trop compressé. Le logo mériterait d'être un peu plus net. Le quartier d'orange aussi me semble un peu trop compressé.
- Dans les machines, kg au lieu de kgs, on ne mets pas de s aux abréviations, sauf cas particuliers. Il manque à chaque fois une espace avant les Watts (Consommation: 200W)

Bonjour

G3ronim0,

Ah oui, je comprends mieux effectivement, je te remercie

kustolovic,

Je te remercie tout d'abord d'avoir pris le temps de regarder mon site.

Pour le background, c'est une excellente idée, je vais regarder si mon appareil photo fais des photos d'une qualité suffisante pour pouvoir le faire.

Pour les photos de la petite fille et de sa mère ( effectivement, c'est bien sa mère ), si je comprends bien, les photos font un peu amateur et le visuel du site en lui-même est plus professionnel et c'est justement ce mélange qui fais tache ?

Mais d'un côté, cela montre le sérieux d'une entreprise familiale non ?

Alors concernant le header, je n'ai malheureusement plus le fichier original en format GIMP, erreur de débutant, je ne peux donc plus le modifier...

J'ai bien tenté de refaire l'intégralité du header, mais je n'arrive plus au même résultat...

Je vais modifier les fautes, merci de me l'avoir signalé.

je te remercie encore et te souhaite un excellent week-end !!

Marc

Je suis allé faire un tour sur ton site que ej trouve très agréable..

Concernant le fond, ça ne me choque pas, mais c'est vrai qu'une photo d'une peau d'orange comme dit plus haut serait plus beau.

Ce que je n'aime pas : Dans la page nous contacter, le gros dessin du téléphone gris et la phot de la secrétaire dans l'ovale, ça casse avec le style pro du site, peut être un poil trop familial.

Bonjour à toutes et tous

Je suis en train de prendre en compte vos différents conseils.

Dans un premier temps, j'ai basculé le site en HTML5, donc en utilisant les balises idoines.

Est-ce correct sémantiquement selon vous ?

Merci d'avance et bon dimanche

Salut,
Tu peux enlever ta balise <meta> keywords, devenue obsolète.

Pour le balisage HTML5 ça m'a l'air propre, par contre tu devrais mettre l'attribut "role" pour mieux identifier le contenu des balises.

exemple

<header role="banner">

;)

Salut, merci pour tes conseils

Je vais donc modifier les balises en ce sens.

En ce qui concerne la balise méta keywords, est-elle vraiment complètement déprécié ? Pour tous les moteurs de recherches ?

Encore merci
Modifié par marc.suisse (23 Apr 2012 - 11:42)