• 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

Sliceo par havinasoul

Voir en ligne http://www.sliceo.com/

Voir l'image en taille réelle

Après refresh

Voir l'image en taille réelle

Note obtenue : 4.770/10

Commentaires

annso
28 Septembre 2010 à 14h10

Hello,
Quand on a pas de compte, le contenu accessible est un peu maigre (la barre de menu n'accueille que 2 items, il n'y a pas d'articles sponsorisés).
Sinon, c'est joli, simple et clair :)

audrasjb
28 Septembre 2010 à 16h45

Hello,

Côté sémantique, il faudrait remplacer toutes ces divisions par des éléments porteurs de sens : paragraphes, titres, etc.

havinasoul
28 Septembre 2010 à 19h31

@annso En fait la barre de menu n'a que deux items que l'on soit connecté ou non. Il n'y a pas d'articles qui ne soient pas accessibles aux visiteurs sans compte.
Le site ne dispose pas de toutes les fonctionnalités que j'aurais souhaité pour le concours mais j'attends la fin de ce dernier avant de modifier. Merci pour les remarques :)

@audrasjb Je prends bonne note, merci pour la remarque.

anais-id
29 Septembre 2010 à 10h45

coucou havinasoul,
Personnellement je préfère la refresh, le fond et le logo sont plus sympa, maintenant graphiquement j'aurais peut être mise un peu plus de couleurs dans les div. Mais le site reste lisible et accessible c'est bien.

mat_dev
29 Septembre 2010 à 10h58

Magnifique!
Subjectif : très belle évolution graphique. Choix judicieux, sobre, sombre, c'est carré, j'aime beaucoup.
Le code est très propre, bravo!
Un bémol tout de même, la validation W3C :-(
Mais facile à corriger.
Un grand +++ pour votre réalisation.

designer1959
29 Septembre 2010 à 17h48

Sous une apparence très sobre, voici un site d'une élégance certaine. Le changement de version est valorisant. Le fond est superbe et des petits raffinements (découpe du papier en bas de page ) affinent encore l'ensemble. La répétition des logos, à l'identique en première page pourrait être repensée… Bon travail qui répond bien à son objet. Quant à critiquer le fait de l'accès aux rubriques, cela concerne le concepteur du site, le client, et ce concours propose d'évaluer une refonte, pas le concept fondateur d'un site !

cilou
29 Septembre 2010 à 23h40

Bonjour
Le refresh est vraiment réussi, le site est clair, sobre, classe et les informations visibles.
Le fond est très joli mais je trouve qu'il ne va pas avec le logo, je ne saurais pas dire pourquoi mais le logo me semble trop petit, trop écrasé par le fond, un peu posé là comme ça...
D'ailleurs, coté code, le div logo vide c'est moyen... pourquoi ne pas avoir mis une image en dur et l'entourer éventuellement d'un h1 ? Là, image désactivée, on n'a plus de titre.
Toujours images désactivées, le texte manque de lisibilité (fond noir).
Je ne suis pas sûre que toutes les div englobantes dans le main soient utiles (je ne vois pas de styles associés)
Il me semble que figure est une balise "réservée" aux images... moi, j'aurais mis des balises articles et j'aurais mis les titres des questions en h3 (plutôt que div class title).
Dommage d'avoir défini une font en pixel dans le body, les autres fonts en em ne permettent pas l'agrandissement du texte sous IE.
Une page mentions légales, ça serait bien non ?

Bonne continuation et bonne chance

Nico3333fr
11 Octobre 2010 à 20h17

J'ai qq soucis de contraste/lisibilité avec les textes gris clair sur fond blanc, je suis obligé de les surligner pour pouvoir les lire (écran lumineux oblige). Sinon j'aime bien le graphisme autour de la zone principale, mais le contenu me semble un peu... vide : deux liens dans le bandeau, rien au-dessus... c'est un peu spartiate.

A enrichir ! ;)

havinasoul
11 Octobre 2010 à 20h56

Merci à tous pour vos commentaires, ça fait plaisir de voir vos réactions plutôt positives. Je prends bonne note de vos remarques et conseils qui me permettront d'avancer et d'améliorer le site.

@Nico3333fr : Merci. Je modifierai ce problème de couleur qui il est vrai peu s'avérer gênant. J'ai prévu davantage de fonctionnalités et l'ajout de nouveaux contenus. Le temps m'a m'a un peu manqué lors de la fin du concours :)

@cilou : Vos commentaires sont justes : merci. Pour ce qui est du logo, je ferais la modification car je trouve votre conseil très pertinant. Quant à la balise HTML5 figure, le W3C indique qu'elle permet le regroupement d'une unité de contenu sans plus de précisions : http://dev.w3.org/html5/markup/figure.html#fi... :( La page mentions légales est en cours d'écriture :)

@designer1959 : Les logos qui se répètent sont en fait les avatars correspondantes au profil des utilisateurs. Votre commentaire m'a fait plaisir ^^

@mat_dev : Un grand merci pour votre commentaire :) Je vérifierais la validation W3C pour HTML 5.

@anais-id : Merci pour votre commentaire :) C'est vrai que le site peu paraître un peu fade : je corrigerais certains points en ajoutant quelques notes de couleurs.

Les commentaires sont clos.

 <button name="Benjamin"> 

  • 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/