Vais-je dans la bonne direction avec mon webdesign ?

[marc.suisse]

Bonjour à toutes et tous

Comme je dois reprendre l'entreprise de mon patron, je voulais revoir entièrement le site internet de cette dernière, car la version actuellement en ligne manque pour ainsi de dire de ..... tout ( ce n'est pas moi qui avais fais le design, mais le contenu oui), jugez plutôt : http://telepermanence.ch/

J'ai fais une petite maquette que j'ai mis en ligne, la voilà : http://telepermanence.ch/nouveau/index.html


Qu'en pensez-vous ?

J'ai conscience que les pages sont vides, mais je cherche des idées pour les remplir un peu.

Mais c'était surtout pour savoir si je prends la bonne direction ?

Le menu du milieu de page est fictif si jamais.

Je vous remercie grandement d'avance et vous souhaite une excellente journée

Cordialement

Marc

[Difré91]

Ce qui me plait sur ta maquette, c'est qu'elle va à l'essentielle, il n'y a pas d'informations superflues qui viennent perturber la lecture du contenu.

Une remarque cependant, la partie supérieure du site devrait être la même sur chaque page.
En effet, par exemple sur la page "Notre entreprise", le texte "Une entreprise à échelle humaine" décale le bandeau des différents onglets. Je trouve cela perturbant.
Pareil pour l'accueil, encore que là je ne soit pas si certain de la nécessité de garder le même design exactement. On peut avoir un accueil spécial.
Mais je pense qu'il faut garder de la cohérence au site, simplement pour faciliter la lecture du contenu.

[marc.suisse]

Salut

Merci beaucoup d'avoir pris un moment pour regarder mon site !

Oui tu as raison, je cherche d'ailleurs un moyen d'inclure des photos sur les hauts de pages, pour les pages interphones, digicodes, réparations, contact, cela ne doit pas être trop compliqué, mais la page entreprise ne m'inspire pas...

Je vais continuer à chercher l'information et je reposterai les évolutions.

En tout cas merci encore !

Bon week-end.

Marc

[marc.suisse]

Bonjour à toutes et tous

J'ai amélioré quelques petits détails, qu'en pensez-vous de cette base ?

http://telepermanence.ch/nouveau/index.html

Merci beaucoup d'avance !

Marc

[Michaeljackfan]

Salut,

Personnellement je ne ferai pas un menu fixe. Il est assez grand, donc pour les gens qui ont un écran 16:9 c'est un peu embêtant.
Ça ne gêne pas la lecture, c'est juste gênant de n'avoir que 3/4 de l'écran disponible.

Je vois aussi que le menu change selon la page sur laquelle nous sommes. C'est un peu déroutant.

Le fait que l'image soit un lien vers la page principale n'est pas tellement intuitif. C'est particulièrement décevant lorsqu'on est sur la page "Partenaire Citycable", que l'on clique sur la carte pour avoir plus d'informations, et que l'on se fait renvoyer à la page d'accueil.
D'ailleurs, pourquoi avoir nommé la page qui semble être la page de contact "partenaire Citycable" ?

Les images trop étirées ne sont pas du plus bel effet non-plus (page "Digicodes").


Bien entendu, je ne sais pas ce qui est dû au fait qu'il ne soit pas terminé, et ce qui constitue des erreur à proprement parler.

[marc.suisse]

Bonsoir, merci pour votre critique

Alors tout d'abord, oui effectivement, tous les points que vous avez soulevés sont dus au fait que le site n'est pas terminé, il s'agit juste d'une esquisse, c'est pour ça que certains points ne semblent pas logique ou bien finis.

Et surtout ne regardez pas le code, car il doit faire peur

C'était surtout pour récolter des avis sur l'idée de base

Par contre, bon il est tard et je suis fatigué mais je ne comprends pas très bien ce que vous voulez dire, est-ce le fait que le site soit en largeur fixe et qu'il semble trop petit sur votre écran ?

En tout cas je vous remercie infiniment sur votre aide, c'est très sympa

Je profite de l'occasion pour vous montrer ce qu'un futur étudiant en graphisme m'a réalisé, il s'agit d'une carte de visite et d'une feuille A4 pour les factures ou offres destinées aux clients, je serais ravi d'avoir également votre avis à leurs propos.

http://img580.imageshack.us/img580/2145/final2t.png

http://img593.imageshack.us/img593/8837/facture2i.jpg

Je vous souhaite à tous un excellent dimanche !

Cordialement

Marc

[Michaeljackfan]

Par contre, bon il est tard et je suis fatigué mais je ne comprends pas très bien ce que vous voulez dire, est-ce le fait que le site soit en largeur fixe et qu'il semble trop petit sur votre écran ?

Ce que je veux dire, c'est que le menu reste fixe au sommet de l'écran (il ne sort pas du champ visible de la page), ce qui prend de la place.


Quant à ce qui a été fait par l'étudiant, je trouve bien.

[marc.suisse]

Bonsoir, merci pour cette précision

Je comprends mieux alors !

Par contre, je me suis dis que avec un contenu relativement important, en procédant de la sorte, cela améliore la navigation dans le site et permets de passer facilement à une autre page.

Pour dire la vérité, je comptais également rendre le menu orange fixe une fois qu'il se retrouve "plaqué" contre le menu fixe.

En résumé, qu'il s'arrête lors d'un scroll vertical afin de nouveau conservé cette navigation facile.

Je serais curieux d'avoir l'avis de plus de monde afin de savoir quelle est la meilleure solution à choisir ...

En tout cas merci encore !

Marc

[jreaux62]

Bonjour,
mettre ton header en position:fixed; est très gênant ! et inutile.

[marc.suisse]

Salut jreaux62, merci pour ton avis

Eh bien ok, je vais enlever cette position:fixed.

Bonne journée à toi

[jreaux62]

Re.
Je vais étoffer mon point de vue.

Les + :
-> j'aime bien les couleurs et les effets de textures,
-> la présentation sobre, qui va à l'essentiel.

Les - :
-> header trop haut (compte tenu du peu d'infos qu'il véhicule) -> le réduire.
OU, à la rigueur, j'aurais mis le mini-menu en haut à droite, et le menu principal (orange) à l'intérieur du header, en bas.
-> ajouter des photos aussi (je suppose que c'est prévu).

Pas mal de problèmes au niveau du CSS :
-> l'utilisation des pseudo-tables (display: table-cell; ) ne me parait pas judicieux, ni utile. A virer. D
Des float:left; float:right; suffiraient (+ overflow:hidden; sur le conteneur-parent, pour remettre les éléments dans le flux).
-> position: absolute; n'a d'intérêt que si le conteneur-parent est positionné aussi (position: relative; )
-> mets plus d'espaces (padding:40px; sur article, en virant les margin inutiles sur les h1 et p).
Ça permet d'aérer le texte.
-> les font-size sont définis en em. Il serait bien de définir aussi les line-height en em.
J'ai créé un système de News qui pourrait t’intéresser : Système de Gestion-Affichage de Nouvelles
(à moins que tu n'optes pour un CMS)

Et pour la grande image, tu as par exemple : Nivo Slider

[marc.suisse]

Salut, je te remercie infiniment pour ton analyse

Alors dans un premier temps, tu constatera que j'ai supprimé la partie fixed du header, cela devrait normalement être bon.

Pour tes remarques :

Les + :
-> j'aime bien les couleurs et les effets de textures,
-> la présentation sobre, qui va à l'essentiel.

Merci

-> l'utilisation des pseudo-tables (display: table-cell; ) ne me parait pas judicieux, ni utile. A virer. D
Des float:left; float:right; suffiraient (+ overflow:hidden; sur le conteneur-parent, pour remettre les éléments dans le flux).

Je ne dirais pas inutile du fait qu'il apporte quand même pas mal d'avantages d'auto-dimensionnement vertical par rapport au contenu par rapport à un positionnement en float d'autant plus que cela reste dans le flux.

Mais de toute manière, je serai bien obligé de réaliser une feuille de CSS séparée accessible en commentaires conditionnels pour rendre compatible le site ou plutôt juste utilisable pour IE6, IE7 et je crois IE8.

position: absolute; n'a d'intérêt que si le conteneur-parent est positionné aussi (position: relative; )

C'est le cas, mais c'est le header qui est positionné en relative.

-> mets plus d'espaces (padding:40px; sur article, en virant les margin inutiles sur les h1 et p).
Ça permet d'aérer le texte.

-> les font-size sont définis en em. Il serait bien de définir aussi les line-height en em.

Et pour la grande image, tu as par exemple : Nivo Slider

Bonnes suggestions !

J'ai créé un système de News qui pourrait t’intéresser : Système de Gestion-Affichage de Nouvelles
(à moins que tu n'optes pour un CMS)

Pour mon site, je ne crois pas, car je ne vais pas mettre en place un système de news, ormis peut être par mon blog.

Mais comme je suis justement en train de créer ce dernier, ton tutoriel pourrai sûrement m'être utile même si je n'ai la prétention d'avoir encore assez de connaissances pour le mettre en place.

Je pense que j'aurai assez de problèmes par exemple avec ckeditor, mais je pense qu'une fois que j'aurai réalisé la première page, j'ouvrirai un post ici sur le forum et j'attendrai les critiques

Je te remercie en tout cas infiniment et te souhaite un excellent week-end !

Bien cordialement

Marc

[jreaux62]

test.php (peu de changements : j'ai placé l'image sous le menu principal) :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang="fr">
  <head>
	
	<title>Telepermanence, Installations et dépannages d'interphones, de digicodes, réparations de télévisions.</title>
	
    <meta charset="utf-8">
    <meta name="description" content="Telepermanence s'occupe d'installer et de dépanner des installations d'interphones ou de digicodes pour les grandes gérances de la place Lausannoise, nous réparaons aussi 
	les télévisions">
	<meta name="keywords" content="Lausanne, Vaud, Suisse, interphones, digicodes, réparations, réglages, dépannages">
    <meta name="author" content="Marc Schaefges">
    <meta name="geo.placename" content="Lausanne, Vaud, Suisse">
	<meta name="viewport" content="width=device-width"> 
    <link rel="stylesheet" media="all" href="screen.css">
    
  </head>
  
  <body>

<!-- Avertissement que le navigateur du visiteur, internet explorer 6 ou 7 est trop ancien, on lui conseille donc de le upgrader --> 

<!--[if lte IE 7]>
      
      <div style="padding: 1em; background: #900; font-size: 1.1em; color: #fff;">
      	<p><strong>Attention ! </strong> Votre navigateur (Internet Explorer 6 ou 7) présente de sérieuses lacunes en terme de sécurité et de performances, dues à son obsolescence (il date de 2001).<br />En conséquence, ce site sera consultable mais de manière moins optimale qu'avec un navigateur récent (<a href="http://www.browserforthebetter.com/download.html" style="color: #fff;">Internet Explorer</a>, <a href="http://www.mozilla-europe.org/fr/firefox/" style="color: #fff;">Firefox</a>, <a href="http://www.google.com/chrome?hl=fr" style="color: #fff;">Chrome</a>, <a href="http://www.apple.com/fr/safari/download/" style="color: #fff;">Safari</a>,...)</p>
      </div>
<![endif]-->

<!-- On déclare les nouveaux éléments html5 pour internet explorer --> 
	
<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  
<![endif]-->

<header>
	<div id="barre_menu_gauche">
		<h1 class="telepermanence"><span>Télé</span>permanence</h1>
		<p>Une entreprise proche de vous depuis 40 ans !</p>
	</div>
	<div id="barre_menu_droite">
		<ul class="petit_menu">
			<li><a href="index.html" class="actuel"/>Accueil</a></li>
			<li><a href="entreprise.html"/>Notre entreprise</a></li>
			<li><a href="clients.html"/>Ils nous font confiance</a></li>
			<li><a href="contact.html"/>Nous contacter</a></li>
		</ul>
	</div>
</header>

<nav>
	<ul class="menu">
		<li><a href="index.html"/>Interphones</a></li>
		<li><a href="digicodes.html"/>Digicodes</a></li>
		<li><a href="clients.html"/>Téléréseau</a></li>
		<li><a href="reparations.html"/>Réparations</a></li>
		<li><a href="contact.html"/>Partenaire Citycable</a></li>
		<li><a href="vente.html"/>Téléviseurs à prix intéressants</a></li>
	</ul>
</nav>

<div id="big-image"><!-- IMAGE DEPLACEE SOUS LE MENU -->
	<a href="index.html"><img src="http://telepermanence.ch/nouveau/images/header.jpg" alt="Telepermanence bienvenue"/></a>
</div>

<article>
<h1>Plus de 40 ans à votre service !</h1>
<p>Nos secteurs d'activités sont très variés, nous assurons la vente, la réparation d'appareils électronique de divertissements, la modernisation et le dépannage téléréseau, la pose d'interphones et de digicodes, nous vous invitons donc à surfer sur le site et à découvrir par vous-même les prestations que nous pouvons vous proposer.</p>
<p>Nous sommes mandatés par de grandes gérances de la place Lausannoise, nous serions donc ravis de collaborer également avec vous !</p>
<p>Nous vous souhaitons une agréable visite !</p>

</article>

<footer>
<p>La qualité au service du client !</p>
</footer>

</body>

screen.css (beaucoup de changements) :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
/* reset css */

img
{
border:none;
}

header, nav, footer, figure, section
{ 
display:block;
}

@font-face {
font-family: 'swz721c';
src: url('http://telepermanence.ch/nouveau/polices/swz721bc.eot');
src: url('http://telepermanence.ch/nouveau/polices/swz721bc.eot?#iefix') format('embedded-opentype'),
url('http://telepermanence.ch/nouveau/polices/swz721bc.woff') format('woff'),
url('http://telepermanence.ch/nouveau/polices/swz721bc') format('truetype'),
url('http://telepermanence.ch/nouveau/polices/swz721bc.svg#swz721c') format('svg');
font-weight: normal;
font-style: normal;
}

html 
{
min-height:100%;
width:100%;
padding:0;
margin:0;
background-color:#c47622;
background-image:url("http://telepermanence.ch/nouveau/images/texture_html.jpg");
}

body
{
background-color:#eeca7c;
background-image: url("http://telepermanence.ch/nouveau/images/texture_de_fond.jpg");
min-height:100%;
width:980px;
margin-top:0px;
margin-right:auto;
margin-left:auto;
border-left:2px solid white;
border-right:2px solid white;
-moz-box-shadow: 1px 1px 15px #000000; 
-webkit-box-shadow: 1px 1px 15px #000000; 
box-shadow: 1px 1px 15px #000000; 
}

/* HEADER */
header
{
/* display:table; */ /* Supprimé ! */
/* height:160px; */	/* Supprimé ! */
width:980px;
position:relative;
overflow:hidden;	/* AJOUTE ! */
padding:10px 0;	/* AJOUTE ! */
background-image:url("http://telepermanence.ch/nouveau/images/sup.jpg");
}

header h1
{
color:#ea741d;
font-family:swz721c, Tahoma, georgia;
/* margin-top:10px; */ /* Supprimé ! */
/* margin-left:20px; */ /* Supprimé ! */
margin:5px 0 10px; /* AJOUTE ! */
font-size:2.8em;
border-bottom:3px dotted white;
}

header h1 span
{
color:white;
}

header p
{
color:white;
font-size:0.8em;
font-family: swz721c, Tahoma, georgia;
margin-left:5px; */ /* 23px -> 5px : MODIFIE ! */
/* margin-top:-20px; */ /* Supprimé ! */
}

/* MENU */
#barre_menu_gauche
{
/* display:table-cell; */ /* Supprimé ! */
display:inline-block;	 /* AJOUTE ! */
/* width:330px; */ /* Supprimé ! */
float:left; /* AJOUTE ! */
padding-left:50px; /* AJOUTE ! */
}

#barre_menu_droite
{
/* display:table-cell; */ /* Supprimé ! */
display:inline-block;	 /* AJOUTE ! */
float:right; /* AJOUTE ! */
/* width:650px; */ /* Supprimé ! */
padding:5px 50px 0 0; /* AJOUTE ! */
}

#barre_menu_droite ul.petit_menu 
{
	text-align:right;
}

ul.petit_menu li
{
display:inline;
list-style-type:none;
}

ul.petit_menu li a
{
color:#8a7d7d;
font-family: swz721c, Tahoma, georgia;
text-decoration:none;
border-left:4px solid #7b7478;
padding-left:3px;
font-size:0.8em;
margin-right:10px;
}

ul.petit_menu li a.actuel
{
border-left:4px solid #ea741d;
color:white;
}

ul.petit_menu li a:hover
{
color:white;
-moz-transition:0.5s;
-webkit-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}

#big-image img/* GRANDE IMAGE */	/* AJOUTE ! */
{
height:352px;
width:980px;
/* border-top:2px solid white; */ /* Supprimé ! */
border-bottom:2px solid white; /* AJOUTE ! */
}

nav
{
width:980px;
/* height:59px; */ /* Supprimé ! */
/* margin-top:-5px; */ /* Supprimé ! */
/* margin-bottom:0px; */ /* Supprimé ! */
/* margin-right:auto; */ /* Supprimé ! */
/* margin-left:auto; */ /* Supprimé ! */
background-image:url('http://telepermanence.ch/nouveau/images/fond_menu.jpg');
background-repeat:repeat;
border-top:2px solid white; /* black -> white : MODIFIE ! */
border-bottom:2px solid white; /* black -> white : MODIFIE ! */
}

ul.menu
{
list-style-type:none;
margin:0;
padding:10px 0;	 /* 0 -> 10px 0 : MODIFIE ! */
}

ul.menu li 
{
display:inline-block;	 /* block -> inline-block : MODIFIE ! */
/* float:left; */ /* Supprimé ! */
/* height:30px; */ /* Supprimé ! */
text-align:center;
/* margin-top:20px; */ /* Supprimé ! */
border-left:4px solid #7b7478;
margin-left:15px;	 /* 10px -> 15px : MODIFIE ! */
padding-left:4px;
text-shadow:0px 0px 1px black;
}

ul.menu li a
{
font-family: swz721c, Tahoma, georgia;
color:white;
font-size:1.2em;	/* 1.3em -> 1.2em :  : MODIFIE */
text-shadow:0px 0px 1px black;
text-decoration:none;
}

ul.menu li a:hover
{
color:black;
text-shadow:0px 0px 1px white;
-moz-transition:0.5s;
-webkit-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}

article
{
/* margin-bottom:30px; */
padding:10px 50px; /* AJOUTE ! */
}

article h1
{
color:white;
text-shadow: 1px 2px 2px #000000;
font-size:1.8em;
font-family:swz721c, Tahoma, georgia;
border-bottom:3px solid #ea741d;
/* margin-left:10px; */ /* Supprimé ! */
/* margin-top:30px; */ /* Supprimé ! */
}

article p
{
color:white;
font-family:Tahoma, georgia;
width:50%;
line-height:25px;
font-size:1em;
/* margin-left:10px; */ /* Supprimé ! */
/* margin-top:30px; */ /* Supprimé ! */
}

#corps
{
display:table;
}

aside.contact_droite
{
display:table-cell;
width:50%;
}

aside.contact_droite h1
{
color:white;
font-family:Tahoma, georgia;
margin-left:120px;
color:#ea741d;
font-size:1.5em;
}

aside.contact_droite ul li
{
color:white;
font-family:Tahoma, georgia;
list-style-type:none;
margin-left:100px;
font-size:1.1em;
line-height:26px;
}

article.contact
{
display:table-cell;
width:50%;
}

article.contact p
{
width:100%;
margin-left:20px;
}

hr
{
margin-left:20px;
height:3px;
}

hr
{
margin-left:20px;
height:3px;
}

article.contact h2
{
color:white;
margin-left:20px;
font-family:Tahoma, georgia;
font-size:1.5em;
}

label
{
display:block;
margin-bottom:10px;
width:420px;
color:white;
font-family:Tahoma, georgia;
margin-left:20px;
}

form 
{
margin-bottom:50px;
}

form input
{
-moz-border-radius: 5px; 
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius:5px;
margin-bottom:20px;
height:20px;
width:200px;
margin-left:20px;
}

textarea
{
-moz-border-radius: 5px; 
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius:5px;
margin-bottom:15px;
max-width:400px;
margin-left:20px;
}

button
{
display:block;
width:100px;
padding:8px;
-moz-box-shadow: 1px 1px 0px #000000; 
-webkit-box-shadow: 1px 1px 0px #000000; 
box-shadow: 1px 1px 0px #000000; 
margin-left:20px;
}


footer
{
background-color:white;
height:80px;
border-bottom:2px solid white;
}

footer p
{
color:black;
font-family:tahoma;
padding-top:30px;
font-size:1em;
margin-left:10px;
}