Discussion :

[kalisha stark]

=> http://kali.voila.net/index.html

Lien pour voir le site en tant que version test (je ne peux pas mettre sous le vrai nom de domaine vu que je n'ai pas les textes finaux )





Bonjour à tous,

Après un travail d'une durée relative en tant que stagiaire (un seul mois au total) je me retrouve sans travail car je n'ai toujours pas reçu les images et le texte manquant de la part de mes employeurs... (ça fait deux semaines que j'attends sur un mois de stage c'est pas long du tout nononon)

Du coup je cherche par ci par là ce que je peux améliorer, notamment sur deux points :

♦ Les boutons sur le côté : en arrondis comme sur la version française ou en colonne comme sur la version anglaise ? (ou en colonne centrée en guise de compromis ? EDIT => 3ème option mise en ligne pour la page d'accueil anglaise)

♦ L'image de la page d'accueil pour "Compagnie/Company", je trouve que la carte fait grande vu que l'entreprise n'est implantée que en Angleterre, ceci dit elle travaille pour de plus grands groupes eux implantés un peu partout et du coup elle intervient globalement partout. Est-ce que vous auriez des idées pour représenter cela sur l'image ? (des flèches ? des traits pointillés ? Je suis pas particulièrement inspirée J'ai posté une image en fichier joints avec des exemples de flèches possibles =o)


♦ Le site a été retravaillé pour être extensible et donc affichable lisible et structuré sur tout support (normalement, si vous voyez des bugs criant hésitez pas à me faire un retour en précisant quel navigateur, quelle taille d'écran etc). Le but étant qu'il soit aussi accessible sur smartphone. Seulement voilà, comme j'ai beaucoup d'effet de survol, ça pose soucis pour les smartphones :/ Surtout pour le menu déroulant des pages classiques ! Astuces ? Un moyen pour désactiver le :hover juste pour smartphone et surtout par quoi le remplacer ?


Sinon de manière plus générale, j'aimerais avoir votre avis global sur le site, si il y a des choses qui vous choque, est-il assez lisible, pas de crise d'epilepsie, etc etc.

Je suis ouverte à toute critique constructive bonne ou mauvaise (sinon je posterais pas ) mais ne soyez pas trop durs please je suis loin d'être une pro






Merci à vous =D

Kali

PS : j'ai également réalisé une brochure sur leur demande accessible sur la page "Company/Compagnie" via le bouton "Save/Print // Sauveg./Impr.", si vous pouviez me donner un avis sur elle aussi ce serait très gentil ^_^ (oui oui y'a que des photos de chats, mais ils avaient qu'a me les filer ces foutues images ! en attendant miaou..)

Notamment si le chargement n'est pas trop long ? J'ai beaucoup réduit la qualité d'impression (actuellement 144dpi) mais je peux encore réduire à 72 dpi donc à voir ?

[rodolphebrd]

Bonjour kalisha stark,

nous en avions déjà parlé sur le forum CSS.

Votre design fait vraiment old fashion et les images sont à travailler/optimiser.

Pourquoi ne pas s'inspirer de design existants et modernes. Vous vous compliquez la tache et il faut rester simple dans votre démarche.

[kalisha stark]

Bonjour,

Vu qu'il ne me reste que 3 jours ouvrables avant la fin de mon stage, et qu'ils vont être largement occupés par la traduction des textes si je les ais un jour, revoir l'ensemble du design est impossible de toute façon. De plus, le fait que le thème et le design générale basé sur le logo de la compagnie plait énormément à mes employeurs, donc bien qu'il te paraisse old fashion il semble qu'il réponde parfaitement à mon cahier des charges.

Ceci dit je vais tenter d'améliorer l'aspect par des modifications précises pour qu'il te paraisse moins affreux Car si c'est ton avis ça peut être celui d'éventuels clients (bien que leur profil diffère probablement du tien ^^)

Pour les images notamment, je pense que celles qui péchaient le plus étaient les bannière (faites à partir des anciennes photos qui avaient des formats misérable, donc pas extra qualité..) J'ai donc fait de nouvelles bannières qui reprennent les images de l'accueil, ça permet de garder un lien logique et les photos sont de biens meilleures qualité

Peux-tu me dire si c'est mieux ? S'il faut que je continue dans ce sens ?

Et de manière plus globale, si tu as d'autres remarques ou conseils plus ciblés et plus précis qui pourraient donner un aspect plus plaisant à ton gout je suis toute ouïe (une couleur, une police, un bouton...)




PS : D'autres avis sont également les bienvenus, hésitez pas à dire ce qui ne vous plait pas selon votre ressenti, mais aussi ce qui vous plait car ça fait plaisir (s'il y a au moins quelque chose qui vous plait )

[rodolphebrd]

Si vos employeurs sont satisfaits l'objectif est atteint.

Vos liens de menu (company, services...) ne sont pas intuitifs car trop sobres.

Les icônes cliquables (choix des langues, etc) rétractées dans leur "étuis" ne fonctionnent pas sur tablette.

J'imagine que le bouton "save/print" de la page company est temporaire.
De même que les flèches "next" et "previous".

Quand je suggère d'optimiser les images je mentionne cette partie par exemple :

[kalisha stark]

Merci pour ces précisions =D

Pour les liens de menus rajouter une petite flche par exemple pour indiquer un possible déroulement ? (j'ai vu ça sur certains sites =) )

Les icônes rétractées fonctionnent avec javascript comme à peu près toutes les interactions boutons d'ailleurs, ou alors le problème vient peut-être du fait qu'il s'agit d'une navigation "clavier" (je ne suis pas sure d'avoir mis des :focus partout...) les autres effets de survol fonctionnent ? =o
Ou alors j'ai pas compris et c'est carrément le lien qui marche pas ? (mais dans ce cas là je vois vraiment pas pourquoi o_o)

alors à vrai dire non les boutons n'étaient pas temporaires , mais c'est vrai que y'a grandement matière à améliorer, je fais ça demain matin à la première heure =)

Je vois pour l'optimisation... j'ai beaucoup de mal à donner un meilleur effet travaillant sous photofiltre (et pouvant me grater pour 'toshop) mais je vais voir à reprendre ça patiemment jusqu'à ce que ça rende mieux

[rodolphebrd]

Restez simple.
Exemple pour le bouton print/save (supprimer l'image en bg):

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
div#flyerS a {
  display: block;
  width: 200px;
  height: 25px;
  line-height: 25px;
  color: white;
  font-size: 1.5em;
  background: silver;
  border-radius: 6px;
  border: 1px solid gray;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="../../Twyver_Switchgear_flyer.pdf" target="_blank">Print/Save</a>

[kalisha stark]

silver, je ne connaissais pas *_* merci beaucoup pour ce petit bout de code, je le retravaillerais également plus en détail demain =) tant pis pour l'arrondi pour ie

[rodolphebrd]

Silver c'est pour faire vite et c'est plus facile à retenir.
Ce type d'écriture de couleur limite le nombre de possibilités comparé aux autres comme par exemple l'hexadécimal.
Sinon silver est égal à #C0C0C0 ou rgb(192, 192, 192) ou hsl(0, 0%, 75%)

[kalisha stark]

bien entendu mais de façon générale je l'utilise pour mettre des border rapidement en mode debug pour voir où partent mes div sauvages, et j'ai bouffé des bordures noires bleues et rouges, mais silver ça m'aurait changé un peu.. xD

[kalisha stark]

J'ai retravaillé toutes les images de l'accueil pour les améliorer et modifié le bouton dans le style que tu m'a conseillé

Pour le menu j'ai tenté de mettre un petit symbole pour indiquer qu'on pouvait dérouler, et ça faisait très laid, donc je laisse tel quel.

Et sinon enfin des nouvelles pour le contenu !!! Après une longue attente et un suspens insoutenable, mon employeur vient de me dire que l'ancien texte (celui que j'avais mis en remplissage en attendant) était très bien en fait. Donc ça fait perpette les oies que j'aurais pu commencer la traduction mais non, c'est tellement plus fun de tout faire en deux jours chrono