Bonjour à vous, amis devs !
 
Je suis sur le point de me lancer sur un nouveau projet, qui doit être disponible pour le mobile. Voulant faire les choses bien, je me suis baladé partout sur le net pendant deux longues semaines à tout lire sur le responsive design. Je pense avoir bien compris la totalité du sujet, à présent.
 
Bon élève et pas prétentieux, je me suis dit que Bootstrap pourrait pourvoir à mon bonheur. Après tout, qu'est mon petit cerveau tout seul face à une équipe acharnée qui travaille dessus depuis deux ans ? Mais voila, après avoir pas mal appris sur Bootstrap(notamment grâce au tuto de bestmomo), je me demande bien si c'est vraiment le chemin que je dois prendre... Explications :
 
- Le design du site que je m'apprête à développer est très spécifique, je n'utiliserai donc quasiment jamais les designs fournis par Bootstrap.
- Lesdits designs par défaut pourraient éventuellement me déstabiliser en modifiant le comportement de balises que je suis habitué à utiliser.
- Les différents plugins jQuery sont bien utiles, mais rien ne m'empêche de les ajouter séparément.
 
Enfin, tout particulièrement, mon plus gros souci : je ne suis pas certain que Bootstrap affiche comme je le souhaite les informations. C'est la principale information que je recherche, et qui m'a échappé jusqu'à maintenant dans mes tribulations sur le net. D'après ce que j'ai vu dans son CSS, Bootstrap passe en mode d'affichage "mobile" lorsque la taille de la fenêtre est inférieure à 768px. Les blocs passent alors à un mode "les uns sur les autres", ce qui est très bien... Dans l'absolu.
 
J'ai pris mon Galaxy S2 en mode d'affichage paysage, sur le coté. Le GS2 a une hauteur de 800px, je m'attendais donc à voir apparaitre la version desktop. C'est pourtant bien la version mobile qui est restée à l'écran.
 
Je me demande donc ce qu'il en est des smartphones nouvelle génération, dont la résolution monte à 1080 x 1920 px, et encore plus des tablettes comme la dernière Nexus 7, ou des tablettes 10'' ou plus... Vont-ils avoir droit à la version desktop même en mode portrait ? Ce serait fâcheux, il me semble. Information que je ne suis pas parvenu à dénicher en ligne non plus.
 
enfin, si je souhaite montrer certains blocs en version > 768 et leur pendant "abrégé" en version < 768px, je n'ai absolument pas trouvé comment faire en utilisant Bootstrap... Tout ce que j'ai vu c'est des "visible-phone", "visible-tablet" et "visible-desktop" ainsi que leurs pendants "hidden"... Ce n'est pas suffisant.
 
Merci BEAUCOUP pour m'avoir lu, et d'avance pour vos réponses !
 
Cordialement,
Jeremy

Il y a plusieurs points :

Pour les écrans a haut densité , dont beaucoup de téléphone font parti, la résolution disponible pour l'app n'est pas celle native de l'écran

Par exemple pour un iphone 5, cela signifie que le site croit que le téléphone à une résolution de 320 x 568 pixels, alors que ça résolution réelle est 640*1126 . Ensuite le téléphone utilise la résolution réelle pour rendre les caractères et les données vectoriellle. C'est ce qui fait que ta police est jolie, bien lisse.

Ensuite pour ce qui est d'utiliser bootstrap, ca va dépendre de ton besoin. Perso, j'aime bien l'utiliser : il me permet d'avancer vite, et d'affiner par la suite (ne serait ce que les boutons, les formulaires, ) : ça fait propre tout de suite, et ça a très tr_s vite de la gueule.

Je n'ai pas compris ton problème pour le hidden/visible : tu mets des la classe hidden-phone aux span/p/div qui contiennent le contenu à cacher .
Exemple :

<div>
Bonjour à vous, amis devs ! 
 
Je suis sur le point de me lancer sur un nouveau projet, qui doit être disponible pour le mobile.
 Voulant faire les choses bien, je me suis baladé partout sur le net pendant deux longues semaines à tout lire sur le responsive design.
 Je pense avoir bien compris la totalité du sujet, à présent. 
 
 <span class="show-more visible-phone">Voir plus</span>
<p class="hidden-phone more">
Bon élève et pas prétentieux, je me suis dit que Bootstrap pourrait pourvoir à mon bonheur. 
Après tout, qu'est mon petit cerveau tout seul face à une équipe acharnée qui travaille dessus depuis deux ans ? 
Mais voila, après avoir pas mal appris sur Bootstrap(notamment grâce au tuto de bestmomo),
 je me demande bien si c'est vraiment le chemin que je dois prendre... Explications : 
</p>
 
</div>
<script>
$('.show-more').click(function(){
    $(this).siblings('.more').removeClass('hidden-phone');
    $(this). hide();
});
</script>

A noter que tu peux tout à fait définir tes paramètres si ceux choisis ne te vont pas : http://getbootstrap.com/customize/

Tu peux aussi regarder du côté de "concurrents" http://foundation.zurb.com/

Hello et merci pour cette réponse !
 
J'ai bien compris, et je sais aussi comment cacher des éléments maintenant, merci. La question qui reste et que tu n'as soulevé qu'à moitié c'est pour les smartphones à très haute résolution - 1080p, comme le Xperia Z1, le Nexus 5 ou encore le Galaxy S4. Une densité de pixels impressionnate qui tourne dans les 450 ppp. Ceux-ci vont-ils prendre en compte la version desktop, du coup ? C'est super problématique...

Il est possible qu'il y a les deux, avec une résolution déclarée de 960 x 540 (en tout cas c'est la résolution affichée sur une nexus 7 2013)

d'un autre côté, sur un écran pareil, tu peux afficher ce genre de contenu sans perdre en lisibilité, ce n'est pas super problématique. 768px permettent largement d'avoir deux colonnes lisibles

Il ne faut pas raisonner en terme de téléphone, tablette ou desktop , mais en terme de capacité : quelle est ma surface ( en pixel) exploitable, quelle sont les fonctionnalités du navigateur, quel réseau j'ai

Les utilisateurs qui se prennent un note, ou un nexus 4 sont conscients de la taille et de la résolution de l'écran.

Pour un note, peut-être, mais pour un Nexus 5, qui a une densité de pixels élevés, le site apparaitra en tout petit, et ce n'est pas souhaitable. Je suis en train de voir comment détecter la densité via les media queries, il semblerait que ce soit une possibilité de solution... Merci encore pour ton aide

les nexus 5 a une pixel density de 3 , donc 1920x1080 donnent 640x360 pixels en css

Comment tu sais la pixel density ?

Je l'ai lu sur une conf très intéressante : http://t.co/rvU7yKTJx7

Intéressant, en effet ! Merci, ça va me filer un coup de main