Esquisse du nouveau design de mon site

Bonjour à toutes et tous Wink

Comme je dois reprendre l'entreprise de mon patron en début d'année 2013, https://www.regardtv.net/t4999-reprise-d-entreprise-petit-sondage, je suis en train de refaire le design du site internet.

Bon faut dire que le design actuel laisse vraiment à désirer, jugez plutôt : http://telepermanence.ch/

La maquette est ici : http://telepermanence.ch/nouveau/index.html

J'ai conscience qu'il manque un menu, et que tout n'est pas en ordre, mais c'est une esquisse.

Je serais curieux d'avoir vos avis ?

Je vous remercie d'avance et vous souhaite une excellente fin de journée.

Cordialement

Marc green

Hello,
Je vais y aller "brutos" comme pour les sites que je critiques pour le travail, c'est a dire rien de positif ni félicitations mais que des remarques critiques. Après c'est des gouts et des couleurs, donc tu prends les remarques qui t'intéressent et tu oublies les autres. Je ne regardes pas le contenu des textes ni l’orthographe (j'en serais bien incapable)

Page d'accueil :
Il manque un logo
Adresse en bas, le cadre me choque, cratères trop gros, informations redondantes avec l'image
Il manque un élément graphique non rectangulaire mettant de l'air dans la page

Notre entreprise:
Le menu change et se déplace, sentiment de perte de repères. Faire en sorte que la zone de vision primaire autour du curseur reste fixe.
Changement de style de la page avec introduction d'un nouvel élément graphique (entête) et d'un nouveau style (texte en bleu) en zone de vision primaire et en haut de page a éviter.
Manque un élément graphique fort de rappel avec la page d'accueil

Interphones, digicode et réparations
Encore un changement de style en zone de vision primaire (disparition du texte bleu) et décalage complet de la page
Manque un élément graphique fort de rappel avec la page d'accueil
Réparation du bloc adresse qui me dérange, je ne sais pas pourquoi

Ils nous font confiance
Introductions de 2 nouveaux styles. Est-ce justifé. Essayer de n'introduire qu'un nouveau style par page, par exemple en augmentant les styles de la page d'accueil.

Codage
Eviter l'utilisation de CSS externes

<link href='http://fonts.googleapis.com/css?family=PT+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

Utiliser de noms forts pour les classes, éviter page,...
<div id="menu">
<ul class="page">

Indentation du code :
Inexistant ou presque,....

Utilisation du HTML5
<!DOCTYPE html>
<input type="email"
<textarea required

Attention à la compatibilité avec les anciens browsers et les croutes mobiles.

A tester :
Lisibilité sur mobiles et navigateurs exotiques, comportement sur les browsers HTML 4.01

je ne suis pas un spécialiste du design web. Cependant je rejoins bibollette: La fonte est trop grande. Dans "notre entreprise" ne vous attardez pas seulement sur votre personne, mais présenter les employés avec leur fonction et phot, cela donnera la dimension de votre entreprise et ses compétences.

Bonjour à vous et merci pour vos conseils Wink

Alors je vais reprendre point par point.

bibolette a écrit:Je vais y aller "brutos" comme pour les sites que je critiques pour le travail

Tu critiques des sites pour le travail ? Je croyais que tu étais dans l'électronique ? Enfin bref, tant mieux pour moi green

bibolette a écrit:Page d'accueil :
Il manque un logo

Je vais voir sur le site du zéro ou ailleurs dans la partie graphisme si quelqu'un pourrait m'en faire un.

bibolette a écrit:Adresse en bas, le cadre me choque, cratères trop gros, informations redondantes avec l'image
Il manque un élément graphique non rectangulaire mettant de l'air dans la page

Oui, j'en ai conscience, il faut que je trouve une idée pour corriger ça.

bibolette a écrit:Notre entreprise:Le menu change et se déplace, sentiment de perte de repères. Faire en sorte que la zone de vision primaire autour du curseur reste fixe.
Changement de style de la page avec introduction d'un nouvel élément graphique (entête) et d'un nouveau style (texte en bleu) en zone de vision primaire et en haut de page a éviter.
Manque un élément graphique fort de rappel avec la page d'accueil

J'avais envie de mettre une photo tout comme la page d'accueil, et d'ailleurs le faire sur toutes les pages, autant pour la page digicode ou interphones cela sera facile, autant sur la page entreprise, je ne sais pas trop quoi mettre.

bibolette a écrit:Encore un changement de style en zone de vision primaire (disparition du texte bleu) et décalage complet de la page
Manque un élément graphique fort de rappel avec la page d'accueil
Réparation du bloc adresse qui me dérange, je ne sais pas pourquoi

Oui là de nouveau la photo pourrait être une bonne idée.

bibolette a écrit:Réparation du bloc adresse qui me dérange, je ne sais pas pourquoi

Là, je n'ai pas compris...

bibolette a écrit:Introductions de 2 nouveaux styles. Est-ce justifé. Essayer de n'introduire qu'un nouveau style par page, par exemple en augmentant les styles de la page d'accueil.

J'hésitais effectivement de laisser ces 2 styles, qui ont d'ailleurs été mis en place pour bien faire le distinction entre les deux.

bibolette a écrit:Codage
Eviter l'utilisation de CSS externes

<link href='http://fonts.googleapis.com/css?family=PT+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

Là c'est presque un peu obligé ( même si dans mon cas je ne les utilises plus mais que j'ai oublié de les supprimer ) car c'était utilisé pour la police des caractères, google fonts.

bibolette a écrit:Utiliser de noms forts pour les classes, éviter page,...
<div id="menu">
<ul class="page">

Indentation du code :
Inexistant ou presque,....

Utilisation du HTML5
<!DOCTYPE html>
<input type="email"
<textarea required

Le code HTML n'a pas du tout été optimisé, j'ai juste fais du fonctionnel, en attendant...

Tiens d'ailleurs cela me fais penser, je profite de l'occasion même si ce n'est pas le sujet, j'ai fais un autre site internet, j'ai utilisé HTML5, CSS3, je serais curieux d'avoir ton/vos avis : http://orangedrink.ch/

Là j'ai soigné le codage et utilisé les microformats pour l'adresse postale et téléphone.

Attention à la compatibilité avec les anciens browsers et les croutes mobiles.

Oui, surtout avec IE6, je mettrais très certainement en place un fichier CSS spécialement dédié avec les commentaires conditionnels, mais c'est prévu.

GlaTV a écrit:je ne suis pas un spécialiste du design web. Cependant je rejoins bibollette: La fonte est trop grande. Dans "notre entreprise" ne vous attardez pas seulement sur votre personne, mais présenter les employés avec leur fonction et phot, cela donnera la dimension de votre entreprise et ses compétences.

Qu'avez-vous comme taille d'écran et de résolution ?

Vous serait-il possible svp de faire une capture d'écran ?

Pour la présentation des employés, comment dire, lors de la reprise en janvier, nous ne serons que 2, un apprenti et moi-même ( d'où le terme entreprise à taille humaine ), je pense donc que la présentation de 2 pelés peut risquer de faire sourire, à moins que....

En tout cas merci infiniment à vous pour avoir pris le temps de me répondre, c'est très sympa !! Very Happy

Tu critiques des sites pour le travail ? Je croyais que tu étais dans l'électronique ? Enfin bref, tant mieux pour moi

De formation je suis Ing. ETS en électronique.
J'ai partiqué 10ans et j'ai été maître auxiliaire à l'école tech de la Vallée.

Mais quand il a fallu fonder une famille, et disposer d'un salaire confortable c'était le gros de la crise, l'industrie des machines était morte ou presque. J'ai donc biffurqué dans l'informatique de service.

Donc j'ai fait de me passaion mon Job et de ma formation ma passion,..... Mais j'ai toujous un labo perso bien équipé même si c'est du matos qui a 20 ans, un chassi tecktro 500MHz, avec un base de temps pico seconde ça reste un chassi tektro,.... (en fait maintenant que je compte ça fait plutot 30 ans,...)

Réparation du bloc adresse qui me dérange, je ne sais pas pourquoi

Lire réaparition, retour,....

@marc.suisse: MP.
Smile

bibolette a écrit:
De formation je suis Ing. ETS en électronique.
J'ai partiqué 10ans et j'ai été maître auxiliaire à l'école tech de la Vallée.

Mais quand il a fallu fonder une famille, et disposer d'un salaire confortable c'était le gros de la crise, l'industrie des machines était morte ou presque. J'ai donc biffurqué dans l'informatique de service.

Donc j'ai fait de me passaion mon Job et de ma formation ma passion,..... Mais j'ai toujous un labo perso bien équipé même si c'est du matos qui a 20 ans, un chassi tecktro 500MHz, avec un base de temps pico seconde ça reste un chassi tektro,.... (en fait maintenant que je compte ça fait plutot 30 ans,...)

Tu répares quoi comme appareil ?

Mais je n'ai pas très bien compris, tu réalises donc des sites web ?

Et oui sinon, le temps passe vite hélas

A propos, as-tu jeté un oeil à ce site : http://orangedrink.ch/

En "Electronique"
Je répares mes prores appareils et, quand j'ai le temps, je construit des bidules pour moi. Pour l'instant je travaille sur un émetteur récepteur ondes courtes de type Software Defined Radio SDR.

En "Soft"
Je réalise des plateformes intranet ou de type client lourd pour les besoins internes d'un gros client,....
Soit je développe moi même quand c'est pas trop gros (moins de 30 jours) soit je sous-traite et coordonne et controle les développements fait à l'extérieur et intègre le tout dans l'infrastructure de ce client. (Mais j'essaie toujours de faire en sorte que le travail reste en Suisse)

Je regarderais ton autre site demain soir. Là j'ai un truc a finir pour demain 15h00

A+

Tu n'es jamais sollicité par des particuliers pour réparer leurs appareils ?

J'imagine que ton boulot soft doit être compliqué, mais si je comprends bien, ce sont des sites "internet" en ethernet Neutral

C'est bien de garder le travail en Suisse, mais qui te dit que ton sous-traitant, ne sous-traite pas lui non plus ?

Pour mon autre site internet, pas de problème, comme on dit chez nous, il n'y a pas le feu au lac blue

Un site intranet c'est un "gros mot" qui désigne un site web qui est hébergé a l'intérieur d'une entreprise et qui n'est accessible que de l'intérieur de l'entreprise.
Une sorte de site web dans un environnement privé et fermé. Mais rien de bien différent d'un site web "normal".
Juste une question de vocabulaire.

Oui j'ai pas mal de monde qui me demande de réparer des trucs mais je ne le fais plus que pour des amis proches, et la famille très proche, autrement tu te fais bouffer et tu ne fais plus que ça,....

Mon sous-traitant soustraite parfois chez des étrangers très exotiques,.... en Valais,.... mais ça va pas plus loin.

Pour http://orangedrink.ch/ "rapido"

En général
Je ferais en sorte que l'on puisse voir une ou deux photos de la plantation en haute résolution, histoire d’insister sur le coté "paradis exotique".

Personnellement le site me donnes vachement envie des les manger ces oranges ou de boire du jus, mais y pas moyen de connaitre le prix, ni d'en commander. En fait en tant que consommateur de base si je pouvais cliquer pour recevoir avoir un pack découverte à la maison, je pense que je me laisserais tenter.

Nous contacter
J'aime pas le téléphone, bleu et pas sexy du tout, surtout après les photos de la Sicile.

Codage
Éviter de faire apparaître en clair les données de comtes
_gaq.push(['_setAccount', 'UA-30683345-1']);

Éviter les noms d'objet peu significatif
<ul class="menu">

Conclusions
C'est un site simple sans fioriture technique inutile.
Moi je l'aime bien il me fait vachement envie d'en avoir de ce jus d'orange de Sicile je pense qu'il rempli bien son rôle.
Ce serait peut-être bien de faire relire le texte par un pro du français, mais là je peux pas aider, au travail on a des linguistes pour ça.

Je partirais bien 15 jours en Sicile là,....

Mais j'imagine qu'un site local d'entreprise doit comporter plus de fonctions qu'un site normal, il doit donc être plus complexe.

Mais est-ce généralement des sites "informatifs" ou des sites qui créés une interaction, par exemple je ne sais pas, modifier un agenda ?

Oui c'est vrai, le valais possède son micro-climat, c'est donc très exotique green

Autrement pour orangedrink, toi qui disais que tu te limitais aux remarques critiques, sans félicitations, il a donc du beaucoup te plaire blue

Concernant les tarifs, c'est une exigence du "client", il ne veut pas que les tarifs puisse être comparé aux concurrents, je le comprends d'ailleurs.

Pour le pack découverte, cela serait effectivement une bonne idée, je vais leurs suggérer l'idée.

Oui il me semble avoir entendu que le téléphone faisait tâche, même s'il ne me dérange pas plus que ça, mais je vais l'enlever.

Tout comme d'ailleurs la texture du fond qui ne semble pas avoir l’unanimité...

Et oui, il y a sûrement moyen de revoir un peu la tournure des phrases et de corriger les fautes.

Si vous avez des linguistes, cela doit être une grande société...

Réserves ton billet d'avion d'ailleurs, mais attention, parait qu'il fait très très chaud là ba actuellement !

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

Marc

En Effet ce sont souvent des sites applicatifs qui offrent des fonctions avancées, genre réserver une voiture avec chauffeur,....

Pour la texture du fond, cela dépend certainement de l'écran, mais sur moin Eizo 26'' ça passe bien.

la consultation est faite avec un IPad 1

J'aime pas trop le fait de devoir scroller pour voir l'entier de la page (surtout sur la page d'accueil). Il faudrait une police un poil plus petite, ou une meilleur mise en page.

Sinon, je test avec un MacBook Pro Retina en 1680x1050, et ton site a une bonne résolution (pas d'images floues, comme certains)

Salut

Merci pour ton avis !

Désolé d'ailleurs du délai de ma réponse, mais bizarrement je n'ai pas reçu de notification de réponse...

Oui je sais c'est un peu embêtant de devoir scroller, mais hélas, vu la mise en page, c'est difficile de faire mieux.

J'ai sinon apporté quelques petites modifications, http://telepermanence.ch/nouveau/index.html

L'information telepermanence sur la photo est un peu redondante, je vais tâcher de la supprimer.

L'entête noir est également un peu haut à mon avis.

Mar Nov 06 2012, 08:47

Bonjour à toutes et tous [cligne]

Je suis toujours en train de travailler à mon site, je ne suis pas trop stressé, car il doit être fonctionnel au premier janvier 2013.

Voilà où j'en suis : http://telepermanence.ch/nouveau/index.php

Plusieurs pages sont fonctionnels, mais par encore terminées, comme ils nous font confiance, contact, interphones.

Qu'en pensez-vous ? Il y a du mieux par rapport à avant ?

Merci beaucoup d'avance ;-)

Marc

Mar Nov 06 2012, 21:52

Hello,
Oui c'est mieux, beaucoup mieux.
En plus le codage html est propre et bien structuré, de même que le css, ce qui rendra le site facile a maintenir.

Par contre j'ai quelques soucis avec la logique de navigation
En haut sous télé présence "Interphones|digicodes|téléréseau|réparations tv" ne fait rien, puis a gauche et plus bas, d'une couleur moins visible
"Accueil
Notre entreprise
Ils nous font confiance
Nous contacter" sont actif.

Puis au milieu on retrouve en gros et bien visible

Interphones
Digicodes
Téléréseau
Réparations
Vente de téléviseurs

également actif avec un look de boutons

Pour naviguer c'est pas évident je clique sur nous contacter, toute la page change, ok.
Mais après je clique sur "Interphones" et là, il y a des champs au dessus du "bouton" sur le quel je viens de cliquer qui changent, et en plus le choix que j'ai fait tout en haut et dé-sélectionner par qqch situé plus bas.

En fait il faut faire un choix :
- Soit tu as 2 niveaux de menus
- Soit tu as un seul niveau de menu.

Avec 2 niveaux de menu, le menu principal est en haut (ev. à gauche pour un site horizontal), il est plus visible que le menu secondaire et il conditionne toute le page, et le menu secondaire est en dessous (ev. a droite) et moins visible. Il ne conditionne pas le éléments qui sont au dessus (à gauche) de lui.

Soit tu as un seul niveau de menu qui est placé à un endroit stratégique, qui conditionne tout ce qui est en dessous (à droite) de lui, la partie supérieure (à gauche) de la page étant fixe.

Mail là tu as graphiquement 2 niveau de menu et une mécanique à un seul niveau et c'est vraiment déroutant.
En plus le menu "principal" du haut est plus petit que le menu secondaire et il est moins visible qu'un élément non fonctionnel au dessus et à gauche de lui,....

Mer Nov 07 2012, 07:52

Salut, comment vas-tu ?

Merci pour ta critique Wink

En haut sous télé présence "Interphones|digicodes|téléréseau|réparations tv" ne fait rien

Normal, il ne s'agit pas d'un menu, mais d'une récapitulation des domaines dont on s'occupe, tout ceci est placé dans un <h2> afin d'augmenter le référencement, mais je comprends que l'on puisse croire qu'il s'agit d'un menu.

Pour naviguer c'est pas évident je clique sur nous contacter, toute la page change, ok.
Mais après je clique sur "Interphones" et là, il y a des champs au dessus du "bouton" sur le quel je viens de cliquer qui changent, et en plus le choix que j'ai fait tout en haut et dé-sélectionner par qqch situé plus bas.

Je n'ai pas bien compris le phénomène que tu rencontres, tu dis cliquer sur Nous contacter et ensuite sur interphones.

Mais ensuite, j'avoue ne pas avoir compris...

En plus le menu "principal" du haut est plus petit que le menu secondaire et il est moins visible qu'un élément non fonctionnel au dessus et à gauche de lui,....

En fait, je ne considère pas le menu du haut comme principal, mais plutôt comme secondaire.

En tout cas encore merci pour ton aide !

Passes une bonne journée.

Marc

Mer Nov 07 2012, 15:09

<quote>En fait, je ne considère pas le menu du haut comme principal, mais plutôt comme secondaire.</quote>

Et c'est tout le problème.
C'est très déstabilisant, car quand on clique sur un bouton, on ne s'attend pas à ce que cela change qqch au dessus de ce bouton.

En principe la règle de base quand on design un site ou une application on part du principe d'une navigation de haut en bas et de gauche a droite. Et là c'est l'inverse, ce qui me donne cette impression de navigation confuse et peu claire.

C'est vrai qu'il y a des exeptions possible mais il faut que la charte graphique le laisse supposer clairement. L'exemple type sont les liens de bas de page, sous forme de link qui font basculer tout le site.

Un très bon exemple de navigation multi-niveau c'est le site de la NASA. http//www.nasa.gov

Bonjour à toutes et tous :-)

J'ai agrémenté le site internet de nouveaux contenus, je serais curieux d'avoir vos avis.

http://telepermanence.ch/index.php

Par contre, j'ai totalement oublié de toucher au menu dont on parlait avec bibolette, il faudrait que je vois ça...

Esquisse du nouveau design de mon site

Esquisse du nouveau design de mon site

Re: Esquisse du nouveau design de mon site

Re: Esquisse du nouveau design de mon site

Re: Esquisse du nouveau design de mon site

Re: Esquisse du nouveau design de mon site

Re: Esquisse du nouveau design de mon site

Re: Esquisse du nouveau design de mon site

Re: Esquisse du nouveau design de mon site

Re: Esquisse du nouveau design de mon site

Re: Esquisse du nouveau design de mon site

Re: Esquisse du nouveau design de mon site

Re: Esquisse du nouveau design de mon site

Re: Esquisse du nouveau design de mon site

Re: Esquisse du nouveau design de mon site

Re: Esquisse du nouveau design de mon site

Re: Esquisse du nouveau design de mon site

Re: Esquisse du nouveau design de mon site

Re: Esquisse du nouveau design de mon site

Re: Esquisse du nouveau design de mon site

Re: Esquisse du nouveau design de mon site

Re: Esquisse du nouveau design de mon site

Re: Esquisse du nouveau design de mon site