Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


De nos jours, un site Web doit avoir une belle apparence non seulement sur un écran de bureau, mais également sur des tablettes et des smartphones.

Un site web réagit lorsqu’il peut s’adapter à l’écran du client.

La conception Web réactive est extrêmement importante de nos jours et une technique que vous devez maîtriser en tant que développeur Web ou concepteur Web.

Dans cet article, je vais vous montrer comment créer facilement un site Web réactif et appliquer des techniques de conception réactive à des pages Web existantes en trois étapes faciles.

1 – La mise en page

Lors de la création d’un site Web réactif ou de la réactivité d’un site Web existant, la première chose à considérer est la mise en page.

Lorsque je crée des sites Web réactifs, la première chose que je fais est de créer une mise en page qui ne répond pas et qui est définie sur la taille par défaut. Par exemple, la largeur par défaut de CatsWhoCode.com est de 1 100 pixels.

Lorsque je suis satisfait de la mise en page qui ne répond pas, j’ajoute des requêtes multimédias et des modifications mineures à mon CSS pour créer un site réactif. En matière de conception Web, il est beaucoup plus facile de se concentrer sur une tâche à la fois.

Site sur appareil mobile

Lorsque vous avez terminé votre mise en page qui ne répond pas, la première chose à faire est de mettre les lignes suivantes dans les balises et coller sur votre page HTML.

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">

Cela définit la vue sur un rapport hauteur / largeur 1 × 1 sur tous les écrans et supprime la fonctionnalité standard des iPhones et autres appareils mobiles qui rendent les sites Web en pleine vue et permettent aux utilisateurs de zoomer sur la mise en page en pinçant.

Il est maintenant temps d’ajouter quelques requêtes multimédias. Selon le Site du W3C, Les requêtes multimédias consistent en un type de média et zéro ou plusieurs expressions qui testent les conditions de certaines fonctions multimédias. Les requêtes multimédias peuvent être utilisées pour adapter des présentations à une gamme spécifique de périphériques de sortie sans modifier le contenu lui-même.

En d’autres termes, les requêtes multimédias permettent à votre site Web d’avoir une belle apparence sur tous les types d’écrans, des smartphones aux grands écrans. C’est appelé conception web adaptable.

Les requêtes multimédia dépendent de la présentation de votre site Web, il m’est donc assez difficile de vous fournir un extrait de code prêt à l’emploi. Cependant, le code suivant est un bon point de départ pour la plupart des sites Web. Dans cet exemple est #primary est la zone de contenu principale et #secondary la barre latérale.

Un regard sur le code montre que j’ai défini deux tailles: La première a une largeur maximale de 1060 pixels et est optimisée pour un affichage au format paysage tablette. #primary occupe 67% de son conteneur parent et #secondary 30% plus 3% de marge gauche.

La deuxième taille est conçue pour les portraits sur tablette et les plus petites tailles. En raison de la petite taille des écrans du smartphone, j’ai décidé d’abandonner #primary une largeur de 100%. #secondary ont également une largeur de 100% et sont illustrés ci-dessous #primary.

Comme je l’ai dit plus tôt, vous devrez probablement modifier un peu ce code pour répondre aux besoins spécifiques de votre site Web. Collez-le sur votre site Web .css Déposer.

/* Media Queries: Tablet Landscape */
@media screen and (max-width: 1060px) {
    #primary { width:67%; }
    #secondary { width:30%; margin-left:3%;}  
}

/* Media Queries: Tabled Portrait */
@media screen and (max-width: 768px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
}

Voyons à quel point votre mise en page est réactive. Pour cela, j’utilise Ce formidable outil Créé par Matt Kersley. Vous pouvez bien sûr vérifier le résultat sur votre propre appareil mobile.

2 – Médias

Une mise en page réactive est la première étape vers un site Web entièrement réactif. Concentrons-nous maintenant sur un aspect très important d’un site Web moderne: des médias comme des vidéos ou Photos.

Le code CSS suivant garantit que vos images ne sont jamais plus grandes que le conteneur parent. C’est super simple et fonctionne pour la plupart des sites Web réactifs. Pour fonctionner correctement, cet extrait de code doit être inclus dans votre feuille de style CSS.

img { max-width: 100%; height: auto; }

Bien que la technique décrite ci-dessus soit efficace, vous devez parfois avoir plus de contrôle sur les images et afficher une image différente en fonction de la taille d’affichage du client.

Voici une technique développée par Nicolas Gallagher. Commençons par le HTML:

 Comment créer un site Web réactif en 3 étapes faciles 1

Comme vous pouvez le voir, nous l’avons utilisé data-* Attribut de stockage des URL pour les images de remplacement. Profitons maintenant de toute la puissance de CSS3 pour remplacer l’image par défaut par l’une des images de substitution spécifiées si le min-device-width La condition est convenue:

@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}

@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}

Impressionnant, non? Examinons maintenant un autre média très important sur les sites Web d’aujourd’hui: les vidéos.

Étant donné que la plupart des sites Web utilisent des vidéos de sites Web tiers comme YouTube ou Vimeo, j’ai décidé de me concentrer sur la technique de la vidéo élastique de Nick La. Cette technique vous permet de rendre les vidéos intégrées réactives.

Le HTML:

Et maintenant le CSS:

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Une fois que vous avez appliqué ce code à votre site Web, les vidéos intégrées sont désormais réactives.

3 – typographie

La dernière étape de ce tutoriel est certes importante, mais elle est souvent négligée par les développeurs sur les sites responsive: la typographie.

Jusqu’à récemment, la plupart des développeurs utilisaient des pixels pour définir les tailles de police. Bien que les pixels conviennent si votre site Web a une largeur fixe, un site Web réactif doit avoir une police réactive. La taille de la police de votre site doit être liée à la largeur du conteneur parent afin qu’elle s’adapte à l’écran du client et soit facile à lire sur les appareils mobiles.

La spécification CSS3 comprend une nouvelle entité appelée rems. Ils fonctionnent presque à l’identique em Unité, mais sont relatifs à la html Élément qui les rend beaucoup plus faciles à utiliser que ems.

Comment rems sont relatifs à html Élément, n’oubliez pas de réinitialiser html Taille de police:

html { font-size:100%; }

Vous pouvez ensuite définir les tailles de police correspondantes comme suit:

@media (min-width: 640px) { body {font-size:1rem;} } 
@media (min-width:960px) { body {font-size:1.2rem;} } 
@media (min-width:1100px) { body {font-size:1.5rem;} } 

Plus d’informations sur le rem Je vous recommande cet appareil utile éléments. Vérifiez cela aussi Techniques de conception Web réactive conduite.



Source link

Recent Posts