• Aller au menu
  • Aller au contenu
  • Aller à la recherche
  • tutoriels
    • Catégories
    • actualités
    • html
    • css
    • javascript
    • responsive
    • design
    • accessibilité
    • développement
    • vue et nuxt
    • formats
    • web
    • Ressources
    • Les plus lues
    • Outils
    • Guidelines
    • Livres
    • Quiz !
    • Concours
    • Par niveau
    • Débutant
    • Confirmé
    • Expert
  • forum
    • Nouveau sujet/question
    • Catégories
    • Dernières réponses
    • Recherche
  • emploi
    • Offres d'emploi
    • Demandes d'emploi
    • Favoris
    • Poster une offre
    • Poster une demande
  • formations
    • CSS3 Expert
    • Flexbox et Grid Layout
    • HTML5
    • Vue 3
    • Nuxt
    • JavaScript
    • Accessibilité
    • Performances web
    • Intégration d'e-mails mobiles
    • Formation sur-mesure
  • S'inscrire
  • Connexion
  • Concours
  • Modalités
  • Concourir
  • Participants
  • Résultats

Cascading Style Summer Refresh 2010

Retour au concours

MrRayures par MrRayures

Voir en ligne http://www.mr-rayures.com/

Voir l'image en taille réelle

Après refresh

Voir l'image en taille réelle

Note obtenue : 6.621/10

Commentaires

sogam
27 Septembre 2010 à 13h21

Joli travail et très belle typo vintage! :D

atelierwebactif
27 Septembre 2010 à 13h53

J'ai beaucoup la nouvelle version du site. Je participe également au concours avait à l'origine la même idée que toi, à savoir faire une navigation statique en une seule page avec scroll glissant. J'ai gardé l'idée de menu statique en haut de page, mais j'ai abandonné le scroll glissant (chaud à mettre en place avec wordpress). Bravo ! Bonne chance ! :)

MrRayures
27 Septembre 2010 à 14h46

@Sogam Merci ^^).

@atelierwebactif Merci, et avec pas mal de bidouille c'est surement faisable.

Ariakan972
27 Septembre 2010 à 16h50

Très bonne réalisation !!

Deux petits points noirs :
- la CSS non valide...
- la presque non compatibilité avec IE6 !! Mais là, c'est trop dommage car il n'y a que le slider qui fonctionne mal (avec un if else, pouf on mets un slider qui fonctionne sous IE6 et c'est réglé) et on se tape une barre rouge pas belle en haut du site... Rien d'insurmontable pour qu'il soit compatible avec IE6, le design est tellement bon qu'il mérite ce mini effort ! :D

Bravo en tout cas, j'aime beaucoup.

MrRayures
27 Septembre 2010 à 18h03

@Ariakan972 : Merci pour ton retour. Le css je suis dessus, par contre en ce qui concerne ie6, mon site n'a pas pour cible un vaste public j'ai donc fait le choix de minimiser la casse sur ie6 sans non plus me prendre la tête d'où la barre rouge et le slider.

Shokojjo
27 Septembre 2010 à 20h36

@MrRayures : Hello, j'aime bien le site dans son ensemble même si on voit de plus en plus de navigation avec scroll glissant faut reconnaître que c'est mignon.

D'un point de vue personnel, j'aurais pas mis de bleu ciel, je trouve que ça jure avec le reste de la charte graphique qui est bien bravo. Il reste la validation CSS qui coince, et surtout la taille des images à spécifier (aucune taille n'est spécifier), idéalement activer la compression gzip, et fusionner les JavaScript déjà au nombre de 5... !

Pour ma part c'est un donc un grand encouragement! Bonne continuation
Tom

Ps: Un peu hors concours, mais très sympa je suis tombé amoureux de ton blog http://japon.mr-rayures.com/

designer1959
30 Septembre 2010 à 10h41

Il s'agit d'un bon travail, auquel bien du soin a été apporté. La charte colorée est réussie, le graphisme aussi. Sur le plan de la mise en page, une ou deux choses me chiffonnent un peu. Le haut de la page me semble un peu irrésolu. L'équivalence en taille du diaporama avec les visuels " créations " en dessous se concurrencent un peu et le regard hésite à se poser. La différence de couleur de fond sur ces deux zones accentue cette impression. La typo noire sur fond marron est très chic, mais au limite de la lisibilité, certes il s'agit de mentions textuelles secondaires. Le système de navigation par les menus du haut est agréable mais je me questionne sur la pertinence de placer l'ensemble du contenu de la page sur une si grande colonne ? Des différences importantes pour les marges supérieures sur les titres apparaissent entre Firefox et Safari ( sur Mac ) : ' About ' est margé fort et " créations " colle au bandeau sur haut dans Safari. Enfin, cliquer sur contact laisse apparaître en premier " About ". En espérant avoir contribué positivement.

MrRayures
30 Septembre 2010 à 11h32

@designer1959 : Merci de ton retour. Le fait de tout placer sur une page en verticale est surtout un choix d'abord esthétique (Et du moment, il faut le dire ^^) mais aussi par souci de mise a jour (1 seule page a mettre à jour c'est plus simple). Sinon j'ai tester sous safari PC, mais malheureusement pas de Mac.

MrRayures
30 Septembre 2010 à 15h06

@Shokojjo : Merci, pour le css j'utilise des propriétés comme border-radius, text-shado, @font-face, c'est un parti pris graphique au détriment de la validité. Pour le reste je prends note.
Et merci pour l'appréciation du blog ^^).

p0ulpe
03 Octobre 2010 à 00h45

Site sympatique, juste augmenter le line height des paragraphes et slider peut etre un peut trop imposant (a mon gout).

Sinon j'aime beaucoup.

designer1959
06 Octobre 2010 à 00h40

C'est justement sur l'aspect esthétique (coupure d'une zone quand on en consulte une autre… ) que me gêne le fait de mettre l'ensemble du site sur une seule page.

Nico3333fr
11 Octobre 2010 à 22h38

De gros efforts à fournir sur les perfs, sinon, c'est original, et plutôt réussi !

Les commentaires sont clos.

 Alsacréations, un site dédié au <body> building  (Jean-Claude Vandamme)

  • plan du site
  • contact
  • formations
  • agence web
  • Retourner en haut de page

Alsacréations est une communauté dédiée à la conception de sites et applications web de qualité, grâce aux standards W3C, aux feuilles de styles CSS, aux langages HTML et JavaScript, et à l'accessibilité. Réalisé par l'agence web Alsacreations.fr · À propos et mentions légales · Données personnelles

https://www.alsacreations.com/