Plus les appareils mobiles deviennent populaires, plus l’inconfort ressenti lors de la navigation sur la plupart des sites est grand. C'est pourquoi, à partir de 2012, les webmasters ont commencé à utiliser une solution qui rend plus confortable la visualisation des ressources sur des écrans basse résolution : la mise en page adaptative.

Mode actuelle

Aujourd’hui, environ cinq milliards de personnes sur Terre utilisent des téléphones portables, dont un tiers possède un smartphone. Le trafic mobile devient donc de plus en plus important pour les propriétaires de sites Web. Cette source de visiteurs ne fera probablement qu’augmenter avec le temps.

Les moteurs de recherche ont rapidement réagi à cette tendance. Les grandes entreprises Yandex et Google ont apporté des modifications significatives à leurs algorithmes de classement des sites dans les résultats de recherche, en tenant compte de la présence d'une mise en page et d'un design adaptatifs. En termes simples, les propriétés Web optimisées pour les téléphones mobiles, les smartphones et les tablettes auront un certain avantage sur leurs concurrents.

Définition de la mise en page adaptative

La mise en page adaptative est une méthode de création d'un cadre de page Web qui modifie automatiquement la disposition des blocs en fonction de l'appareil sur lequel il est affiché. Autrement dit, avec cette approche, des styles distincts sont créés pour diverses résolutions. Cet effet est obtenu en écrivant spécialement des fichiers CSS.

Auparavant, le problème était résolu un peu différemment. Les développeurs ont dû faire beaucoup plus de « mouvements de corps », créant la mise en page et le design de la version principale du site et faisant de même pour la version mobile. En fonction de l'écran de l'appareil sur lequel le projet Internet avec la plateforme mobile existante a été visualisé, la version appropriée du site a été lancée.

Cette approche ne s'est pas justifiée à bien des égards et la plupart des webmasters n'ont jamais adopté les versions. Désormais, cet ordre a été remplacé par une mise en page adaptative. En créant un framework de site Web utilisant cette technologie, le webmaster concentre tous ses efforts sur la création d'une seule version du projet, et les visiteurs peuvent le visualiser avec le même niveau de confort aussi bien sur un grand écran d'ordinateur que sur un téléphone mobile, un smartphone ou une tablette.

Avantages d'une mise en page réactive

Quels sont les avantages de la mise en page adaptative d’un site Web ? Il a été noté plus tôt que l'avantage réside dans l'affichage correct de tous les blocs de pages sur n'importe quel appareil. Un autre aspect positif de cette approche de création d'un modèle est la rapidité de mise en œuvre des changements. Qu'est-ce que ça veut dire?

Si le site disposait de deux plateformes, les modifications apportées à la mise en page devaient être implémentées d'abord dans la version de travail, puis dans la version mobile. Si les modifications apportées au code étaient assez importantes, le processus de mise en œuvre de ces modifications pourrait prendre beaucoup de temps. Avec une mise en page adaptative, le travail sur le chantier s'effectue dans un seul fichier. Les modifications apportées à la mise en page de la page Web apparaîtront aussi rapidement dans les versions de bureau que mobile.

Certains webmasters affirment que l’inconvénient de cette approche est la complexité de sa mise en œuvre. Mais avec l’avènement de CSS 3, créer un modèle de mise en page réactif est devenu très simple. Même les webmasters les moins expérimentés peuvent rendre leur site Web facile à consulter sur les appareils mobiles.

Principes et caractéristiques de la mise en page adaptative

Quels principes sous-tendent la méthode de mise en page réactive dans la conception Web ?

Utilisation du type de mise en page « caoutchouc ».

- Images « caoutchouc ».

Utilisation de requêtes multimédias.

La nécessité de penser aux appareils mobiles dès le début de la création de la mise en page.

De ces principes fondamentaux de cette méthode de création d'un modèle, découlent les caractéristiques suivantes de la mise en page adaptative :

1. Conception et réalisation d'un design de site internet prenant en compte le travail sur toute la gamme des résolutions : du mobile aux écrans grand format.

2. Mise en page utilisant des feuilles de style en cascade utilisant la technologie MediaQuery introduite dans CSS 3.

3. Programmation côté client et côté serveur pour transmettre des images d'un volume et d'une résolution inférieurs aux appareils mobiles.

Un aspect important, compte tenu de la disposition adaptative créée, est la résolution de la matrice des appareils électroniques populaires. Cette approche de la conception rendra la visualisation des pages Web sur n'importe quel écran très confortable. Mais comment savoir lesquels inclure dans vos styles ?

Par où commencer pour créer une mise en page responsive ?

La plupart des sites sont conçus de telle manière que des barres de défilement apparaissent sur les écrans des smartphones et des tablettes, ce qui n'est pas si pratique pour surfer, et la conception et la mise en page de nombreux projets Internet « flottent » simplement. Les sites créés pour enseigner la conception Web contiennent une variété de résolutions d'écran pour différents appareils pour lesquels vous devez mettre en page les pages de votre site.

La mise en page adaptative, dont on trouve assez souvent des exemples, présente de nombreux avantages. Que devez-vous garder à l’esprit lorsque vous abordez les mises en page de cette façon ?

Une fois que vous commencez à travailler sur un modèle, il est important de tester périodiquement la façon dont le contenu et les blocs de mise en page sont affichés sur différents écrans. Pour ce faire, il suffit parfois de simplement modifier la largeur de la fenêtre du navigateur. Le fichier de style reçoit une requête multimédia et réorganise les blocs, apportant des modifications significatives. Un bon outil pour tester un modèle de mise en page adaptative peut être des sites qui imitent les écrans d'appareils mobiles de différents modèles. De tels services vous permettront d'examiner et d'évaluer soigneusement l'apparence du design sur les écrans de divers appareils mobiles.

Bien que la technologie d'une telle mise en page adaptative ne soit pas si simple, sa maîtrise portera ses fruits très prochainement.

Pour que la mise en page de votre site soit belle sur iPhone ou tablettes, elle doit être adaptée à ces appareils et il est important de le faire efficacement...

Mise en page adaptative du site Web (parfois également appelée adaptée aux mobiles) - DÉTAILLÉE et étape par étape comme dans la leçon :

Remarque : Yandex et Google disposent de leurs propres outils avec lesquels vous pouvez vérifier l'adaptabilité du site. Dans la nouvelle version de Yandex Webmaster, il se trouve comme ceci : outils - vérification des pages mobiles.

Si vous voulez savoir comment créer un site Web réactif, cela sera écrit ci-dessous et en détail dans les exemples, MAIS, si vous n'avez pas de compétences pour travailler avec les CSS, ce sera plus difficile. Ou votre programmeur ou webmaster peut le faire.

Conception de site Web réactif - implique de définir la largeur de la fenêtre de la page et la largeur des colonnes et des barres latérales en %, en adaptatif - en px.

Attention : si vous disposez d'un moteur populaire pour votre site, tel que wordpress, alors ils n'ont pas de « casse-tête » avec la conception adaptative - tout s'y fait en quelques clics de souris - le plugin est simplement installé et activé et c'est tout TOUS). Par exemple, pour WP - j'ai utilisé WPtouch - c'est très bien, mais si vous avez un programmeur à temps plein, alors il vaut mieux faire ce moment individuellement.

Il faut comprendre qu'en gros, avec la mise en page adaptative, les éléments suivants sont souvent manipulés : width (largeur de l'élément : max-width et min-width), float (wrapping, il est supprimé à mesure que la largeur de la fenêtre diminue), font -size (la hauteur des lettres est modifiée).

1) Vous devez d’abord écrire une balise méta spéciale pour différents types d’appareils :

2) Paramètres de page adaptatifs (largeur et hauteur) :

Récipient (
largeur : 800px
largeur maximale : 90 % ;
}

Dans ce cas, une largeur de conteneur fixe est définie, mais elle ne doit pas dépasser 90 % de la largeur de la fenêtre, ce qui est très pratique - le site lui-même s'adaptera alors à la taille de la fenêtre.

3) Mise en page adaptative CSS pour les images de l'ensemble du site :

img (largeur maximale : 100 % ;
hauteur : automatique ;
}

Nous montrons ici que la taille de l'image : sa largeur maximale ne doit pas dépasser 100 % de l'œil - de cette façon, l'image elle-même s'adapte à la taille du téléphone ou d'un autre gadget. Voici une méthode si simple : la conception d’images adaptatives.

4) Disposition adaptative du texte du site Web : dans ce cas, des manipulations se produisent avec la hauteur de la police : la taille de la police et d'autres paramètres.

Mot de rupture ( retour à la ligne : mot de rupture ; )

Ce CSS est conçu pour la césure lorsqu'il y a des mots longs sans césure.

Il existe de nombreuses erreurs dans la taille de la police : Yandex adore écrire - La taille du texte est trop petite pour être lue sur les appareils mobiles - pour cela, nous faisons ceci :

body (taille de police : 16 px) - cela évitera cette erreur, et pour la balise p et pour les liens, vous devez la mettre séparément. C’est justement parce que la balise body contient font-size : 12 ou 14 px que cette erreur se produit ! Et voici le verdict :

5) Adapter une conception à 3 colonnes ou une disposition à 2 colonnes - il n'y a rien de compliqué à ce sujet si tout est fait sur des divs - oh, alors vous devez généralement annuler l'emballage, c'est-à-dire définir float sur aucun et les blocs disparaîtront vers le bas.

6) CSS adaptatif pour la vidéo (de Habr) :

Vidéo (
position : relative ;
rembourrage du fond : 56,25 % ;
hauteur : 0 ;
débordement caché;
) .vidéo iframe ,
Objet .video
.video intégrer (
position : absolue ;
haut : 0 ;
gauche : 0 ;
largeur : 100% ;
hauteur : 100% ;
}

Requêtes multimédias - requêtes multimédias

Pour créer une conception adaptative, les requêtes multimédias sont souvent utilisées (elles définissent des règles basées sur la largeur de l'écran - en fonction de la résolution de l'écran).

Voici un exemple de requêtes média : quelles résolutions utiliser pour la conception adaptative :

Écran @media uniquement et (largeur maximale : 1 200 px) (

Écran @media uniquement et (largeur maximale : 992 px) (

/* Petits appareils, tablettes */
Écran @media uniquement et (largeur maximale : 768 px) (

Écran @media uniquement et (largeur maximale : 480 px) (

/* Personnalisé, iPhone Retina */
Écran @media uniquement et (largeur maximale : 320 px) (
/**/
}

/*========== Méthode Mobile First ==========*/

/* Personnalisé, iPhone Retina */
Écran @media uniquement et (largeur min : 320 px) (
/**/
}

/* Très petits appareils, téléphones */
Écran @media uniquement et (largeur minimale : 480 px) (
/**/
}

/* Petits appareils, tablettes */
Écran @media uniquement et (largeur min : 768 px) (
/**/
}

/* Appareils moyens, ordinateurs de bureau */
Écran @media uniquement et (largeur min : 992 px) (
/**/
}

/* Grands appareils, écrans larges */
Écran @media uniquement et (largeur minimale : 1 200 px) (
/**/
}

Mais vous pouvez également éviter les requêtes multimédias en définissant la largeur des colonnes et des blocs en pourcentages.

Pour les requêtes multimédias, nous commençons par le haut : tout ce que nous avons fait est acceptable pour la largeur maximale : 768 fonctionnera également à 480.

Quels sont les problèmes lors de l’adaptation de sites Web pour les appareils mobiles ?

Par exemple, Yandex peut afficher ceci - Il y a un défilement horizontal :

Vous avez quelque chose avec un remplissage ou une marge - réinitialisez-les à zéro pour les sélecteurs parents (blocs) et vous serez heureux.

Et à la fin, Yandex Webmaster montre ceci :

Je l'ai aussi fait pendant 4 heures, la première fois est toujours difficile ! Mais alors, vous pouvez le faire en seulement quelques heures ! Et nous l'envoyons au webmaster pour revérification, afin que ce soit plus rapide - important pour le référencement.

En général, de nombreuses personnes utilisent aujourd'hui des modèles prêts à l'emploi - Bootstrap et cela ne pose pratiquement aucun problème -

Préface

Actuellement, la part du trafic mobile augmente rapidement. Chaque jour, de plus en plus de personnes utilisent des appareils ayant accès à Internet. Le téléphone est toujours à portée de main, partout où les gens peuvent rechercher les informations nécessaires, lire les actualités, etc. Un site Web classique peut être consulté à l'aide d'un appareil mobile. Cependant, certaines nuances surviennent lors de la visualisation : pour lire des blocs de texte individuels sur un écran relativement petit, vous devez redimensionner la page. En conséquence, la lisibilité et la commodité sont perdues ; le site doit constamment faire défiler, étirer et zoomer. De nombreuses commandes de sites Web sont difficiles à utiliser car les pages ne sont pas conçues pour être exploitées en touchant l'écran. Pour résoudre ces problèmes, ils ont commencé à développer des sites Web capables d’afficher facilement des informations sur n’importe quel appareil.

À propos de l'article

Cet article est destiné aux développeurs qui ont de l'expérience dans la mise en page de sites Web et qui savent HTML Et CSS qui comprennent le but des sélecteurs CSS, etc.

Cet article abordera les types de mises en page qui vous permettent d'afficher correctement les sites dans n'importe quelle résolution, ainsi que les techniques avec lesquelles cela est réalisé. Regardons le concept CSS-framework et faire une analyse comparative des plus populaires.

Types de mises en page

Examinons les principaux types de mises en page, leurs différences et les principes de base utilisés dans leur mise en œuvre.

Disposition fixe

La mise en page fixe est une approche permettant de créer des pages de sites Web ayant une largeur donnée. La largeur des composants sur la page ne change pas. Sur les moniteurs basse résolution, une barre de défilement horizontale apparaît. Ce type de mise en page ne convient pas à un affichage pratique des informations sur les appareils mobiles.
L'exemple ci-dessous montre la définition stricte de la largeur d'une balise corps:

Disposition en caoutchouc

La mise en page élastique implique la capacité des composants du site Web à modifier leurs tailles en fonction de la taille de la fenêtre du navigateur, s'étendant de et vers les tailles minimales et maximales spécifiées. Ceci est réalisé en utilisant des valeurs relatives, largeur maximale / largeur minimale(largeur max/min), hauteur max / hauteur min(hauteur maximale/minimale).
Exemples d'utilisation de techniques de disposition en caoutchouc :

Disposition adaptative

Disposition adaptative ( Disposition adaptative ) permet au conteneur principal et à tout autre élément du site de s'adapter à la résolution de l'écran, permettant de modifier la taille de la police, la disposition des objets, la couleur, etc. Cela se produit de manière dynamique, par exemple, à l'aide de requêtes multimédias ( @médias), vous permettant de déterminer automatiquement la résolution du moniteur, le type d'appareil et de remplacer les valeurs spécifiées en mode automatique. L'exemple ci-dessous définit la largeur divégal 960px 1200px Et 320px pour tous les appareils dont la largeur est plus petite 480px.

Mise en page réactive

Responsive Layout est une combinaison de mise en page fluide et adaptative. Cette approche utilise à la fois des requêtes multimédias et la spécification en pourcentage des largeurs des composants. En utilisant ce type de mise en page, nous pouvons affirmer avec certitude que le site s'adaptera à n'importe quel appareil.
La largeur est définie ci-dessous divégal à 50% de la taille du composant parent pour tous les appareils dont la largeur est inférieure à 1200px et à 100% pour tous les appareils dont la largeur est inférieure à 480px.

Techniques de base pour la mise en œuvre de sites Web à n'importe quelle résolution Valeurs relatives

L'utilisation de valeurs relatives vous permet d'afficher des informations et des composants sur une page sans perdre en lisibilité ou en visibilité.

Valeurs relatives pour les tailles et les rembourrages

Des valeurs relatives peuvent être spécifiées pour largeur, hauteur, marge, remplissage etc. La manière la plus connue de spécifier la taille relative est en pourcentage (%).
Vous trouverez ci-dessous un exemple de définition de la largeur à 90 % de la taille du composant parent.

Dans ce cas, la valeur est calculée par rapport au composant parent.
Il existe également des valeurs concernant la taille de l'écran :

• VW- 1% de la largeur de la fenêtre. Lorsque la largeur de la fenêtre est réduite, la largeur, la hauteur et la police de l'élément sont réduites ;
• vh- 1% de la hauteur de la fenêtre. Lorsque la hauteur de la fenêtre est réduite, la largeur, la hauteur et la police de l'élément sont réduites ;
• vmin - sélectionne le plus petit des VW Et vh;
• vmax - le plus grand est sélectionné VW Et vh.

Ci-dessous un exemple d'utilisation VW Et vh. Dans ce cas, la largeur et la hauteur de la balise div sera égal à 50 % de la largeur et de la hauteur de l'écran, respectivement.

Valeurs relatives pour la taille de la police

Il existe les valeurs relatives suivantes pour les polices :

• em- définit la taille par rapport à la police parent ;
• Rem- définit la taille par rapport à la police.

Regardons un exemple :

Calculer la taille de la police de la balise corps. Dans cet exemple, la taille de la police pour corps spécifié par rapport à la taille HTML. Donc la taille de la police pour corps sera égal à 30 px (20px * 1.5 = 30px).

Vous pouvez également définir des tailles de police relatives à l'aide de %, vw,vh etc. Dans l'exemple suivant, la taille de la police pour corpségal à 80 % de la taille de la police HTML - 16px.

Tailles maximale et minimale des composants

Pour définir les valeurs maximales et minimales de la largeur et de la hauteur d'un composant, utilisez les propriétés largeur maximale / largeur minimale Et hauteur max / hauteur min respectivement.

Regardons un exemple :

Supposons que le composant parent de ce div est corps. Ensuite, lorsque la largeur de l'écran change, la largeur de ce composant sera de 60 % de la largeur corps. Toutefois, il n'augmentera que jusqu'au montant spécifié dans largeur maximale, c'est 500 px. Dès que le conteneur atteint cette largeur, il cessera de croître.

Utilisation des requêtes multimédias

Les requêtes multimédias vous permettent de spécifier des styles pour une taille d'écran spécifique, un type d'appareil en fonction des caractéristiques de l'appareil, etc. Toutes les requêtes multimédias commencent par @médias, puis suit la condition.

À l’aide des requêtes multimédias, vous pouvez définir des styles pour les types d’appareils suivants :

• tous- tous types (valeur par défaut)
• braille- les appareils basés sur le système Braille, destinés à la lecture par les aveugles
• en relief- les imprimantes utilisant le système Braille pour l'impression
• ordinateur de poche- les smartphones et appareils similaires
• imprimer- imprimantes et autres appareils d'impression
• projection- projecteurs
• écran- écran
• discours- des synthétiseurs vocaux, ainsi que des programmes pour lire du texte à haute voix
• ty- appareils avec taille de caractère fixe
• la télé- Les téléviseurs.

Un exemple de définition de la largeur d'une balise div, sur les écrans de contrôle, les smartphones, etc.

Liens vers des techniques de mise en œuvre d'une mise en page adaptative

Vous pouvez consulter et étudier les approches abordées dans cet article et d’autres plus en détail en utilisant les liens suivants :

• Faut-il faire une version mobile ? 5 problèmes courants résolus par la mise en page adaptative. Expérience Yandex

Cadres CSS

CSS-framework - un framework créé pour simplifier le travail d'un maquettiste, accélérer le développement et éliminer le maximum d'erreurs de mise en page (problèmes de compatibilité avec différentes versions de navigateurs, etc.). Ces frameworks impliquent l'utilisation de diverses approches pour afficher correctement les sites sur des appareils de toute taille.
De nombreux développeurs préfèrent utiliser CSS-frameworks, au lieu d'écrire tous les styles manuellement. Cela est dû aux raisons suivantes :

• Développement plus rapide
• Prise en charge de plusieurs navigateurs
• Prend en charge différents appareils et tailles d'écran
• La cohérence du code lorsque vous travaillez en équipe réduit les désaccords pendant le développement.

Comme les bibliothèques de langages de programmation de script, CSS-les bibliothèques, ayant généralement une apparence extérieure CSS-file sont ajoutés à l’en-tête de la page Web.

Regardons les plus populaires CSS-cadres.

Amorcer

Le framework le plus populaire pour le développement réactif et mobile la toile-projets. Amorcer est un outil open source pour développer des sites Web en utilisant HTML, CSS et JS. Amorcer- un cadre d'interface intuitivement simple et en même temps puissant qui augmente la vitesse et facilite le développement la toile-applications.

Amorcer Faites évoluer votre projet facilement et efficacement avec une seule base de code, des téléphones et tablettes aux ordinateurs de bureau. Une grille de 12 colonnes est utilisée pour cela :

En plus de CSS ce framework inclut la prise en charge des deux plus populaires CSS-préprocesseurs : Moins Et Toupet.

Caractéristiques distinctives:

• 12 - grille de colonnes
• Grand nombre de composants prêts à l'emploi
• Soutien Moins Et Toupet
• Usage Normaliser.css.

Conception matérielle pour Bootstrap

Conception matérielle pour Bootstrap est une boîte à outils de développement d'applications open source basée sur Amorcer et en utilisant des approches Conception matérielle.
Le framework vous permet de créer rapidement une application à l'aide de variables Toupet, grille adaptative, un grand nombre de composants prêts à l'emploi et des plugins puissants implémentés dans jQuery.

Caractéristiques distinctives:

• 12 - grille de colonnes
• Un grand nombre de composants prêts à l'emploi selon le concept Conception matérielle.

Tout d’abord, voyons ce qu’est la mise en page adaptative ? Il s'agit d'une mise en page dans laquelle le site s'affiche parfaitement sur différents appareils : ordinateurs, tablettes, smartphones.

Un exemple de mise en page adaptative : le même site Web semble intuitif sur n'importe quel appareil.

Un site Web au design adaptatif ne perd pas la fonctionnalité et la facilité d’utilisation (convivialité) pour les visiteurs. Les visiteurs sont la ressource précieuse pour laquelle un site Web est créé, qu'il s'agisse d'un magasin, d'un blog ou d'un site Web d'entreprise. Il est important non seulement d'attirer des clients potentiels, mais aussi de les amener à l'objectif (achat, inscription). La conception réactive résout ce problème.

La part du trafic mobile dans le monde et en Russie augmente à un rythme rapide. Chaque mois, de plus en plus d'utilisateurs consultent des sites Web via des appareils mobiles. Après tout, c'est simple : lorsque vous rentrez du travail en voiture, que vous faites la queue ou que vous marchez, votre téléphone est toujours à portée de main.

Problème . Un site Web ordinaire peut également être consulté via un téléphone, mais il perd toute lisibilité et commodité ; il doit être constamment parcouru, étiré et zoomé. Tout cela provoque un inconfort et les chances qu'un client potentiel commande quelque chose sont considérablement réduites.

Solution . Commandez un site Web avec une mise en page adaptative qui s'adapte à chaque appareil. Cette solution facilite son utilisation et concentre l’attention sur les éléments importants.

Exemple de site standard :

Il est assez problématique de toucher les points avec le doigt ;

Vous devez constamment vous déplacer vers la gauche et la droite pour afficher la page.

Un exemple de site Web avec une mise en page adaptative :

On se déplace uniquement du haut vers le bas de l'écran ;

Il n’est pas nécessaire de changer d’échelle ;

Tout est visible et logiquement compréhensible.

Comment ça marche. Mécanisme

La mise en page adaptative utilise des technologies modernes, grâce auxquelles tous les éléments sont rendus flottants. Autrement dit, ils peuvent modifier leur taille et leur emplacement sur la page du site en fonction de la taille de l'écran et de l'appareil à partir duquel ils sont consultés.

Plus l'écran est petit, plus les informations sont présentées de manière concentrée. Sur les smartphones et tablettes, les éléments mineurs sont masqués (les menus sont réduits, les images d'arrière-plan sont supprimées). Les commandes les plus importantes restent en haut de l'écran ; les blocs les moins importants sont déplacés vers le bas.

Le deuxième point important est le renforcement des contrôles. Les liens et les boutons deviennent plus grands pour pouvoir être facilement cliqués avec votre doigt. Sur les sites Web classiques, vous pouvez passer beaucoup de temps à essayer d'accéder à un lien, mais ce n'est pas possible ici.

Il est à noter qu’il n’y a pas de défilement horizontal. Pour continuer à lire le contenu, faites simplement défiler vers le bas. Il est impossible de se perdre.

Particularités

Grâce à cette technologie, la conception du site se distingue par les points suivants :

• Conception minimaliste ;
• Pas de grandes images d'arrière-plan ;
• Nous n'utilisons pas Flash (Flash n'est pas compatible avec les appareils mobiles) ;
• Le nombre d'éléments visuels est minime, l'accent est mis uniquement sur l'essentiel ;
• Le menu a une petite imbrication.

Conclusion

En analysant la dynamique de croissance des appareils mobiles dans le trafic Internet, la conclusion s'impose que dans 1 à 2 ans, plus de 90 % des internautes actifs utiliseront des appareils mobiles. Certains l'utilisent comme deuxième gadget pour accéder à Internet, en plus d'un ordinateur portable et d'un ordinateur, et un troisième l'utilise comme gadget principal. Ignorer une niche aussi énorme et, surtout, encore vide est une énorme omission.

Si l'expression « Si vous n'êtes pas sur Internet, vous n'êtes pas en affaires » était autrefois populaire, elle devient désormais pertinente en matière de mise en page adaptative.

Sites Web réactifs

Avec l'avènement des appareils mobiles : tablettes et smartphones, la possibilité de créer une mise en page adaptative des pages Web est devenue très populaire.
Cela signifie que le site doit être visible sur n'importe quel appareil. Eh bien, si ce n’est pas exactement la même chose que celle affichée sur un ordinateur de bureau, alors proche-en. L'essentiel est qu'il soit pratique de travailler avec : parcourir, rechercher quelque chose, appuyer sur des boutons, etc.

J'ai trouvé un mini-cours en ligne intéressant et gratuit sur la conception de sites Web adaptatifs basés sur HTML5 et CSS3. Je l'ai étudié.
** Vous pouvez télécharger ce cours vous-même en remplissant le formulaire de demande de test supérieur ou inférieur. **

Quoi de neuf en HTML5 et CSS3

J'ai décidé de vérifier s'il est possible (?) de créer un site Web adaptatif à tous les appareils, SANS utiliser la technologie. HTML5 Et CSS3 .

Disposition dans le codage "ANSI", et avec un dossier de service complet : "HTML 4.01 Transitionnel", au lieu de ce qui est requis par les règles HTML5 :

Nouvelles balises : en-tête, section, article je ne l'ai pas utilisé. Il s'est avéré que la disposition des blocs, comme d'habitude sur les balises, est suffisante div .

Nouvel attribut de formulaire pour les balises saisir"espace réservé"(indice) dans le navigateur IE8 N'a pas fonctionné. Pour le reste ça marche.

De même. Nouvel attribut « type » pour les balises type d'entrée = "e-mail" ne fonctionne que dans les navigateurs modernes.

Attribut "valeur" encore utilisé pour saisir des valeurs en formes.

Le plus important! Tout d'abord, le site est présenté sur un moniteur ordinaire, puis seulement dans la balise tête entrez la ligne de code :

Cette entrée indique au navigateur (** ceci est expliqué dans le cours !) de mettre à l'échelle correctement le contenu de la page. pour l'appareil que vous utilisez.
Bien qu'en fait, une telle entrée dans le navigateur ne dit absolument rien. Il s’agit d’un « appel » aux moteurs de recherche.
Mais ils sont déjà très « jaloux » de la présence/absence d’une telle entrée dans le tag tête, surtout ces derniers temps. Vérifié!

Cependant, il faut dire que les navigateurs modernes sur les appareils mobiles semblent avoir appris à lire « les lettres des autres ».

**Par exemple. Après avoir testé cette ligne de code, je l'ai ajoutée à inadapté page du site Web, et … … … . Et puis je l'ai rapidement retiré !

Après avoir vérifié son affichage sur le smartphone, j'ai constaté que le navigateur du smartphone produisait un message « d'horreur », c'est-à-dire : a montré la PLEINE TAILLE de la page, offrant la possibilité long défilement horizontal.

Nouvel attribut pour les balises img"srcset"« HTML 4.01 » ne fonctionne pas dans la version testée !

Permettez-moi de vous rappeler et surtout de souligner que je n'ai fait AUCUNE requête aux médias. Essais !

Exemples d'entrées de tableau CSS

Tout d’abord, quelles (?) propriétés CSS ont été testées et comment (?) elles ont fonctionné.

taille de l'arrière-plan de la propriété : couverture ; Il vaut mieux NE PAS utiliser . Les dessins sont « coupés », c'est-à-dire aller au-delà des écrans des moniteurs. Il faut effectuer un zoom arrière pour les voir dans leur intégralité.

Et vice versa!

propriété taille d'arrière-plan : contenir ; fonctionne très bien! Dans tous les navigateurs ! Idéal pour " centres" dessins. Il les adapte parfaitement à n’importe quelle taille de moniteur.

De même.

La même propriété background-size: contain; a travaillé EXCELLENT pour " latéral» des dessins, c'est-à-dire gauche droite. Je l'ai essayé!

Les images latérales étaient affichées via des balises portée, en leur donnant du flottement : à gauche ou à droite, mais LA CHOSE IMPORTANTE !
L'essentiel est que l'image soit affichée en arrière-plan sur 2 espaces insécables, donnant au texte une taille égale à la hauteur de l'image de fond (** en réduisant la taille du texte, l'image est réduite proportionnellement, sans distorsion).

Les diagrammes de sortie sont ci-dessous.

 

5. Pied de page

Dans le pied de page, nous placerons des informations sur les droits d'auteur, des boutons de réseaux sociaux et un lien e-mail :

Mon blog © 2016 Écrivez une lettre $(".nav-toggle").on("click", function())( $("#menu").toggleClass("active"); ));

6. Styles CSS généraux

Styles généraux, réinitialiser les styles du navigateur par défaut :

*, *:after, *:before ( box-sizing: border-box; padding: 0; margin: 0; transition: .5s easy-in-out; /* ajouter des transitions fluides pour tous les éléments de la page */ ) ul ( style de liste : aucun ; ) a ( décoration de texte : aucun ; contour : aucun ; ) img ( affichage : bloc ; largeur : 100 % ; ) h1, h2, h3, h4, h5, h6 ( famille de polices : " Playfair Display" ; poids de la police : normal ; espacement des lettres : 1 px ; ) corps (famille de police : "Open Sans", arial, sans-serif ; taille de la police : 14 px ; hauteur de ligne : 1 ; couleur : #373737 ; background: #f7f7f7; ) /* ajout d'un nettoyage de flux pour tous les conteneurs contenant des éléments enfants enveloppés à l'intérieur */ header:after, .container:after, footer:after, .widget-posts-list li:after, #subscribe:after ( content: ""; display: table; clear: two; ) /* classe de style qui contrôle la largeur du conteneur de grille */ .container ( margin: 0 auto; width: 100%; max-width: 960px; padding: 0 15px ; )

7. Styles pour l'en-tête et son contenu (largeur : 100 % ; arrière-plan : blanc ; ombre de la boîte : 3px 3px 1px rgba(0,0,0,.05); remplissage : 15px 0 ; marge inférieure : 30px ; position : relatif; ) /* logo */ .logo ( affichage : bloc ; flotteur : gauche ; ) .logo span ( couleur : blanc ; affichage : bloc en ligne ; largeur : 30 px ; hauteur : 30 px ; hauteur de ligne : 30 px ; bordure -rayon : 50 % ; marge : 5px 0 ; alignement du texte : centre ; ombre du texte : 2px 2px 1px rgba(0,0,0,.4); .logo span:nth-child(impair) (arrière-plan : #EF5A42; ) .logo span:nth-child(even) ( arrière-plan : #F8B763 ; ) /* menu */ #menu ( float : right ; ) #menu li ( display : inline-block ; margin-right : 30px ; ) #menu a ( couleur : #111 ; transformation du texte : majuscules ; espacement des lettres : 1px ; poids de la police : 600 ; affichage : bloc ; hauteur de ligne : 40px ; ) #menu a:hover ( couleur : #EF5A42 ; ) #menu li:last-child ( margin-right: 0; ) /* formulaire de recherche */ #searchform ( float : right ; margin-left : 46px ; display : inline-block ; position : relative ; ) #searchform input ( largeur : 170 px ; float : gauche ; bordure : aucune ; padding-left : 10px ; hauteur : 40px ; débordement caché; contour : aucun ; couleur : #9E9C9C ; style de police : italique ; ) Bouton #searchform (arrière-plan : transparent ; hauteur : 40 px ; bordure : aucune ; position : absolue ; droite : 10 px ; couleur : #EF5A42 ; curseur : pointeur ; taille de police : 18 px ; ) #entrée du formulaire de recherche : focus ( contour : 2 px solid #EBEBE3; ) /* bouton bascule de menu qui apparaît à une largeur de 768 px */ .nav-toggle ( affichage : aucun ; position : relative ; flottant : droite ; largeur : 40 px ; hauteur : 40 px ; marge gauche : 20 px ; arrière-plan : #EF5A42 ; curseur : pointeur ; ) .nav-toggle span (affichage : bloc ; position : absolue ; haut : 19 px ; gauche : 8 px ; droite : 8 px ; hauteur : 2 px ; arrière-plan : blanc ; ) .nav-toggle span : avant , .nav-toggle span:after ( contenu : " " ; position : absolue ; affichage : bloc ; gauche : 0 ; largeur : 100 % ; hauteur : 2px ; arrière-plan : blanc ; ) .nav-toggle span:before ( haut : -10px; ) .nav-toggle span:after ( bottom: -10px; ) /* une classe qui sera ajoutée au menu supérieur lorsque vous cliquez sur le bouton et affichera le menu caché */ #menu.active ( max- hauteur : 123 px ; ) 8. Styles pour le bloc de contenu principal /* conteneur de gauche */ .posts-list ( margin-bottom : 30px ; largeur : 64 % ; flotteur : gauche ; ) /* bloc pour l'article */ .post ( margin-bottom: 35px; ) .post-content p ( line-height: 1.5; padding-bottom: 1em; ) .post-image ( margin-bottom: 30px; ) .category (marge-bottom: 15px; ) .category a (color: #F8B763; text-transform: majuscule; ) .post-title ( margin-bottom: 12px; font-size: 26px; ) /* bloc avec le " continuer la lecture des boutons et boutons de réseaux sociaux */ .post-footer ( border-top : 1px solid #EBEBE3 ; border-bottom : 1px solid #EBEBE3 ; position : relative ; margin-top : 15px ; ) .more-link ( position : relative ; affichage : bloc en ligne ; taille de police : 10 px ; transformation du texte : majuscule ; couleur : blanc ; hauteur de ligne : 44 px ; remplissage : 0 22 px ; arrière-plan : #3C3D41 ; espacement des lettres : 0. 1em; espace blanc : nowrap ; ) .more-link:after ( contenu : " " ; affichage : bloc ; position : absolue ; largeur : 0 ; hauteur : 0 ; haut : 0 ; droite : 0 ; bordure : transparente solide ; largeur de bordure : 22px 18px ; bordure -left-color : #3C3D41 ; transformation : traduireX(100 %); ) .post-social (position : absolue ; gauche : auto ; haut : 50 % ; droite : 0 ; alignement du texte : droite ; transformation : traduireY(- 50 % ); remplissage : 0 ; taille de police : 12 px ; ) .post-social a ( affichage : bloc en ligne ; marge gauche : 8 px ; couleur : #F8B763 ; largeur : 25 px ; hauteur : 25 px ; hauteur de ligne : 23px; text-align: center; border-radius: 50%; border: 1px solid; ) 9. Styles pour la colonne latérale /* conteneur de droite */ side ( width: 33%; float: right; ) /* bloc pour widgets */ .widget ( remplissage : 20px 15px ; arrière-plan : blanc ; taille de la police : 13px ; marge inférieure : 30px ; ombre de la boîte : 3px 3px 1px rgba(0,0,0,.05); ) .widget- titre (taille de police : 18 px ; remplissage : 10 px ; marge inférieure : 20 px ; alignement du texte : centre ; bordure : 2px solide #F8B763 ; ombre de la boîte : 3px 3px 0 0 #F8B763 ; ) .widget-category-list li ( bordure inférieure : 1px solide #EBEBE3 ; remplissage : 10px 0 ; couleur : #c6c6c6 ; style de police : italique ; ) .widget-category-list li:last-child ( border-bottom : none ; ) .widget-category-list li a ( couleur : #626262 ; marge-droite : 6px ; style de police : normal ; ) .widget- liste de catégories li a:avant ( contenu : "\f105" ; affichage : bloc en ligne ; famille de polices : " FontAwesome " ; marge droite : 10px ; couleur : #c6c6c6 ; ) .widget-posts-list li ( bordure -top : 1px solide #EBEBE3 ; remplissage : 15px 0 ; ) .widget-posts-list li:nth-child(1) ( border-top : none ; ) .post-image-small ( largeur : 30 % ; float : gauche; marge-droite: 15px; ) .widget-post-title ( float: left; ) /* formulaire d'abonnement */ #subscribe ( position: relative; largeur: 100%; remplissage: 15px 0; ) #subscribe input ( width : 100 % ; affichage : bloc ; flottant : gauche ; bordure : 2px solide #EBEBE3 ; remplissage : 0 0 0 10px ; hauteur : 40 px ; position : relative ; contour : aucun ; couleur : #9E9C9C ; style de police : italique ; ) Bouton #abonnement ( remplissage : 0 15px ; arrière-plan : transparent ; hauteur : 40px ; bordure : aucune ; position : absolue ; droite : 0 ; couleur : #EF5A42 ; curseur : pointeur ; taille de police : 18px ; ) #entrée d'abonnement : focus Bouton + (arrière-plan : #EF5A42 ; Couleur blanche; ) 10. Styles de pied de page

Nous divisons le pied de page du site en trois colonnes égales :

Pied de page ( remplissage : 30px 0 ; arrière-plan : #3C3D41 ; couleur : blanc ; ) .footer-col ( largeur : 33,3333333333 % ; float : gauche ; ) .footer-col a ( couleur : blanc ; ) .footer-col:last- enfant (text-align: right; ) .social-bar-wrap ( text-align: center; ) .social-bar-wrap a ( padding: 0 7px; font-size: 18px; )

11. Requêtes multimédias @media (max-width : 768px) ( /* afficher le bouton pour basculer la navigation supérieure */ .nav-toggle ( display: block; ) header ( padding: 10px 0; ) /* masquer le menu supérieur , annulez l'habillage, positionnez-le en le déplaçant à la hauteur de l'en-tête du site */ #menu ( max-height : 0 ; background : white ; float : none ; position : absolue ; overflow : caché ; top : 63px ; right : 0 ; left: 0; margin : 0; padding: 0; z-index: 3; ) /* donne aux éléments de la liste une forme de bloc afin qu'ils soient situés les uns en dessous des autres */ #menu li ( display: block; text- align: center; border-bottom: 1px solid # EBEBE3; margin-right: 0; ) /* annuler le retour à la ligne des colonnes gauche et droite, définir leur largeur à 100% */ .posts-list, apart ( width: 100 %; float: none; ) .widget-post-title ( font -size: 1.5em; ) ) @media (max-width: 480px) ( /* annuler l'habillage du logo et aligner au centre */ .logo ( float: none; margin: 0 auto 15px; display: table; ) .logo span ( margin: 0 2px; ) /* positionne le menu à la hauteur augmentée de l'en-tête */ #menu ( top : 118px; ) /* positionner le formulaire de recherche à gauche */ #searchform ( float: left; margin-left: 0; ) /* supprimer les bordures supérieure et inférieure et aligner le bouton au centre */ .post-footer ( border- top : aucun ; border-bottom : aucun ; text-align : center ; ) /* annuler le positionnement des boutons des réseaux sociaux */ .post-social ( position : static ; text-align : center ; transform : none ; margin-top : 20px; ) .widget- post-title ( font-size: 1.2em; ) /* annuler le retour à la ligne pour les colonnes de pied de page */ .footer-col ( float: none; margin-bottom: 20px; width: 100%; text -align: center; ) . footer-col:last-child ( text-align: center; margin-bottom: 0; ) ) 12. Script pour le menu mobile

Le code jQuery que nous avons précédemment ajouté au balisage de la page avant la balise de fermeture est chargé d'afficher et de masquer le menu supérieur lorsque vous cliquez sur le bouton (la hauteur du menu passe de zéro à égale à son contenu) :

$(".nav-toggle").on("click", function())( $("#menu").toggleClass("active"); ));