Comment adapter ma page de site web au téléphone ?

0
(0)

Retranscription vidéo

salut c’est alex aujourd’hui je vais
vous montrer comment faire en sorte que
votre site web devienne responsive et
fonctionne donc parfaitement sur
ordinateur sur tablette et sur téléphone
à hawaï en est sur mon site donc
traîneau point com et ce site depuis
l’ordinateur donc l’endroit où je
consulte de la l’heure actuelle la
présentation est bien ok donc y’a pas de
soucis globalement on est moi je n’ai
rien à redire par rapport à cette à ça
par contre vous voyez si on prend ce
site et que l’on le réduit comme ça là
vous voyez en fait le résultat sur
téléphone et sur téléphone des choses
qui vont être bien et des choses qui
vont être moins bien par exemple ici au
niveau du slider révolution globalement
j’ai paramétrer auparavant dans une
précédente vidéo
donc on est sur quelque chose qui est
bien ici par exemple
peut-être que le texte notamment nous
tous et nos agences et sio et un peu
trop gros pour téléphones multi piqm en
sait quelque chose qu’il faudrait qu’on
change la disposition aussi peut-être
des des images telles que j’aurais
tendance à pas vouloir avoir deux images
qui se font consécutive comme ça de voir
une image cela ensuite le texte et la
deuxième image en dessous là au niveau
de la campagne mythologie de la campagne
is you vous voyez la disposition ben
salah des flèches qui doivent
normalement s’encastrer dont qui
s’encastrent parfaitement sur ordinateur
comme ça mais sur téléphone l’a
finalement le résultat n’est pas bon
donc typiquement c’est des choses qui va
falloir que j’ajuste même chose au
niveau de nos services voyez ici on a un
image qui est une sorte de grand bandeau
là comme ça qui rend bien sur ordinateur
mais sur au téléphone c’est bien trop
petit
donc ça pose problème à faire que je
fasse une modification aussi à ce niveau
et au niveau du blog leur effectivement
il ya des gros cubes des gros carrés je
pense que le fait d’avoir de petits
carrés pour naviguer c’est bien plus
facile en fait en tout cas sur téléphone
donc c’est exactement ce que je vais
faire aujourd’hui c’est les
modifications que je vais apporter et
donc je vais vous montrer comment faire
ça alors pour cela take on va re grand
dit la page de nouveau et on va appuyer
sur modifier la page
ok donc ça donc on est bien sur un thème
dont cavada est donc accepté à mada il
ya les différents blocs qui vont être
constitutif de mon site web et sa part
ce n’est là que j’ai fait les
modifications pour le téléphone là je
vais simplement ouvrir une deuxième page
afin de vous montrer régulièrement
quelles sont les modifications que je
vais effectuer
ok donc première chose à faire
deuxième lame est ici et là mettent au
format téléphone au japon un chose que
je vais faire c’est que je vais je vais
changer la tête de cette police donc
pour cela on voit ici est donc écrit à
jean c’est mon blog et agences c’est là
exactement la même chose ici que cette
partie là avec ici trouver nos agences
et si au tout et nos agences et sion ok
donc pour simplifier la chose ce que je
vais faire c’est que je vais prendre moi
je vais diminuer cette partie là agences
et je vais appuyer sur ce bouton là qui
a peut-être de dupliquer hockey une fois
que c’est fait on va mettre lagence et
omet agence mobile
donc ce sera l’ensemble du bloc qui va
me permettre de gérer les aspects
téléphone ok donc pour cela dans un
premier temps dans agences tout court
on va cliquer ici et vous voyez ici il
ya trois boutons c’est les 3 boutons qui
sont les plus importants justement sur
la mise en page
entre téléphone et ordinateur ou
tablette
une typique mans la page que qui
fonctionne bien sûr sur ordinateur on va
la laisser de manière exactement
similaires on va faire aussi en sorte
que sur tablettes ce soit la même chose
par contre sur téléphone on va on va
faire quelque chose de plus de plus
spécifique
donc vous voyez ici donc il ya small
screen médium screen laczko screen
moussa typiquement la plupart du temps
c’est pour ordinateurs tablettes et
téléphones
donc ça sera pas la version pour
téléphone donc on va des sélectionnés
ensuite on va sauvegarder ensuite donc
on va aller sur agence mobile est là
pour le coup ce qu’on va faire c’est
qu’on va des sélectionnés mais james
quinn et la screen pour avoir simplement
la version téléphone hockey et on
sauvegarde donc là maintenant cet aspect
là les changements que j’ai fait ici ce
sera simplement effectif pour le
téléphone
donc on a dit effectivement que cette
partie là elle était bien trop grosse
sur téléphone
donc ce que je faire si je vais diminuer
et je vais m
je vais m bon
j’ai sauvegardé et ensuite
immense que je gazon veux dire ici il ya
des images qui sont consécutives
et ça ça me plaît pas donc ce que je
veux faire c’est que je prends de cette
image là et la mettre en dessous donc
pour cela je vais simplement prendre
cette box il a déplacé
ok donc une fois que c’est fait je
sauvegarde
je vais mettre mettre à jour date
vous voyez ça charge ici
et ensuite je me rends donc sur ma page
téléphone et je vais remettre à jour
vous voyez déjà le texte ici c’est
beaucoup mieux c’est beaucoup plus petit
moi ça me plaît beaucoup plus ok donc je
vais rester là dessus
ensuite vous voyez aussi des imac tac
une à une ici et maintenant l’hôte est
en dessous sachant que s’ils ont grandi
là on est sur la version ordinateur
et voilà donc on a quelque chose qui est
différent entre téléphones et
ordinateurs
donc je vais revenir sur ma version
téléphone
maintenant je vais attaquer à ce cette
partie ici le même principe
donc ces méthodes le nom je vais
dupliquer et ici je vais changer le nom
je mette méthodes et ça sera pour le
téléphone portable tac donc le premier
je vais mettre simplement je vais des
sélectionnés small screen ensuite
méthode mobile j’ai des sélectionnés
médium n l’art du screen ok maintenant
on peut travailler dessus mais
qu’effectivement à l’heure actuelle donc
on a quelque chose qui est présenté
comme ça
ce que je vais faire ce que je vais
faire 3 5e est donc on va effacer up
cette partie là et cette partie là
fa c’est aussi ça et ça j’en ai plus
besoin et je vais face et c’est parti
ici
donc l’idée pour moi c’est d’avoir le
faire en sorte que tout ça soit
regroupés sur une même ligne
ce serait quand même beaucoup plus
cohérent ok donc c’est ce que je vais
faire donc j’appuie sur image et édith
donc j’ai rajouté dans ce fichier qui
ici j’ai créé donc c’est mon fichier
illustrator sur lequel effectivement
mais j’ai pu créer là par exemple images
spécialement pour téléphone donc c’est
celle ci que je vais maintenant rajouter
donc on va aller sur site web traîneau
pour mme planes et donc il
la modification et dernière chose que je
j’écris aujourd’hui il ya ça
effectivement
et ces deux images là donc je vais
rajouter tout ça ça sera pour ajouter
sur mon sur come on come images de
présentation tac alors je vais faire
tout et nos agents spéciaux
ensuite je marque est ici donc
référencement naturel up et ensuite ici
methodology hollande méthodologie
campagne et sion ok et j’aime est donc
celle ci un série sauvegarder et je vais
mettre à jour pour voir ce que ça donne
ok
bon donc là à l’heure actuelle on a
quelque chose comme ça qui va être
complètement changé dans la prochaine
version up
donc voilà maintenant on a quelque chose
qui est quand même beaucoup plus propre
audit optimisation création de projets
de promotion
ok sachant qu ici effectivement je ferai
un lien on pourra cliquer le seul
désavantage par rapport à l’autre
version que j’avais auparavant la sûreté
sur ordinateur c’est que là vous voyez
ici pour chaque image
j’aurai la possibilité de cliquer là bon
ça sera une image unique mais sur
téléphone finalement bon c’est j’ai
vraiment pas trop le choix
donc ça sera quelque chose comme ça qui
rend bien ensuite alors ici nos services
effectivement nos services alors là ce
qu’il faut savoir c’est qu’entre ce que
vous voyez ici est la vraie version sur
téléphone c’est un peu biaisé notamment
au niveau des trois images qui
apparaissent sur téléphone en fait on
voit pas trois images on n’en voit que
deux typiquement voie celle là est celle
là en beaucoup plus gros et celle ci est
invisible
elle y cacher donc ce que je vais faire
c’est que référencement naturel
je fais le transformer en cubes et je
vais l’associer avec rédaction web donc
ici il y aura donc référencement naturel
ensuite rédaction web ensuite
illustration infographie et ensuite
audit et ses eaux ici ok allez c’est
parti su faire la même chose que ça
maintenant on peut réduire
on peut réduire aussi celui ci service
donc la même principe je duplique up
mobile ici je laurent non visibles pour
téléphones et celui
si tout ce que j’ai fait services
mobiles et celui ci il sera visible par
contre up dakar services un ok donc ce
que je vais faire c’est que ça hop je
vais le supprimer sa taxe
je vais le changer donc hop
d’ailleurs ce que je vais pouvoir faire
je vais faire ça sauvegardez celui-ci
ville dupliquer hop hop
donc ici ce sera les deux derniers et
maintenant les deux premiers hommes
effectivement tec est dit
donc le deuxième ça sera rédaction web
que je vais m
ici est le deuxième mais le premier
plutôt il n’existait pas en format
skweres format carré parfait de concert
je mets sauvegarder tech et je mets tu
mettras joue ici
ok maintenant je veux voir ce que ça
donne ok donc là on a quelque chose
effectivement maintenant qui ressemble à
ça donc et quand même qu’il aime
beaucoup mieux est ce que je vais voir
maintenant c’est au niveau des distances
on a quelque chose ici qui est assez
large
hop alors ça donc ça ses services
classiques
est-ce que a peut-être que ça vient
aussi faux que je teste tech
donc je vais retirer sa tech tac et
celui ci vu m à 1 et on va faire mettre
à jour de nouveaux je pense qu’il ya
aussi des questions de padding mais je
voulais vérifier si l’aller les
différents blogs que j’avais mis par
défaut sur sûre pour que ce soit bien
afficher sur ordinateur c’est ça ne me
rajoute pas de la distance finalement
ici sur téléphone ce que je voulais
vérifier
ok alors ça semble pas vraiment donc san
luigi opening donc ce que je vais faire
si j’appuie ici il faut que je vérifie
design au niveau du planning on n’a pas
grand chose tu as qu il ferait vérifier
gates
ok voilà bon on est sur quelque chose
qui est nettement mieux
donc voilà lorsque je vais faire
maintenant bon c’est un peu c’est un peu
mythique hulin mais j’aimerais que la
distance qu’ils soient ici soit la même
que la donc même principe il faut il
faut tâtonner en fait il n’y a pas de il
n’y a pas d’autres possibilités vraiment
avec avec havas d’arrêt ce niveau là
donc hop
ici je vais mettre 17 mai temps
map là ok j’ai l’impression que c’est
mieux
peut-être 18 19 j’ai essayé j’ai essayé
19
hop voir si c’est la bonne sera soit
celle ci sur la prochaine
ok tac et maintenant on va donc appuyé
ici
ben allemand ça me va donc voilà
maintenant là vraiment quelque chose qui
est qui et quand même beaucoup plus
sympa tac tac tac pour moi ça me
convient ça me convient parfaitement ça
ok donc voilà donc on continue
maintenant donc effectivement on a donc
nos formations et si oh ça c’est bien
mais j’ai pas forcément envie de changer
ça me paraît bien ensuite
[Musique]
alors ça effectivement ce que je vais
faire c’est que ce même principe
je vais les diviser angers faire deux
carrés en fait je fais un carré comme ça
un carré comme ça parce qu’un à 4 donc
là ça va tomber sa tombe bon donc c’est
parfait donc d’ailleurs up
ouais c’est bon alors je vais réduire sa
et donc on va aller dans la partie blog
que je vais dupliquer ensuite donc
mobile up donc mobile ça c’est bien je
vais changer ici donc je veux que ça
soit accessible à tous sauf le mobile et
celui ci linverse il faut que ce soit le
mobile qui soit visible ce soit visible
sur le mobile ok ensuite
donc c’est ici qu’a faron face nos
changements donc d’ailleurs peut-être
que je peux les faire directement depuis
oui effectivement celui là alors ici
j’ai fait donc rajouté donc un carrousel
select image alors select images la
première
alors effectivement puisque ce serait
bien mais trône sight of sight ensemble
donc je vais faire comme ça en fait
taquin
m automatique au niveau de la taille aux
âmes est ici lift à pain autoplay nombre
de colonnes viendra que deux colonnes
spacing il faut que je vérifie show
naviguer chaîne no border sait plus si
j’effectue au dessus bon eh hop on va
mettre bay pour vérifier
donc on a quelques
comme ça effectivement le padding il est
bon de mon point de vue ok donc
maintenant que ça c’est fait hop
donc ce que je vais faire c’est pas
celui là oui donc ça c’est pour ça moi
je vous conseille toujours de tout
réduire comme ça pour éviter de vous en
mêlez un peu les pinceaux entre les deux
ce que parfois on peut faire des
changements on pense que c’est la
version mobile alors que c’est la
version ordinateur
ok tac alors ce que je vais faire ici eu
trois cinquièmes jeux réduits ça ici je
vais donc vous êtes d’ailleurs je
reprends ce carrousel si la place je
vais changer les images
donc il y aura robote tac
et ensuite edit expérience utilisateur
bam
ça c’est fait donc je sauvegarde ici et
pour ceux là je vais mettre ici nope
donc moins up – 19 et jeux sauvegardés
e
création de site web c’est bien que ce
soit autant sur le côté ce truc ok
taquin
ensuite j’ai dû cliquer ici aussi tac
création de sites web et donc s’il y
aura dessus donc wordpress up wordpress
et ensuite il faut que je rajoute des
liens par la suite comme il parle
existeront édite un et sites web
ok donc sage et pouvoir l’effacer
maintenant hop et je voudrais voir donc
je vais mettre à jour il voudrait voir
ensuite le résultat
ok alors et si
donc ça c’est bien les formes sont bien
par contre là effectivement chez les
soucis alors voyons voir taquin
d’ailleurs elle est effectivement que ça
serait plus l’intelligent tac de faire
comme ça hop
bon je vais effacer sa pelouse moment
intendant et par contre up
ce qui me surprend c’est que lamont mon
changement à -19 je sais pas si ça a
marché
1 effectivement hop ça serait quand même
mieux que ce soit ici je pense que c’est
ce qui pose problème en ce moment et
d’ailleurs il me semble que non c’est
pas ça
je me suis simplement un pur la
correction maintenant l’ofppt design
effectivement même erreur que tout à
l’heure c’est ici ça se passe a semé
gates maintenant voyons voir quels
résultats toussaint up plat
gallas est un peu de temps à charger tac
ok ok voilà pour moi alors quand ça
c’est qu’on a encore un peu des carlins
-19 c’est pas suffisant
bon il faudrait augmenter
bonjour augmenterez oui vous avez
compris comment faire le principe est
assez simple mais qu’il faut simplement
que je change de 3 chiffres
par contre ici effectivement il ya un
écart alors effectivement peut-être que
ça vient simplement de ce bloc la design
hop alors ce que je vais faire si je
vais prendre alors je vais faire moins
tech
je met par exemple – 21 sauvegarder et
on va voir aussi c’est en dessous là
cette partie là le fait de retirer le
bloc
ça a permis de de retirer cet écart qui
est ici qui me plaît pas
pas trop en même temps peut-être que non
ça va je suis vérifier quand même
quelque chose tac d’iron design ouais je
suis pourtant à à moins 5
je sais pas trop pourquoi ça me ça me
fait ça bon je vais faire un petit
changement tech
donc j’ai m 3 soit susceptible de me
plaire un peu plus et ans de suite dont
je regarde en dessous 28 après bon là ça
sera ça sera bon t’as contacter no way
diminuent effectivement bon je ne sais
pas si je remonte ce cette image ici
pour la mettre là haut tu le même
principe que la tête que ça peut être un
peu plus sympa bon je vais faire ça donc
on t’a qu’un blog mobile contacts alors
contacter ici up donc mobiles ensuite
attaqué comme çà contact mobile ça je
retire et où ce jeu fait déplier ici
mais ce que je vais faire si je fais
simplement permuter les deux mettre à
jour
mettre à jour
alors voyons voir depuis le début donc
on a quelque chose comme ça vous
souhaitez augmenter votre trafic
organique
ça c’est bien au niveau de la taille ça
j’ai changé c’est beaucoup mieux
l’image est comme ça maintenant celle ci
est en dessous c’est mieux aussi
avec cette petite image comme ça c’est
bien là on a donc no 4 skweres les
quatre carrés ensuite oui nos formations
comme ça c’est bien je pars remonter
cette image là je pense qu’elle est pas
mal ici ensuite blog ici on a donc là
l’image qui bien là on a nos skweres qui
sont pas mal là effectivement for change
peut-être encore un peu le pas de la
distance
ensuite audit et sio et ensuite tac
contact et non ça ça me paraît pas mal
ouais je sais bien voilà donc voilà
maintenant donc ça veut dire que si on
fait tac comme ça donc version
ordinateur ou version téléphone
eh ben on a on a quelque chose qui
fonctionne vraiment bien
donc vraiment je l’avantagent d’avatar
aujourd’hui la plupart des thèmes bien
évidemment sont ce qu’on appelle
responsive donc c’est à dire qu’il
fonctionne à la fois très bien sur
ordinateur sur tablette et sur téléphone
néanmoins prenez quand même le temps de
toujours regarder ce que ça donne sur
téléphone parce que le téléphone à
l’heure actuelle quand on a un site web
c’est absolument indispensable donc pour
google d’ailleurs google fait un
référencement spécifique pour le
téléphone donc c’est vraiment hyper
important d’avoir quelque chose qui soit
ultra fluide
donc moi ce que je vous conseille c’est
de vraiment prendre le temps de faire
les choses correctement dans un premier
temps sur ordinateur et une fois que
c’est fait correctement sur ordinateur
vous prenez un peu de temps pour
regarder ce que ça donne sur téléphone
et ensuite faire des changements
pas de modification parce que bien
évidemment la façon dont on navigue sur
le téléphone et la façon dont mon avis
sur son ordinateur est radicalement
différente
donc c’est pour ça que c’est vraiment
important de prendre un peu de temps
pour voir ce que ça donne sur téléphone
corriger l’ensemble des paramètres sur
téléphone pour qu’il y ait une vraie
très bonne expérience utilisateur sur
téléphone gelé terminé pour cette vidéo
à bientôt.

Qualité de l'outil ?

Cliquer sur les étoiles pour voter !

Note Moyenne 0 / 5. Décompte des votes : 0

Aucun vote pour le moment. Soyez le premier !

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Fondateur de l'agence SEO Twaino, Alexandre Marotel est passionné par le SEO et la génération de trafic sur internet. Il est l'auteur de nombreuses publications, et détient une chaine Youtube qui a pour but d'aider les entrepreneurs à créer leurs sites web et à être mieux référencés dans Google.

Laisser un commentaire