1448 sujets

Web Mobile et responsive web design

Pages :
Salut à tous,

je vous soumets ici une solution que j'ai utilisé pour rendre un site responsive web design sans me prendre la tête avec les em, vw, % et tout ce binz.

Le problème étant qu'en utilisant autre chose que des unités en px, il est très difficile d'avoir le même rendu sur tout les écrans, voir impossible ... telle tablette affiche des textes plus gros qu'une autre, les images (qui sont toujours en pixels faut'il le rappeler) s'affichent différemment en fonction du ration device-pixel-ratio du device, bref c'est le bordel ...

Quand on cherche des solutions sur le net, tout le monde dit : ha ben facile re-déclares des styles CSS en fonction de la résolution du device, utilise un viewport avec initial-scale, maximum-scale ... bref pour moi c'est en retour en arrière, vers les années 1998 ou l'on devait presque coder un site par navigateur (netscape, ie et compagnie), vive le progrès ...

Donc ma solution simple et facile est celle-ci :
> Tu intègres ton site en pixels (px) comme ca tout est bien calé
> Tu redimensionnes le site avec une fonction javascript qui change le style:zoom sur le site en fonction de la largeur ou la hauteur (comme tu préfères) de l'écran du device
> Et voila c'est fait, le rendu est le même quelque soit l'écran !

Donc j'aimerais savoir ce que vous pensez de cette solution ? Est-ce que j'ai raté un truc ou cette solution vous semble plus simple et efficace que d'avoir à gérer :
> plusieurs fichiers CSS en fonction du device
> des viewport avec des scales pour chaque device
> des images qui s'affichent différemment en fonction du device-pixel-ratio

Merci pour vos retours.

Voila le code :

<!DOCTYPE html>
<html lang="fr">
<head>
	<title>Titre</title>
	<meta charset="utf-8">
	
	<style>
	
	html, body {
		margin : 0 ;
		padding : 0 ;
	}
	
	#FSite {
		position : absolute ;
		width : 1300px ;
		height : 640px ;
		top : 50% ;
		left : 50% ;
		margin : -320px 0 0 -650px ;
		background : #FFCC00 ;
	}
	
	</style>
	
	<script type="text/javascript">
		
	function XLViewport() {
	
		var SiteW = 1300 // Largeur du site source ;
		var SiteH = 640 // Hauteur du site source ;
	
		var ScreenW = getWindowWidth() ;
		var ScreenH = getWindowHeight() ;
		
		// Je veux que le site fit en fonction de sa hauteur
		
		PercentH = 100 ;
		if (SiteH > ScreenH)
		PercentH = (ScreenH * 100) / SiteH ;

		PercentW = 100 ;
		if (SiteW > ScreenW)
		PercentW = (ScreenW * 100) / SiteW ;
		
		if (PercentW <= PercentH) Percent = PercentW ;
		else Percent = PercentH ;
		
		Scale = Percent / 100 ;
		
		FFrame = document.getElementById('FSite') ;
		FFrame.style['-webkit-transform'] = 'scale(' + Scale + ')';
		FFrame.style['-moz-transform'] = 'scale(' + Scale + ')';			
		FFrame.style['-ms-transform'] = 'scale(' + Scale + ')' ;
		FFrame.style['transform'] = 'scale(' + Scale + ')';
		
	}
	
	function getWindowHeight() {
		var windowHeight=0;
		if (typeof(window.innerHeight)=='number') {
			windowHeight=window.innerHeight;
		}
		else {
		 if (document.documentElement&&
		   document.documentElement.clientHeight) {
			 windowHeight = document.documentElement.clientHeight;
		}
		else {
		 if (document.body&&document.body.clientHeight) {
			 windowHeight=document.body.clientHeight;
		  }
		 }
		}
		return windowHeight;
	}

	function getWindowWidth() {
		var windowWidth=0;
		if (typeof(window.innerWidth)=='number') {
			windowWidth=window.innerWidth;
		}
		else {
		 if (document.documentElement&&
		   document.documentElement.clientWidth) {
			 windowWidth = document.documentElement.clientWidth;
		}
		else {
		 if (document.body&&document.body.clientWidth) {
			 windowWidth=document.body.clientWidth;
		  }
		 }
		}
		return windowWidth;
	}
	

	window.onload = function(){
		XLViewport() ;
	};
	
	window.onresize = function(){
		XLViewport() ;
	};
		
	</script>	
	
	
</head>
<body>

	<div id="FSite">

		CONTENU DU SITE

	</div>

</body>
</html>

Modifié par Stéphanie W. (27 Mar 2014 - 17:28)
J'en pense que le responsive et l'optimisation mobile c'est bien PLUS que juste "faire rentrer le site dans 320px" et qu'optimiser un site sur mobile c'est plus compliquer que juste redimensionner. Un peu de lecture : http://www.alsacreations.com/article/lire/1559-responsive-web-design-present-futur-adaptation-mobile.html et là c'est QUE la partie technique, je te parles pas de l'expérience utilisateur sur différents écrans, de l'optimisation de la taille des zones des doigts, de l'ergonomie sur mobile, de la typographie, des contenus complexes comme les onglets, les accordéons, les tableaux, des fonctionnalités avancées (comme le GPS ou le multitouch), etc.

Nous sommes en 2014, il faut arrêter de vouloir avoir le même rendu partout au pixel près partout : le web c'est fluide en hauteur, en largeur, s'adapter à un média fluide est une contrainte à laquelle il faut s'habituer qu'on soit designer, intégrateur, dev, ou autre. Du coup j'ai plutôt l'impression que c'est ton script qui nous renvoie à un web printeux des années 90 pixel perfect pareil sur touts les navigateurs alors que ce web là est mort et enterré Smiley smile

Balancer un gros JS pour que ça rentre dans la fenêtre au niveau du zoom c'est totalement inutile, tant qu'à faire autant ne rien faire et laisser l'utilisateur zoomer tout seul, les navigateurs font ça très bien comme des grands quand le site est pas optimisé sur mobile Smiley smile En plus tu vas finir avec des tailles de polices microscopiques, des boutons incliquables au doigt. Bref à mon avis pas d'optimisation vaut mieux que ton script, désolée.

Et oui le responsive c'est compliqué, c'est chiant, c'est prise de tête, ça demande de grosses compétences en inté, en design, en ergo, de jouer avec des %, des em et pleins d'autres unités, mais hacker tout ça avec un JS juste parce qu'on a pas envie de se "prendre la tête avec les em, vw, % et tout ce binz." c'est pas une solution durable.
+1 Stpéhanie Smiley biggrin

Sans vouloir peser, ton script :
* utilise les transformations CSS et n’est donc pas compatible avec de nombreuses configurations;
* c’est un script ! Quid du javascript désactivé, ou d’un problème de connexion par exemple ?
* tu penses vraiment que ça résout le problème de densité de pixel des écrans, ton « binz » ?

En tout cas j’aimerais bien tester un site de démonstration, juste pour voir à quel point cette idée est mauvaise Smiley fache

Ce que tu as raté en fait, c’est comprendre la notion même de « responsive ».

Bien joué en tout cas, fallait y penser. Ou pas.
Je comprend votre point de vue qui dit que ce n'est plus vraiment du responsive design : effectivement !

Mais j'ai besoin d'intégrer une application web, pas un site. De ce fait tout les éléments du design doivent être strictement identiques quelques soit l'écran. Et pas :
> 4 images par ligne en 25% de largeur quand t'es sur une tablette
> 2 images par ligne en 50% de largeur quand t'es sur un mobile
> 1 image par ligne en 100% de largeur quand t'es sur un mini écran
> etc

Ou alors le logo du site sur le coté quand t'es en 1080px ++ et en haut quand t'as moins de largeur.

Donc le but de ce script est d'avoir un seul et unique site source, calé au pixel près et de ne pas avoir à gérer des XXX css pour chaque device.

Perso je trouve ca pratique et c'est la seule solution que j'ai trouvé pour avoir un rendu strictement identique quelque soit le device.

Biensur j'ai travaillé la charte / le design pour qu'il soit adapté avant tout au pad et mobile. Et ca marche plutot bien ... plus de prise de tête, fini les viewport .. une fonction et ca roule Smiley cligne
Modifié par AntiStatic (27 Mar 2014 - 13:15)
Hello,

Je trouve que ta solution passe complétement à coté du RWD. Le but du RWD c'est quand même d'adapter un site web pour le rendre utilisable sur des devices de tailles hétérogènes. Ton script ne fait qu'adapter l'échelle du site, mais ne le rendre jamais + utilisable.

Comme l'a souligné Stéphanie, oui c'est un vrai défi d'architecturer un contenu selon plusieurs contenant. C'est du boulot et c'est complexe. Nier cela, c'est ne pas comprendre ce qu'est le RWD, aussi je t'invite aussi à lire les articles (en français) de Stéphanie http://www.inpixelitrust.fr/blog/mobile/

Lionel
yoy : Ton script ne fait qu'adapter l'échelle du site, mais ne le rendre jamais + utilisable.

Je précise, je ne travail pas sur un site mais une application web dont le design a été pensé pour les tablettes et le mobiles : gros texte, gros boutons .. en gros c'est un sérious game.

Cette appli doit être toujours en plein écran sans scroll et pas se balader en fonction du device !
Fais-moi rire : une interface conçue pour tous les écrans n’a pas besoin d’être mise à l’échelle, figures-toi. Elle est censée être bien conçue.

« Un rendu strictement identique quelque soit le device » est exactement le problème de ta démarche. C’est un principe qui existait en 1998, raison pour laquelle on se torturait pour les différents navigateurs. Ça n’est plus nécessaire et je dirais même plus : ça ne devrait jamais être le cas.

Un utilisateur naviguant sur ton application avec un écran 26 pouces ne devrait jamais utiliser la même interface qu’un utilisateur avec son petit smartphone de 3 pouces. C’est évident.

Mais encore une fois, quelqu’un demande l’avis de ses comparses et n’écoutes pas. Pourquoi demander ?

Bon courage pour la suite, en tout cas.
Modérateur
AntiStatic a écrit :
Cette appli doit être toujours en plein écran sans scroll et pas se balader en fonction du device !

Et comment ce zoom gère les ratios différents? Entre diverses tablettes/mobiles les écrans peuvent être plus ou moins allongés. Et je ne parle même pas de l'opposition landscape/portrait, même tenu dans le même sens les ratios varient entre 1:1 et 1:2. Comment gère tu ça avec ton script? Tu fais ton app fixe en 1:1 et rajoute des bandes noires (jusqu'à la moitié de l'écran pouvant être inutilisée)? Tu choisi un ratio "courrant" et ma foi, certains auront des bouts coupés et d'autres des portions inutilisées?

Et la gestion de la taille? Alors qu'on tient un mobile et une tablette à peu près à la même distance, les tailles d'écran, physiques, varient du simple au quintuple. Si le contenu est utilisable sur tablette et lisible à une taille adaptée, la version en taille divisée par 5 risque bien d'être illisible. Idem pour les zones/boutons actives, nos doigts ayant toujours la même taille…

De plus le html est basé sur un flux et des boîtes adaptatives. Faire un visuel fixe est justement limiter les possibilités.
Merci pour la précision pour l'applicatif, ça aide un peu à comprendre tes problématiques, mais c'est dommage de pas l'avoir précisé ces contraintes avant, ma réponse aurait été tout autre Smiley smile

Du coup effectivement tu es plus vraiment trop dans les problématiques de site responsive avec du contenu adaptatif au sens web, mais vraiment sur de l'applicatif (en HTML5 ?). C'est une sorte de jeu avec tout calé au pixel près ? On peut voir ? Je suis super intriguée !!

J'ai surtout peur que certains arrivent sur le forum, lisent ton titre et prennent ton script pour un site responsive type site e-commerce, vitrine ou d'actu en se disant "facile le responsive c'est réglé" sans pour autant optimiser derrière pour les doigts. Serait-il possible d'éditer le sujet pour préciser qu'il s'agit d'applicatif pour ne pas induire les gens en erreur peut-être ?

Même en applicatif natif, on a des applications "responsive" sur Android dont les assets s'adaptent à l'appareil, parfois il y a un logo un peu plus gros, parfois non, parfois plus de place en dessous, etc. Du coup tu as jeté un oeil du côté du natif pour voir comment ils gèrent ça ? Y a peut-être de l'inspi à creuser de ce côté là.

Par contre la gestion portrait paysage m'intrigue : tu gères ça comment ?
Modifié par Stéphanie W. (27 Mar 2014 - 14:12)
MOI ! , j'ai un exemple d'application inutilisable sur tablette :
et oui, je me suis offert une tablette qui tourne sous win8 pour y stocker tout mes pdf et fichiers excel/word pour avoir facilement sous la main mes docs et pourquoi pas faire ou mettre a jour mes fichiers office .
Ou lala , office est inutilisable ou bien j'ai des doigts bien trop gros.
La suite office (incluse mais payez quand même) se résume du coup à un usage de visualiseur de fichier office sur tablette.
Super je suis content. Smiley decu
Le ratio est géré sur la hauteur de l'écran. L'appli n'est utilisable qu'en mode paysage. Si j'ai de la place sur le coté, je la comble en élargissant certaines boites.

Pour la taille tout est adapté pour un écran de Galaxy S4. Donc sur les pad c'est easy et sur les PC de bureau je peux choisir la largeur que je veux (1300px max, 1024px max, 800px max ...).

Pour le pb de visuel fixe, mon client ne veut pas de scroll sur l'appli .. la contrainte c'est full screen sans scroll utilisable sur tous écrans de la même façon.
Raah tu es clairement plus dans les problématiques de sites responsive mais tu te coltines les mêmes problématiques que le natif : welcome to hell Smiley cligne

Tu encapsules l'app dans un phonegap ou c'est directement dans le navigateur ?
Modifié par Stéphanie W. (27 Mar 2014 - 14:15)
De même : je pensais que nous parlions d’adapter un site web en responsive facilement, comme le titre et le premier message l’indiquent, or ça ne semble pas du tout être le cas.

Au temps pour moi : ce que j’ai écrit reste valable dans le domaine du responsive en général, mais les cas particuliers existent — et il semble que le tien en soit un.
Au temps pour moi également c'est vrai que ce n'est pas du responsive design ... et je m'en suis rendu compte avec cette discussion !

Du coup c'est plus une app web native si je comprend bien ?

Tout fonctionne dans le navigateur Web.
Mais juste une précision : si j'avais du intégrer cette app avec des viewport et des css par device, j'y serais encore ... et le rendu ne serait jamais identique .. si j'ai voulu éviter cette solution c'est pour gagner du temps, avoir le meme rendu et surtout ne pas avoir à revenir sur l'app quand des nouveaux device sortiront avec des ratio pixel de 4, 5 ou 6 ..

Du coup c'est bien pratique. Et je persiste à dire que pour quelque qui ne cherche pas à ce prendre la tête la tête a mulit coder pour avoir le même rendu c'est simple et facile !

Parce que faut pas se leurer, la plupart des gens qui cherchent ici ou la des infos pour faire passer leur site sur mobile ou pad ne font pas du responsive design ... il cherche juste à avoir le même rendu que leur version PC de bureau.

Donc si c'est pour avoir le même rendu, que vous galérez avec les tailles de texte et d'images ... essayez ce script ca sera vite réglé ...

Seule contrainte, il faut javascript activé.
Modifié par AntiStatic (27 Mar 2014 - 15:16)
AntiStatic a écrit :
Donc si c'est pour avoir le même rendu, que vous galérez avec les tailles de texte et d'images ... essayez ce script ça sera vite réglé ...


Tu as bien résumé je pense ! Effectivement c’est une solution hyper adaptée à ce besoin précis (avoir le même rendu), mais c’est opposé au responsive.

Le fond de nos remarques reste sensiblement intéressant je pense : à quoi ça ressemble sur un écran de 320px en 72dpi ? Ça doit être impraticable… Mais compte tenu du parc visé, et du gain de temps (évident) de ta solution, c’est certainement valable.

Par contre j’attire ton attention sur le pixel ratio, car tu l’évoques à nouveau : ta solution ne change rien à ce problème la, sauf si tu charges dès le début des images en haute résolution et/ou en très grande taille — mais alors ça pénaliserait les écrans qui ne s’en servent pas… Ce problème précis persiste.

Mais je conçois que ton idée fasse gagner un temps considérable, et dans cette optique là, c’est très astucieux Smiley smile
AntiStatic a écrit :


Du coup c'est bien pratique. Et je persiste à dire que pour quelque qui ne cherche pas à ce prendre la tête la tête a mulit coder pour avoir le même rendu c'est simple et facile !

Parce que faut pas se leurer, la plupart des gens qui cherchent ici ou la des infos pour faire passer leur site sur mobile ou pad ne font pas du responsive design ... il cherche juste à avoir le même rendu que leur version PC de bureau.

Donc si c'est pour avoir le même rendu, que vous galérez avec les tailles de texte et d'images ... essayez ce script ca sera vite réglé ...


Hum, oui et non. Ton script est super pratique dans TON usecase ultra ciblé qui est : j'ai une webapp proche du jeu où l'utilisateur n'a pas le droit de scroller avec une expérience utilisateur très ciblée et un design orienté en amont pour les tablette et le mobile uniquement qui est fait pour du seriouse game. Mais tu es un cas marginal (ce qui n'est pas une mauvaise chose on s'entend ^^)

95% du reste du web (chiffre à l'arrache hein^^) ce n'est pas ton cas marginal, c'est de la consultation de contenu textuel, d'images, c'est de l'e-commerce, du blog, du site d'infos, voir un peu d'applicatif. Et dans ces 95% de cas là, ce script est une mauvaise idée puisqu'il va faire qu'un site prévu pour du 1024 qui va s'afficher tout réduit dans 320. On aura un tout petit truc pas lisible, du texte miniature et des boutons pas cliquables (je parle même pas de la perf de charger les grosses images de 1024 sur un tout le petit écran et les réduire en JS). Dans ces 95%, il faudra passer par de l'optimisation de CSS en fonction du design et contraintes utilisateur Smiley smile

Le responsive c'est pas forcément de la prise de tête à multicoder, sur du contenu éditorial pas trop compliqué c'est quelques points de rupture quand le contenu explose. C'est sûr que c'est du boulot en plus, mais bon, proposer un web utilisable de la façon la plus agréable possible ça reste une partie de note travail au quotidien. Proposer du script pour fainéants qui n'ont pas envie de "se prendre la tête à multicoder", je suis navrée, mais ce n'est pas ma philosophie, ni ce que je veux proposer à mes clients, ni celle de ce forum dédié aux bonnes pratiques.
Donc même si ton script fonctionne pour ton usecase, il faut arrêter d'essayer de nous faire croire que c'est une bonne idée pour un site responsive et que c'est ce que cherchent les utilisateurs car j'en doute fort. Faire l'apologie de la fainéantise, du vite fait et de la solution magique totalement non ergonomique, j'ai du mal, surtout ici Smiley smile Et je dois pas être la seule vu les réponses des autres utilisateurs avant que tu précises que c'était pour de la webapp. Smiley cligne

Et comme je le disais plus haut: à mon avis il vaudrait mieux ne rien faire qu'appliquer ce script bourrin. Un site prévu pour du 1024 s'affichera avec un zoom arrière par défaut si il n'y a pas de meta viewport, et l'utilisateur pourra jouer avec le zoom pour lire. Teste le site du boncoin par exemple, il est pas optimisé, mais au final il s'affiche correctement. Comme pleins d'autres sites. Forcer le site avec un scale dans le navigateur ça risque de court-circuiter le zoom.

édit ortho
Modifié par Stéphanie W. (27 Mar 2014 - 17:22)
Salut,

Si, pour ton application Web, tu n'es pas dans l'optique du responsive, pourquoi y a-t-il toujours le mot responsive dans le titre ? Smiley rolleyes

Pour le reste, Ten et Stéphanie W. ont dit l'essentiel.

Je n'ose imaginer ce que donnerait cette discussion si elle était ouverte aujourd'hui, à savoir vendredÿ… Smiley lol
Modifié par Victor BRITO (28 Mar 2014 - 14:52)
Victor BRITO a écrit :
[...]
Je n'ose imaginer ce que donnerait cette discussion si elle était ouvert aujourd'hui, à savoir vendredÿ… Smiley lol

+1, j'ai pensé la même chose en lisant le fil Smiley smile
Pages :