Besoins d'avis sur nouveau site
Pikure64
Messages postés
19
Statut
Membre
-
Ponps123 Messages postés 26 Statut Membre -
Ponps123 Messages postés 26 Statut Membre -
Bonjour à tous !
En tant que grand débutant en webmaster, je viens de créer mon site internet html voici le lien :
http://davidmaye.com
Je poste ce sujet afin d'avoir des avis d'experts... Car plusieurs problèmes apparaissent sur mon site comme :
- La police qui ne s'adapte pas, j'aurais aimé de l'Helvetica neue mais d'après mes nombreuses recherches il est apparemment impossible de l'avoir; peut être avec la balise @fontface ?
- Il y a l'apparition de scroll sur les écrans de plus petites résolutions (je travaille sur une écran de 1630px) alors que j'ai mis toutes mes dimensions en %, alors là je ne comprends pas... Si quelqu'un peut m'aider... L'idéal étant à mes yeux aucun scroll...
Bref je suis tout ouïe à vos remarques afin d'optimiser mon site web !
Je vous remercie d'avance pour vos réponses !
En tant que grand débutant en webmaster, je viens de créer mon site internet html voici le lien :
http://davidmaye.com
Je poste ce sujet afin d'avoir des avis d'experts... Car plusieurs problèmes apparaissent sur mon site comme :
- La police qui ne s'adapte pas, j'aurais aimé de l'Helvetica neue mais d'après mes nombreuses recherches il est apparemment impossible de l'avoir; peut être avec la balise @fontface ?
- Il y a l'apparition de scroll sur les écrans de plus petites résolutions (je travaille sur une écran de 1630px) alors que j'ai mis toutes mes dimensions en %, alors là je ne comprends pas... Si quelqu'un peut m'aider... L'idéal étant à mes yeux aucun scroll...
Bref je suis tout ouïe à vos remarques afin d'optimiser mon site web !
Je vous remercie d'avance pour vos réponses !
A voir également:
- Besoins d'avis sur nouveau site
- Site de telechargement - Accueil - Outils
- Nouveau site coco chat - Accueil - Réseaux sociaux
- Site comme coco - Accueil - Réseaux sociaux
- Site x - Guide
- Site pour vendre des objets d'occasion - Guide
16 réponses
Salut en gros c'est pas mal
pour le scroll vertical c'est normal si le contenu dépasse la fenetre en vertical
en forte réduction de fenetre les div titres et bloc-crea pénétrent l'un dans l'autre.
au lieu de float, tu pourrais utiliser inline-block. Tu peux rajouter un min-width en px en plus du witdh en % (en forte réduction de fenetre les div passerons une en dessous de l'autre)
l'image de background (la feuille) pénétre la signature
donc j'aurais mis la signature sous forme de texte et l'aurais mis dans le footer
la div footeur je l'aurais mise après la div background parce la feuille du (image de background) pénètre la signature et le copyright
dans la div titre il y a une mauvaise utilisation sémantique des balises h avec des div (titre1 titre2 etc)
pense qu'une balise est sémantique elle ne sert pas à la mise en forme de texte
fait une seule div avec un h1 exemple
<div id="titre">
<h1>un titre</h1>
<ul>
<li>Plans de jardin</li>
<li>Conception paysagère</li>
<li>Dessins & Croquis</li>
<li>Infographie</li>
<li>Vue 3D</li>
</ul>
</div>
ul {
list-style-type:none;
margin:0;
padding:0;
text-align:right;
}
tu peux rajouter des styles aux li (li class="uneclass") pour changer le gras etc
Dans la page portfolio pourquoi mettre chaque image dans un div ?
met chaque image dans une balise <p> et applique un margin a
#bloc_crea img {}
tu devrais rajouter le menu ou un lien retour page portfolio la ou il y a les sliders parce que après pas moyen de revenir sans le menu du navigateur.
Pour l'utilisation de polices exotiques tu dois les télécharger et les appeler dans le css avec @font-face
https://www.alsacreations.com/astuce/lire/630-fonte-personnalisee-site-web.html
voila sinon c'est un bon début
pour le scroll vertical c'est normal si le contenu dépasse la fenetre en vertical
en forte réduction de fenetre les div titres et bloc-crea pénétrent l'un dans l'autre.
au lieu de float, tu pourrais utiliser inline-block. Tu peux rajouter un min-width en px en plus du witdh en % (en forte réduction de fenetre les div passerons une en dessous de l'autre)
l'image de background (la feuille) pénétre la signature
donc j'aurais mis la signature sous forme de texte et l'aurais mis dans le footer
la div footeur je l'aurais mise après la div background parce la feuille du (image de background) pénètre la signature et le copyright
dans la div titre il y a une mauvaise utilisation sémantique des balises h avec des div (titre1 titre2 etc)
pense qu'une balise est sémantique elle ne sert pas à la mise en forme de texte
fait une seule div avec un h1 exemple
<div id="titre">
<h1>un titre</h1>
<ul>
<li>Plans de jardin</li>
<li>Conception paysagère</li>
<li>Dessins & Croquis</li>
<li>Infographie</li>
<li>Vue 3D</li>
</ul>
</div>
ul {
list-style-type:none;
margin:0;
padding:0;
text-align:right;
}
tu peux rajouter des styles aux li (li class="uneclass") pour changer le gras etc
Dans la page portfolio pourquoi mettre chaque image dans un div ?
met chaque image dans une balise <p> et applique un margin a
#bloc_crea img {}
tu devrais rajouter le menu ou un lien retour page portfolio la ou il y a les sliders parce que après pas moyen de revenir sans le menu du navigateur.
Pour l'utilisation de polices exotiques tu dois les télécharger et les appeler dans le css avec @font-face
https://www.alsacreations.com/astuce/lire/630-fonte-personnalisee-site-web.html
voila sinon c'est un bon début
Salut,
Pour moi, la première page ne sert à rien et est même néfaste; pourquoi faire chercher où cliquer ? Pourquoi faire cliquer sur une page vide d'information significative pour le visiteur ?
Le plus simple serait de fixer la largeur de chaque page (par exemple width: 990px;) pour éviter les baladages intempestifs selon les résolutions.
Moi j'aime bien quand un cadre trace les limites de la page.
Pour moi, la première page ne sert à rien et est même néfaste; pourquoi faire chercher où cliquer ? Pourquoi faire cliquer sur une page vide d'information significative pour le visiteur ?
Le plus simple serait de fixer la largeur de chaque page (par exemple width: 990px;) pour éviter les baladages intempestifs selon les résolutions.
Moi j'aime bien quand un cadre trace les limites de la page.
Bonjour !
Merci à vous pour ces réponses ! Oui je sais que mon slider n'est pas très pratique, je l'ai fait à partir de Wowslider, et LA chose qui me préoccupe c'est comme tu le dis animostab le bouton retour, mais étant donné qu'il est déjà tout fait j'ignore complètement comment le modifier... Je voulais le faire apparaître en lightbox dans l'idéal mais je n'ai pas su trouver quelque chose d'intéressant...
En tout cas je vous remercie très sincèrement de vos réponses et du temps que vous m'accordez et vos encouragements (surtout), ça m'aide beaucoup !
Merci à vous pour ces réponses ! Oui je sais que mon slider n'est pas très pratique, je l'ai fait à partir de Wowslider, et LA chose qui me préoccupe c'est comme tu le dis animostab le bouton retour, mais étant donné qu'il est déjà tout fait j'ignore complètement comment le modifier... Je voulais le faire apparaître en lightbox dans l'idéal mais je n'ai pas su trouver quelque chose d'intéressant...
En tout cas je vous remercie très sincèrement de vos réponses et du temps que vous m'accordez et vos encouragements (surtout), ça m'aide beaucoup !
c'est simple dans tes pages de slider
avant
<div id="wowslider-container1">
tu mets
<div id="header">
<div id="rubrique">
<a href="index.html" title="Retour à la page d'accueil" class="margespx">Accueil</a>
<a href="Presentation.html" title="Présentation entreprise" class="margespx">Présentation</a>
<a href="portfolio.html"title="Mon portfolio" class="margespx">Conception & Infographie</a>
<a href="contact.html"title="Me contacter" class="margespx">Contact</a>
</div>
</div>
sans oublier de mettre
<link rel="stylesheet" type="text/css" href="styleconception.css" media="screen" />
dans la balise head
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
avant
<div id="wowslider-container1">
tu mets
<div id="header">
<div id="rubrique">
<a href="index.html" title="Retour à la page d'accueil" class="margespx">Accueil</a>
<a href="Presentation.html" title="Présentation entreprise" class="margespx">Présentation</a>
<a href="portfolio.html"title="Mon portfolio" class="margespx">Conception & Infographie</a>
<a href="contact.html"title="Me contacter" class="margespx">Contact</a>
</div>
</div>
sans oublier de mettre
<link rel="stylesheet" type="text/css" href="styleconception.css" media="screen" />
dans la balise head
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
avant toutes choses :
- graphiquement, une idée de base superbe, mais ce qui va être un peu ( fort ) gênant c'est qu'il n'y a aucun contenu réele pour les moteurs dans ta page index, rien ' à manger ', ils vont voir ailleurs ;)
- pour la font, normalement @fontface bien mis ce devrait être bon
- pour le reste je te conseillerais de tester sur des sites qui te donnent l'aperçu selon les différentes tailles d'écran ...
- graphiquement, une idée de base superbe, mais ce qui va être un peu ( fort ) gênant c'est qu'il n'y a aucun contenu réele pour les moteurs dans ta page index, rien ' à manger ', ils vont voir ailleurs ;)
- pour la font, normalement @fontface bien mis ce devrait être bon
- pour le reste je te conseillerais de tester sur des sites qui te donnent l'aperçu selon les différentes tailles d'écran ...
Bonjour bg 62 !
Tout d'abord merci pour ta réponse ! Je n'arrive vraiment pas à mettre en place @fontface... J'ai mis ma police sur le site suivant afin d'avoir tout les formats demandés :
http://www.font-face-generator.com/
J'ai regardé plusieurs sites l'expliquant mais je n'arrive pas à comprendre... Je viens de mettre à jour mon site avec la Helvetica Light 45 et le @fontface (uniquement en test sur la page présentation) mais ça ne fait rien du tout... J'ai suivi à la lettre ce site :
http://css.mammouthland.net/css3/font-face.php
Aidez-moi svp (ce message est un cri de désespoirs) (humour...mais quand même!)
Tout d'abord merci pour ta réponse ! Je n'arrive vraiment pas à mettre en place @fontface... J'ai mis ma police sur le site suivant afin d'avoir tout les formats demandés :
http://www.font-face-generator.com/
J'ai regardé plusieurs sites l'expliquant mais je n'arrive pas à comprendre... Je viens de mettre à jour mon site avec la Helvetica Light 45 et le @fontface (uniquement en test sur la page présentation) mais ça ne fait rien du tout... J'ai suivi à la lettre ce site :
http://css.mammouthland.net/css3/font-face.php
Aidez-moi svp (ce message est un cri de désespoirs) (humour...mais quand même!)
Bonjour,
Vous dites: "Helvetica Light 45"
ce sont des fontes Windows.... Elles ne seront pas visibles sur une tablette ou un téléphone mobile....
par expérience:
- en 2010 j'avais moins de 1% de visiteurs par tablette,
- aujourd'hui, en 2014 j'ai entre 20 à 40% de visiteurs par tablette....
1er problème : tous les navigateurs n'intègrent pas la fonction @font-face
Les anciennes versions d'Internet Explorer ne comprennent pas l'instruction @font-face
2ème problème : tous les navigateurs ne savent pas lire les mêmes famille de polices.
C'est un peu comme si certains navigateurs pouvaient lire le format ".jpg", et pas le format ".png". Pour qu'une police de caractère soit lisible sur tous les navigateurs, il faut donc proposer les différents formats possibles pour une même police dans votre feuille de style.
3ème problème : à moins de les acheter, vous ne pouvez utiliser que des polices libres de droit.
Certaines polices de caractère peuvent être utilisées pour un site non commercial mais pas pour un site commercial, etc. A vous donc de trouver la police qui convient.
Pour avoir le maximum de contrôle sur l'affichage, il est donc aussi important de déterminer les polices alternatives ainsi que la famille.
font-family: Arial, Helvetica, Verdana, sans-serif;
Police souhaitée : Arial
Police alternative : Helvetica et verdana
Famille : sans-sérif
Voici la liste des Web-safe fonts (PC, Mac, Linux) :
--SERIF--
Georgia
Times New Roman
--SANS-SERIF--
Andale Mono
Arial
Arial Black
Impact
Trebuchet MS
Verdana
Webdings
--CURSIVE--
Comic Sans MS
--MONOSPACE--
Courier New
Et proposez toujours une alternative à une fonte, exemple:
ici on propose ARIAL et SANS-SERIF
alors que sur votre site:
qui est une fonte inconnue sur mon PC. Résultat: affichage "moche" en Courrier!!!!
A+
Vous dites: "Helvetica Light 45"
ce sont des fontes Windows.... Elles ne seront pas visibles sur une tablette ou un téléphone mobile....
par expérience:
- en 2010 j'avais moins de 1% de visiteurs par tablette,
- aujourd'hui, en 2014 j'ai entre 20 à 40% de visiteurs par tablette....
1er problème : tous les navigateurs n'intègrent pas la fonction @font-face
Les anciennes versions d'Internet Explorer ne comprennent pas l'instruction @font-face
2ème problème : tous les navigateurs ne savent pas lire les mêmes famille de polices.
C'est un peu comme si certains navigateurs pouvaient lire le format ".jpg", et pas le format ".png". Pour qu'une police de caractère soit lisible sur tous les navigateurs, il faut donc proposer les différents formats possibles pour une même police dans votre feuille de style.
3ème problème : à moins de les acheter, vous ne pouvez utiliser que des polices libres de droit.
Certaines polices de caractère peuvent être utilisées pour un site non commercial mais pas pour un site commercial, etc. A vous donc de trouver la police qui convient.
Pour avoir le maximum de contrôle sur l'affichage, il est donc aussi important de déterminer les polices alternatives ainsi que la famille.
font-family: Arial, Helvetica, Verdana, sans-serif;
Police souhaitée : Arial
Police alternative : Helvetica et verdana
Famille : sans-sérif
Voici la liste des Web-safe fonts (PC, Mac, Linux) :
--SERIF--
Georgia
Times New Roman
--SANS-SERIF--
Andale Mono
Arial
Arial Black
Impact
Trebuchet MS
Verdana
Webdings
--CURSIVE--
Comic Sans MS
--MONOSPACE--
Courier New
Et proposez toujours une alternative à une fonte, exemple:
body, td, a, p, .h {
font-family: arial,sans-serif;
}
ici on propose ARIAL et SANS-SERIF
alors que sur votre site:
font-family: "HelveticaNeueLT Com 25 UltLt";
qui est une fonte inconnue sur mon PC. Résultat: affichage "moche" en Courrier!!!!
A+
j'ai pas compris
ne pas confondre fichier et dossier
si ta police s'appelle par ex
515167237-HelveticaNeueLTCom-Lt.eot'
que lu l'as mise dans un dossier Polices
tu auras n'auras pas
src: url('515167237-HelveticaNeueLTCom-Lt.eot');
mais
src: url('Polices/515167237-HelveticaNeueLTCom-Lt.eot'');
pour en savoir plus
https://www.alsacreations.com/astuce/lire/78-quelle-est-la-diffrence-entre-les-chemins-relatifs-et-absolus.html
et evite les nom trop compliqué renomme ca avec un nom plus simple
ne pas confondre fichier et dossier
si ta police s'appelle par ex
515167237-HelveticaNeueLTCom-Lt.eot'
que lu l'as mise dans un dossier Polices
tu auras n'auras pas
src: url('515167237-HelveticaNeueLTCom-Lt.eot');
mais
src: url('Polices/515167237-HelveticaNeueLTCom-Lt.eot'');
pour en savoir plus
https://www.alsacreations.com/astuce/lire/78-quelle-est-la-diffrence-entre-les-chemins-relatifs-et-absolus.html
et evite les nom trop compliqué renomme ca avec un nom plus simple
D'accord j'ai tout renommé, et j'ai mis tout mes fichiers au bon format dans le dossier racine, et j'ai modifié dans mon fichier .css le chemin url mais mon problème persiste... Je pense que j'ai mal fait quelque chose (c'est même sûr.. mais je suis incapable de savoir où..)
déja tu n'as pas mis les quotes et tu n'a pas mis les formats
essaie comme ca
@font-face{
font-family : "maFonte";
src : url('Fonts/Light.eot'); /* Pour IE9 */
src : url('Fonts/Light.eot?') format('eot),
url('Fonts/Light.woff') format('woff'),
url('Fonts/Light.svg#abcd') format('svg'),
url('Fonts/Light.ttf') format('truetype');
}
body { height:100%; font-family: "maFonte";
direction: ltr; font-size:100%; }
h4 {
font-family: "maFonte";
font-size:1em;
}
si ca marche après essaie de rajouter les font-weight
essaie comme ca
@font-face{
font-family : "maFonte";
src : url('Fonts/Light.eot'); /* Pour IE9 */
src : url('Fonts/Light.eot?') format('eot),
url('Fonts/Light.woff') format('woff'),
url('Fonts/Light.svg#abcd') format('svg'),
url('Fonts/Light.ttf') format('truetype');
}
body { height:100%; font-family: "maFonte";
direction: ltr; font-size:100%; }
h4 {
font-family: "maFonte";
font-size:1em;
}
si ca marche après essaie de rajouter les font-weight
essaie celui-ci :
https://www.fontsquirrel.com/tools/webfont-generator
quand tu télécharges les fichiers, tu as en plus un modèle de feuille css avec ;)
https://www.fontsquirrel.com/tools/webfont-generator
quand tu télécharges les fichiers, tu as en plus un modèle de feuille css avec ;)
Bonjour à tous !
Merci pour vos réponses, mais le problème persiste... C'est la guerre ! Voici mon code (css) présent sur la page index :
Voici mon code :
* {margin:0; padding:0; border:0;}
body { background-color:#fff; font-family: "HelveticaNeueLT Com 45 Lt"; font-size:0.750em; }
@font-face {
font-family: "Helvetica Neue LT Com";
src: url('Fonts/Light.eot'); /* Pour IE9 */
src: ('Fonts/Light.eot?#iefix') format('embedded-opentype'),
url('Fonts/Light.svg#Helvetica Neue LT Com') format('svg'),
url('Fonts/Light.woff') format('woff'),
url('Fonts/Light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Quel est le problème ?
Merci pour vos réponses, mais le problème persiste... C'est la guerre ! Voici mon code (css) présent sur la page index :
Voici mon code :
* {margin:0; padding:0; border:0;}
body { background-color:#fff; font-family: "HelveticaNeueLT Com 45 Lt"; font-size:0.750em; }
@font-face {
font-family: "Helvetica Neue LT Com";
src: url('Fonts/Light.eot'); /* Pour IE9 */
src: ('Fonts/Light.eot?#iefix') format('embedded-opentype'),
url('Fonts/Light.svg#Helvetica Neue LT Com') format('svg'),
url('Fonts/Light.woff') format('woff'),
url('Fonts/Light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Quel est le problème ?
J'ai voulu contourné le problème en mettant une nouvelle police (Din family light)
Je l'ai uniquement mis en essai sur ma page index, mais ça ne fonctionne toujours pas .. le @font-face n'est vraiment pas mon copain !
Quelqu'un peut il m'aider svp ?
Je l'ai uniquement mis en essai sur ma page index, mais ça ne fonctionne toujours pas .. le @font-face n'est vraiment pas mon copain !
Quelqu'un peut il m'aider svp ?
Bon... Ca fonctionne !! Un sourire se redessine sur mon visage !! Par contre je m'excuse d'avance au près des puristes... Je ne pense pas que la manière soit la plus recommandée... Bref, me voici sur la dernière ligne droite..
Que me conseillez-vous comme tutoriels pour utiliser les medias queries ? Je veux (enfin j'aimerais) que mon site s'adapte à tout types de résolutions.. Et j'imagine que ça doit pas être très facile facile...
Que me conseillez-vous comme tutoriels pour utiliser les medias queries ? Je veux (enfin j'aimerais) que mon site s'adapte à tout types de résolutions.. Et j'imagine que ça doit pas être très facile facile...
