Blog d'aide de Blog4ever

Blog d'aide de Blog4ever

Adaptation pour les appareils mobiles

866 appréciations
Hors-ligne
Bonjour,

Nous avons mis en place aujourd'hui l'adaptation visuelle des blogs pour les appareils mobiles.

Désormais en consultant votre blog depuis un smartphone ou une petite tablette vos visiteurs auront un affichage simplifié de votre blog, adapté à la taille de leur écran.

Exemple pour le forum :



Le bouton dans l'en-tête permet d'afficher le menu latéral :



Et celui dans la barre de navigation, d'afficher la navigation :



Exemple pour un article :



L'affichage du contenu a été modifié pour ne montrer que les informations vraiment nécessaires et permet ainsi une navigation plus fluide et plus agréable sur les appareils mobiles, qui ont un espace d'affichage beaucoup plus restreint.

Pour des raisons techniques, cette adaptation n'est disponible que pour les blogs en RapidDesign 2.
Si votre blog est en Master Design, des indications sont données plus bas.

N'hésitez pas à nous signaler tout problème que vous pourriez constater sur votre blog, suite à ce déploiement.

Bonne journée !
Flora Maelyne
Responsable Blog4ever
Développeuse & Graphiste

705 appréciations
Hors-ligne
Pour moi ça marche nickel ! c'est vrai que la lecture et la navigation sont ainsi plus faciles sur mon tel mobile... MERCI

1595 appréciations
Hors-ligne
Salut,

Il faut noter qu'à partir du 21 Avril prochain cet affichage adapté aux appareils mobiles aura un impact sur le classement dans Google pour les internautes qui recherchent depuis un mobile.
Pascal/Kinglouis - Fondateur de Blog4ever

742 appréciations
Hors-ligne
N I C K E L !!! Bravo bravo !!!!!

866 appréciations
Hors-ligne
Egalement, pour ceux qui utiliseraient le MasterDesign, avec une base RapidDesign (Structure HTML générale non altérée, c'est à dire, les éléments de base toujours présents), il est possible de profiter de la version mobile en faisant les manipulations suivantes :

- Il faut inclure les fichiers CSS suivants :



- Si ce n'est pas déjà présent dans le HTML, il faut ajouter les codes HTML suivant :

 + Entre les lignes
et 

{titre}





+ Entre les lignes 
Flora Maelyne
Responsable Blog4ever
Développeuse & Graphiste

89 appréciations
Hors-ligne
Merci pour tout ce travail. Comme j'utilise le MasterDesign, je n'en bénéficie pas mais pas grave.

36 appréciations
Hors-ligne
Bravo pour votre travail !

Au moins , on aura la musique d'accueil sur nos blogs !

Je pense que l'on pourra aussi avoir accès à notre blog de gestion ???

Encore un gros merci : j'ai bien fait de travailler avec blog4ever !

Marsouinalement .

Fernand .
F.L ...

97 appréciations
Hors-ligne
Bonjour,

Super, mais...

Comment savoir si mon blog à "une Structure HTML générale non altérée, c'est à dire, les éléments de base toujours présents" ?

je ne voudrais pas mettre tout en vrac et être obligé de vous appeler à l'aide.

:bye:
Philippe
Fluctuat Nec Mergitur

866 appréciations
Hors-ligne
Bonjour,

Le HTML doit, grosso modo, ressembler à ça :




{head}
  





   

       
       

{titre}


       
{banniere}

   

   
   

        
       
       

        
       

            {contenu}
       

   

   

        {bloc_bas}
   


{parrainage}
{javascript}



Il peut y avoir des éléments en plus (A l'exception d'une colonne supplémentaire, qui poserait de gros problèmes), mais pas d'élements en moins, le nom des classes et des balises doit avoir été préservé.
Flora Maelyne
Responsable Blog4ever
Développeuse & Graphiste

97 appréciations
Hors-ligne
merci Maelranaidh
Je vais essayer de mettre tout cela dans mon HTML.
Ce serai dommage de se passer de cette nouvelle adaptation.
bon week-end
Fluctuat Nec Mergitur

0 appréciations
Hors-ligne
c'est super ! par contre j'ai un petit souci sur mon blog car les deux boutons d'affichage des menus sont noirs sur fond noir et on les devine à peine. Peut on en changer la couleur ?

25 appréciations
Hors-ligne
Bonsoir à tous

Je me disais bien que quelque chose avait changé... lol

Mon blog photo s'affichait très bien sur mobile il y a encore quelques semaines (avec un réajustement automatique de l'affichage quelle que soit la taille de l'écran), et là j'ai un souci d'affichage au niveau de la proportion des photos qui n'est plus du tout respectée (pourtant quand je créée mes articles je les redimensionne avec clic droit sur image en activant respectant les proportions). Les photos en mode portrait des anciens articles sont complètement déformées en hauteur :snif:

Et sur ma page "Galerie photos" idem. Tout s'affichait nickel avant avec des espaces entre les photos, et maintenant les polices sont bcp plus grosses et les photos aussi... résultat tout se chevauche, c'est tout tassé et déformé...

Que ce soit sur un Galaxy S3 ou un iPhone 6, le pb est le même...
Ci-dessous série photo SMN puis la Galerie photos (accessible depuis le menu haut).





Par contre, j'ai publié un nouvel article aujourd'hui, et là les proportions des photos portraits sont ok sur mon tél.

Comment faire pour avoir à nouveau un affichage correct pour l'ensemble de mon blog ? J'avoue que je suis un peu paumée là...

Merci pour votre aide
Véro

866 appréciations
Hors-ligne
Bonjour,

Effectivement certaines photos ont des dimensions en dur dans le HTML. J'ai fait une correction pour en tenir compte dans la version mobile. Les rapports de taille devraient être bons maintenant.
Flora Maelyne
Responsable Blog4ever
Développeuse & Graphiste

25 appréciations
Hors-ligne
Bonjour
Merci bcp pour cette intervention rapide :b2: maintenant ça respecte bien les rapports H/L.

Par contre le redimensionnement reste bizarre sur la version mobile... enfin il ne fonctionne plus comme avant.
Si je prends l'exemple de ma page Galerie photo : dans l'article, toutes les miniatures ont la même taille (200*200), qu'il y en ai deux ou trois par ligne. Avant c'est le même rapport de redimensionnement qui s'appliquait à tous les éléments de la page donc les proportions restaient identiques pour tous éléments (toutes les miniatures étaient redimensionnées à la même taille quel que soit le nb de miniatures par ligne). Maintenant on a l'impression que le redimensionnement se fait de façon distincte sur les éléments de façon à remplir systématiquement toute la largeur de l'écran. Sur les lignes avec deux miniatures, les images sont bcp plus grandes que sur les lignes avec trois, les espacements entre les images ne sont plus respectés; et la taille de la police est complètement disproportionnée sur la version mobile.

Sur les autres articles, même souci (exemple article portraits sur Romain). J'ai volontairement redimensionné les photos en portrait pour qu'elles ne fassent pas la largeur de la page (de façon à ce qu'elles ne soient pas trop grandes par rapport aux photos en format paysage). Maintenant sur mobile, les photos en portrait sont systématiquement redimensionnées pour s'afficher sur toute la largeur de la page, du coup elles sont énormes par rapport aux autres.

Est-ce qu'il y a moyen de corriger cela ?


Sinon j'ai le même souci que cindel81. J'ai cherché mon menu haut partout... lol
Je n'avais pas vu qu'il y avait maintenant des boutons d'accès car ils apparaissent en noir sur fond noir. Qu'es-ce que je peux faire comme manip pour qu'ils soient visibles sur mobile ?

Merci pour votre aide.
Bonne soirée
Véro

Dernière modification le vendredi 03 Avril 2015 à 23:21:28

25 appréciations
Hors-ligne
Bonsoir Nana et merci pour le code. Ca fonctionne bien, les boutons sont maintenant visibles sur mon mobile.
Est-ce qu'il y a un code qui me permettrait d'afficher le même bouton que celui présenté dans l'exemple de Maelranaidh (fond noir avec les traits horizontaux blancs)?
Merci et bonne soirée à toute l'équipe
Véro

25 appréciations
Hors-ligne
Super ! merci beaucoup Nana ... et bonne nuit, moi je file au dodo !

1595 appréciations
Hors-ligne
Salut Vero,

Pour le problème de largeur, je ne vois pas ce qui ne va pas.

Sur la page http://lepetitmondedevero.blog4ever.com/galeries-photos

Voici ce que j'en en écran large :



Et en petit écran :



Je trouve ça très bien, quel affichage attends-tu à la place ?
Pascal/Kinglouis - Fondateur de Blog4ever

25 appréciations
Hors-ligne
Bonsoir KingLouis :b1:

En fait, oui si tu regardes uniquement la 1ère ligne rien de gênant (surtout que depuis mon dernier post sur le forum, j'ai diminué la taille de la police pour qu'elle soit plus adaptée à la version mobile).
Par contre si tu compares les lignes avec deux miniatures avec celles qui en ont trois, on voit bien qu'elles n'ont pas la même taille sur version mobile (pourtant elles sont toutes dimensionnées en 200*200 en version web). Avant il n'y avait pas cette différence entre les deux versions, toutes les miniatures s'affichaient bien avec la même taille (même si plus petites sur la version mobile) et ce, qu'elles soient dans une ligne de tableau à deux ou trois cellules.  Mais bon pour ce petit souci, c'est pas très grave si ça reste comme ça  ;)  même si je préférais avant :)   J'ai regardé ce soir et je devrais pouvoir m'en sortir en créant systématiquement des lignes de tableaux à trois cellules même si je n'en remplis qu'une ou deux (j'ai l'impression que dans ce cas là toutes les miniatures gardent bien la même taille :) )

Par contre, ce qui me gêne le plus c'est le redimensionnement de mes photos au niveau des articles. Si tu sélectionnes l'article de Romain, tu verras sur la version web, la 1ère photo en format portrait est volontairement redimensionnée (elle ne fait pas toute la largeur de la page) de façon à garder un équilibre de taille entre les photos en format portait et paysage quand on regarde l'article.
Sur la nouvelle version mobile, les photos en portrait sont systématiquement redimensionnées pour s'afficher sur toute la largeur de l'écran . Résultat les photos portrait sont énormes par rapport aux photos en paysage qui font toute riquiqui à côté.
Est-ce qu'il y a moyen d'arranger ça de façon à conserver les mêmes proportions que sur l'affichage web ?

Merci pour ton aide.
Véro

Dernière modification le lundi 06 Avril 2015 à 22:28:52

0 appréciations
Hors-ligne
Super ! merci beaucoup nana !  

1595 appréciations
Hors-ligne
Salut Vero,

Donc si je reprends, ce qui te gêne c'est que sur un article type http://lepetitmondedevero.blog4ever.com/blog/romain, sur petit écran la largeur d'une photo en portrait est trop importante car elle prend 100% de l'écran ce qui est disproportionné par rapport aux photos en paysage.

En grand écran :



En petit écran :



Si c'est bien cela,  je pense avoir trouvé : il faut mettre une largeur en pourcentage (60% par exemple) pour tes photos en portraits, plutôt que de forcer la largeur à 500px.

Je l'ai fait pour ton article "Romain" et en petit écran ça rend comme tu le souhaites je pense :



C'est bon ?

Pascal/Kinglouis - Fondateur de Blog4ever

25 appréciations
Hors-ligne
Bonjour. Oui visuellement c'est exactement ça. Je ferai des essais ce soir et si ça convient bien je modifierai sur tous mes articles. Avant ça s'affichait comme ça sur mobile sans avoir besoin de paramétrer un pourcentage mais pas de soucis je vais m'adapter. Mille mercis pour ton aide. Belle journée à tous.

Dernière modification le jeudi 09 Avril 2015 à 07:18:17

25 appréciations
Hors-ligne
Coucou
C'est bon King Louis.
J'ai réussi à faire ta configuration en % sur un autre article et ça fonctionne bien.
Maintenant il faut que je reprenne tous les articles un par un pour les mettre à jour...
:ppc:
Bon je te taquine hein ? Je suis contente qu'une solution soit trouvée pour que tout s'affiche à nouveau comme je le souhaite.
:b2:  :b2:  et une très belle soirée à vous tous.


1595 appréciations
Hors-ligne
Hello Vero,

Désolé pour le travail que ça représente :(

Mais après ça sera vraiment parfait !

Pour aller plus vite je te conseille de passer en mode html et de modifier directement la largeur en remplaçant la dimension en px par celle en % (tu peux prendre modèle sur l'article que j'ai modifié).

Bonne mise a jour !

Pascal/Kinglouis - Fondateur de Blog4ever

25 appréciations
Hors-ligne
Voilà c'est fait.
Merci pour l'astuce du html, ça m'a permis de gagner du temps
Bonne soirée.
Véro

614 appréciations
Hors-ligne
@Kinglouis
Ok, je comprends mais pour ce qui me concerne je regrette la présentation précédente. Je ne vois pas de bouton permettant d'afficher la colonne de droite et j'ai pourtant essayé de cliquer sur une espèce de demi carré en haut à droite. De fait, n'accèdent plus á cette colonne on ne peut plus ouvrir mes articles.
Désolé de ces critiques.
Bien cordialement

2 appréciations
Hors-ligne
Coucou et merci pour cet article.
Mon blog étant en MasterDesign, j'ai ajouté le code suggéré.
Belle journée.
:sol:

1595 appréciations
Hors-ligne
Salut,

@jeuvac@ : effectivement le système ne fonctionne pas correctement sur ton blog.

Il semble y avoir un conflit avec les modifications que tu as faites sur ton design (via le CSS personnalisé).

Je vais creuser ça.
Pascal/Kinglouis - Fondateur de Blog4ever

614 appréciations
Hors-ligne
@KingLouis@ Merci infiniment. :b2: :bye:

1595 appréciations
Hors-ligne
Bonjour,

Une modification a été faite : désormais la largeur minimale à partir de laquelle votre design passe en mode "petit écran" a été augmentée.

Cela permet de ne plus avoir d'image coupée comme ça :



A la place on a ça :



Je précise que pour que cette modification s'applique il faut retourner dans VOTRE BLOG > Design du blog et faire Appliquer (car cela re-génère votre fichier CSS).

Dernière modification le mercredi 15 Avril 2015 à 07:48:14
Pascal/Kinglouis - Fondateur de Blog4ever

614 appréciations
Hors-ligne

Bonjour KingLouis,
Je viens de le faire en suivant à la lettre tes indications mais sur l'écran de mon iphone les choses sont restées en l'état, avec la disparition toujours de la bannière de tête mais surtout sans bouton pour ouvrir le bandeau de droite.
Cela dit, ce n'est pas trop grave, juste un peu dommage sur précédemment.
Très belle journée
:bye:

1595 appréciations
Hors-ligne
Salut Jeuvac,

Concernant ton blog, c'est un autre problème : c'est ton code CSS personnalisé qui pose problème.

J'ai essayé de retirer ton code CSS personnalisé pendant quelques minutes et tout a bien fonctionné (mais forcément le design a un peu changé donc j'imagine que ça ne te plairait pas). Si le responsive est urgent pour toi, tu peux retirer ton code CSS personnalisé (fais bien une sauvegarde avant !).

Sinon je regarderai dans les prochains jours.
Pascal/Kinglouis - Fondateur de Blog4ever


Ce sujet est fermé, vous ne pouvez pas y répondre.
Vous ne disposez pas des permissions nécessaires pour répondre à un sujet de la catégorie News de Blog4ever.

Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 6061 autres membres