Adapter son site au format mobile avec CSS

TP : adapter un exemple au format mobile !

Vous savez déjà ce qu’il faut faire pour avoir un site web mobile. Maintenant, rien ne vous arrête si vous voulez adapter tout de suite votre site, mais j’aimerais à présent que vous vous exerciez avant de partir dans le vrai monde cruel.
Après ce TP, vous aurez vu en pratique comment on peut obtenir un site fait pour mobile. Au final, vous verrez que ce n’était pas si compliqué !

Instructions pour réaliser le TP
Si vous avez suivi le tutoriel de M@teo21 sur le html, vous vous rappelez sûrement du TP qui consistait à créer de toutes pièces son site. Et bien maintenant qu’il est « tout beau, tout propre, prêt à envahir le web », il faut penser aux utilisateurs de mobiles !

Les fichiers de départ
Comme vous êtes déjà censés avoir réalisé ce TP, je vous autorise (Que je suis gentil !) à télécharger directement les fichiers finaux :
Télécharger les fichiers du site (500 Ko)
De plus, vous pourrez peut-être avoir besoin d’une autre image, mais je n’en dis pas plus :

Votre objectif
Et bien, vous le connaissez déjà : faire en sorte qu’une page s ‘affiche correctement pour un mobile.
De multiples difficultés vous attendent, toutes plus retords les unes que les autres… Amusez-vous bien !
(Notez qu’à l’heure où j’écris ces lignes, je n’ai pas encore fait le TP, donc je n’en ai aucune idée. )

Comment procéder ?
N’oubliez jamais, vous devez toujours procéder avec méthode. Prenez du papier et un crayon, reprenez l’allure du site que vous devez adapter, et posez-vous ces quelques questions (liste non exhaustive !) :
Ce bloc-là est trop large, comment je vais faire pour qu’il soit plus petit ?
Ici, deux blocs sont côtes à côtes, donc un des deux devra passer sous l’autre. Mais lequel ?
Ce « truc » est là uniquement pour faire joli. Est-ce que j’en ai encore besoin pour un mobile ?
99.9 % du temps que vous allez mettre pour réaliser ce TP va être du temps que vous allez passer sur du CSS. En effet, n’oubliez quand même pas la balise <meta name= »viewport »/>, ce serait bête. Mais vous pouvez bien sûr faire de minimes changements dans le code HTML si c’est plus simple pour vous.
Et enfin, une bonne nouvelle : Le code HTML créé par M@teo21 est vraiment bien structuré, ce sera d’autant plus facile pour vous de l’adapter ! (Tous en chœur : « Merci M@teo21 ! ») Je peux vous dire que pour mon premier site, qui n’était pas très bien formé, j’ai eu un mal fou à l’adapter pour mobile. C’est dire si la conception HTML de départ est fondamentale !

À vous de jouer !
Il ne vous reste plus qu’à prendre du papier et un crayon, décider ce que vous allez faire (les fameuses questions à se poser !), et ensuite mettre ça en pratique avec du CSS !
Un dernier petit conseil : ne vous affolez surtout pas si quelque chose ne fonctionne pas du tout comme prévu ! Cela peut être une faute de frappe, une propriété donnée à une mauvaise balise, mais tout ça est heureusement facile à corriger. Utilisez les outils pour développeur de votre navigateur pour déterminer ce qui ne va pas, et surtout, prenez votre temps ! Vous n’allez pas forcément réussir du premier coup.
A bientôt pour la correction !

Correction
Je ne vais pas vous donner tout un bloc de code dès le départ. Je vais essayer de vous guider dans cette correction, de sorte que ceux qui ne sont pas arrivés à réaliser ce TP puissent au moins comprendre la démarche à suivre.
……..

Partager
Adapter son site au format mobile avec CSS3
Partie 1 : Adapter son site au format mobile
Fonctionnement de base
La méthode utilisée
Un sous-domaine pour mobile
Utiliser les nouvelles possibilités offertes par CSS3
En résumé
Une seule balise magique !
Quelques options
Le zoom initial, minimal et maximal
Le zoom de l’utilisateur
Une petite particularité pour les écrans particulièrement grands
Les possibilités offertes par CSS3
Utiliser les media queries
La technique en CSS3
Valeurs standards
Gérer les éléments problématiques
Le choix des médias
Le type de média
Les fonctionnalités
Les opérateurs logiques
TP : adapter un exemple au format mobile !
Instructions pour réaliser le TP
Les fichiers de départ
Votre objectif
Comment procéder ?
À vous de jouer !
Correction
Bien commencer
« À propos de l’auteur »
Le menu
La bannière
Le pied de page
Le code final
Aller plus loin
Une autre approche
Accéder à la version pour ordinateur
Le principe
Un exemple avec PHP
La préparation
Accéder à la version pour ordinateur
Revenir à la version mobile
JavaScript : dérouler ses menus
Créer son bouton !
Avec un peu de JavaScript
En JavaScript « pur »
Avec des frameworks
Gérer la désactivation du JavaScript
……

Si le lien ne fonctionne pas correctement, veuillez nous contacter (mentionner le lien dans votre message)
Adapter son site au format mobile avec CSS3 (2,26 MO) (Cours PDF)