[Amateur] Jojaba pour petite largeur d'écran

Bonjour,

site : http://jojaba.free.fr
Je pense que ma nouvelle feuille de style pour petite largeur d'écran (< 1024px) peut être soumise à vos critiques.
Je ne donne pas d'autres explications pour l'instant, je réagirai à vos appréciations
Sachez que je me suis fortement inspiré du livre de Raphaël (css avancées) et que c'est la toute première fois (toutoute première fois x3) que je réalise une feuille de style pour petite largeur d'écran.
Les points à améliorer probablement : les onglets menu du haut, la taille de la police en cas de petit écran de 240px.
Pour information, j'ai testé cette mise en page sur Opera Mobile Emulator et sur Safari avec activation du menu de développement (cela vous permet de changer l'agent utilisateur).
Merci d'avance
Modifié par jojaba (29 May 2012 - 06:30)

Je ne vois pas de bug en diminuant la taille de la fenêtre, bien joué !


-Sur le code HTML :

La meta keywords est inutile.

Tu peux éviter une requête en fusionnant les 2 fichiers CSS principaux.

Pourquoi encoder certaines apostrophes ?

Il faut éviter les attributs style.


-Sur le code CSS :

Les 2 fichiers CSS principaux font au total 55 ko (cf. analyse http://gtmetrix.com ), ça me parait vraiment énorme.

html
{
	margin: 0px;
	padding: 0px;
}

L'unité est inutile quand la valeur est 0. D'ailleurs je te conseille de regrouper les margin: 0 et padding: 0 dans un reset au début du fichier CSS.

J'augmenterais le line-height pour améliorer la lisibilité.


-Autre :

Le flux RSS est invalide : http://validator.w3.org/unicorn/check?ucn_uri=jojaba.free.fr%2F&ucn_task=conformance#feed
Modifié par maximemixam (29 May 2012 - 11:14)

Merci pour tes remarques maximemixam.
Mes commentaires sous les tiens...

maximemixam a écrit :

La meta keywords est inutile.

Oui, mais mon cms les propose, alors je les laisse et puis en SEO, on ne sait jamais, ce qui était vrai un jour, ne l'est pas forcément un autre. Comme cette ligne ne mange pas de pain, je va la laisser.

a écrit :

Tu peux éviter une requête en fusionnant les 2 fichiers CSS principaux.

Euh là, je ne comprends pas. J'ai une css pour les écrans "larges" et une autre pour les écrans "moins large" (c'est géré par les media queries). Donc soit l'une des css est chargée, soit l'autre non ?

a écrit :

Pourquoi encoder certaines apostrophes ?

Ça c'est mon cms qui s'en occupe automatiquement il me semble...

a écrit :

Il faut éviter les attributs style.

Ben justement j'en ai très peu, tu peux me donner un exemple de page où il y en a beaucoup ?

a écrit :

Les 2 fichiers CSS principaux font au total 55 ko (cf. analyse http://gtmetrix.com ), ça me parait vraiment énorme.

Oui, c'est vrai que je ne les ai pas optimisées (enlever les espaces, retour à la ligne), c'était pour éviter de générer plusieurs css, celles qui sont utilisées en production, donc optimisée, et celles qui restent "joliment" indentées pour les modifications éventuelles. J'ai également défini des styles spéciaux pour bon nombres de fonctionnalités proposées par le cms (notamment pour la syntaxe wiki qu'il embarque, très pratique pour réaliser rapidement des articles sans grande mise en forme).

a écrit :

html
{
	margin: 0px;
	padding: 0px;
}

L'unité est inutile quand la valeur est 0. D'ailleurs je te conseille de regrouper les margin: 0 et padding: 0 dans un reset au début du fichier CSS.

Oui, ça il faut que je fasse, ça va réduire les lignes de codes effectivement.

a écrit :

J'augmenterais le line-height pour améliorer la lisibilité.

Il a déjà été augmenté (1.2) après conseils de Kustolovic ici : http://forum.alsacreations.com/topic-18-61919-1-Amateur-Jojaba-en-HTML5-.html

a écrit :

Le flux RSS est invalide : http://validator.w3.org/unicorn/check?ucn_uri=jojaba.free.fr%2F&amp;ucn_task=conformance#feed

Ah bon ? Je dois bien avouer que je n'y ai pas touché. Il va falloir que je voies ça.

Je souhaitais plutôt parler ici de l'apparence du site pour les petits écrans, si tu veux faire d'autres remarques plus générales sur le site, n'hésite pas à le faire dans la discussion dont tu peux trouver le lien plus haut