Bonjour à tous,
Je me mets à la page ces derniers temps concernant le CSS et surtout le CSS3, afin de bosser sur un projet où je dois réaliser un web design, assez sommaire, pour sa version bêta.
Après pas mal de lectures, je me retrouve un peu perdu quand au choix des techniques à utiliser pour la mise en page du site.
Le projet est un jeu par navigateur et demande donc une mise en page assez compliquée car beaucoup d'éléments doivent être positionnés comme il faut.
- Un Top menu en position: fixed top
- Bannière sous le top menu pour du "kikoo lol joli"
- Un espace horizontal pour y mettre les ressources du jeu et compagnie
- Un menu vertical pour le jeu lui-même
- La page elle-même
- Le footer en fixed bottom
Ce n'est pas horrible à réaliser, mais un petit peu complexe pour un codeur PHP comme moi qui n'a vraiment pas l'habitude de se pencher sur le design d'un site.
J'en suis resté à l'emploi du float et un peu du position: fixed, mais après ces lectures, je ne sais plus trop vers quoi me tourner.
- Le bon vieux float et position: fixed
- Le display: table dont j'ai lu pas mal d'articles
- Le dispay: inline, block, inline-block
- Miser sur Flexbox et Grid layout, mais je ne sais pas si le second sera possible dans 3,6,9,12 mois.
Le premier est relativement simple à maîtriser pour moi car je l'ai déjà utilisé (à petites doses) il y a pas mal de temps pour comprendre un peu tout ca. C'est ce que j'ai utilisé pour me faire une idée de la mise en page après l'avoir réalisée sur papier (Je suis encore plus nul avec Photoshop, que pour réaliser un design en HTML/CSS). Je suis arrivé à un résultat pas trop moche mais, je trouve, assez lourd à gérer.
Le deuxième, je ne l'utilise que pour certains éléments. J'ai donc du mal à concevoir tout un site en utilisable du display: table. On a abandonné la mise en page par tableaux, pourquoi recommencer mais avec du CSS? Malgré tout, c'est séduisant car le positionnement des éléments semble plus aisé de prime abord.
Le troisième, ca me semble vraiment compliqué à mettre en oeuvre pour une mise en page complète comme j'en ai besoin. Les white-space et compagnie, ca demande beaucoup de petites astuces et de prise de tête, il me semble.
Pour le dernier, ca semble alléchant. Du Flex pour les menus et certains éléments. Du Grid layout pour la mise en page elle-même. Mais le gros soucis, c'est que le premier est un peu bordélique avec les préfixes et syntaxes, ainsi que la compatibilité. Le deuxième est tout simplement non-supporté pour le moment à part par IE10. Et aucune idée de quand on pourra l'utiliser pour la compatibilité que je désire. Voir même inutilisable à cause d'IE9 car je n'ai entendu nul part un JS qui le rende compatible pour lui, comme avec Flex.
Je ne désire une compatibilité qu'avec IE9+ et les navigateurs récents, la communauté gamer étant, en général, assez à jour là-dedans (même si certains jouent du boulot avec des IE7/8. C'est mal!). Je ne dois donc pas choisir la solution la plus compatible, mais la plus simple à mettre en oeuvre, pour moi, et adaptée à mes besoins.
Je ne cherche pas du responsive à tout prix non plus puisque c'est un design pour une bêta. Je compte engager un web designer dont c'est le métier pour la release et qu'il s'embête lui-même là-dessus! Je ferai d'ailleurs appel à Alsa.fr pour cela, si il y a des designers capables de faire le thème sur lequel le jeu se base ^^
Donc Quid?! On garde l'alambiqué float+position? Le display: table qui semble plus simple mais qui revient à revenir à une mise en page par tableaux? Miser sur l'avenir avec Flex et Grid?
Merci à ceux qui prendront le temps de se pencher sur la question et de m'éclairer sur les avantages/inconvénients de chaque style et m'aider à m'orienter.
Je me mets à la page ces derniers temps concernant le CSS et surtout le CSS3, afin de bosser sur un projet où je dois réaliser un web design, assez sommaire, pour sa version bêta.
Après pas mal de lectures, je me retrouve un peu perdu quand au choix des techniques à utiliser pour la mise en page du site.
Le projet est un jeu par navigateur et demande donc une mise en page assez compliquée car beaucoup d'éléments doivent être positionnés comme il faut.
- Un Top menu en position: fixed top
- Bannière sous le top menu pour du "kikoo lol joli"
- Un espace horizontal pour y mettre les ressources du jeu et compagnie
- Un menu vertical pour le jeu lui-même
- La page elle-même
- Le footer en fixed bottom
Ce n'est pas horrible à réaliser, mais un petit peu complexe pour un codeur PHP comme moi qui n'a vraiment pas l'habitude de se pencher sur le design d'un site.
J'en suis resté à l'emploi du float et un peu du position: fixed, mais après ces lectures, je ne sais plus trop vers quoi me tourner.
- Le bon vieux float et position: fixed
- Le display: table dont j'ai lu pas mal d'articles
- Le dispay: inline, block, inline-block
- Miser sur Flexbox et Grid layout, mais je ne sais pas si le second sera possible dans 3,6,9,12 mois.
Le premier est relativement simple à maîtriser pour moi car je l'ai déjà utilisé (à petites doses) il y a pas mal de temps pour comprendre un peu tout ca. C'est ce que j'ai utilisé pour me faire une idée de la mise en page après l'avoir réalisée sur papier (Je suis encore plus nul avec Photoshop, que pour réaliser un design en HTML/CSS). Je suis arrivé à un résultat pas trop moche mais, je trouve, assez lourd à gérer.
Le deuxième, je ne l'utilise que pour certains éléments. J'ai donc du mal à concevoir tout un site en utilisable du display: table. On a abandonné la mise en page par tableaux, pourquoi recommencer mais avec du CSS? Malgré tout, c'est séduisant car le positionnement des éléments semble plus aisé de prime abord.
Le troisième, ca me semble vraiment compliqué à mettre en oeuvre pour une mise en page complète comme j'en ai besoin. Les white-space et compagnie, ca demande beaucoup de petites astuces et de prise de tête, il me semble.
Pour le dernier, ca semble alléchant. Du Flex pour les menus et certains éléments. Du Grid layout pour la mise en page elle-même. Mais le gros soucis, c'est que le premier est un peu bordélique avec les préfixes et syntaxes, ainsi que la compatibilité. Le deuxième est tout simplement non-supporté pour le moment à part par IE10. Et aucune idée de quand on pourra l'utiliser pour la compatibilité que je désire. Voir même inutilisable à cause d'IE9 car je n'ai entendu nul part un JS qui le rende compatible pour lui, comme avec Flex.
Je ne désire une compatibilité qu'avec IE9+ et les navigateurs récents, la communauté gamer étant, en général, assez à jour là-dedans (même si certains jouent du boulot avec des IE7/8. C'est mal!). Je ne dois donc pas choisir la solution la plus compatible, mais la plus simple à mettre en oeuvre, pour moi, et adaptée à mes besoins.
Je ne cherche pas du responsive à tout prix non plus puisque c'est un design pour une bêta. Je compte engager un web designer dont c'est le métier pour la release et qu'il s'embête lui-même là-dessus! Je ferai d'ailleurs appel à Alsa.fr pour cela, si il y a des designers capables de faire le thème sur lequel le jeu se base ^^
Donc Quid?! On garde l'alambiqué float+position? Le display: table qui semble plus simple mais qui revient à revenir à une mise en page par tableaux? Miser sur l'avenir avec Flex et Grid?
Merci à ceux qui prendront le temps de se pencher sur la question et de m'éclairer sur les avantages/inconvénients de chaque style et m'aider à m'orienter.
