Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2209 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Responsive design - utiliser Bootstrap ?

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Responsive design - utiliser Bootstrap ?

n°2209262
jerryone3
Gamer
Posté le 05-11-2013 à 00:57:50  profilanswer
 

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

mood
Publicité
Posté le 05-11-2013 à 00:57:50  profilanswer
 

n°2209273
flo850
moi je
Posté le 05-11-2013 à 10:17:43  profilanswer
 

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 :

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


Message édité par flo850 le 05-11-2013 à 10:25:36

---------------

n°2209294
jerryone3
Gamer
Posté le 05-11-2013 à 13:54:08  profilanswer
 

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...

n°2209300
flo850
moi je
Posté le 05-11-2013 à 14:40:35  profilanswer
 

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.


Message édité par flo850 le 05-11-2013 à 14:43:49

---------------

n°2209346
jerryone3
Gamer
Posté le 05-11-2013 à 19:36:25  profilanswer
 

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 :)


---------------
Si ça n'explose pas, vous ne faites pas avancer la science.
n°2209464
flo850
moi je
Posté le 06-11-2013 à 18:28:22  profilanswer
 

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


---------------

n°2209506
jerryone3
Gamer
Posté le 06-11-2013 à 21:54:39  profilanswer
 

Comment tu sais la pixel density ?


---------------
Si ça n'explose pas, vous ne faites pas avancer la science.
n°2209507
flo850
moi je
Posté le 06-11-2013 à 21:57:02  profilanswer
 

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


---------------

n°2209810
jerryone3
Gamer
Posté le 09-11-2013 à 16:56:14  profilanswer
 

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


---------------
Si ça n'explose pas, vous ne faites pas avancer la science.

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Responsive design - utiliser Bootstrap ?

 

Sujets relatifs
[Vba] Utiliser le nom de la feuille dans le nom de celulleQuel logiciel pour création de site en adaptative design ?
Quel principe utiliser?Aide Blog TUMBLR (Design)
Problème de code Wordpress, le design fait des siennes!utiliser tinyxml avec VS2010 dans un Windows Forms app
Quelle bibliothéque utiliser ?utiliser la méthode POST et load('ur','div') en même temps
Responsive design et css barré firebug donc pas pris en compte 
Plus de sujets relatifs à : Responsive design - utiliser Bootstrap ?


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR