Cascading Style Summer Refresh 2010
Ariakan Webdesign par Ariakan972
Voir en ligne http://www.ariakan.com
Après refresh
Note obtenue : 6.575/10
Voir en ligne http://www.ariakan.com
Note obtenue : 6.575/10
Les commentaires sont clos.
.titanic { float:none; }
(Edward John Smith)
Commentaires
Je m'excuse d'avance pour les blocs du bas un peu "basique"... Je n'ai pas eu le temps de tout terminer ! Je corrigerai ça une fois les votes terminés.
En tout cas, concours ou pas concours je m'en fous : j'attends de vous des commentaires ! Dites moi ce qui va, ce qui ne va pas, pourquoi, comment, quoi... Je ne demande qu'à améliorer mon site/book. :)
Merci d'avance pour vos commentaires (que j'espère) constructifs !
PS : soyez méchant si il le faut, j'accepte aussi de ne pas plaire à tout le monde.
Soyez pas trop méchant sur les blocs du bas par contre, je suis déjà au courant. :p
Bonjour Ariankan972,
J'aime énormément votre header, par contre, je ne suis pas trop fan de la retouche effectuée sur votre photo, contrairement aux autres blocs qui défilent, qui ont une plus grande valeur ajoutée technique.
J'aime bien le menu javalamp, et surtout l'effort valide w3C et ie6! c'est rare :)
Bonne chance pour le concours,
Merci pour votre commentaire !
Ma plus grande galère a justement été de faire en sorte que ça tourne bien sous IE6 malgré tous les JS activés. :D
Bonne chance à vous aussi !
(je continue la liste des participants, mon commentaire arrivera bientôt sur votre page ! ;p)
Très très jolie refonte, on sent qu'il y a de la recherche et j'aime beaucoup le Header aussi...
C'est juste dommage que tu n'es pas prévu la version noscript, car si on désactive JavaScript il n'est plus du tout possible de naviguer sur ton site... :(
Tom
À propos de tes scripts il me semble qu'il faut les appeler au début de ta page... à la fin de ton document... mais je px me tromper..
Sinon j'aime beaucoup ta gamme de couleur mais trouve les vecteurs floraux un peu dépassé et pourquoi pas de faire un effet plutôt trame sur ta photo que l'effet que tu as ici actuellement?
coucou arikan972,
J'aime beaucoup le header aussi, c'est vraiment sympa, et ton cv est génial tout comme le site, mais il y a un point noir : le motif floral, trop vu et quelconque, mais il a sa place sur ton site [... je ne sais pas trop comment expliquer...] je trouve cela trop basique [pour toi // je te juge désolé] mais j'adore ton style
@Shokojjo : merci beaucoup !
Un petit peu plus de temps aurait été bénéfique pour apporter un peu plus de soin aux blocs du bas, mais tant pis. Au moins le haut plait ! :D
Pour javascript, je me suis dit exactement la même chose ce matin ! Effectivement, il ne se passe plus rien si il n'y a plus de script, mais les informations essentielles restent affichées en bas... heureusement que peu de gens désactivent le javascript ! :p
Merci encore en tout cas !
@Sogam : ben dernièrement, sur un article d'Alsacreations, ils parlaient d'afficher les scripts à la fin pour gagner du temps en chargement de la page. Et si jQuery charge avant les éléments, parfois ça peut poser problème en fonction des plugins ! Donc de ce que j'ai lu récemment, c'est mieux de mettre le javascript en fin de page (et les google analytics, etc..)
Pour la photo effectivement, j'ai pas mal hésité entre différents effets et c'est celui là qui est resté ! Mais vu que ça fait déjà deux commentaires, j'ai du me tromper... Je reverrai ça à la fin des votes alors. :p
Merci pour vos commentaires utiles !
@Anaïs-id : merci pour ton commentaire également. :)
Pour les motifs, effectivement ils sont un peu "déjà vu"... à la base, ce n'était pas un design dans ce style là que j'avais prévu (la navigation et les effets oui, mais visuellement ça devait être autre chose)
Et en faisant un essai, je me suis dit que ça allait bien avec l'ensemble... Du déjà vu avec un look rétro, ça fait ton sur ton. :D
Merci en tout cas ! :)
Hello,
Plutôt pas mal niveau design :)
Côté sémantique :
- une jolie divite (notamment pour des éléments de type bloc qui pourraient être chartés directement) ;
- les hiérarchies de titres ne sont pas respectée ;
...
Hello ! :)
Merci déjà pour ton premier commentaire, ça fait toujours plaisir. :)
Pour la hierarchie des titres, les h4 sont après les h3 qui sont après le h2 qui est après le h1. :p
Après c'est vrai que les h3 auraient pu avoir plus de h4, mais la mise en page fait que... non. :)
Pour la divite par contre, j'assume, je suis coupable !! Mais c'est pour deux raisons :
- la première est IE6 qui parfois a besoin que des css soient séparés pour mieux fonctionner, ou simplement pour pouvoir bidouiller certaines choses à cause de Jquery qu'il a du mal à interpréter correctement
- pour la mise en forme sans style css. :) Si tu désactives la CSS, tu verra que ça sera bien lisible, au lieu d'avoir à de grosses images qui gâchent la lecture. Le slider n'est pas visible, juste une image reste, mais les informations principales restent accessibles ! De plus si je veux designer un autre style avec d'autres boutons, je peux facilement le gérer en CSS pour le coup.
Bref, un choix purement technique qui n'optimise pas au maximum le code certes, mais qui heureusement ne reste pas brouillon pour autant. :)
Voilà, méa culpa et explications données. :D
Salut.
Je trouve ta refonte trés belle. Par contre le milieu du site aurait pu être traité d'une manière différente, cela dénote un peu avec le header que j'aime beaucoup.
Pour le carrousel en haut de page, il y a trop de graphisme, tu aurais peut être du épurer un peu plus pour être en adéquation avec le reste du site.
Bonne chance à toi
Oui je sais, petit manque de temps !
J'ai beaucoup bosser sur le header et faire en sorte que s'affiche exactement pareil sous Firefox, Chrome, Safari, Opera, IE8 et .... IE6 (presque réussit pour IE6, y'a juste 2-3 mini modifs)
Du coup, je n'ai pas eu le temps de peaufiner le bas... Chose que je ferai après le concours du coup. :)
En fait c'est le bas qui est censé être en adéquation avec le haut. :p
Merci pour ton retour et ton compliment !
Très beau refresh! J'adooooooooooore l'apparition de ton formulaire contact! ;D Bonne continuation!
On sent le travail d'optimisation poussé tant au niveau graphique que du code. Cela-dit, je peut me tromper, mais j'ai l'impression que tu as avancé "on the flow", sans un gros travail de recherche préalable sur une bonne vieille feuille de papier, ce qui me paraît au final desservir le site. C'est dommage car il y a de bonnes idées, comme le slide où tu as placé des animations très à propos.
Je reste sur une bonne impression quand même.
@Ecstatic : merci beaucoup ! :D
@iManu : pour te répondre, je vais faire deux séparation :
1- La partie du header + slider
2- La partie du "contenu" en dessous
-> 1. Pour le header, j'ai d'abord tout fait sur Papier : la disposition, les éléments à afficher, dans quel ordre, où, comment, etc... Les deux seules choses qui ont changé par rapport à l'idée de base sont :
a) le design, qui devait être beaucoup plus orienté illustration/peinture. Sauf qu'en commençant à designer et en posant des couleurs au pif pour dessiner les blocs, je suis arrivé à un style un poil rétro que j'ai bien aimé.
b) le slider à la base ne devait pas être comme ça, je voulais utiliser du Parallax en plus des boutons permettant de naviguer sur les plans. Sauf que JParallax n'était pas compatible avec une version récente de JQuery, donc pas compatible avec le reste de mes projets, et pas assez de temps pour essayer de débugguer... Donc je suis parti sur autre chose. :)
2- la partie du bas par contre a été terminée un peu à la dernière minute : ça manque de finition, j'en suis conscient. Et je trouve aussi qu'il manque un petit footer tout en bas. Le contenu était déjà définit, la mise en page plus ou moins, mais je n'ai pas eu assez de temps pour arranger ça, ayant passé énormément de temps sur le code et le debuggage, sans parler du JS qui faisait tout ralentir et que je devais optimiser pour certains navigateurs (IE si tu m'entends !)
Donc le gros du travail a été fait sur le header et le slider, le reste ayant été mis de côté.
(Quelque part, mieux vaut ça que l'inverse. :D Au moins, ça marque un peu !)
Je le terminerai une fois le concours terminé ! En attendant, je m'occupe d'intégrer ma page facebook et de lancer mon blog. :p
Un grand merci iManu en tout cas, ça fait plaisir à lire et les critiques sont très enrichissantes pour la suite. :)
Belle refonte !
Moi aussi c'est la photo qui m'a sautée aux yeux et que j'ai moins aimé...
Merci beaucoup ! :)
Ok ok, promis, je change la photo une fois le concours terminé ! :D
Je ne suis pas un grand fan de l'effet js sur le menu qui a tendance à sortir du cadre sur les extrémités.
Et sans js le site devient totalement inaccessible, attention!
Sinon il y a une bonne touche personnel dans le design, c'est appréciable ;-)
C'est indéniablement une des propositions à retenir. L'auteur a beau prétendre se moquer du concours, je pronostique un très bon placement au tiercé. D'autant que le joueur est fair-play et commente tous les sites, ce que je fais également, et c'est un gros travail. Puisque nous sommes encouragés à la critique allons-y…
La refonte est une réussite indéniable. Voilà un site qui allie forme et fond avec excellence. Le traitement du portrait ( en gif ) est pertinent car il intègre une touche personnelle en l'intégrant au graphisme. Les cartouches, le haut du site sont très bons graphiquement et plaisants. je rejoins une remarque déjà faite, le milieu du site est d'une autre facture, mais au vu du travail pour les visuels en haut , on comprend la panne ! Une seule chose me dérange un peu pour le confort visuel : lorsqu'on active le cartouche du haut par les menus supérieurs, par exemple de " intégration " à " galerie " le défilement donne un peu le mal de mer. Cette petite réserve mise à part, franches félicitations. Je termine ma visite des autres sites avant de donner ma note et elle ne sera pas mauvaise du tout !
@TiK : effectivement, mais fort heureusement : ceux qui n'ont pas de javascript activés sont encore moins nombreux que ceux qui utilisent IE6. :D (l'art de balancer une affirmation sans en être sur... :p Mais bon, je ne pense pas avoir tort, du moins je l'espère !) Et les informations principales restent accessibles heureusement.
Il manque néanmoins le formulaire de contact qui ne l'est plus, à la limite c'est le plus gênant, mais comme dit plus haut, je pense que le javascript désactivé est une portion infime du web !
Merci en tout cas :)
@Designer1959 : woaw, merci je suis touché !
Effectivement, j'ai passé mon après-midi d'hier à regarder les sites, les examiner, les noter, et les commenter... enfin, à vrai dire j'en ai commenté pas mal, mais uniquement ceux que je trouvent vraiment bon et qui méritent (ou pas) quelques améliorations, en espérant les stimuler à les corriger, tout comme vos commentaires m'encouragent et me conseillent à changer certaines choses une fois le concours terminé ! :)
Pour le slider, effectivement, si on passe d'une page à une autre éloignée, ça peut vite donner le tournis ! :D
Pour le portait "gif" (je préfère "vectoriel :p) effectivement, je trouvais que ça allait avec l'ensemble... mais les commentaires du haut ne sont pas de cet avis hélas. :)
Un grand merci pour tes encouragements.
Par contre, mon classement dans le tiercé, je n'y crois pas : certains ont fait des choses vraiment très très bon, graphiquement ou techniquement, voire les deux parfois ! Je pense que ma partie basse du site est un gros poids qui lui fait perdre le bon premier avis que le site peut donner en arrivant. C'est trop en décalage avec le dessus. Je m'en suis rendu compte le jour du concours que ça n'allait pas. J'ai dû passer trop de temps à faire en sorte que tout se passe bien sur tous les navigateurs, je n'ai pas eu le temps de faire ce qu'il fallait pour la suite... Du coup je fais avec et je me contente de rassembler les commentaires et d'admirer les autres designs ! :)
L'important et d'avoir enfin un site présentable, mais également d'avoir de bons retours de Webdesigners professionnels !
(il faut que j'arrête les pavés moi... désolé, je m'emporte quand je suis content... merci encore !)
@TiK : oh, j'allais oublier, pour le menu qui va pas plus loin que le menu ! (je me comprends)
Au départ, j'avais fait en sorte que ça dépasse, c'était nickel, mais un des navigateurs faisait n'importe quoi (IE ou Opera, je ne sais plus), donc j'ai du encapsuler le tout sans dépassement... Dommage :(
Bonjour
Comme les autres, je dirais que le haut de ton site est vraiment très très chouette, dommage que tu n'es pas eu le temps de finaliser le reste.
Je trouve que les images et animation de ton slider sont très bien choisies (et j'aime bien ta tête) avec le soucis du détail (une continuité dans les motifs d'un slide à l'autre très bien pensée). J'aime moins le principe effet lightbox de la galerie, je trouve que c'est lassant de chaque fois lancer l'effet pour chaque diapositive juste pour voir des images (j'ai beaucoup cherché pour moi dans les galeries "prêtes à l'emploi" jquery et finalement, j'ai bricolé pour que mes diapos de la page index s'ouvrent sur la réalisation avec texte explicatif, ça me semble plus parlant)
Pour le JS désactivé, je ne suis pas trop d'accord avec toi, même en faible proportion, il faudrait quand même en tenir compte (j'avais lu <8% il y a quelques temps), après tout dépend de la cible aussi.
Pour la hiérarchie des titres, je pense que ce qu'a voulu dire audrasjb , c'est que tes h4 "découlent" du h3 du dessus donc galerie, ce qui est faux. Après, je ne sais pas ce qui est le mieux, remettre des h3 (redondance, je ne sais pas) ou un h3 en display none du genre "détails des prestations" avant les h4.
Sinon, je suppose qu'après tu vas travailler sur l'optimisation des performances (compression des images, regrouper les scripts) car là, ta page est un peu lourde et prévoir une feuille de style pour l'impression ;)
Petits bémols :
- les taille en pixels des polices (je me demande si je ne fais pas une fixation inutile car pour l'instant, je n'ai pas vu un seul des sites d'ici utiliser la taille relative)
- l'agrandissement du texte (en +1, on n'a plus le lien galerie du menu)
Encore bravo et bonne chance :)
Merci pour ce commentaire très constructif !
Pour te répondre rapidement (je suis crevé ce soir !) mais sans rien oublier :
- Pour la galerie, c'est la meilleur des lightbox que j'ai pu trouver : on peut mettre du texte, défiler avec la souris, la molette, le clavier, mettre différentes galeries avec différents appels de JS... bref, moi c'était complet, mais c'est sur que si on aime pas les Lightbox, bah voilà quoi. :D
Je comprends en tout cas ce que tu aurais préféré ! Mais j'ai voulu tout concentrer sur une seule page, et il fallait faire tenir tout ça dans le slider. Donc c'était pas un mauvais choix, du moins si je voulais pouvoir afficher autant d'images sur une même ligne. :)
- Pour le javascript, je veux bien lire des articles si tu en as sous la main, car je trouve les 8% un peu énorme par rapport à ce dont je m'attendais. En même temps, là c'était vraiment pour faire un site de démo ("regardez messieurs les recruteurs, il y a plein de choses géré, et ça tourne bien ! embauchez-moi !"), mais très rarement j'utilise autant de JS, c'était vraiment pour le Slider, et pour faire un slider, à part du JS et du flash...
Par contre, oui je vais essayer d'optimiser les compressions et les regroupement de JS à l'avenir ! Je n'y ai pas tellement pensé, merci du précieux conseil. :)
Et l'impression également c'est prévu, mais avant ça une version mobile verra le jour ! (pas difficilement adaptable en plus, ouf)
- Pour les polices, en fait je n'ai jamais codé en EM... Pourquoi ? Pour deux raisons. La première est que je ne sais pas comment interprète un navigateur telle ou telle taille par défaut. Il faudrait que je teste en fait, et je sais qu'il y a des articles qui en parle longuement, il faudrait que je m'y attarde un peu plus. Mais ce qui a fait que non jusqu'à maintenant, c'est la seconde raison : adapation fidèle des maquettes photoshop (donc en px) et identique sous tous les navigateurs. C'est bien plus facile de gérer des PX que des EM quand à cause de tel ou tel navigateur, tu as 56 block embarqué avec des EM différents ! :p
Par contre, tu parles de l'agrandissement qui fait disparaitre le texte des galeries : sous quel navigateur tu as vu ça ?
Merci pour l'avertissement et ton avis critique ! (et le compliment)
Je rajoute sur ma todo-list tout ça ;p
C'est vrai que chez moi, c'est le milieu de l'après midi :)
Tu as raison pour les polices en EM, c'est galère et il ne faut pas vouloir reproduire des maquettes au pixel près sur tous les navigateurs... Après, c'est un choix "d'accessibilité" pour les internautes sous IE. L'agrandissement c'est le menu (lien) Galerie qui disparait (sous FF 3.6.10).
Pour le javascript, je chercherai si je retrouve l'info (là, je consulte les sites, ça prend du temps) et je te dirai si je retrouve.
Pour la galerie, c'est la partie fancybox que j'aime moins, mais bon, je l'ai utilisé aussi sur les pages internes de présentation.
Bonne soirée :)
Héhé, si tu regardes bien le premier slider, tu y verra mon île à moi. ;p
Bon, là je n'y suis plus, mais je viens plus ou moins de là bas !
Pour le JS ça sera avec plaisir si tu retrouves l'article, ça m'intéresse. Bon courage en tout cas pour la visite de tous les participants, moi ça m'a pris toute une aprem. :)
Bonne fin de journée !
Désolée, pour le JS, oublie, j'ai lu ça il y a quelques temps, je ne trouve plus... les dernières statistiques que j'ai trouvé remontent à 2008 et parlent de 2%...
N'empêche (j'espère ne pas dire encore de bêtises), il me semble quand même que c'est important de ne pas perdre d'informations javascript désactivé (pour les lecteurs d'écran par exemple).
Le mieux, c'est peut être de regarder ces propres stats pour se faire une idée
Hello.
Si l'une des qualités recherchée chez un intégrateur Web est son inventivité alors tu es bien dedans. Le site est chaleureux est donne envie de te connaître. Pour les graphismes cela reste subjectif mais j'adore l'ambiance et c'est le principal. Pour le code, je préfère ne pas en parler, lol, tu as une très bonne base et tu dois te donner le temps d'optimiser tout ça et surtout de rendre ton site accessible. (s'te plait...)
Je suis triste que tu plombes ton code pour IE6, il n'es utilisé qu'a 5% par des gens peux soucieux de leur sécurité et par des administratifs qui feraient mieux de bosser plutôt que de bailler aux corneilles devant Internet. Nous sommes des pros du Web, on ne doit pas inciter les Internautes à utiliser des logiciels qui leurs nuisent et qui ralentissent tout le monde. Que l'on puisse lire les textes sur IE6 c'est déjà pas mal.
Penses à réfléchir à tes tarifs, c'est toujours un débat délicat, dans le marché du Web des intégrateurs se vendent à moins de 220 € la journée, il faut montrer ta valeur ajoutée, tu en as et je ne le vois pas sur ton site.
Bonne chance à toi, le site est vraiment attirant. J'espère qu'on sera indulgent sur le code.
Jacques
Woaw, merci pour ton commentaire !
(je sais, ça doit être lassant, mais que dire d'autre à part merci ?)
Alors déjà un gros merci pour la première partie de ton commentaire ! :)
Ça fait vraiment plaisir à lire avec tout le temps que j'ai passer à bien faire tourner le concept... merci. :)
Pour la seconde partie, je vais être long, mais je ne suis pas sur la défensive, je vais juste expliquer ! Et je vais être long parce que j'adore mon métier, je m'excuse d'avance ! :p
Pour IE6, mais alors là, en tant qu'intégrateur, je dis OUI à l'abandon pur et simple d'IE6 dans les Webagency !! Si l'utilisation dans le monde en est encore dans les 20%, en Europe et aux USA ça se rapproche bien plus de 5% effectivement.
Par contre tu vois, vendredi soir on m'a appelé de toute urgence pour un travail le week-end : un gros site à livrer lundi, et le client voulait que ce soit compatible IE6...... et le client a toujours raison, est roi, a droit à tout, etc... Bref.
Le site était beau, bien foutu, super soigné. Mais quand tu le regardais sous IE6 : RIEN n'allait, tout était en vrac, énormément de choses avaient disparut,.... le foutoir, tu n'imagines pas comment !
Comme quoi, on a beau dire mais... La voilà ma valeur ajoutée : IE6 ne me fait absolument pas peur. Quand je code, au moindre avancement/changement, j'actualise chaque fenêtre avec chaque navigateur (Firefox, Opera, Chrome, Safari, IE6 et IE8) depuis 2 ans. Et j'ai tellement pris l'habitude des bugs d'IE que je sais parfaitement comment construire ma page sans me soucier de "est-ce que ça va rendre bien ou pas ?". Je sais que ça va aller. Sauf dans le cas de mon site actuel, je ne savais pas du tout comment le site allait réagir aux différents JS ! Il n'y en a qu'un qui a fait son caprice, c'est celui pour faire une rotation combiné à celui pour gérer les PNG transparent. La transparence marchait bien, mais laissait une roue superposée au dessus d'une autre : une tournait, l'autre pas. Du coup, j'ai dû les passer en Gif, mais c'est tout.
Donc tu vois, quand ces gars là m'ont appelé pour ce travail, je me suis dit que j'avais bien fait de ne pas l'oublier, car hélas les clients ne l'oublient pas et ne comprennent pas.
Pour le prix, 350€ c'est vraiment LA journée. Il ne faut pas se leurrer : si il y a un travail d'un seul jour, il n'y toujours un truc où le client voudra autre chose qu'il aura oublié de dire dans le cahier des charges. :p
Par contre, je dis bien "tarif dégressif" car effectivement sur un projet de plusieurs jours, ça peut couter cher ! Et je prend les demi-journées pour les mini intégrations de rien du tout.
(obligé de passer sur un autre commentaire, j'ai dépassé les 4000 caractères)
Et j'insiste bien sur "Travail rapide", car ça peut paraitre élevé, mais le code est propre*, valide (là j'ai du mettre un CSS en commentaire conditionnel, mais ce n'est pas ma CSS, c'est celle d'un plugin. Je n'utilise JAMAIS de hack sinon !), compatible sur tous les navigateurs, et je fais ça super rapidement (j'adore ça en fait l'intégration...). Et je préfère faire payer plus pour un travail de qualité et rapide, plutôt que moins et faire semblant de bosser derrière pour rallonger la durée...
Par contre, les Webagency dans lesquelles je bossais sur Paris n'ont jamais eu d'intégrateurs à 220€ dans mes souvenirs, c'était plus dans l'ordre des 400€ ! Mais ils n'étaient pas freelance, c'était des *je ne trouve plus le nom j'ai mal dormi cette nuit* envoyé par d'autres entreprises.
Voilà ! Recruteurs, vous pouvez m'embaucher maintenant :D
Je cherche un CDI, merci ! :D
*quand je dis code propre, évidemment il pourrait être encore plus optimisé si je ne prenais pas en compte IE6... mais il n'en reste pas moins propre. :) Il y a juste quelques div en plus, pas grand chose...
Par contre, je dois avouer que quand je me suis lancé dans le projet, au départ je m'étais dit "allez, merde à IE6 !" et puis finalement, je me suis dit que si j'y arrivais vu la complexité du truc (techniquement, au niveau du slider et du menu), ben j'aurai avancé un peu plus. Et je suis content du résultat, j'avoue que je n'y croyais plus trop au bout d'un moment.
Mais en tout cas le jour où les webagency accepterons de refuser de bosser sous IE6, je pense qu'on pourra réellement parler d'une grande avancée pour le monde du web...
Soit ce jour là, soit celui ou les clients arrêterons d'aller voir leur site chez Tata Ginette qui a windows 98 sur son Pentium MMX. :p
Amen.
Merci encore pour ton commentaire. :)
Et j'espère que le mien passera bien, je suis juste un peu passionné donc j'écris beaucoup, mais je comprends parfaitement tes deux points négatifs (IE6 que j'aurai pu essayer d'oublier et le prix pas forcément cadeau). C'est toujours bon d'en débattre je trouve. :)
Bonjour,
Dans l'ensemble j'aime bien, c'est varié.
Un petit mot sur Internet Explorer 6.
Je trouve que c'est une belle performance de vouloir rendre les différents effets sur ce navigateur, mais est-ce vraiment bien utile et même judicieux.
Je n'ai pas de chiffres là-dessus, mais on peut légitimement supposer que les utilisateurs d'Internet Explorer 6 n'ont pas une configuration très puissante. Du coup, rajouter des couches de Javascript pour faire pareil que sur les autres navigateurs risque de ralentir leur ordinateurs pour un résultat pas génial.
Je pense qu'il vaudrait mieux proposer une version expurgée de tout Javascript servant à des animations pas forcément nécessaires ou si on veut garder du mouvement, des animations moins complexes.
Si je prends l'exemple des engrenages, une image aurait été largement suffisante pour Internet Explorer 6.
Au sujet des engrenages, c'est dommage qu'il y ait un petit problème de synchronisation au bout d'un moment. Il doit bien exister un moyen de corriger ça.
Sinon, autre chose, le site n'est pas très (pas du tout ?) navigable sans Javasript.
Bonsoir !
Merci, content que ça te plaise déjà un peu. :)
Pour ce qui est de IE6, j'ai expliqué dans les deux posts au dessus le pourquoi du comment ! :p
En résumé : OUI, je suis pour bannir IE6 définitivement de nos méthodes de travail. Mais on ne peut pas, car des clients continuent encore d'en demander le support, comme le week-end dernire où on m'a appelé pour adapter un site sous IE6 en urgence car le client n'était pas content (alors que ça tournait nickel de chez nickel dans les autres navigateurs)
Et niveau performance, le truc qui bouffe le plus, c'est les rotations... Mais sous IE6, c'est pas en PNG, c'est en GIF, et ça consomme énormément moins ! C'est même plus rapide sous IE6 que sous IE8, c'est dire. :p
Maintenant je comprends parfaitement que l'on veuille s'en débarrasser, mais moi c'est vitrine de Freelance, et je dois montrer que je sais le gérer pour répondre à la demande des clients qui continuent malgré tout un support IE6, et je le montre sans qu'il y ai 56 hacks invalides. Voilou ! :)
Par contre pour l'engrenage, j'ai essayé de trouver le meilleur moyen de faire en sorte que ça superpose, mais au bout d'un moment ça se décale... Je n'ai rien pu faire ! :D Il aurait fallut que les roues aient la même taille !
Pour le Javascript, il existe moins de personnes qui désactive le javascript que de gens qui ont IE6. Les infos principales sont disponibles en dessous, et le slider est impossible sans (ou alors avec du Flash, mais c'est hors de question pour moi !)
Google et les autres navigateurs par contre, javascript ou pas, a accès à tout ! :)
Merci pour le commentaire en tout cas, ça fait plaisir d'avoir ce genre de débat, de partager nos avis à ce sujet délicat... :)
Personnellement je ne veux pas me débarrasser d'IE6, il existe et il est utilisé, on fait avec. Mais de là à passer des heures ou des jours pour que le rendu soit pareil que la dernière version de Firefox ou autre... Je préfère me limiter et faire en sorte que le site soit consultable et se tienne un minimum graphiquement, et profiter du temps restant pour vérifier que le site est navigable au clavier, utilisable sans Javascript, sans images ou sans CSS.
En parlant de ça, essaie de jeter un coup d'œil à ton site le Javascript, les images et les CSS désactivés. Tu verras tout de suite les problèmes d'organisation et donc, normalement, comment les résoudre.
Je ne fais ces remarques que parce que tu mets en avant l'accessibilité dans le texte de ta page. Et je pense que pour l'instant il vaut mieux éviter d'en parler, travailler le sujet, et d'ici 6 mois, un an ou deux en faire un réel atout.
Non non non, on peut en parler, au contraire tes remarques sont pertinentes.
Quand je parle de m'en débarasser, je veux dire "ne plus faire en sorte que ça s'affiche exactement pareil que sur les autres navigateurs au poil près. Par contre, il faut que ce soit affichable plutôt correctement, ça sera toujours le cas. Par contre, dans toutes les 2 webagency où j'ai bossé, crois moi : IE6 comptait beaucoup !! Et il fallait que ça tourne bien sur tous les navigateurs. C'est pas moi qui choisissait...
Au départ je passais énormément de temps à le faire, car certains designs étaient assez complexe (Filles TV a été ma plus grosse première et lourde expérience à l'époque). Mais maintenant, j'arrive à faire ça rapidement et intuitivement.
Là où j'ai passé pas mal de temps sur le design de mon site, en plus du webdesign même sous Photoshop, c'était à jongler avec les JS, car forcément, certains scripts jQuery n'étaient pas compatible avec d'autres, ou alors c'était tel ou tel navigateur qui ne voulait rien savoir, j'ai du faire 36 essais à chaque fois, à la fin ça ramait comme pas possible donc j'ai passé beaucoup de temps à optimiser tout ça... C'est sur que si j'avais pris comme base que Firefox, IE8 et Chrome et que j'avais fait dans le slider que des images toutes bêtes, en un rien de temps c'était bouclé. Pour le concours, je n'en voyais pas l'intérêt. C'est un concours pour montrer ce qu'on sait faire quoi. :)
(du coup, je n'ai pas eu le temps de peaufiner le reste, mais tant pis... ça sera pour le prochain !)
Pour l'accessibilité au clavier, pour ce site c'était tendu quand même, surtout à cause du Jquery et des effets... Il faut plutôt le voir comme une démo technique, mais il n'y a jamais autant de choses sur le slide d'un site, c'est trop "lourd".
On est d'accord tous les deux sur un truc : il vaut mieux un site clair, léger et consultable qu'un gros truc lourd graphiquement.
Mais j'espère que tu es d'accord sur le fait que cela soit une démo pour dire "regardez, je sais aussi faire des trucs chiants qui tournent sur tous les navigateurs si le client le demande, donc je sais aussi faire des trucs beaucoup plus simple". :D Je ne vois nullement l'avenir du web dans des sites web comme le mien, ce n'est qu'un Portfolio dont l'accessibilité est limité par le côté technique/graphique spécialement fait pour l'occasion.
Par contre, j'ai désactivé le javascript, les images et la CSS, et.... Je ne vois pas ce qui ne va pas, à part le fait que les éléments du slider soient au dessus du contenu, mais ça ne me choque pas tant que ça étant donné que ce sont les éléments du dessus et que ça résume mon activité. C'est cela qui te choque ou autre chose ? Quelque chose que j'ai raté où dont je ne suis pas assez au courant ? Je veux bien que tu m'éclaires, c'est important. :)
Je t'ai mis quelques remarques sur une capture d'écran :
http://www.shunkin.net/images/ariakan.jpg
J'avoue ne pas y avoir passé trop de temps, donc il y a peut-être d'autres choses qui m'ont échappé.
Je rajoute tout de même que comme démo c'est réussi et qu'il y a, à mon avis, de bonnes idées et que c'est là-dessus que je me suis basé pour la note.
Woaw, merci d'avoir pris le temps de faire un schéma, je ne m'attendais pas à tant ! :D
Je vais répondre point par point (en espérant ne rien louper, tu as écris en noir :p)
1- le précédent/suivant sont les ALT des boutons à gauche et à droite du slider. Il faudrait que je rajoute un espace entre les deux boutons effectivement !
2- "manque quelque chose ici", c'est le cadre du slider en fait, fait en fond de 4 div pour chacun des côtés. Seule solution pour que ça tourne sous IE6 (à la base il n'y avait qu'une seule image) et pour que ça ne soit pas moche en retirant uniquement les CSS (avec des bouts de cadre qui se baladent).
3- Le formulaire fonctionne en Ajax, donc oui il ne marche pas là, et le message disant que le mail a été envoyé apparait.
4- "Il y a quoi dans la liste", là c'est le fond du dernier slide, les nuages qui défilent. Il fallait que les images soient dans une liste. Encore une fois, c'est un défaut lié au challenge technique hélas. :(
5- "Texte répété", ce sont les ALTS des vignettes de la galerie, mais oui je pourrait changer le texte à la limite, rajouter un "Voir la galerie blabla". :)
6- "Devrait être dans la même puce" c'est vrai. Un simple <br /> aurait suffit. Je changerait ça à la fin des votes !
Merci beaucoup pour tes conseils et pour le temps que tu as pris à m'expliquer ce qui n'allait pas pour toi !
Bon, désactiver le JS et les images et les CSS, c'est ultra poussé quand même, mais google lui quand il référence mon site il le voit effectivement comme ça. Thanks a lot !
Héhé, la première impression est très bonne !
Quelques remarques, parce qu'il faut bien chercher la petite bête :
- les perfs sont à améliorer, notamment via la compression gzip, et pas mal de fichiers javascript pourraient être fusionnés (13 JS, ça porte malheur !),
- blague : l'engrenage du bas est à ajuster, il déborde un peu sur celui du milieu, ça va casser les dents. :)
- un regret : si je désactive javascript, je n'ai plus accès aux autres contenus, alors que ça pourrait être aisément faisable (une autre page avec le contenu désiré en navigation à la rescousse),
- si je désactive les CSS... houlala... la navigation devient très dure.
- la navigation au clavier est très difficile, on ne voit pas où on se situe.
- la structure me semble bonne, quoique certaines parties souffrent de classite et de divite.
Sinon... bravo : le graphisme est plaisant, y a énormément de bonnes idées, c'est joli, bien foutu, assurément une réalisation de haute volée et une des meilleures parmi celles que j'ai déjà vues (j'ai pas encore tout vu).
Du très bon boulot, à parfaire !
Ben moi, pour un webdesigner je trouve ça pas assez original (entre les vecto florals, les icones glossy déjà vu...)
Bonjour,
Chouette et véritable remouture. C'est propre, clair, aéré. Bravo.
@ MoOx : effectivement ce n'est pas spécialement original pour un webdesigner. Mais l'efficacité vers la cible (ses clients) est essentielle aussi. Effectivement le look d'un site de webdesign va donner envie à ses clients ou pas, mais pas forcément, à moins que ce ne soit vraiment moche, ce qui n'est pas le cas. Quand c'est trop original, on rebute aussi certains clients, c'est un risque ou un choix que le webdesigner fait ou pas. Plein d'agences web ont des design justes efficaces et tournent super bien. Les plus beaux designs de sites web sont rarement ceux des pages d'accueil d'agences ou de webdesigners, alors que les designs produits pour les clients sont souvent plus beaux que leur propre site. Mais tu as raison, faut un minimum (je ne dis pas ça pour Arakian).
Je reviens vers ce site, car avant de le noter, je voulais consulter tous les autres, c'est chose faite. Ayant passé un temps considérable à commenter et annoter toutes les participations, cela me permet de porter un regard un peu différent à présent, sur ce site.
Bas de page /
La page finit un peu abruptement en absence de footer. Je ne le crois pas du tout incontournable, mais dans ce cas, faut-il soigner le bas, ce qui n'est pas tout à fait le cas, on n'en a déjà parlé.
Visuels /
Le format des visuels, dans la galerie, est parfois un peu juste. Le CV est beau également, je trouve juste agaçant cette publicité faite aux logiciels de la CS qu'on trouve partout désormais.
Reste un site agréable et personnel au design attractif et solaire.
Je vais noter, comme j'en avais l'intention initialement, et la note sera haute, sans tenir compte de l'agacement que j'ai eu à lire les remarques extrêmement répétitives de l'auteur sur un navigateur que je ne nommerai pas, à presque tous les commentaires qu'il a fait pour le concours ! En latin " ie " signifie : C'est-à-dire… J'ignore si le latin que je pratique pas a une expression pour évoquer les choses à ne pas dire.
Pour en rire un peu, je propose un détournement d'une blague potache.
C'est Firefox qui discute avec Explorer et lui dit :
« Quand l'un de nous deux mourra, je serai inconsolable. »
MooX : dommage que tu n'ai pas un peu plus détaillé ton avis... En tout cas, pour un design retro, c'est normal de retrouver du "déjà vu" :p
Mais blague à part, mon design ne plait pas forcément à tout le monde, c'est normal. :)
J'ai voulu éviter de tomber dans le 2.0 style "template business" que l'on peut trouver assez souvent. Dommage en tout cas pour ton vote, ça sera pour la prochaine fois. ;p
@chamomor : merci pour ton commentaire ! Et aussi d'avoir "pris ma défense", même si je conçois ne pas plaire à tout le monde. :)
@designer1959 : tout à fait d'accord pour le footer ! Une fois le design terminé, je refais la partie basse du site (que je n'ai pas pu peaufiner) et je rajoute le footer que j'avais totalement oublié... trop de choses à faire en cette période, j'ai eu la tête ailleurs.
Le format des visuels de la galerie sont parfois un peu juste c'est vrai, mais je ne voyais pas trop comment présenter certaines pages quand en montrer qu'une partie n'avait que peu d'intérêt... Alors j'ai quand même mis quelques visuels qui ont un format peu commun.
Pour mes commentaires sur IE6 : pour moi, c'est important, ça fait parti de mes critères. (et on se doit bien de noter selon ses propres critères) Dans ce concours, un site qui s'affiche horriblement mal sous IE6, je ne comprends juste pas. (On est bien sur Alsacreations non ? Les pros du web sont parmi nous ! :p ) Un site qui s'affiche plus ou moins bien avec juste quelques bugs, ça passe pour moi. Le concours porte sur le re-design d'un site, mais le code compte, et qui dit code dit affichage sur tous les navigateurs (IE6 est utilisé mondialement à encore 15%... *pleurons ensemble*). Donc pour moi, à qui on demande encore de coder pour IE6 quand j'ai de l'intégration à faire, c'est important. Je détaille en fait déjà pas mal dans mes commentaires du dessus pourquoi je ne peux pas lâcher IE6, même si j'adorerai !
Donc oui, c'est revenu souvent dans mes commentaires (y compris la validation W3C qui est là par contre encore plus important !) car de mon expérience en webagency et en ayant fréquenté d'autres intégrateurs (des bons comme des mauvais), je pense que quand on intègre un site, on se doit de montrer qu'on sait le faire comme il faut pour tout le monde, y compris ceux qui n'ont pas le choix de passer sur un autre navigateur. Même si ça nous casse les pieds. :D
En tout cas, je n'ai pas critiqué pour critiquer, je ne l'ai fait que pour leur dire "allez, rendez-le parfait votre site !", car ceux que j'ai commentés sont pour moi ceux qui valent vraiment le coup, donc comme toi, je leur dit ce qui ne va pas selon mon point de vue. :)
Tout comme j'espère qu'ils me donneront le leur sans , si ce n'est déjà fait. Et sans retenu.
Pour moi, ce concours est un peu une exposition dont j'attends des remarques pour améliorer le tout. :)
Merci en tout cas pour tes remarques, c'est appréciable.
Merci pour cette longue réponse suite à mes remarques.
Footer /
Je n'ai fait la remarque que pour indiquer la différence de mon regard critique avant et après avoir visité soigneusement la centaine de propositions inscrites au concours. Ce point m'avait échappé au début, pas à la fin.
Critères /
Bien sûr que nous avons chacun nos critères pour apprécier et juger un travail, et les assumer peut agacer plus ou moins, là n'est pas le souci. Ce que je pense nécessaire, c'est que nos critères soient ouverts à l'autre, ses raisons, son cahier des charges, etc. Par exemple, en tant que graphiste, je ne parle pas de la même façon d'un site de graphisme, de photographie ou d'un site de programmateur pur et dur. Autant je comprends que TES critères professionnel, etc. soient ce qu'ils sont, et ils sont fondés, mais les asséner à ceux qui te disent te la même façon, que pour eux, tel n'est pas le cas, si par exemple IE représente 0,8 % des utilisateurs d'un site particulier, etc. cela me semble une raison suffisante et aussi respectable que ta position. donc, ce critère n'a plus trop de validité dans de tel cas. Je l'ai dit quelque part, penser à tous les navigateurs me paraît incontournable pour de gros sites marchands, informatifs ou institutionnels, mais le systématiser pour des sites à la fréquentation ciblée ou très réduite me parait excessif, incongru.
Il y a des commentateurs qui ont des marottes, ou n'ont qu'un seul cheval de bataille, ce n'est pas ton cas, tu es polyvalent, c'est pourquoi j'ai trouvé utile de te parler de cette composante un peu obsessionnelle de ton discours.
Ce petit dialogue a eu ce mérite de te permettre d'exprimer le fond de ta pensée, à savoir que tu ne rêves que de lâcher IE 6 ! D'une certaine façon, ton message semble : j'ai tellement peiné pour rendre mes sites conformes à ce boulet que je ne vois pas pourquoi, vous vous épargneriez cette peine.
Plus sérieusement, il y a un évident intérêt et défi à savoir résoudre des problèmes, etc. Et c'est aussi cela qui doit t'animer. Mais pour moi, le contre-sens incroyable est qu'au nom des standards et de l'accessibilité, on tarabiscote autant les standards pour satisfaire un navigateur si peu standard !
Sur le fond, je crois que nous nous comprenons.
Reste une question métaphysique : y-a-t-il une vie après Explorer ?
Cordialement.
Globalement le site suit la même organisation visuelle que la plupart des sites "modernes", mais avec une touche d'originalité qui le démarque de l'uniformité 2.0.
Bravo !
Bon, je prend le temps de noter ton travail, comme tu l'as fait pour moi. Par contre désolée d'avance de ne pas prendre le temps de regarder ton site en détail. En vrac : 1e impression bonne, je suis ok avec les remarques de @Shunkin dans son imprim-ecran, c'est en encore perfectible mais la base du site est bonne. Et un bon point pour l'effort de compatibilité IE6, car c'est vraiment une galère !
Alors, quelques petites remarques pour moi : faire gaffe aux fautes d'orthographe, c'est vraiment pas pro :/
J'en ai vu quelques une.
Sinon, je trouve que certains styles ne sont pas assez travaillés (notamment la police dans les blocs qui défilent en haut, des tirets, couleur noire en italic => ça fait amateur)
Je n'ai pas lu tous les commentaires mais je pense que ça a déjà été dis, le manque de footer me perturbe un peu.
Sinon, pour le reste c'est sympa !