Explorez le site web que vous pouvez réaliser en responsive design dans ce tutoriel. Examinez la page web et observez comment les éléments réactifs s'adaptent aux différents écrans (poste de travail, tablette et smartphone).
Si vous souhaitez recréer le site web en responsive design, ouvrez la bibliothèque Responsive Web Design (Muse). Cliquez sur Enregistrer dans Creative Cloud pour en créer une copie sur votre compte. Si vous souhaitez utiliser les fichiers de démarrage, téléchargez le fichier responsive-web-design.zip sur votre ordinateur.
Remarque : vous devez vous connecter à votre compte Creative Cloud pour enregistrer la bibliothèque. Si vous n'avez pas d'Adobe ID, créez-en un.
Créez un site, explorez le mode Plan et établissez le plan du site. Structurez et nommez les pages à créer, puis ajoutez-leur des titres.
Créez un gabarit qui contiendra les éléments utilisés sur chaque page du site web. Ajoutez les styles graphiques et de paragraphe que vous utiliserez dans l'ensemble du site.
Créez et mettez en forme le pied de page du site web à l'aide de propriétés réactives. Ajoutez des icônes pour les médias sociaux et définissez les états qu'elles doivent prendre au survol de la souris. Associez les icônes du pied de page à des hyperliens qui permettront d'accéder à d'autres pages web depuis votre site. Utilisez le widget de menu pour définir la navigation de votre site. Enfin, ajoutez un formulaire dans le pied de page à l'aide d'un autre widget.
Créez et mettez en forme l'en-tête du site web à l'aide de propriétés réactives. Ajoutez le logo du site et un bouton, puis ajustez la mise en page à l'aide des fonctionnalités d'alignement. Ajoutez dans l'en-tête un menu de navigation, et personnalisez son apparence.
Utilisez des paramètres de responsive design comme l'option d'épinglage pour garantir l'affichage correct des éléments sur les écrans de toute taille. Ajoutez des points d'arrêt dans votre maquette pour gérer la transition entre les différentes mises en page prévues pour chaque format d'écran. Utilisez les outils de responsive design pour prévisualiser les différentes mises en page de votre site. Ajustez les éléments de page pour un affichage optimal à différents points d'arrêt.
Créez et agencez un menu qui s'adapte aux différents formats d'écran (poste de travail, tablette et smartphone). Apprenez à structurer les éléments de l'en-tête et du pied de page de sorte qu'ils s'adaptent automatiquement à chaque format d'écran.
Ajoutez un point d'arrêt pour la mise en page destinée aux smartphones. Agencez les éléments dans une mise en page verticale pour un affichage optimal sur les smartphones, dont les écrans sont moins larges que ceux des tablettes et ordinateurs.
Finalisez la page d'accueil du site web. Apportez les réglages nécessaires au texte et aux images pour assurer leur redimensionnement et leur mise à l'échelle dans les différents navigateurs. Définissez des états de survol supplémentaires pour optimiser l'expérience de l'utilisateur dans les différentes parties de la page.
Finalisez le site web et voyez s'il est nécessaire d'ajouter sur chaque page des points d'arrêt différents de ceux du gabarit. Découvrez d'autres techniques de responsive design. Apprenez notamment à masquer et afficher du contenu pour un affichage optimal dans toutes les mises en page, à mettre le texte à l'échelle pour les petits écrans et à copier la mise en forme et la mise en page sur tous les points d'arrêt.
Enfin, apprenez à partager votre site à des fins de révision ou à le publier en ligne.