Responsivité d'un site one screen
Bonjour,
je cherche a réaliser un site full responsive en one page, one screen ( pas de scroll ), en résumé :
/*je fixe un container en width et en heigth */
/*la width est adapté en mediaqueries selon largeur d'écran
.container {
width : xxx px;
height: 100vh
}Ce n'est pas un site avec une image et un menu seulement.
Tout le contenus 'affiche donc dans un écran et au centre avec plusieurs animation entre autre.
Toute la difficulté réside donc à adapter le contenu fixe pour rentrer dans chaque écran correctement.
En effet, les écrans n'ont pas les même proportions hauteur/largeur, ce qui invalide l’utilisation de mesure relative ( % , vh ou vw ).
En effet, pour l'exemple, sur du 1920900 , un block en 26vw55vh donne un carré de 500500. Faites la même chose sur un écran 1280800, forcement, on a plus un carré.
Gênant donc.
M'est donc venu à l'idée, comme seul solution, de récupérer largeur et hauteur des écran utilisateurs à chaque chargement de page, puis à l'aide d'une algo ressortir des chiffres précis pour chaque mesure.
Problème..ce genre de chose est bon au chargement d'une page, mais ne fonctionne pas si l'on redimensionne à la volée.
J'ai donc deux questions :
Dois ton considérer la pratique du responsive uniquement lors du chargement du dom ? ou obligatoirement dans toutes situation tel que le redimensionnement. ( je pense avoir ma réponse rien qu'avec les mobiles/tablettes => portrait ou paysage = non recharge )
Dois je oublier le site one screen ( version complet, pas une pauvre image ! ) ? est ce juste impossible à réaliser en full responsive ?
Merci par avance
11 réponses
Un site responsive doit être responsive à tout redimensionnement de page. Mais ce n'est que mon avis, chacun peut penser ce qu'il veut. Je te conseil d'aller voir du côté des @media en css, ça sera plus propre que faire ton responsive en js.
Tu peux utiliser les propriétés mathétiques du css ou de ton préprocesseur. Les 100 vw et vh prennent bien la totalité de ton écran, du moins de la fenêtre. Plutôt que de donner des données fixes, utilises des divisions/multiplications, etc..
Merci pour vos réponses.
Je n'ai jamais travaillé avec la fonction calc()... Intéressant. Je ne sais si ça va me premettre d'assurer une div ronde dans tout les cas, mais je vais m'y pencher.
A terme si je n'y arrive pas, je me rabattrais soit sur une écoute resize() soit sur une armée de mediaqueries avec données fixes.
Pour réaliser un rond en css, il te suffit de mettre la propriété border-radius à 50%;
div{
border-radius:50%;
}Ha ha merci, ça je sais faire. Pour tout te dire, le site est réalisé à 80%..sauf que je me suis rendu compte que mon responsive n'était que sur la largeur. Hors dans l'idée d'un one screen, je suis obligé de jouer la responisivté en hauteur. ( vu que de base on est sur du heigth 100vh )
Mais plus j'avançe dans mon travail, plus je me dis que c'est juste pas possible de garder des proportions esthétiques en total one screen. ( imaginons une résolution de 1000 par 200 , bin c'est juste pas possible d'y faire rentrer un site one screen.
Non, je dois donc me fixer des limites et des conditions d'écran tout l'intérêt d'un media queries ou de condition js pour faire du one screen uniquement dans des screen avec proportions acceptables.
Pour te fiare une idée concrête :
Je te passe la galère du rond responsive qui utilise %width sur % padding-bottom
Tu peux également réaliser un template avancé, comme sur ton screen, pour les écrans de grandes tailles et réaliser un second theme plus simple pour les petits écrans.
Sinon, vouloir avoir quelqu'un chose sans scroll en 2016 et presque 2017... c'est assez... étrange
Exootia. Pourquoi dis tu ça ?
A cause de la necessité du responsive avec des écrans de plus en plus différent ?
Ou estimes tu que c'est un souci de "tendance" ? car si c'est le cas, si je vois plethore de one page sous bootstrap, je ne crois pas voir beaucoup de one screen, et ce, ni hier, ni aujourd'hui
Je tout dépend comment tu définis le "scroll". J'ai vu de nombreux sites, notamment des sites partenaires à Microsoft (pour leur projets) qui sont en one screen.
C'est pas une question de tendance mais d'usage. A une époque les gens voulaient pas des sites sans scroll, car ils pensaient que les utilisateurs scrolleraient pas. Ce n'est plus le cas aujourd'hui, on a tous l'habitude à scroller et surtout depuis l'arrivée des smartphone.
Ha ok, je comprends ta remarque alors.
Pour mon cas le design animation choisis entend obligatoirement un one screen.
Pour le reste, je suis d'accord, que pour l'usage, actuellement, le scroll me semble largement préférable et pratique pour nous dev.
Ceci dit, et ce n'est que débat annexe, si les smartphones ont démocratisé l'usage du scrolling, il n'empêche pas moins que nombreux design web sont complètement différent selon le support (pc vs mobile ). Le mobile est quasi dependant du scroll à l'inverse du pc qui peut se permettre plsu de fantaisie.
Donc, pour pc, sur un plan marketing ( taux d'information lues ), je serais curieux de savoir si l'info au fond d'un scroll est plus lue qu'un one screen avec clic lien pour info.