[PRO] Fanny - Mannequin

(reprise du message précédent)

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)

Bonsoir,

Personnellement, je ne suis pas arrivé à lire l'image captcha du formulaire...

@fufu

fufu

a écrit :
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.

On ne se comprend peut-être pas. Quand je parlais de technique préalable à l'expression d'une tendance, j'entendais par là technique au sens général, et pas technique CSS. Alors, oui, bien sûr, les designs web arrondis existaient avant border-radius, et le texte ombré avant text-shadow, mais il existait bien des techniques pour réaliser cela (logiciels graphiques pour les arrondis en background-image ou JavaScript, filtres IE pour le texte ombré), et dans ce cas, cela n'invalide pas mon affirmation, qui est un pur truisme.

fufu

a écrit :
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.

Chacun cherche à démarquer ses créas de l'existant : un excès de designs rectangulaires suscite l'apparition de designs arrondis, et un excès de designs arrondis suscite l'apparition de designs rectangulaires. Tout à fait d'accord, le balancier du design oscille dans un sens puis dans l'autre.

Néanmoins, si la tendance que tu pointes se confirme, le webdesign me paraît bien la seule forme de design à tendre vers le rectangulaire. Dans le design matériel, dans les objets de notre environnement, le design arrondi est partout : voitures, PC portables, tablettes, smartphones, ainsi que les icônes de leurs apps (Le design de l'iPhone est-il très vieillot ?), TVs, électro-ménager, hifi, etc., etc.

Certes, dans ces domaines il peut y avoir d'autres considérations que le plaisir de l’œil (aérodynamisme, prise en main plus agréable ou plus efficace, cognements moins douloureux avec des coins arrondis qu'avec des angles vifs, etc., etc.). Néanmoins, autres considérations ou pas, le fait est là : le design arrondi est massivement présent.

Personnellement, je pense cependant que les formes arrondies nous sont plus “naturelles”, sont mieux “accordées” à notre système perceptuel, qui a été façonné par un environnement naturel dans lequel les formes rectangulaires sont inexistantes.

Enfin, comme dit dans un commentaire précédent, je ne trouve pas que des formes arrondies soient moins épurées que des formes strictement rectangulaires : ce sont d'autres formes mais elles ne sont pas moins épurées. Pour moi, dire qu'un rectangle à coins arrondis est moins épuré qu'en rectangle sans coins arrondis, cela revient à dire qu'un hexagone est moins épuré qu'un rectangle.

Dans cet ordre d'idées, on pourrait aussi prétendre qu'une Ferrari est moins épurée qu'une Willys Jeep bien rectangulaire de la Seconde Guerre mondiale.

Quelques liens pour la réflexion :

http://www.hg2s.com/blog/2011/09/09/the-eye-of-the-beholder-why-we-prefer-rounded-corners-in-designs/
http://uxmovement.com/thinking/why-rounded-corners-are-easier-on-the-eyes/
http://www.basement.org/2005/11/why_do_we_love_rounded_corners.html

PS : ta vraie tête est plus sympa que ton avatar sur Alsa.

PPS : pour le commentaire modifié, il me semblait plus simple d'y rajouter des éléments que de tout mettre en citation dans un nouveau commentaire, mais c'est vrai que ça ne facilite pas le suivi des échanges. Mes excuses.
Modifié par thierry (24 Oct 2012 - 13:05)

Merci a tous pour vos commentaires.

J'ai essaye d'optimiser au maximum. Je suis allee sur ce site internet (gtmetrix.com) pour regarder les gros soucis d'optimisation. Et je ne comprends pas "Specify an expiration". Ou dois-je rajouter cela ?

D'autre part, je viens d'avoir certains retours de mes amis comme quoi sur iphone ca ne fonctionne pas au niveau de l'affichage des photos. Et que cela renvoit a la page d'accueil. Ce qui me semble tres louche car tout fonctionne sur le mien et sur ordi lorsque je redimensionne ma fenetre. Quelqu'un pourrait-il verifier que ca marche chez vous ? Auriez-vous une piste d'ou cela peut venir svp ? Je ne comprends vraiment pas

fanny95 a écrit :

J'ai essaye d'optimiser au maximum. Je suis allee sur ce site internet (gtmetrix.com) pour regarder les gros soucis d'optimisation. Et je ne comprends pas "Specify an expiration". Ou dois-je rajouter cela ?

Je pense dans ton fichier .htaccess fanny:

## - Expire headers
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 7200 seconds"
ExpiresByType image/jpg "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
AddType image/x-icon .ico
ExpiresByType image/ico "access plus 2592000 seconds"
ExpiresByType image/icon "access plus 2592000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType text/css "access plus 2592000 seconds"
ExpiresByType text/javascript "access plus 2592000 seconds"
ExpiresByType text/html "access plus 7200 seconds"
ExpiresByType application/xhtml+xml "access plus 7200 seconds"
ExpiresByType application/javascript A259200
ExpiresByType application/x-javascript "access plus 2592000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
</IfModule>

Modifié par jmlapam (25 Oct 2012 - 19:54)

Question perfs, y'a encore un peu de marge.
En activant gzip et en compressant les images, avec jpegmini par exemple, tu dois pouvoir gagner quelques centaines de kb rien que sur la page d'accueil.

Pour avoir un audit plus fin que gtmetrix, utilise webpagetest.

fanny95 a écrit :
J'ai essaye d'optimiser au maximum

Cette image est un exemple type de ce qu'il faut éviter:

- Réglez votre Photoshop pour ne pas enregistrer les JPG en qualité 100% (95-90 peut être un bon compromis);
- Dimensionnez vos photos aux définitions utiles (supprimer les "blancs");
- Convertir l'image en GrayScale (niveaux de gris, et pas TrueColor).

Ces conditions réunies, l'image perdra 2.5x son poids d'origine.

Coucou

Merci pour vos 3 reponses. Elles m'ont ete d'une grande aide !

J'ai adore le lien Jpegmini. Je ne connaissais pas celui-la. Juste : Smush it. Mais a vrai dire, Jpegmini est beaucoup plus performant ! J'adore J'ai donc optimiser toutes les images de mon site internet et gagner 2 secondes de chargement, la classe =D

J'ai modifie mon htaccess pour les headers (expiration).

Il me reste plus qu'a faire le gzip, mais faut que je me penche un peu plus sur sur le sujet pour voir ce qu'il faut bidouiller car a vrai dire, je n'ai jamais compris. Merci de cette piste interessante !

Par contre, du coup, pouvez-vous me dire svp pour les detenteurs d'iPhone si les photos chargent chez vous ? Car mes amis se sont plein que ca ne fonctionnait pas alors que sur mon iPhone tout fonctionne correctement.

Je vous remercie pour vos retours !

Si tu ne souhaites pas passer par un site tel que smush it ou jpeg mini pour améliorer la taille de tes images tu peux utiliser ImageOptim sur Mac ou RIOT sur PC, ces outils nettoient les fichiers et te feront gagner des précieux KO sur tes dossiers d'images

PS : c'est vendredÿ, tu veux m'épouser ?

Je n'ai pas d'iphone sous la main, mais sur ipad on n'a pas les actus, les images sont tronquées en largeur, la flèche droite de nav disparait, la flèche gauche est tronquée.
Tu peux le constater en redimensionnant ta fenêtre (au moins sous mac ff/chrome)
Edit: si t'es sous mac, installe Xcode, un simulateur ios est fourni.
Modifié par paolo (28 Oct 2012 - 10:33)

Merci SuperMerguez pour l'astuce de ImageOptim !
PS: Jte repondrais vendredy prochain lol

Paolo, merci pour tes retours explicites. Je vais voir ca tout de suite.

A bientot !

paolo a écrit :
Je n'ai pas d'iphone sous la main, mais sur ipad on n'a pas les actus, les images sont tronquées en largeur, la flèche droite de nav disparait, la flèche gauche est tronquée.
Tu peux le constater en redimensionnant ta fenêtre (au moins sous mac ff/chrome)
Edit: si t'es sous mac, installe Xcode, un simulateur ios est fourni.

Merci Paolo.
J'ai mis a jour mon site internet pour version iPad et iPhone. Les images a présent ne sont plus tronquées. Et on voit toujours les actus sur iPad. Par contre je vais changer ce système d actu et faire plus en mode "blog" avec un système de date. Donc je vais changer ce système d'actualités et revoir les versions sur tablette mobile etc (tout ce qui est inférieure aux pc).

Sinon j'avais quelques questions pour vous.

J'ai ajouté des icônes sur le menu de navigation. Comment trouvez-vous ? Elles sont un peu grandes selon moi. Et pas nettes sur iPhone. Quelqu'un aurait il une idée d'où ça pourrait venir ? Résolution de l'image ? Car je l'ai fais plus grande pour justement les écrans retina mais j'ai du louper quelque chose.

Bonjour Fanny,

De quelles icônes parles-tu ?
Sinon :

<p>
        <label for="name">Nom *</label>
        <input id="nom" name="nom" type="text" value="" class="valid" />
</p>

Je parle des icônes du menu (accueil - a propos - photos...) qui se situe a chaque fois en fin de page. Les icônes sont a gauche du texte.

Pourquoi as tu copié collé du code de mon form de contact il est incorrect ?

fanny95 a écrit :
Je parle des icônes du menu (accueil - a propos - photos...) qui se situe a chaque fois en fin de page. Les icônes sont a gauche du texte.

Ah ok... sur la version mobile (suis-je bête ) même sur desktop (redimentionnement de la fenêtre), je ne les trouve pas "nettes", et effectivement un poil trop grandes...
Je jetterai un œil sur mobile.

fanny95 a écrit :
Pourquoi as tu copié collé du code de mon form de contact il est incorrect ?

Le label n'est pas explicite (name/nom)

ps: je t'avais envoyé quelques mp (ou mails ?) à propos des sites de restauration il y a un moment, tu en as pris connaissance ?
reps: C'est moi le preums pour la demande en mariage !
Modifié par 6l20 (01 Nov 2012 - 10:40)

Pas de soucis. Faudra que je me renseigne sur le forum comment rendre les images nettes en version mobile avec ecran retina.

Sinon, j'ai mis a jour le fonctionnement des actualites, plus mode "blog". Bien que ce ne soit pas parfait. Quel est le mieux selon vous ?
- Systeme de pagination
- Ou afficher les 3 dernières actualites sur la page d'accueil avec un lien bouton en fin de scroll permettant d'acceder a la page Actualites (nouvelle page du coup) avec cette fois ci toutes les actu, et egalement un mode de pagination.

Ps : J'ai refais egalement mon formulaire de contact

Pour repondre a ta question, je viens de checker mes mails et msg, et je n'ai pas de messages de toi a propos de mes sites. C'est bizarre pourtant car ca me dit vaguement quelque chose. Si tu retrouves le mail renvoit le moi

Salut Fanny,

le scroll est pas top je trouve.
je trouve aussi le footer un peu proche du bas de la feuille. Tu me diras c'est le principe mais perso j'aurais préféré un petit espace, je sais pas pourquoi.

Pour ton formulaire, pour l'input type number, initialise le à 10000 parce que t'as un code à 6 chiffres. Ou alors c'est moi qui chipote pour rien. Fort possible. À toi de voir.

Maintenant tout ça c'est du détail. En revanche ce qui n'en n'est pas à mon sens c'est le formulaire qui te fait perdre toutes les données que t'as tapées en cas d'erreur. Rédhibitoire.

Une petite coquille : "champs mal remplit."> remplis

Voilà a toutes.
Modifié par jmlapam (01 Nov 2012 - 22:02)

Hello Fanny,


Mail retrouvé et renvoyé

Pas super fan non plus du scroll
Peut-être un système d'onglet dans ce style ?! Ou idTabs etc...
A essayer...

ps: le lien vers le site d'Olivier Merzoug n'est pas bon (wwww...) très belles photos

Je trouve aussi que c'est pas top le scroll Car quand tu es en version "tablette" tu as du coup deux scroll. Faut que je trouve une autre solution ! Le systeme des onglets ne me convient pas car il y aura bcp plus d'actualites donc au final pas assez de place en onglets en largeur.

Merci pour le lien du site d'Olivier, j'ai rectifie l'url.

Et pour le formulaire de COntact, j'ai du toucher quelque chose qui ne falait pas car plus rien ne fonctionne en effet on ne retrouve plus les champs remplit ! Rrrrr. Je verrais ca ce soir je dois partir au travail.

Merci pour vos retours !

Choses que j'ai changées récemment :
- ajout de citations aléatoires dans le header
- footer plus grand
- remplacement de la police des paragraphes
- images svg pour mobile : menu de navigation, flèches de la liste a puces et "retour aux catégories" dans la page photos

Choses a faire :
- Rendre le site W3C et HTML5
- Ameliorer les performances
- Tester le site sans JS, et en navigation clavier
- Rubrique photos : Ajouter une option plein ecran et navigation au clavier pour changer de photos