Site responsive

Bonjour dans le cadre de mon premier projet de DUT, je dois réaliser un site mobile avant tout, le coté responsive étant plus un bonus.
Merci de me faire parvenir vos critiques.
(Les critiques graphiques sont les bienvenues même si je dois me tenir à la maquette que j'ai présentée, si ces choix sont pertinents, je pense que je pourrai me permettre de les integrer quand même.)

Voici le lien
https://dl.dropboxusercontent.com/u/106693281/Projet-S1/index.html

Au passage petite question, je voulais supprimer l'effet de hover sur mon menu pour les écrans supérieurs à 960px, j'ai donc mis à l'aide des medias queries le selecteur en question sans le hover et un display block.
Cela fonctionne très bien sauf sur Ipad...

Merci

À quoi sert le :hover sur un écran de moins de 960px, qui n’a très probablement pas de souris branchée pour survoler un élément ?

Et inversement, pourquoi ne pas mettre de :hover sur un écran de plus de 960px qui a très probablement besoin de l’indice visuel du survol pour saisir une interaction possible ?

Le hover sert à obtenir un menu déroulant sur mobile. Utilisé seul, on obtient alors un menu fonctionnel mais qui ne se referme pas, vu que les navigateurs mobile prennent en compte le hover comme un touch.
Il faut donc l'accompagner du script présent à la fin du html afin qu'il puisse se refermer correctement.
On obtient alors une navigation simple, rapide et fonctionnelle sur mobile sans appeler de bibliothèque qui viendrons allonger le temps de chargement.

En revanche oui je devrais mettre un hover pour les écrans de plus de 960px mais le problème sera toujours présent dans le cas d'une tablette en paysage.
Modifié par PierreR (13 Dec 2013 - 10:10)

Ten a écrit :
À quoi sert le :hover sur un écran de moins de 960px, qui n’a très probablement pas de souris branchée pour survoler un élément ?

mobile != tactile, il existe toujours des téléphone mobile non tactile. De plus taille écran != taille viewport.

PierreR a écrit :
Bonjour dans le cadre de mon premier projet de DUT, je dois réaliser un site mobile avant tout, le coté responsive étant plus un bonus.

Si le fait que ton site internet soit compatible sur mobile uniquement est la consigne (ce qui en soi est je trouve totalement stupide, mais passons sur la consigne...), alors pourquoi ne pas te tourner vers Jquery Mobile qui propose nativement tout un tas de fonctionnalités, qui sont "en bonus" comme tu dis entièrement responsive mais surtout totalement adaptés au mobile.

http://demos.jquerymobile.com/1.4.0/