1493 sujets

Web Mobile et responsive web design

[Résolu] Cherche conseils et aide pour adapter un site existant en "re

Pages :
bonjour à toute la communauté . Smiley biggrin

j'ai un site web, que j'ai commencé vers les années 2005, et aujourd'hui, force est de constater que s'il me plait, il n'est pas visible par les utilisateurs de mobiles (smartphones et/ou tablettes).
C'est sur le site Alsacréations que j'ai demandé à évaluer le site, et qu'on m'a révélé la triste vérité . Smiley decu

Je demande de l'aide et surtout des conseils pour arriver à rendre ce site "responsive", si cela s'avère possible, car ne comprenant pas bien le fonctionnement de la visualisation sur un smartphone, je vois mal comment un utilisateur peut avoir une vue globale de mes pages (c'est l'esprit dans lequel j'ai construit le site) en étant obligé de faire défiler ... des parties de page web . Smiley rolleyes
N'ayant quasiment aucune page à "texte", mais pratiquement que des images à cliquer, je suis très perplexe quand au résultat sans dénaturer les présentations originales .
Je suis preneur de tous les conseils et accepte volontiers les coups de main .... Smiley cligne Smiley decu
Merci d'avance à toutes les bonnes volontés ... Smiley cligne
Modérateur
Et l'eau,

Par expérience, il vaut mieux tout refaire. Ton site n'a que 2 - 3 template. Franchement, c'est rapide à faire au vu du contenu qu'il y a. Grand max, il faut compter 1 journée.
niuxe a écrit :
Et l'eau,

Par expérience, il vaut mieux tout refaire. Ton site n'a que 2 - 3 template. Franchement, c'est rapide à faire au vu du contenu qu'il y a. Grand max, il faut compter 1 journée.
Qu'entends-tu par 2-3 templates ? .
Est-tu bien sûr d'avoir parcouru le site et jugé du boulot à effectuer ?
Est-ce que ma présentation sera identique ?

Par exemple, et pour m'aider à imaginer ....
la page d'accueil du site présente : 1 titre "Mes distractions favorites", sous 5 rubriques (images cliquables), avec leur titre (en dessous), ainsi que mon logo (en-tête), et quelques gadgets ( livre d'or, mon facebook & mon youtube, le reste n'étant qu'enjolivement), sur 2 images backgrounds 1 pour le logo, l'autre pour les rubriques et représente au total 1100px par 670 px :
upload/1542311322-31568-screenshot11-15-2018at20h-43-.gif
Comment agencer le tout pour le présenter et le visualiser sur un écran de 414 x 736 tel que celui des iPhone 6/7/8 plus .... Smiley rolleyes Smiley rolleyes
upload/1542311727-31568-screenshot11-15-2018at20h-53-.gif
Modifié par 6troen (15 Nov 2018 - 20:55)
Modérateur
6troen a écrit :
Qu'entends-tu par 2-3 templates ? .
Est-tu bien sûr d'avoir parcouru le site et jugé du boulot à effectuer ?
Est-ce que ma présentation sera identique ?


J'ai un peu exagéré mais au vu du contenu, il y a vraiment pas grand chose. Utilise le bootstrap de twitter et tu as environs 6-8 mini template à te coltiner. Ça ne sera pas long (maximum 2h par template).
Tu veux abandonner un projet simplement car tu n'as pas envie de rendre un site responsive ? Abandonne le float de l'époque, passe en flex, adapte le code et chaque section de celui-ci et ça ira. Je l'ai fait sur un vieux thème récemment, ça m'a pris une semaine max ... donc rien de méchant. L'objectif du responsive ou du mobile first c'est de savoir d'avance quel élément tu veux afficher ou non suivant les points de ruptures. Choix qui doit t'appartenir.

Tu vois cela comme étant une montagne, mais commence par faire bloc par bloc, tu verra que c'est faisable.

Je reste quand même convaincu comme Niux, que de refaire tranquillement ton thème sera pour toi la meilleure option.

Bon courage. En tout cas ce sur quoi tu es confronté reste le plus intéressant et le quotidien de nombreuse agence web. Beaucoup de clients arrivent avec un site non responsive et on doit l'adapter. Crois moi, ce n'est pas si dur que ça en à l'air si tu as déjà de bonnes bases (Ce qui semble le cas)

P.S : Profites en pour lui redonner un p'tit coup de jeune, car fort est de constater qu'il fait très vieillot.
Tu supputes beaucoup @Akian, monsieur Bx est conscient de la volumétrie engendrée et en adéquation avec les utilisateurs!! C'est donc bien, et toi tu fais les amalgames de montagne comme une personne de Bonnes ou de Cluses quMil étaient vieux, c'est triste Smiley decu @Akian je suis sur c'est bien et c'est ka bonne idée, go, go!!
a écrit :
Tu supputes beaucoup @Akian, monsieur Bx est conscient de la volumétrie engendrée et en adéquation avec les utilisateurs!! C'est donc bien, et toi tu fais les amalgames de montagne comme une personne de Bonnes ou de Cluses quMil étaient vieux, c'est triste Smiley decu @Akian je suis sur c'est bien et c'est ka bonne idée, go, go!!

????????????
Akian a écrit :
Tu veux abandonner un projet simplement car tu n'as pas envie de rendre un site responsive ? Abandonne le float de l'époque, passe en flex, adapte le code et chaque section de celui-ci et ça ira. Je l'ai fait sur un vieux thème récemment, ça m'a pris une semaine max ... donc rien de méchant. L'objectif du responsive ou du mobile first c'est de savoir d'avance quel élément tu veux afficher ou non suivant les points de ruptures. Choix qui doit t'appartenir.

Tu vois cela comme étant une montagne, mais commence par faire bloc par bloc, tu verra que c'est faisable.

Je reste quand même convaincu comme Niux, que de refaire tranquillement ton thème sera pour toi la meilleure option.

Bon courage. En tout cas ce sur quoi tu es confronté reste le plus intéressant et le quotidien de nombreuse agence web. Beaucoup de clients arrivent avec un site non responsive et on doit l'adapter. Crois moi, ce n'est pas si dur que ça en à l'air si tu as déjà de bonnes bases (Ce qui semble le cas)

P.S : Profites en pour lui redonner un p'tit coup de jeune, car fort est de constater qu'il fait très vieillot.
Ce n'est pas que je n'ai pas envie, c'est que je n'arrive pas à me le "visualiser graphiquement" sur un écran de smartphone, et surtout déjà : quel smartphone et quelle dimension d'écran ?
Ensuite, pour moi, "float", "flex", "responsive", et "first" et "points de rupture" ... ce n'est même pas de l'hébreu, mais au moins des traductions des hiéroglyphes de l'époque sumérienne ...
Je n'ai même pas appris le langage html, encore moins le php, pas plus que le javascript, et je me vois mal à 75 ans (c'est peut-être pour çà que tu lui trouve un air "vieillot... Smiley lol ") plonger dans l'étude de tout ce qui concerne le changement à effectuer ... Smiley biggol
Il faudrait peut-être que j'ai une idée de comment décomposer les pensées qui m'ont fait créer ce site dans son état actuel pour les transposer vers ce que devrait être un site "responsive", et çà, seul, et sans exemple "concret" (c'est comme çà que je fonctionne Smiley lol ), c'est mission impossible .
Moi je n'ai pas de "clients" mais des visiteurs qui par le plus grand des hasards tombent sur mon lien, ou par une recherche sur un mot-clé et qui trouvent mes sujets de distractions intéressants (à leur avis) et je n'ai pas l'ambition d'en faire un site "incontournable" ... Smiley winner
Sans compter que je n'ai nullement l'intention de m'acheter un smartphone, mon vieux ZTE F160 me suffit amplement pour téléphoner, et pour internet, mon (vieux Smiley lol ) PC me suffit amplement ... puisque je ne me déplace que rarement hors de mon domicile ... . Smiley nimp
Je vais quand même étudier le contenu de bootstrap de twiter, car je suis curieux, mais je doute d'en saisir toutes les subtilités et possibilités .
En tout cas, merci pour ta réponse .
lemisterdelouess a écrit :
Tu supputes beaucoup @Akian, monsieur Bx est conscient de la volumétrie engendrée et en adéquation avec les utilisateurs!! C'est donc bien, et toi tu fais les amalgames de montagne comme une personne de Bonnes ou de Cluses quMil étaient vieux, c'est triste Smiley decu @Akian je suis sur c'est bien et c'est ka bonne idée, go, go!!
Celle-là, on ne l'avait pas encore faite ! Smiley thumpup
Explication en liaison avec une partie des distractions évoquées sur mon (vieux Smiley lol ) site, le jeu de simulation de rallyes en ligne "Rallyesim.fr", dans lequel à mes débuts (en 2008 Smiley eek ) je roulais en C4 et j'avais mis un insigne Citroën sur mon volant, et utilisé ce nom pour créer ma boite mail et mettre en avatar ce même nom sur tous les forums où j'ai des sujets liés ... Smiley ravi
En tout cas, je trouve que ton analyse cerne bien mon point de vue . Smiley clapclap
Je t'en remercie . Smiley cligne
6troen a écrit :
Ce n'est pas que je n'ai pas envie, c'est que je n'arrive pas à me le "visualiser graphiquement" sur un écran de smartphone, et surtout déjà : quel smartphone et quelle dimension d'écran ?
Ensuite, pour moi, "float", "flex", "responsive", et "first" et "points de rupture" ... ce n'est même pas de l'hébreu, mais au moins des traductions des hiéroglyphes de l'époque sumérienne ...
Je n'ai même pas appris le langage html, encore moins le php, pas plus que le javascript, et je me vois mal à 75 ans (c'est peut-être pour çà que tu lui trouve un air "vieillot... Smiley lol ") plonger dans l'étude de tout ce qui concerne le changement à effectuer ... Smiley biggol
Il faudrait peut-être que j'ai une idée de comment décomposer les pensées qui m'ont fait créer ce site dans son état actuel pour les transposer vers ce que devrait être un site "responsive", et çà, seul, et sans exemple "concret" (c'est comme çà que je fonctionne Smiley lol ), c'est mission impossible .
Moi je n'ai pas de "clients" mais des visiteurs qui par le plus grand des hasards tombent sur mon lien, ou par une recherche sur un mot-clé et qui trouvent mes sujets de distractions intéressants (à leur avis) et je n'ai pas l'ambition d'en faire un site "incontournable" ... Smiley winner
Sans compter que je n'ai nullement l'intention de m'acheter un smartphone, mon vieux ZTE F160 me suffit amplement pour téléphoner, et pour internet, mon (vieux Smiley lol ) PC me suffit amplement ... puisque je ne me déplace que rarement hors de mon domicile ... . Smiley nimp
Je vais quand même étudier le contenu de bootstrap de twiter, car je suis curieux, mais je doute d'en saisir toutes les subtilités et possibilités .
En tout cas, merci pour ta réponse .

Avoir un site "responsive" n'est absolument pas une obligation, dès lors qu'on ne vise pas une fréquentation de masse et/ou à satisfaire Google...
Il me semble que dans ton cas, les questions à se poser seraient plutôt :
a) est-ce qu'une version responsive serait plus agréable à visiter ? A priori, je dirais que oui
b) est-ce que l'investissement qu'il faut faire pour y parvenir vaut le coup ? Là, c'est moins évident et si tu n'es pas particulièrement intéressé par la technique et la conception de sites, probablement vaut-il mieux passer outre et rester en l'état
Perso, je pense que des outils tels que Mobirise pourraient te permettre de faire évoluer le site, en design et en adaptation multi-périphérique, sans avoir à plonger les mains dans le cambouis...
Fais un test avec cet outil (ou un autre du même acabit car il n'est pas le seul du genre) et, peut-être, trouveras-tu sympa de créer une nouvelle identité accessible depuis les portables comme les stations de travail sans trop de casse-tête HTML / CSS / Javascript.
En gros, Mobirise et consorts c'est :
a) un logiciel client à télécharger et installer en local
b) des "bandes" à faire glisser sur une zone de travail et retravailler (texte / image) en direct
c) une publication du résultat en FTP vers ton hébergeur
Tout est déjà prêt digéré et ma foi pas si moche... Cerise sur le gâteau, tu n'as à taper aucun code abscons ou te triturer les méninges pour que le contenu des pages s'adapte aux différentes largeurs.
Rien n'étant gratuit en ce bas monde, Mobirise demande toutefois une adresse mail pour pouvoir télécharger le logiciel, mais tu dois bien avoir une adresse poubelle sous la main à leur refourguer pour satisfaire leur appétit...
Dans un second temps et si tu ne trouves pas ton bonheur avec Mobirise ou autre, tu peux toujours revenir en parler ici car ta problématique m'intéresse. Je développe en effet un générateur de sites web (planquez vous les incrédules Smiley lol ) qui avance bien et la conversion d'un site tel que le tien pourrait me permettre de valider certaines routines que je suis en train de tester. A voir donc...
Je confirme : abandon du projet .
Rien ne correspond à ce que j'imagine d'un site web comme je l'ai créé pour PC et qui puisse être vu sur smartphone ou tablette .
Pour moi, certaines pages ne peuvent même pas être reproduites pour cet effet .
Que ce soit avec bootstrap ou mobirise ... Smiley rolleyes

Merci à tous ceux qui m'ont répondu . Smiley ravi
6troen a écrit :
Rien ne correspond à ce que j'imagine d'un site web comme je l'ai créé pour PC et qui puisse être vu sur smartphone ou tablette .
Pour moi, certaines pages ne peuvent même pas être reproduites pour cet effet .

Je crains que tu ne te pose pas la bonne question.
Qui consulte les sites web et depuis quel(s) appareils?
voir https://www.phonandroid.com/internet-smartphones-2-plus-utilises-pc-naviguer-web.html
(et ça date de plus d'un an!)
Faire un site web qui ne soit pas consultable depuis une tablette ou un smartphone, c'est comme si tu écrivais un livre qui ne peut pas être imprimé.
Je passe actuellement pas mal de temps à rendre responsives des site qui ne le sont pas. Certes, cela signifie qu'ils vont changer de look, et alors ?
PapyJP a écrit :

Faire un site web qui ne soit pas consultable depuis une tablette ou un smartphone, c'est comme si tu écrivais un livre qui ne peut pas être imprimé.

Je ne fais pas un site, "j'ai fait" un site, il y a 12 ans ... nuance, je ne te dis pas l'audience des smartphones à cette époque ... Smiley lol
PapyJP a écrit :
Je passe actuellement pas mal de temps à rendre responsives des site qui ne le sont pas. Certes, cela signifie qu'ils vont changer de look, et alors ?
Peu m'importe le look, c'est la "consultabilité" - euh, je ne sais pas si je m'exprime bien ... - prends le temps de visionner mon site avec un PC, et regardes cette page "actuelle" et dis-moi la tronche que tu lui verrais "relookée responsive" ...

Et celle-ci encore ?
voire celle-là ... et cette dernière comme diaporama ...

PapyJP a écrit :
Je passe actuellement pas mal de temps à rendre responsives des site qui ne le sont pas

Serait-tu en mesure de me proposer un "exemple" d'une de ces pages à la mode "responsive" ?
Modifié par 6troen (06 Dec 2018 - 19:50)
Je n'ai pas eu le temps aujourd'hui de regarder cela en détail, je vais m'ymettre demain si je n'ai pas d'autres choses urgentes à faire (oui, un retraité peut être TRÈS occupé!!!) Smiley biggrin
Mais tu n'as pas le privilège d'être un retraité TRÈS occupé ! Smiley ravi
Je le suis aussi, mais je trouve toujours du temps entre les choses urgentes ... Smiley biggrin Smiley biggrin Smiley cligne
Modifié par 6troen (06 Dec 2018 - 21:57)
Avant d’aller me coucher j’ai regardé ces pages.
La question préalable est "qui les regarde " ?
et la question suivante : "qu’est-ce que les utilisateurs y cherchent" ?

Lorsque j’enseignais la conduite de projet, c’était le leitmotiv de mon cours:
- quels sont les utilisateurs ?
- quels besoins de ces utilisateurs le projet est il destiné à satisfaire ?
Si ces pages sont simplement réservées à ton usage personnel, tu n’as effectivement pas besoin de les modifier.
Dans les autres cas il faudrait se demander ce que les utilisateurs y cherchent pour savoir quel look de page leur conviendrait le mieux, en particulier en tenant compte des appareils qu’ils utilisent.
Ce que j'ai écris plus avant dans le sujet :
6troen a écrit :

Moi je n'ai pas de "clients" mais des visiteurs qui par le plus grand des hasards tombent sur mon lien, ou par une recherche sur un mot-clé et qui trouvent mes sujets de distractions intéressants (à leur avis) et je n'ai pas l'ambition d'en faire un site "incontournable" ... Smiley winner
Pas plus que des "utilisateurs" ...
Pour moi, la question n'est pas de savoir "qui" va regarder mon site, que ce soit Poutine, Trump ou l'éboueur qui passe chez moi, tous les mercredis me débarrasser des poubelles, cela m'est totalement indifférent, et surtout quel est leur moyen de visualisation, bracelet-montre connectée ou home-cinéma connecté ! Smiley lol
Chacun est libre de passer par le plus grand des hasards sur mon site, ou au gré d'un mot clé aiguillé par un moteur de recherche et qui se trouvera être commun avec d'autres ressources sur le net .
Il n'y a rien à "rechercher", juste à "éventuellement" découvrir si le contenu n'est pas déjà connu par le visiteur où si le visiteur est une connaissance .
Faut-il pour autant que je sacrifie à la mode de regarder internet ( et pour regarder quels genres de sites ... que disent les sondages ?) sur son smartphone ?
J'en déduit par le style de réponses ( en gros : "si c'est pour usage personnel, reste comme çà !" Smiley lol ) que je lis dans le sujet, qu'il ne serait pas aisé de transformer ce site en "responsive", et bien notamment les pages que j'ai mentionné . Smiley eek
S'il y a des personnes qui se sentent l'âme de formateurs, qu'ils me donnent un exemple de leur vision "relookée" de ces pages ...
Je les en remercie d'avance
Modifié par 6troen (07 Dec 2018 - 01:37)
Tu as parfaitement répondu aux questions:
Il n'y a qu'un "utilisateur", il dispose d'un PC et il est satisfait du résultat.
C'est exactement le cas où il ne faut absolument rien changer.

En ce qui concerne la version "relookée" de ces pages, là encore c'est affaire des besoins de l'utilisateur.
Si j'étais utilisateur de ces pages, je leur donnerais certainement un look très différent.
Par exemple je ne mettrai certainement pas autant d'informations dans une seule page.
Par contre coup ça simplifierait le problème de l'adaptation des pages à un écran moins large.
Si tu veux jeter un coup d’œil sur le style du site que j'essaie de rendre plus responsive, regarde https://www.alma-musica.net
Seule la première page (fond doré) a une version responsive, car la belle image concoctée par notre graphiste (à une époque où on ne parlait pas de responsive) n'es pas affichable et utilisable sur un écran de téléphone. Par contre elle convient à une tablette.
Pages :
Sujet clos
Aller à