Referencement naturel/Responsive Web Design

Fermé
alexlb06 Messages postés 4 Date d'inscription mercredi 1 août 2012 Statut Membre Dernière intervention 1 août 2012 - 1 août 2012 à 14:25
Nxl Messages postés 1038 Date d'inscription mardi 2 février 2010 Statut Membre Dernière intervention 5 janvier 2017 - 1 août 2012 à 15:03
Bonjour,

Je suis actuellement un stagiaire en cours de réalisation d'un site informatique à propos d'une agence immobilière.
J'aurais voulu avoir des informations concernant le référencement naturel, les liens, le poid des images, le renouvellement des pages. Toutes les infos ou les liens que vous avez concernant ce sujet là car je dois avancer sur le reste du site et notamment ce qui m'amène à ma deuxième question:

Le responsive web design qu'en pensez vous et comment l'avez vous mit en place sur votre site pour qu'il s'adapte aux différents terminaux.

Globalement doit on faire une feuille pour les ordis une pour les format ipad et une pour le format iphone?

Merci d'avance et passez une bonne journée.

De plus vous pouvez me joindre par message privé..
A voir également:

4 réponses

mimigenie Messages postés 1180 Date d'inscription dimanche 3 janvier 2010 Statut Membre Dernière intervention 4 août 2018 313
1 août 2012 à 14:30
Pour le référencement, tape "référencement" dans le champ de recherche de ccm et tu trouveras plein de fiche pratique donnant de bon conseil.

Une feuille pour chaque type de terminal est une bonne idée mais pour les mobiles il est parfois utile de faire une version entière du site uniquement pour les mobiles.
Pour une adaptation simple et rapide, l'utilisation de valeur relative ( en % ou en em ) est une très bonne chose.
1
Nxl Messages postés 1038 Date d'inscription mardi 2 février 2010 Statut Membre Dernière intervention 5 janvier 2017 133
Modifié par antoine7104 le 1/08/2012 à 14:53
Moi ce que je te recommanderai c'est de faire faire une feuille de style avec dedans toute les propriétés global (quelque soit les résolutions) et toujours dans cette feuille de style ajouter ceci par exemple :

/****************************************************/    
/* 1200px (>= 481px)                                                      */    
/****************************************************/    

 @media only screen and (min-width: 481px) {    

/*    
...    
*/    
}    

/****************************************************/    
/* 1000px (>= 481px && <= 1199px)                               */    
/****************************************************/    

 @media only screen and (max-width: 1199px) and (min-width: 481px) {    

/*     
...    
*/

/****************************************************/    
/* Mobile (<= 480px)                                          */   
/****************************************************/    

 @media only screen and (max-width: 480px) {    

/*    
...    
*/    

}    



évidement les valeurs sont des exemples (sauf pour mobile) et étant donner que les iPad on des résolutions aussi grande que les ordinateurs il sont fait pour aller sur les même versions des sites que les PC.
Sinon évidement je te recommande d'éviter les valeurs donner en px. ;)
1
alexlb06 Messages postés 4 Date d'inscription mercredi 1 août 2012 Statut Membre Dernière intervention 1 août 2012
1 août 2012 à 14:55
Si je comprends bien antoine, je rajoute ces éléments là à la fin de la feuille de CSS comme ça si je veux changer la taille d'un texte mais garder sa couleur je n'aurais juste qu'à spécifier sa taille pour la résolution en question
0
alexlb06 Messages postés 4 Date d'inscription mercredi 1 août 2012 Statut Membre Dernière intervention 1 août 2012
1 août 2012 à 14:40
Pour l'instant j'ai adapté la majorité de mes valeurs en % sauf pour certains div car ça ne veux pas s'adapter comme avec les valeurs en pixels et je ne comprends pas pourquoi.
J'ai également ajouté la balise meta viewport

Merci du conseil à bientôt
0
Nxl Messages postés 1038 Date d'inscription mardi 2 février 2010 Statut Membre Dernière intervention 5 janvier 2017 133
1 août 2012 à 15:00
Voila par exemple dans le global tu mets ça :
p {
			color: #006699;
			font-size: 13.5pt;
			font-family: 'Yanone Kaffeesatz';
		}

/* et pour les plus petit écrans */

@media only screen and (max-width: 1199px) and (min-width: 481px) { 

p {
			font-size: 10pt;

}

ainsi pour les écrans d'une résolution inférieur à 1199 px mais supérieure à 481 (donc pas mobile) ton texte sera plus petit.
0
alexlb06 Messages postés 4 Date d'inscription mercredi 1 août 2012 Statut Membre Dernière intervention 1 août 2012
1 août 2012 à 15:02
ça marche merci beaucoup passes une bonne journée
0
Nxl Messages postés 1038 Date d'inscription mardi 2 février 2010 Statut Membre Dernière intervention 5 janvier 2017 133
Modifié par antoine7104 le 1/08/2012 à 15:04
De rien. ;) Merci toi aussi. :)
0