We Snow (application web)

Bonjour à tous.

Etudiant en licence, je viens vous présenter mon projet de fin d'année.
Avec deux autres étudiants de la promotion, nous avons crée un site internet http://we-snow.com, où nous présentons notre futur application en développement.
We Snow, est une application mobile de création d'itinéraire de ski et de partages des parcours au sein d'une communauté.
Sur notre site, vous pourrez utiliser une simulation de notre application, dans la section à propos.
Il serait donc intéressant d'avoir des avis éclairés sur notre simulation d'application ainsi que sur notre site internet.

Je me permets de vous demander de réaliser le questionnaire en fin de la partie testimonial, ce qui nous permettraient d'améliorer énormément notre application afin de récolter des avis externes à l'équipe.

Merci de votre soutien.

L'équipe We Snow.

Hello!

Au niveau design:

- Le monogramme bicolore n'est pas choquant, mais je trouve dommage de ne pas afficher le logo entier, que je trouve mieux réalisé. Dans tous les cas il ne respire pas assez, et je le rétrécirais bien un peu en hauteur pour garder un espacement vertical normal dans la navbar.
- La "height" du header est trop grande, il gaspille beaucoup d'espace et donne trop d'espacement vertical dans le menu. C'est un peu la faute du monogramme qui a besoin de respirer plus que davantage à cause de son inclinaison.
- Pas un grand fan du bouton play trop "carré" et rugueux. Un bouton rond aurait je pense adouci le design déjà très géométrique.
- L'arrondi des boutons des stores est soit trop généreux, soit trop avare et la bordure est probablement trop épaisse également.

IMPRESSION PERSONNELLE:
Je trouve dommage que ce logo assez charismatique ne se trouve pas en plein milieu de page directement, avec une headline poignante et la démo de l'app directement après. En regardant pour la première fois la page on a un effet de vide assez marquant et c'est dommage car le reste de la page est plutôt bien réalisé.

Voici comment j'aurais organisé les éléments: [voir image]

Au niveau technique:

- La video ne se joue pas lorsque je clique sur le button play?
- Pas de balises <header> pour le navbar et <footer> pour le contact/copyright?
- Problèmes dans le responsive design pour les résolutions intermédiaires : menu navbar trop collé a la bordure; sections à propos, team & contacts trop agencés en hauteur.
- Que vois-je? Des images pour les boutons stores et contact, arghhh! Pour les stores c'est aisé à implémenter avec border-radius. Pour contact il faut juste utiliser une <div> supplémentaire avec une bordure blanche et utiliser transform: rotate(45deg) En + tu pourrais mettre des jolis effets de hover après
- Optimiser les images. Pagespeed indique un gain d'espace possible de 3,7Mo! Ce qui est absolument énorme!
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwe-snow.com%2F&tab=mobile
- Après si on veut aller plus loin il faut aussi compresser/minifier toutes tes ressources statiques (fichiers css/images/js). Et encore mieux, les charger de manière asynchrone autant que possible (non-bloquant) pour encore optimiser le temps de chargement de ta page. Bon pour une simple landing page, certaines méthodes sont certainement overkill

Au niveau ergonomie/contenu:

- Si j'atterris directement sur ce site sans avoir lu la description que tu en fais sur Alsa, je ne sais toujours pas ce que ton app fait même si je scrolle jusqu'à la 3ème section. Bon je ne suis pas skieur, mais "Une multitude de fonctionnalités vous attendent." et "Vous allez changer votre façon de faire du ski." c'est un peu vague!

- Pas mal de fautes d'orthographe dans les paragraphes à corriger avant le lancement

- Lorsqu'on construit une "landing page" pour une application mobile, il est à mon avis primordial d'en mettre plein la vue au visiteur le plus rapidement possible. Il faut que tout de suite je sache en 1/2 lignes ce que cette app révolutionnaire fait et que je tombe à la renverse devant son design ô combien sublime.
Ma suggestion est donc d'ajouter une headline forte et marquante, de remonter la démo (d'ailleurs je n'avais même pas remarqué que c'était clickable avant de voir une iframe dans le code ^^) tous deux au dessus de la ligne de flottaison et de l'animer directement, à la place de la vidéo.

Voilà voilà, bon courage en tout cas, l'app semble bien réalisée mis à part quelques détails en regardant vite fait. Il faudrait sans doute un sujet à part pour ça. Encore un peu de travail et ce sera parfait, courage! Ca me donne envie de retourner au ski tout ça!

Cordialement,
Matthieu
Modifié par StylizIt (04 Mar 2015 - 20:11)

Ok, merci beaucoup pour toutes ces indications qui vont grandement nous aider dans l'amélioration de notre site internet.
Nous allons en parallèle de nos divers dossiers à réaliser pour cette application, essayer de mettre en place les indications que vous venez de nous donner.

Pourriez vous nous donner vos impressions sur l'application en elle même, au niveau de l'ergonomie, utilisation des icônes, couleurs, fonctions techniques....

Merci.

Bonjour,

Juste une remarque....

En page d'accueil, l'image 1418120169.96_2139531.jpg est de trop grande taille.

Retaillez-la physiquement (via GIMP par exemple) pour qu'elle soit à sa dimension d'affichage final.

Cdlt
Modifié par mpmp93 (05 Mar 2015 - 19:10)

Re-bonjour,

Autre remarque, vous appelez les Javascript en fin de code HTML dans le <body>, extrait:

    <!-- jQuery -->
    <script src="js/jquery.js"></script>
    <script src="js/script.js"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
    
    <!-- Scrolling Nav JavaScript -->
    <script src="js/jquery.easing.min.js"></script>
    <script src="js/scrolling-nav.js"></script>
</body>
</html>

Normalement, vous devez intégrer ces appels dans la partie <head>, en tête de page....

ENfin vous utilisez une fonte non embarquée sur votre site web:

  <link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">

Si possible, copiez cette ressource sur votre site.... Vous ne dépendrez plus de ressources externes. Si ces ressources externes sont fortement sollicitées, ça impactera les performances de votre application coté client.

A+

D'accord avec Victor,

En général on a tendance à appeler les scripts JS en toute fin de document, pour ne pas bloquer le chargement de ressources plus importantes comme le contenu et les styles. Ca peut poser un problème si on a besoin d'effectuer des traitements sur le document avant que le contenu ne soit chargé, mais ici ce n'est apparemment pas le cas.
On peut aussi le laisser dans le <head> et utiliser l'attribut async, mais attention au support des navigateurs.

Pour plus d'informations: http://www.alsacreations.com/astuce/lire/1562-script-attribut-async-defer.html

Aussi:

mpmp93 a écrit :

Enfin vous utilisez une fonte non embarquée sur votre site web:
[...]
Si possible, copiez cette ressource sur votre site....

Ce n'est ni faux ni vrai, mais plutôt: "ça dépend". On pourrait en débattre, mais en général les serveurs de Google seront beaucoup plus efficaces que celui de l'auteur pour charger efficacement la fonte demandée. En plus, Google détecte automatiquement le navigateur de l'utilisateur pour charger une version de la fonte la plus adaptée.
Dans certaines applications plus critiques où la fiabilité des ressources est essentielle il est probablement plus adapté de les héberger, mais dans notre cas les potentielles améliorations seront tellement minimes qu'il me semble bien plus pratique de Google laisser faire son travail et charger la fonte directement depuis leur CDN plutôt que de s'amuser à convertir la fonte en différents formats, etc...

tempif a écrit :
Ou pas, ça dépend de ce que fais le script et comment il le fait.

Si c'est du JS qui permet de faire passer la pilule du HTML 5 à IE 8, il doit être appelé dans l'élément head ; mais, c'est de l'exception qui confirme la règle.

Victor BRITO a écrit :

Si c'est du JS qui permet de faire passer la pilule du HTML 5 à IE 8, il doit être appelé dans l'élément head ; mais, c'est de l'exception qui confirme la règle.

Ah merde, je croyais que l'intérêt de placer un bout de js dans le head était de pouvoir l'executer avant le chargement du document. Alors en fait c'est juste un truc pour IE8 ? On m'aurait menti ?