[PRO] Fanny - Mannequin

[EDIT - 07/11/2012]
Version responsive design faites
Accueil : Remplacement scroll actualités par pagination Jquery
Utilisation icones SVG pour version mobile
Ajout d'un systeme aléatoire de citations dans le header

--------------------------

Bonjour a tous,

J'ai crée ce site il y a déjà quelques temps, il n’était prévu que sur ordinateur.
Mais j'ai voulu me lancer l'objectif de le rendre "Responsive Design" afin de l'adapter aux autres résolutions, mobiles et tablettes.
J'ai donc re-arranger mon site.

Qu'en pensez-vous ? J'attends vos critiques constructives sur la programmation et le design.
Merci

Lien
Modifié par fanny95 (07 Nov 2012 - 11:54)

Salut Fanny,

Ça manque de titraille, je mettrais au moins un h1 sur le nom du site dans le header.

La meta viewport est trop restrictive, elle empêche le zoom par les utilisateurs ayant des problèmes de vue. Ceci suffit largement :

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Pour le reste, rien à dire sur iPad et iPhone.

EDIT: Enfin en version iPhone, ça serait sympa de mettre quand même une photo en page d'accueil sinon ça fait un peu tristounet pour un site de mannequin.
Modifié par Patidou (14 Oct 2012 - 10:56)

Bonjour,

C'est très rectangulaire. Pour ma part, je verrais bien des arrondis, un padding et une bordure pour le conteneur principal, et des arrondis pour les photos.

Il y a des photos dont des zones de couleurs périphériques se fondent dans la couleur de leur background ou sont idenitques à celle-ci. Dans te tels cas, habituellement, on délimite la photo par une bordure.

Rien à dire pour l'affichage sur mobile ou tablette (je n'en ai pas), ni sur le code.

Bonne continuation.

Salut,

Côté code je crois que tu as des attributs javascript dépréciés genre 'language'. Tu utilises des input type HTML5 avec un doctype XHTML Strict.

Côté design c'est classe, le responsive est bien réalisé. Le noir et blanc est un bon choix. C'est un design minimaliste réussi.

fanny95 a écrit :
... critiques constructives sur la programmation et le design

Heureusement que t'as précisé

Plus sérieusement, le contenu est là, le design n'est pas trop obstrusif et la navigation est claire, l'adaptation mobile est bien faite, donc c'est nickel de mon côté.

Y a juste la police du logo que j'aime pas trop, et l'image-captcha du contact form ... j'aime pas trop ce genre de systèmes, ça fait un peu "formulaire d'inscription".

:)

Bonjour,

Pour moi aussi le design est tout bon (de l'arrondi et des bordures partout, ça ferait très viellot, en fait).

Pour le code :
* Il y a effectivement quelques petites erreurs de code au validateur (language, target, iframe).

* Il y a pas mal à faire niveau performances : http://gtmetrix.com/reports/www.fannymoritz.fr/ Principalement sur les JavaScripts et les dimensions d'images

* Un lien ne doit jamais être vide, pour tes changement de langue il faut placer les images dans le code HTML avec un texte alternatif (je veux bien que ton contenu présente principalement des images, mais une personne man/non-voyante pourrait aussi être intéressée par tes coordonnées).

* <div class="clear"></div> un élément vide est généralement un élément inutile. Il y a moyen de faire sans.

* L'attribut title n'a rien à faire sur une image, surtout s'il contient exactement la même chose que le alt de l'image et que le title du lien qui est sur l'image. Dans ce cas précis le title du lien est aussi inutile, en plus d'être redondant.

* Toujours à propos de title : ce n'est pas un attribut obligatoire du lien. Le title doit apporter une information supplémentaire à l'intitulé du lien ET nécessaire à la bonne navigation du visiteur. Un title qui reprends exactement l'intitulé du lien est inutile et gênant (il créé du "bruit"). C'est le cas pour ton menu.

* Le target blank sur le liens, c'est la plaie. En plus de déranger ton visiteur, tu risques le perdre (ce qui est je crois l'inverse du but recherché).

* Les doubles <br> successifs sont le signe certains qu'un nouveau paragraphe aurait du être créé. D'ailleurs, tu utilises peu cet élément.

* Attention dans tes "news", à ne pas remplir alt juste pour remplir alt. Si le contenu alternatif de l'image est redondant avec le titre qui précéde l'image, il est préférable de laisser alt vide.

* <li><p>Shooting photos</p></li> le paragraphe n'est pas vraiment nécéssaire.

fanny95 a écrit :

A quelle police pensais-tu pour les textes ?

Je sais pas trop, peut être Carrois Gothic, bref une police qui colle un peu mieux au design. Car sous Windows on se retrouve avec de l'Arial toute moche.

fanny95 a écrit :

Et pour la résolution trop basse je ne comprends pas ce que tu as essaye de me dire. Peux-tu m'expliquer stp ?

Ne fais pas attention, c'était juste une boutade.

Laurie-Anne

a écrit :
de l'arrondi et des bordures partout, ça ferait très viellot, en fait

Ah ! J'ai dû intervertir quelques phases de l'évolution du design web. Je ne pensais pas que les arrondis (CSS3) étaient vieillots et que le tout-rectangulaire (CSS 2.1) était le summum de la modernité.

thierry a écrit :
Ah ! J'ai dû intervertir quelques phases de l'évolution du design web. Je ne pensais pas que les arrondis (CSS3) étaient vieillots et que le tout-rectangulaire (CSS 2.1) était le summum de la modernité.

Merci pour la déformation de propos...

Mais je reste sur ma position, de l'arrondi + bordure partout, c'est super ringard en règle général et pour ce qui est de mordernité, vu que la grande majorité des sites en 95 arboraient ce look "moderne", je crois que c'est raté...

ps. : la tendance design, c'est un peu de réduire les fioritures en ce moment (ce que fait le site de Fanny).

Salut
Chez moi (sous opéra) quand je clique sur langue anglaise puis sur ton nom/logo, ça ressort une erreur 404. De même, dans la version anglaise "actualités" reste tel quel et n'est pas traduit.

Bonne continuation
Tom

Laurie-Anne

a écrit :
ps. : la tendance design, c'est un peu de réduire les fioritures en ce moment (ce que fait le site de Fanny).

Je ne pense pas que des rectangles à coins arrondis soient des "fioritures" par rapport à de simples rectangles, ce sont simplement des formes différentes, sans ajout d'éléments, sans surcharge, et des bordures pour délimiter des images dont les couleurs périphériques se confondent avec celle du background ont un rôle fonctionnel, mais bon...
Modifié par thierry (19 Oct 2012 - 16:13)

thierry a écrit :
Ça, c'est tout à fait exact... Mais les designs comportant des arrondis se sont multipliés après l'apparition de border-radius.

Oui ils se sont multipliés depuis, c'est là la facilité de le faire qui en est la cause.

thierry a écrit :
Bin si : pas de texte ombré sans text-shadow, pas de polices non-standard sans @font-face, etc., etc. La tendance est conditionnée par les possibilités techniques.

Pour l'historique, @fontface existe depuis 98 (css2.0), mais a été retiré de la spec lors de la révision css 2.1. Toutefois, ie6 gérait déjà les polices non web-safe. Idem pour les text-shadow, IE savait également les gérer (+ d'autres effets) via les filtres. Tout ça pour dire que la technique existait déjà, mais aujourd'hui il est bien plus aisé de la mettre en place.

Concernant la tendance épuré, je suis en accords avec Laurie-Anne, mais les tendances changent avec le temps, les sites aux coins arrondis tendent à diminuer (observation personnelle). Bizarrement, je trouve des similitudes entre le design adopté par microsoft et la tendance du web. Hier xp/seven aux coins arrondis, aujourd'hui métro en style "Flat design" coins carrés... à voir dans un avenir proche, mais je pense que les interfaces carrés & épurés ont de beaux jours devant elles.

Excellente conf de @fran6 & @desbenoit en fin d'après-midi à ParisWeb à ce sujet.

Ps: pas évident de suivre la conversation lorsque tu édites un message 13h après.
Modifié par fufu (19 Oct 2012 - 23:15)