ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ вСрстки сайтов: ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ вСрстки сайта – ΠΊΠ°ΠΊΠΈΠ΅ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ способы Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ?

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ вСрстки сайта – ΠΊΠ°ΠΊΠΈΠ΅ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ способы Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ?

ΠžΡ‚ Π°Π²Ρ‚ΠΎΡ€Π°: сСгодня количСство Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… шаблонов Π² сСти ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ»ΠΎΡΡŒ. Бпособов вСрстки сущСствуСт достаточно ΠΌΠ½ΠΎΠ³ΠΎ, поэтому Π΄Π°Π²Π°ΠΉΡ‚Π΅ разбСрСмся с Π½ΠΈΠΌΠΈ, Π° Ρ‚Π°ΠΊΠΆΠ΅ с Ρ‚ΠΈΠΏΠΎΠ²Ρ‹ΠΌΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ.

Π“ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ Π² сСти

ΠŸΡ€ΠΎΡ‰Π΅ всСго ΠΈΠ·ΡƒΡ‡Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ вСрстки сайта с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ сСрвисов, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ бСсплатно ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹, Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Π½Ρ‹Π΅ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌΠΈ. Π”Π°ΠΆΠ΅ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² сСгодня Π² сСти ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ, поэтому Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π° Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ Π² Ρ‚ΠΎΠΌ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΌ ΠΌΠ°ΠΊΠ΅Ρ‚Π΅, ΠΊΠ°ΠΊ вставлСн слайдСр ΠΈ Ρ‚.Π΄. Π­Ρ‚ΠΎ Π½Π΅ΠΏΠ»ΠΎΡ…ΠΎΠΉ способ самому ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ вСрсткС, вСдь Π²Ρ‹ смотритС Π½Π° Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΈ собираСтС ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΎΠΏΡ‹Ρ‚.

Ѐиксированная вСрстка сайта

Π”ΠΎ Π½Π΅Π΄Π°Π²Π½ΠΈΡ… ΠΏΠΎΡ€ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ сайтов Π²Π΅Ρ€ΡΡ‚Π°Π»ΠΎΡΡŒ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΊ. Π’ Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ ΠΆΠ΅ оТидаСтся постСпСнный ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ Π½Π° Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π³ΠΎΡ€Π°Π·Π΄ΠΎ Π±ΠΎΠ»Π΅Π΅ ΡƒΠ΄ΠΎΠ±Π½ΠΎ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. ΠŸΡ€ΠΈ фиксированной вСрсткС Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ основных Π±Π»ΠΎΠΊΠΎΠ² Π·Π°Π΄Π°ΡŽΡ‚ΡΡ ΠΈ Π±ΠΎΠ»Π΅Π΅ Π½Π΅ ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΏΡ€ΠΈ малСнькой ΡˆΠΈΡ€ΠΈΠ½Π΅ ΠΎΠΊΠ½Π° появляСтся Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Π°Ρ полоса ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ. На Π±ΠΎΠ»ΡŒΡˆΠΈΡ… экранах содСрТимоС ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚ ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒΡΡ ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠ΅Π»ΠΊΠΎ.

Как ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, фиксированныС сайты Π΄Π΅Π»Π°ΡŽΡ‚ Ρ‚Π΅, ΠΊΠΎΠΌΡƒ Π½Π΅ Π½ΡƒΠΆΠ΅Π½ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Ρ‚Ρ€Π°Ρ„ΠΈΠΊ. Если ΠΆΠ΅ ΠΎΠ½ Π½ΡƒΠΆΠ΅Π½, компания ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ сайта. Π’Π°ΠΊΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π° ΠΏΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΌΠ½ΠΎΠ³ΠΈΠ΅. Ѐиксированный шаблон – самый простой ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вСрстки сайта.

НапримСр, ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Π°Ρ ΡΠ΅Ρ‚ΡŒ Π’ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π΅. НС Π·Π°ΠΌΠ΅Ρ‡Π°Π»ΠΈ Π»ΠΈ Π²Ρ‹, Ρ‡Ρ‚ΠΎ ΠΊΠ°ΠΊ Π½ΠΈ ΠΊΡ€ΡƒΡ‚ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π± ΠΈ Π½Π΅ измСняй ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΎΠΊΠ½Π°, Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ сайта Π½Π΅ ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ? ВсС ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ТСстко прописаны. Но ΠΏΡ€ΠΈ этом ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Π°Ρ ΡΠ΅Ρ‚ΡŒ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½Π° ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Ρ‚ΡŒ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ интСрфСйс ΠΈ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, поэтому Π’ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ Π²Π΅Ρ€ΡΠΈΡŽ для ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚ΠΎΠ² ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½ΠΎΠ².

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠΉ курс ΠΏΠΎ вСрсткС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта с нуля!

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ соврСмСнныС сайты Π½Π° HTML5 ΠΈ CSS3

Π£Π·Π½Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

Π Π΅Π·ΠΈΠ½ΠΎΠ²Ρ‹ΠΉ шаблон

Π”Ρ€ΡƒΠ³ΠΎΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вСрстки сайта – Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²Ρ‹ΠΉ шаблон. Π’ Ρ‚Π°ΠΊΠΎΠΌ случаС Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ основных ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ² Π·Π°Π΄Π°ΡŽΡ‚ΡΡ Π² ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°Ρ…. Π­Ρ‚ΠΎ Π΄Π°Π΅Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π±Π»ΠΎΠΊΠ°ΠΌ Ρ€Π°ΡΡ‚ΡΠ³ΠΈΠ²Π°Ρ‚ΡŒΡΡ Π² зависимости ΠΎΡ‚ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΎΠΊΠ½Π°. НапримСр, Π·Π°Π΄Π°Π² Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ΅ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π² 30% ΠΎΡ‚ всСго Ρ‚Π΅Π»Π° страницы, ΠΏΡ€ΠΈ ΠΎΠΊΠ½Π΅ Π² 1000 пиксСлСй ΠΎΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒ 300px. Если ΠΌΡ‹ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΠΌ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΎΠΊΠ½Π° Π²Π΄Π²ΠΎΠ΅, Ρ‚ΠΎ Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒΡΡ ΠΈ боковая ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°. Из-Π·Π° этого ΠΌΠΎΠ³ΡƒΡ‚ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡƒΡ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ всС содСрТимоС вовсС пСрСстанСт ΠΏΠΎΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ Π² Π±Π»ΠΎΠΊ.

РСзиновая вСрстка нСмыслима Π±Π΅Π· свойств max-width ΠΈ min-width. Они ΠΎΠ·Π½Π°Ρ‡Π°ΡŽΡ‚ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡŒΠ½ΡƒΡŽ ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ² соотвСтствСнно. ΠŸΡ€ΠΈΠΌΠ΅Ρ€:

#container{ max-width: 1440px; min-width: 520px; width: 100% }

#container{

max-width: 1440px;

min-width: 520px;

width: 100%

}

Π§Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ эта запись? Π‘Π»ΠΎΠΊ с ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ β€œcontainer” Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ свои Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²Ρ‹Π΅ свойства Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… Π·Π°Π΄Π°Π½Π½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ пиксСлов. Π’ΠΎ Π΅ΡΡ‚ΡŒ, Ссли ΠΎΠΊΠ½ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° станСт большС 1440 пиксСлСй, Ρ‚ΠΎ Π±Π»ΠΎΠΊ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒΡΡ Π² фиксированный. Π’ΠΎ ΠΆΠ΅ самоС ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π΄ΠΎ ΠΌΠ΅Π½Π΅Π΅ Ρ‡Π΅ΠΌ 520 пиксСлСй. Π’ этом случаС появится Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Π°Ρ полоса ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ, Π½ΠΎ Π»ΡƒΡ‡ΡˆΠ΅ ΡƒΠΆΠ΅ ΠΎΠ½Π°, Ρ‡Π΅ΠΌ Π½Π΅Ρ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹ΠΉ тСкст. Если эти свойства Π½Π΅ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ, Ρ‚ΠΎ Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²Ρ‹ΠΉ шаблон Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚ΡΠ½ΡƒΡ‚ΡŒΡΡ всСгда. К ΠΊΠ°ΠΊΠΈΠΌ послСдствиям это ΠΌΠΎΠΆΠ΅Ρ‚ привСсти?

ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²ΡŒΡ‚Π΅, Π²Ρ‹ зашли Π½Π° сайт с мобильного Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π°. Π‘Π΅Π· min-width всС Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΌΠ΅Π»ΠΊΠΎ, Ρ‡Ρ‚ΠΎ просто Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΎ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠΌ Ρ‡Ρ‚Π΅Π½ΠΈΠΈ. На Π±ΠΎΠ»ΡŒΡˆΠΈΡ… экранах с Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ Π±ΠΎΠ»Π΅Π΅ 1600 пиксСлСй Π² ΡˆΠΈΡ€ΠΈΠ½Ρƒ, содСрТимоС ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°Π·Π±ΠΈΡ‚ΡŒΡΡ Π½Π° ΠΎΡ‡Π΅Π½ΡŒ Π΄Π»ΠΈΠ½Π½Ρ‹Π΅ строки. Π§ΠΈΡ‚Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠΉ тСкст ΠΌΠΎΠΆΠ½ΠΎ, Π½ΠΎ слоТно. Как Π²Π°Ρ€ΠΈΠ°Π½Ρ‚, ΠΌΠΎΠΆΠ½ΠΎ для Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€ΠΎΠ² Ρ€Π°Π·Π±ΠΈΠ²Π°Ρ‚ΡŒ тСкст Π½Π° Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, Π½ΠΎ это ΡƒΠΆΠ΅ основы адаптивности.

Адаптивный шаблон

ΠΠ΄Π°ΠΏΡ‚ΠΈΠ²Π½ΡƒΡŽ вСрстку ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° основС ΡƒΠΆΠ΅ ΠΈΠΌΠ΅ΡŽΡ‰Π΅ΠΉΡΡ фиксированной ΠΈΠ»ΠΈ Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²ΠΎΠΉ. Она рСализуСтся ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… media-ΠΊΠΎΠΌΠ°Π½Π΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ΡΡ Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ стилСй. Π’ Π½ΠΈΡ… Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΎΠΊΠ½Π°, ΠΏΡ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ Π½ΠΎΠ²Ρ‹Π΅ стили. НапримСр, для большого Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ свои стили, Π° для мобильников – свои. И ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Ρ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° Π½ΡƒΠΆΠ½ΠΎ. Π­Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠ΄ΠΎΠ±Π½ΠΎ. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΌΠ΅Π΄ΠΈΠ°-запроса:

@media only screen and (max-width: 980px){ Css-ΠΏΡ€Π°Π²ΠΈΠ»Π° }

@media only screen and (max-width: 980px){

Css-ΠΏΡ€Π°Π²ΠΈΠ»Π°

}

Π£ΠΊΠ°Π·Π°Π½Π½Ρ‹Π΅ Π² Ρ„ΠΈΠ³ΡƒΡ€Π½Ρ‹Ρ… скобках свойства Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Ρ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΡˆΠΈΡ€ΠΈΠ½Π° ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° станСт мСньшС 980 пиксСлСй.

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠΉ курс ΠΏΠΎ вСрсткС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта с нуля!

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ соврСмСнныС сайты Π½Π° HTML5 ΠΈ CSS3

Π£Π·Π½Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

ΠŸΡ€ΠΎΡΡ‚Π΅ΠΉΡˆΠΈΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΌΠΎΠΆΠ½ΠΎ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ достаточно быстро. Если Ρƒ вас ΡΠ΅Ρ€ΡŒΠ΅Π·Π½Ρ‹ΠΉ шаблон со слайдСрами, сайдбарами, ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌΠΈ ΠΈ Π²ΠΈΠ΄Π΅ΠΎΡ€ΠΎΠ»ΠΈΠΊΠ°ΠΌΠΈ, Ρ‚ΠΎ придСтся ΠΏΠΎΡ‚Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π³ΠΎΡ€Π°Π·Π΄ΠΎ большС Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, прописывая стили для Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ ΠΈ ΠΏΠ°Ρ€Π°Π»Π»Π΅Π»ΡŒΠ½ΠΎ тСстируя всС это.

Π‘ΠΎΠ»Π΅Π΅ простой Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ – ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π² ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΉ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ шаблон ΠΈ Π½Π° Π΅Π³ΠΎ основС ΠΏΠΎΠΏΡ‹Ρ‚Π°Ρ‚ΡŒΡΡ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ.

Π‘Ρ‚ΠΎΠΈΡ‚ Π»ΠΈ самому ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ Ρ‚Π°ΠΊΠΎΠΉ Ρ‚Π΅Ρ…Π½ΠΈΠΊΠ΅? Если Π²Ρ‹ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊ, Ρ‚ΠΎ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ сСгодня Ρ‚Π°ΠΊΠΈΡ… шаблонов трСбуСтся всС большС. ΠžΠ±ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ этому Π½Π΅ Ρ‚Π°ΠΊ ΡƒΠΆ ΠΈ слоТно, Π·Π°Ρ‚ΠΎ ΠΏΠΎΡ‚ΠΎΠΌ Π²Ρ‹ смоТСтС Π³ΠΎΡ€Π΄ΠΎ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ: β€œΠ£ мСня ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»Π°ΡΡŒ адаптивная вСрстка сайта”. ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π½Π°ΠΌ ΠΏΠΎΠ΄Π°ΡŽΡ‚ Π·Π°Ρ€ΡƒΠ±Π΅ΠΆΠ½Ρ‹Π΅ ΠΊΠΎΠ»Π»Π΅Π³ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ массово пСрСходят Π½Π° Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Π΅ сайты. Π’Π°ΠΊΠΆΠ΅ Π² основах адаптивности ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Ρ€Π°Π·Π±ΠΈΡ€Π°Ρ‚ΡŒΡΡ Π²Π΅Π±-мастСрам, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π΅Π΄ΡƒΡ‚ свои ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ адаптивности – наш ΠΏΠΎΡ€Ρ‚Π°Π». Π—Π°ΠΌΠ΅Ρ‚ΡŒΡ‚Π΅, ΠΊΠ°ΠΊ мСняСтся содСрТимоС ΠΏΡ€ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΎΠΊΠ½Π°. Π”Ρ€ΡƒΠ³ΠΎΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ – рСсурс ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΈ W3C. ΠŸΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅, ΠΊΠ°ΠΊ мСняСтся Π΄ΠΈΠ·Π°ΠΉΠ½.

Рис. 1. ΠŸΡ€ΠΈ сильном ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΎΠΊΠ½Π° Π΄ΠΈΠ·Π°ΠΉΠ½ сайта автоматичСски помСнялся.

ВСрстка Ρ‚Π°Π±Π»ΠΈΡ†Π°ΠΌΠΈ

ВсС это врСмя ΠΌΡ‹ Π³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΈ ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ… вСрстки сайта с div-Π±Π»ΠΎΠΊΠ°ΠΌΠΈ. Как ΠΌΡ‹ Π·Π½Π°Π΅ΠΌ, этот Ρ‚Π΅Π³ создаСт Π±Π»ΠΎΡ‡Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ любоС содСрТимоС. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ стилСй Π±Π»ΠΎΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊ ΡƒΠ³ΠΎΠ΄Π½ΠΎ. Но стоит ΡƒΠΏΠΎΠΌΡΠ½ΡƒΡ‚ΡŒ ΠΈ ΠΎΠ± ΡƒΠΆΠ΅ ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠ΅ΠΌ сСгодня способС вСрстки с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†.

Π•Π³ΠΎ ΡΡƒΡ‚ΡŒ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ вся структура сайта ΠΏΠΎΠΌΠ΅Ρ‰Π΅Π½Π° Π² ΠΎΠ΄Π½Ρƒ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ. Она ΠΈΠΌΠ΅Π΅Ρ‚ Π½ΡƒΠΆΠ½ΠΎΠ΅ количСство строк ΠΈ ячССк. Π’Π°Π±Π»ΠΈΡ†Π° позволяСт Π»Π΅Π³ΠΊΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ…ΠΎΡ‚ΡŒ 100 Ρ€Π°Π·Π½Ρ‹Ρ… ячССк ΠΈ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π² Π½ΠΈΡ… Π½ΡƒΠΆΠ½ΠΎΠ΅ содСрТимоС, Π»Π΅Π³ΠΊΠΎ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΈ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вСрстки ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это Π±Ρ‹Π»ΠΎ Π±Ρ‹ Π½Π΅ Ρ‚Π°ΠΊ просто.

Но вСрстка Ρ‚Π°Π±Π»ΠΈΡ†Π°ΠΌΠΈ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΠ΄ΠΈΠ½ ΠΎΠ³Ρ€ΠΎΠΌΠ½Ρ‹ΠΉ минус – Π½Π΅Π²Π΅Ρ€ΠΎΡΡ‚Π½ΡƒΡŽ Π³Ρ€ΠΎΠΌΠΎΠ·Π΄ΠΊΠΎΡΡ‚ΡŒ ΠΊΠΎΠ΄Π°. Π‘ΡƒΠ΄ΠΈΡ‚Π΅ сами – каТдая ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Π°Ρ ячСйка Π΄ΠΎΠ»ΠΆΠ½Π° Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ своим Ρ‚Π΅Π³ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ, Π² свою, ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ, Π΄ΠΎΠ»ΠΆΠ΅Π½ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π² Ρ‚Π΅Π³Π΅ ряда Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹. Π‘ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ Π²Π΅Π±-стандарты стрСмятся ΠΊ простотС ΠΈ компактности. ИмСнно поэтому сСгодня вСрстка Ρ‚Π°Π±Π»ΠΈΡ†Π°ΠΌΠΈ примСняСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° Ρƒ нас Π½Π° сайтС Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΅ΡΡ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹. Π‘Π°ΠΌΠ° сСтка (скСлСт шаблона) строится с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π±Π»ΠΎΠΊΠΎΠ².

И всС-Ρ‚Π°ΠΊΠΈ Π΅Ρ‰Π΅ Π½Π΅ ΠΎΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠΌΠ΅Ρ€Π»Π° Π² сСти табличная вСрстка сайта. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ – сам ЯндСкс, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ свСрстан ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΊ. На самом Π΄Π΅Π»Π΅ Π½Π° Ρ‚Π°Π±Π»ΠΈΡ†Π°Ρ… ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ красивыС ΠΈ слоТныС сайты, просто Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° Π±ΡƒΠ΄Π΅Ρ‚ Π³Ρ€ΠΎΠΌΠΎΠ·Π΄ΠΊΠΎΠΉ.

Рис. 2. ЯндСкс смотрится достаточно красиво. ΠŸΡ€ΠΈ этом ΠΎΠ½ свСрстан Ρ‚Π°Π±Π»ΠΈΡ†Π΅ΠΉ.

HTML5

Π’ послСдниС Π³ΠΎΠ΄Ρ‹ большС шаблонов Π½Π°Ρ‡Π°Π»ΠΈ Π΄Π΅Π»Π°Ρ‚ΡŒ Π½Π° Π½ΠΎΠ²ΠΎΠΉ вСрсии HTML. Π’ Ρ‡Π΅ΠΌ ΠΈΡ… ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅? Для Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ каркаса ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π½Π΅ пустыС div (ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎ смыслу Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ Π·Π½Π°Ρ‡Π°Ρ‚), Π° ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ Π½ΠΎΠ²Ρ‹Π΅ сСмантичСскиС Ρ‚Π΅Π³ΠΈ. НапримСр, Ρ‚Π΅Π³
. Π‘ Π΅Π³ΠΎ появлСниСм большС Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ div с ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ β€œheader”, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ, ΠΎΠΏΡΡ‚ΡŒ ΠΆΠ΅, Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ сСмантичСского смысла.

НовыС Ρ‚Π΅Π³ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π»ΡƒΡ‡ΡˆΠ΅ ΠΈΠ½Π΄Π΅ΠΊΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ сайт, Π΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎ понятнСС для Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² ΠΈ людСй с ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΌΠΈ возмоТностями. Пока Ρ‡Ρ‚ΠΎ Π΅Ρ‰Π΅ Π½Π΅ всС воспользовались этими прСимущСствами. ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ вСрстки сайта Π½Π° HTML5 Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ Π² ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅. Если Π²Π°ΠΌ слоТно самому Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½ΠΎΠ²Ρ‹Ρ… сСмантичСских Ρ‚Π΅Π³ΠΎΠ², Ρ‚ΠΎ умСстно ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ шаблон ΠΈ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ, ΠΊΠ°ΠΊ Π² Π½Π΅ΠΌ всС Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ.

Π˜Ρ‚Π°ΠΊ, ΠΌΡ‹ рассмотрСли основныС способы вСрстки сайтов. Π’Π°ΠΊΠΆΠ΅ Π±Ρ‹Π»ΠΎ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ΠΎ нСсколько ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ², Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ собствСнными Π³Π»Π°Π·Π°ΠΌΠΈ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊΠΈΠ΅ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ отличия Π΅ΡΡ‚ΡŒ Ρƒ Ρ€Π°Π·Π½Ρ‹Ρ… Ρ‚Π΅Ρ…Π½ΠΈΠΊ. На этом Π½Π° сСгодня всС, Π° Π²Ρ‹ Π½Π΅ Π·Π°Π±Ρ‹Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠ΄ΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒΡΡ Π½Π° обновлСния нашСго Π±Π»ΠΎΠ³Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Π²Π°Ρ‚ΡŒ ΠΎ сайтостроСнии большС.

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠΉ курс ΠΏΠΎ вСрсткС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта с нуля!

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ соврСмСнныС сайты Π½Π° HTML5 ΠΈ CSS3

Π£Π·Π½Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

PSD to HTML

ВСрстка сайта Π½Π° HTML5 ΠΈ CSS3 с нуля

Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ

ΠΏΡ€Π°Π²ΠΈΠ»Π° вСрстки ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ², ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ вСрстки сайтов HTML, CSS, JavaScript, Π²ΠΈΠ΄Ρ‹ вСрстки сайтов

Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Π½Π΅Β ΠΈΠΌΠ΅ΡŽΡ‚ Π΅Π΄ΠΈΠ½ΠΎΠ³ΠΎ стандарта ΠΈΒ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎ-Ρ€Π°Π·Π½ΠΎΠΌΡƒ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈΒ Ρ‚ΠΎΡ‚Β ΠΆΠ΅ элСмСнт. Π—Π°Π΄Π°Ρ‡Π° Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠ°Β β€” ΠΏΡ€ΠΎΡ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ сайт во всСх популярных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…: Google Chrome, Yandex, Opera, Safari, FireFox, Edge, Ρ‡Ρ‚ΠΎΠ±Ρ‹ вСрстка Π½Π΅Β Ρ€Π°ΡΡΡ‹ΠΏΠ°Π»Π°ΡΡŒ Π½ΠΈΒ Π²Β ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ·Β Π½ΠΈΡ….

Π’Β Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… случаях для этого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π²Π΅Π½Π΄ΠΎΡ€Π½Ρ‹Π΅ прСфиксы ΠΏΠ΅Ρ€Π΅Π΄ Π½ΠΎΠ²Ρ‹ΠΌΠΈ CSS-свойствами. НапримСр, нС всС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ врСмя срабатывания Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π§Ρ‚ΠΎΠ±Ρ‹ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ этот вопрос, ставят прСфикс — приставку. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ создаСтся ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ΅ свойство ΠΏΠΎΠ΄ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΉ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€, и вмСсто Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ transition-duration:0.76s, ΠΌΡ‹Β ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ:

-webkit-transition-duration:0.76s;
-moz-transition-duration:0.76s;
-o-transition-duration:0.76s;
-ms-transition-duration:0.76s;
Π³Π΄Π΅ webkit, moz, o, msΒ β€” это прСфикс.

ΠŸΠΎΒ ΡΡƒΡ‚ΠΈΒ β€” это Π·Π»ΠΎ и основная ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π° раздувания CSS-Ρ„Π°ΠΉΠ»ΠΎΠ². Π’Π΅Π΄ΡŒ для каТдого нСстандартного ΠΈΒ Π½ΠΎΠ²ΠΎΠ³ΠΎ свойства Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ Π΅Ρ‰Ρ‘ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ 4 строки со всСми прСфиксами.

ΠΠ²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ этот процСсс ΠΌΠΎΠΆΠ½ΠΎ Ρ‡Π΅Ρ€Π΅Π· AutoprefixerΒ β€” это ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°, которая проставляСт прСфиксы Ρ‚Π°ΠΌ, Π³Π΄Π΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ. Π’ΠΎΒ Π΅ΡΡ‚ΡŒ Π²Β Π½Π΅Π΅ загруТаСтся Ρ„Π°ΠΉΠ» бСз прСфиксов, Π°Β Π½Π°Β Π²Ρ‹Ρ…ΠΎΠ΄Π΅ получаСтся Ρ„Π°ΠΉΠ» с прСфиксами.

ΠΠΎΒ Π±Ρ‹Π²Π°ΡŽΡ‚ свойства, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Β ΠΎΠ΄Π½ΠΎΠΌ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. Π’Β Ρ‚Π°ΠΊΠΈΡ… ситуациях Π½Π°Π΄ΠΎ Π»ΠΈΠ±ΠΎ ΠΎΡ‚ΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒΡΡ ΠΎΡ‚Β Π½ΠΈΡ…, Π»ΠΈΠ±ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ с максимальной ΠΎΡΡ‚ΠΎΡ€ΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ, ΠΈΒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ссли ΠΎΠ½ΠΈ нС сильно ΠΈΠ·ΠΌΠ΅Π½ΡΡŽΡ‚ внСшний Π²ΠΈΠ΄ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ².

РаньшС ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠΌΒ Π’Π— для Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠ° Π±Ρ‹Π»ΠΎ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎΠ΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ сайта в старых вСрсиях Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ². БСйчас это Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π΅Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½ΠΎ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° под старыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠ΄ΠΎΡ€ΠΎΠΆΠ°Π΅Ρ‚ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚, Π°Β ΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΠΈΠΌΠΈ Π΅Π΄ΠΈΠ½ΠΈΡ†Ρ‹, и с каТдым Π³ΠΎΠ΄ΠΎΠΌ Ρ‚Π°ΠΊΠΈΡ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ становится всС мСньшС. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Π²ΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒΡΡ Π²Β Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ под это ΡΡ‚Π°Ρ€ΡŒΠ΅Β β€” нСцСлСсообразно, Π³ΠΎΡ€Π°Π·Π΄ΠΎ Π²Π°ΠΆΠ½Π΅Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ сайт ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ отобраТался в соврСмСнных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ….

Π›ΡƒΡ‡ΡˆΠΈΠΉ способ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ кроссбраузСрности — ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ всС популярныС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹, Π·Π°ΠΉΡ‚ΠΈ на сайт ΠΈΒ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ Π²Π΅Π΄Π΅Ρ‚ сСбя вСрстка. Но для ускорСния процСсса, Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠΈ ΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ сСрвисами. НСкоторыС ΠΈΠ·Β Π½ΠΈΡ… Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ по балльной систСмС, анализируя CSS и выставляя ΠΎΡ†Π΅Π½ΠΊΡƒ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ свойству Π²Β ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. НапримСр, сСрвис Can IΒ use ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, ΠΊΠ°ΠΊΠΎΠ΅ свойство CSS, тСхнология, Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΈΒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ поддСрТиваСтся Π½Π°Β ΠΊΠ°ΠΊΠΈΡ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…. ΠžΡ†Π΅Π½ΠΊΠ° выдаётся Π²Β ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, Π²Β Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… вСрстка нС сломаСтся. Π’ΠΎΒ Π΅ΡΡ‚ΡŒ ΠΏΡ€ΠΈΒ Π²Ρ‹Π±ΠΎΡ€ΠΊΠ΅ Π²Β ΠΌΠΈΠ»Π»ΠΈΠΎΠ½ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊ ΠΈΒ ΠΎΡ†Π΅Π½ΠΊΠ΅ 99% Π½Π°Β Can IΒ use, Π±ΡƒΠ΄Π΅Ρ‚ 10 000 Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊ со старыми вСрсиями Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ нС увидят Π½Π°ΡˆΡƒ красоту.

ΠžΡΠ½ΠΎΠ²Ρ‹ HTML5 ΠΈΠ»ΠΈ учимся Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ Π½Π° HTML5

ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ Вас, Π΄ΠΎΡ€ΠΎΠ³ΠΈ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΠΈ Π±Π»ΠΎΠ³Π°. БСгодня ΠΌΡ‹ Π½Π΅ ΠΌΠ½ΠΎΠ³ΠΎ ΡƒΠ·Π½Π°Π΅ΠΌ ΠΎ основах Π½ΠΎΠ²ΠΎΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅ Π²Π΅Π± страниц HTML5. А Ρ‚Π°ΠΊ ΠΆΠ΅ ΡƒΠ·Π½Π°Π΅ΠΌ ΠΊΠ°ΠΊ наш ΡƒΠΆΠ΅ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ сайт пСрСвСсти Π² этот Π½ΠΎΠ²Ρ‹ΠΉ HTML язык.

Π₯ΠΎΡ‡Ρƒ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ оказываСтся Ρ‚ΡƒΡ‚ здСсь Π½ΠΈΡ‡Π΅Π³ΠΎ слоТного Π½Π΅Ρ‚. Π― Π΄Π°Π²Π½ΠΎ Ρ…ΠΎΡ‚Π΅Π» пСрСвСсти свой Π±Π»ΠΎΠ³ с div вёрстки Π² HTML5, Π½ΠΎ Π΄ΡƒΠΌΠ°Π» Ρ‡Ρ‚ΠΎ это Π±ΡƒΠ΄Π΅Ρ‚ слоТно Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ основных Π½ΠΎΠ²Ρ‹Ρ… Ρ‚Π΅Π³ΠΎΠ² я Π½Π΅ Π·Π½Π°Π». А Π²ΠΎΡ‚ ΠΊΠΎΠ³Π΄Π° взялся Π·Π° это Π΄Π΅Π»ΠΎ Ρ‚ΠΎ оказалось, Ρ‡Ρ‚ΠΎ это ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Π½Π΅ слоТно.

Π’Π°ΠΊ Ρ‡Ρ‚ΠΎ ΠΈ Π’Π°ΠΌ ΡΠΎΠ²Π΅Ρ‚ΡƒΡŽ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π½Π°Β HTML5, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ всё Π½ΠΎΠ²ΠΎΠ΅ практичСски всСгда Π»ΡƒΡ‡ΡˆΠ΅, ΠΈ Π΅Ρ‰Ρ‘ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅ Π½Π° ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΡ‰Π΅ ΠΈ ΡƒΠ΄ΠΎΠ±Π½Π΅Π΅.

ВСрстка div (старая)

Π”Ρ€ΡƒΠ·ΡŒΡ, сначала я Π½Π°Ρ‡Π½Ρƒ с ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ², Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ… всСгда понятнСС. Как Π’Ρ‹ ΡƒΠΆΠ΅ догадались, Ρ‡Ρ‚ΠΎ я ΠΏΠ΅Ρ€Π΅Π²Ρ‘Π» свой Π±Π»ΠΎΠ³ Π½Π° HTML5, ΠΈ ΠΏΠΎ этому Π²ΠΎΠ·ΡŒΠΌΡ‘ΠΌ Π΅Π³ΠΎ ΠΊΠ°ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, рассмотрим ΡΡ‚Π°Ρ€ΡƒΡŽ вёрстку с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ DIV ΠΈ посмотри ΠΊΠ°ΠΊ выглядит новая Π½Π° HTML5.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span>

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-RU">
 <head profile="http://gmpg.org/xfn/11">

<!-- ......... -->

</head>
 <body>
 <!-- Π¨Π°ΠΏΠΊΠ° сайта -->

<div>

<!-- Навигация -->

<div>
 <!-- ......... -->
 </div>
 <!-- ΠšΠΎΠ½Π΅Ρ† Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ -->

</div><!-- ΠšΠΎΠ½Π΅Ρ† шапки сайта -->

<div><!-- основной блок -->

<div><!-- Π±Π»ΠΎΠΊ Ρ‚Π°ΠΌ Π³Π΄Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ посты -->

<!-- Начало поста -->
 <div>
 <!-- ......... -->
 </div>
 <!-- Начало поста -->

<div> <!-- Π±Π»ΠΎΠΊ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ -->
 <!-- ......... -->
 </div>

</div>
 </div>

<div><!-- Π€ΡƒΡ‚Π΅Ρ€ сайта -->
 <!-- ......... -->
 </div>

</body>
</html>

Как Π²ΠΈΠ΄ΠΈΡ‚Π΅ ΠΈΠ· ΠΊΠΎΠ΄Π° Ρ‡Ρ‚ΠΎ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ div Π·Π°Π΄Π°Π½ свой класс. НапримСр div с классом headerInner β€” это Π±Π»ΠΎΠΊ шапки сайта ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ описан Π² стилях CSS, соотвСтствСнно div с классом wrapper β€” это основной Π±Π»ΠΎΠΊ Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ находятся 2 Π±Π»ΠΎΠΊΠ° с записями ΠΈ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΎΠΉ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ классы colLeft β€” Π»Π΅Π²Ρ‹ΠΉ Π±Π»ΠΎΠΊ с постами ΠΈΒ colRight правая ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°. И ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅ я Π½Π΅ Π·Π°Π±Ρ‹Π» Π·Π° Π±Π»ΠΎΠΊ Ρ„ΡƒΡ‚Π΅Ρ€Π° ΠΏΠΎΠ΄ классом footerInner.

Π’Π°ΠΊΠΈΠΌ Π½Π΅ слоТным ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Ρƒ нас ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»Π°ΡΡŒ сСтка ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π΄Π°Π»Π΅Π΅ Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½Ρ‹ΠΉ сайт. Или ΠΆΠ΅ шаблон Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠ°ΠΊ Π½Π° ΠΌΠΎΡ‘ΠΌ Π±Π»ΠΎΠ³Π΅.

А Π²ΠΎΡ‚ сСйчас Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π΄Π°Π½Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ пСрСвСсти Π² HTML5, Π½ΠΎ ΠΊΠ°ΠΊ оказываСтся Ρ‡Ρ‚ΠΎ этот Π½ΠΎΠ²Ρ‹ΠΉ стандарт принёс с собой Π½Π΅ ΠΌΠ°Π»ΠΎ Π½ΠΎΠ²Ρ‹Ρ… Ρ‚Π΅Π³ΠΎΠ², ΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅Π΄ Ρ‚Π΅ΠΌ ΠΊΠ°ΠΊ пСрСвСсти наш ΠΊΠΎΠ΄.

Π’Π΅Π³ΠΈ HTML5

Π‘Π½Π°Ρ‡Π°Π»Π° Π΄Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим Ρ‚Π΅Π³ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ, Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами основныС:

<header> β€” Π΄Π°Π½Π½Ρ‹ΠΉ Ρ‚Π΅Π³ Π·Π°Π΄Π°Ρ‘Ρ‚ Π²Π΅Ρ€Ρ…Π½ΡŽΡŽ Ρ‡Π°ΡΡ‚ΡŒ сайта, ΠΈΠ»ΠΈ ΡˆΠ°ΠΏΠΊΡƒ сайта. Π’ Π½Π΅Π³ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ мСню, Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ, ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части сайта.

<section> β€” Π΄Π°Π½Π½Ρ‹ΠΉ Ρ‚Π΅Π³ задаётся для Π²Π°ΠΆΠ½Ρ‹Ρ… Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ² Π½Π° сайтС, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ для Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ ΡΡ‚Π°Ρ‚ΡŒΠΈ, ΠΈΠ»ΠΈ ΠΆΠ΅ Π²Π°ΠΆΠ½Ρ‹Π΅ ΠΌΠΎΠΌΠ΅Π½Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π’Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ.

<article> β€” ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π² этом Ρ‚Π΅Π³Π΅ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒΡΡ Ρ€Π°Π·Π½ΠΎΠΎΠ±Ρ€Π°Π·Π½Ρ‹Π΅ записи Π½Π° сайтС, новости, Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρ‹. НапримСр посты Π½Π° Π±Π»ΠΎΠ³Π΅.

<aside> β€” задаётся для Π±ΠΎΠΊΠΎΠ²Ρ‹Ρ… ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Π½Π° сайтС (Π‘Π°ΠΉΡ‚Π±Π°Ρ€Π°). НС Π²Π°ΠΆΠ½ΠΎ Π³Π΄Π΅ ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ находится слСва ΠΈΠ»ΠΈ справа.

<footer> β€” Π² этот Ρ‚Π΅Π³ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ Π½ΠΈΠ· Π’Π°ΡˆΠ΅Π³ΠΎ сайта (Π€ΡƒΡ‚Π΅Ρ€)

<hgroup> β€” Π² Π΄Π°Π½Π½Ρ‹ΠΉ Ρ‚Π΅Π³ входят Π³Ρ€ΡƒΠΏΡ‹ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² сайтов, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ <h3>.

<nav> β€” Π΄Π°Π½Π½Ρ‹ΠΉ Ρ‚Π΅Π³ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя всю Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ Π½Π° сайтС (мСню).

Π₯ΠΎΡ‡Ρƒ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ эти всС Ρ‚Π΅Π³ΠΈ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π·Π°ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒΡΡ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ссли это Ρ‚Π΅Π³Β <article> ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅Ρ‚ΡŒ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Ρ‚Π΅Π³Β </article> ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅.

Π’ΠΎΡ‚ ΠΌΡ‹ ΠΈ рассмотрСли самыС основныС Ρ‚Π΅Π³ΠΈ. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ посмотрим Ρ‚Π΅Π³ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π½Π΅ часто ΠΈΠ»ΠΈ ΠΆΠ΅ Π² зависимости ΠΎΡ‚ Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊΠΈ сайта:

<audio> β€” Π΄Π°Π½Π½Ρ‹ΠΉ Ρ‚Π΅Π³ Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ Π°ΡƒΠ΄ΠΈΠΎ Π½Π° сайтС.

<canvas> β€” Π΄Π°Π½Π½Ρ‹ΠΉ Ρ‚Π΅Π³ создаёт Π½Π° страницС ΠΏΠΎΠ»Π΅ Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΊ Ρ€Π°Π·Π½Ρ‹ΠΌ элСмСнтам Ρ€Π°Π·Π½Ρ‹Π΅ эффСкты с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ скриптов.

<menu> β€” Π² этот Ρ‚Π΅Π³ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π²Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ список мСню, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ul li.

<time> β€” сюда входят врСмя ΠΈ Π΄Π°Ρ‚Π° Π½Π° сайтС. НапримСр Π½Π° Π±Π»ΠΎΠ³Π°Ρ… Π΄Π°Ρ‚Π° размСщСния поста.

<video> β€” вставляСт Π²ΠΈΠ΄Π΅ΠΎ Π½Π° страницу.

<wbr> β€” Π΄Π°Π½Π½Ρ‹ΠΉ Ρ‚Π΅Π³ пСрСносит слово Π½Π° Π½ΠΎΠ²ΡƒΡŽ строку Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. АналогичСн старому Ρ‚Π΅Π³Ρƒ <br>.

ЕстСствСнно измСнились Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚Π΅Π³ΠΈ Π² HTML5, Π³Ρ€ΡƒΠ±ΠΎ говоря ΠΊΡ€ΡƒΡ‚ΠΎ измСнился doctype. Π’ΠΎΡ‚ ΠΊΠ°ΠΊ ΠΎΠ½ выглядит Π²Β HTML4:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

А Π²ΠΎΡ‚ ΠΊΠ°ΠΊ ΠΎΠ½ выглядит ΠΏΠΎ Π½ΠΎΠ²ΠΎΠΌΡƒ:

<!doctype html>

Ну ΠΊΠ°ΠΊ Π’Π°ΠΌ Ρ€Π°Π·Π½ΠΈΡ†Π°? πŸ™‚ По ΠΌΠΎΠ΅ΠΌΡƒ сущСствСнная. Π’Π°ΠΊ ΠΆΠ΅ Π΅Ρ‰Ρ‘ ΠΏΡ€ΠΎΡ‰Π΅ стал Ρ‚Π΅Π³ <html>. Он Π±Ρ‹Π» Ρ‚Π°ΠΊΠΎΠΉ:

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-RU">

А стал Ρ‚Π°ΠΊΠΎΠΉ:

<html lang=ru>

Всё, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΡ‹ Π·Π½Π°Π΅ΠΌ практичСски всС измСнСния ΠΈ ΠΌΠΎΠΆΠ΅ΠΌ смСло ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΊ вёрсткС ΠΏΠΎΠ΄ HTML5.

ВСрстка (новая)

ΠŸΠ΅Ρ€Π΅Π΄ Ρ‚Π΅ΠΌ ΠΊΠ°ΠΊ ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΡ‚ΡŒ ΠΊ вёрсткС Π½Π°ΠΌ ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ‚Π΅Π³Π°ΠΌΠΈ <head> ΠΈΒ </head> Π½ΡƒΠΆΠ½ΠΎ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ простой ΠΊΠΎΠ΄ для IE, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ этот «супСр» Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚ Π½ΠΎΠ²Ρ‹Ρ… Ρ‚Π΅Π³ΠΎΠ²:

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Π•Ρ‰Ρ‘ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π½ΡƒΠΆΠ½ΠΎ всС Π½ΠΎΠ²Ρ‹Π΅ Ρ‚Π΅Π³ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΡ‡Π½Ρ‹ΠΌΠΈ. ΠŸΡ€ΠΎΡΡ‚ΠΎ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ этот ΠΊΠΎΠ΄ Π² любоС мСсто Π² Π’Π°ΡˆΠ΅ΠΌ Ρ„Π°ΠΉΠ»Π΅ CSS:

footer, nav, header, section,Β aside {

display: block

}

Всё, ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ шаг Π³ΠΎΡ‚ΠΎΠ². Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ посмотри Π½Π° Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΉ ΡƒΠΆΠ΅ HTML5 ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρƒ мСня получился, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ Ρ€Π°Π·Π±Π΅Ρ€Ρ‘ΠΌ Π΅Π³ΠΎ:

<!DOCTYPE html>
<html lang="ru">
<head>

<!-- ......... -->

</head>
<body>

<!-- Π¨Π°ΠΏΠΊΠ° сайта -->

<header>

<!-- Навигация -->

<nav>
<!-- ......... -->
</nav>
<!-- ΠšΠΎΠ½Π΅Ρ† Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ -->

</header><!-- ΠšΠΎΠ½Π΅Ρ† шапки сайта -->

<section><!-- основной блок -->

<aside><!-- Π±Π»ΠΎΠΊ Ρ‚Π°ΠΌ Π³Π΄Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ посты -->
<!-- Начало поста -->
<article>
<!-- ......... -->
</article>
<!-- Начало поста -->

<aside> <!-- Π±Π»ΠΎΠΊ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ -->
<!-- ......... -->
</aside>

</div>
</section>

<footer><!-- Π€ΡƒΡ‚Π΅Ρ€ сайта -->
<!-- ......... -->
</footer>

</body>
</html>

Как Π²ΠΈΠ΄ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ я просто Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ div помСнял Π½Π° Π½ΠΎΠ²Ρ‹Π΅ Ρ‚Π΅Π³ΠΈ, ΠΎΠΏΡΡ‚ΡŒ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡŽΡΡŒ Ρ‚ΡƒΡ‚ Π½ΠΈΡ‡Π΅Π³ΠΎ слоТного Π½Π΅Ρ‚, Π³Π»Π°Π²Π½ΠΎΠ΅ Π·Π½Π°Ρ‚ΡŒ ΠΊΠ°ΠΊΠΎΠΉ класс Π·Π° ΠΊΠ°ΠΊΠΎΠΉ участок Π½Π° сайтС ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚.

ΠžΠΏΡΡ‚ΡŒ ΠΏΡ€ΠΈΠ²Π΅Π΄Ρƒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€. Π’ΠΎΠ·ΡŒΠΌΡ‘ΠΌ ΡˆΠ°ΠΏΠΊΡƒ сайта. Π’ старой вёрсткС ΠΎΠ½Π° ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°Π»Π°ΡΡŒ Ρ‚Π΅Π³ΠΎΠΌ div  с классом headerInner β€”Β <div id=Β»headerInnerΒ»>. Как я писал Π²Ρ‹ΡˆΠ΅, Ρ‡Ρ‚ΠΎ этот класс Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ Π±Π»ΠΎΠΊ шапки сайта. А сСйчас, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ Π·Π½Π°Π΅ΠΌ ΠΊΠ°ΠΊΠΎΠΉ Ρ‚Π΅Π³ ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π·Π° ΡˆΠ°ΠΏΠΊΡƒ сайта Π² HTML5 (<header>) ΠΌΠΎΠΆΠ΅ΠΌ смСло Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ вмСсто div Β Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с Ρ‚Π°ΠΊΠΈΠΌ ΠΆΠ΅ классом. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Ρƒ нас ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

<header>

И Π½Π΅ Π·Π°Π±Ρ‹Π²Π°Π΅ΠΌ ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Ρ‚Π΅Π³Β </header>, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ div.

Π˜Π΄Ρ‘ΠΌ дальшС, Π° Ρƒ нас Π³Π»Π°Π²Π½Ρ‹ΠΉ Π±Π»ΠΎΠΊ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. Π—Π½Π°Ρ‡ΠΈΡ‚ это Π³Π»Π°Π²Π½Ρ‹ΠΉ Π±Π»ΠΎΠΊ ΠΈ Π΅Π³ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΠΎΠΊΡ€ΡƒΠΆΠΈΡ‚ΡŒ Ρ‚Π΅Π³ΠΎΠΌΒ <section>. Π’ старой вёрсткС этот Π³Π»Π°Π²Π½Ρ‹ΠΉ Π±Π»ΠΎΠΊ выглядСл Ρ‚Π°ΠΊΒ <div id=Β»wrapperΒ»>, Π° Π² HTML5 Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π²ΠΎΡ‚ Ρ‚Π°ΠΊΒ <section id=Β»wrapperΒ»>. И ΠΎΠΏΡΡ‚ΡŒ ΠΆΠ΅ Π½Π΅ Π·Π°Π±ΡƒΠ΄ΡŒΡ‚Π΅ ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Ρ‚Π΅Π³ ΠΈ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ старый div.

ΠŸΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°ΠΉΡ‚Π΅ΡΡŒ Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΆΠ΅ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ° ΠΈ Π² Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ‚Π΅Π³Π°Ρ… Π½Π° сайтС. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ я ΠΏΠ΅Ρ€Π΅Π²Ρ‘Π» свой Π±Π»ΠΎΠ³ Π² HTML5. И Π±Ρ‹Π» приятно ΡƒΠ΄ΠΈΠ²Π»Ρ‘Π½ Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ это совсСм Π½Π΅ слоТно.

Π’Ρ‹Π²ΠΎΠ΄

Π”Ρ€ΡƒΠ·ΡŒΡ, Π·Π° Π’Π°ΠΌΠΈ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ Π½Π° HTML5 ΠΈΠ»ΠΈ Π½Π΅ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ. Но ΠΌΠΎΡ‘ ΠΌΠ½Π΅Π½ΠΈΠ΅ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΎΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½ΠΎ, Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π·Π°ΡΠΈΠΆΠΈΠ²Π°Ρ‚ΡŒΡΡ Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΠΌΠ΅ΡΡ‚ΡŒ, Π΄Π²ΠΈΠ³Π°ΠΉΡ‚Π΅ΡΡŒ Π²ΠΏΠ΅Ρ€Ρ‘Π΄, ΠΈΠ·ΡƒΡ‡Π°ΠΉΡ‚Π΅ Π½ΠΎΠ²ΠΎΠ΅. Π’Π΅Π΄ΡŒ Π½Π΅ просто Ρ‚Π°ΠΊ ΠΏΡ€ΠΈΠ΄ΡƒΠΌΡ‹Π²Π°ΡŽΡ‚ эти Β«ΡˆΡ‚ΡƒΠΊΠΈΒ». НС ΠΏΡ€Π°Π²Π΄Π° Π»ΠΈ? А эта новая вёрстка прямо Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ своими Π½ΠΎΠ²Ρ‹ΠΌΠΈ Ρ‚Π΅Π³Π°ΠΌΠΈ Π³Π΄Π΅ ΠΈ какая Ρ‡Π°ΡΡ‚ΡŒ находится Π½Π° сайтС. НС говоря ΡƒΠΆ ΠΎ div вёрсткС, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ всё сливаСтся. Ну Π½Π΅ просто ΠΆΠ΅ Ρ‚Π°ΠΊ это всё, особСнно для поисковиков, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Ρ‚ΠΎΡ‡Π½ΠΎ Π±ΡƒΠ΄ΡƒΡ‚ Π·Π½Π°Ρ‚ΡŒ Π³Π΄Π΅ ΠΈ Ρ‡Ρ‚ΠΎ ΠΈΠ½Π΄Π΅ΠΊΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ названия Ρ‚Π΅Π³ΠΎΠ² ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚. Π― ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ Π½Π΅ знаю Π±Π΅Ρ€ΡƒΡ‚ Π»ΠΈ это Π²ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ поисковики, Π½ΠΎ всё ΠΆΠ΅.

ΠžΠΏΡΡ‚ΡŒ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ Π’Π°ΠΌ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ Π’Π°ΠΌ Π½Π° Π½ΠΎΠ²ΡƒΡŽ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΡŽ.

Π’ΠΎΡ‚ ΠΈ всё Ρ‡Ρ‚ΠΎ Ρ…ΠΎΡ‚Π΅Π»ΠΎΡΡŒ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΏΠΎ этому ΠΏΠΎΠ²ΠΎΠ΄Ρƒ. Π”Ρ€ΡƒΠ·ΡŒΡ, Ссли Ρƒ Вас Ρ‡Ρ‚ΠΎ Ρ‚ΠΎ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒΡΡ, ΡΠΏΡ€Π°ΡˆΠΈΠ²Π°ΠΉΡ‚Π΅ Π² коммСнтариях, ΠΈ я ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠΌΠΎΠ³Ρƒ πŸ™‚ Π”ΠΎ скорых встрСч.

10 ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… Π·Π°ΠΌΠ΅Ρ‡Π°Π½ΠΈΠΉ ΠΈ совСтов

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π½ΠΈΠΆΠ΅ написаны с использованиСм соглашСния ΠΏΠΎ имСнованию сСлСкторов Π‘Π­Πœ, прСпроцСссора Sass ΠΈ ΡˆΠ°Π±Π»ΠΎΠ½ΠΈΠ·Π°Ρ‚ΠΎΡ€Π° Jade.


Code-review для вСрстки часто ΠΏΡ€Π΅Π½Π΅Π±Ρ€Π΅Π³Π°ΡŽΡ‚, отчасти, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΈΠ·-Π·Π° слоТившСгося стСрСотипа, Ρ‡Ρ‚ΠΎ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ Π½ΡƒΠΆΠ½ΠΎ, Π½Π°Π±Ρ€Π°Π² побольшС Π²ΠΎΠ·Π΄ΡƒΡ…Π°, Π·Π°ΠΆΠΌΡƒΡ€ΠΈΠ²ΡˆΠΈΡΡŒ ΠΈ Ρ€Π°ΡΠΊΠΈΠ΄Ρ‹Π²Π°ΡΡΡŒ Ρ…Π°ΠΊΠ°ΠΌΠΈ ΠΈ костылями, ΠΏΠΎΠΊΠ° Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ достигнута Ρ‚Π° самая нСуловимая ΠΊΡ€ΠΎΡΡΠ±Ρ€Π°ΡƒΠ·Π΅Ρ€Π½ΠΎΡΡ‚ΡŒ. А ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ Ρ‡ΡƒΠΆΡƒΡŽ вСрстку β€” Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΡƒ с ΠΊΡ€Π΅ΠΏΠΊΠΈΠΌΠΈ Π½Π΅Ρ€Π²Π°ΠΌΠΈ ΠΈ достаточным запасом ΠΌΠ΅Π΄ΠΈΠΊΠ°ΠΌΠ΅Π½Ρ‚ΠΎΠ².

ΠœΡ‹ ΠΏΠΎΠΎΠ±Ρ‰Π°Π»ΠΈΡΡŒ с Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌΠΈ Π² NoveoΒ ΠΈ сошлись Π²ΠΎ ΠΌΠ½Π΅Π½ΠΈΠΈ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΆΠ½ΠΎ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ тСстированиС, Π½ΠΎ ΠΈ Ρ€Π΅Π²ΡŒΡŽ. ОсобСнно Π²Π°ΠΆΠ½ΠΎ Ρ€Π΅Π²ΡŒΡŽΠΈΡ‚ΡŒ стаТСров ΠΈ Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ², Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅Π΄ΠΎΡ‡Π΅Ρ‚Ρ‹ ΠΈ Π½Π΅ Π΄Π°Ρ‚ΡŒ ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π²Ρ€Π΅Π΄Π½Ρ‹ΠΌ ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡ΠΊΠ°ΠΌ. Π’Π°ΠΊ, Π² ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ ΠΌΠΎΠΌΠ΅Π½Ρ‚ Ρƒ Π½Π°ΡˆΠΈΡ… ΠΊΠΎΠ»Π»Π΅Π³ накопилась нСбольшая статистика ΠΏΠΎ замСчаниям ΠΈ совСтам, Π° ΠΊΠ°ΠΊ слСдствиС появилась эта ΡΡ‚Π°Ρ‚ΡŒΡ. НиТС Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅ описаны 10 Ρ‚ΠΈΠΏΠΈΡ‡Π½Ρ‹Ρ… ошибок Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠΎΠ²-Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ² ΠΈ совСты ΠΏΠΎ ΠΈΡ… ΡƒΡΡ‚Ρ€Π°Π½Π΅Π½ΠΈΡŽ.

Ошибка 1: НС ΠΏΡ€ΠΎΠ΄ΡƒΠΌΠ°Π½Π° структура ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π½ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠΈ

Π”ΠΎΠ²ΠΎΠ»ΡŒΠ½ΠΎ часто Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠ°ΠΌ ставят Π·Π°Π΄Π°Ρ‡ΠΈ постранично ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ Ρ‚ΠΎΠΆΠ΅ постранично. Π­Ρ‚ΠΎ ΠΈΠ½ΠΎΠ³Π΄Π° ΠΏΠΎΡ€ΠΎΠΆΠ΄Π°Π΅Ρ‚ иллюзии, Ρ‡Ρ‚ΠΎ Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΌΠ°Π»ΠΎ ΠΈ вся вСрстка Π±ΡƒΠ΄Π΅Ρ‚ прСкрасно сСбя Ρ‡ΡƒΠ²ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π² 2–3 ΠΏΠ°ΠΏΠΊΠ°Ρ…, Π° Ссли Π½Π΅Ρ‚, Ρ‚ΠΎ всСгда найдСтся врСмя ΠΏΠΎΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ структуру. Но Ρ‡Π΅ΠΌ большС Π±Π»ΠΎΠΊΠΎΠ² ΠΈ страниц свСрстано, Ρ‡Π΅ΠΌ Π±Π»ΠΈΠΆΠ΅ ΠΊ Ρ€Π΅Π»ΠΈΠ·Ρƒ ΠΈ Ρ‡Π΅ΠΌ большС страниц / ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΡƒΠΆΠ΅ ΠΈΠ½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΎ, Ρ‚Π΅ΠΌ слоТнСС Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ.

ΠŸΡ€Π΅Π΄Π»Π°Π³Π°ΡŽ с ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ ΠΆΠ΅ ΠΊΠΎΠΌΠΌΠΈΡ‚Π° ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΡƒΡŽ структуру. Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ структуры ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π½ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΡ‹ использовали Π½Π° Π·ΠΈΠΌΠ½Π΅ΠΉ стаТировкС 2016:

Π˜Π΄Ρ‘Ρ‚ загрузка… Если Π½ΠΈΡ‡Π΅Π³ΠΎ Ρ‚Π°ΠΊ ΠΈ Π½Π΅ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΠ»ΠΎΡΡŒ, Ρ‚ΠΎ посмотритС ΠΏΡ€ΠΈΠΌΠ΅Ρ€ здСсь.

БовсСм Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π² точности ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ эту структуру, достаточно ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ряд ΠΌΠΎΠΌΠ΅Π½Ρ‚ΠΎΠ²:

1. Π’ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρ‹, Π±Π»ΠΎΠΊΠΈ ΠΈ страницы ΠΆΠΈΠ²ΡƒΡ‚ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ

Π’ Jade Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ шаблон, Π±Π»ΠΎΠΊ карусСли ΠΈ страница Π΄ΠΎΠ»ΠΆΠ½Ρ‹ находится Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… дирСкториях. Π’Π°ΠΊ ΠΈΡ… Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΡ‰Π΅ Π½Π°ΠΉΡ‚ΠΈ. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, сборщику ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° для компиляции слСдуСт Β«ΡΠΊΠ°Ρ€ΠΌΠ»ΠΈΠ²Π°Ρ‚ΡŒΒ» Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠ°ΠΏΠΊΡƒ со страницами, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ Π·Π°ΡΠΎΡ€ΡΡ‚ΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π½ΡƒΡŽ ΠΏΠ°ΠΏΠΊΡƒ Π½Π΅Π½ΡƒΠΆΠ½Ρ‹ΠΌΠΈ HTML Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°ΠΌΠΈ для ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚.

Π’ scss ΠΎΠ±Ρ‰ΠΈΠ΅ стили Ρ‚ΠΈΠΏΠ° reset, ΠΈΠ»ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ², ΠΈΠ»ΠΈ Π»Π΅ΠΉΠ°ΡƒΡ‚Π° Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ уровня стоит Ρ‚Π°ΠΊΠΆΠ΅ Ρ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ ΠΎΡ‚ стилСй для страниц ΠΈ Π±Π»ΠΎΠΊΠΎΠ². Π’Π°ΠΊΠΆΠ΅ цСлСсообразно ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ всС Π² ΠΎΠ΄ΠΈΠ½ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, main.scss) ΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ этот Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² css. По ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°ΠΌ Ρ‚Π°ΠΊΠΈΡ… Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ нСсколько (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΈΠ·-Π·Π° ограничСния ΠΏΠΎ количСству сСлСкторов / вСсу css-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° Π² IE9 ΠΈΠ»ΠΈ для поставки спСцифичСских стилСй для Ρ€Π΅Π΄ΠΊΠΎ Π²ΡΡ‚Ρ€Π΅Ρ‡Π°ΡŽΡ‰ΠΈΡ…ΡΡ устройств ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ ΠΎΡ‚ основного Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°), Π½ΠΎ, ΠΊΠ°ΠΊ ΠΈ с Jade, Π½Π΅ стоит ΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ всС подряд.

2. Jade-Π±Π»ΠΎΠΊΠΈ = Π‘Π­Πœ-Π±Π»ΠΎΠΊΠΈ

Если Ρƒ вас нСбольшой ΠΎΠΏΡ‹Ρ‚ Ρ€Π°Π±ΠΎΡ‚Ρ‹ с ΡˆΠ°Π±Π»ΠΎΠ½ΠΈΠ·Π°Ρ‚ΠΎΡ€Π°ΠΌΠΈ, это Π΄Ρ€ΠΎΠ±Π»Π΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ слСгка Π½Π°ΠΏΡƒΠ³Π°Ρ‚ΡŒ, Π½ΠΎ Π½Π° самом Π΄Π΅Π»Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с большим количСством Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ² для ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Π³ΠΎΡ€Π°Π·Π΄ΠΎ ΡƒΠ΄ΠΎΠ±Π½Π΅Π΅, Ρ‡Π΅ΠΌ Π² ΠΎΠ΄Π½ΠΎΠΌ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅ с трСмя тысячами строк. Ничто Π½Π΅ ΠΌΠ΅ΡˆΠ°Π΅Ρ‚ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΡ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π² Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€ΠΈΠΈ, Ссли ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ большой. Π’Π°ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π»Π΅Π³ΠΊΠΎ ΠΏΠ΅Ρ€Π΅ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Β«ΠΈΠ½ΠΊΠ»ΡŽΠ΄ΠΈΡ‚ΡŒΒ» Π½Π° Ρ€Π°Π·Π½Ρ‹Π΅ страницы, Π° для ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² с Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ состояниями ΠΈ/ΠΈΠ»ΠΈ Ρ€Π°Π·Π½Ρ‹ΠΌ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, для ΠΊΠ½ΠΎΠΏΠΎΠΊ) ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ миксин, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π² качСствС Π²Ρ…ΠΎΠ΄Π½Ρ‹Ρ… ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ ΠΈΠ»ΠΈ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°.

Π’ ΠΈΡ‚ΠΎΠ³Π΅ Π² ΠΊΠΎΠ΄Π΅ index.jade ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… страниц Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ строчка, ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰Π°Ρ Π½Π° Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ шаблон, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, 1–2 Ρ‚Π΅Π³Π° Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ уровня, ΠΈΠ½ΠΊΠ»ΡŽΠ΄Ρ‹ ΠΈ Π²Ρ‹Π·ΠΎΠ² миксинов.

НапримСр:

extends ../0_base/_base.jade

block main
   Β .main.main--wide
Β Β Β      include ../1_blocks/banner.jade
3. Scss Π·Π΅Ρ€ΠΊΠ°Π»ΠΈΡ‚ Jade

Если Π² Jade-Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€ΠΈΠΈ blocks Π΅ΡΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚, Ρ‚ΠΎ стили для Π½Π΅Π³ΠΎ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π² Scss-Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€ΠΈΠΈ blocks Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅ с Ρ‚Π°ΠΊΠΈΠΌ ΠΆΠ΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ.

НапримСр, согласно структурС, ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ Π²Ρ‹ΡˆΠ΅, стили для jade/1_blocks/header.jade Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π»Π΅ΠΆΠ°Ρ‚ΡŒ Π² scss/3_blocks/header.scss, Π° Π½Π΅ Π³Π΄Π΅-Ρ‚ΠΎ Π΅Ρ‰Π΅. Если ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ этому простому ΠΏΡ€Π°Π²ΠΈΠ»Ρƒ, Ρ‚ΠΎ Π²Π½ΠΎΡΠΈΡ‚ΡŒ измСнСния Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠ΄ΠΎΠ±Π½ΠΎ всСм Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ Π½Π° ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅, Π΄Π°ΠΆΠ΅ Π½ΠΎΠ²Ρ‹ΠΌ.

Для Ρ‚Π΅Ρ…, ΠΊΠΎΠΌΡƒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π·Π°ΠΏΡƒΡˆΠΈΡ‚ΡŒ структуру ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π½ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠΈ сразу послС создания (Ρ‚.Π΅. ΠΊΠΎΠ³Π΄Π° большая Ρ‡Π°ΡΡ‚ΡŒ ΠΏΠ°ΠΏΠΎΠΊ пуста), напоминаю ΠΏΡ€ΠΎ сущСствованиС .gitkeep, Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π³ΠΈΡ‚Ρƒ Β«Π·Π°Ρ‚Ρ€Π΅ΠΊΠ°Ρ‚ΡŒΒ» Π²Π°ΡˆΡƒ ΠΏΡƒΡΡ‚ΡƒΡŽ Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€ΠΈΡŽ.

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ .gitkeep Π²ΠΎ всС пустыС ΠΏΠ°ΠΏΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этой ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹:

find . -type d -empty -not -path '*/\.*' -exec touch {}/.gitkeep \;

ПослС заполнСния ΠΏΠ°ΠΏΠΎΠΊ Π½Π΅ Π·Π°Π±ΡƒΠ΄ΡŒΡ‚Π΅ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ Π½Π΅Π½ΡƒΠΆΠ½Ρ‹Π΅ .gitkeep.

Ошибка 2: копипаста Π΅ΡΡ‚ΡŒ, ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠ΅Π² Π½Π΅Ρ‚

Π‘ копипастой Π½ΡƒΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ особСнно Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½Ρ‹ΠΌ: Π²Π΄ΡƒΠΌΡ‡ΠΈΠ²ΠΎ всС ΠΏΠ΅Ρ€Π΅Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒ, ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Β«ΠΏΠΎΠ΄ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Β» ΠΈ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ лишнСС. ΠžΠ΄Π½Π°ΠΆΠ΄Ρ‹ ΠΌΠ½Π΅ Π²ΡΡ‚Ρ€Π΅Ρ‚ΠΈΠ»ΠΎΡΡŒ:

<meta name="apple-mobile-web-app-title" content="AMC Walking Dead">

, ΠΏΡ€ΠΈ этом ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ <title> содСрТал ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Π΄Ρ€ΡƒΠ³ΡƒΡŽ строку :).

НС Π²Π°ΠΆΠ½ΠΎ, Π΄Π΅Π»Π°Π΅Ρ‚Π΅ Π²Ρ‹ Ρ€Π΅Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΈΠ· ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π°, ΠΏΠΎΠΊΠ° копипаста Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅Ρ€Π°Π±ΠΎΡ‚Π°Π½Π°, рядом с Π½Π΅ΠΉ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ с TODO, Ρ‡Ρ‚ΠΎΠ±Ρ‹:

  • Π½Π΅ Π·Π°Π±Ρ‹Ρ‚ΡŒ ΠΈ Π½Π΅ ΡƒΡ‚Π°Ρ‰ΠΈΡ‚ΡŒ этот кусок Π² ΠΏΡ€ΠΎΠ΄Π°ΠΊΡˆΠ½,
  • Π΄Π°Ρ‚ΡŒ ΠΏΠΎΠ½ΡΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠΌ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ, Ρ‡Ρ‚ΠΎ это Π½Π΅ ΠΎΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅,
  • Π΄Π°Ρ‚ΡŒ ΠΏΠΎΠ½ΡΡ‚ΡŒ Ρ€Π΅Π²ΡŒΡŽΠ΅Ρ€Ρƒ, Ρ‡Ρ‚ΠΎ этот ΠΊΠΎΠ΄ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½.

НапримСр:

<!-- TODO: change content attribute Β -->
<meta name="apple-mobile-web-app-title" content="AMC Walking Dead">
<!-- Β -->

ΠΠ°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΠ΅ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠΈ ΠΈΠ½ΠΎΠ³Π΄Π° ΠΏΡ€Π΅Π½Π΅Π±Ρ€Π΅Π³Π°ΡŽΡ‚ Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΡ‚Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ нСсколько ΠΌΠΈΠ½ΡƒΡ‚ ΠΈ ΠΏΠ΅Ρ€Π΅Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π°ΠΉΠ΄Π΅Π½Π½ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅. Π’Π°ΠΊ Π² scss ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ Π²Π΅Π½Π΄ΠΎΡ€Π½Ρ‹Π΅ прСфиксы, ΠΊΠΎΠ³Π΄Π° Π² сборку Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ автопрСфиксСр, мусорныС свойства ΠΈ Π΄Π°ΠΆΠ΅ пСрСопрСдСлСния Π² Ρ€Π°ΠΌΠΊΠ°Ρ… ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»Π°:

.block {
    font-size: 1.2 rem;
    …
    font-size: 18px;
}

ΠŸΡ€ΠΎ смСшиваниС ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠ² ΠΈ Ρ‚Π°Π±ΠΎΠ², ΠΎΠ΄ΠΈΠ½Π°Ρ€Π½Ρ‹Ρ… ΠΈ Π΄Π²ΠΎΠΉΠ½Ρ‹Ρ… ΠΊΠ°Π²Ρ‹Ρ‡Π΅ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π΄Π°ΠΆΠ΅ Π½Π΅ Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ β€” бСздумная копипаста Ρ€Π°Π½ΠΎ ΠΈΠ»ΠΈ ΠΏΠΎΠ·Π΄Π½ΠΎ принСсСт эти прСлСсти Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ (кстати, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ Π΅Π΄ΠΈΠ½Ρ‹ΠΉ ΡΡ‚ΠΈΠ»ΡŒ, ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ EditorConfig).

Π£ Π°Π²Ρ‚ΠΎΡ€ΠΎΠ² статСй Π΅ΡΡ‚ΡŒ Ρ‚Π°ΠΊΠΎΠΉ ΠΏΡ€ΠΈΠ΅ΠΌ β€” Π²Ρ‹Ρ‡ΠΈΡ‚ΠΊΠ°, ΠΊΠΎΠ³Π΄Π° написанный тСкст ΠΏΠ΅Ρ€Π΅Ρ‡ΠΈΡ‚Ρ‹Π²Π°ΡŽΡ‚ нСсколько Ρ€Π°Π·, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠΏΡƒΡ‰Π΅Π½Π½Ρ‹Π΅ ошибки ΠΈ ΠΏΠ΅Ρ€Π΅Ρ„Ρ€Π°Π·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ прСдлоТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠ»ΠΎΡ…ΠΎ Π·Π²ΡƒΡ‡Π°Ρ‚. Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎ ΠΏΡ€ΠΎΠ²ΠΎΠ΄ΠΈΡ‚ΡŒ Π²Ρ‹Ρ‡ΠΈΡ‚ΠΊΡƒ своСго ΠΊΠΎΠ΄Π° ΠΈ особСнно копипасты. Π•Ρ‰Π΅ Π² Π±ΠΎΡ€ΡŒΠ±Π΅ с копипастой Π² стилях ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΡ€ΠΈΠ³ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ csscomb.

Ошибка 3: Π±Π»ΠΎΠΊΠΈ Π²Π»ΠΈΡΡŽΡ‚ Π΄Ρ€ΡƒΠ³ Π½Π° Π΄Ρ€ΡƒΠ³Π°, ΠΎΠ΄Π½ΠΈ ΠΈ Ρ‚Π΅ ΠΆΠ΅ сСлСкторы Π²ΡΡ‚Ρ€Π΅Ρ‡Π°ΡŽΡ‚ΡΡ Π² Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… мСстах Π² scss

ВСликая сила ампСрсанда Π² Sass позволяСт ΠΏΠΈΡΠ°Ρ‚ΡŒ стили ΠΏΠΎ Π‘Π­Πœ ΠΈ Π΄Π΅Π»Π°Ρ‚ΡŒ это Π΅Ρ‰Π΅ нагляднСС. Π’Π°ΠΊΠΎΠΉ ΠΊΠΎΠ΄:

.block {
Β    font-size: 1.2rem;
Β    &--dark {
Β Β Β      background: #000;
Β    }
Β    &__element {
Β Β Β      text-aling: center;
Β Β Β      &--big {
Β Β Β Β Β Β       width: 100%;
Β Β Β      }
Β Β Β      .ie9 & {
Β Β Β Β Β        &::before {
Β Β Β Β Β Β Β          content: 'hello ie'
Β Β Β Β Β        }
Β Β Β      }
Β    }
}

Π‘ΡƒΠ΄Π΅Ρ‚ скомпилирован Π²:

.block {
Β    font-size: 1.2rem;
}

.block--dark {
Β    background: #000;
}

.block__element {
Β    text-aling: center;
}

.block__element--big {
Β    width: 100%;
}

.ie9 .block__element::before {
Β    content: "hello ie";
}

Когда Π΅ΡΡ‚ΡŒ Ρ‚Π°ΠΊΠΎΠΉ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ инструмСнт, Π΄Π°ΠΆΠ΅ Ρ€Π΅Ρ‡ΠΈ Π±Ρ‹Ρ‚ΡŒ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅ ΠΈ ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΈ стилСй для ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°. Если сСлСктор .block ΡƒΠΆΠ΅ написан Π² ΠΊΠ°ΠΊΠΎΠΌ-Ρ‚ΠΎ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅, Ρ‚ΠΎ Π² Π΄Ρ€ΡƒΠ³ΠΎΠΌ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅ Π΅Π³ΠΎ Π±Ρ‹Ρ‚ΡŒ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ. Π’ΡΡ‚Ρ€Π΅Ρ‚ΠΈΡ‚ΡŒΡΡ снова этот сСлСктор ΠΌΠΎΠΆΠ΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² мСдиазапросС (ΠΏΡ€ΠΈΡ‡Π΅ΠΌ, Π·Π° Ρ€Π΅Π΄ΠΊΠΈΠΌ ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ, мСдиазапрос Π΄ΠΎΠ»ΠΆΠ΅Π½ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π² этом ΠΆΠ΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅), ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎ мСдизапросах ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ Ρ‡ΡƒΡ‚ΡŒ ΠΏΠΎΠ·ΠΆΠ΅.

Π‘Π»ΠΎΠΊ β€” это ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ Π·Π½Π°Π΅Ρ‚ ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΡ… Π±Π»ΠΎΠΊΠ°Ρ… ΠΈ ΠΈΡ… располоТСнии.

Β«Π‘Π»ΠΎΠΊ β€” логичСски ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ нСзависимый ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ страницы, Π°Π½Π°Π»ΠΎΠ³ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Π² Web Components… ΠΠ΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΡŒ Π±Π»ΠΎΠΊΠΎΠ² обСспСчиваСт Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΈΡ… ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ использования, Π° Ρ‚Π°ΠΊΠΆΠ΅ удобство Π² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.Β» (источник)

Π’Π°ΠΊΠΎΠΉ ΠΊΠΎΠ΄ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡˆΠΈΠ±ΠΎΡ‡Π½Ρ‹ΠΌ, Ρ‚.ΠΊ. состояниС ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° влияСт Π½Π° элСмСнт Π² Π΄Ρ€ΡƒΠ³ΠΎΠΌ Π±Π»ΠΎΠΊΠ΅:

.block {
Β    &:hover .another-block__element {
Β Β Β      color: red;
Β    }
}

Если Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ Ρ‚Π°ΠΊ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ, Π·Π½Π°Ρ‡ΠΈΡ‚, Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ пошло Π½Π΅ Ρ‚Π°ΠΊ Π½Π° этапС имСнования, Π½ΡƒΠΆΠ½ΠΎ Π½Π΅Π·Π°ΠΌΠ΅Π΄Π»ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒΡΡ ΠΊ Jade ΠΈ ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ class Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Π±Π»ΠΎΠΊ Π±Ρ‹Π» нСзависимым. Если ΠΆΠ΅ Π·Π°ΠΏΠ»Π°Ρ‚ΠΊΠ° Π½ΡƒΠΆΠ½Π° срочно ΠΈ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π½Π° измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ Π½Π΅Ρ‚, Ρ‚ΠΎ ΠΎΡΡ‚Π°Π²ΡŒΡ‚Π΅ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ TODO Π² ΠΎΠ±ΠΎΠΈΡ… Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ…: Π² scss ΠΈ Π² jade.

Говоря ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π±Π»ΠΎΠΊ Π½Π΅ Π·Π½Π°Π΅Ρ‚ ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΡ… Π±Π»ΠΎΠΊΠ°Ρ…, хочСтся Π²ΠΊΡ€Π°Ρ‚Ρ†Π΅ ΡƒΠΏΠΎΠΌΡΠ½ΡƒΡ‚ΡŒ ΠΎΠ± ΠΎΠ΄Π½ΠΎΠΌ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΌ псСвдоклассС, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ постоянно Π·Π°Π±Ρ‹Π²Π°ΡŽΡ‚ Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΈ. ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²ΡŒΡ‚Π΅ Π»Π΅ΠΉΠ°ΡƒΡ‚ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ уровня: Π΅ΡΡ‚ΡŒ Π±Π»ΠΎΠΊ с основным ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ ΠΈ Π±Π»ΠΎΠΊ aside. Для Π΄Π²ΡƒΡ… этих Π±Π»ΠΎΠΊΠΎΠ² ΡƒΠΊΠ°Π·Π°Π½Π° ΡˆΠΈΡ€ΠΈΠ½Π° Π² %, Π½ΠΎ Π½Π° ΠΎΠ΄Π½ΠΎΠΉ страницС aside Π½Π΅Ρ‚ ΠΈ ΡˆΠΈΡ€ΠΈΠ½Π° Π±Π»ΠΎΠΊΠ° с основным ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ 100%. Π’ΡƒΡ‚ Π½Π°ΠΌ Π½Π° ΠΏΠΎΠΌΠΎΡ‰ΡŒ ΠΏΡ€ΠΈΠ΄Π΅Ρ‚ псСвдокласс only-child:

Π˜Π΄Ρ‘Ρ‚ загрузка… Если Π½ΠΈΡ‡Π΅Π³ΠΎ Ρ‚Π°ΠΊ ΠΈ Π½Π΅ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΠ»ΠΎΡΡŒ, Ρ‚ΠΎ посмотритС ΠΏΡ€ΠΈΠΌΠ΅Ρ€ здСсь.

Π’ случаях, ΠΊΠΎΠ³Π΄Π° only-child Π½Π΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹.

Ошибка 4: Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ миксины, ΠΊΠΎΠ³Π΄Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ миксины

ΠœΠΈΠΊΡΠΈΠ½Ρ‹ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡƒ DRY (Don’t Repeat Yourself), ΠΈΡ… Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π² scss для Ρ‚Π°ΠΊΠΈΡ… абстрактных Π·Π°Π΄Π°Ρ‡, ΠΊΠ°ΠΊ сСтка, Π½ΠΎ ΠΎ Π½ΠΈΡ… ΠΏΠΎΡ‡Π΅ΠΌΡƒ-Ρ‚ΠΎ Π·Π°Π±Ρ‹Π²Π°ΡŽΡ‚, ΠΊΠΎΠ³Π΄Π° Ρ€Π΅Ρ‡ΡŒ Π·Π°Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΎ вСрсткС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚. НапримСр, Ρƒ вас Π΅ΡΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ€Π°Π·Π½Ρ‹Ρ… Ρ†Π²Π΅Ρ‚ΠΎΠ², Ρƒ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π½Π° Ρ…ΠΎΠ²Π΅Ρ€Π΅ происходит инвСрсия Ρ†Π²Π΅Ρ‚Π°. Для инвСрсии ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ миксин ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ стили Ρ‡ΡƒΡ‚ΠΎΡ‡ΠΊΡƒ Ρ‡ΠΈΡ‰Π΅:

Π˜Π΄Ρ‘Ρ‚ загрузка… Если Π½ΠΈΡ‡Π΅Π³ΠΎ Ρ‚Π°ΠΊ ΠΈ Π½Π΅ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΠ»ΠΎΡΡŒ, Ρ‚ΠΎ посмотритС ΠΏΡ€ΠΈΠΌΠ΅Ρ€ здСсь.

Π’Π°ΠΊΠΆΠ΅ ΡΠΎΠ²Π΅Ρ‚ΡƒΡŽ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° плСйсхолдСры, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅, ΠΊ соТалСнию, ΠΌΠ½Π΅ ΠΏΠΎΠΊΠ° Π½Π΅ Π²ΡΡ‚Ρ€Π΅Ρ‡Π°Π»ΠΈΡΡŒ Π² вСрсткС Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ².

Π’ Jade Ρ‚ΠΎΠΆΠ΅ слСдуСт Π°ΠΊΡ‚ΠΈΠ²Π½Π΅Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ миксины. НапримСр, для svg-спрайтов:

Π˜Π΄Ρ‘Ρ‚ загрузка… Если Π½ΠΈΡ‡Π΅Π³ΠΎ Ρ‚Π°ΠΊ ΠΈ Π½Π΅ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΠ»ΠΎΡΡŒ, Ρ‚ΠΎ посмотритС ΠΏΡ€ΠΈΠΌΠ΅Ρ€ здСсь.

Ошибка 5: бСспорядок Π² мСдиазапросах

Частая ошибка β€” ΡΠΌΠ΅ΡˆΠΈΠ²Π°Ρ‚ΡŒ mobile-first ΠΈ desktop-first ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Ρ‹. БСйчас, ΠΊΠΎΠ³Π΄Π° IE8 пСрСстал Ρ„ΠΈΠ³ΡƒΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² спСках, ΠΌΠΎΠΆΠ½ΠΎ смСло ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ Π½Π° mobile-first. Если ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для дСсктопа, ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΠΏΠΎΠ²Π»ΠΈΡΡ‚ΡŒ Π½Π° Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°, ΡΡΡ‹Π»Π°ΡΡΡŒ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π½Π° эту ΠΊΠ½ΠΈΠ³Ρƒ. Π’ любом случаС, Π±ΡƒΠ΄Π΅Ρ‚Π΅ Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ min-width ΠΈΠ»ΠΈ max-width, Β ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΎΠ΄Π½ΠΎ. Π˜Π½Π°Ρ‡Π΅ Π² ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ ΠΌΠΎΠΌΠ΅Π½Ρ‚ станСт тяТСло ΠΎΡ‚ΡΠ»Π΅ΠΆΠΈΠ²Π°Ρ‚ΡŒ Π»ΠΎΠ³ΠΈΠΊΡƒ измСнСния стилСй, Π° Π·Π½Π°Ρ‡ΠΈΡ‚, ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°Ρ‚ΠΈΡ‡Π½ΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ вСрстку.

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π½Π΅ стоит ΠΏΠΈΡΠ°Ρ‚ΡŒ мСдиазапросы ΠΏΠΎ Ρ…Π°Ρ€Π΄ΠΊΠΎΠ΄Ρƒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ для Π±Ρ€Π΅ΠΉΠΊΠΏΠΎΠΈΠ½Ρ‚ΠΎΠ². Π’.Π΅. вмСсто:

@media (min-width: 1024px)

Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ:

$laptop-landscape: 1024px;

@media (min-width: $laptop-landscape)

ΠŸΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ для Π±Ρ€Π΅ΠΉΠΊΠΏΠΎΠΈΠ½Ρ‚ΠΎΠ² стоит Ρ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΌ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅ ΠΈΠ»ΠΈ Π² layout.scss. МоТно ΠΏΠΎΠΉΡ‚ΠΈ дальшС, ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ эту ΡΡ‚Π°Ρ‚ΡŒΡŽ ΠΈ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΎΠ² (ΠΈΠ»ΠΈ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ свой).

Π’ scss Π΅ΡΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π²ΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒ мСдиазапросы Π² ΠΏΡ€Π°Π²ΠΈΠ»Π°. НапримСр:

.block {
    width: 100%;
Β    @media screen and (min-width: 768px) {
        width: 60%;
Β    }
}

Π­Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ скомпилировано Π²:

.block {
Β    width: 100%;
}

@media screen and (min-width: 768px) {
Β    .block {
Β Β Β      width: 60%;
    }
}

Π’Π°ΠΊ ΠΏΠΈΡΠ°Ρ‚ΡŒ мСдиазапросы довольно ΡƒΠ΄ΠΎΠ±Π½ΠΎ, Ρ‚ΠΎΠ³Π΄Π° ΠΎΠ΄ΠΈΠ½ сСлСктор Π±ΡƒΠ΄Π΅Ρ‚ Π²ΡΡ‚Ρ€Π΅Ρ‡Π°Ρ‚ΡŒΡΡ строго Π² ΠΎΠ΄Π½ΠΎΠΌ мСстС Π² стилях. Π’ Ρ‚Π°ΠΊΠΎΠΌ случаС ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ для основных Π±Ρ€Π΅ΠΉΠΊΠΏΠΎΠΈΠ½Ρ‚ΠΎΠ². Π”ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎ названиям ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Ρ… ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Π»Π΅Π³ΠΊΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡ‚ΡŒ, ΠΊΠ°ΠΊΠΎΠΉ Π±Ρ€Π΅ΠΉΠΊΠΏΠΎΠΈΠ½Ρ‚ соотвСтствуСт устройству (ΠΏΠΎ спСцификации ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Π°ΠΌ Β ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°), Π° ΠΊΠ°ΠΊΠΎΠΉ Π±Ρ‹Π» написан ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ΄ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚.

Π‘ΠΎΠ»ΡŒΡˆΠΎΠ΅ количСство мСдиазапросов Π½Π΅ сказываСтся ΠΎΡ‰ΡƒΡ‚ΠΈΠΌΠΎ Π½Π° ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ, Π½ΠΎ, разумССтся, сказываСтся Π½Π° вСсС css Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. Если Ρƒ вас большой ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ со слоТной ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠ΅ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, мСдиазапросов ΠΌΠ½ΠΎΠ³ΠΎ, Ρ‚ΠΎ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, стоит Π·Π°Π΄ΡƒΠΌΠ°Ρ‚ΡŒΡΡ ΠΎΠ± ΠΈΡ… ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΠΈ.

Ошибка 6: Π½Π΅ ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΠΎΠ²Π°Ρ‚ΡŒΡΡ UX-ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ

НС часто Π²ΡΡ‚Ρ€Π΅Ρ‚ΠΈΡˆΡŒ UX-ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Ρ‰ΠΈΠΊΠ° ΠΈ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠ° Π² ΠΎΠ΄Π½ΠΎΠΌ Π»ΠΈΡ†Π΅. Но Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠ°ΠΌ врСмя ΠΎΡ‚ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ приходится ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠ²Π»ΠΈΡΡ‚ΡŒ Π½Π° взаимодСйствиС: ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌ ΠΈΠ»ΠΈ ΠΎΡ‚Π²Ρ€Π°Ρ‚ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ, Π² зависимости ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ свСрстан ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚. НС Π²Π°ΠΆΠ½ΠΎ, вСрстаСтС Π»ΠΈ Π²Ρ‹ ΠΏΠΎΠ΄ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ Π±Π΅Π· ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΈΠ»ΠΈ просто добавляСтС ΠΊΠ½ΠΎΠΏΠΊΡƒ, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π·Π°Π±Ρ‹Π»ΠΈ Π½Π° этапС проСктирования, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ Π·Π½Π°Ρ‚ΡŒ основы.

Для Π½Π°Ρ‡Π°Π»Π° ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Ρ‚ΠΈΠΏΠΈΡ‡Π½ΡƒΡŽ ΠΎΡˆΠΈΠ±ΠΊΡƒ Π½ΠΎΠ²ΠΈΡ‡ΠΊΠ°: ссылки ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ малСнького Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ ΠΌΠ°Π»ΠΎ пространства. Π­Ρ‚ΠΎ ΠΎΠΊ, Ссли взаимодСйствиС происходит ΠΌΡ‹ΡˆΠΊΠΎΠΉ, Π½ΠΎ ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Π½Π΅ годится, ΠΊΠΎΠ³Π΄Π° Ρ€Π΅Ρ‡ΡŒ ΠΈΠ΄Π΅Ρ‚ ΠΎ Ρ‚Π°Ρ‡-устройствах. ΠœΠ½ΠΎΠ³ΠΎΠΊΡ€Π°Ρ‚Π½Ρ‹Π΅ ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΠΈ ΠΏΠΎΠΏΠ°ΡΡ‚ΡŒ ΠΏΠΎ ссылкС, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ приводят ΠΊ попаданию ΠΏΠΎ сосСднСй ссылкС, ΠΎΡ‡Π΅Π½ΡŒ быстро выводят ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΈΠ· сСбя. НавСрняка ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· нас Π±Ρ‹Π²Π°Π» Π² Ρ‚Π°ΠΊΠΎΠΉ ситуации, ΠΈ ΠΏΠ΅Ρ€Π²ΠΎΠ΅, Ρ‡Ρ‚ΠΎ хочСтся ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, β€” ΠΏΠΎΠΊΠΈΠ½ΡƒΡ‚ΡŒ Π½Π΅ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ сайт. Π§Ρ‚ΠΎΠ±Ρ‹ Ρ‚Π°ΠΊΠΎΠ³ΠΎ Π½Π΅ происходило с вашими ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌΠΈ, ΡΠΎΠ²Π΅Ρ‚ΡƒΡŽ ΠΏΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ Π³Π°ΠΉΠ΄Π»Π°ΠΉΠ½Ρ‹ ΠΎΡ‚ Google ΠΈΠ»ΠΈ SmashingMagazine.

Ошибка 7: всС Π² пиксСлях, Π΄Π°ΠΆΠ΅ font-size

Π‘ΠΎΠ²Π΅Ρ‚ΡƒΡŽ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ (Ссли Π²Ρ‹ Π΅Ρ‰Π΅ Π½Π΅Π΅ сдСлали) ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ с px Π½Π° em ΠΈ rem для Ρ‚Π°ΠΊΠΈΡ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ, ΠΊΠ°ΠΊ:

  • Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΈ высота строки,
  • Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΈΠΊΠΎΠ½ΠΎΠΊ,
  • Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΊΠ½ΠΎΠΏΠΎΠΊ,
  • Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€ΠΈΡ‚ΠΌ.

Π’ Ρ€Π°ΠΌΠΊΠ°Ρ… Π‘Π­Πœ для Π±Π»ΠΎΠΊΠ°: rem для Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΡˆΡ€ΠΈΡ„Ρ‚Π° Π±Π»ΠΎΠΊΠ°, em β€” для ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… Π²Π΅Π»ΠΈΡ‡ΠΈΠ½ Π±Π»ΠΎΠΊΠ°. Для элСмСнта Π΅ΡΡ‚ΡŒ 2 стратСгии:

  1. em для Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΡˆΡ€ΠΈΡ„Ρ‚Π°, Ссли структура html ΡƒΠΆΠ΅ ΡƒΡ‚Π²Π΅Ρ€Π΄ΠΈΠ»Π°ΡΡŒ ΠΈ вряд Π»ΠΈ добавится / убавится Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ влоТСнности,
  2. rem β€” Ссли Π² Ρ€Π°ΠΌΠΊΠ°Ρ… Π±Π»ΠΎΠΊΠ° вСроятны измСнСния (ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ элСмСнтов, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΡƒΠ΄Π°Π»Π΅Π½ΠΈΠ΅ ΠΎΠ±Π΅Ρ€Ρ‚ΠΎΠΊ ΠΈ Ρ‚.ΠΏ.).

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ½ΡΡ‚ΡŒ Ρ€Π°Π·Π½ΠΈΡ†Ρƒ ΠΌΠ΅ΠΆΠ΄Ρƒ Π΅Π΄ΠΈΠ½ΠΈΡ†Π°ΠΌΠΈ измСнСния ΠΈΠ»ΠΈ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΌΠ΅ΠΆΠ΄Ρƒ em ΠΈ rem, ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΠΊΠ°Π½Π°Π» DevTips, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π² вСсьма Π½Π΅ΠΏΡ€ΠΈΠ½ΡƒΠΆΠ΄Π΅Π½Π½ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΠ΅ ΠΎΠ±ΡŠΡΡΠ½ΡΡŽΡ‚ΡΡ основы вСрстки.

Π’Π°ΠΊΠΆΠ΅ с псСвдоэлСмСнтами ΠΈ em стоит Π±Ρ‹Ρ‚ΡŒ остороТнСй:

«Если Π² IE9+для ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈ Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ псСвдоэлСмСнта Π·Π°Π΄Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° Ρ‡Π΅Ρ€Π΅Π· Ρ€Π°Π·Π½Ρ‹Π΅ сСлСкторы, Ρ‚ΠΎ ΠΎΠ½ просто ΠΏΠ΅Ρ€Π΅ΠΌΠ½ΠΎΠΆΠΈΡ‚ всС Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ².Β» (источник)

Ошибка 8: Π½Π΅ Π΄ΡƒΠΌΠ°Ρ‚ΡŒ ΠΎ ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ ΠΈ ΠΏΡ€Π΅Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… значСниях

ВСрстая ΠΏΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Ρƒ, ΠΌΡ‹ ΠΈΠΌΠ΅Π΅ΠΌ Π΄Π΅Π»ΠΎ с идСальной ситуациСй. Π’Π°ΠΊ Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΈ довольно часто Π·Π°Π±Ρ‹Π²Π°ΡŽΡ‚ ΠΏΡ€ΠΎ ΡƒΠ³Ρ€ΠΎΠ·Ρƒ пСрСполнСния, Ρ‚.Π΅. ΠΊΠΎΠ³Π΄Π° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π½Π΅ помСщаСтся Π² Π±Π»ΠΎΠΊ ΠΈΠ»ΠΈ элСмСнт ΠΈ Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ Π·Π° Π΅Π³ΠΎ ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹. Π­Ρ‚Ρƒ ΡΠΈΡ‚ΡƒΠ°Ρ†ΠΈΡŽ Π½ΡƒΠΆΠ½ΠΎ срочно ΠΈΡΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ, вСдь Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊ β€” это Π΅Ρ‰Π΅ ΠΈ своСго Ρ€ΠΎΠ΄Π° ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄Ρ‡ΠΈΠΊ интСрфСйса с языка дизайнСрского Π½Π° язык, понятный программистам. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΎΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½ΠΎ Π² процСссС вСрстки Π²Ρ‹ΡΠ²ΠΈΡ‚ΡŒ ΠΏΡ€Π΅Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния объСма тСкста для ΠΊΠ½ΠΎΠΏΠΎΠΊ, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΈ ΠΏΡ€ΠΎΡ‡ΠΈΡ… элСмСнтов с ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΠΉ Π²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒΡŽ. Об этих ΠΏΡ€Π΅Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… значСниях стоит ΡΠΎΠΎΠ±Ρ‰ΠΈΡ‚ΡŒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ (ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ Π² HTML) ΠΈ ΠΏΠΎ возмоТности ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΡ‚ΡŒ ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π² css:

Π˜Π΄Ρ‘Ρ‚ загрузка… Если Π½ΠΈΡ‡Π΅Π³ΠΎ Ρ‚Π°ΠΊ ΠΈ Π½Π΅ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΠ»ΠΎΡΡŒ, Ρ‚ΠΎ посмотритС ΠΏΡ€ΠΈΠΌΠ΅Ρ€ здСсь.

Π’ΠΎ ΠΆΠ΅ касаСтся ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. БовсСм Π½Π΅ Ρ„Π°ΠΊΡ‚, Ρ‡Ρ‚ΠΎ изобраТСния Π±ΡƒΠ΄ΡƒΡ‚ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒΡΡ Π² ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹Ρ… пропорциях ΠΈΠ»ΠΈ Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎ Π² процСссС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ. Если Π³Π°Ρ€Π°Π½Ρ‚ΠΈΠΈ сохранСния ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΉ Π½Π΅Ρ‚, Ρ‚ΠΎ Π»ΡƒΡ‡ΡˆΠ΅ сразу Π² вСрсткС ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΎΠ±Π΅Ρ€Ρ‚ΠΊΡƒ ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΎΠ΄Π½Ρƒ ΠΈΠ· Π΄Π²ΡƒΡ… Ρ‚Π΅Ρ…Π½ΠΈΠΊ: вписываниС ΠΈΠ»ΠΈ растягиваниС ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅.

Π˜Π΄Ρ‘Ρ‚ загрузка… Если Π½ΠΈΡ‡Π΅Π³ΠΎ Ρ‚Π°ΠΊ ΠΈ Π½Π΅ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΠ»ΠΎΡΡŒ, Ρ‚ΠΎ посмотритС ΠΏΡ€ΠΈΠΌΠ΅Ρ€ здСсь.

МоТно Ρ‚Π°ΠΊΠΆΠ΅ с Π½Π°Π΄Π΅ΠΆΠ΄ΠΎΠΉ ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π² сторону object-fit, ΠΎΠ΄Π½Π°ΠΊΠΎ Ρƒ этого свойства ΠΏΠΎΠΊΠ° довольно слабая ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ°.

Ошибка 9: ΡƒΠ΄Π΅Π»ΡΡ‚ΡŒ нСдостаточно внимания Π³Ρ€Π°Ρ„ΠΈΠΊΠ΅

Π“Ρ€Π°Ρ„ΠΈΠΊΡƒ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ дСлят Π½Π° 3 части: ΠΈΠΊΠΎΠ½ΠΊΠΈ, изобраТСния ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния. Π‘ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌΠΈ изобраТСниями Ρƒ Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ² ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ Π½Π΅ Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚, Β Π° Π²ΠΎΡ‚ с ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ ΠΈ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π½Ρ‹ΠΌΠΈ изобраТСниями всС Π½Π΅ Ρ‚Π°ΠΊ Ρ…ΠΎΡ€ΠΎΡˆΠΎ.

БСгодня стоит ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Π΅ΡΡ‚ΡŒ svg-спрайты ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΌ ΡˆΡ€ΠΈΡ„Ρ‚Π°ΠΌ, Ссли Π½Π΅Ρ‚ Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π½ΠΈΠΉ ΠΊ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ΅ совсСм старых вСрсий IE. ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠ΅ сравнСниС Π΄Π²ΡƒΡ… ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ Ρ‚ΡƒΡ‚Β ΠΈ Ρ‚ΡƒΡ‚. SVG-спрайт Ρ‚ΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΊΠ΅ΡˆΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, Ρ‚.Π΅. ΠΌΠΎΠΆΠ½ΠΎ ΡΡΡ‹Π»Π°Ρ‚ΡŒΡΡ Π½Π° внСшний Ρ„Π°ΠΉΠ», Ссли Π½Π°Π±ΠΎΡ€ ΠΈΠΊΠΎΠ½ΠΎΠΊ большой ΠΈ повторяСтся ΠΎΡ‚ страницы ΠΊ страницС. Для ΠΊΠ΅ΡˆΠΈΡ€ΡƒΠ΅ΠΌΡ‹Ρ… спрайтов Π΅ΡΡ‚ΡŒ ΠΏΠΎΠ»ΠΈΡ„ΠΈΠ», Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‰ΠΈΠΉ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ Π² IE. А Π² одностраничных прилоТСниях спрайт ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ добавляСтся Π² Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ шаблон.

ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚Π½Ρ‹Π΅ изобраТСния, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ„ΠΎΡ‚ΠΎ Ρ‚ΠΎΠ²Π°Ρ€Π°, β€” главная ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π° большого вСса сайтов. На дСсктопах (особСнно Π½Π° экранах с большой ΠΏΠ»ΠΎΡ‚Π½ΠΎΡΡ‚ΡŒΡŽ пиксСля) Π½Π°ΠΌ Π½ΡƒΠΆΠ½Ρ‹ изобраТСния Π² большом Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΈ. Π˜Ρ… вСс ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π½Π΅ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ, Ρ‚.ΠΊ. Π² основном дСсктопы ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ высокоскоростныС ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ с Π½Π΅ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΌ Ρ‚Ρ€Π°Ρ„ΠΈΠΊΠΎΠΌ. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств ΠΆΠ΅ Π²Ρ‹Π½ΡƒΠΆΠ΄Π΅Π½Ρ‹ Π²Ρ‹ΠΊΠ°Ρ‡ΠΈΠ²Π°Ρ‚ΡŒ лишниС ΠΌΠ΅Π³Π°Π±Π°ΠΉΡ‚Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. А Ссли Ρƒ Π½ΠΈΡ… низкая ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ Π΄Π°Π½Π½Ρ‹Ρ…, Π±Ρ‹Π²Π°ΡŽΡ‚ ΠΎΠ±Ρ€Ρ‹Π²Ρ‹? ΠŸΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ Π΄ΠΎΠ²ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. ΠžΡΡ‚Π°Π΅Ρ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π°Π΄Π΅ΡΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π½Π΅ Π² Ρ€ΠΎΡƒΠΌΠΈΠ½Π³Π΅. Π­Ρ‚Ρƒ ΡΠΈΡ‚ΡƒΠ°Ρ†ΠΈΡŽ Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° scrset Ρƒ <img> ΠΈΠ»ΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅Π³Π° <picture>. ΠŸΠΎΡΡ‚Π΅ΠΏΠ΅Π½Π½ΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° этих возмоТностСй становится Π»ΡƒΡ‡ΡˆΠ΅, Π° для старых Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² Π΅ΡΡ‚ΡŒ ΠΏΠΎΠ»ΠΈΡ„ΠΈΠ». Для ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠ³ΠΎ ознакомлСния с Ρ‚Π΅Ρ…Π½ΠΈΠΊΠΎΠΉ поставки Ρ€Π°Π·Π½Ρ‹Ρ… ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ для Ρ€Π°Π·Π½Ρ‹Ρ… устройств ΡΠΎΠ²Π΅Ρ‚ΡƒΡŽ бСсплатный курс Β«Responsive images» от Udacity.

Ошибка 10: Pixel Perfect? НС, Π½Π΅ ΡΠ»Ρ‹ΡˆΠ°Π».

НС зря этот ΠΏΡƒΠ½ΠΊΡ‚ послСдний Π² этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ β€” ΠΎ Pixel Perfect часто Π·Π°Π±Ρ‹Π²Π°ΡŽΡ‚ (кстати, Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΈ). Π‘ ΠΎΠ΄Π½ΠΎΠΉ стороны, Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊ ΠΏΠΎΡ‡Ρ‚ΠΈ всСгда дСйствуСт, ΠΎΠΏΠΈΡ€Π°ΡΡΡŒ Π½Π° ΠΌΠ°ΠΊΠ΅Ρ‚, с Π΄Ρ€ΡƒΠ³ΠΎΠΉ β€” Π½Π΅ΠΌΠ½ΠΎΠΆΠΊΠΎ ΠΎΡ‚ этого ΠΌΠ°ΠΊΠ΅Ρ‚Π° отступаСт. Π’ процСссС Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π°Π΄ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠΌ ΠΊΠ°ΠΊΠΈΠ΅-Ρ‚ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ мСстами, ΠΎΡ‚ ΠΊΠ°ΠΊΠΈΡ…-Ρ‚ΠΎ ΠΎΡ‚ΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ, ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ Π½ΠΎΠ²Ρ‹Π΅ ΠΈ Ρ‚.ΠΏ. Π Π°Π·ΠΌΠ΅Ρ€Ρ‹ элСмСнтов ΠΌΠΎΠ³ΡƒΡ‚ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ Π² зависимости ΠΎΡ‚ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° (смотри ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΈ ΠΏΡ€Π΅Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния). Π’ ΠΊΠΎΠ½Ρ†Π΅ ΠΊΠΎΠ½Ρ†ΠΎΠ², Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ ΠΌΠΎΠΆΠ΅Ρ‚ Π΄ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ ΠΎΡˆΠΈΠ±ΠΊΡƒ ΠΏΡ€ΠΈ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠΈ элСмСнтов ΠΏΠΎ сСткС. ВсС это β€” Π°Π΄Π΅ΠΊΠ²Π°Ρ‚Π½Ρ‹Π΅ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ локально ΠΎΡ‚ΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ pixel perfect ΠΈ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ Β«ΠΏΠΎ ситуации». Π’ ΠΈΠ΄Π΅Π°Π»Π΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ отступлСниС ΠΎΡ‚ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ Π·Π°Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΎ.

Π’ случаях, ΠΊΠΎΠ³Π΄Π° Π½Π΅Ρ‚ ΠΏΡ€ΠΈΡ‡ΠΈΠ½ ΠΎΡ‚ΠΊΠ»ΠΎΠ½ΡΡ‚ΡŒΡΡ ΠΎΡ‚ ΠΌΠ°ΠΊΠ΅Ρ‚Π°, стоит Ρ‡Π΅Ρ‚ΠΊΠΎ Π΅ΠΌΡƒ ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ (ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π² этом ΠΌΠΎΠΆΠ΅Ρ‚, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ для Chrome β€” Pixel Perfect).

Π’ Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ Ρ…ΠΎΡ‚Π΅Π»ΠΎΡΡŒ Π±Ρ‹ ΠΏΡ€ΠΈΠ·Π²Π°Ρ‚ΡŒ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠΎΠ² Π°ΠΊΡ‚ΠΈΠ²Π½Π΅Π΅ ΡƒΡ‡Π°ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π² code-review, вСдь это ΠΏΠΎΠ²ΠΎΠ΄ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ качСство ΠΊΠΎΠ΄Π° Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰Π΅Π³ΠΎ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠ°, Π½ΠΎ ΠΈ ΡΠΈΡΡ‚Π΅ΠΌΠ°Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ знания ΡƒΠΆΠ΅ ΠΎΠΏΡ‹Ρ‚Π½Ρ‹Ρ… ΠΊΠΎΠ»Π»Π΅Π³, Ρ€Π΅Π²ΡŒΡŽΠ΅Ρ€ΠΎΠ².


Π—Π° ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Β Π²Ρ‹Ρ€Π°ΠΆΠ°Π΅ΠΌ Π±Π»Π°Π³ΠΎΠ΄Π°Ρ€Π½ΠΎΡΡ‚ΡŒΒ ΠΌΠ΅ΠΆΠ΄ΡƒΠ½Π°Ρ€ΠΎΠ΄Π½ΠΎΠΉ IT-ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ Noveo.

Π›ΡƒΡ‡ΡˆΠΈΠ΅ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ вСрсии сайтов Π² 2021 Π³ΠΎΠ΄Ρƒ

Π­Ρ‚Π° ΡΡ‚Π°Ρ‚ΡŒΡ ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ пошла напСрСкосяк. ΠœΡ‹ ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²Π°Π»ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Π±ΠΎΡ€ΠΊΡƒ Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… вСрсий российских сайтов, Π½Π°ΠΉΡ‚ΠΈ ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΈΠ΄Π΅ΠΈ ΠΈ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ, Π½ΠΎ ΡΡ‚ΠΎΠ»ΠΊΠ½ΡƒΠ»ΠΈΡΡŒ с ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΎΠΉ. Π’ΠΏΡ€ΠΎΡ‡Π΅ΠΌ, сСйчас ΡƒΠ·Π½Π°Π΅Ρ‚Π΅ сами, Π° сначала Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ матчасти.

Мобильная вСрсия ΠΈ адаптивная вСрстка β€” Π² Ρ‡Π΅ΠΌ Ρ€Π°Π·Π½ΠΈΡ†Π°

Π‘Π½Π°Ρ‡Π°Π»Π° ΠΊΡ€Π°Ρ‚ΠΊΠΎ Π½Π°ΠΏΠΎΠΌΠ½ΠΈΠΌ основныС отличия мобильной вСрсии ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ вСрстки. НазваниС «мобильная вСрсия» Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ сама Π·Π° сСбя: ΠΎΠ½Π° создаСтся ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ΄ Ρ€Π°Π·ΠΌΠ΅Ρ€ экрана ΠΈ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ мобильного устройства: смартфона, ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Π°. Адаптивная вСрстка сайта ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ страницы сайта Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠΎΠ΄ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒΡΡ (Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ) ΠΏΠΎΠ΄ всС устройства, с ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ сайт.

Какой Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ? ΠŸΡ€ΠΎΡΡ‚Ρ‹Π΅ Β«Π»Π΅Π³ΠΊΠΈΠ΅Β» сайты ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‚ΡΡ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ вСрсткой. Если Π½Π° сайтС мноТСство Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ² мСню, страниц, Ρ€Π°Π·Π½ΠΎΠΎΠ±Ρ€Π°Π·Π½Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ β€” Π»ΡƒΡ‡ΡˆΠ΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ. О Π½ΠΈΡ… ΠΈ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ.

ΠŸΡ€ΠΈΡΠΎΠ΅Π΄ΠΈΠ½ΡΠΉΡ‚Π΅ΡΡŒ ΠΊ Π½Π°ΡˆΠ΅ΠΌΡƒ Telegram-ΠΊΠ°Π½Π°Π»Ρƒ!

  • Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒ послСдниС новости ΠΈΠ· ΠΌΠΈΡ€Π° ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΈΠ½Π³Π° Π² мСссСндТСрС Telegram Π½Π° своём мобильном Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π΅.
  • Для этого Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° наш ΠΊΠ°Π½Π°Π».

Какой Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ мобильная вСрсия сайта

Π­ΠΊΡ€Π°Π½ смартфона, ΠΏΡƒΡΡ‚ΡŒ Π΄Π°ΠΆΠ΅ самого большого, мСньшС, Ρ‡Π΅ΠΌ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π° ΠΈΠ»ΠΈ Π½ΠΎΡƒΡ‚Π±ΡƒΠΊΠ°. На Π½Π΅ΠΌ физичСски Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ всС элСмСнты сайта, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΅ΡΡ‚ΡŒ Π² дСсктопной вСрсии. На этом ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠΈ ΠΈ основаны основныС ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹ создания ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… вСрсий страниц сайта:

  • ВмСсто ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½ΠΎΠ³ΠΎ мСню β€” мСню-Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ разворачиваСтся Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ΠΌ Π½Π° Π½Π΅Π³ΠΎ. Оно Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ сквозным: ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ с любой страницы сайта.
  • ВмСсто словСсного написания β€” ΠΈΠΊΠΎΠ½ΠΊΠΈ, понятныС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ.
  • ВсС самоС Π²Π°ΠΆΠ½ΠΎΠ΅, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΡŽ, выносится Π½Π° Π³Π»Π°Π²Π½ΡƒΡŽ страницу. Π£ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π½Π΅Ρ‚ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ ΠΈΠ·ΡƒΡ‡Π°Ρ‚ΡŒ сайт ΠΈ Π΅Π³ΠΎ Ρ€Π°Π·Π΄Π΅Π»Ρ‹ β€” ΠΌΠΎΠΆΠ΅Ρ‚, ΠΎΠ½ Π²ΠΎΠΎΠ±Ρ‰Π΅ ΠΌΠ΅ΠΆΠ΄Ρƒ Π΄Π΅Π»ΠΎΠΌ зашСл. Π”Π°ΠΉΡ‚Π΅ Π΅ΠΌΡƒ с ΠΏΠΎΡ€ΠΎΠ³Π° Ρ…Π»Π΅Π±-соль ΠΈ Ρ‚Π°ΠΏΠΎΡ‡ΠΊΠΈ.
  • ΠœΠΈΠ½ΠΈΠΌΡƒΠΌ Π΄Π΅Ρ‚Π°Π»Π΅ΠΉ ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ β€” Π² мобильной вСрсии это ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ.
  • ВмСсто многочислСнных ΠΏΠΎΠ»Π΅ΠΉ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ… Π·Π°ΠΊΠ°Π·Π° (ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΡŒΡ‚Π΅, ΠΊΠ°ΠΊ слоТно Π½Π°Π±ΠΈΡ€Π°Ρ‚ΡŒ Π² Π½ΠΈΡ… тСкст с ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ смартфона!) β€” ΠΎΠ΄Π½ΠΎ-Π΄Π²Π° Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Ρ… поля. ИмСни, Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π° ΠΈΠ»ΠΈ ΠΏΠΎΡ‡Ρ‚Ρ‹ Π²ΠΏΠΎΠ»Π½Π΅ достаточно.
  • Кнопка Π³Π»Π°Π²Π½ΠΎΠΉ страницы, ΠΎΠ½Π° ΠΆΠ΅ Β«Π”ΠΎΠΌΠΎΠΉΒ» ΠΈΠ»ΠΈ просто Π½Π°Π·Π²Π°Π½ΠΈΠ΅ сайта Π² шапкС, Ρ‚ΠΎΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½Π° ΠΏΡ€ΠΈΡΡƒΡ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ страницС.
  • ΠšΡ€ΡƒΠΏΠ½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π΅ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π» тСкст ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π· ΠΈ Π½Π΅ Π±Π΅ΠΆΠ°Π» Π·Π° ΠΎΡ‡ΠΊΠ°ΠΌΠΈ.
  • ΠšΡ€ΡƒΠΏΠ½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ достаточноС количСство Π²ΠΎΠ·Π΄ΡƒΡ…Π° ΠΌΠ΅ΠΆΠ΄Ρƒ элСмСнтами сайта, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π΅ промахнулся ΠΈ Π½Π°ΠΆΠ°Π», ΠΊΡƒΠ΄Π° Π½Π°Π΄ΠΎ.
  • Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Ρ‚ΡŒ тСкст, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, любой Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ сайта.
  • Если ΠΏΠΎΠΏ-Π°ΠΏΡ‹, Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Ρ‹ ΠΈ ΠΏΡ€ΠΎΡ‡ΠΈΠ΅ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ ΠΎΠΊΠ½Π° β€” Ρ‚ΠΎ Π½Π΅ Π½Π° вСсь экран. Π­Ρ‚ΠΎ Ρ€Π°Π·Π΄Ρ€Π°ΠΆΠ°Π΅Ρ‚!

НиТС ΠΌΡ‹ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅ΠΌ Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ этих ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠΎΠ². ΠžΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ трСбования Π½Π΅ ΠΎΡ‚Π»ΠΈΡ‡Π°ΡŽΡ‚ΡΡ ΠΎΡ‚ дСсктопных вСрсий:

  • Π›Π°ΠΊΠΎΠ½ΠΈΡ‡Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½.
  • Удобная навигация ΠΏΠΎ Ρ€Π°Π·Π΄Π΅Π»Π°ΠΌ.
  • Π”Ρ€ΡƒΠΆΠ΅Π»ΡŽΠ±Π½Ρ‹ΠΉ ΠΈ понятный интСрфСйс.
  • ΠŸΡ€ΠΎΡ€Π°Π±ΠΎΡ‚Π°Π½Π½Ρ‹ΠΉ UX, ΠΈΠ»ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΎΠΏΡ‹Ρ‚.
  • Высокая ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ.
  • И самоС Π³Π»Π°Π²Π½ΠΎΠ΅ β€” удобство для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.

Π§ΠΈΡ‚Π°ΠΉΡ‚Π΅ Ρ‚Π°ΠΊΠΆΠ΅:

16 дСйствСнных способов ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ Ρ‚Ρ€Π°Ρ„ΠΈΠΊ сайта

ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ вСрсии сайтов: ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ 2021

И Π²ΠΎΡ‚ Ρ‚ΡƒΡ‚-Ρ‚ΠΎ начинаСтся самоС интСрСсноС! ΠœΡ‹ Ρ…ΠΎΡ‚Π΅Π»ΠΈ ΡΠΎΠ±Ρ€Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… вСрсий ΠΈ Π½Π°ΠΉΡ‚ΠΈ Π½Π΅ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Π΅, Π·Π°ΠΏΠΎΠΌΠΈΠ½Π°ΡŽΡ‰ΠΈΠ΅ΡΡ сайты, ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ. Но Π²Π½Π΅Π·Π°ΠΏΠ½ΠΎ Π²Ρ‹ΡΡΠ½ΠΈΠ»ΠΎΡΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½ΠΈΡ‡Π°Ρ‚ΡŒ Π² 2021 Π³ΠΎΠ΄Ρƒ Π½ΠΈΠΊΡ‚ΠΎ ΠΈ Π½Π΅ Ρ…ΠΎΡ‡Π΅Ρ‚. ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ вСрсии сайтов ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½ΠΎΠ², Π°Π³Ρ€Π΅Π³Π°Ρ‚ΠΎΡ€ΠΎΠ² ΠΈ маркСтплСйсов, Π±Π°Π½ΠΊΠΎΠ², ΠΊΠ°Ρ„Π΅, ΠΌΠ΅Π΄ΠΈΠ°, Ρ€Π°Π·Π²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΏΠΎΡ€Ρ‚Π°Π»ΠΎΠ², автосалонов, госструктур ΠΏΠΎΡ…ΠΎΠΆΠΈ, ΠΊΠ°ΠΊ Π±Ρ€Π°Ρ‚ΡŒΡ-Π±Π»ΠΈΠ·Π½Π΅Ρ†Ρ‹. Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ сами.

YouTube

ΠœΡ‹ Π²ΠΈΠ΄ΠΈΠΌ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π³Π»Π°Π²Π½ΠΎΠΉ страницы, ΠΈΠΊΠΎΠ½ΠΊΠΈ поиска Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Π°Π²Ρ‚ΠΎΡ€ΠΈΠ·Π°Ρ†ΠΈΠΈ, Π½ΠΈΠΆΠ΅ Ρ€Π°Π·Π΄Π΅Π»Ρ‹ мСню. Π”Π°Π»Π΅Π΅ ΠΈΠ΄Π΅Ρ‚ Π»Π΅Π½Ρ‚Π° Ρ€ΠΎΠ»ΠΈΠΊΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΠΎΠΆΠ½ΠΎ Π»ΠΈΡΡ‚Π°Ρ‚ΡŒ бСсконСчно

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΎΡ‚ΠΊΡ€ΠΎΠ΅ΠΌ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ΅ Π²ΠΈΠ΄Π΅ΠΎ:

ВсС самоС Π³Π»Π°Π²Π½ΠΎΠ΅: Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Π²ΠΈΠ΄Π΅ΠΎ ΠΈ ΠΊΠ°Π½Π°Π»Π°, ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡Π½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ взаимодСйствия. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Ρ€ΠΎΠ»ΠΈΠΊ дСтский, Π΅ΡΡ‚ΡŒ большая ΠΊΠ½ΠΎΠΏΠΊΠ° ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ прилоТСния

Wildberries

ΠŸΠΎΡ…ΠΎΠΆΠ°Ρ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½Π°, ΠΏΡ€Π°Π²Π΄Π°? На Π³Π»Π°Π²Π½ΠΎΠΉ Π²ΠΈΠ΄ΠΈΠΌ мСню-Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€, строку поиска, ΠΈΠΊΠΎΠ½ΠΊΠΈ Π°Π²Ρ‚ΠΎΡ€ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΈ, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, ΠΊΠΎΡ€Π·ΠΈΠ½Ρ‹ β€” маркСтплСйс ΠΆΠ΅. Π”Π°Π»Π΅Π΅ ΠΈΠ΄ΡƒΡ‚ Π±Π°Π½Π½Π΅Ρ€Ρ‹ с акциями, ΠΊΠ°ΠΊ ΠΈ Π² дСсктопной вСрсии , ΠΈ Ρ…ΠΈΡ‚Ρ‹ ΠΏΡ€ΠΎΠ΄Π°ΠΆ

ΠžΡ‚ΠΊΡ€ΠΎΠ΅ΠΌ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΡƒ Ρ‚ΠΎΠ²Π°Ρ€Π°:

Π’ΠΈΠ΄ΠΈΠΌ Ρ„ΠΎΡ‚ΠΎ Ρ‚ΠΎΠ²Π°Ρ€Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΎΡΠΊΡ€ΠΎΠ»Π»ΠΈΡ‚ΡŒ Π²ΠΏΡ€Π°Π²ΠΎ, Ρ†Π΅Π½Ρƒ, ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ доставкС ΠΈ Π΄Π²Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ БВА: Β«Π’ ΠΊΠΎΡ€Π·ΠΈΠ½ΡƒΒ» ΠΈ Β«ΠšΡƒΠΏΠΈΡ‚ΡŒ сСйчас»

Nike

МногиС Π²ΠΎΡΡ…ΠΈΡ‰Π°ΡŽΡ‚ΡΡ сайтом Nike: ΠΎΠ½ простой, понятный ΠΈ приятный для восприятия Π³Π»Π°Π·Π°.

НичСго лишнСго, ΠΊΠ°ΠΊ ΠΈ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ Π½Π° мобильной вСрсии

ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ экран ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ Ρ‚ΠΎΠ²Π°Ρ€Π° β€” просто ΠΏΡ€ΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΠ΅ искусства:

Π‘Ρ‚ΠΈΠ»ΡŒΠ½ΠΎ, Π»Π°ΠΊΠΎΠ½ΠΈΡ‡Π½ΠΎ, просто

М.Π’ΠΈΠ΄Π΅ΠΎ

Π§Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ Ρ‚Π΅ΠΌΡƒ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½ΠΎΠ² ΠΈ маркСтплСйсов, ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ Π΅Ρ‰Π΅ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ «М.Π’ΠΈΠ΄Π΅ΠΎΒ». На наш взгляд, это эталон ΠΏΡ€ΠΎΡ€Π°Π±ΠΎΡ‚Π°Π½Π½ΠΎΠ³ΠΎ сайта ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½Π°. Π’ мобильной вСрсии всС Ρ‚ΠΎΠΆΠ΅ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ:

ΠšΡ€ΠΎΠΌΠ΅ ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡Π½Ρ‹Ρ… элСмСнтов, здСсь Π΅ΡΡ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΠΈ Β«ΠŸΠΎΠ·Π²ΠΎΠ½ΠΈΡ‚ΡŒΒ» ΠΈ Β«ΠœΠ΅ΡΡ‚ΠΎΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅Β», Ρ‚Π°ΠΉΠΌΠ΅Ρ€ Π½Π° Ρ‚ΠΎΠ²Π°Ρ€ дня ΠΈ, Ρ‡Ρ‚ΠΎ интСрСсно, Π΄Π²ΠΎΠΉΠ½ΠΎΠ΅ мСню. Π’ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ Π²ΠΈΠ΄ΠΈΠΌ ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ Ρ‚ΠΎΠ²Π°Ρ€ΠΎΠ², Π² Π½ΠΈΠΆΠ½Π΅ΠΌ β€” Ρ€Π°Π·Π΄Π΅Π»Ρ‹, ΡƒΠ΄ΠΎΠ±Π½Ρ‹Π΅ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ

ΠžΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΡƒ:

Π—Π΄Π΅ΡΡŒ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ большС ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, Ρ‡Π΅ΠΌ Ρƒ Wildberries. НиТнСС мСню Ρ‚Π°ΠΊΠΆΠ΅ отобраТаСтся Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ страницС

ΠšΠΎΡ€Π·ΠΈΠ½Ρƒ, кстати, ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΈΠΊΠΎΠ½ΠΊΠΎΠΉ:

Π“Π»Π°Π²Π½ΠΎΠ΅, Ρ‡Ρ‚ΠΎ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ посыл понятСн ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ

А ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ:

Π‘Π»Π΅Π΄ΠΈΡ‚Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ тСкст ΠΈ изобраТСния Π½Π΅ Π½Π°ΠΊΠ»Π°Π΄Ρ‹Π²Π°Π»ΠΈΡΡŒ Π΄Ρ€ΡƒΠ³ Π½Π° Π΄Ρ€ΡƒΠ³Π°

Π§ΠΈΡ‚Π°ΠΉΡ‚Π΅ Ρ‚Π°ΠΊΠΆΠ΅:

ΠŸΡ€ΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½Π°: ΠΏΠΎΡˆΠ°Π³ΠΎΠ²Ρ‹ΠΉ ΠΏΠ»Π°Π½ Ρ€Π°Π±ΠΎΡ‚Ρ‹, совСты ΠΈ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ ΠΏΠΎ нишам

Booking.com

НазваниС сайта, ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡Π½Ρ‹ΠΉ ΡƒΠΆΠ΅ Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€ ΠΈ ΠΈΠΊΠΎΠ½ΠΊΠ° Π°Π²Ρ‚ΠΎΡ€ΠΈΠ·Π°Ρ†ΠΈΠΈ, Ρ€Π°Π·Π΄Π΅Π»Ρ‹ мСню ΠΈ Ρ„ΠΎΡ€ΠΌΠ° ΠΏΠΎΠ΄Π±ΠΎΡ€Π° Тилья

Π’Ρ‹Π±Π΅Ρ€Π΅ΠΌ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ попавшийся ΠΎΡ‚Π΅Π»ΡŒ:

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅: ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ‹ самыС Π²Π°ΠΆΠ½Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ удобств, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ‚ΠΎΡ‡Π½ΠΎ Π²Π°ΠΆΠ½Ρ‹ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ. ΠžΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ спрятаны ΠΏΠΎΠ΄ спойлСр, ΠΊΠ°ΠΊ ΠΈ описаниС

Π‘Π±Π΅Ρ€Π±Π°Π½ΠΊ

НазваниС, мСню, отдСлСния ΠΈ Π±Π°Π½ΠΊΠΎΠΌΠ°Ρ‚Ρ‹ Π²Ρ‹Π΄Π΅Π»Π΅Π½Ρ‹ особняком β€” Π²ΠΈΠ΄ΠΈΠΌΠΎ, это популярныС Ρ€Π°Π·Π΄Π΅Π»Ρ‹. Кнопка Β«ΠŸΠΎΠ·Π²ΠΎΠ½ΠΈΡ‚ΡŒΒ» рабочая: ΠΏΠ΅Ρ€Π΅ΠΊΠΈΠ΄Ρ‹Π²Π°Π΅Ρ‚ Π² ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ Ρ€Π°Π·Π΄Π΅Π» смартфона. НиТС Π±Π°Π½Π½Π΅Ρ€ с самой Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ Π½Π° Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠ΅ΠΉ

ΠžΡ‚ΠΊΡ€ΠΎΠ΅ΠΌ мСню:

Помимо ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню, Π²ΠΈΠ΄ΠΈΠΌ строку поиска: сайт ΠΌΠ°ΡΡˆΡ‚Π°Π±Π½Ρ‹ΠΉ, Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΡ‰Π΅ Π²Π±ΠΈΡ‚ΡŒ искомый запрос, Ρ‡Π΅ΠΌ ΠΈΡΠΊΠ°Ρ‚ΡŒ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ

Lexus

ВсС сдСлано ΠΏΠΎ ΠΊΠ°Π½ΠΎΠ½Π°ΠΌ мобильной вСрстки, ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ двиТСтся ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Π΅Ρ‚ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅. Но Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡŽΡ‚ вопросы ΠΊ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌ мСню

МнС Π»ΠΈΡ‡Π½ΠΎ нСпонятны послСдниС Π΄Π²Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ. ЧСтвСртая слСва β€” Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ сообщСниС? НСт, это ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹. А Π²ΠΎΡ‚ пятая с Ρ‚Π΅ΠΌ ΠΆΠ΅ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΌ посылом β€” Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ β€” Π½Π° самом Π΄Π΅Π»Π΅ ΠΎΡ‚Π²Π΅Ρ‚Ρ‹ Π½Π° вопросы ΠΈ обратная связь.

Π—Π°Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ классная Ρ„ΠΈΡˆΠΊΠ°: Ρ€Π°Π·Π΄Π΅Π», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π² Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ просматриваСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ, выдСляСтся Π±Π΅Π»Ρ‹ΠΌ. Π£Π΄ΠΎΠ±Π½ΠΎ!

Π§ΠΈΡ‚Π°ΠΉΡ‚Π΅ Ρ‚Π°ΠΊΠΆΠ΅:

ВнутрСнняя оптимизация сайтов

Π’β€”Π–

Помимо ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡Π½ΠΎΠ³ΠΎ мСню, ΠΈΠΊΠΎΠ½ΠΎΠΊ поиска ΠΈ Π°Π²Ρ‚ΠΎΡ€ΠΈΠ·Π°Ρ†ΠΈΠΈ, Π²ΠΈΠ΄ΠΈΠΌ Π²Π°ΠΆΠ½Ρ‹Π΅ Ρ€Π°Π·Π΄Π΅Π»Ρ‹ Β«Π£Ρ‡Π΅Π±Π½ΠΈΠΊΒ» ΠΈ «БообщСство». Они вынСсСны ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ ΠΈ Π² дСсктопной вСрсии

Ой! Появилось Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ:

ВсС Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ: Ρ„ΠΎΡ€ΠΌΠ° подписки Π½Π΅ Π·Π°ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ вСсь экран ΠΈ Π»Π΅Π³ΠΊΠΎ закрываСтся. Π’ ΠΎΠΊΠ½Π΅ ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ всСго Π΄Π²Π° поля: для ввСдСния ΠΏΠΎΡ‡Ρ‚Ρ‹ ΠΈΠ»ΠΈ Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π° ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«Π’ΠΎΠΉΡ‚ΠΈΒ». И, Ρ‡Ρ‚ΠΎ Π΅Ρ‰Π΅ Π»Π΅Π³Ρ‡Π΅, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π²ΠΎΠΉΡ‚ΠΈ Ρ‡Π΅Ρ€Π΅Π· соцсСти

Lenta.ru

Π’ Π›Π΅Π½Ρ‚Π΅.Ρ€Ρƒ всС Π΅Ρ‰Π΅ Π»Π°ΠΊΠΎΠ½ΠΈΡ‡Π½Π΅Π΅. Но Π½Π΅Ρ‚ поиска, Ρ‡Ρ‚ΠΎ достаточно Π½Π΅ΡƒΠ΄ΠΎΠ±Π½ΠΎ

Π—Π°Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ своя Ρ„ΠΈΡˆΠΊΠ° β€” Π»Π΅Π½Ρ‚Π° Π΄ΠΎΠ±Ρ€Π°:

Π’ΠΊΠ»ΡŽΡ‡ΠΈΠ² Π»Π΅Π½Ρ‚Ρƒ Π΄ΠΎΠ±Ρ€Π°, Π²Ρ‹ ΠΏΠΎΠ³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ΡΡŒ Π² ΠΌΠΈΡ€ «смСха, ΠΏΠΎΠ·ΠΈΡ‚ΠΈΠ²Π° ΠΈ Π΅Π΄ΠΈΠ½ΠΎΡ€ΠΎΠΆΠ΅ΠΊΒ», ΠΊΠ°ΠΊ ΡƒΠ²Π΅Ρ€ΡΡŽΡ‚ создатСли ΠΏΠΎΡ€Ρ‚Π°Π»Π°. Π’Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΠ² β€” ΠΏΠΎΠΏΠ°Π΄Π΅Ρ‚Π΅ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎ Π² Β«Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΌΠΈΡ€Β»

Π Π–Π”

ΠŸΡ€ΠΈΠ·Π½Π°Ρ‚ΡŒΡΡ, я боялась ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΊΡ€ΠΈΠ²ΡƒΡŽ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ. И Π½Π° Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Ρ‹: Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅, ΠΊΠ°ΠΊ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ ΠΊΠΎΠ½Π²Π΅Ρ€ΡΠΈΡŽ сайта, я рассматривала ΠΏΡ€ΠΈΠΌΠ΅Ρ€ старого сайта Π Π–Π” как… ΠΊΡ…ΠΌ, Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ. Но всС Ρƒ Π Π–Π” Ρ…ΠΎΡ€ΠΎΡˆΠΎ!

ВсС просто: ΠΎΡ‡ΠΊΠΈ β€” вСрсия для слабовидящих, Π²Ρ‹Π±ΠΎΡ€ языка, поиск ΠΈ мСню. Π£Π΄ΠΎΠ±Π½Ρ‹Π΅ поля Π²Π²ΠΎΠ΄Π° ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² назначСния ΠΈ ΠΊΠ°Π»Π΅Π½Π΄Π°Ρ€ΡŒ для Π²Ρ‹Π±ΠΎΡ€Π° Π΄Π°Ρ‚

Но Π΅ΡΡ‚ΡŒ ΠΈ Π»ΠΎΠΆΠΊΠ° дСгтя: Π·Π°Ρ‡Π΅ΠΌ-Ρ‚ΠΎ прСдлагаСтся ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π½Π° ΡΡ‚Π°Ρ€ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ сайта, Π° там…

О, мои глаза!

ΠŸΠΎΡ‡Ρ‚Π° России

МоТно сколько Ρ€ΡƒΠ³Π°Ρ‚ΡŒ Β«ΠŸΠΎΡ‡Ρ‚Ρƒ России», Π½ΠΎ мобильная вСрсия Ρƒ Π½ΠΈΡ… соотвСтствуСт соврСмСнным критСриям:

ΠžΡ‡Π΅Π½ΡŒ Π³Ρ€Π°ΠΌΠΎΡ‚Π½ΠΎ вынСсСна Π½Π° Π³Π»Π°Π²Π½ΡƒΡŽ услуга отслСТивания Ρ‚Ρ€Π΅ΠΊ-Π½ΠΎΠΌΠ΅Ρ€Π°. Π”ΡƒΠΌΠ°ΡŽ, Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ заходят Π½Π° сайт ΠŸΠΎΡ‡Ρ‚Ρ‹ России ΠΈΠΌΠ΅Π½Π½ΠΎ для этого дСйствия

Π‘ Ρ€Π°Π·Π΄Π΅Π»Π°ΠΌΠΈ Ρ‚ΠΎΠΆΠ΅ всС Π² порядкС:

ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π΄Π°ΡŽΡ‚ΡΡ подсказки: Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ адрСс, ΠΈ приводится пошаговая инструкция. ПолСй ΠΌΠ½ΠΎΠ³ΠΎ, Π½ΠΎ Π±Π΅Π· Π½ΠΈΡ… Π² этом случаС Π½ΠΈΠΊΠ°ΠΊ

ЛитРСс

Π’ Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈΠ²Π΅Π΄Ρƒ Π°Π½Ρ‚ΠΈΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ стал, ΡƒΠ²Ρ‹, Π»ΡŽΠ±ΠΈΠΌΡ‹ΠΉ ΠΌΠ½ΠΎΠ³ΠΈΠΌΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½ «ЛитРСс»:

Π‘ΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΠΈ мобильной вСрсии, каТСтся, Π½Π΅ ΡƒΡ‡Π»ΠΈ ΠΏΡ€Π°Π²ΠΈΠ»Π° соврСмСнных ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… вСрсий: всС прСдлоТСния ΡΠΌΠ΅ΡˆΠ°Π½Ρ‹ Π² ΠΊΡƒΡ‡Ρƒ, Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ распыляСтся

Π‘Ρ€Π°Π²Π½ΠΈΡ‚Π΅ с дСсктопной вСрсиСй:

На ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Π΅ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π° Ρ‚ΠΎ ΠΆΠ΅ мСню ΠΈ Ρ€Π°Π·Π΄Π΅Π»Ρ‹ смотрятся Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡ€Π³Π°Π½ΠΈΡ‡Π½Π΅Π΅. Для мобильной вСрсии Π½ΡƒΠΆΠ½ΠΎ всС ΡƒΠΏΡ€ΠΎΡΡ‚ΠΈΡ‚ΡŒ, ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚ΡŒ тСкст Π² ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡƒΠ±Ρ€Π°Ρ‚ΡŒ Π½Π΅ ΡΡ‚ΠΎΠ»ΡŒ Π²Π°ΠΆΠ½Ρ‹Π΅ Ρ€Π°Π·Π΄Π΅Π»Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΌΠ΅ΡˆΠ°Π½ΠΈΠ½Ρƒ ΠΈΠ· ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠΉ

ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ вСрсии сайтов 2021: Ρ‚Π΅Π½Π΄Π΅Π½Ρ†ΠΈΠΈ ΠΈ Π²Ρ‹Π²ΠΎΠ΄Ρ‹

  1. ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… вСрсий сайтов созданы ΠΏΠΎ ΠΏΡ€Π°Π²ΠΈΠ»Π°ΠΌ, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… я писала Π² Π½Π°Ρ‡Π°Π»Π΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ. Ушли Ρ‚Π΅ Π²Ρ€Π΅ΠΌΠ΅Π½Π°, ΠΊΠΎΠ³Π΄Π° Ρ‡Π΅ΠΌ Π½Π΅ΠΎΠ±Ρ‹Ρ‡Π½Π΅Π΅ β€” Ρ‚Π΅ΠΌ Π»ΡƒΡ‡ΡˆΠ΅. БСйчас Π°ΠΊΡ†Π΅Π½Ρ‚ дСлаСтся Π½Π΅ Π½Π° ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ, Π° Π½Π° удобство для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.
  2. UX, ΡŽΠ·Π°Π±ΠΈΠ»ΠΈΡ‚ΠΈ ΠΈ интСрфСйс β€” эта Ρ‚Ρ€ΠΎΠΈΡ†Π° Π΅Ρ‰Π΅ Π΄ΠΎΠ»Π³ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ Π² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ сайтов. UX, ΠΈΠ»ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΎΠΏΡ‹Ρ‚ β€” ΠΊΠ°ΠΊ Ρ€Π°Π· Ρ‚ΠΎ, ΠΊ Ρ‡Π΅ΠΌΡƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΡƒΠΆΠ΅ ΠΏΡ€ΠΈΠ²Ρ‹ΠΊ. А ΠΏΡ€ΠΈΠ²Ρ‹ΠΊ ΠΎΠ½, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠΎΡ€Π·ΠΈΠ½Π° Π±Ρ‹Π»Π° Π² ΠΏΡ€Π°Π²ΠΎΠΌ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΡƒΠ³Π»Ρƒ ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ°Π»Π°ΡΡŒ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΉ ΠΈΠΊΠΎΠ½ΠΊΠΎΠΉ. Если ΡΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½ΠΈΡ‡Π°Ρ‚ΡŒ ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΡƒ Π² Π²ΠΈΠ΄Π΅ Π»ΡƒΠΊΠΎΡˆΠΊΠ° с Π³Ρ€ΠΈΠ±Π°ΠΌΠΈ β€” Π½Π΅ Ρ„Π°ΠΊΡ‚, Ρ‡Ρ‚ΠΎ люди это оцСнят. Если Π·Π°Π΄Π²ΠΈΠ½ΡƒΡ‚ΡŒ ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ Π² Ρ„ΡƒΡ‚Π΅Ρ€ β€” Π²Ρ‹ Π»ΠΈΡˆΠΈΡ‚Π΅ΡΡŒ конвСрсий ΠΈ ΠΏΡ€ΠΈΠ±Ρ‹Π»ΠΈ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π½ΠΈΠΊΡ‚ΠΎ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π»ΠΈΡΡ‚Π°Ρ‚ΡŒ сайт Π΄ΠΎ ΠΊΠΎΠ½Ρ†Π°. Π—Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ Π΅Π³ΠΎ ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π²ΠΎΠΉ ΠΆΠ΅ слоТности Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΡ‰Π΅.
  3. ΠŸΡ€ΠΈΠ²Ρ‹Ρ‡Π½ΠΎΠ΅ Ρ€ΠΎΠΆΠ΄Π°Π΅Ρ‚ Π΅Π΄ΠΈΠ½ΠΎΠΎΠ±Ρ€Π°Π·Π½ΠΎΠ΅: ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ вСрсии сайтов становятся всС Π±ΠΎΠ»Π΅Π΅ ΡƒΠ½ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌΠΈ. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, это ΠΆΠ΄Π΅Ρ‚ ΠΈ дСсктопныС вСрсии, Π½ΠΎ Ρ‚Π°ΠΌ большС простора для творчСской мысли, ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΠΏΡ€ΠΎΡ‡. А Π² ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… вСрсиях Π½Π΅ Ρ€Π°Π·Π³ΡƒΠ»ΡΠ΅ΡˆΡŒΡΡ: Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€, поиск, ΠΊΠΎΡ€Π·ΠΈΠ½Π°, Π·Π½Π°Ρ‡ΠΎΠΊ Π°Π²Ρ‚ΠΎΡ€ΠΈΠ·Π°Ρ†ΠΈΠΈ β€” Π²ΠΎΡ‚ основныС элСмСнты, ΠΎΡ‚ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π½ΠΈΠΊΡƒΠ΄Π° Π½Π΅ дСнСшься. Или дСнСшься, Π½ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π΅ ΠΏΠΎΠΉΠΌΠ΅Ρ‚.
  4. ΠœΠΎΡ€Π°Π»ΡŒ: Π½Π΅ стоит ΠΈΠ·ΠΎΠ±Ρ€Π΅Ρ‚Π°Ρ‚ΡŒ вСлосипСд, ΠΊΠΎΠ³Π΄Π° ΡƒΠΆΠ΅ ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Π½Ρ‹ простыС ΠΈ понятныС вашим ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°ΠΌ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ. Когда ΠΌΡ‹ Π² «КокосС» создаСм сайты, ΠΌΡ‹ Π΄ΡƒΠΌΠ°Π΅ΠΌ Π½Π΅ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒΡΡ, Π° Ρ‡Ρ‚ΠΎΠ±Ρ‹ сайты приносили дСньги ΠΈΡ… Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Π°ΠΌ. И Π·Π½Π°Π΅ΠΌ, ΠΊΠ°ΠΊ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ.

Π‘Π΅ΠΊΡ€Π΅Ρ‚Ρ‹ использования сСмантичСской вСрстки Π² HTML5 | by Stas Bagretsov

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Π²Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅ ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ сСмантичСской Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΎΠΉ Π² HTML5 ΠΈ ΠΊΠ°ΠΊ это Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ сСмантичСский HTML5?

Если Π²Ρ‹ Π±ΠΎΠ»Π΅Π΅ ΠΌΠ΅Π½Π΅Π΅ Π·Π½Π°ΠΊΠΎΠΌΡ‹ с HTML, Ρ‚ΠΎ Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π·Π½Π°Ρ‚ΡŒ ΠΏΡ€ΠΎ HTML Ρ‚Π΅Π³ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ своём ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для форматирования ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° β€” ΠΎΠ½ΠΈ говорят Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π½Π° страницС. Они Π½Π΅ Π΄Π°ΡŽΡ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Ρ‚ΠΈΠΏΡƒ содСрТащСгося ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΈΠ»ΠΈ ΠΊΠ°ΠΊΡƒΡŽ Ρ€ΠΎΠ»ΡŒ ΠΈΠ³Ρ€Π°Π΅Ρ‚ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π½Π° страницС.

ΠŸΠ΅Ρ€Π΅Π²ΠΎΠ΄ ΡΡ‚Π°Ρ‚ΡŒΠΈ How to Use Semantic HTML5 for Document Structure β€” a guide.

πŸ‘‰ΠœΠΎΠΉ Π’Π²ΠΈΡ‚Ρ‚Π΅Ρ€ β€” Ρ‚Π°ΠΌ ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ· ΠΌΠΈΡ€Π° Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄Π°, Π΄Π° ΠΈ Π²ΠΎΠΎΠ±Ρ‰Π΅ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌπŸ––. ΠŸΠΎΠ΄ΠΏΠΈΡΡ‹Π²Π°ΠΉΡ‚Π΅ΡΡŒ, Π±ΡƒΠ΄Π΅Ρ‚ интСрСсно: ) ✈️

БСмантичСский HTML5 устраняСт этот нСдостаток, опрСдСляя Ρ‚ΠΎΡ‡Π½Ρ‹Π΅ Ρ‚Π΅Π³ΠΈ для пояснСния Ρ‡Π΅Ρ‚ΠΊΠΎΠΉ Ρ€ΠΎΠ»ΠΈ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π½Π° страницС. Π­Ρ‚Π° Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ информация ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Ρ€ΠΎΠ±ΠΎΡ‚Π°ΠΌ/индСксаторам, Ρ‚Π°ΠΊΠΈΠΌ ΠΊΠ°ΠΊ Google ΠΈ Bing Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ½ΡΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π²Π°ΠΆΠ΅Π½, ΠΊΠ°ΠΊΠΎΠΉ являСтся второстСпСнным, ΠΊΠ°ΠΊΠΎΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅. Добавляя сСмантичСскиС HTML Ρ‚Π΅Π³ΠΈ Π½Π° ваши страницы, Π²Ρ‹ Π΄Π°Π΅Ρ‚Π΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, которая ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ поисковикам ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ Ρ€ΠΎΠ»ΠΈ ΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ Π²Π°ΠΆΠ½ΠΎΡΡ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Ρ… частСй Π²Π°ΡˆΠΈΡ… страниц.

Π­Ρ‚ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π½Π΅ сСмантичСских HTML элСмСнтов. Они слуТат ΠΊΠ°ΠΊ Ρ…Ρ€Π°Π½ΠΈΡ‚Π΅Π»ΠΈ для ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ. Они Π½Π΅ Π΄Π°ΡŽΡ‚ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎ Ρ€ΠΎΠ»ΠΈ содСрТимого ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π½Π° страницС.

А это сСмантичСскиС элСмСнты. Они ясно ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ Ρ€ΠΎΠ»ΡŒ содСрТимого ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°.

ΠŸΠΎΡ‡Π΅ΠΌΡƒ Π½Π°Π΄ΠΎ это ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ?

Для Π²Π½ΠΈΠΌΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π»Π΅Π³ΠΊΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ части Π²Π΅Π±-страницы с ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ взгляда. Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ, мСню ΠΈ основной ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ β€” всС ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ, Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎ. А Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π²Ρ‹ слСпы.

Google ΠΈ Bing Π±ΠΎΡ‚Ρ‹, Ссли ΠΈ Π½Π΅ слСпы, Ρ‚ΠΎ ΠΈΠΌΠ΅ΡŽΡ‚ ΡΠ΅Ρ€ΡŒΡ‘Π·Π½ΠΎΠ΅ ослаблСниС со Π·Ρ€Π΅Π½ΠΈΠ΅ΠΌ. Для Π½ΠΈΡ… Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Π΅ пояснСния Ρ„Π΅Π½ΠΎΠΌΠ΅Π½Π°Π»ΡŒΠ½ΠΎ слоТно ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΈ ΠΏΠΎΠ½ΡΡ‚ΡŒ.

Им Π½ΡƒΠΆΠ½Π° ваша ΠΏΠΎΠΌΠΎΡ‰ΡŒ. Если Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒ поисковикам, какая Ρ‡Π°ΡΡ‚ΡŒ страницы являСтся Ρ…Π΅Π΄Π΅Ρ€ΠΎΠΌ, какая ΠΏΠΎΠ΄Π²Π°Π»ΠΎΠΌ ΠΈ какая Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠ΅ΠΉ, Ρ‚ΠΎ ΠΎΠ½ΠΈ поблагодарят вас. Π‘Π°ΠΌΠΎΠ΅ Π²Π°ΠΆΠ½ΠΎΠ΅, Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΈΠΌ какая Ρ‡Π°ΡΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° самая ваТная, дСлая это Π²Ρ‹ Π΄Π°Π΅Ρ‚Π΅ ΠΈΠΌ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹Π΅ инструкции ΠΏΠΎ ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Π·Π°Ρ†ΠΈΠΈ вашСго ΠΆΠ΅ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°.

Most important content β€” самый Π²Π°ΠΆΠ½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚

Π‘Π°ΠΌΠΎ ΠΏΠΎ сСбС, использованиС HTML5 Π½Π΅ ΠΏΡ€ΠΎΠΈΠ·Π²Π΅Π΄Π΅Ρ‚ Ρ€Π΅Π²ΠΎΠ»ΡŽΡ†ΠΈΠΈ Π² Ρ€Π°Π±ΠΎΡ‚Π΅ вашСго SEO. Как Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅, ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎΠ΅ SEO это ΡΠΎΠ²ΠΎΠΊΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΈΡ… ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΡ… ΠΌΠ΅Π»ΠΊΠΈΡ… Π΄Π΅Ρ‚Π°Π»Π΅ΠΉ. И это ΠΎΠ΄Π½Π° ΠΈΠ· Ρ‚Π°ΠΊΠΈΡ… ΠΌΠ°Π»Ρ‹Ρ… Π΄Π΅Ρ‚Π°Π»Π΅ΠΉ, которая ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° вашСго сайта со стороны любого поисковика, Ρ‡Ρ‚ΠΎ Π·Π°ΠΌΠ΅Ρ‚Π½ΠΎ внСсСт Π²ΠΊΠ»Π°Π΄ Π² ваши SEO усилия.

Бмотря Π½Π°ΠΏΠ΅Ρ€Π΅Π΄, учитывая ΠΊΠ°ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π·Π²ΠΈΠ²Π°Ρ‚ΡŒΡΡ поисковая оптимизация Π² прСдстоящиС Π³ΠΎΠ΄Π°, Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹ΠΉ ΠΈ связная коммуникация с этими систСмами Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Π΄Π²ΡƒΡ… ΠΊΡ€Π°Π΅ΡƒΠ³ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ΠΊΠ°ΠΌΠ½Π΅ΠΉ вашСй SEO/AEO стратСгии.

Как всё это выглядит?

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ сСмантичСских HTML Ρ‚Π΅Π³ΠΎΠ² Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ Π² сСбя <nav>, <footer> ΠΈ <section>. Π’Π°ΠΊ ΠΆΠ΅ Π΅ΡΡ‚ΡŒ Π³ΠΎΡ€Π°Π·Π΄ΠΎ большС ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² сСмантичСских HTML5 Ρ‚Π΅Π³ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½Ρ‹, для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° <blockquote> ΠΈ <em>, Π½ΠΎ Π² этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ Ρ€Π°Π·Π±Π΅Ρ€Π΅ΠΌ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚Π΅ сСмантичСскиС HTML Ρ‚Π΅Π³ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π°ΠΌ понадобятся для простого раздСлСния ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° страницы Π½Π° Ρ€Π°Π·Π½Ρ‹Π΅ части.

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ HTML5 Ρ‚Π΅Π³ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ вмСсто <div> Ρ‚Π΅Π³ΠΎΠ², Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ вашСй страницы Π½Π° опрСдСляСмыС части, каТдая ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΡƒΡŽ Ρ€ΠΎΠ»ΡŒ. Как Π²Ρ‹ ΡƒΠΆΠ΅ поняли, Ρ‚Π°ΠΊΠΈΠ΅ систСмы ΠΊΠ°ΠΊ Google ΠΈ Bing Π»ΡŽΠ±ΡΡ‚ это.

Ясная установка Π³Ρ€Π°Π½ΠΈΡ† ΠΈ подробная расстановка Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² Ρ€ΠΎΠ»Π΅ΠΉ для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ части ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, Π΄Π΅Π»Π°Π΅Ρ‚ страницу Π³ΠΎΡ€Π°Π·Π΄Ρƒ понятнСС ΠΈ Π»Π΅Π³Ρ‡Π΅ для ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ индСксации для Google ΠΈ Bing.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ эти Ρ‚Π΅Π³ΠΈ Π²Π΅Π΄ΡƒΡ‚ сСбя ΠΊΠ°ΠΊ <div> Ρ‚Π΅Π³ΠΈ, Ρ‡Ρ‚ΠΎ Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ <div> Π±Π΅Π· влияния Π½Π° ΠΎΠ±Ρ‰ΠΈΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚. Π’ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ сСмантичСского HTML5 ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π»Π΅Π³ΠΊΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΎ Π½Π°Ρ…ΠΎΠΆΠ΄Π΅Π½ΠΈΠ΅ΠΌ подходящСй ΠΏΠ°Ρ€Ρ‹ <div> ΠΈ </div> ΠΈ Π΅Ρ‘ Π·Π°ΠΌΠ΅Π½ΠΎΠΉ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ сСмантичСского HTML5

Π‘ΡƒΠΏΠ΅Ρ€ простой сСмантичСский HTML5 ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

Π’ΡƒΡ‚ ΠΌΡ‹ довольно просто опрСдСляСм, ΠΊΠ°ΠΊΡƒΡŽ Ρ€ΠΎΠ»ΡŒ ΠΈΠ³Ρ€Π°Π΅Ρ‚ каТдая Ρ‡Π°ΡΡ‚ΡŒ страницы. Когда Π²Ρ‹ Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ HTML5, Ρ‚ΠΎ Π²ΠΎΡ‚ ΠΊΠ°ΠΊ бСзопаснСС всСго это Π½Π°Ρ‡Π°Ρ‚ΡŒ β€” header, nav, main, footer.

Π›ΡƒΡ‡ΡˆΠ΅ ΠΈΠΌΠ΅Ρ‚ΡŒ супСр простоС исполнСниС, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π½Π° 100% Π²Π΅Ρ€Π½ΠΎΠ΅, Ρ‡Π΅ΠΌ слоТноС, Π½ΠΎ Π½Π΅Π²Π΅Ρ€Π½ΠΎΠ΅.

ΠŸΡ€ΠΈ Π½Π΅Π²Π΅Ρ€Π½ΠΎΠΌ исполнСнии, Π²Ρ‹ посылаСтС ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΡ€Π΅Ρ‡Π°Ρ‰ΠΈΠ΅ ΠΈ ΡΠ±ΠΈΠ²Π°ΡŽΡ‰ΠΈΠ΅ с Ρ‚ΠΎΠ»ΠΊΡƒ сигналы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠ΄Π΅Π»Π°ΡŽΡ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ…ΡƒΠΆΠ΅, Π° Π½Π΅ Π»ΡƒΡ‡ΡˆΠ΅.

ΠŸΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ΅ ΠΈ простоС Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ это ΡƒΠΆΠ΅ большой шаг Π²ΠΏΠ΅Ρ€Π΅Π΄ Π² Π²Π°ΡˆΠΈΡ… коммуникациях с поисковиками. НС Π±ΡƒΠ΄ΡŒΡ‚Π΅ Ρ‡Ρ€Π΅Π·ΠΌΠ΅Ρ€Π½ΠΎ Π°ΠΌΠ±ΠΈΡ†ΠΈΠΎΠ·Π½Ρ‹ΠΌΠΈ. Π‘Π΄Π΅Π»Π°Π΅Ρ‚Π΅ Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ большС ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ, Ρ‡Π΅ΠΌ Ρ€Π΅ΡˆΠΈΡ‚Π΅.

Π‘ΠΎΠ»Π΅Π΅ слоТныС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹

ИспользованиС сСкций ΠΈ <article>:

Π’ΡƒΡ‚ ΠΌΡ‹ сдСлали ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ систСму Π² нашСм Π³Π»Π°Π²Π½ΠΎΠΌ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π΅. Π’ΡƒΡ‚ Π΅ΡΡ‚ΡŒ ΠΎΡ…Π²Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‰Π°Ρ всё <article>, которая опрСдСляСт Ρ†Π΅Π½Ρ‚Ρ€Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ‚Π΅Π³Π° <main>. Π­Ρ‚ΠΎ Π΄Π°Ρ‘Ρ‚ ΠΊΡ€Π°Ρ‚ΠΊΠΈΠΉ ΠΎΠ±Π·ΠΎΡ€ Ρ‚Π΅ΠΌΡ‹ этой части страницы. Π’ этой <article> ΠΌΡ‹ ΠΈΠΌΠ΅Π΅ΠΌ нСсколько ΠΏΠΎΠ΄-Ρ‚Π΅ΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΡŽΡ‚ ΠΎΡΠ½ΠΎΠ²Π½ΡƒΡŽ Ρ‚Π΅ΠΌΡƒ, которая опрСдСляСт Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΌΠΈ сСкциями.

ΠŸΡ€ΠΈΠΌΠΈΡ‚Π΅ ΠΊ свСдСнию, Ρ‡Ρ‚ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½ (ΠΎΡ€Π°Π½ΠΆΠ΅Π²Ρ‹Π΅ Π±Π»ΠΎΠΊΠΈ) Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для опрСдСлСния сСмантичСских Π·ΠΎΠ½ страницы. Выглядит Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ±ΠΈΠ²Π°ΡŽΡ‰ΠΈΠΌ с Ρ‚ΠΎΠ»ΠΊΡƒ, Π½ΠΎ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ довольно Ρ‡Π΅Ρ‚ΠΊΠΎ, Ρ‡Ρ‚ΠΎ шаблон HTML ΠΈ сСмантичСский HTML ΠΈΠΌΠ΅ΡŽΡ‚ Ρ€Π°Π·Π½Ρ‹Π΅ Ρ€ΠΎΠ»ΠΈ.

Π’ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ ΠΆΠ΅ ΠΌΠΈΡ€Π΅, сСмантичСская Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° часто слСдуСт Π·Π° основной Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΎΠΉ Π±ΠΎΠ»Π΅Π΅ явно, Ρ‡Π΅ΠΌ Π² этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅. Π—Π°ΠΏΠΎΠΌΠ½ΠΈΡ‚Π΅ Π³Π»Π°Π²Π½ΠΎΠ΅ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ: БСкция Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΠ΅Ρ‚ Ρ‡Π°ΡΡ‚ΡŒ Ρ‡Π΅Π³ΠΎ-Ρ‚ΠΎ Π΅Ρ‰Ρ‘, Π° <article> это Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ само ΠΏΠΎ сСбС. Π’Π°ΠΊ ΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠΈΡ‚Π΅ Π²ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Ρ‚ΡƒΡ‚ ΠΌΡ‹ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΡΠ΅ΠΊΡ†ΠΈΡŽ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π² ΠΏΠΎΠ΄Π²Π°Π». ЛогичСски, ΠΊΠ°ΠΊ ΠΈ Π² шапкС, ΠΏΠΎΠ΄Π²Π°Π» содСрТит элСмСнты Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ.

Бвязанный Aside

Π’ΡƒΡ‚ ΠΌΡ‹ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ Π΄Π²Π΅ части связанного ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΊ Π³Π»Π°Π²Π½ΠΎΠΉ <article> ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ aside, ΠΌΡ‹ опрСдСляСм Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ связанный ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° (aside) ΠΎΠΏΡ†ΠΈΠΎΠ½Π°Π»Π΅Π½. Π’ΠΎ Π΅ΡΡ‚ΡŒ основная сСкция ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠΊΠ°Π·Π°Π½Π° Π±Π΅Π· aside ΠΈ всС Ρ€Π°Π²Π½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ понятна.

КосвСнно связанный aside

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ aside Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ сайдбаром рядом с основным ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ. Он Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ для Π±Π»ΠΎΠΊΠΎΠ² ΠΏΠΎΠ΄ основным ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Π² сСбя Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, тСкст ΠΈ ссылку Π½Π° Π΄Ρ€ΡƒΠ³ΡƒΡŽ страницу.

Π’ΡƒΡ‚ ΠΌΡ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠ»ΠΈ нСсколько косвСнно связанного ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π½Π° страницС, Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ основного <article> для ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. Π’ΡƒΡ‚ ΠΌΡ‹ опрСдСляСм, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ сбоку Π½Π΅ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ связан с Π³Π»Π°Π²Π½ΠΎΠΉ <article>. И этого Π²ΠΏΠΎΠ»Π½Π΅ достаточно Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв.

Наша Ρ„ΠΈΠ½Π°Π»ΡŒΠ½Π°Ρ вСрсия

ΠŸΠΎΠ»Π΅Π·Π½Ρ‹Π΅ совСты

<section> vs. <article>

Π­Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ обсуТдаСмая Ρ‚Π΅ΠΌΠ°. И Π½Π΅Ρ‚ Ρ‡Π΅Ρ‚ΠΊΠΈΡ… ΠΏΡ€Π°Π²ΠΈΠ» ΠΎ <sections> ΠΈ <articles>, Π° ΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ довольно Π³ΠΈΠ±ΠΊΠΎΠ΅ само ΠΏΠΎ сСбС. Они Π±ΠΎΠ»Π΅Π΅ ΠΌΠ΅Π½Π΅Π΅ ΠΏΠΎΡ…ΠΎΠΆΠΈ ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½Ρ‹ взаимозамСняСмым способом Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв. Волько Π±ΡƒΠ΄ΡŒΡ‚Π΅ ΡƒΠ²Π΅Ρ€Π΅Π½Ρ‹ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΈΡ… использованиС Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎ ΠΈ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ.

Π›ΠΈΡ‡Π½Ρ‹ΠΉ совСт. Π― Π·Π°ΠΌΠ΅Ρ‚ΠΈΠ», Ρ‡Ρ‚ΠΎ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ сСкции Π²Π½ΡƒΡ‚Ρ€ΠΈ <article> ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, Π»ΠΎΠ³ΠΈΡ‡Π½Π΅Π΅ ΠΊΠ°ΠΊ для поисковика, Ρ‚Π°ΠΊ ΠΈ для Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠ°. Π’Π°ΠΊ HTML ΠΊΠΎΠ΄ Π»Π΅Π³Ρ‡Π΅ Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°.

Π’Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ элСмСнты

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π²ΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒ Π² сСбя Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты. Для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°, <article> ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ свой собствСнный <header>, <footer>, <h3> ΠΈ Π΄Π°ΠΆΠ΅ <nav> (Π°Π½ΠΊΠΎΡ€Ρ‹ ΠΊΠ°ΠΊ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€). Π― Π½Π΅ Π΄Π°Π» ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ для этого «супСр влоТСния» ΠΈ этому Π΅ΡΡ‚ΡŒ своя ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°. Π‘ Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния SEO Π½Π΅Ρ‚ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΉ ΠΏΠΎΠ»ΡŒΠ·Ρ‹ ΡƒΡ…ΠΎΠ΄ΠΈΡ‚ΡŒ Ρ‚Π°ΠΊ Π³Π»ΡƒΠ±ΠΎΠΊΠΎ Π² сСмантичСский HTML5.

Как ΡƒΠΏΠΎΠΌΠΈΠ½Π°Π»ΠΎΡΡŒ Π²Ρ‹ΡˆΠ΅, для SEO Ρ†Π΅Π»Π΅ΠΉ, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠΊΠΎΠ½Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π½Π° создании Ρ‡Π΅Ρ‚ΠΊΠΎΠ³ΠΎ ΠΈ простой структуры.

Π§Π΅Π³ΠΎ НЕ ДЕЛАВЬ

ΠŸΡ€ΠΎΡΡ‚ΠΎ ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π°ΡŽ. Π― Π²ΠΈΠ΄Π΅Π» ΠΌΠ½ΠΎΠ³ΠΎ сайтов, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΡ… Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΊΠ°ΠΊ руководство для примСнСния HTML5. Как ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅, это Π½Π΅ Ρ‚ΠΎ для Ρ‡Π΅Π³ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ сСмантичСский HTML5.

Π­Ρ‚ΠΎΡ‚ Π½Π΅ΠΎΠ±Ρ‹Ρ‡Π°ΠΉΠ½ΠΎ простой ΠΏΡ€ΠΈΠΌΠ΅Ρ€ просто Π΄ΡƒΠ±Π»ΠΈΡ€ΡƒΠ΅Ρ‚ Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΡŽ шаблона. Π‘ΠΎΠ»Π΅Π΅ Ρ‡Π΅ΠΌ бСссмыслСнно, ΠΎΠ½ опрСдСляСт Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ страница состоит ΠΈΠ· 4 Ρ€Π°Π·Π½Ρ‹Ρ… Ρ‚Π΅ΠΌ, вмСсто ΠΎΠ΄Π½ΠΎΠΉ Π³Π»Π°Π²Π½ΠΎΠΉ Ρ‚Π΅ΠΌΡ‹ ΠΈ 3-Ρ… ΠΏΠΎΠ΄Ρ‚Π΅ΠΌ. Π―Π²Π½ΠΎ давая Π²Π²ΠΎΠ΄ΡΡ‰ΡƒΡŽ Π² Π·Π°Π±Π»ΡƒΠΆΠ΄Π΅Π½ΠΈΠ΅ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ для поисковиков, такая схСма Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Π½Π΅Π³Π°Ρ‚ΠΈΠ²Π½ΠΎΠ΅ влияния для своСго понимания Π² Ρ†Π΅Π»ΠΎΠΌ.

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ шаги?

ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ сСмантичСского HTML5 Π½Π° Π²Π°ΡˆΠΈΡ… страницах Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡Ρƒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ для поисковиков. Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ хотят Ρ‚ΠΎ, ΠΎ Ρ‡Π΅ΠΌ Π²ΠΎΠΎΠ±Ρ‰Π΅ ваш сайт. Они хотят Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ясно Π³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΈ ΠΈΠΌ Π½Π° понятном ΠΈΠΌ языкС ΠΈ ΠΎΠ½ΠΈ хотят, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΎΠ±ΡƒΡ‡Π°Π»ΠΈ ΠΈΡ…. По-этому Π΄Π΅Π»Π°ΠΉΡ‚Π΅ это.

ΠžΠ±Ρ‰Π΅Π½ΠΈΠ΅

ΠžΠ±Ρ‰Π΅Π½ΠΈΠ΅ с поисковиками (HTML5 ΠΈΠΌΠ΅Π΅Ρ‚ Π²Π°ΠΆΠ½ΡƒΡŽ Ρ€ΠΎΠ»ΡŒ) это ΠΎΠ΄Π½Π° ΠΈΠ· Π΄Π²ΡƒΡ… ΠΊΠΎΠ»ΠΎΠ½ долгосрочной SEO стратСгии, которая ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Ρ‚ ΠΊ успСху Π² ΠΌΠΈΡ€Π΅ Π³Π΄Π΅ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ для поисковых систСм. Π•ΡΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Ρ… Π²Π΅Ρ‰Π΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ общСния. И сСмантичСский HTML5 Ρ‚ΠΎΠΌΡƒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€. Schema Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° это Π΅Ρ‰Ρ‘ ΠΎΠ΄ΠΈΠ½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€.

ΠΠ°Π΄Π΅ΠΆΠ½ΠΎΡΡ‚ΡŒ

Вторая ΠΊΠΎΠ»ΠΎΠ½Π½Π° это Π½Π°Π΄Π΅ΠΆΠ½ΠΎΡΡ‚ΡŒ. Π•ΡΡ‚ΡŒ Ρ‚Π°ΠΊΠΆΠ΅ ΠΊΠ»Π΅Π²Ρ‹Π΅ Π²Π΅Ρ‰ΠΈ, дСлая ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ усилитС Π΄ΠΎΠ²Π΅Ρ€ΠΈΠ΅ ΠΊ сСбС. ВсС SEO ΠΈ AEO сходятся ΠΊ ΠΎΠ±Ρ‰Π΅Π½ΠΈΡŽ ΠΈ надСТности.

Π’ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΠ΅: памятка для Ρ…ΠΎΡ€ΠΎΡˆΠ΅ΠΉ HTML5 SEO Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ

Π‘Ρ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€Π°, Π²Π°ΠΆΠ½ΠΎΡΡ‚ΡŒ, Ρ€ΠΎΠ»ΠΈ ΠΈ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΡ‡Π½ΠΎΡΡ‚ΡŒ это Π²Π΅Ρ‰ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ люди часто ΠΏΠΎΠ½ΠΈΠΌΠ°ΡŽΡ‚ инстинктивно Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ шаблона. ΠŸΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ΅ использованиС сСмантичСского HTML5 вмСсто <div> сдСлаСт ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ этого Ρ‚Π°ΠΊΠΈΠΌ ΠΆΠ΅ простым ΠΈ для поисковиков.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Ρ…ΠΎΡ€ΠΎΡˆΠ°Ρ вСрстка ΠΈ ΠΏΠΎΡ‡Π΅ΠΌΡƒ ΠΎΠ½Π° Ρ‚Π°ΠΊ Π²Π°ΠΆΠ½Π°?

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Ρ…ΠΎΡ€ΠΎΡˆΠ°Ρ вСрстка?

К соТалСнию, Π² нашСм быстро Ρ€Π°Π·Π²ΠΈΠ²Π°ΡŽΡ‰Π΅ΠΌΡΡ общСствС слоТно ΡƒΡΠ»Π΅Π΄ΠΈΡ‚ΡŒ Π·Π° Π½ΠΎΠ²Ρ‹ΠΌΠΈ тСндСнциями ΠΈ тСхнологиями, ΠΈ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Ρ‚ΠΎΡ‡Π½Ρ‹ΠΉ список всСх ΠΏΡ€Π°Π²ΠΈΠ» β€œΡ…ΠΎΡ€ΠΎΡˆΠ΅ΠΉ вСрстки”, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ вСроятно, Ρ‚ΠΎ Ρ‡Ρ‚ΠΎ сСгодня frontend-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ использовал, ΠΊΠ°ΠΊ Π½ΠΎΠ²ΡˆΠ΅ΡΡ‚Π²ΠΎ, Π·Π°Π²Ρ‚Ρ€Π° ΡƒΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΠΌ. ΠŸΡ€ΠΈ этом, всё ΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ нСсколько ΠΏΡ€Π°Π²ΠΈΠ», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΎΠ±Π»ΡŽΡΡ‚ΠΈ, Ρ‡Ρ‚ΠΎ Π±Ρ‹ сайт Π±Ρ‹Π» качСствСнным ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ. Β 

Π’ ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ, это Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎΠ΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ элСмСнтов сайта Π½Π° любом устройствС ΠΈ с Π»ΡŽΠ±Ρ‹ΠΌ Β Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ дисплСя. Π’Π°ΠΆΠ½ΠΎΡΡ‚ΡŒ Π°Π΄Π°ΠΏΡ‚Π°Ρ†ΠΈΠΈ Π²Π΅Π±-страницы ΠΏΠΎΠ΄ смартфоны, ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Ρ‹, ΠΌΠΎΠ½ΠΎΠ±Π»ΠΎΠΊΠΈ ΠΈ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Ρ‹ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ. Π’Ρ‹ Ρ‚ΠΎΠΆΠ΅ ΠΊΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ, Π² срочных поисках Π½ΠΎΠΌΠ΅Ρ€Π° Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π°, имСя Π² Ρ€ΡƒΠΊΠ°Ρ… Ρ‚ΠΎΠ»ΡŒΠΊΠΎ смартфон, заглядывали Π½Π° сайт ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ, ΠΈ наблюдали Ρ‚Π°ΠΊΡƒΡŽ ΡΠΈΡ‚ΡƒΠ°Ρ†ΠΈΡŽ: сайт ΠΎΡ‡Π΅Π½ΡŒ малСнький ΠΈ Π½Π°Π΄ΠΎ Β«Π·ΡƒΠΌΠΈΡ‚ΡŒΒ», Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π·Π°Π²Π΅Ρ‚Π½Ρ‹ΠΉ Π½ΠΎΠΌΠ΅Ρ€. ПослС приблиТСния Π½ΠΎΠΌΠ΅Ρ€Π° ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ Π½Π°ΠΆΠ°Ρ‚ΡŒ Π½Π° Π½Π΅Π³ΠΎ, ΠΈ ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Ρ‡Ρ‚ΠΎ Π±Ρ‹ сразу начался Π²Ρ‹Π·ΠΎΠ².Β  Но ΡƒΠ²Ρ‹ Π½ΠΎΠΌΠ΅Ρ€ скопировался Π±Π΅Π· ΠΊΠΎΠ΄Π° ΠΈΠ»ΠΈ Π½Π΅ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ. Π­Ρ‚ΠΎ ΠΈ Π΅ΡΡ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ Π°Π΄Π°ΠΏΡ‚Π°Ρ†ΠΈΠΈ, вся ваТная информация Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ Π½Π° Π²ΠΈΠ΄Ρƒ ΠΈ лСгкодоступна. Π’Π°ΠΊΠΆΠ΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Π² Π½Π°ΡˆΠΈΡ… Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π°Ρ… ΡƒΠΆΠ΅ Π΄Π°Π²Π½ΠΎ ΡƒΠΌΠ΅ΡŽΡ‚ Π·Π²ΠΎΠ½ΠΈΡ‚ΡŒ ΠΈ Π½Π° Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½, ΠΈ Π½Π° skype, ΠΈ Π΅Ρ‰Π΅ ΠΌΠ½ΠΎΠ³ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ. НС ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ² этот ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ, Π²Ρ‹ ΠΏΠΎΠΉΠ΄Π΅Ρ‚Π΅ ΠΈΡΠΊΠ°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ сайт, Π° вСдь ΠΏΠΎΠΊΡƒΠΏΠΊΠ° Π±Ρ‹Π»Π° Ρ‚Π°ΠΊ Π±Π»ΠΈΠ·ΠΊΠ°. Π§Ρ‚ΠΎ Π΅Ρ‰Π΅ Ρ‚ΠΎΡ‡Π½ΠΎ Π½Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ΡŒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠΎΠΊΡƒΠΏΠΊΡƒ, Π΄Π° ΠΈ ΠΏΠΎΡ‡Ρ‚ΠΈ любоС Π½ΡƒΠΆΠ½ΠΎΠ΅ дСйствиС Π½Π° Π²Π΅Π±-сайтС ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ΄ ΡƒΠ³Ρ€ΠΎΠ·Ρƒ, Ρ‚Π°ΠΊ это ΡΡŠΠ΅Ρ…Π°Π²ΡˆΠ°Ρ вСрстка. Один Π±Π»ΠΎΠΊ Π»Π΅Π·Π΅Ρ‚ Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ, ΠΈ сайт прСвращаСтся Π² ΠΊΠ°ΡˆΡƒ. НС Π΄ΡƒΠΌΠ°ΡŽ, Ρ‡Ρ‚ΠΎ Π’Ρ‹ Ρ…ΠΎΡ‚Π΅Π»ΠΈ Π±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠΉ сайт, Π½Π΅ ΠΎ говоря ΡƒΠΆΠ΅ ΠΎ Π²Π»Π°Π΄Π΅Π½ΠΈΠ΅ этим сайтом.Β 

НС ΠΎΡ‡Π΅Π½ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΎ читаСтся тСкст, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΡΡŠΠ΅Ρ…Π°Π» Вакая Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ, Π½Π΅ позволяСт Π½Π°ΠΌ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с мСню, Π½Π΅ с Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ, Π½Π΅ Π² ΠΏΠΎΠ΄Π²Π°Π»Π΅

Π•Ρ‰Π΅ Π½Π΅ ΠΌΠ°Π»ΠΎ Π²Π°ΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Π΅Π±-сайт Π±Ρ‹Π» кроссбраузСрным, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ отобраТался максимально ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ Π½Π° всСх Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…. ΠšΠΎΡ€Π½ΠΈ этой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ уходят Π΄Π°Π»Π΅ΠΊΠΎ Π² ΠΏΡ€ΠΎΡˆΠ»ΠΎΠ΅, ΠΊΠΎΠ³Π΄Π° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚, Π° вмСстС с Π½ΠΈΠΌ ΠΈ ΠΏΠ΅Ρ€ΡΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Ρ‹ стали доступными ΠΈ Π½Π°Ρ‡Π°Π»ΠΈ Π½Π°Π±ΠΈΡ€Π°Ρ‚ΡŒ ΠΏΠΎΠΏΡƒΠ»ΡΡ€Π½ΠΎΡΡ‚ΡŒ, Ρ‚Ρ€ΡƒΠ΄Π½ΠΎ Π±Ρ‹Π»ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€. Β ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎ Π±Ρ‹ Π·Π°Π΄Π°Ρ‚ΡŒ Ρ‚Π΅Π½ΡŒ элСмСнту, это свойство Π½Π°Π΄ΠΎ Π±Ρ‹Π»ΠΎ ΠΏΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ, Ρ‡Π΅ΠΌ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅ Π½Π΅ ΠΌΠ°Π»ΠΎ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠΎΠ² ΠΏΡ€Π΅Π½Π΅Π±Ρ€Π΅Π³Π°Π»ΠΎ. Π­Ρ‚ΠΎ Π΅Ρ‰Π΅ Π²Π΅Ρ€Ρ…ΡƒΡˆΠΊΠ° айсбСрга, Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΈΠΌΠ΅ΡŽΡ‚ΡΡ свои стили для интСрфСйсных элСмСнтов, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€: поля Π²Π²ΠΎΠ΄Π°, ссылки, ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π²Π΅Π±-страницы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΊΠ»ΠΈΠΊΠ½ΡƒΡ‚ΡŒ, навСсти курсор ΠΈΠ»ΠΈ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ.Β  На соврСмСнных сайтах, стандартныС свойства Π½Π° Ρ‚Π΅Ρ… ΠΆΠ΅ полях Π²Π²ΠΎΠ΄Π°, Π²ΠΎΡΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°ΡŽΡ‚ΡΡ, ΠΊΠ°ΠΊ Π΄ΡƒΡ€Π½ΠΎΠΉ Ρ‚ΠΎΠ½ (Ссли это Π½Π΅ сайт государствСнного учрСТдСния). К ΡΡ‡Π°ΡΡ‚ΡŒΡŽ с Ρ€Π°Π·Π²ΠΈΡ‚ΠΈΠ΅ΠΌ Π²Π΅Π±-Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ создавались ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ, Π² Π²ΠΈΠ΄Π΅ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… Ρ„Π°ΠΉΠ»ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ программистам ΠΎΡΡ‚Π°Π²Π°Π»ΠΎΡΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ ΠΈ минимально ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π₯отя ΠΈ Ρ‚ΡƒΡ‚ находятся ΡƒΠΌΠ΅Π»ΡŒΡ†Ρ‹.

А это ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ…Π°Π»Π°Ρ‚Π½ΠΎΠ³ΠΎ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡ ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ со смартфонов Π”ΡƒΠΌΠ°ΡŽ Π’Π°ΡˆΠ΅ Π΄ΠΎΠ²Π΅Ρ€ΠΈΠ΅ ΡƒΠΏΠ°Π΄Π΅Ρ‚ ΠΊ этому сайту

Ну ΠΈ Π½Π°ΠΊΠΎΠ½Π΅Ρ† Ρ‚Ρ€Π΅Ρ‚ΡŒΡ болСзнь сайтов —  оптимизация. Часто случаСтся Β Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎ новоиспСчСнный Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ для слайдСра, Π³Π°Π»Π΅Ρ€Π΅ΠΈ, стили для элСмСнтов, Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, ΠΈ Π·Π°Ρ‡Π°ΡΡ‚ΡƒΡŽ сайт тяТСлССт.Β  Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ Π½Π° Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ страницы ΡƒΡ…ΠΎΠ΄ΠΈΡ‚ Π½Π΅ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΌΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, ΠΈ Π΄ΠΎΠ»Π³ΠΎΠ΅ ΠΎΠΆΠΈΠ΄Π°Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚Ρ‚ΠΎΠ»ΠΊΠ½ΡƒΡ‚ΡŒ ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… ΠΏΠ°Ρ€Ρ‚Π½Π΅Ρ€ΠΎΠ² ΠΈ ΠΏΠΎΠΊΡƒΠΏΠ°Ρ‚Π΅Π»Π΅ΠΉ. Π’Π°ΠΊΠΆΠ΅ Π½Π΅Ρ€Π΅Π΄ΠΊΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ· Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² скрипт (кусок ΠΊΠΎΠ΄Π°) ΠΊΠΎΠ½Ρ„Π»ΠΈΠΊΡ‚ΡƒΠ΅Ρ‚ (Π½Π΅ совмСстим) с Π΄Ρ€ΡƒΠ³ΠΈΠΌ скриптом, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ ΠΎΡ‚ΠΊΠ°Π·Ρƒ любого интСрфСйсного дСйствия с сайтом. ΠŸΠΎΠΏΡ€ΠΎΡΡ‚Ρƒ страница Π½Π΅ выполняСт своСй Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ. Β Π•Ρ‰Π΅ ΠΎΠ± отсутствиС ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ говорят Π½Π΅ сТатыС изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ‚Π°ΠΊ ΠΆΠ΅ тормозят Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ страницы. Как Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊ отказываСтся ΠΆΠ΄Π°Ρ‚ΡŒ ΠΈ ΠΆΠΌΠ΅Ρ‚ Π½Π° крСстик.

Ѐильм с Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π°, ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π½Π΅ получится ΠŸΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ Π·Π²ΠΎΠ½ΠΎΠΊ просиходит ΠΊΠΎΠ½Ρ„Π»ΠΈΠΊΡ‚ΠΎΠ² скриптов, ΠΈ дальнСйшиС дСйствия с сайтом Π±Π΅Π· ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹

К этим 3 основным ΠΌΠΎΠΌΠ΅Π½Ρ‚Π°ΠΌ, я Π΅Ρ‰Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΠ» Π±Ρ‹ UI/UX Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΈ Π’Π°ΠΌ, Π½Π°Π²Π΅Ρ€Π½ΠΎΠ΅, ΠΏΡ€ΠΈΡ…ΠΎΠ΄ΠΈΠ»ΠΎΡΡŒ ΡΠ»Ρ‹ΡˆΠ°Ρ‚ΡŒ ΠΎΠ± этом. На самом Π΄Π΅Π»Π΅ Π·Π° этими словами Π»Π΅ΠΆΠΈΡ‚ ΠΌΠ½ΠΎΠ³ΠΎ интСрСсного, спорного ΠΈ Π²Π°ΠΆΠ½ΠΎΠ³ΠΎ. НС Ρ…ΠΎΡ‡Ρƒ Π²Π΄Π°Π²Π°Ρ‚ΡŒΡΡ Π² Ρ‚Π΅Ρ€ΠΌΠΈΠ½ΠΎΠ»ΠΎΠ³ΠΈΡŽ, Π²ΠΊΡ€Π°Ρ‚Ρ†Π΅ это всё Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π’Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅, ΠΊΠΎΠ³Π΄Π° ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚Π΅ страницу, Π° Π²Π΅Ρ€Π½Π΅Π΅ ΠΊΠ°ΠΊ располоТСны элСмСнты, Π½Π° ΠΊΠ°ΠΊΠΈΠ΅ дСйствия ΠΎΠ½ΠΈ ΠΏΠΎΠ΄Ρ‚Π°Π»ΠΊΠΈΠ²Π°ΡŽΡ‚ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ ΠΈ ΠΊΠ°ΠΊΠΈΠ΅ измСнСния происходят, ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅, Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΈ Π²ΠΎΠΎΠ±Ρ‰Π΅ ΠΏΡ€ΠΈ взаимодСйствии с интСрфСйсом. Π’Π΅Π΄ΡŒ сайт ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ для достиТСния ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ Ρ†Π΅Π»ΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, для ΠΏΠΎΠΊΡƒΠΏΠΊΠΈ, оставлСния заявки, ΠΈΠ»ΠΈ поиска ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ – ΠΈ всС это Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ ΠΏΡ€ΠΎΡ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π½Π΅ Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π»ΠΎ вопроса Β«Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒΒ». И Ссли ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ всё  Β Π² соотвСтствии с трСмя Π²Ρ‹ΡˆΠ΅ ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΌΠΈ ΠΏΡ€Π°Π²ΠΈΠ»Π°ΠΌΠΈ для Π·Π°Π΄Π°Ρ‡, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ выполняСт сайт ΠΈ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ Π±Π΅ΡΠΏΠ΅Ρ€Π΅Π±ΠΎΠΉΠ½ΡƒΡŽ ΠΈ ΡƒΠ΄ΠΎΠ±Π½ΡƒΡŽ Ρ€Π°Π±ΠΎΡ‚Ρƒ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, Π² этом случаС ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ вСрстка Ρ…ΠΎΡ€ΠΎΡˆΠ°Ρ.Β Β  Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β 

Π‘Ρ‹Π»ΠΎ Π±Ρ‹ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π΅Ρ‰Π΅ ΠΎΡ‚Π²Π΅Ρ‚ΠΈΡ‚ΡŒ Π½Π° вопрос, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ вСрстка Π²Π΅Π±-страниц ΠΈ ΠΊΠ°ΠΊ вся эта тСхнология Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚? ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, это систСма, которая Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π»Π°ΡΡŒ дСсятки Π»Π΅Ρ‚, ΠΈ Π² Π΄Π²ΡƒΡ… словах ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ это слоТно, Π½ΠΎ я ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΡŽ. Frontend-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° (вСрстка), Π½ΠΈ Ρ‡Ρ‚ΠΎ ΠΈΠ½ΠΎΠ΅ ΠΊΠ°ΠΊ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ элСмСнтов Π½Π° Π²Π΅Π±-страницС. Если Π°Π±ΡΡ‚Ρ€Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ, это схоТС со ΡΡ‚Ρ€ΠΎΠΈΡ‚Π΅Π»ΡŒΡΡ‚Π²ΠΎΠΌ Π΄ΠΎΠΌΠ°, frontend-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ сначала создаСт каркас ΠΈ элСмСнты Π²Π΅Π±-страницы с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ html-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ, Π° ΠΏΠΎΡ‚ΠΎΠΌ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ css ΠΌΡ‹ ΡƒΠΆΠ΅ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ располоТСниС этих элСмСнтов, ΠΈΡ… высоту, ΡˆΠΈΡ€ΠΈΠ½Ρƒ, Ρ†Π²Π΅Ρ‚ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ свойства. Html ΠΈ css Ρ„Π°ΠΉΠ»Ρ‹ хранятся Π½Π° сСрвСрС ΠΈ ΠΊΠΎΠ³Π΄Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ Π²Π΅Π±-страницу, Ρ‚ΠΎ ΠΎΠ½Π° ссылаСтся Π½Π° эти Ρ„Π°ΠΉΠ»Ρ‹, ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΡ€Π΅Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΈΡ…, ΠΈ появляСтся Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ Π½Π° экранах. Но Π½Π°ΠΌ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅ этого ΠΌΠ°Π»ΠΎ, соврСмСнному Π²Π΅Π±-сайту слоТно ΠΎΠ±ΠΎΠΉΡ‚ΠΈΡΡŒ Π±Π΅Π· интСрактивности, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π½Π°ΠΌ Π½Π°Π΄ΠΎ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню ΠΈΠ»ΠΈ ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³Π° ΠΈ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, Π²Ρ‹Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΎΠΊΠ½ΠΎ с Ρ„ΠΎΡ€ΠΌΠΎΠΉ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΉ связи, Ρ€Π°ΡΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ ΡΡ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ — это ΡƒΠΆΠ΅ стандартный Π½Π°Π±ΠΎΡ€ для сайтов, ΠΈ для ΠΈΡ… Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ jsскрипты, Ρ‚Π°ΠΊΠΈΠ΅ сцСнарии, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡŽΡ‚ΡΡ Π² ΠΎΡ‚Π²Π΅Ρ‚ Π½Π° ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ дСйствиС ΠΎΡ‚ ΠΊΠ»ΠΈΠΊΠ° Π΄ΠΎ двиТСния курсором. Β  Β  Β  Β  Β Β 

НапослСдок Ρ…ΠΎΡ‚Π΅Π»ΠΎΡΡŒ Π±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²Ρ‹Π²ΠΎΠ΄, ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ Π²Π°ΠΆΠ½ΠΎΡΡ‚ΡŒ вСрстки, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΈΠΌΠ΅Π½Π½ΠΎ frontend-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ, нСсСт ΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²Π΅Π½Π½ΠΎΡΡ‚ΡŒ Π·Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ созданныС Π’Π°ΠΌΠΈ ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠΌ ΠΌΠ°ΠΊΠ΅Ρ‚ сайта, отобраТался ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ Ρƒ всСх Π’Π°ΡˆΠΈΡ… ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… ΠΏΠΎΠΊΡƒΠΏΠ°Ρ‚Π΅Π»Π΅ΠΉ. И Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€Π΅ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ΠΌ Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ для ΠΌΠ°Π»ΠΎΠ³ΠΎ ΠΈ срСднСго бизнСса Π΅Π³ΠΎ Π²Π΅Π±-сайт β€” это Π»ΠΈΡ†ΠΎ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π’Π°ΡˆΠΈΠΌ Π·Π°ΠΊΠ°Π·Ρ‡ΠΈΠΊΠ°ΠΌ Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π²ΠΈΠ΄ΠΈΡ‚ Π²Π°ΡˆΡƒ вывСску ΠΎΠΊΠΎΠ»ΠΎ офиса ΠΈ ΠΏΠΎΠ±Ρ‹Π²Π°Ρ‚ΡŒ Ρƒ Вас. Π’ ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ, ΠΎΠ½ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅Ρ‚ Π½Π° Π’Π°Ρˆ Π²Π΅Π±-сайт ΡƒΠ·Π½Π°Π΅Ρ‚, сравнит Ρ‚ΠΎΠ²Π°Ρ€ ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Ρ…ΠΎΡ‡Π΅Ρ‚ ΠΊΡƒΠΏΠΈΡ‚ΡŒ. Π’ΡƒΡ‚ ΡƒΠΆΠ΅ Π½Π΅ приходится ΠΏΠΎΡΡΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊΡƒΡŽ Ρ€ΠΎΠ»ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΡ‹Π³Ρ€Π°Ρ‚ΡŒ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‰Π°Ρ функция ΠΈΠ»ΠΈ зависшая страница, вСдь Π’Ρ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΎΡ‚ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ зашСл ΠΈΠ· ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠ΅Π³ΠΎ Internet Explorer ΠΈΠ»ΠΈ ΠΎΠ½ Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ смог Π½Π°ΠΆΠ°Ρ‚ΡŒ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ β€œΠ·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒβ€ Π½Π° смартфонС с малСньким Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ дисплСя. Одно Π΄Π΅Π»ΠΎ, ΡΠ²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½-ΠΌΠ°ΠΊΠ΅Ρ‚, Π° Π΄Ρ€ΡƒΠ³ΠΎΠ΅ Π΄Π΅Π»ΠΎ ΡΠ²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ Π΅Π³ΠΎ с ΡƒΠΌΠΎΠΌ, ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠ² всС соврСмСнныС Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΠΈ прСдусмотрСв ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ людСй. На ΠΌΠΎΠΉ взгляд главная ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ сами ΠΏΠΎ сСбС html ΠΈ css Π½Π΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ языками программирования, ΠΈΠ·-Π·Π° этого ΠΈΠΌΠ΅ΡŽΡ‚ Π½ΠΈΠ·ΠΊΠΈΠΉ ΠΏΠΎΡ€ΠΎΠ³ вхоТдСния. Π”Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами Π»Π΅Π³ΠΊΠΈ Π² освоСнии, ΠΎΡ‚ этого ΠΌΠ½ΠΎΠ³ΠΎ людСй ΠΆΠ΅Π»Π°ΡŽΡ‰ΠΈΡ… этим Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒΡΡ. ΠžΠ±Ρ€Π°Ρ‚Π½Π°Ρ сторона ΠΌΠ΅Π΄Π°Π»ΠΈ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ Π²Π΅Π±-сайт, с ΠΌΠ°Π»Ρ‹ΠΌ ΠΎΠΏΡ‹Ρ‚ΠΎΠΌ, практичСски Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, вСдь, ΠΊΠ°ΠΊ ΠΈ Π² любом Π΄Ρ€ΡƒΠ³ΠΎΠΌ Π΄Π΅Π»Π΅ всС ΠΏΡ€ΠΈΡ…ΠΎΠ΄ΠΈΡ‚ с ΠΎΠΏΡ‹Ρ‚ΠΎΠΌ. И ΠΊΠ°ΠΊ слСдствиС, Π²Π΅Ρ‡Π΅Ρ€ΠΎΠΌ, заходя с ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Π° ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹ΠΉ сСзон любимого сСриала, Π’Ρ‹ с Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒΡŽ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΡ‚ΠΎΠ»ΠΊΠ½ΡƒΡ‚ΡŒΡΡ с ошибками Π²Ρ€ΠΎΠ΄Π΅, Π½Π΅ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎΡΡ Π±Π°Π½Π½Π΅Ρ€Π° Ρ€Π΅ΠΊΠ»Π°ΠΌΡ‹ (Ссли Π·Π°ΠΉΡ‚ΠΈ с большого ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Π°, ΡƒΠ²Π΅Ρ€Π΅Π½ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ Π½Π΅ Π±Ρ‹Π»ΠΎ Π±Ρ‹, Π½ΠΎ ΡƒΠ²Ρ‹ ΠΈ Π°Ρ…, Π°Π΄Π°ΠΏΡ‚Π°Ρ†ΠΈΡŽ Π½Π΅ всС Ρ‡ΠΈΡ‚Π°ΡŽΡ‚, Π²Π°ΠΆΠ½Ρ‹ΠΌ аспСктом) ΠΈΠ»ΠΈ Π²ΠΈΠ΄Π΅ΠΎ нСдоступно Π½Π° Π΄Π°Π½Π½ΠΎΠΌ устройствС. Π—Π΄Π΅ΡΡŒ Ρ‡Π°ΡΡ‚Π΅Π½ΡŒΠΊΠΎ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Π² самом ΠΏΡ€ΠΎΠΈΠ³Ρ€Ρ‹Π²Π°Ρ‚Π΅Π»Π΅ Β flash Π½Π° устройствах iOS, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ сам Π‘Ρ‚ΠΈΠ² ДТобс Ρ€Π΅ΡˆΠΈΠ» Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ ΠΈ Π½Π°Π·Π²Π°Π» ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΠΌ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠΌ. Π§Π΅Ρ€Π΅Π· нСсколько Π»Π΅Ρ‚ послС Π΅Π³ΠΎ смСрти, Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΡŽ flash сами создатСли Π½Π°Π·ΠΎΠ²ΡƒΡ‚ Π½Π΅ эффСктивным ΠΈ откаТутся ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ, Π½ΠΎ это ΡƒΠΆΠ΅ другая история, ΠΈ Ρƒ мСня Π½Π° этом всС, побольшС Π’Π°ΠΌ Ρ…ΠΎΡ€ΠΎΡˆΠΈΡ… сайтов, ΠΈ Π½Π΅ Π·Π°Π±Ρ‹Π²Π°ΠΉΡ‚Π΅ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡ‚ΡŒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€.Β Β Β Β Β Β Β Β Β Β Β 

Β 

19 ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π²Π΅Π±-сайтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ заставят Π²Π°ΡˆΠΈΡ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒΡΡ Π·Π° Π½ΠΎΠ²Ρ‹ΠΌΠΈ

ΠœΠ½ΠΎΠΆΠ΅ΡΡ‚Π²ΠΎ Π²Π΅Π±-сайтов ΡΠΈΡΡŽΡ‚ Ρ†Π²Π΅Ρ‚ΠΎΠΌ, яркими изобраТСниями ΠΈ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ. Но Ссли ΠΎΡ‚ΠΎΡ€Π²Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚, Π²ΠΈΠ΄Π΅ΠΎ, изобраТСния, ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, Ρ‡Ρ‚ΠΎ останСтся? Π’Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅Ρ‚Π΅ ΠΊ основам Π²Π΅Π±-сайта ΠΈ Π²Π½Π΅Π·Π°ΠΏΠ½ΠΎ ΠΏΠΎΠΉΠΌΠ΅Ρ‚Π΅: ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΈΠ΄Π°Π΅Ρ‚ красоту Π²Π΅Π±-сайту.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта?

ΠœΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта — это шаблон (ΠΈΠ»ΠΈ структура), ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‰ΠΈΠΉ структуру Π²Π΅Π±-сайта.Он выполняСт Ρ€ΠΎΠ»ΡŒ структурирования ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, прСдставлСнной Π½Π° сайтС, ΠΊΠ°ΠΊ для Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Π° сайта, Ρ‚Π°ΠΊ ΠΈ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. Он обСспСчиваСт Ρ‡Π΅Ρ‚ΠΊΠΈΡ… ΠΏΡƒΡ‚Π΅ΠΉ для Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π²Π΅Π±-страниц ΠΈ ΠΏΠΎΠΌΠ΅Ρ‰Π°Π΅Ρ‚ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½Ρ‹Π΅ элСмСнты Π²Π΅Π±-сайта Π½Π° ΠΏΠ΅Ρ€Π΅Π΄Π½ΠΈΠΉ ΠΏΠ»Π°Π½ ΠΈ Π² Ρ†Π΅Π½Ρ‚Ρ€.

ΠœΠ°ΠΊΠ΅Ρ‚Ρ‹ Π²Π΅Π±-сайтов

ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΡŽ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, нСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΡƒΡ‡ΠΈΡ‚Π΅ΡΡŒ Π»ΠΈ Π²Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π±Π»ΠΎΠ³ ΠΈΠ»ΠΈ создаСтС простой Π²Π΅Π±-сайт для своСго ΠΌΠ°Π»ΠΎΠ³ΠΎ бизнСса. ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ посСтитСлСй ΠΏΠΎ сайту ΠΈ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π»ΡƒΡ‡ΡˆΠ΅ донСсти Π΄ΠΎ Π½ΠΈΡ… вашС сообщСниС.

ΠšΠΎΡ€ΠΎΡ‡Π΅ говоря, ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π²Π΅Π±-сайтов ΡΠ²Π»ΡΡŽΡ‚ΡΡ критичСски Π²Π°ΠΆΠ½Ρ‹ΠΌΠΈ элСмСнтами, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Π΅Π»Π°ΡŽΡ‚ Π²Π΅Π±-сайт ΡƒΡΠΏΠ΅ΡˆΠ½Ρ‹ΠΌ ΠΈΠ»ΠΈ Π½Π΅ΡƒΠ΄Π°Ρ‡Π½Ρ‹ΠΌ.

ΠŸΠΎΡ‡Π΅ΠΌΡƒ слСдуСт Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΌΠ°ΠΊΠ΅Ρ‚ вмСсто Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ?

Π‘Π»Π΅Π΄ΡƒΠ΅Ρ‚ Π²Π½ΠΈΠΌΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ Π²Ρ‹Π±ΠΎΡ€. Π’ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ:

  • Π₯ΠΎΡ€ΠΎΡˆΠΈΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ ΡƒΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π½Π° сайтС, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π΄Π΅Π»Π°Π΅Ρ‚ Π²Π°ΠΆΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Π»Π΅Π³ΠΊΠΎ доступной ΠΈ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятной для поиска. ΠŸΠ»ΠΎΡ…ΠΎΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ расстраиваСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π·Π°Ρ‚Π΅ΠΌ быстро ΠΏΠΎΠΊΠΈΠ΄Π°ΡŽΡ‚ сайт, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π½Π°ΠΉΡ‚ΠΈ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΈΡ‰ΡƒΡ‚.

По этой ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π΅ Π½Π° поиск Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π»ΡƒΡ‡ΡˆΠ΅ всСго ΠΏΠΎΡ‚Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, сколько Π½ΡƒΠΆΠ½ΠΎ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΡƒΠ΄Π΅Π»ΡΡ‚ΡŒ Π²Π°ΠΌ большС Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… сСкунд своСго Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ.

Π˜Ρ‚Π°ΠΊ, ΠΏΠΎΠΌΠΈΠΌΠΎ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ Π²Ρ‹Π±ΠΎΡ€Π° Π·Π° Π΄ΠΎΠ»ΠΈ сСкунды, Ρ…ΠΎΡ€ΠΎΡˆΠ°Ρ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ° ΠΈΠΌΠ΅Π΅Ρ‚ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ прСимущСства. ΠŸΡ€ΠΈΠ²Π»Π΅Ρ‡Π΅Π½ΠΈΠ΅ посСтитСлСй ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌ усилиСм.

  • ΠŸΡ€ΠΈ Π²Ρ‹Π±ΠΎΡ€Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€ΠΈΠ½ΡΡ‚ΡŒ Π²ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π³Π΅ΡˆΡ‚Π°Π»ΡŒΡ‚-Π·Π°ΠΊΠΎΠ½ закрытия . Π’ Π½Π΅ΠΌ говорится, Ρ‡Ρ‚ΠΎ Π΄Π°ΠΆΠ΅ Ссли Ρ„ΠΎΡ€ΠΌΠ° изобраТСния Π½Π΅ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½Π°, чСловСчСский Π³Π»Π°Π· ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‚Π΅Π½Π΄Π΅Π½Ρ†ΠΈΡŽ Π·Π°ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΏΡ€ΠΎΠ±Π΅Π»Ρ‹ ΠΈ Ρ€Π°ΡΠΏΠΎΠ·Π½Π°Π²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Ρ†Π΅Π»ΠΎΠΌ.Π§Π΅ΠΌ это ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π²Π°ΠΌ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ?
    • Π’Ρ‹ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΠΎΠ±Ρ€Π°Ρ‰Π°Ρ‚ΡŒ внимания Π½Π° Π΄Π΅Ρ‚Π°Π»ΠΈ, Π° ΡΠΎΡΡ€Π΅Π΄ΠΎΡ‚ΠΎΡ‡ΠΈΡ‚Π΅ΡΡŒ Π½Π° ΠΎΠ±Ρ‰Π΅ΠΌ Π²ΠΈΠ΄Π΅ страниц, ΠΎΠ±Ρ€Π°Π·ΡƒΡŽΡ‰ΠΈΡ… Π²Π΅Π±-сайт; ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π½Π°ΠΉΠ΄ΡƒΡ‚ для сСбя смысловой ΠΏΡƒΡ‚ΡŒ.
    • Π’Ρ‹ ΠΎΠ±Ρ€Π°Ρ‰Π°Π΅Ρ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Π΄Π΅Ρ‚Π°Π»ΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ нСсколько Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… сСкунд для ΡΠΊΡΠΏΠΎΠ½Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ роста вовлСчСнности.
    • Π’Ρ‹ Π½Π°ΠΌΠ΅Ρ€Π΅Π½Π½ΠΎ Π½Π΅ ΠΎΠ±Ρ€Π°Ρ‰Π°Π΅Ρ‚Π΅ внимания Π½Π° Π΄Π΅Ρ‚Π°Π»ΠΈ, позволяя ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ сама Π·Π° сСбя; ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π½Π°ΠΉΠ΄ΡƒΡ‚ для сСбя Π·Π½Π°Ρ‡ΠΈΠΌΡ‹ΠΉ ΠΏΡƒΡ‚ΡŒ, ΠΈ ΠΎΠ½ΠΈ сохранят ΠΏΡ€ΠΎΡ‡Π½ΡƒΡŽ ΠΏΠ°ΠΌΡΡ‚ΡŒ ΠΎ вашСм Π²Π΅Π±-сайтС.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π³Π΅ΡˆΡ‚Π°Π»ΡŒΡ‚-Π·Π°ΠΊΠΎΠ½ закрытия

Знакомство с Π»ΡƒΡ‡ΡˆΠΈΠΌΠΈ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ°ΠΌΠΈ макСтирования

Π§Ρ‚ΠΎΠ±Ρ‹ с пользой провСсти врСмя ΠΏΡ€ΠΈ Π²Ρ‹Π±ΠΎΡ€Π΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΌΠ°ΠΊΠ΅Ρ‚Π°, Π²Π°ΠΆΠ½ΠΎ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ с Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ основными понятиями, связанными с ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠΌ Π²Π΅Π±-сайта. ΠœΡ‹ собрали ряд ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ ΡΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² ΠΈΠ·ΠΎΠ±ΠΈΠ»ΠΈΠΈ прСдустановлСнных ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π²Π΅Π±-сайтов.

Π’ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ вСс ΠΈ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ пространство

Π’ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ вСс воспринимаСтся людьми, ΠΊΠΎΠ³Π΄Π° Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ Π½Π° Π²Π΅Π±-сайтС ΠΎΠ±Π»Π°Π΄Π°ΡŽΡ‚ большСй Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ силой.Π­Ρ‚Π° Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Π°Ρ сила ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π²Ρ‹Π·Π²Π°Π½Π° Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… элСмСнтах с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ². Π‘Ρ€Π΅Π΄ΠΈ Π½ΠΈΡ… Π½Π΅Π³Π°Ρ‚ΠΈΠ²Π½ΠΎΠ΅ пространство — это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ нас здСсь Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ интСрСсуСт.

НСгативноС пространство (пространство, лишСнноС ΠΊΠ°ΠΊΠΈΡ…-Π»ΠΈΠ±ΠΎ элСмСнтов) ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Π΅Ρ‚ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΊ элСмСнтам, ΠΏΠ΅Ρ€Π΅Π²Π΅ΡˆΠΈΠ²Π°ΡŽΡ‰ΠΈΠΌ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅, посрСдством сосрСдоточСнной Π½Π° Π½ΠΈΡ… Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ силы.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ вСса, созданного Ρ‡Π΅Ρ€Π΅Π· Π½Π΅Π³Π°Ρ‚ΠΈΠ²Π½ΠΎΠ΅ пространство

ΠŸΡ€ΠΎΡΡ‚Ρ€Π°Π½ΡΡ‚Π²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ‡Π΅Ρ€Π½Ρ‹ΠΌ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ΠΎΠΌ ΠΈ Π±Π΅Π»Ρ‹ΠΌΠΈ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π°ΠΌΠΈ направляСт взгляд Π½Π° Π»Π΅Π²Ρ‹ΠΉ элСмСнт.Но Π»Π΅Π²Ρ‹ΠΉ элСмСнт ΠΏΠ΅Ρ€Π΅Π²Π΅ΡˆΠΈΠ²Π°Π΅Ρ‚ΡΡ Ρ‡Π΅Ρ‚Ρ‹Ρ€ΡŒΠΌΡ мСньшими Π±Π΅Π»Ρ‹ΠΌΠΈ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π°ΠΌΠΈ. Π§Π΅Ρ€Π½Ρ‹ΠΉ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ нСсСт Π±ΠΎΠ»Π΅Π΅ ΡΠΈΠ»ΡŒΠ½ΡƒΡŽ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ силу.

Ббалансированный ΠΌΠ°ΠΊΠ΅Ρ‚ сайта

Π’ сбалансированном Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ элСмСнты, ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Π°, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π²ΠΈΠ΄ΠΈΡ‚ тСкстовоС содСрТимоС ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ Π²Π°ΠΆΠ½ΠΎ. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, элСмСнты Π»Π΅Π³ΠΊΠΎ ΡΠΊΠ°Π½ΠΈΡ€ΡƒΡŽΡ‚ΡΡ Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ эффСктивно прСдставляСт ΠΈΡ… всС. Π”ΠΈΠ·Π°ΠΉΠ½ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅ ΡΡ‚Π°Π±ΠΈΠ»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΈ приятСн с эстСтичСской Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния.

Один ΠΈΠ· самых популярных ΡƒΡ€Π°Π²Π½ΠΎΠ²Π΅ΡˆΠ΅Π½Π½Ρ‹Ρ… Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ² — это симмСтричный баланс, Π³Π΄Π΅, ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎ Π·Π΅Ρ€ΠΊΠ°Π»ΡŒΠ½ΠΎΠΌΡƒ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ, Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ элСмСнт Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ ΠΏΠΎ ΠΎΠ±Π΅ стороны ΠΎΡ‚ Ρ†Π΅Π½Ρ‚Ρ€Π°. БиммСтрия Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ баланс, ΡΠ»Π΅Π³Π°Π½Ρ‚Π½ΠΎΡΡ‚ΡŒ ΠΈ ΡƒΠ΄ΠΎΠ²ΠΎΠ»ΡŒΡΡ‚Π²ΠΈΠ΅. Π’Ρ‹, Π½Π°Π²Π΅Ρ€Π½ΠΎΠ΅, Ρ‚ΠΎΠΆΠ΅ это почувствовали, глядя Π½Π° Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Ρƒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π·Π΄Π°Π½ΠΈΠΉ, садов ΠΈ Π΄Π°ΠΆΠ΅ Π½Π° ΠΊΡ€Ρ‹Π»ΡŒΡ Π±Π°Π±ΠΎΡ‡ΠΊΠΈ.

Π Π°Π·Π΄Π΅Π»Ρ‹ для ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… Π°ΡƒΠ΄ΠΈΡ‚ΠΎΡ€ΠΈΠΉ ΠΈΠ»ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ

РасполоТСниС элСмСнтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π»Π΅Π³ΠΊΠΎ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒΡΡ Π½Π° Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ€Π°Π·Π΄Π΅Π»Ρ‹ Π²Π΅Π±-сайта.Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊ это Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΌΡ‹ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅ΠΌ Π²Π°ΠΌ ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ ΠΎ ΠΌΠΎΠ΄Π½Ρ‹Ρ… Π²Π΅Π±-сайтах, адрСсованных ΠΊΠ°ΠΊ ΠΌΡƒΠΆΡ‡ΠΈΠ½Π°ΠΌ, Ρ‚Π°ΠΊ ΠΈ ΠΆΠ΅Π½Ρ‰ΠΈΠ½Π°ΠΌ.

ΠœΠ°ΠΊΠ΅Ρ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ 2 ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ€Π°Π·Π΄Π΅Π»Π° Π½Π° Π²Π΅Π±-сайтС, ΠΎΠ΄ΠΈΠ½ посвящСн ΠΎΠ΄Π΅ΠΆΠ΄Π΅ для ΠΌΡƒΠΆΡ‡ΠΈΠ½, Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ — ΠΎΠ΄Π΅ΠΆΠ΄Π΅ для ΠΆΠ΅Π½Ρ‰ΠΈΠ½. Π Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚Π° обслуТиваСт Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ для Π΄Π²ΡƒΡ… Ρ€Π°Π·Π½Ρ‹Ρ… Ρ†Π΅Π»Π΅Π²Ρ‹Ρ… Π°ΡƒΠ΄ΠΈΡ‚ΠΎΡ€ΠΈΠΉ.

Π’Ρ‹ΠΉΡ‚ΠΈ Π·Π° Ρ€Π°ΠΌΠΊΠΈ стандартных раскладок

Π’ Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ ΡΠ»Π΅Π΄ΡƒΡŽΡ‚ Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½ΠΎΠΌΡƒ ΠΏΡƒΡ‚ΠΈ с Ρ†Π΅Π»ΡŒΡŽ Π½Π°ΠΈΠ»ΡƒΡ‡ΡˆΠ΅Π³ΠΎ обслуТивания Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ, Π² Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΌΠ°ΠΊΠ΅Ρ‚Π°Ρ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ смСлыС Π΄ΠΈΠ·Π°ΠΉΠ½Ρ‹ ΠΈ структуры с Ρ†Π΅Π»ΡŒΡŽ ΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ влияниС Π½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.Π‘Π»ΠΎΠΌΠ°Ρ‚ΡŒ шаблон ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Π½Π΅ΠΎΠΆΠΈΠ΄Π°Π½Π½ΠΎΠ΅ располоТСниС элСмСнтов Π½Π° Π²Π΅Π±-страницС, ΠΈ впСчатлСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ½ΠΎ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚, Π²Ρ‹Π΄Π΅Π»ΡΡŽΡ‚ΡΡ срСди мноТСства стандартных Π²Π΅Π±-сайтов, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π΅ Π·Π°ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ ваш Π²Π΅Π±-сайт.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: Schweppes.ca

ΠŸΠΎΠΌΠ½ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ UX Π»ΡƒΡ‡ΡˆΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ВсСгда Π΄ΡƒΠΌΠ°ΠΉΡ‚Π΅ ΠΎ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅. Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ тСсты, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ Ρ‡Ρ‚ΠΎ-Π»ΠΈΠ±ΠΎ Π²Ρ‹ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ напряТСния для ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΡΡ‚ΠΈΠΌΡƒΠ»ΠΈΡ€ΡƒΡŽΡ‰ΠΈΡ… ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ²

Π’ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ΅ напряТСниС напрягаСт Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, сосрСдотачивая Π΅Π³ΠΎ Π½Π° ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΌΠΎΠΌΠ΅Π½Ρ‚Π°Ρ… Π²Π΅Π±-сайта.Π’ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ΅ напряТСниС проявляСтся Π² контрастах пространства, Ρ†Π²Π΅Ρ‚Π° ΠΈΠ»ΠΈ яркости, ΠΈ это Π»Π΅Π³ΠΊΠΎ Π·Π°ΠΌΠ΅Ρ‚Π½ΠΎ, Ссли ΠΎΠ½ΠΈ ΠΏΠ΅Ρ€Π΅ΠΏΠ»Π΅Ρ‚Π°ΡŽΡ‚ΡΡ Π² идСальном ΠΎΠ±Ρ‰Π΅ΠΌ балансС элСмСнтов.

Π•Π³ΠΎ Ρ€ΠΎΠ»ΡŒ состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ ΡΡ‚ΠΈΠΌΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΎΡ‚ΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ Ρ€ΡƒΡ‚ΠΈΠ½Ρ‹ Π²Π΅Π±-сСрфинга ΠΈ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Π½Π° Π²Π΅Π±-сайтС Π² ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Π½ΠΎΠ²ΠΎΠΌ свСтС.

Π’ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Π°Ρ Π½Π°ΠΏΡ€ΡΠΆΠ΅Π½Π½ΠΎΡΡ‚ΡŒ Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ Π²Π΅Π±-сайта ΠΈΠ·-Π·Π° Π½Π΅ΠΎΠΆΠΈΠ΄Π°Π½Π½ΠΎΠ³ΠΎ размСщСния Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… элСмСнтов — Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: Stripe

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ‚ΠΎΡ‡ΠΊΠΈ фокусировки, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ элСмСнтам

Кнопка с ΠΏΡ€ΠΈΠ·Ρ‹Π²ΠΎΠΌ ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ†Π΅Π½Ρ‚Ρ€ΠΎΠΌ внимания.Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ†Π΅Π½Ρ‚Ρ€ΠΎΠΌ внимания. Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΌΠΈ Ρ†Π΅Π½Ρ‚Ρ€Π°ΠΌΠΈ. ВсС зависит ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΠΈΠ½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΡƒΡŽΡ‚ΡΡ Π² ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта, поэтому ΠΎΠ½ΠΈ становятся Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ интСрСсными ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°ΠΌΠΈ Π½Π° Π²Π΅Π±-сайтС, ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°ΡŽΡ‰ΠΈΠΌΠΈ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: Tesla.com

Благодаря фокусным Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌ ваши ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ Π½Π° ΠΏΠΎΠ»ΠΏΡƒΡ‚ΠΈ ΠΊ конвСрсии (ΠΊΠ°ΠΊΠΎΠΉ Π±Ρ‹ «конвСрсиСй» Π½ΠΈ Π±Ρ‹Π» ваш ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΉ Π²Π΅Π±-сайт) — ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΠΊΠΎΠ½Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ своС Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° этих фокусных Ρ‚ΠΎΡ‡ΠΊΠ°Ρ… ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ Π±ΠΎΠ»Π΅Π΅ склонны ΠΏΡ€Π΅Π΄ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ дСйствия, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΎΡ‚ Π½ΠΈΡ… Ρ…ΠΎΡ‚ΠΈΡ‚Π΅. ΠΏΡ€ΠΈΠ½ΡΡ‚ΡŒ.

Π”ΠΈΠ·Π°ΠΉΠ½ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² для достиТСния Ρ†Π΅Π»Π΅ΠΉ Π²Π΅Π±-сайта

РСкомСндуСтся, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅Π΄ Ρ‚Π΅ΠΌ, ΠΊΠ°ΠΊ ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΡ‚ΡŒ ΠΊ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚Π° / просмотру шаблонов ΠΌΠ°ΠΊΠ΅Ρ‚Π°, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ , ΠΊΠ°ΠΊΠΎΠ²Ρ‹ Ρ†Π΅Π»ΠΈ Π²Π΅Π±-сайта . Они ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΎΠ΄Π°Π²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ²Π°Ρ€Ρ‹, ΡΠΎΠ±ΠΈΡ€Π°Ρ‚ΡŒ Ρ‚Ρ€Π°Ρ„ΠΈΠΊ ΠΈΠ»ΠΈ просто ΠΎΡ‡Π°Ρ€ΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΊΠ°ΠΊΠΈΠΌ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ ΠΏΡ€ΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ искусства. ΠœΠ°ΠΊΠ΅Ρ‚ сайта слСдуСт Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ исходя ΠΈΠ· Ρ†Π΅Π»Π΅ΠΉ сайта. Π­Ρ‚ΠΎ Π²Ρ‹Π·ΠΎΠ²Π΅Ρ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ дСйствия ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠ²Π΅Π΄ΡƒΡ‚ ΠΊ Π΄ΠΎΡΡ‚ΠΈΠΆΠ΅Π½ΠΈΡŽ этих Ρ†Π΅Π»Π΅ΠΉ.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: Unbounce

ΠœΠ°ΠΊΠ΅Ρ‚Ρ‹, Ρ€Π°ΡΡΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ ΠΈΡΡ‚ΠΎΡ€ΠΈΡŽ

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°ΠΉΡ‚Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚ / Π½Π°ΠΉΠ΄ΠΈΡ‚Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ соотвСтствовал ΡΠΎΠΎΠ±Ρ‰Π΅Π½ΠΈΡŽ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ.Π Π°Π·Π΄Π΅Π»Ρ‹ Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ² Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠΎΠ±ΠΈΡ€Π°Ρ‚ΡŒΡΡ вмСстС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°ΡΡΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΏΠΎΠ»Π½ΡƒΡŽ ΠΈΡΡ‚ΠΎΡ€ΠΈΡŽ. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт Π² этой Ρ†Π΅ΠΏΠΎΡ‡ΠΊΠ΅ — это Π΅Ρ‰Π΅ ΠΎΠ΄Π½Π° Π³Π»Π°Π²Π° вашСй истории.

ΠœΠ°ΠΊΠ΅Ρ‚, состоящий ΠΈΠ· Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ² Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ, ΠΌΠ½ΠΎΠ³ΠΎ говорящих ΠΎ цСнности прилоТСния

Π›ΡƒΡ‡ΡˆΠΈΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π²Π΅Π±-сайтов с Π΄ΠΎΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΌ успСхом

НиТС Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ самыС популярныС ΠΈ эффСктивныС ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π²Π΅Π±-сайтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ со всСго ΠΌΠΈΡ€Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ для создания своих Π²Π΅Π±-сайтов.

1. Зигзагообразная раскладка

ИсслСдованиС ΠΏΠΎΠΊΠ°Π·Π°Π»ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°ΡŽΡ‚ содСрТимоС Π²Π΅Π±-страницы: Π³Π»Π°Π·Π° ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ ΠΏΠΎ страницС Π² соотвСтствии с Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ Π±ΡƒΠΊΠ²Ρ‹ Z.

  • Π‘Π½Π°Ρ‡Π°Π»Π° взгляд ΠΈΠ΄Π΅Ρ‚ слСва Π½Π°ΠΏΡ€Π°Π²ΠΎ
  • Π”Π°Π»Π΅Π΅ Π³Π»Π°Π· ΠΈΠ΄Π΅Ρ‚ Π²Π½ΠΈΠ·, Π° Π²Π»Π΅Π²ΠΎ
  • НаконСц, ΠΈΡ… Π³Π»Π°Π·Π° снова Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°ΡŽΡ‚ΡΡ Π²ΠΏΡ€Π°Π²ΠΎ

Π—ΠΈΠ³Π·Π°Π³ΠΎΠΎΠ±Ρ€Π°Π·Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½ Π½Π΅Ρ€Π°Π·Ρ€Ρ‹Π²Π½ΠΎ связан с ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΌ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ Π²Π΅Π±-ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌ ΠΊ ΡˆΠΈΡ€ΠΎΠΊΠΎΠΌΡƒ ΠΊΡ€ΡƒΠ³Ρƒ Π²Π΅Π±-сайтов Π² Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… сфСрах Π΄Π΅ΡΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ.

ДСмонстрация Π²Π΅Π±-сайта рСсторана

— создана с использованиСм Ρ‚Π΅ΠΌΡ‹ Β«ΠœΠ΅ΡΠΌΠ΅Ρ€ΠΈΠ·Β»

2. ΠœΠ°ΠΊΠ΅Ρ‚ F

ΠœΠ°ΠΊΠ΅Ρ‚ F-Ρ„ΠΎΡ€ΠΌΡ‹ слСдуСт Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ ΡˆΠΈΡ€ΠΎΠΊΠΎ извСстному способу сканирования, ΠΊΠΎΠ³Π΄Π° взгляд пСрСмСщаСтся ΠΏΠΎ страницС Π² Π²ΠΈΠ΄Π΅ Π±ΡƒΠΊΠ²Ρ‹ F.
Благодаря связи с ΡˆΠΈΡ€ΠΎΠΊΠΎ извСстным ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, этот ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для ΡˆΠΈΡ€ΠΎΠΊΠΎΠ³ΠΎ спСктра Π²Π΅Π±-сайтов, ΠΎΡ‚ Π²Π΅Π±-сайтов элСктронной ΠΊΠΎΠΌΠΌΠ΅Ρ€Ρ†ΠΈΠΈ Π΄ΠΎ Π²Π΅Π±-сайтов ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: Patagonia.com

3. ΠŸΠΎΠ»Π½ΠΎΡΠΊΡ€Π°Π½Π½ΠΎΠ΅ Ρ„ΠΎΡ‚ΠΎ

Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΏΠΎΠ΄Ρ€Π°Π·ΡƒΠΌΠ΅Π²Π°Π΅Ρ‚ распространСниС содСрТимого Π½Π° ΠΏΠΎΠ»Π½ΠΎΡΠΊΡ€Π°Π½Π½ΡƒΡŽ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΡŽ / ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, тСкстовыС Ρ€Π°Π·Π΄Π΅Π»Ρ‹ ΠΈΠ»ΠΈ Ρ€Π°Π·Π΄Π΅Π»Ρ‹ мСню слуТат для ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ Β«ΠΆΠΈΠ²ΠΎΠ³ΠΎΒ» изобраТСния. ΠŸΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Π²Π΅Π±-сайтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ хотят сразу ΠΆΠ΅ Π·Π°ΠΊΡ€Π΅ΠΏΠΈΡ‚ΡŒ Ρ‚Π΅ΠΌΡƒ сайта Π² сознании посСтитСля.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: Netflix

4. Π‘Ρ…Π΅ΠΌΠ° сСтки

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Π° Π² Π²ΠΈΠ΄Π΅ сСток, Ρ‡Ρ‚ΠΎ ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ просмотр, ΠΈ люди ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒΡΡ Π½Π° ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Ρ… ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΡƒΡŽΡ‰ΠΈΡ… Ρ‚Π΅ΠΌΠ°Ρ…. Π‘Π΅Ρ‚ΠΊΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Ρ€Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½ΠΎ Ρ€Π°ΡΠΏΡ€Π΅Π΄Π΅Π»ΡΡ‚ΡŒ тСкст, Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ ΠΈ Π²ΠΈΠ΄Π΅ΠΎ Π½Π° Π²Π΅Π±-страницах, позволяя ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡ‚ΡŒ Π²Π°ΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π΅Π΄ΠΈΠ½ΠΈΡ†Ρ‹. ПолСзно для Π³Π°Π·Π΅Ρ‚, Π²ΠΈΠ΄Π΅ΠΎΠ±Π»ΠΎΠ³ΠΎΠ² ΠΈ Ρ‚. Π”.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: ИкСа

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: iHeartRadio

5.ΠœΠ°ΠΊΠ΅Ρ‚ Π² ΠΎΠ΄Π½Ρƒ ΠΊΠΎΠ»ΠΎΠ½ΠΊΡƒ

Π­Ρ‚ΠΎΡ‚ ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΎΡ€Π³Π°Π½ΠΈΠ·ΡƒΠ΅Ρ‚ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Π² ΠΎΠ΄ΠΈΠ½ столбСц, ΠΈ это ΠΎΠ΄ΠΈΠ½ ΠΈΠ· самых простых ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² для размСщСния. Π—Π° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ (тСкст, Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ, Π²ΠΈΠ΄Π΅ΠΎ) Π»Π΅Π³ΠΊΠΎ ΡΠ»Π΅Π΄ΠΈΡ‚ΡŒ, Π° Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ ΡΠΊΠ°Π½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ — это Π½Π΅ Ρ‡Ρ‚ΠΎ ΠΈΠ½ΠΎΠ΅, ΠΊΠ°ΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… Ρ‚ΠΎΡ‡Π΅ΠΊ интСрСса Π² этом СдинствСнном столбцС. ΠŸΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… Ρ€Π°Π±ΠΎΡ‚ ΠΈ Π΄Π»ΠΈΠ½Π½Ρ‹Ρ… статСй.

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π² ΠΎΠ΄ΠΈΠ½ столбСц идСально подходят для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: Π‘Ρ€Π΅Π΄Π½ΠΈΠΉ

6.ΠœΠ°ΠΊΠ΅Ρ‚ ΠΈΠ·Π±Ρ€Π°Π½Π½ΠΎΠ³ΠΎ изобраТСния

Один ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ распространСнных Π² настоящСС врСмя ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² ΠΏΠΎΠ΄Ρ€Π°Π·ΡƒΠΌΠ΅Π²Π°Π΅Ρ‚ созданиС ΠΈΠ·Π±Ρ€Π°Π½Π½ΠΎΠ³ΠΎ изобраТСния, ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‰Π΅Π³ΠΎ ΠΊΠ°ΠΆΠ΄ΡƒΡŽ страницу Π²Π΅Π±-сайта. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ слуТит для ΠΊΠΎΠ½Ρ†Π΅Π½Ρ‚Ρ€Π°Ρ†ΠΈΠΈ внимания ΠΈ интСрСса ΠΊ фокусу, Π²Ρ‹Ρ€Π°ΠΆΠ°ΡŽΡ‰Π΅ΠΌΡƒ Ρ‚Π΅ΠΌΡƒ страницы. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ выступаСт ΠΊΠ°ΠΊ источник смысла, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ исходит ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΈΠ· этой Ρ‚ΠΎΡ‡ΠΊΠΈ фокусировки. ΠŸΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Π½ΠΈΡˆΠ΅Π²Ρ‹Ρ… Π±Π»ΠΎΠ³ΠΎΠ², фрилансСров ΠΈ профСссионалов.

ДСмонстрация Π²Π΅Π±-сайта ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π° — создана с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅ΠΌΡ‹ Β«ΠœΠ΅ΡΠΌΠ΅Ρ€ΠΈΠ·Β»

7.АсиммСтричная ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²ΠΊΠ°

АсиммСтричная ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²ΠΊΠ° ΠΈΠ³Ρ€Π°Π΅Ρ‚ с ΠΏΡ€Π°Π²ΠΈΠ»Π°ΠΌΠΈ симмСтрии Π΄ΠΎ Ρ‚Π°ΠΊΠΎΠΉ стСпСни, Ρ‡Ρ‚ΠΎ искаТаСт ΠΈΡ… Π² ΠΏΠΎΠ»ΡŒΠ·Ρƒ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ обСщания: ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠΈΡ‚ΡŒ большС, Ρ‡Π΅ΠΌ просто ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½ΡΡ‚Π²ΠΎ. Π₯ΠΈΡ‚Ρ€ΠΎΡΡ‚ΡŒ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅ пространство ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π΅Π»ΠΎΠ΅ пространство Π±ΠΎΠ»Π΅Π΅ ΠΆΠΈΠ²Ρ‹ΠΌ.

ΠŸΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для этой ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ Π²Π΅Π±-сайтов с Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ, для Π½Π΅ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΉ ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ ΠΈ ΠΈΠ½Π½ΠΎΠ²Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… бизнСс-сайтов.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: Kiwi.com

8.ΠœΠ°ΠΊΠ΅Ρ‚ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ экрана

Π­Ρ‚ΠΎΡ‚ Ρ‚ΠΈΠΏ ΠΌΠ°ΠΊΠ΅Ρ‚Π° относится ΠΊΠ°ΠΊ ΠΊ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΌΡƒ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌΡƒ экрану, Ρ‚Π°ΠΊ ΠΈ ΠΊ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΌΡƒ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌΡƒ экрану. Как ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ экран ΠΈΠ³Ρ€Π°Π΅Ρ‚ Π²Π°ΠΆΠ½ΡƒΡŽ Ρ€ΠΎΠ»ΡŒ Π² ΠΏΡ€ΠΈΠ΄Π°Π½ΠΈΠΈ Π΄Π²ΠΎΠΉΠ½ΠΎΠΉ ваТности 2 ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΌ областям. ЦСль здСсь — ΡΠΏΠΎΡΠΎΠ±ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ быстрому Π²Ρ‹Π±ΠΎΡ€Ρƒ для Π»ΡƒΡ‡ΡˆΠ΅Π³ΠΎ взаимодСйствия с Π²Π΅Π±-сайтом сразу ΠΆΠ΅.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π½ΠΈΠΆΠ΅ нСсколько отличаСтся Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ содСрТит ΠΊΠ°ΠΊ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅, Ρ‚Π°ΠΊ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π½Π° ΠΎΠ΄Π½ΠΎΠΉ ΠΈ Ρ‚ΠΎΠΉ ΠΆΠ΅ страницС. Если ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅, это Π½Π΅ ΠΏΠΎΠ±ΡƒΠΆΠ΄Π°Π΅Ρ‚ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²Ρ‹Π±ΠΎΡ€, Π° скорСС усиливаСт ΠΎΠ΄Π½ΠΎ восприятиС Π΄Ρ€ΡƒΠ³ΠΈΠΌ.

ΠœΠ°ΠΊΠ΅Ρ‚ с Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ экраном рСкомСндуСтся для ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½ΠΎΠ² (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, для ΠΏΡ€ΠΎΠ΄Π°ΠΆΠΈ ΠΌΡƒΠΆΡ‡ΠΈΠ½Π°ΠΌ ΠΈ ΠΆΠ΅Π½Ρ‰ΠΈΠ½Π°ΠΌ) ΠΈΠ»ΠΈ для творчСских Π²Π΅Π±-сайтов, Β«ΠΏΡ€ΠΎΠ΄Π°ΡŽΡ‰ΠΈΡ… Π·Π΄ΠΎΡ€ΠΎΠ²ΡŒΠ΅Β» Π½Π° всСх этапах Π²Π΅Π±-ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΉ (ΠΊΠ°ΠΊ Π² случаС Π½ΠΈΠΆΠ΅).

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: RedLight.dev

9. ΠœΠ°ΠΊΠ΅Ρ‚ Π³Π°Π»Π΅Ρ€Π΅ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΈ эскизов

Π’ΠΎ всС Π±ΠΎΠ»Π΅Π΅ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΌ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΌΠΈΡ€Π΅ этот ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ‚Π²ΠΎΡ€ΠΈΡ‚ΡŒ чудСса. Он состоит ΠΈΠ· ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π²Π΅Π΄ΡƒΡ‰ΠΈΡ… ΠΊ ΠΏΠΎΠ»Π½ΠΎΠΌΡƒ описанию этих Ρ‚Π΅ΠΌ, ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² (+ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠ΅ ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΈ), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ слуТат руководством ΠΏΠΎ Π°Π»ΡŒΠ±ΠΎΠΌΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

ΠŸΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для туристичСских сайтов, Π±Π»ΠΎΠ³ΠΎΠ² ΠΈ ΠΆΡƒΡ€Π½Π°Π»ΠΎΠ².

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: wepresent.wetransfer.com

10. ΠœΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ° (Ρ‚Π°ΠΊΠΆΠ΅ извСстная ΠΊΠ°ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ° ΠΊΠ°Ρ€Ρ‚Ρ‹ / блочная ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ°)

Π­Ρ‚ΠΎΡ‚ ΠΌΠ°ΠΊΠ΅Ρ‚ тСсно связан с Material Design, ΠΏΡ€ΠΎΡ‚ΠΎΠΊΠΎΠ»ΠΎΠΌ проСктирования, Π·Π°ΠΏΡƒΡ‰Π΅Π½Π½Ρ‹ΠΌ Google. Он становится всС Π±ΠΎΠ»Π΅Π΅ популярным благодаря своСй гибкости ΠΈ отзывчивости. ΠœΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ° ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ каТдая Π΅Π΄ΠΈΠ½ΠΈΡ†Π° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° (тСкст, изобраТСния, Π²ΠΈΠ΄Π΅ΠΎ, ΠΊΠ½ΠΎΠΏΠΊΠΈ) Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Π° Π² ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΡƒ ΠΈΠ»ΠΈ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ, ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΠΉ собствСнноС Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΠΎΠ΅ пространство.

ΠŸΡ€ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹Ρ… ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² ΠΊ Π²Π΅Π±-сайтам достигаСтся ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π΅ΠΌΡ‹ΠΉ Π²ΠΈΠ΄ ΠΈ ΠΎΡ‡Π΅Π½ΡŒ связная композиция элСмСнтов Π½Π° Π²Π΅Π±-страницС.

ΠŸΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для использования Π½Π° бизнСс-сайтах, Π³Π΄Π΅ Ρ‡Π΅Ρ‚ΠΊΠΈΠ΅ ΠΈ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΡΠ½ΠΎΠ²ΠΎΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‰Π΅Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ для ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ присутствия Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: UXPin

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: thefutur.com

11. ΠœΠ°ΠΊΠ΅Ρ‚ ΠΆΡƒΡ€Π½Π°Π»Π°

ΠœΠ°ΠΊΠ΅Ρ‚ ΠΆΡƒΡ€Π½Π°Π»Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ встрСчаСтся Π² наши Π΄Π½ΠΈ, прСдставляСт собой смСсь Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ², ΠΈ всС ΠΎΠ½ΠΈ слуТат для придания Π°ΡƒΡ€Ρƒ вСликолСпия новостям.
ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π½ΠΈΠΆΠ΅ сочСтаСт Π² сСбС ΠΌΠ°ΠΊΠ΅Ρ‚ Π³Π°Π»Π΅Ρ€Π΅ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ + ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Ρ‹, ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΈΠ·Π±Ρ€Π°Π½Π½ΠΎΠ³ΠΎ изобраТСния, Π° Ρ‚Π°ΠΊΠΆΠ΅ Ρ‚Π²Π΅Ρ€Π΄Ρ‹ΠΉ F-ΠΎΠ±Ρ€Π°Π·Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π³Π»Π°ΠΌΡƒΡ€ ΠΆΡƒΡ€Π½Π°Π»Π° Π½Π° Π΄ΠΎΠ»ΠΆΠ½ΠΎΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅.

Π’Π°ΠΊΠΈΠ΅ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΠΈ подходят для ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΆΡƒΡ€Π½Π°Π»ΠΎΠ², Π½ΠΎ Π½Π΅ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΈΠΌΠΈ.

12. ΠœΠ°ΠΊΠ΅Ρ‚ ΠΎΠ΄Π½ΠΎΠΉ страницы

НСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π½Π΅ Ρ‚Π°ΠΊ ΡˆΠΈΡ€ΠΎΠΊΠΎ распространСн срСди ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π²Π΅Π±-сайтов, ΠΌΡ‹ Ρ…ΠΎΡ‚Π΅Π»ΠΈ ΠΏΠ΅Ρ€Π΅Ρ‡ΠΈΡΠ»ΠΈΡ‚ΡŒ этот ΠΌΠ°ΠΊΠ΅Ρ‚ здСсь ΠΈΠ·-Π·Π° Π΅Π³ΠΎ довольно интСрСсных характСристик. Он ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΠ΅Ρ‚ нСсколько дСйствий Π½Π° ΠΎΠ΄Π½ΠΎΠΉ страницС (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€,Π³Ρ€Π°ΠΌΠΌ. Gmail). ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚ загруТаСтся динамичСски с использованиСм JavaScript. И ΠΎΠ½ построСн Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ URL-адрСса для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΎΠ±Π·ΠΎΡ€Π°.

13. Π‘Ρ…Π΅ΠΌΠ° Ρ€Π°Π΄ΠΈΠ°Π»ΡŒΠ½ΠΎΠΉ симмСтрии

Π”Ρ€ΡƒΠ³ΠΎΠΉ ΠΌΠ΅Π½Π΅Π΅ распространСнный Ρ‚ΠΈΠΏ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ относится ΠΊ Ρ€Π°Π΄ΠΈΠ°Π»ΡŒΠ½ΠΎΠΉ симмСтрии. Π¦Π΅Π½Ρ‚Ρ€Π°Π»ΡŒΠ½Π°Ρ Ρ‚ΠΎΡ‡ΠΊΠ°, ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΈΠ·Π»ΡƒΡ‡Π°ΡŽΡ‚ΡΡ ΠΊΠΎΡ€Ρ€Π΅Π»ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ элСмСнты Π² ΠΎΠΊΡ€ΡƒΠ³Π»ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΠ΅:

.

Π­Ρ‚ΠΎ ΡƒΠΏΠ°ΠΊΠΎΠ²ΠΊΠ°

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ ознакомились с Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Π°ΠΌΠΈ Π²Π΅Π±-сайтов, ΠΏΠΎΡ€Π° ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ, ΠΊΠ°ΠΊΠΎΠΉ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚ Π»ΡƒΡ‡ΡˆΠ΅ всСго ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для вашСго Π²Π΅Π±-сайта.Π­Ρ‚ΠΎ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΈΠ»ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚, Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ ΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ нишС?

Для этого Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π·Π½Π°Ρ‚ΡŒ свою Π°ΡƒΠ΄ΠΈΡ‚ΠΎΡ€ΠΈΡŽ, Π΅Π΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅, потрСбности ΠΈ оТидания ΠΈ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π΅ сообщСниС, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ идСально вписываСтся Π² ΠΌΠ°ΠΊΠ΅Ρ‚. ΠœΠ°ΠΊΠ΅Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ€ΠΎΠ»ΡŒ, позволяя ΡΠΎΠΎΠ±Ρ‰Π΅Π½ΠΈΡŽ ΡΠΈΡΡ‚ΡŒ ΠΈ Π±Ρ‹Ρ‚ΡŒ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π½Π΅ ΠΏΡ€ΠΈΠ½ΡΡ‚ΡŒ Π΅Π³ΠΎ.

Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π²Π΅Π±-сайтов Π½Π° 2021 Π³ΠΎΠ΄ (с ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ)

ΠœΠ°ΠΊΠ΅Ρ‚ вашСго Π²Π΅Π±-сайта ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Π΅Π³ΠΎ успСх.

Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΈ люди Π±ΡƒΠ΄ΡƒΡ‚ сбиты с Ρ‚ΠΎΠ»ΠΊΡƒ ΠΈ Π΄Π΅Π·ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹, Ρ€Π°Π·Ρ€ΡƒΡˆΠ°Ρ взаимодСйствиС с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ. Они ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Π²Π°ΠΆΠ½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΈΠ»ΠΈ Π½Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΏΡ€ΠΈΠ·Ρ‹Π² ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ.

Π˜Ρ‚Π°ΠΊ, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π²Π΅Π±-сайт, ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ поняли идСю ΠΌΠ°ΠΊΠ΅Ρ‚Π°.

Но Π²Π°ΠΆΠ½ΠΎΡΡ‚ΡŒ вашСго ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π΅Ρ‰Π΅ большС. Π”ΠΈΠ·Π°ΠΉΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΡŽ вашСго сайта. ΠŸΡ€ΠΈ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΌ ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ ваш ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΈΡΡ‚ΡŒ, Π½ΠΎ ΠΏΡ€ΠΈ Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΌ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΡ‚Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½Π½Ρ‹ΠΌ, Ρ‚Ρ€ΡƒΠ΄Π½Ρ‹ΠΌ для чтСния ΠΈ скучным.

Π’ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ ΠΈΡ‚ΠΎΠ³Π΅ всС сайты ΠΈΠΌΠ΅ΡŽΡ‚ сСтку, которая находится ΠΏΠΎΠ΄ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ сайта. Π­Ρ‚ΠΈ столбцы ΠΈ строки ΡƒΠΏΠΎΡ€ΡΠ΄ΠΎΡ‡ΠΈΠ²Π°ΡŽΡ‚ ваш ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΈ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‚ взгляд ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΏΠΎ страницС. Π’ Ρ€Π°ΠΌΠΊΠ°Ρ… этих сСток Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ мноТСство Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΎΠ². Π£ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²Π΅Π±-сайта Π΅ΡΡ‚ΡŒ основная сСтка, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ построил ΠΌΠ°ΠΊΠ΅Ρ‚.

Однако, ΠΊΠΎΠ³Π΄Π° Π΄Π΅Π»ΠΎ Π΄ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Π΄ΠΎ Π²Ρ‹Π±ΠΎΡ€Π° ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΌΠ°ΠΊΠ΅Ρ‚Π° для вашСго сайта, Π΅ΡΡ‚ΡŒ нСсколько ΠΎΠ±Ρ‰ΠΈΡ… ΠΎΡ‚ΠΏΡ€Π°Π²Π½Ρ‹Ρ… Ρ‚ΠΎΡ‡Π΅ΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для Π½Π°Ρ‡Π°Π»Π°.

Π‘Ρ‚ΠΎΠΈΡ‚ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π°.Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ нСсколько ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π½Π° своСм сайтС ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ Π½Π° ΠΎΠ΄Π½ΠΎΠΉ страницС, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π½Π° Ρ†Π΅Π»Π΅Π²ΠΎΠΉ страницС.

Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Π΄Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ распространСнныС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ ΠΌΠ°ΠΊΠ΅Ρ‚Π°, доступныС Π²Π°ΠΌ.

1. ΠœΠ°ΠΊΠ΅Ρ‚ Π² ΠΎΠ΄ΠΈΠ½ столбСц

НСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ это самый простой ΠΌΠ°ΠΊΠ΅Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅, Π΅Π³ΠΎ ΠΏΠΎΠΏΡƒΠ»ΡΡ€Π½ΠΎΡΡ‚ΡŒ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ выросла со Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ распространСния мобильного Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π°. Π­Ρ‚ΠΎ связано с Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Π²Π΅Π±-сайт ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈ Ρ‚ΠΎΡ‚ ΠΆΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах, ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Π°Ρ… ΠΈ β€‹β€‹Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π°Ρ…, Ρ‡Ρ‚ΠΎ сокращаСт врСмя Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ.

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π² ΠΎΠ΄ΠΈΠ½ столбСц Ρ…ΠΎΡ€ΠΎΡˆΠΎ подходят для создания ΡƒΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ чтСния, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ΠΈ ΡΠΎΡΡ€Π΅Π΄ΠΎΡ‚Π°Ρ‡ΠΈΠ²Π°ΡŽΡ‚ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π½Π° содСрТании, Π½Π΅ отвлСкая Π½ΠΈ ΠΎΠ΄Π½Ρƒ ΠΈΠ· сторон.Π’ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ Π±Π»ΠΎΠ³-сайт Medium ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π΅Π³ΠΎ для всСх своих статСй.

НаконСц, Π² сочСтании с изобраТСниями ΠΌΠ°ΠΊΠ΅Ρ‚ с ΠΎΠ΄Π½ΠΈΠΌ столбцом ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ сильноС влияниС, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ позволяСт ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ эти изобраТСния ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ большС. Ocean Resort — ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ этого Π² дСйствии.

Помня ΠΎΠ± этих Ρ„Π°ΠΊΡ‚ΠΎΡ€Π°Ρ…, рассмотритС Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ использования ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π² ΠΎΠ΄Π½Ρƒ ΠΊΠΎΠ»ΠΎΠ½ΠΊΡƒ, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ люди Ρ‚Ρ€Π°Ρ‚ΠΈΠ»ΠΈ ΠΌΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π½Π° Ρ‡Ρ‚Π΅Π½ΠΈΠ΅ Π½Π° вашСм сайтС ΠΈΠ»ΠΈ Ссли Ρƒ вас Π΅ΡΡ‚ΡŒ изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Π½ΡƒΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠΎΠΌΠ½Π°Ρ‚Π° сияла.

Из-Π·Π° своСй простоты использованиС ΠΎΠ΄Π½ΠΎΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΠΎΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ нСсколько ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ.Однако Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π²Π½ΠΈΠΌΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΏΠΎΡ‚ΠΎΠΊ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ. Π’ ΠΊΠ°ΠΊΠΎΠΌ порядкС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ ваш ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚?

НапримСр, ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π΄Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΠΊΡ€Π°Ρ‚ΠΊΠΎΠ΅ ΠΈΠ·Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ страница ΠΎΡ…Π²Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ Π²Π²Π΅Ρ€Ρ…Ρƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ ΠΈΡ… Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΈ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠΈΡ‚ΡŒ Ρ‡Π΅Ρ‚ΠΊΠΈΠΉ ΠΏΡ€ΠΈΠ·Ρ‹Π² ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ Π±Π»ΠΈΠΆΠ΅ ΠΊ ΠΊΠΎΠ½Ρ†Ρƒ.

Π’Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄ΡƒΠΌΠ°ΠΉΡ‚Π΅ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Ρ‚ΡŒ страницу Π²Π½ΠΈΠ·. ΠœΠ°ΠΊΠ΅Ρ‚Ρ‹ с ΠΎΠ΄Π½ΠΈΠΌ столбцом, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, Π΄Π»ΠΈΠ½Π½Π΅Π΅, ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Π½Π΅ всСгда ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎ, Ρ‡Ρ‚ΠΎ Π² Π½ΠΈΠΆΠ½Π΅ΠΉ части страницы находится большС содСрТимого. ΠœΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ стрСлка.

Если ΠΌΠ°ΠΊΠ΅Ρ‚ с ΠΎΠ΄Π½ΠΈΠΌ столбцом каТСтся Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‰ΠΈΠΌ, Π½ΠΎ Ρƒ вас всС Π΅Ρ‰Π΅ Π΅ΡΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° для ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ, ΠΏΠΎΠ΄ΡƒΠΌΠ°ΠΉΡ‚Π΅ ΠΎ принятии Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π½Π° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚.

2. ΠœΠ°ΠΊΠ΅Ρ‚, ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π½Π° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚

Π’Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ΠΌΠ°ΠΊΠ΅Ρ‚, ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π½Π° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, Π½Π° новостных сайтах ΠΈΠ»ΠΈ Π±Π»ΠΎΠ³Π°Ρ…, ΠΈ ΠΎΠ½ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΠΌΠ΅Π΅Ρ‚ основной столбСц для ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ нСсколько Π±ΠΎΠΊΠΎΠ²Ρ‹Ρ… столбцов для Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ.

ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²ΠΎ этого ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Π΄Π»ΠΈΠ½ΠΎΠΉ строки Ρ†Π΅Π½Ρ‚Ρ€Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ содСрТимого, измСняя ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π±ΠΎΠΊΠΎΠ²Ρ‹Ρ… столбцов.Π­Ρ‚ΠΎ ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ, Ссли Π΄Π»ΠΈΠ½Π° строки тСкста слишком длинная ΠΈΠ»ΠΈ короткая, Π΅Π³ΠΎ становится Ρ‚Ρ€ΡƒΠ΄Π½Π΅Π΅ Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ сниТаСт ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΈ ΡƒΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ.

Однако, Ссли всС сдСлано ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ, ΠΌΠ°ΠΊΠ΅Ρ‚, ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π½Π° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, ΠΈΠ΄Π΅Π°Π»Π΅Π½ для любого Π²Π΅Π±-сайта, ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π½Π° ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. Π‘Π΅ΠΊΡ€Π΅Ρ‚ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·Π±ΠΈΡ‚ΡŒ содСрТимоС этого ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π½Π° нСбольшиС, Π»Π΅Π³ΠΊΠΎ усваиваСмыС Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹.

НапримСр, Π² ΠΌΠΎΠ΅ΠΌ Π±Π»ΠΎΠ³Π΅ Π²Ρ‹ ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΉ срСдний пост состоит ΠΈΠ· Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ², списков, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Ρ†ΠΈΡ‚Π°Ρ‚. ВсС это ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹, ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‰ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ ΡΠΊΠ°Π½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΡΡ‚Π°Ρ‚ΡŒΡŽ ΠΈ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΡƒΡŽΡ‰ΠΈΠ΅ Π΅Π΅ части.

Π’Π°ΠΊΠΆΠ΅ слСдуСт ΡƒΠ΄Π΅Π»ΠΈΡ‚ΡŒ особоС Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π±ΠΎΠΊΠΎΠ²Ρ‹ΠΌ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌ. ΠžΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ помСстил Π² эти столбцы ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΈ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ ΠΈΠΌΠ΅Π»ΠΈ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ вСс.

ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΎΠΆΠΈΠ΄Π°ΡŽΡ‚ Π½Π°ΠΉΡ‚ΠΈ Π²Ρ‚ΠΎΡ€ΠΈΡ‡Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π² Π±ΠΎΠΊΠΎΠ²Ρ‹Ρ… столбцах ΠΈ поэтому ΡƒΠ΄Π΅Π»ΡΡŽΡ‚ ΠΈΠΌ мСньшС внимания. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ, Ссли Π²Ρ‹ ΠΏΠ»Π°Π½ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π² Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ столбСц Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π²Ρ€ΠΎΠ΄Π΅ ΠΏΡ€ΠΈΠ·Ρ‹Π²Π° ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ, ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ достаточно ΡΠΈΠ»ΡŒΠ½Ρ‹ΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅.

НапримСр, ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ Smashing Magazine ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΊΡ€Π°ΡΠΎΡ‡Π½ΡƒΡŽ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ ΠΊΠΎΡ‚Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΊ Ρ„ΠΎΡ€ΠΌΠ΅ подписки Π½Π° рассылку новостСй Π² ΠΏΡ€Π°Π²ΠΎΠΌ столбцС.

НС Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΌΠ°ΠΊΠ΅Ρ‚, ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π½Π° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΠ» для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ страницы вашСго сайта. Π’Π΅Π±-сайты часто ΡΠΎΡ‡Π΅Ρ‚Π°ΡŽΡ‚ этот ΠΌΠ°ΠΊΠ΅Ρ‚ с Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ Π² стилС ΠΆΡƒΡ€Π½Π°Π»Π°.

3. ΠœΠ°ΠΊΠ΅Ρ‚ ΠΆΡƒΡ€Π½Π°Π»Π°

Как слСдуСт ΠΈΠ· названия, этот ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ ΠΌΠ°ΠΊΠ΅Ρ‚Ρƒ ΡˆΠΈΡ€ΠΎΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² ΠΆΡƒΡ€Π½Π°Π»Π°Ρ… ΠΈΠ»ΠΈ новостных сайтах для ΠΏΠΎΠΊΠ°Π·Π° большого количСства Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… статСй.

Π’Π΄ΠΎΡ…Π½ΠΎΠ²Π»Π΅Π½Π½Ρ‹Π΅ ΠΏΠ΅Ρ‡Π°Ρ‚Π½Ρ‹ΠΌ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠΌ, ΠΎΠ½ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΠΈ изобраТСния для прСдставлСния историй. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ интСрСсным способом ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ΠΏΠΎ сути являСтся списком ссылок.

Π­Ρ‚ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ для выдСлСния рСгулярно обновляСмого содСрТимого. Π’ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ новостныС сайты, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ The Washington Post, Ρ‚Π°ΠΊ ΠΎΠ΄ΠΎΠ±Ρ€ΡΡŽΡ‚ Π΅Π³ΠΎ.

Однако ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ° Π½Π΅ лишСна нСдостатков. ΠœΠ°ΠΊΠ΅Ρ‚ ΠΆΡƒΡ€Π½Π°Π»Π° ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ нСпросто ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ, часто трСбуя ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ измСнСния Π΄ΠΈΠ·Π°ΠΉΠ½Π° для устройств с мСньшим экраном.

Π­Ρ‚ΠΎΡ‚ ΡΡ‚ΠΈΠ»ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ нСсколько ΠΏΠΎΠ΄Π°Π²Π»ΡΡŽΡ‰ΠΈΠΌ, с большим количСством ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ², ΠΏΡ€ΠΈΠ·Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… ΠΊ вниманию.

Π‘Π°ΠΌΡ‹ΠΉ эффСктивный способ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ этой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ — созданиС Ρ‡Π΅Ρ‚ΠΊΠΎΠΉ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΠΈ.Π”Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами, сдСлайтС ΠΎΠ΄Π½ΠΈ «истории» ΠΊΡ€ΡƒΠΏΠ½Π΅Π΅ Π΄Ρ€ΡƒΠ³ΠΈΡ….

НапримСр, ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ Π²Π΅Π±-сайт Vogue фокусируСт Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Π»Π΅Π²ΠΎΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ, дСлая Π΅Π³ΠΎ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ большС. Они эффСктивно говорят ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ, Π³Π΄Π΅ ΠΈΡΠΊΠ°Ρ‚ΡŒ Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ.

Π’Π°ΠΊΠΆΠ΅ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ простота ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса с чистой Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠΎΠΉ ΠΈ простыми панСлями Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. Если Π²Ρ‹ ΡΠΎΠ±ΠΈΡ€Π°Π΅Ρ‚Π΅ΡΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΆΡƒΡ€Π½Π°Π»Π°, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΌΠ½ΠΎΠ³ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ всС Π±Ρ‹Π»ΠΎ просто.

Π•Ρ‰Π΅ ΠΎΠ΄Π½ΠΈΠΌ ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΌ нСдостатком ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΆΡƒΡ€Π½Π°Π»Π° являСтся Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Β«ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹ΠΌΒ», ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ сСтка, лСТащая ΠΏΠΎΠ΄ Π½ΠΈΠΌ, ΠΎΡ‡Π΅Π½ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π²ΠΈΠ΄Π½Π°.Однако Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΌΡΠ³Ρ‡ΠΈΡ‚ΡŒ это, Π²Π΄ΠΎΡ…Π½ΠΎΠ²ΠΈΠ²ΡˆΠΈΡΡŒ нашим ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ Ρ‚ΠΈΠΏΠΎΠΌ ΠΌΠ°ΠΊΠ΅Ρ‚Π°.

4. ΠœΠ°ΠΊΠ΅Ρ‚ с Ρ€Π°Π·Ρ€Ρ‹Π²ΠΎΠΌ сСтки

ΠœΠ°ΠΊΠ΅Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅, каТСтся, Π½Π°Ρ€ΡƒΡˆΠ°ΡŽΡ‚ ΠΎΡΠ½ΠΎΠ²Π½ΡƒΡŽ сСтку, ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π±ΠΎΠ»Π΅Π΅ интСрСсными, Ρ‡Π΅ΠΌ Π±ΠΎΠ»Π΅Π΅ Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½Ρ‹Π΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Ρ‹. Они Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ подходят для привлСчСния внимания ΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ элСмСнтам экрана, выходящим Π·Π° Ρ€Π°ΠΌΠΊΠΈ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… столбцов.

Π’ΠΎΠ·ΡŒΠΌΠ΅ΠΌ, ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, сайт VR Arles Festival. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°ΡŽΡ‚ вашС Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΊ своСй ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, пСрСкрывая Π΄Π²Π° столбца.

Π•Ρ‰Π΅ ΠΎΠ΄Π½ΠΎ практичСскоС ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚Π° с Ρ€Π°Π·Ρ€Ρ‹Π²ΠΎΠΌ сСтки — ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ для налоТСния тСкста Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΊ ΠΊΠΎΠΏΠΈΠΈ. Когда Π²Π΅Π±-страница ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π½Π°ΠΊΠ»Π°Π΄Ρ‹Π²Π°Π΅Ρ‚ тСкст Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π΅Π³ΠΎ часто ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡ‚Π΅Ρ€ΡΡ‚ΡŒ. Однако, ΠΊΠ°ΠΊ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΈΠ· ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ³ΠΎ Π½ΠΈΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°, Ссли тСкст частично ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΎΠ½ выдСляСтся Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ большС.

ΠžΠ±Ρ€Π°Ρ‚Π½ΠΎΠΉ стороной ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ², Ρ€Π°Π·Ρ€ΡƒΡˆΠ°ΡŽΡ‰ΠΈΡ… сСтку, являСтся Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΈΡ… слоТно ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ, особСнно ΠΊΠΎΠ³Π΄Π° Π²Π΅Π±-сайты Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΌΠΈ. По ΠΏΡ€Π°Π²Π΄Π΅ говоря, Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ², Ρ€Π°Π·Ρ€ΡƒΡˆΠ°ΡŽΡ‰ΠΈΡ… сСтку, Π½Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ Π½ΠΈΡ‡Π΅Π³ΠΎ ΠΎΠ±Ρ‰Π΅Π³ΠΎ с ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹ΠΌ.По-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ сущСствуСт основная сСтка, ΠΈ всС элСмСнты экрана ΠΏΠΎΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ Π² Π½Π΅Π΅. ΠŸΡ€ΠΎΡΡ‚ΠΎ сСтка Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ слоТнСС ΠΈ поэтому Π½Π΅ Ρ‚Π°ΠΊ ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½Π°. Π­Ρ‚ΠΎ затрудняСт ΠΈΡ… Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ.

Π˜Ρ… Π½Π΅ΠΎΡ‚ΡŠΠ΅ΠΌΠ»Π΅ΠΌΠ°Ρ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ являСтся ΠΏΡ€ΠΈΡ‡ΠΈΠ½ΠΎΠΉ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ΠΈΡ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ дизайнСрскиС ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ дизайнСрскиС агСнтства ΠΈΠ»ΠΈ ΠΌΠΎΠ΄Π½Ρ‹Π΅ Π±Ρ€Π΅Π½Π΄Ρ‹. Они Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‚ ΡΡ‚Π΅ΠΏΠ΅Π½ΡŒ изысканности Π΄ΠΈΠ·Π°ΠΉΠ½Π°, которая нравится ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ Π°ΡƒΠ΄ΠΈΡ‚ΠΎΡ€ΠΈΠΈ.

Если ΠΌΠ°ΠΊΠ΅Ρ‚ с Ρ€Π°Π·Ρ€Ρ‹Π²ΠΎΠΌ сСтки каТСтся слишком слоТным для вашСй ситуации, Π½ΠΎ Π²Ρ‹ всС ΠΆΠ΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ½Π½ΠΎΠ²Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈ Π½Π΅ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ΅, ΠΏΠΎΠ΄ΡƒΠΌΠ°ΠΉΡ‚Π΅ ΠΎ полноэкранном Π΄ΠΈΠ·Π°ΠΉΠ½Π΅.

5. ΠŸΠΎΠ»Π½ΠΎΡΠΊΡ€Π°Π½Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚

ΠŸΠΎΠ»Π½ΠΎΡΠΊΡ€Π°Π½Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚, ΠΊΠ°ΠΊ слСдуСт ΠΈΠ· названия, помСщаСтся Π½Π° ΠΎΠ΄Π½ΠΎΠΌ экранС Π±Π΅Π· нСобходимости ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ. Π­Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ ΠΈΡ… ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ для повСствования ΠΈΠ»ΠΈ ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΉ.

Π’ΠΎΠ·ΡŒΠΌΠ΅ΠΌ, ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, «Π’ΠΈΠ΄Ρ‹ Π² кусках». Π­Ρ‚ΠΎΡ‚ насыщСнный ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ ΠΎΠΏΡ‹Ρ‚ рассказываСт истории 30 Π²ΠΎΠ²Π»Π΅Ρ‡Π΅Π½Π½Ρ‹Ρ… Π²ΠΈΠ΄ΠΎΠ².

Как Π²ΠΈΠ΄ΠΈΡ‚Π΅, полноэкранныС ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π»ΡƒΡ‡ΡˆΠ΅ всСго выглядят, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ ΡΠΎΠΏΡ€ΠΎΠ²ΠΎΠΆΠ΄Π°ΡŽΡ‚ΡΡ яркими изобраТСниями. Π­Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ ΠΈΡ… ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΌ Π²Ρ‹Π±ΠΎΡ€ΠΎΠΌ для Π²Π΅Π±-сайтов, Π±ΠΎΠ³Π°Ρ‚Ρ‹Ρ… фотографиями, ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΡΠΌΠΈ ΠΈΠ»ΠΈ Π²ΠΈΠ΄Π΅ΠΎ.

НС Ρ‚ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ строго ΠΏΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π° с ΠΎΠ΄Π½ΠΈΠΌ экраном. На ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ взгляд сайт Π Ρƒ Π½Π° ΠŸΠ°Ρ€Π»Π°ΠΌΠ΅Π½Ρ‚ΡΠΊΠΎΠΉ ΠΏΠ»ΠΎΡ‰Π°Π΄ΠΈ каТСтся полноэкранным Π² Ρ‚ΠΎΠΌ ΠΆΠ΅ смыслС, Ρ‡Ρ‚ΠΎ ΠΈ Species in Pieces. Π˜Ρ… Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ½Ρ‹Π΅ изобраТСния Π·Π°ΠΏΠΎΠ»Π½ΡΡŽΡ‚ всС ΠΎΠΊΠ½ΠΎ просмотра.

Однако ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π²Π½ΠΈΠ· ΠΏΠΎ страницС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ содСрТимоС. К соТалСнию, это ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π΅Ρ‚ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ нСдостаток Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π° ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ΅. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π½Π΅ всСгда ΠΏΠΎΠ½ΠΈΠΌΠ°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Ρ‚ΡŒ страницу, ΠΈ поэтому ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Ρ†Π΅Π½Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚.

Π’Π°ΠΊΠΆΠ΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Ρ‚Ρ‰Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΌΠ°ΠΊΠ΅Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΊ Ρ€Π°Π·Π½Ρ‹ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌ. НапримСр, Π±ΡƒΠ΄Π΅Ρ‚ Π»ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ полноэкранный Ρ€Π΅ΠΆΠΈΠΌ Π½Π° мобильном устройствС? ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π±ΡƒΠ΄ΡƒΡ‚ Π»ΠΈ изобраТСния ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° экрана ΠΈΠ»ΠΈ просто ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Ρ‚ΡŒΡΡ? Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ быстро Π½Π°ΠΉΡ‚ΠΈ фокусныС Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ±Ρ€Π΅Π·Π°ΡŽΡ‚ΡΡ Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ области, ΠΏΡ€ΠΈ ΠΌΠ΅Π½ΡŒΡˆΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€Π°Ρ….

Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Ссли Ρƒ вас Π΅ΡΡ‚ΡŒ ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠ΅ изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ, Π²Π°ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ слоТно Π½Π°ΠΉΡ‚ΠΈ Π»ΡƒΡ‡ΡˆΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΌΠ°ΠΊΠ΅Ρ‚Π°. Но Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ описания ΠΈ ΠΏΡ€ΠΈΠ·Ρ‹Π²Ρ‹ ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ вмСстС с этими изобраТСниями, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚.

6. ΠΠ»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚

ΠΠ»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ — ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ часто Π²ΡΡ‚Ρ€Π΅Ρ‡Π°ΡŽΡ‰ΠΈΡ…ΡΡ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅. Π’Ρ‹ ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ ΠΎΠ½ состоит ΠΈΠ· сСрии Π±Π»ΠΎΠΊΠΎΠ² содСрТимого, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΈΠΌΠ΅Π΅Ρ‚ Π΄Π²ΡƒΡ…ΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚. Π‘Π»ΠΎΠΊΠΈ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ состоят ΠΈΠ· изобраТСния с ΠΎΠ΄Π½ΠΎΠΉ стороны ΠΈ тСкста с Π΄Ρ€ΡƒΠ³ΠΎΠΉ.

НазваниС Π΄Π°Π΅Ρ‚ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ чСрСдуСтся. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ Π±Π»ΠΎΠΊ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ содСрТимоС слСва ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ справа, Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Π±Π»ΠΎΠΊ мСняСт этот ΠΌΠ°ΠΊΠ΅Ρ‚.

Π­Ρ‚ΠΎ ΠΌΠ΅Ρ‚ΠΎΠ΄ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ особСнно нравится ΠΏΡ€ΠΈ объяснСнии Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ ΠΈΠ»ΠΈ прСимущСств ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°.НапримСр, ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½Ρ‹Π΅ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Ρ‹, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Webydo, Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ, Π° Π·Π°Ρ‚Π΅ΠΌ копию, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±ΡŠΡΡΠ½ΠΈΡ‚ΡŒ, ΠΊΠ°ΠΊ ΠΎΠ½Π° Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΈΠ»ΠΈ ΠΊΠ°ΠΊΠΈΠ΅ прСимущСства ΠΎΠ½Π° Π΄Π°Π΅Ρ‚.

НС Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ эти Π±Π»ΠΎΠΊΠΈ содСрТимого ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°Π»ΠΈΡΡŒ изобраТСниями ΠΈ тСкстом. Иногда сайты Π·Π°ΠΌΠ΅Π½ΡΡŽΡ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π²ΠΈΠ΄Π΅ΠΎ. Π’ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊ ΠΆΠ΅ контСнтная сторона элСмСнта ΠΌΠΎΠΆΠ΅Ρ‚ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ всС, ΠΎΡ‚ Π·Π½Π°Ρ‡ΠΊΠΎΠ² Π΄ΠΎ ΠΎΡ‚Π·Ρ‹Π²ΠΎΠ² ΠΈΠ»ΠΈ ΠΏΡ€ΠΈΠ·Ρ‹Π²ΠΎΠ² ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ.

НапримСр, Convertkit Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ ΠΎΡ‚Π·Ρ‹Π² ΠΈ ΠΏΡ€ΠΈΠ·Ρ‹Π² ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ вмСстС с ΠΈΡ… тСкстом Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ Π±Π»ΠΎΠΊΠ΅ содСрТимого.

Частично Ρ‡Π΅Ρ€Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ΡΡ Π±Π»ΠΎΠΊΠΈ Ρ‚Π°ΠΊ распространСны, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ собой простой ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ΅ с нСбольшими нСдостатками. Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠΎΠ±Ρ‰ΠΈΡ‚ΡŒ нСсколько Ρ‚ΠΎΡ€Π³ΠΎΠ²Ρ‹Ρ… Ρ‚ΠΎΡ‡Π΅ΠΊ, это ΠΏΠΎΡ‡Ρ‚ΠΈ всСгда Π½Π°Π΄Π΅ΠΆΠ½Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ ΠΌΠ°ΠΊΠ΅Ρ‚Π°.

ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, ваши трСбования ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ, поэтому стоит Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ — ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚.

7. ΠšΠ°Ρ€Ρ‚ΠΎΡ‡Π½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹

ΠšΠ°Ρ€Ρ‚ΠΎΡ‡Π½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ страниц — Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ распространСнный ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ ΠΌΠ°ΠΊΠ΅Ρ‚Ρƒ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡ‚Ρ€Π΅Ρ‚ΠΈΡ‚ΡŒ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅.

ΠœΠ°ΠΊΠ΅Ρ‚Ρ‹ Π½Π° основС ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ — ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ способ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ людям ряд Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ², ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ, прСдоставляя ΠΈΠΌ достаточно ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΏΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ½ΡΡ‚ΡŒ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅.

Π­Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ ΠΈΡ… популярным Π²Ρ‹Π±ΠΎΡ€ΠΎΠΌ для страниц со списком ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ² Π½Π° сайтах элСктронной ΠΊΠΎΠΌΠΌΠ΅Ρ€Ρ†ΠΈΠΈ. Π­Ρ‚ΠΎ позволяСт Π²Π΅Π±-сайту ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°, описаниС ΠΈ Ρ†Π΅Π½Ρƒ. Π’Ρ‹ Π΄Π°ΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚Π°ΠΊΠΈΠ΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, ΠΊΠ°ΠΊ Β«ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π½Π° ΠΏΠΎΡ‚ΠΎΠΌΒ», ΠΊΠ°ΠΊ это Π²ΠΈΠ΄Π½ΠΎ Π½Π° Π²Π΅Π±-сайтС Asos.

Однако Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ Π²Π΅Π±-сайты, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π½Π° основС ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ, Π² любой ситуации, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ ΠΈΠ· списка. НапримСр, Π΄Ρ€ΡƒΠ³ΠΎΠ΅ Ρ‚ΠΈΠΏΠΈΡ‡Π½ΠΎΠ΅ использованиС — ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ списка статСй Π² Π±Π»ΠΎΠ³Π΅ ΠΈΠ»ΠΈ новостном сайтС.

ΠšΠ°Ρ€Ρ‚ΠΎΡ‡Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ позволяСт ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ истории, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΈ описания, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π»ΡŽΠ±Ρ‹Π΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ свСдСния ΠΎ ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ.Π‘Π»ΠΎΠ³ Awwwards — ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚Π°ΠΊΠΎΠ³ΠΎ использования Π² дСйствии.

Π›ΡƒΡ‡ΡˆΠ΅ всСго Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π½Π° основС ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΠΎ, ΠΏΡ€ΠΈ этом количСство ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ Π² ряду ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅Ρ‚ΡΡ ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΡ доступной ΡˆΠΈΡ€ΠΈΠ½Ρ‹.

Однако Ρƒ этого ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π° Π΅ΡΡ‚ΡŒ нСсколько Π½Π΅Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… нСдостатков. Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π»ΡƒΡ‡ΡˆΠ΅ всСго, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Ссли Π²Ρ‹ ΠΈΠ·ΠΎ всСх сил ΠΏΡ‹Ρ‚Π°Π΅Ρ‚Π΅ΡΡŒ Π½Π°ΠΉΡ‚ΠΈ подходящиС Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² вашСго списка, Π²Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π»ΡƒΡ‡ΡˆΠ΅ с Π΄Ρ€ΡƒΠ³ΠΈΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ.

Другая нСбольшая ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° связана с Ρ€Π°Π·Π½Ρ‹ΠΌ объСмом ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°.Если Π½Π° ΠΎΠ΄Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ΅ большС содСрТимого, Ρ‡Π΅ΠΌ Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ, пустоС пространство ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡΡ‚Π°Π²Π°Ρ‚ΡŒΡΡ Π»ΠΈΠ±ΠΎ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ, Π»ΠΈΠ±ΠΎ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ строкой.

Один ΠΈΠ· способов Ρ€Π΅ΡˆΠΈΡ‚ΡŒ эту ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ — Π½Π΅ ΠΏΡ‹Ρ‚Π°Ρ‚ΡŒΡΡ ΡƒΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ Π² ΠΎΠ΄Π½ΠΎΠΉ строкС, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π½ΠΈΠΆΠ΅.

Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, это Π½Π΅Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°, которая ΠΎΠ±ΡŠΡΡΠ½ΡΠ΅Ρ‚ ΡˆΠΈΡ€ΠΎΠΊΠΎΠ΅ распространСниС Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π° ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ΅.

Π”Ρ€ΡƒΠ³ΠΎΠΉ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ популярный Π΄ΠΈΠ·Π°ΠΉΠ½ — это ΠΌΠ°ΠΊΠ΅Ρ‚ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ изобраТСния.

8. ΠœΠ°ΠΊΠ΅Ρ‚ гСроя

ΠœΠ°ΠΊΠ΅Ρ‚ гСроя Π½Π°Π·Π²Π°Π½ Π² Ρ‡Π΅ΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ-Π³Π΅Ρ€ΠΎΠ΅Π², Ρ‚Π΅Ρ… Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с Π½Π°Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΌ тСкстом, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΎΠΌΠΈΠ½ΠΈΡ€ΡƒΡŽΡ‚ Π½Π° Π΄ΠΎΠΌΠ°ΡˆΠ½ΠΈΡ… страницах Π½Π° ΠΌΠ½ΠΎΠ³ΠΈΡ… Π²Π΅Π±-сайтах.Apple Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ классичСский ΠΎΠ±Ρ€Π°Π· гСроя.
Pixave для MacOS Ρ€Π°Π·Π²ΠΈΠ²Π°Π΅Ρ‚ ΠΌΠ°ΠΊΠ΅Ρ‚ гСроя Π΅Ρ‰Π΅ дальшС, доминируя Π½Π°Π΄ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ домашнСй страницы.

Π“Π»Π°Π²Π½Ρ‹Π΅ изобраТСния Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ распространСны, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ эффСктивно Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ своС цСнностноС ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ прямо Π² Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠ΅ вашСго Π²Π΅Π±-сайта.

Как Π²ΠΈΠ΄Π½ΠΎ ΠΈΠ· ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹Ρ… Π²Ρ‹ΡˆΠ΅ Π²Π΅Π±-сайтов Pixave ΠΈ Apple, ΠΎΠ½ΠΈ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ состоят ΠΈΠ· большого Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΈΠ»ΠΈ строки ΠΈ описания. ΠœΠ°ΠΊΠ΅Ρ‚Ρ‹ Π³Π΅Ρ€ΠΎΠ΅Π² Ρ‚Π°ΠΊΠΆΠ΅ часто ΡΠΎΠΏΡ€ΠΎΠ²ΠΎΠΆΠ΄Π°ΡŽΡ‚ΡΡ Π·Π°ΠΌΠ΅Ρ‚Π½Ρ‹ΠΌ ΠΏΡ€ΠΈΠ·Ρ‹Π²ΠΎΠΌ ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ.

Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Ρ‡Π΅Ρ‚ΠΊΠΎ ΠΎΠ±ΡŠΡΡΠ½ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚Π΅ Π½Π° своСй домашнСй страницС ΠΈΠ»ΠΈ Ρ†Π΅Π»Π΅Π²ΠΎΠΉ страницС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅-Π³Π΅Ρ€ΠΎΠΉ Π²ΠΏΠΎΠ»Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π»ΡƒΡ‡ΡˆΠΈΠΌ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠΌ. Однако это, вСроятно, ΡΡ‚Π΅ΠΏΠ΅Π½ΡŒ ΠΈΡ… использования.

Иногда Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚ гСроя, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ Π½Π° ΠΏΠΎΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… страницах. Но Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ гСроя просто ΠΎΡ‚Π²Π»Π΅ΠΊΠ°Π΅Ρ‚ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΎΡ‚ Π±ΠΎΠ»Π΅Π΅ Ρ†Π΅Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. Π’Π°ΠΊ Ρ‡Ρ‚ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ с ΠΎΡΡ‚ΠΎΡ€ΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ.

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Ρƒ использования раскладки гСроя Π΅ΡΡ‚ΡŒ нСбольшой нСдостаток. Π”Π°, ΠΎΠ½ΠΈ распространСны, Π½ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ с Π½ΠΈΠΌΠΈ Π·Π½Π°ΠΊΠΎΠΌΡ‹, ΠΈ ΠΎΠ½ΠΈ эффСктивны.

Π—Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΌΠ΅Π½Π΅Π΅ распространСнным Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ являСтся ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ° с Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ΠΌ экрана.

9. ΠœΠ°ΠΊΠ΅Ρ‚ с Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ΠΌ экрана

Как ΠΈ полноэкранный ΠΌΠ°ΠΊΠ΅Ρ‚, Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ экран — ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ способ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π²ΠΏΠ΅Ρ€Π²Ρ‹Π΅ ΠΏΠΎΠΏΠ°Π΄Π°ΡŽΡ‚ Π½Π° ваш Π²Π΅Π±-сайт, ΠΊΠ°ΠΊ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ страницС ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ, Π·Π°Π½ΠΈΠΌΠ°ΡŽΡ‰Π΅ΠΉΡΡ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ, Π½ΠΈΠΆΠ΅.

Π’ΠΎ, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ эффСктивным, — это явная ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π° для ΠΌΠ°ΠΊΠ΅Ρ‚Π° с Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ экраном. Π‘Π°ΠΉΡ‚ Π΄Π°Π΅Ρ‚ ΠΏΠΎΠ½ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρƒ ΠΈΡ… бизнСса Π΄Π²Π΅ стороны — Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ°.

ΠŸΠΎΡ…ΠΎΠΆΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ — ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΄Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Ρ‡Π΅Ρ‚ΠΊΠΈΠΉ Π΄Π²ΠΎΠΈΡ‡Π½Ρ‹ΠΉ Π²Ρ‹Π±ΠΎΡ€. Π Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ экран ΠΈΠΌΠ΅Π΅Ρ‚ большой смысл Π² этой ситуации, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ Π΄Π΅Π»ΠΈΡ‚ экран ΠΏΠΎΡ€ΠΎΠ²Π½Ρƒ ΠΌΠ΅ΠΆΠ΄Ρƒ двумя Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°ΠΌΠΈ.

НапримСр, модСльноС агСнтство 62 Management ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ экран, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ±ΡƒΠ΄ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, ΠΈΡ‰ΡƒΡ‚ Π»ΠΈ ΠΎΠ½ΠΈ модСль — ΠΌΡƒΠΆΡ‡ΠΈΠ½Ρƒ ΠΈΠ»ΠΈ ΠΆΠ΅Π½Ρ‰ΠΈΠ½Ρƒ.

К соТалСнию, ΠΏΠΎΠΌΠΈΠΌΠΎ этого ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΠ³ΠΎ числа ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, Π½Π΅Ρ‚ особых ΠΏΡ€ΠΈΡ‡ΠΈΠ½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ с Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ экраном. Π­Ρ‚ΠΎ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ, ΠΈ просто Π½Π΅ Ρ‚Π°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ сцСнариСв, Π³Π΄Π΅ ΠΎΠ½ умСстСн.Однако Π² Ρ‚Π΅Ρ… случаях, ΠΊΠΎΠ³Π΄Π° это Ρ‚Π°ΠΊ, это, бСзусловно, Π»ΡƒΡ‡ΡˆΠΈΠΉ Π²Ρ‹Π±ΠΎΡ€.

Аналогичным Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ обСспСчит Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Π³ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ, являСтся асиммСтричная ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ°.

10. АсиммСтричный ΠΌΠ°ΠΊΠ΅Ρ‚

Π’ Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ ΠΌΠ°ΠΊΠ΅Ρ‚ с Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ экраном Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ Ρ€Π°Π²Π½ΠΎΠ΅ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ посСрСдинС области просмотра, асиммСтричный Π΄ΠΈΠ·Π°ΠΉΠ½ позволяСт Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ экран Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π²Ρ‹ сочтСтС Π½ΡƒΠΆΠ½Ρ‹ΠΌ.

ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²ΠΎ этого ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΏΠ΅Ρ€Π΅Π΄ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ экраном состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ позволяСт Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΡƒΡŽ сторону страницы.Π§Π΅ΠΌ большС нСдвиТимости Ρƒ стороны, Ρ‚Π΅ΠΌ большС внимания Π²Ρ‹ удСляСтС Π΅ΠΉ. Π­Ρ‚ΠΎ, Π² свою ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ, позволяСт ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π²ΠΈΡ‡Π½Ρ‹ΠΉ ΠΈ Π²Ρ‚ΠΎΡ€ΠΈΡ‡Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚.

ИмСя прСдпосылки для ΠΏΠ΅Ρ€Π²ΠΈΡ‡Π½Ρ‹Ρ… ΠΈ Π²Ρ‚ΠΎΡ€ΠΈΡ‡Π½Ρ‹Ρ… столбцов, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ этот ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ нСсколькими способами. НапримСр, ЀСликс ЛСсуСф ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ этот ΠΌΠ΅Ρ‚ΠΎΠ΄ Π½Π° своСм сайтС для раздСлСния ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ.

Напротив, Π²Π΅Π±-сайт Nourish Eats ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π²Ρ‚ΠΎΡ€ΠΎΠΉ столбСц, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Ρ€Π°Π·Π΄Π΅Π» своСго Π²Π΅Π±-сайта.

Π’ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ… ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡΡ… асиммСтричная ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ° — ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ Π²Ρ‹Π±ΠΎΡ€.Он Π³ΠΈΠ±ΠΊΠΈΠΉ, ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ простой Π² Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΈ Ρ€Π΅ΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ. Π­Ρ‚ΠΎ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ способ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ внСшний Π²ΠΈΠ΄ вашСго Π²Π΅Π±-сайта Π±Π΅Π· ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ, связанных с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°ΠΌΠΈ.

Как Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚

ΠŸΡ€ΠΎΡ‡ΠΈΡ‚Π°Π² эту ΡΡ‚Π°Ρ‚ΡŒΡŽ, Π²Ρ‹ сдСлали ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ шаг Π² Π²Ρ‹Π±ΠΎΡ€Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π° для своСго сайта. Π’Ρ‹ ΡƒΠ·Π½Π°Π»ΠΈ, ΠΊΠ°ΠΊΠΈΠ΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ доступны Π²Π°ΠΌ.

Π—Π°Ρ‚Π΅ΠΌ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊΠΈΠ΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ подходящими для вашСго сайта. Один ΠΈΠ· способов ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это — ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π½Π° своих ΠΊΠΎΠ½ΠΊΡƒΡ€Π΅Π½Ρ‚ΠΎΠ².Однако я Π±Ρ‹ посовСтовал Π½Π΅ ΠΎΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒΡΡ Π½Π° достигнутом. ΠžΠΏΠ°ΡΠ½ΠΎΡΡ‚ΡŒ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΈΡ… скопируСтС, ΠΈ это всСгда отстанСт Π½Π° шаг ΠΏΠΎΠ·Π°Π΄ΠΈ.

ВмСсто этого взглянитС Π½Π° сайты Π² Π΄Ρ€ΡƒΠ³ΠΈΡ… сСкторах, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ связанныС Ρ‚ΠΈΠΏΡ‹ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° с вашим собствСнным. Если Ρƒ вас Π΅ΡΡ‚ΡŒ Π²Π΅Π±-сайт с Π±Ρ€ΠΎΡˆΡŽΡ€Π°ΠΌΠΈ, ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π½Π° Π°ΡƒΠ΄ΠΈΡ‚ΠΎΡ€ΠΈΡŽ B2B, ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΠΎΡ…ΠΎΠΆΠΈΠ΅ сайты. Π’ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊ ΠΆΠ΅, Ссли Ρƒ вас Π΅ΡΡ‚ΡŒ сайт элСктронной ΠΊΠΎΠΌΠΌΠ΅Ρ€Ρ†ΠΈΠΈ, ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΠ»Π΅ΠΊΡ‚Ρ€ΠΎΠ½Π½ΡƒΡŽ ΠΊΠΎΠΌΠΌΠ΅Ρ€Ρ†ΠΈΡŽ Π² Π΄Ρ€ΡƒΠ³ΠΈΡ… сСкторах.

Π—Π°Ρ‚Π΅ΠΌ ΠΏΠΎΡ€Π°Π±ΠΎΡ‚Π°ΠΉΡ‚Π΅ со своим Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ с Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π°ΠΌΠΈ.ΠŸΡ€Π΅Π΄Π»ΠΎΠΆΠΈΡ‚Π΅ ΠΈΠΌ каркасныС схСмы Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΈΠ΄Π΅ΠΉ, основанныС Π½Π° Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΌΠ°ΠΊΠ΅Ρ‚Π°Ρ…, ΠΈ посмотритС, Ρ‡Ρ‚ΠΎ Π»ΡƒΡ‡ΡˆΠ΅ всСго ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для вашСго ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°.

Если Π²Ρ‹ ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΈΠ½ΡΡ‚ΡŒ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ Π½Π΅ ΡƒΠ²Π΅Ρ€Π΅Π½Ρ‹ Π² ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ, ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠΈΡ‚ΡŒ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ ΠΏΠ΅Ρ€Π΅Π΄ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌΠΈ ΠΈ ΡƒΠ·Π½Π°Ρ‚ΡŒ ΠΈΡ… Ρ€Π΅Π°ΠΊΡ†ΠΈΡŽ. НС просто ΡΠΏΡ€Π°ΡˆΠΈΠ²Π°ΠΉΡ‚Π΅ ΠΈΡ…, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°ΡŽΡ‚, Π½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΡΠΏΡ€Π°ΡˆΠΈΠ²Π°ΠΉΡ‚Π΅, Π·Π°ΠΌΠ΅Ρ‚ΠΈΠ»ΠΈ Π»ΠΈ ΠΎΠ½ΠΈ критичСский ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΈΠ»ΠΈ поняли Π»ΠΈ ΠΎΠ½ΠΈ, Ρ‡Π΅ΠΌ занимаСтся компания.

По ΠΏΡ€Π°Π²Π΄Π΅ говоря, Π²Ρ‹, вСроятно, ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚Π΅ Ρ€Π°Π·Π½Ρ‹Π΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Ρ‹ ΠΊ ΠΌΠ°ΠΊΠ΅Ρ‚Ρƒ для Ρ€Π°Π·Π½Ρ‹Ρ… частСй вашСго Π²Π΅Π±-сайта, ΠΈ это Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ.ΠŸΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΊΠΎΠ³Π΄Π° Π΄Π΅Π»ΠΎ Π΄ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Π΄ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта, использованиС ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ³ΠΎ Π² Π½ΡƒΠΆΠ½ΠΎΠ΅ врСмя ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π΅ΡˆΠ°ΡŽΡ‰Π΅Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅.

Π›ΡƒΡ‡ΡˆΠΈΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π²Π΅Π±-сайтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΡƒΡΡ‚Π°Ρ€Π΅ΡŽΡ‚

ΠŸΠΎΡ‡Π΅ΠΌΡƒ люди Π½Π° самом Π΄Π΅Π»Π΅ ΠΏΠΎΡΠ΅Ρ‰Π°ΡŽΡ‚ Π²Π΅Π±-сайты? Π’ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, основная ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ посСщСния — ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ . ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΈΠΌΠ΅Π΅Ρ‚ пСрвостСпСнноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΈ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ Ρ…ΠΎΡ‡Π΅Ρ‚ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π½Π° своСм Π²Π΅Π±-сайтС Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌ ΠΈ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятным способом. Π•Π³ΠΎ Π½Π΅ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹Π±ΠΎΡ€ ΠΌΠ°ΠΊΠ΅Ρ‚Π° для вашСго ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° являСтся ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΠΏΠ΅Ρ€Π²ΠΎΠ΅, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°ΡŽΡ‚ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹, ΠΊΠΎΠ³Π΄Π° Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‚ Π½ΠΎΠ²Ρ‹ΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚.

МногиС Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΡΡ‡ΠΈΡ‚Π°ΡŽΡ‚ Π²Π΅Π±-ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ сайта, Π½Π°Π΄ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΎΠ½ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚, Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ для ΡƒΠ΄ΠΎΠ²Π»Π΅Ρ‚Π²ΠΎΡ€ΠΈΡ‚ΡŒ Ρ†Π΅Π»ΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° — это Π΄Π°Π»Π΅ΠΊΠΎ ΠΎΡ‚ истины. Если Π²Ρ‹ посСтитС популярных Π²Π΅Π±-сайтов, Π²Ρ‹ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΈΠ· Π½ΠΈΡ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ΠΏΠΎΡ…ΠΎΠΆΠΈΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹. Π­Ρ‚ΠΎΡ‚ Π½Π΅ случайно ΠΈ Π½Π΅ ΠΈΠ· Π»Π΅Π½ΠΈ, Π° ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ Π² этих ΠΌΠ°ΠΊΠ΅Ρ‚Π°Ρ… Ρ‚Ρ€ΠΈ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… прСимущСства:

  • Они ΠΏΡ€ΠΈΠ³ΠΎΠ΄Π½Ρ‹ для использования . ΠžΠ±Ρ‰ΠΈΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π²Π΅Π±-сайтов стали ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΌ явлСниСм, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π΄ΠΎΠΊΠ°Π·Π°Π»ΠΈ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ с Π½ΠΈΠΌΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ.
  • Они Π·Π½Π°ΠΊΠΎΠΌΡ‹ . Π₯ΠΎΡ€ΠΎΡˆΠΈΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΎΠΏΡ‹Ρ‚ создаСтся ΠΏΡƒΡ‚Π΅ΠΌ знакомства с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌΠΈ. ΠŸΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΠΈ ΠΈΡΠΏΡ‹Ρ‚Ρ‹Π²Π°ΡŽΡ‚ приятноС чувство дСТавю, ΠΊΠΎΠ³Π΄Π° видят Π·Π½Π°ΠΊΠΎΠΌΡ‹Π΅ Ρ‡Π΅Ρ€Ρ‚Ρ‹, располоТСнныС Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΠΎΠΆΠΈΠ΄Π°Π»ΠΈ. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ люди Π±ΡƒΠ΄ΡƒΡ‚ Ρ‚Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ врСмя Π½Π° ΠΏΠ΅Ρ€Π΅Π²Π°Ρ€ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, Π° Π½Π΅ Π½Π° ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ страницы.
  • Экономят . ΠŸΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠ΅ использованиС ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… Π²Π΅Π±-ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² позволяСт ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ‚ΡŒ врСмя. Π”ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ Π±ΡƒΠ΄ΡƒΡ‚ Ρ‚Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ мСньшС Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π½Π° экспСримСнты с ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠΌ ΠΈ большС ΡΠΎΡΡ€Π΅Π΄ΠΎΡ‚Π°Ρ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ Π½Π° Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΠΈ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… аспСктах Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ прямоС влияниС Π½Π° взаимодСйствиС с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ.

Π₯отя ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ ΡƒΠ½ΠΈΠΊΠ°Π»Π΅Π½ ΠΈ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π°, ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π·Π½Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ каркасныС ΠΌΠΎΠ΄Π΅Π»ΠΈ, ΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ±Ρ‰ΠΈΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ сайтов. Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ рассмотрим Π»ΡƒΡ‡ΡˆΠΈΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π²Π΅Π±-сайтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ сСгодня ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ Π½Π° бСсчислСнном количСствС сайтов.

1. ΠžΠ΄ΠΈΠ½ΠΎΡ‡Π½Π°Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°

ΠžΠ΄ΠΈΠ½ΠΎΡ‡Π½Π°Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ° ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΡŒΡ‚Π΅ основноС содСрТаниС Π² ΠΎΠ΄Π½ΠΎΠΌ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΌ столбцС. Π­Ρ‚ΠΎΡ‚ Ρ‚ΠΈΠΏ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, самый простой ΠΈΠ· этого списка ΠΈ самый Π»Π΅Π³ΠΊΠΈΠΉ для Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ.ΠŸΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΠΈ просто ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°ΡŽΡ‚ страницу Π²Π½ΠΈΠ·, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ большС ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°.

НСсмотря Π½Π° простоту, ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π² ΠΎΠ΄ΠΈΠ½ столбСц довольно популярны Π½Π° ΠΌΠ½ΠΎΠ³ΠΈΡ… Π²Π΅Π±-сайтах. ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Ρ€Π΅Π²ΠΎΠ»ΡŽΡ†ΠΈΡ Ρ‚Π°ΠΊΠΆΠ΅ повлияла Π½Π° ΠΏΠΎΠΏΡƒΠ»ΡΡ€Π½ΠΎΡΡ‚ΡŒ этого Ρ‚ΠΈΠΏΠ° ΠΌΠ°ΠΊΠ΅Ρ‚Π° — ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π² ΠΎΠ΄Π½Ρƒ ΠΊΠΎΠ»ΠΎΠ½ΠΊΡƒ идСально подходят для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… экранов.

Когда ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ

Π­Ρ‚ΠΎΡ‚ ΠΌΠ°ΠΊΠ΅Ρ‚ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ… Π»ΠΈΡ‡Π½Ρ‹Ρ… Π±Π»ΠΎΠ³Π°Ρ…, основанноС Π½Π° ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ°Ρ… минималистичного Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π­Ρ‚ΠΎ обычная раскладка для ΠΌΠΈΠΊΡ€ΠΎΠ±Π»ΠΎΠ³ΠΎΠ², Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Tumblr.

Medium , ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ° для вСдСния Π±Π»ΠΎΠ³ΠΎΠ², ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΎΠ΄Π½Ρƒ ΠΊΠΎΠ»ΠΎΠ½ΠΊΡƒ.
Π‘ΠΎΠ²Π΅Ρ‚ ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ
  • РассмотритС Β«Π»ΠΈΠΏΠΊΠΈΠ΅Β» мСню для Π΄Π»ΠΈΠ½Π½Ρ‹Ρ… страниц . ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ одностолбцовый ΠΌΠ°ΠΊΠ΅Ρ‚ часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для страниц с Π΄Π»ΠΈΠ½Π½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ, Π²Π°ΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ навигация всСгда Π±Ρ‹Π»Π° Π½Π° Π²ΠΈΠ΄Ρƒ. Β«ΠŸΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½Π½Π°Ρ навигация» ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ нСобходимости ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ посСтитСлСй Π΄ΠΎ самого Π²Π΅Ρ€Ρ…Π° страницы для Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ.
Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡ‚ CodeMyUI

2. Π Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ экран

Π Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ экран (ΠΈΠ»ΠΈ ΠΎΠ΄ΠΈΠ½ экран Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ Π½Π° Π΄Π²Π΅ части) Π²Π΅Π±-ΠΌΠ°ΠΊΠ΅Ρ‚ идСально ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для страницы с двумя основными части ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Ρ€Π°Π²Π½ΠΎΠΉ ваТности. Π­Ρ‚ΠΎ позволяСт Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ ΠΊΠ°ΠΊ элСмСнты ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ, удСляя ΠΈΠΌ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅.

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ 62 ΠΌΠΎΠ΄Π΅Π»Π΅ΠΉ

Когда ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ

ΠœΠ°ΠΊΠ΅Ρ‚Ρ‹ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ экрана ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹, ΠΊΠΎΠ³Π΄Π° ваш сайт ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π΄Π²Π° ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Ρ€Π°Π·Π½Ρ‹Ρ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° ΠΏΡƒΡ‚Π΅ΡˆΠ΅ΡΡ‚Π²ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π΄Π²Π° Ρ€Π°Π·Π½Ρ‹Ρ… Ρ‚ΠΈΠΏΠ° инструкций, ΠΊΠ°ΠΊ ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ Π² ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Dropbox Π½ΠΈΠΆΠ΅.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ контрастныС экраны для Ρ€Π°Π·Π½Ρ‹Ρ… случаСв использования.
Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ прСдоставлСно Google Star Wars Настройки
Π‘ΠΎΠ²Π΅Ρ‚Ρ‹ ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ
  • Π˜Π·Π±Π΅Π³Π°ΠΉΡ‚Π΅ использования слишком большого количСства ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π² Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… Ρ€Π°Π·Π΄Π΅Π»Π°Ρ… . Π”ΠΈΠ·Π°ΠΉΠ½ с Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ экраном ΠΏΠ»ΠΎΡ…ΠΎ Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅Ρ‚ΡΡ ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ роста содСрТания, поэтому Π»ΡƒΡ‡ΡˆΠ΅ ΠΈΠ·Π±Π΅Π³Π°Ρ‚ΡŒ Π²Ρ‹Π±ΠΎΡ€Π° этого Ρ‚ΠΈΠΏΠ° Π²Π΅Π±-ΠΌΠ°ΠΊΠ΅Ρ‚Π°, Ссли Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ тСкстовой ΠΈΠ»ΠΈ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ Π² Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… Ρ€Π°Π·Π΄Π΅Π»Π°Ρ….
  • РассмотритС Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ добавлСния UX-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ . Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ Π΄ΠΈΠ½Π°ΠΌΠΈΡ‡Π½Ρ‹ΠΉ ΠΎΠΏΡ‹Ρ‚, Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ Π΄Π΅Ρ‚Π°Π»ΠΈ.

3. АсиммСтричная ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ°

АсиммСтрия — нСдостаток равСнства ΠΌΠ΅ΠΆΠ΄Ρƒ двумя сторонами ΠΌΠ°ΠΊΠ΅Ρ‚Π°. АсиммСтрия — Π΄Π°Π²Π½ΠΈΠΉ Ρ„Π°Π²ΠΎΡ€ΠΈΡ‚ Ρ‚Π΅Ρ…Π½ΠΈΠΊΠ° Π² ΠΌΠΈΡ€Π΅ искусства ΠΈ Π² послСднСС врСмя стала популярной срСди Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ², ΠΊΠΎΠ³Π΄Π° созданиС ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² сайтов.

МногиС ΠΏΡƒΡ‚Π°ΡŽΡ‚ асиммСтрия с дисбалансом, Π½ΠΎ Π½Π° самом Π΄Π΅Π»Π΅ Ρ†Π΅Π»ΡŒ асиммСтрии — ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π±Π°Π»Π°Π½ΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΠΊΠΎΠ³Π΄Π° Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ»ΠΈ Π½Π΅ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΉ вСс для Π΄Π²Π° Ρ€Π°Π·Π΄Π΅Π»Π°.ИспользованиС асиммСтрии позволяСт ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ напряТСниС ΠΈ Π΄ΠΈΠ½Π°ΠΌΠΈΠ·ΠΌ, Π° асиммСтрия способствуСт Π»ΡƒΡ‡ΡˆΠ΅ΠΌΡƒ ΡΠΊΠ°Π½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ, фокусируя Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΊ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°ΠΌ (фокусам).

ИзмСняя ΡˆΠΈΡ€ΠΈΠ½Ρƒ, ΠΌΠ°ΡΡˆΡ‚Π°Π± ΠΈ Ρ†Π²Π΅Ρ‚ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ асиммСтричного Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ Π½Π°ΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅Ρ‚ ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡΡ‚Π°Π²Π°Ρ‚ΡŒΡΡ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ Π²ΠΎΠ²Π»Π΅Ρ‡Π΅Π½Π½Ρ‹ΠΌ.

Когда ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ

Π­Ρ‚ΠΎΡ‚ Ρ‚ΠΈΠΏ Π²Π΅Π±-ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, ΠΊΠΎΠ³Π΄Π° Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ хотят ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ интСрСсныС ΠΈ Π½Π΅ΠΎΠΆΠΈΠ΄Π°Π½Π½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹, Π² Ρ‚ΠΎ ΠΆΠ΅ врСмя обСспСчивая Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹ΠΉ Π°ΠΊΡ†Π΅Π½Ρ‚.ΠŸΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ нанСсСнная, асиммСтрия ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅ пространство, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ направляСт взгляд ΠΎΡ‚ ΠΎΠ΄Π½ΠΎΠ³ΠΎ элСмСнта ΠΊ Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ, Π΄Π°ΠΆΠ΅ Ρ‡Π΅Ρ€Π΅Π· пустоту. ΠŸΠΎΠ΄ΡƒΠΌΠ°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Dropbox Ρ‡Π΅Ρ‚ΠΊΠΎ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Ρ‚ΠΎΡ‡ΠΊΠΈ фокусировки Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π½ΠΈΠΆΠ΅.

АсиммСтрия Π΄Π΅Π»Π°Π΅Ρ‚ страницу Dropbox Π΄ΠΈΠ½Π°ΠΌΠΈΡ‡Π½ΠΎΠΉ.

Π­Ρ‚ΠΎΡ‚ Ρ‚ΠΈΠΏ Π²Π΅Π±-сайтов ΠΌΠ°ΠΊΠ΅Ρ‚ Π»ΡƒΡ‡ΡˆΠ΅ всСго ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Ρ†Π΅Π»Π΅Π²Ρ‹Ρ… страниц, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ Π·Π°ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ с ΠΌΠΎΠΌΠ΅Π½Ρ‚Π° ΠΎΠ½ΠΈ ΡΡ‚Π°Π»ΠΊΠΈΠ²Π°ΡŽΡ‚ΡΡ с вашСй Π²Π΅Π±-страницСй. Он Ρ‚Π°ΠΊΠΆΠ΅ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с Π²Π΅Π±-сайтами, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΌΠ΅Π½Π΅Π΅ 25 страниц.

Π‘ΠΎΠ²Π΅Ρ‚Ρ‹ ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ
  • Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ ваш ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ прСдставлСн Π² асиммСтричном ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ .АсиммСтричный ΠΌΠ°ΠΊΠ΅Ρ‚ Π½Π΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ сайта. ВСроятно, ΠΎΠ½ Π»ΡƒΡ‡ΡˆΠ΅ всСго ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для минималистичных ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ².
  • Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ фокус с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ†Π²Π΅Ρ‚Π° . АсиммСтрия основана Π½Π° ΠΈΠ΄Π΅Π΅, Ρ‡Ρ‚ΠΎ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ с большим Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΌ вСсом Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡Π΅Ρ‚ ΠΊ Π½Π΅ΠΌΡƒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ элСмСнты с высоким Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹ΠΌ контрастом, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ вСса ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ частям Π΄ΠΈΠ·Π°ΠΉΠ½Π°.
Π¦Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ контраст добавляСт Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ вСса. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ прСдоставлСно ΠΊΡƒΠ»ΡŒΡ‚ΡƒΡ€ΠΎΠΉ PL.

4. ΠšΠ°Ρ€Ρ‚ΠΎΡ‡Π½Π°Ρ сСтка

ΠšΠ°Ρ€Ρ‚Ρ‹ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ для ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ — ΠΎΠ½ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΡΠΆΠ΅Π»ΡƒΡŽ Π΄ΠΎΠ·Π° ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ Π² Π»Π΅Π³ΠΊΠΎ усваиваСмой Ρ„ΠΎΡ€ΠΌΠ΅.ΠŸΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ просмотр нСбольшого Ρ€Π°Π·ΠΌΠ΅Ρ€Π° (ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΠΊΡ€Π°Ρ‚ΠΊΠΎΠ΅ описаниС) ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ посСтитСлям Π½Π°ΠΉΡ‚ΠΈ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΈΠΌ нравится, ΠΈ ΠΏΠΎΠ³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ΡΡŒ Π² подробности, Ρ‰Π΅Π»ΠΊΠ½ΡƒΠ² ΠΈΠ»ΠΈ ΠΊΠΎΡΠ½ΡƒΠ²ΡˆΠΈΡΡŒ ΠΊΠ°Ρ€Ρ‚Ρ‹.

Π‘Π°ΠΌΠΎΠ΅ Π³Π»Π°Π²Π½ΠΎΠ΅ Π² ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π½ΠΎΠΉ сСткС ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡ‡Ρ‚ΠΈ бСсконСчно ΠΌΠ°Π½ΠΈΠΏΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π‘Π΅Ρ‚ΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Ρ€Π°Π·Π»ΠΈΡ‡Π°Ρ‚ΡŒΡΡ ΠΏΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ, ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Ρƒ ΠΈ количСству столбцов, Π° ΡΡ‚ΠΈΠ»ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°Ρ€ΡŒΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² зависимости ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° экрана (ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ соотвСтствовали Π»ΡŽΠ±ΠΎΠΌΡƒ экрану). Π’ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ Ρ‚Π°ΠΊ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π² Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ сСткС.

Когда ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ

Π‘Π΅Ρ‚ΠΊΠ° ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для сайтов с большим объСмом ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… отобраТаСтся ΠΌΠ½ΠΎΠ³ΠΎ элСмСнтов с ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌ иСрархия.

Π‘Π΅Ρ‚ΠΊΠ° ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ YouTube Π‘Π΅Ρ‚ΠΊΠ° ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ Pinterest
Π‘ΠΎΠ²Π΅Ρ‚Ρ‹ ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ
  • Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ кликабСльной ΠΏΠΎ всСй ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ΅, Π° Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠšΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Π΅ части . ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ взаимодСйствиС с ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΡƒΠ΄ΠΎΠ±Π½Π΅Π΅, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π½Π°ΠΆΠΈΠΌΠ°Ρ‚ΡŒ ΠΈΠΌΠ΅Π½Π½ΠΎ Π½Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ доступ ΠΊ дСталям содСрТания.
  • Если ваша ΠΊΠ°Ρ€Ρ‚Π° содСрТит ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΠ΄ΡƒΠΌΠ°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ ΠΎΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π½Π° мСньшСм экранС . Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠ»ΠΎΡ…ΠΎ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅Ρ‚ΡΡ ΠΈ становится Π½Π΅Ρ€Π°Π·Π±ΠΎΡ€Ρ‡ΠΈΠ²Ρ‹ΠΌ Π½Π° ΠΌΠ°Π»Ρ‹Ρ… экраны ΡΠΎΠ·Π΄Π°ΡŽΡ‚ ΠΏΠ»ΠΎΡ…ΠΎΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΎΠΏΡ‹Ρ‚.
  • ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΠΏΡ€ΠΎΠ±Π΅Π»Ρ‹ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ влияСт Π½Π° Ρ‚ΠΎ, ΠΊΠ°ΠΊ посСтитСли ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°ΡŽΡ‚ . Π‘ΠΎΠ»ΡŒΡˆΠ΅Π΅ пространство ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ замСдляСт просмотр, Π½ΠΎ посСтитСли Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠ»Π°Ρ‚ΠΈΡ‚ΡŒ большС внимания ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚Π΅. МинимальноС пространство позволяСт быстро ΡΠΊΠ°Π½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, Π½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ риск Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ посСтитСли ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚.
  • МоТно Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ ΠΎΠ±Ρ€Π°Ρ‚Π½ΡƒΡŽ связь . ΠšΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ° Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ ΠΊΠ°ΠΊ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ элСмСнт.
Smashing Magazine — Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ ΠΎΡ‚Π·Ρ‹Π²Ρ‹ ΠΎ своих ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ°Ρ….

5. Π–ΡƒΡ€Π½Π°Π»

Π­Ρ‚ΠΎ, ΠΏΠΎΠΆΠ°Π»ΡƒΠΉ, самый слоТный ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта, упомянутый Π² этом постС. Как слСдуСт ΠΈΠ· названия, это ΡΡ‚ΠΈΠ»ΡŒ Π²Π΅Π±-вСрстки ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ популяризировался Π³Π°Π·Π΅Ρ‚Π°ΠΌΠΈ ΠΈ ΠΆΡƒΡ€Π½Π°Π»Π°ΠΌΠΈ, Ρƒ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π±Ρ‹Π»Π° ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° с прСдставлСниСм ΠΎΠ³Ρ€ΠΎΠΌΠ½ΠΎΠ³ΠΎ количСства ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΡŽ Π² простой способ. Π‘ этой Ρ†Π΅Π»ΡŒΡŽ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΠΏΠΎΠ»ΠΈΠ³Ρ€Π°Ρ„ΠΈΠΈ использовали сСтку. ΠœΠ°ΠΊΠ΅Ρ‚ построСн с использованиСм ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠΉ сСтки, которая обСспСчиваСт Π³ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ — ΠΌΠ°ΠΊΠ΅Ρ‚ с нСсколькими столбцами ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΉ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ вСс для опрСдСлСния ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚Π° ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ.

ΠœΠ°ΠΊΠ΅Ρ‚Ρ‹ Π² стилС ΠΆΡƒΡ€Π½Π°Π»Π° ΠΏΠΎΠΎΡ‰Ρ€ΡΡŽΡ‚ сканированиС.

Подобно Π±ΡƒΠΌΠ°Π³Π΅ ΠΆΡƒΡ€Π½Π°Π»Ρ‹, Ρ†ΠΈΡ„Ρ€ΠΎΠ²Ρ‹Π΅ ΠΆΡƒΡ€Π½Π°Π»Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ΠΌΠ½ΠΎΠ³ΠΎΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΡƒΡŽ сСтку, которая позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ слоТная иСрархия ΠΈ интСграция тСкста ΠΈ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΉ. Основная Ρ†Π΅Π»ΡŒ — это Ρ‚ΠΎ ΠΆΠ΅ самоС — посСтитСли Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ быстро ΡΠΊΠ°Π½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒ ΠΈ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ страницу. Π”ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ стрСмятся ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€ΠΈΡ‚ΠΌ для этого стиля вСрстки Π²Π΅Π±-сайтов. Они ΠΏΡ‹Ρ‚Π°ΡŽΡ‚ΡΡ ΠΎΠ±Π»Π΅Π³Ρ‡ΠΈΡ‚ΡŒ Π³Π»Π°Π·Ρƒ сканированиС Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ² Π½Π° страницС ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ΡŒ Π³Π»Π°Π·Ρƒ СстСствСнным ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΊ Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ.Π’ Ρ‚ΠΎ ΠΆΠ΅ врСмя, Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ пытаСтся ΠΏΠΎΠΌΠ΅ΡˆΠ°Ρ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌ Π±Π»ΠΎΠΊΠ°ΠΌ ΠΊΠΎΠ½ΠΊΡƒΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π·Π° Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅.

Когда Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ

ΠœΠ°ΠΊΠ΅Ρ‚ ΠΆΡƒΡ€Π½Π°Π»Π° — Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ Π²Ρ‹Π±ΠΎΡ€ для ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠΉ со слоТной ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΠ΅ΠΉ с большим объСмом ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π½Π° страницС. Π‘Π΅Π· эффСктивного использования ΠΌΠ°ΠΊΠ΅Ρ‚Π° сСтки вСсь ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ страницС, вСроятно, Π±ΡƒΠ΄Π΅Ρ‚ ΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ Π±ΠΎΠ»Π΅Π΅ Π·Π°Π³Ρ€ΠΎΠΌΠΎΠΆΠ΄Π΅Π½Π½Ρ‹ΠΌ ΠΈ ΠΌΠ΅Π½Π΅Π΅ ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ. ΠœΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΆΡƒΡ€Π½Π°Π»Π°

Ρ…ΠΎΡ€ΠΎΡˆΠΎ подходят для новостных сайтов.
Π‘ΠΎΠ²Π΅Ρ‚Ρ‹ ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ
  • Π’ этом Π²Π΅Π±-ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°ΡŽΡ‚ΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΠΈ изобраТСния.Π Π°Π·ΠΌΠ΅Ρ€ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° / изобраТСния Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ связан с Ρ‚Π΅ΠΌ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ΠΌ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΎΠ½ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Π΅Ρ‚. Π‘ΠΎΠ»Π΅Π΅ Π·Π°ΠΌΠ΅Ρ‚Π½Ρ‹Π΅ элСмСнты ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°ΡŽΡ‚ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ быстрСС, Ρ‡Π΅ΠΌ ΠΌΠ΅Π½Π΅Π΅ Π·Π°ΠΌΠ΅Ρ‚Π½Ρ‹Π΅. Π’ΠΎΠ·ΡŒΠΌΠ΅ΠΌ, ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, New York Times — самый Π²Π°ΠΆΠ½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π½Π° страницС ΠΈΠΌΠ΅Π΅Ρ‚ большиС эскизы, большиС Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹ΠΉ тСкст.

The New York Times ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π΄Ρ€ΡƒΠ³ΠΎΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ тСкста, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΎΡ‰ΡƒΡ‰Π΅Π½ΠΈΠ΅ ваТности — Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ тСкста Π²Π°Ρ€ΡŒΠΈΡ€ΡƒΡŽΡ‚ΡΡ Π² зависимости ΠΎΡ‚ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΡŽ.

  • ΠŸΠ»Π°Π½ΠΈΡ€ΠΎΠ²ΠΊΠ° сСтка Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ внимания ΠΊΠ°ΠΊ ΠΊ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΌΡƒ, Ρ‚Π°ΠΊ ΠΈ ΠΊ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΌΡƒ Ρ€ΠΈΡ‚ΠΌΡƒ, ΠΈ ΠΎΠ½ΠΈ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ Π²Π°ΠΆΠ½Ρ‹, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚.Рассмотрим Ρ€Π°Π·Π½ΠΈΡ†Π° ΠΌΠ΅ΠΆΠ΄Ρƒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ. Π’ ΠΏΠ΅Ρ€Π²ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ сСтка соотвСтствуСт ΡˆΠΈΡ€ΠΈΠ½Π΅ столбца ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Ρƒ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, Π½ΠΎ Π²Π°Ρ€ΡŒΠΈΡ€ΡƒΠ΅Ρ‚ΡΡ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» создаСт Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΡˆΡƒΠΌ. Π’ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΌ случаС расстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ столбцами ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΈ расстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ элСмСнтами ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ ΠΎΠ±Ρ‰ΠΈΠΉ структура Π²Π΅Π±-ΠΌΠ°ΠΊΠ΅Ρ‚Π° каТСтся Π±ΠΎΠ»Π΅Π΅ чистой ΠΈ ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΉ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΊΡ‚ΠΎ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ потрСбляСт ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚.

6. Π―Ρ‰ΠΈΠΊΠΈ

Π”Π°Π½Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΈΠΌΠ΅Π΅Ρ‚ большой ΠΏΠΎΠ»Π΅ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΈ нСсколько ΠΌΠ΅Π½ΡŒΡˆΠΈΡ… ΠΏΠΎΠ»Π΅ΠΉ, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ Ρ‡Π°ΡΡ‚ΡŒ ΠΏΠ»ΠΎΡ‰Π°Π΄ΡŒ экрана большСй ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ.ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ ΠΊΠΎΡ€ΠΎΠ±ΠΎΠΊ помСньшС ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚ Π΄Π²ΡƒΡ…. Π΄ΠΎ пяти. КаТдоС ΠΏΠΎΠ»Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ссылкой, Π²Π΅Π΄ΡƒΡ‰Π΅ΠΉ ΠΊ Π±ΠΎΠ»Π΅Π΅ ΠΊΡ€ΡƒΠΏΠ½ΠΎΠΌΡƒ ΠΈ слоТному страница.

Когда ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ

Π­Ρ‚ΠΎ довольно ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ для ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… сайтов-ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ, Ρ‚Π°ΠΊ ΠΈ для для ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… сайтов ΠΈ сайтов элСктронной ΠΊΠΎΠΌΠΌΠ΅Ρ€Ρ†ΠΈΠΈ.

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ прСдоставлСно mrporter
Π‘ΠΎΠ²Π΅Ρ‚Ρ‹ ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ

Π‘ΠΎΠ΅Π΄ΠΈΠ½ΠΈΡ‚Π΅ ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°ΡΡΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΈΡΡ‚ΠΎΡ€ΠΈΡŽ . Π‘ΠΎΠ»ΡŒΡˆΠ°Ρ ΠΊΠΎΡ€ΠΎΠ±ΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для дСмонстрации ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ², Π° мСньшиС ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π΅.

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡ‚ Microsoft Surface

7. Ѐиксированная боковая панСль

Навигация — это ваТная Ρ‡Π°ΡΡ‚ΡŒ любого Π²Π΅Π±-сайта — Π³Π»Π°Π²Π½ΠΎΠ΅ мСню — это ΠΏΠ΅Ρ€Π²ΠΎΠ΅, Π½Π° Ρ‡Ρ‚ΠΎ смотрит Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ хотят ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ. Наряду с Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠ΅ΠΉ свСрху, это ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню Π² ΠΏΠΎΠ»Π΅ зрСния, помСстив Π΅Π³ΠΎ Π½Π° Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ Π±ΠΎΠΊΠΎΠ²ΡƒΡŽ панСль. Π’ Боковая панСль — это Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ столбСц Π² Π»Π΅Π²ΠΎΠΉ ΠΈΠ»ΠΈ ΠΏΡ€Π°Π²ΠΎΠΉ части страницы. Для этого Π²Π΅Π±-ΠΌΠ°ΠΊΠ΅Ρ‚, боковая панСль остаСтся Π½Π΅ΠΏΠΎΠ΄Π²ΠΈΠΆΠ½ΠΎΠΉ ΠΈ всСгда остаСтся Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ, ΠΏΠΎΠΊΠ° ΠΎΡΡ‚Π°Π»ΡŒΠ½Π°Ρ Ρ‡Π°ΡΡ‚ΡŒ страницы измСняСтся, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°ΡŽΡ‚ страницу Π²Π½ΠΈΠ·.Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, навигация остаСтся доступный.

Когда ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ

Π­Ρ‚ΠΎΡ‚ ΠΌΠ°ΠΊΠ΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ…ΠΎΡ€ΠΎΡˆΠΎ для Π²Π΅Π±-сайтов с ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΌ количСством возмоТностСй Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. Π•Π³ΠΎ ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ всС ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Π±Ρ‹Π»ΠΈ Π²ΠΈΠ΄Π½Ρ‹ ΠΏΡ€ΠΈ Π²Ρ…ΠΎΠ΄Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π½Π° страницу.

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅: Measponte
Π‘ΠΎΠ²Π΅Ρ‚Ρ‹ ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ
  • Π‘ΠΎΠΊΠΎΠ²Ρ‹Π΅ ΠΏΠ°Π½Π΅Π»ΠΈ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ ΠΎΡ‚ мСню ΠΈΠ»ΠΈ Π² Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ Π½Π΅ΠΌΡƒ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ ссылки Π½Π° срСдства массовой ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΈΠ»ΠΈ Ρ‡Ρ‚ΠΎ-Π»ΠΈΠ±ΠΎ Π΅Ρ‰Π΅, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ посСтитСли нашли с Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒΡŽ.
Trefecta прСдоставляСт ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ настройки ΠΈ совмСстного использования Π½Π° Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ.

8. Π›ΡƒΡ‡ΡˆΠ΅Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅

ΠœΠ°ΠΊΠ΅Ρ‚ сайта основанный Π½Π° ΠΈΠ΄Π΅Π΅, Ρ‡Ρ‚ΠΎ использованиС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ — самый быстрый способ ΠΏΡ€ΠΎΠ΄Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚. Π˜Π·Π±Ρ€Π°Π½Π½Ρ‹Π΅ изобраТСния ΡΠΎΠ·Π΄Π°ΡŽΡ‚ ΡΠΌΠΎΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΡƒΡŽ связь с посСтитСлями — большоС, Тирная фотография ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° Π΄Π΅Π»Π°Π΅Ρ‚ сильноС заявлСниС ΠΈ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ ΠΎΡˆΠ΅Π»ΠΎΠΌΠ»ΡΡŽΡ‰Π΅Π΅ ΠΏΠ΅Ρ€Π²ΠΎΠ΅ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅.

Когда ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ

Π­Ρ‚ΠΎΡ‚ Π²Π΅Π±-ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ, ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ / услугу ΠΈ ΡΠΎΡΡ€Π΅Π΄ΠΎΡ‚ΠΎΡ‡ΠΈΡ‚ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° всС Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Π½Π΅ΠΌ.

ΠžΡ‚ΡΡƒΡ‚ΡΡ‚Π²ΠΈΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов Π² этом ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Π΅Ρ‚ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ этот Ρ‚ΠΈΠΏ ΠΌΠ°ΠΊΠ΅Ρ‚Π°, ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΠΎ-настоящСму Π·Π°Ρ…Π²Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ, ΡΠΌΠΎΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΎΠΏΡ‹Ρ‚. ΠžΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ являСтся Β«Π’ΠΈΠ΄ Π² кусочках», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π±ΠΎΠ³Π°Ρ‚Ρ‹ΠΉ ΠΎΠΏΡ‹Ρ‚ ΠΈ ΠΏΠΎΠ²Ρ‹ΡˆΠ°Π΅Ρ‚ ΠΎΡΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½Π½ΠΎΡΡ‚ΡŒ ΠΎΠ± ΠΈΡΡ‡Π΅Π·Π°ΡŽΡ‰ΠΈΡ… Π²ΠΈΠ΄Π°Ρ….

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Π²ΠΈΠ΄Π°ΠΌ Π² кусках
Π‘ΠΎΠ²Π΅Ρ‚Ρ‹ ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ
  • Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ ваша Π³Ρ€Π°Ρ„ΠΈΠΊΠ° достаточно Ρ…ΠΎΡ€ΠΎΡˆΠ°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΅Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ . Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, фотография ΠΈΠ»ΠΈ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΡ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ ΠΊ ΡΠΎΠΎΠ±Ρ‰Π΅Π½ΠΈΡŽ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ, ΠΈ Π±Ρ‹Ρ‚ΡŒ высококачСствСнными.
  • Рассмотрим Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΡƒ . Π’ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠ° сопровоТдаСт ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Π Π°Π·ΠΌΠ΅Ρ€, Π½Π°ΡΡ‹Ρ‰Π΅Π½Π½ΠΎΡΡ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΈ Ρ†Π²Π΅Ρ‚ — всС это свойства ΡˆΡ€ΠΈΡ„Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для усилСния Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

9. ΠœΠ°ΠΊΠ΅Ρ‚ F-Ρ„ΠΎΡ€ΠΌΡ‹

Π­Ρ‚ΠΎΡ‚ Ρ‚ΠΈΠΏ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта Π±Ρ‹Π» создан Π½Π° основС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Ρ‡ΠΈΡ‚Π°ΡŽΡ‚ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅. F-ΠΎΠ±Ρ€Π°Π·Π½Ρ‹ΠΉ шаблон сканирования, ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ NNGroup, гласит, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΡΠΊΠ°Π½ΠΈΡ€ΡƒΡŽΡ‚ тяТСлыС Π±Π»ΠΎΠΊΠΈ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΏΠΎ ΡˆΠ°Π±Π»ΠΎΠ½Ρƒ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ выглядит ΠΊΠ°ΠΊ Π±ΡƒΠΊΠ²Π° F ΠΈΠ»ΠΈ E.Наш взгляд начинаСтся с ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ ΡƒΠ³Π»Π° страницы, просматриваСтся ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, Π·Π°Ρ‚Π΅ΠΌ опускаСтся ΠΊ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ строкС ΠΈ повторяСт Ρ‚ΠΎ ΠΆΠ΅ самоС снова ΠΈ снова, ΠΏΠΎΠΊΠ° ΠΌΡ‹ Π½Π΅ Π½Π°ΠΉΠ΄Π΅ΠΌ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Π΅Ρ‚ нашС Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ (интСрСсный ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚). Π­Ρ‚ΠΎΡ‚ шаблон сканирования Π°ΠΊΡ‚ΡƒΠ°Π»Π΅Π½ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ΠΎΠ², Π½ΠΎ ΠΈ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств.

Когда ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ

Π’Π°ΠΊΠΎΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для страницы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ мноТСство Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΎΠΏΡ†ΠΈΠΉ ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΡΠΊΠ°Π½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… быстро. ΠŸΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΠΈ Π»ΡƒΡ‡ΡˆΠ΅ ΠΎΡ‚Ρ€Π΅Π°Π³ΠΈΡ€ΡƒΡŽΡ‚ Π½Π° ΠΌΠ°ΠΊΠ΅Ρ‚ F-ΠΎΠ±Ρ€Π°Π·Π½ΠΎΠ³ΠΎ ΡƒΠ·ΠΎΡ€Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΠΌΠΈΡ‚ΠΈΡ€ΡƒΠ΅Ρ‚ СстСствСнный рисунок сканирования.Π­Ρ‚ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ для домашнСй страницы ΠΈΠ»ΠΈ страницы новостного сайта. содСрТащий Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ поиска.

Π”ΠΎΠΌΠ°ΡˆΠ½ΡΡ страница ТитСля Нью-Π™ΠΎΡ€ΠΊΠ° ΠΈΠΌΠ΅Π΅Ρ‚ F-ΠΎΠ±Ρ€Π°Π·Π½ΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒ.
Π‘ΠΎΠ²Π΅Ρ‚Ρ‹ ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ
  • НастройтС содСрТимоС Π² соотвСтствии с Ρ€Π΅ΠΆΠΈΠΌΠΎΠΌ сканирования . НаиболСС Π²Π°ΠΆΠ½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ стоит Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π² Π»Π΅Π²ΠΎΠΉ ΠΈ ΠΏΡ€Π°Π²ΠΎΠΉ частях страницы, Π³Π΄Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚ ΠΈ Π·Π°ΠΊΠ°Π½Ρ‡ΠΈΠ²Π°Π΅Ρ‚ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ сканированиС. Когда посСтитСли доходят Π΄ΠΎ ΠΊΠΎΠ½Ρ†Π° строки, ΠΎΠ½ΠΈ Π΄Π΅Π»Π°ΡŽΡ‚ ΠΏΠ°ΡƒΠ·Ρƒ Π½Π° долю сСкунды ΠΏΠ΅Ρ€Π΅Π΄ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠΌ ΠΊ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ строкС, ΠΈ эта ΠΏΠ°ΡƒΠ·Π° Π΄Π°Π΅Ρ‚ Π²Π°ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚.
  • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Π΅ подсказки, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ посСтитСля . МоТно ΡΠΎΡΡ€Π΅Π΄ΠΎΡ‚ΠΎΡ‡ΠΈΡ‚ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π½Π° ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΌ элСмСнтС, ΠΏΡ€ΠΈΠ΄Π°Π² Π΅ΠΌΡƒ большС Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ вСса. НапримСр, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ слова Π² тСкстС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.

10. Z-ΠΎΠ±Ρ€Π°Π·Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚

Аналогичный По ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с F-ΠΎΠ±Ρ€Π°Π·Π½Ρ‹ΠΌ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠΌ, Z-ΠΎΠ±Ρ€Π°Π·Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠΌΠΈΡ‚ΠΈΡ€ΡƒΠ΅Ρ‚ СстСствСнныС ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡ΠΊΠΈ сканирования. ΠŸΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΠΈ сайта (ΠΈΠ· Π·Π°ΠΏΠ°Π΄Π½Ρ‹Ρ… ΠΊΡƒΠ»ΡŒΡ‚ΡƒΡ€) Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‚ Π² Π»Π΅Π²Ρ‹ΠΉ Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ ΡƒΠ³ΠΎΠ». Они ΡΠΊΠ°Π½ΠΈΡ€ΡƒΡŽΡ‚ ΠΎΡ‚ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΡƒΠ³Π»Π° ΠΊ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌΡƒ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ, образуя Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Π°Ρ линия.Однако ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ шаг Π±ΡƒΠ΄Π΅Ρ‚ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΠΌ — вмСсто прямо Π²Π½ΠΈΠ·, ΠΊΠ°ΠΊ Π² F-ΠΎΠ±Ρ€Π°Π·Π½ΠΎΠΌ ΡƒΠ·ΠΎΡ€Π΅, ΠΈΡ… Π³Π»Π°Π·Π° Π±Π»ΡƒΠΆΠ΄Π°ΡŽΡ‚ Π²Π½ΠΈΠ· ΠΈ Π² Π»Π΅Π²ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ страницы, образуя Π΄ΠΈΠ°Π³ΠΎΠ½Π°Π»ΡŒΠ½ΡƒΡŽ линию. НаконСц, взгляд Π½Π°Π·Π°Π΄ снова Π²ΠΏΡ€Π°Π²ΠΎ, образуя Π²Ρ‚ΠΎΡ€ΡƒΡŽ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΡƒΡŽ линию.

Когда ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ

Пока F-ΠΎΠ±Ρ€Π°Π·Π½Ρ‹ΠΉ Π»ΡƒΡ‡ΡˆΠ΅ для сканирования большого количСства ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, Z-шаблон Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для сайтов с СдинствСнной Ρ†Π΅Π»ΡŒΡŽ ΠΈ мСньшим содСрТаниСм. Π­Ρ‚ΠΎΡ‚ ΡƒΠ·ΠΎΡ€ эффСктивСн ΠΏΡ€ΠΈ постановкС Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΊ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΌ ΠΌΠΎΠΌΠ΅Π½Ρ‚Π°ΠΌ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½Π½Ρ‹Ρ… Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… элСмСнтов, тСкста ΠΈ ΠΏΡ€ΠΈΠ·Ρ‹Π²ΠΎΠ² ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ.

Z-шаблон Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, ΠΊΠΎΠ³Π΄Π° Π½Π° сайтС Π΅ΡΡ‚ΡŒ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠ·Ρ‹Π² ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ.
Π‘ΠΎΠ²Π΅Ρ‚Ρ‹ ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ
  • Π—Π°Π΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΡŽΠ·Π΅Ρ€Ρ‹ Π·ΠΈΠ³Π·Π°Π³ΠΎΠΌ (ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Z-ΡƒΠ·ΠΎΡ€Π°). МоТно Π²ΠΎΠ²Π»Π΅Ρ‡ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π² сканированиС ΠΏΡƒΡ‚Π΅ΠΌ чСрСдования тСкста ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ нСсколько Ρ€Π°Π· для создания Π·ΠΈΠ³Π·Π°Π³Π°.
Π—ΠΈΠ³Π·Π°Π³ΠΈ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ Ρ€ΠΈΡ‚ΠΌ Π½Π° Π²Π΅Π±-страницС Evernote.

11. ΠšΡƒΡ€ΠΈΡ€ΡƒΠ΅ΠΌΡ‹Π΅ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Π΅ эффСкты

Π­Ρ‚ΠΎΡ‚ ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌ, ΠΊΠΎΠ³Π΄Π° сотрудники вашСй ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ ΠΏΡ‹Ρ‚Π°ΡŽΡ‚ΡΡ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠ°ΠΊΠΈΠ΅ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Π΅ эффСкты ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°ΠΌ.ΠžΡ‚ΠΎΠ±Ρ€Π°Π½Π½Ρ‹Π΅ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Π΅ эффСкты ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π°ΡƒΡ‚Π΅Π½Ρ‚ΠΈΡ‡Π½Ρ‹ΠΌΠΈ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΡΠΌΠΈ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ для вашСй ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΉ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π»Π΅Π³ΠΊΠΎ ΡΠ²ΡΠ·Π°Ρ‚ΡŒΡΡ с вашСй Π°ΡƒΠ΄ΠΈΡ‚ΠΎΡ€ΠΈΠ΅ΠΉ.

ΠšΡƒΡ€Π°Ρ‚ΠΎΡ€ΡΠΊΠ°Ρ ΠΏΠΎΠΌΠΎΡ‰ΡŒ ΠΏΠΎ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΌ элСмСнтам ΠΏΡ€ΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ сообщСниС ΠΈΠ»ΠΈ ΡΠΌΠΎΡ†ΠΈΡŽ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ваша компания Ρ…ΠΎΡ‡Π΅Ρ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠ»ΠΈΠ΅Π½Ρ‚ почувствовал, ΠΊΠΎΠ³Π΄Π° Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΡƒΡŽΡ‚ со своими ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°ΠΌΠΈ ΠΈΠ»ΠΈ услугами.

Когда ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ

Π’Π΅Π±-ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для ΡƒΠΊΡ€Π°ΡˆΠ΅Π½ΠΈΡ ΠΈ ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ Π²Π΅Π±-страницы вашСй ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ этого ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠ»ΡƒΠΆΠΈΡ‚ΡŒ использованиС Avocode ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΉ Π½Π° Π²Π΅Π±-сайтС своСй ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ.

Π‘ΠΎΠ²Π΅Ρ‚Ρ‹ ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ
  • Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ΅ Π½Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΈΠ½ΠΊΠ»ΡŽΠ·ΠΈΠ²Π½Ρ‹ΠΌ. Π­Ρ‚ΠΎΡ‚ ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»Π΅Π·Π΅Π½ ΠΏΡ€ΠΈ ΠΎΠ±Ρ€Π°Ρ‰Π΅Π½ΠΈΠΈ ΠΊ массам. ИспользованиС ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΉ для Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… эффСктов вашСй ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ позволяСт ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΠΎΠ²Ρ‹Π΅ ΠΈ расовыС ассоциации, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π±ΠΎΠ»Π΅Π΅ ΡˆΠΈΡ€ΠΎΠΊΠΈΠΉ ΠΊΡ€ΡƒΠ³ ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ².
  • ΠŸΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°ΠΉΡ‚Π΅ΡΡŒ своСго Π±Ρ€Π΅Π½Π΄Π°. Если Ρƒ вашСго Π±Ρ€Π΅Π½Π΄Π° Π΅ΡΡ‚ΡŒ опрСдСлСнная цвСтовая ΠΏΠ°Π»ΠΈΡ‚Ρ€Π°, ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π΅Π΅. Π­Ρ‚ΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ ΡƒΡΠΈΠ»ΠΈΡ‚ΡŒ мСссСдТинг, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ваш Π±Ρ€Π΅Π½Π΄ ΠΏΠ΅Ρ€Π΅Π΄Π°Π΅Ρ‚ Π² Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠΌ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠΈ, Π·Π° счСт соблюдСния основных аспСктов вашСй ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ.

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

ΠŸΡ€ΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ сайта, Π²Π°ΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ всСгда Π²Π°ΠΆΠ΅Π½.Основная Ρ†Π΅Π»ΡŒ Π²Π΅Π±-сайт остаСтся ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠ΅ΠΉ Π»Π΅Π³ΠΊΠΎ усваиваСмого ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. НСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΠΎΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта Π²Ρ‹ Π²Ρ‹Π±Π΅Ρ€Π΅Ρ‚Π΅, ΠΎΠ½ Π’Π°ΠΆΠ½ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ сдСлаСт ваш ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ярким.

30 Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайтов ΠΈ ΠΈΠ΄Π΅ΠΉ для Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°

ΠŸΠ΅Ρ€Π²ΠΎΠ΅ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅ Π½Π° счСту. Как сказал Π£ΠΈΠ»Π» РодТСрс: Β«Π£ вас Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ шанса произвСсти ΠΏΠ΅Ρ€Π²ΠΎΠ΅ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅Β». ИсслСдования Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π»ΠΈ, Ρ‡Ρ‚ΠΎ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΡƒ трСбуСтся всСго ΠΎΡ‚ сСми сСкунд Π΄ΠΎ Π΄Π²ΡƒΡ… ΠΌΠΈΠ½ΡƒΡ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π²ΠΎΠ΅ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅.Когда Π΄Π΅Π»ΠΎ Π΄ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Π΄ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π²Π΅Π±-сайтов, процСсс распознавания Π΅Ρ‰Π΅ ΠΊΠΎΡ€ΠΎΡ‡Π΅. Π˜Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ посСтитСлСй с ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ взгляда? Π§Ρ‚ΠΎ ΠΆ, Π²Ρ‹ всСгда ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ вашСго сайта. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ Π² этом ΠΈ Π΄Π°Ρ‚ΡŒ Π²Π°ΠΌ Π½ΠΎΠ²ΠΎΠ΅ Π²Π΄ΠΎΡ…Π½ΠΎΠ²Π΅Π½ΠΈΠ΅, я пСрСчислил 30 Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π²Π΅Π±-сайтов ΠΈ популярных дизайнСрских ΠΈΠ΄Π΅ΠΉ. Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΠΌ ΠΈΡ…!

1. Ginventory

ИдСя ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта: Ρ‡Π΅Ρ‚ΠΊΠΈΠΉ фокус

Ginventory — это самый Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅ΠΌΡ‹ΠΉ справочник ΠΏΠΎ Π΄ΠΆΠΈΠ½Ρƒ ΠΈ Ρ‚ΠΎΠ½ΠΈΠΊΡƒ Π² ΠΌΠΈΡ€Π΅.Когда Π½Π° вашСм сайтС Π΅ΡΡ‚ΡŒ чСткая фокусная Ρ‚ΠΎΡ‡ΠΊΠ°, это Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ посСтитСлСй Π½Π° Π½Π΅Π΅. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π²Π°ΠΆΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Π² эти области, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΈΡ…. Π”ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Ρ‡Π΅Ρ‚ΠΊΠΎ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°Ρ‚ΡŒ фокус. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ изобраТСния, Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΡƒ, яркиС Ρ†Π²Π΅Ρ‚Π° ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π²Π΅Ρ‰ΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ фокус. Однако ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ слоТно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ фокусныС Ρ‚ΠΎΡ‡ΠΊΠΈ, ΠΊΠΎΠ³Π΄Π° Π²Π΅Π±-сайты ΠΏΠ΅Ρ€Π΅Π³Ρ€ΡƒΠΆΠ΅Π½Ρ‹ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ услугу ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚, всСгда ΠΏΠΎΠ»Π΅Π·Π½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΡ… Ρ†Π΅Π½Ρ‚Ρ€ΠΎΠΌ внимания.

ИдСя ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта : Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ для дСмонстрации Ρ„ΠΈΡ€ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ стиля

Diker — это Π³Ρ€ΡƒΠΏΠΏΠ° ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΉ ΠΏΠΎ ΡΡ‚Ρ€ΠΎΠΈΡ‚Π΅Π»ΡŒΡΡ‚Π²Ρƒ, Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π΅ ΠΈ ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ, Π±Π°Π·ΠΈΡ€ΡƒΡŽΡ‰Π°ΡΡΡ Π² Π‘Π΅Ρ€Π»ΠΈΠ½Π΅, ГСрмания. Π”ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡ΠΈΠ» основныС характСристики ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ Ρ„ΠΈΡ€ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ стиля. Они Π±Ρ‹Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½Ρ‹ Π² качСствС основы для ΠΎΠ±Ρ‰Π΅ΠΉ структуры ΠΈ Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Ρ‹ Π²Π΅Π±-сайта. Для обСспСчСния удобства использования Π²Π΅Π±-сайта использовались соврСмСнныС ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ кодирования ΠΈ тСстирования.

Π’ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π½Π΅Ρ‚ Π»ΠΈΡˆΠ½ΠΈΡ… элСмСнтов, поэтому Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΎ Π½Π° ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚.

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ Π΄Π°ΡŽΡ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΡΠΌΠΎΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΡƒΡŽ связь с посСтитСлями — большая, яркая фотография ΠΈΠ»ΠΈ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΡ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° Π΄Π΅Π»Π°Π΅Ρ‚ сильноС заявлСниС ΠΈ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ ΠΎΡˆΠ΅Π»ΠΎΠΌΠ»ΡΡŽΡ‰Π΅Π΅ ΠΏΠ΅Ρ€Π²ΠΎΠ΅ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅. Π­Ρ‚ΠΎΡ‚ ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚, ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ / услугу ΠΈ ΡΠΎΡΡ€Π΅Π΄ΠΎΡ‚ΠΎΡ‡ΠΈΡ‚ΡŒ Π½Π° Π½Π΅ΠΌ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ сайт, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ быстро ΠΏΡ€ΠΎΠ΄Π°Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ этот Ρ‚ΠΈΠΏ ΠΌΠ°ΠΊΠ΅Ρ‚Π°.

3. Wooden Dot

ИдСя ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта: элСмСнты Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ Π±Ρ€Π΅Π½Π΄Ρƒ ΠΈ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°ΠΌ

Wooden Dot — это дизайнСрская ΠΈ производствСнная Ρ„ΠΈΡ€ΠΌΠ°, Π³Π΄Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΉΡ‚ΠΈ Π΄Π΅Ρ€Π΅Π²ΡΠ½Π½ΡƒΡŽ мСбСль ΠΈ ΠΎΡΠ²Π΅Ρ‚ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΡ€ΠΈΠ±ΠΎΡ€Ρ‹.Когда Π²Ρ‹ ΠΎΡ‚ΠΊΡ€ΠΎΠ΅Ρ‚Π΅ эту Π²Π΅Π±-страницу, экран измСнится с Ρ‚Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π½Π° яркий. Π­Ρ‚Π° дизайнСрская идСя пСрСкликаСтся с Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊΠΎΠΉ свСтотСхничСской ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ†ΠΈΠΈ. ИспользованиС качСствСнных ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² ΠΏΠΎΠ»Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Ρ‚Π°ΠΊΠΆΠ΅ способствуСт ΠΏΡ€ΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΡŽ ΠΈΡ… дСрСвянной ΠΌΠ΅Π±Π΅Π»ΠΈ. На этом сайтС Π½Π΅ Ρ‚Π°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ слов. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ просто Π½Π°ΠΉΡ‚ΠΈ нСсколько слоганов Π½Π° изобраТСниях. ВСрстка Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΎΡ‚ качСства Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ. ВмСстС с ΡƒΠΌΠ΅Π»Ρ‹ΠΌ эхом этот сайт создаСт свСТий ΠΈ элСгантный Π²ΠΈΠ΄.

4. Π§Π΅Ρ…ΠΎΠ²

ИдСя ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта: Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ экран

Π§Π΅Ρ…ΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΌΠ°ΠΊΠ΅Ρ‚ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ экрана, ΠΏΡ€ΠΈΠ΄Π°ΡŽΡ‰ΠΈΠΉ Π΄Π²ΡƒΠΌ Ρ€Π°Π²Π½Ρ‹ΠΌ частям ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡƒΡŽ Π²Π°ΠΆΠ½ΠΎΡΡ‚ΡŒ.ΠŸΠΎΠΌΠ΅Ρ‰Π°Ρ Π΄Π²Π° ΠΏΡ€Π΅Π΄ΠΌΠ΅Ρ‚Π° рядом, Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ создаСт контраст, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Π΅Ρ‚ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅. Π‘ΠΎΡ‡Π΅Ρ‚Π°Π½ΠΈΠ΅ ярких Ρ†Π²Π΅Ρ‚ΠΎΠ² ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ создаСт ΠΈ прСдоставляСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π±ΠΎΠ³Π°Ρ‚Ρ‹ΠΉ ΠΈ Π΄ΠΈΠ½Π°ΠΌΠΈΡ‡Π½Ρ‹ΠΉ ΠΎΠΏΡ‹Ρ‚. Если ваш сайт Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Ρ‚ΡŒ Π΄Π²Π° ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Ρ€Π°Π·Π½Ρ‹Ρ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° ΠΏΡƒΡ‚ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ с Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ экраном. Но ΠΈΠ·Π±Π΅Π³Π°ΠΉΡ‚Π΅ использования слишком большого количСства ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π² Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… Ρ€Π°Π·Π΄Π΅Π»Π°Ρ…. Π”ΠΈΠ·Π°ΠΉΠ½ с Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ экраном Π½Π΅ Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅Ρ‚ΡΡ Ρ‚Π°ΠΊ ΠΆΠ΅ Ρ…ΠΎΡ€ΠΎΡˆΠΎ, ΠΊΠ°ΠΊ ΠΈ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Π»ΡƒΡ‡ΡˆΠ΅ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ этот Ρ‚ΠΈΠΏ ΠΌΠ°ΠΊΠ΅Ρ‚Π°, Ссли Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ тСкстовой ΠΈΠ»ΠΈ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ Π² Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… Ρ€Π°Π·Π΄Π΅Π»Π°Ρ….

5. НСвозмоТноС Π±ΡŽΡ€ΠΎ

ИдСя ΠΌΠ°ΠΊΠ΅Ρ‚Π° сайта: тСкстовый Π΄ΠΈΠ·Π°ΠΉΠ½

НСвозмоТноС Π±ΡŽΡ€ΠΎ создано ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ разносторонних ΠΈ Π»ΡŽΠ±ΠΎΠ·Π½Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ†ΠΈΡ„Ρ€ΠΎΠ²Ρ‹Ρ… спСциалистов. НСкоторыС Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ склонны ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ тСкстовыС Π΄ΠΈΠ·Π°ΠΉΠ½Ρ‹, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ этот ΠΌΠ΅Ρ‚ΠΎΠ΄ сдСлаСт ΠΌΠ°ΠΊΠ΅Ρ‚ чистым ΠΈ простым. Π’Π°ΠΊΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с ΠΎΠ΄Π½ΠΎΡ‚ΠΎΠ½Π½Ρ‹ΠΌ Ρ„ΠΎΠ½ΠΎΠΌ. Π­Ρ‚ΠΎΡ‚ Ρ‚ΠΈΠΏ ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΎΡ‰ΡƒΡ‰Π΅Π½ΠΈΠ΅ чистоты ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΠ·ΠΌΠ°. ΠœΠ°ΠΊΠ΅Ρ‚ этого Π²Π΅Π±-сайта прСдставляСт собой ΠΊΡ€ΡƒΠΏΠ½Ρ‹ΠΉ тСкст Π½Π° Ρ‡Π΅Ρ€Π½ΠΎΠΌ Ρ„ΠΎΠ½Π΅.Когда Π²Ρ‹ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚Π΅ курсор Π½Π° любой столбСц, ΠΎΠ½ загораСтся ΠΈ мСняСт Ρ†Π²Π΅Ρ‚ Π½Π° яркий Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Ρ‚ΡŒ Π²Π²Π΅Ρ€Ρ… ΠΈ Π²Π½ΠΈΠ·, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΎΠΊΠ½ΠΎ.

6. 1917

ИдСя ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта: элСмСнты Π΄ΠΈΠ·Π°ΠΉΠ½Π° с высокой ΡΡ‚Π΅ΠΏΠ΅Π½ΡŒΡŽ иммСрсивности

1917 — это ΠΎΡ‚ΠΌΠ΅Ρ‡Π΅Π½Π½Ρ‹ΠΉ Π½Π°Π³Ρ€Π°Π΄Π°ΠΌΠΈ Π²Π΅Π±-сайт, созданный для продвиТСния Ρ„ΠΈΠ»ΡŒΠΌΠ° 1917 Π³ΠΎΠ΄Π°. ΠœΠ°ΠΊΠ΅Ρ‚ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΠ΅Ρ€Π΅Π²Π΅Ρ€Π½ΡƒΠ» Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½Ρ‹Π΅ дизайнСрскиС ΠΈΠ΄Π΅ΠΈ, Π΄Π°Π² посСтитСлям ΠΎΡ‰ΡƒΡ‰Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ погруТСния. Π’Ρ‹ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠ³ΡƒΠ»ΡΡ‚ΡŒΡΡ ΠΏΠΎ ΠΎΠΊΠΎΠΏΠ°ΠΌ ΠΈ ΠΏΠΎΠΏΡ‹Ρ‚Π°Ρ‚ΡŒΡΡ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Ρ‚Ρƒ ΠΆΠ΅ миссию, Ρ‡Ρ‚ΠΎ ΠΈ Π³Π΅Ρ€ΠΎΠΈ Π² Ρ„ΠΈΠ»ΡŒΠΌΠ΅.Π˜Π½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ элСмСнты Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π²Π°ΠΌ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡΡ‚ΡŒ ΠΈΡ… ΠΊΠ°Ρ€Ρ‚Ρ‹ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ инструмСнты. Π­Ρ‚ΠΎ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡ‡Π΅Ρ€ΠΏΠ½ΡƒΡ‚ΡŒ Π½ΠΎΠ²Ρ‹Π΅ ΠΈΠ΄Π΅ΠΈ для своСго ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΡ€ΠΈΠ½ΡΡ‚ΡŒ Π²ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΎΠ΄Π½Ρƒ Π²Π΅Ρ‰ΡŒ. Π’Π°ΠΊΠΎΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Π² сСбя тяТСлыС элСмСнты Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΏΠ°Π»ΠΊΠΎΠΉ ΠΎ Π΄Π²ΡƒΡ… ΠΊΠΎΠ½Ρ†Π°Ρ….

ИдСя ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта : Π­Ρ„Ρ„Π΅ΠΊΡ‚ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Parallax

Time thee Roussilhe — это Π²Π΅Π±-сайт Ρ€Π΅Π·ΡŽΠΌΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π° Π’ΠΈΠΌΠΎΡ‚ΠΈ Π ΡƒΡΡΠΈΠ»ΡŒ.Π­Ρ‚ΠΎ просто, Π½ΠΎ творчСски. Он добавляСт эффСкт параллакса, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΡΡŽΡ‰ΠΈΡ… Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠΉ. По ΠΌΠ΅Ρ€Π΅ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅Ρ‚Π΅ Π²Π½ΠΈΠ·, ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΈ Π²Ρ‹Π»Π΅Ρ‚Π°ΡŽΡ‚ ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ. Π§Ρ‚ΠΎ ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ, Ρ‚Π°ΠΊ это Ρ‚ΠΎ, ΠΊΠ°ΠΊ всС Π±Π»ΠΎΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ эффСкт параллакса; Π²Π°ΠΌ каТСтся, Ρ‡Ρ‚ΠΎ Π²Ρ‹ смотритС Ρ„ΠΈΠ»ΡŒΠΌ Π²ΠΎ врСмя просмотра сайта.

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²Π΅Π±-сайт с ΠΊΡ€ΡƒΡ‚Ρ‹ΠΌΠΈ Ρ„Π°ΠΊΡ‚ΠΎΡ€Π°ΠΌΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ эффСкт параллакса. Но ΠΏΠΎΠΌΠ½ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ простым ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‡ΠΈΡΡ‚ΡƒΡŽ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΡƒΡŽ схСму, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ бСспорядочного Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

ИдСя ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта : Ѐиксированная навигация ΠΏΠΎ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ

Happiness Abscissa ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ ΠΏΠΎ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ для отобраТСния всСго ΠΌΠ°ΠΊΠ΅Ρ‚Π°.Π“Π»Π°Π²Π½ΠΎΠ΅ мСню — Π²Π°ΠΆΠ½Ρ‹ΠΉ элСмСнт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. Он сообщаСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ, Π³Π΄Π΅ ΠΎΠ½ находится ΠΈ ΠΊΡƒΠ΄Π° Ρ…ΠΎΡ‡Π΅Ρ‚ ΠΏΠΎΠΉΡ‚ΠΈ.

ΠžΠ±Ρ‹Ρ‡Π½ΠΎ ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΡƒΡŽ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ свСрху, Π½ΠΎ здСсь ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ столбСц Π² Π»Π΅Π²ΠΎΠΉ части Π² качСствС Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ. Π“Π»Π°Π²Π½ΠΎΠ΅ — Ρ‡Ρ‚ΠΎΠ±Ρ‹ панСль ΠΎΡΡ‚Π°Π²Π°Π»Π°ΡΡŒ Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ ΠΈ доступной, Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ ΠΎΡΡ‚Π°Π»ΡŒΠ½Π°Ρ Ρ‡Π°ΡΡ‚ΡŒ страницы измСняСтся ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π²Π²Π΅Ρ€Ρ… ΠΈ Π²Π½ΠΈΠ·.

На этом сайтС Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ эффСкт параллакса. По ΠΌΠ΅Ρ€Π΅ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π²Π½ΠΈΠ· ΠΌΠ°ΠΊΠ΅Ρ‚ измСняСтся ΠΈ отобраТаСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ тСкст, сопровоТдаСмый ΠΎΠ΄Π½ΠΈΠΌ ΡƒΠΊΡ€Π°ΡˆΠ΅Π½ΠΈΠ΅ΠΌ.

Если Π²Ρ‹ создаСтС Π²Π΅Π±-сайт, содСрТащий Ρ‚ΠΎΠ»ΡŒΠΊΠΎ нСсколько Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ этот ΠΌΠ°ΠΊΠ΅Ρ‚. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ всС ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Π±ΡƒΠ΄ΡƒΡ‚ Π²ΠΈΠ΄Π½Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΠΏΡ€ΠΈ просмотрС вашСй страницы. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ссылки Π½Π° ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ сСти, ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅ ΠΈΠ»ΠΈ Π»ΡŽΠ±ΡƒΡŽ Π΄Ρ€ΡƒΠ³ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ посСтитСли Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π»Π΅Π³ΠΊΠΎ Π½Π°ΠΉΡ‚ΠΈ Π½Π° Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ.

9. Parcours Canada

ИдСя ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта: Π΄Π²Π΅ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ

Parcours Canada — это спСциализированный Π²Π΅Π±-сайт для частных Π»ΠΈΡ† ΠΈ сСмСй, ΠΆΠ΅Π»Π°ΡŽΡ‰ΠΈΡ… Π·Π°Π±Ρ€ΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ΅Π·Π΄ΠΊΠΈ.Π’Π΅Π±-сайт ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‚ΠΈΠΏΠΈΡ‡Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ с Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Π΅Ρ‚ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π² Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ. Π­Ρ‚ΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π±ΠΎΠ»Π΅Π΅ Π³ΠΈΠ±ΠΊΠΎ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡΡ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΊΠ°ΠΊ Π² Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΌ, Ρ‚Π°ΠΊ ΠΈ Π² Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΌ направлСниях. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° туристичСский ΠΏΠ°ΠΊΠ΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ измСнится ΠΈ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡΡ Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠ΅. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ сразу ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ ΠΌΠ°Ρ€ΡˆΡ€ΡƒΡ‚Ρ‹ ΠΏΡ€ΠΎΠ΅Π·Π΄Π° Π½Π° ΠΊΠ°Ρ€Ρ‚Π΅.

10. Grammarly

ИдСя ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта: сбалансированный ΠΌΠ°ΠΊΠ΅Ρ‚ с ΠΎΡΠ²Π΅ΠΆΠ°ΡŽΡ‰ΠΈΠΌΠΈ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°ΠΌΠΈ

Grammarly — ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΏΠΎΠΌΠΎΡ‰Π½ΠΈΠΊ ΠΏΠΎ Ρ†ΠΈΡ„Ρ€ΠΎΠ²ΠΎΠΌΡƒ ΠΏΠΈΡΡŒΠΌΡƒ.На сайтС всС ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ. Π’ ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²ΠΊΠ΅ чувствуСтся минималистичная ΠΈ симмСтричная красота. По ΠΌΠ΅Ρ€Π΅ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ посСтитСли ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°ΡŽΡ‚ домашнюю страницу Π²Π½ΠΈΠ·, ΠΎΠ½ΠΈ ΡƒΠ·Π½Π°ΡŽΡ‚, ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ этот инструмСнт, ΠΈ ΠΏΠΎΡ‡Π΅ΠΌΡƒ ΠΎΠ½ΠΈ Π½ΡƒΠΆΠ΄Π°ΡŽΡ‚ΡΡ Π² этой услугС. ИспользованиС Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠ² ΠΏΡ€ΠΈΠ΄Π°Π΅Ρ‚ ΠΌΠ°ΠΊΠ΅Ρ‚Ρƒ довольно Ρ€Π°ΡΡΠ»Π°Π±Π»ΡΡŽΡ‰ΠΈΠΉ Π²ΠΈΠ΄. Π“Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ соотвСтствуСт Ρ†Π²Π΅Ρ‚Ρƒ ΠΈΡ… Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ°. Π₯отя ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ прост, чистый ΠΈ минималистичный ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ дСмонстрируСт Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ ΠΌΠΎΡ‰Π½ΠΎΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ.

11. Π₯ΠΎΡ€ΠΎΡˆΠΈΠ΅ муТскиС Ρ‚ΠΎΠ²Π°Ρ€Ρ‹

ИдСя вСрстки сайта: ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ

Π₯ΠΎΡ€ΠΎΡˆΠΈΠ΅ муТскиС Ρ‚ΠΎΠ²Π°Ρ€Ρ‹ ΠΎΡ‚ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π° Great Simple.Π’ конструкции использовано прСимущСство ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ. Π­Ρ‚ΠΎΡ‚ ΠΌΠ°ΠΊΠ΅Ρ‚ Ρ‚Π°ΠΊΠΆΠ΅ соотвСтствуСт ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ°ΠΌ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Google. ΠœΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹, Ρ‚Π°ΠΊΠΆΠ΅ извСстныС ΠΊΠ°ΠΊ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΊΠ°Ρ€Ρ‚ ΠΈΠ»ΠΈ Π±Π»ΠΎΠΊΠΎΠ², становятся всС Π±ΠΎΠ»Π΅Π΅ популярными. Π’ΠΈΠΏ ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ отличаСтся ΠΎΡ‚ Ρ‚ΠΈΠΏΠΈΡ‡Π½ΠΎΠΉ сСтки, Π³Π΄Π΅ каТдая ΠΎΠ±Π»Π°ΡΡ‚ΡŒ сайта ΠΏΠΎΠΌΠ΅Ρ‰Π΅Π½Π° Π² ΠΌΠΎΠ΄ΡƒΠ»ΡŒ ΠΈΠ»ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€. По ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Π°ΠΌΠΈ, этот ΠΌΠ΅Ρ‚ΠΎΠ΄ создаст ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π΅ΠΌΡ‹ΠΉ Π²ΠΈΠ΄, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ для соотвСтствия Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌ ΠΌΠ΅Ρ‚ΠΎΠ΄Π°ΠΌ отобраТСния.

12. Nomadic Tribe

ИдСя ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта: ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰Π΅Π΅ Π²ΠΈΠ΄Π΅ΠΎ ΠΈ красочныС элСмСнты

Nomadic Tribe — ΠΎΠ΄ΠΈΠ½ ΠΈΠ· самых ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π²Π΅Π±-сайтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ я ΠΊΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ Π²ΠΈΠ΄Π΅Π».Попадая Π½Π° эту страницу, Π²Ρ‹ ΠΎΡ‚ΠΏΡ€Π°Π²Π»ΡΠ΅Ρ‚Π΅ΡΡŒ Π² ΡƒΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΡƒΡ‚Π΅ΡˆΠ΅ΡΡ‚Π²ΠΈΠ΅ с ΠΏΠ»Π΅ΠΌΠ΅Π½Π°ΠΌΠΈ, ΠΊΠΎΡ€Π΅Π½Π½Ρ‹ΠΌΠΈ Π½Π°Ρ€ΠΎΠ΄Π°ΠΌΠΈ ΠΈ Π΅Π΄ΠΈΠ½ΠΎΠΌΡ‹ΡˆΠ»Π΅Π½Π½ΠΈΠΊΠ°ΠΌΠΈ. Помимо ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰Π΅Π³ΠΎ Π²ΠΈΠ΄Π΅ΠΎ, ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ Π½Π° этом сайтС Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΈΠ½Π°ΠΌΠΈΡ‡Π½Ρ‹ ΠΈ ΠΈΠ³Ρ€ΠΈΠ²Ρ‹. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΎΠ³Ρ€ΠΎΠΌΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π»ΠΎ сочСтаниС Ρ€Π°Π·Π½Ρ‹Ρ… ΠΎΡ‚Ρ‚Π΅Π½ΠΊΠΎΠ² Ρ€ΠΎΠ·ΠΎΠ²ΠΎΠ³ΠΎ, ΠΎΡ€Π°Π½ΠΆΠ΅Π²ΠΎΠ³ΠΎ ΠΈ ΠΆΠ΅Π»Ρ‚ΠΎΠ³ΠΎ. ΠŸΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ Π²Π½ΠΈΠ· Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ нСсколько ΠΈΠ·Π±Ρ€Π°Π½Π½Ρ‹Ρ… историй. ΠœΠ°ΠΊΠ΅Ρ‚ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΌΠ°Π½, с Ρ‡Π΅Ρ‚ΠΊΠΎΠΉ Π»ΠΎΠ³ΠΈΠΊΠΎΠΉ ΠΈ качСствСнными изобраТСниями.

ИдСя ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта: Π‘Π΅Ρ‚ΠΊΠ° ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ

Assemble ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ с использованиСм ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ Π² сСткС.ΠšΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΏΠΎΠ΄Π°Π²Π°Ρ‚ΡŒ большоС количСство ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ Π² ΡƒΠ΄ΠΎΠ±ΠΎΠ²Π°Ρ€ΠΈΠΌΠΎΠΉ Ρ„ΠΎΡ€ΠΌΠ΅. Он ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ посСтитСлям Π½Π°ΠΉΡ‚ΠΈ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΈΠΌ нравится, ΠΈ Π΄Π°Π΅Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΠΎΠ³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒΡΡ Π² Π΄Π΅Ρ‚Π°Π»ΠΈ, просто Ρ‰Π΅Π»ΠΊΠ½ΡƒΠ² ΠΈΠ»ΠΈ ΠΊΠΎΡΠ½ΡƒΠ²ΡˆΠΈΡΡŒ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ.

Π­Ρ‚ΠΎΡ‚ ΠΌΠ°ΠΊΠ΅Ρ‚ Ρ‚Π°ΠΊΠΆΠ΅ популярСн Π² Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ². Π‘Π΅Ρ‚ΠΊΠΈ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ с Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ элСмСнтами, Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ Ρ€Π°Π·ΠΌΠ΅Ρ€, ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π», количСство столбцов ΠΈ экранов — с Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ мноТСство элСмСнтов с ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΠ΅ΠΉ. Π˜Ρ‚Π°ΠΊ, Ссли Ρƒ вас сайт с большим количСством ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, сСтка ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ — ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ Π²Ρ‹Π±ΠΎΡ€.

14. Apple

ИдСя ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта: изобраТСния с Ρ‚ΠΎΡ‡Π½ΠΎΡΡ‚ΡŒΡŽ Π΄ΠΎ пиксСля ΠΈ ΠΊΡ€Π°Ρ‚ΠΊΠΎΠ΅ описаниС

Apple — ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π»ΡƒΡ‡ΡˆΠΈΡ… Π²Π΅Π±-сайтов с ΠΏΠ΅Ρ€Π΅Π΄ΠΎΠ²Ρ‹ΠΌΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Π°ΠΌΠΈ. Π‘ΠΎΡ‡Π΅Ρ‚Π°Π½ΠΈΠ΅ Π±Π΅Π·ΡƒΠΏΡ€Π΅Ρ‡Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ ΠΊΡ€Π°Ρ‚ΠΊΠΈΡ… описаний позволяСт Π²Ρ‹ΡΠ²ΠΈΡ‚ΡŒ Π»ΡƒΡ‡ΡˆΠ΅Π΅ Π΄Ρ€ΡƒΠ³ Π² Π΄Ρ€ΡƒΠ³Π΅. Когда посСтитСли пСрСходят Π½Π° домашнюю страницу Apple, ΠΈΡ… соблазняСт ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ подстраницы. Π’Π²Π΅Ρ€Ρ…Ρƒ домашнСй страницы Π΅ΡΡ‚ΡŒ фиксированная панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. Π­Ρ‚ΠΎ статичСскоС мСню позволяСт посСтитСлям Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΠ³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒΡΡ Π²ΠΎ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΡŽΡŽ Ρ‡Π°ΡΡ‚ΡŒ Π²Π΅Π±-сайта Π±Π΅Π· Ρ‡Ρ€Π΅Π·ΠΌΠ΅Ρ€Π½ΠΎΠ³ΠΎ количСства Ρ‰Π΅Π»Ρ‡ΠΊΠΎΠ² ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ.

15. Mailchimp

ИдСя ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта: простыС ссылки ΠΈ Ρ‡Π΅Ρ‚ΠΊΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ

Mailchimp — ΠΎΠ΄ΠΈΠ½ ΠΈΠ· самых извСстных сСрвисов элСктронного ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΈΠ½Π³Π°. ΠœΠ°ΠΊΠ΅Ρ‚ сочСтаСт Π² сСбС простыС ссылки с Ρ‡Π΅Ρ‚ΠΊΠΎ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π΅Π½Π½Ρ‹ΠΌΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ посСтитСли ΠΌΠΎΠ³Π»ΠΈ Π»Π΅Π³ΠΊΠΎ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС. Π¦Π²Π΅Ρ‚Π° приятны для Π³Π»Π°Π·. Π‘Π΅Π»ΠΎΠ΅ пространство ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΌ элСмСнтом Ρ‚Π°ΠΊΠΆΠ΅ достаточно ΡˆΠΈΡ€ΠΎΠΊΠΎΠ΅. ΠžΠ±Ρ‰ΠΈΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ прост Π² Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΈΡ‚ΡŒ Π²Π½ΠΈΠ·, Ρ‡Ρ‚ΠΎΠ±Ρ‹ бСспрСпятствСнно Π½Π°ΠΉΡ‚ΠΈ Π½ΡƒΠΆΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ этот сайт, ΠΏΠΎΠ΄ΠΎΠ±Ρ€Π°Π½Ρ‹ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ.Π₯отя ссылок ΠΌΠ½ΠΎΠ³ΠΎ, всС ΠΎΠ½ΠΈ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ располоТСны Π² Ρ€Π°Π·Π½Ρ‹Ρ… Ρ€Π°Π·Π΄Π΅Π»Π°Ρ… страницы.

16. HubSpot

ИдСя ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта: симмСтричный ΠΌΠ°ΠΊΠ΅Ρ‚

HubSpot — это ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ° для ΠΏΡ€ΠΎΠ΄Π°ΠΆ, ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΈΠ½Π³Π°, обслуТивания ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ² ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ³ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ. ОсобоС Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° сайтС удСляСтся симмСтричному ΠΌΠ°ΠΊΠ΅Ρ‚Ρƒ. Когда Π²Ρ‹ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅Ρ‚Π΅ страницу Π²Π½ΠΈΠ·, изящный ΠΈ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ заставит вас Π·Π°Π΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒΡΡ ΠΈ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ большС. ИспользованиС Ρ†Π²Π΅Ρ‚Π° Ρ„ΠΎΠ½Π° ΠΏΠΎΠ»Π΅Π·Π½ΠΎ для Π²Π°ΡˆΠΈΡ… Π³Π»Π°Π· ΠΈ выглядит Ρ€Π°ΡΡΠ»Π°Π±Π»ΡΡŽΡ‰Π΅.ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, сСтка Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ Π²Π½Π΅ΡˆΠ½ΠΈΡ… Π»ΠΈΠ½ΠΈΠΉ, Ρ‡Ρ‚ΠΎ создаСт ΠΎΡ‰ΡƒΡ‰Π΅Π½ΠΈΠ΅ простора. Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΎΠ½ΠΈ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚, Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½Π°. НСт кусков слов ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. ΠŸΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΠ΅Ρ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ самая ваТная информация, которая Π²Π°ΠΌ Π½ΡƒΠΆΠ½Π°.

ИдСя ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта : ΠΌΠ°ΠΊΠ΅Ρ‚ с нСсколькими столбцами

Π‘Ρ€Π΅Π΄Π½ΠΈΠΉ — популярный Π²Π΅Π±-сайт для вСдСния Π±Π»ΠΎΠ³ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ прСдоставляСт Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΡŽ ΠΎΠ³Ρ€ΠΎΠΌΠ½ΠΎΠ΅ количСство ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ Π² ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΉ для понимания Ρ„ΠΎΡ€ΠΌΠ΅. Он ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ сСтку ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… столбцов для создания слоТной ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΠΈ ΠΈ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΠ΅Ρ‚ тСкст ΠΈ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ, облСгчая посСтитСлям быстроС сканированиС, Ρ‡Ρ‚Π΅Π½ΠΈΠ΅ ΠΈ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ страницы.БущСствуСт Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€ΠΈΡ‚ΠΌ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΉ Π³Π»Π°Π·Ρƒ СстСствСнно ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΊ Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ.

Π­Ρ‚ΠΎΡ‚ ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΏΠΎΡ…ΠΎΠΆ Π½Π° ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΆΡƒΡ€Π½Π°Π»Π°, Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ Π²Ρ‹Π±ΠΎΡ€ для ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠΉ со слоТной ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΠ΅ΠΉ с большим количСством ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π½Π° страницС.

Π•ΡΡ‚ΡŒ ΠΎΠ΄Π½Π° Π²Π΅Ρ‰ΡŒ, которая выдСляСт Π΄ΠΈΠ·Π°ΠΉΠ½: ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ ΠΏΠΎΠ³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ΡΡŒ Π² Π±ΠΎΠ»Π΅Π΅ Π³Π»ΡƒΠ±ΠΎΠΊΡƒΡŽ страницу, Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ страница ΡΡ‚Π°Ρ‚ΡŒΠΈ находится Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ с ΠΎΠ΄Π½ΠΈΠΌ столбцом. Π­Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ Ρ‡Ρ‚Π΅Π½ΠΈΠ΅ Π»Π΅Π³ΠΊΠΈΠΌ Π΄Π°ΠΆΠ΅ для Π΄Π»ΠΈΠ½Π½Ρ‹Ρ… статСй, Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‰ΠΈΡ… ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π²Π½ΠΈΠ·.

ИдСя ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта : Поля — большоС ΠΏΠΎΠ»Π΅ ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΈ нСсколько ΠΌΠ΅Π½ΡŒΡˆΠΈΡ… ΠΏΠΎΠ»Π΅ΠΉ

Напитки ΠΈΠΌΠ΅ΡŽΡ‚ ΠΌΠ°ΠΊΠ΅Ρ‚ с большим ΠΏΠΎΠ»Π΅ΠΌ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°; ΠΈ нСсколько ΠΌΠ΅Π½ΡŒΡˆΠΈΡ… Π±Π»ΠΎΠΊΠΎΠ², ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ Ρ‡Π°ΡΡ‚ΡŒ ΠΏΠ»ΠΎΡ‰Π°Π΄ΠΈ экрана большСго Π±Π»ΠΎΠΊΠ°. ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ ΠΊΠΎΡ€ΠΎΠ±ΠΎΠΊ мСньшСго Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°Ρ€ΡŒΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ Π΄Π²ΡƒΡ… Π΄ΠΎ пяти. КаТдоС ΠΏΠΎΠ»Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ссылкой, Π²Π΅Π΄ΡƒΡ‰Π΅ΠΉ Π½Π° Π±ΠΎΠ»Π΅Π΅ ΠΊΡ€ΡƒΠΏΠ½ΡƒΡŽ ΠΈ ΡΠ»ΠΎΠΆΠ½ΡƒΡŽ страницу.

Π­Ρ‚ΠΎ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ для ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… сайтов-ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ, Ρ‚Π°ΠΊ ΠΈ для ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… Π²Π΅Π±-сайтов / Π²Π΅Π±-сайтов элСктронной ΠΊΠΎΠΌΠΌΠ΅Ρ€Ρ†ΠΈΠΈ.Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°ΡΡΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΈΡΡ‚ΠΎΡ€ΠΈΡŽ. Π‘ΠΎΠ»ΡŒΡˆΠ°Ρ ΠΊΠΎΡ€ΠΎΠ±ΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для дСмонстрации ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ², Π° мСньшиС ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π΅.

19. Dropbox

ИдСя ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта: ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΈ асиммСтричныС элСмСнты

Dropbox — это облачная слуТба хранСния, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΈΠ½ΠΎΠ³Π΄Π° Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ ΠΎΠ½Π»Π°ΠΉΠ½-слуТбой Ρ€Π΅Π·Π΅Ρ€Π²Π½ΠΎΠ³ΠΎ копирования, которая часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΊΠ°ΠΊ слуТба ΠΎΠ±ΠΌΠ΅Π½Π° Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ. ΠœΠ°ΠΊΠ΅Ρ‚ Π΄ΠΈΠ½Π°ΠΌΠΈΡ‡Π½Ρ‹ΠΉ ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ. Когда посСтитСли заходят Π½Π° этот Π²Π΅Π±-сайт, ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС, Π·Π°Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΈΡ‚ΡŒ Π²Π½ΠΈΠ·.Π£Ρ€Π΅Π·Π°Π½Π½ΠΎΠ΅ мСню Π΄Π΅Π»Π°Π΅Ρ‚ поиск Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ, простым ΠΈ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятным. ИспользованиС ΠΏΠΎΠ»ΡƒΠΆΠΈΡ€Π½ΠΎΠ³ΠΎ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π΅Ρ‚ Π²Π°ΠΆΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ этот сайт Ρ…ΠΎΡ‡Π΅Ρ‚ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ. Π¦Π²Π΅Ρ‚Π° ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡŽΡ‚ ΠΈ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΡΠΎΡ‡Π΅Ρ‚Π°ΡŽΡ‚ΡΡ Π΄Ρ€ΡƒΠ³ с Π΄Ρ€ΡƒΠ³ΠΎΠΌ. Благодаря этому ΠΌΠ°ΠΊΠ΅Ρ‚ выглядит Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½Ρ‹ΠΌ, чистым ΠΈ ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ. Π˜Π½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ элСмСнты ΠΏΠΎΠ±ΡƒΠΆΠ΄Π°ΡŽΡ‚ посСтитСлСй ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ страницу, прокручивая Π΅Π΅ Π²Π²Π΅Ρ€Ρ… ΠΈ Π²Π½ΠΈΠ·.

20. StudioPress

ИдСя ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта: ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ плоского Π΄ΠΈΠ·Π°ΠΉΠ½Π°

StudioPress — это Ρ…ΠΎΡ€ΠΎΡˆΠΎ извСстный Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ Ρ‚Π΅ΠΌ для WordPress.ΠœΠ°ΠΊΠ΅Ρ‚ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΡ€ΠΈΠ³Π»ΡƒΡˆΠ΅Π½Π½Ρ‹Π΅ Ρ†Π²Π΅Ρ‚Π° ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹Π΅ элСмСнты. ВмСстС с плоскими ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΡΠΌΠΈ ΠΎΠ½ΠΈ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ Ρ‡ΠΈΡΡ‚ΡƒΡŽ, Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½ΡƒΡŽ ΠΈ ΠΏΠΎΠ½ΡΡ‚Π½ΡƒΡŽ домашнюю страницу. Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ достаточно ΠΊΡ€ΡƒΠΏΠ½Ρ‹Π΅ ΠΈ смСлыС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ с ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ взгляда Π΄Π°Ρ‚ΡŒ ΠΏΠΎΠ½ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ этот сайт ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ для вас. ΠŸΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Ρ страницу Π²Π½ΠΈΠ·, Π²Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅ ΠΎ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… функциях, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ½ΠΈ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‚. ВсС ΠΎΠ½ΠΈ Ρ…ΠΎΡ€ΠΎΡˆΠΎ скомпонованы ΠΈ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹.

21. Trefecta

ИдСя ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта: фиксированная боковая панСль

Trefecta — это Π²Π΅Π±-сайт ΠΏΠΎ ΠΏΡ€ΠΎΠ΄Π°ΠΆΠ΅ элСктронных вСлосипСдов с классичСской Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ панСлью.Полоска Π·Π°ΠΊΡ€Π΅ΠΏΠ»Π΅Π½Π° Π² Π»Π΅Π²ΠΎΠΉ части экрана с простым мСню ΠΈ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠΌ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ. ПанСли Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ ΠΈ ΡΡ‡ΠΈΡ‚Π°ΡŽΡ‚ΡΡ Π²Π°ΠΆΠ½Ρ‹ΠΌ инструмСнтом, ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‰ΠΈΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ части страницы. ΠŸΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΡΠΌ Π±ΡƒΠ΄Π΅Ρ‚ Π»Π΅Π³Ρ‡Π΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡΡ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ части страницы ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ страницы, Ссли панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π·Π°ΠΊΡ€Π΅ΠΏΠ»Π΅Π½Π° Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ области страницы.

ИдСя ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта : АсиммСтричный ΠΌΠ°ΠΊΠ΅Ρ‚

ΠžΡ‚Π΅Π»ΡŒ Casangelina , ΠΎΠ΄ΠΈΠ½ ΠΈΠ· дСсяти Π»ΡƒΡ‡ΡˆΠΈΡ… скалистых ΠΎΡ‚Π΅Π»Π΅ΠΉ ΠΌΠΈΡ€Π°, располоТСн Π½Π° скалах ΠΏΠΎΠ±Π΅Ρ€Π΅ΠΆΡŒΡ ΠΠΌΠ°Π»ΡŒΡ„ΠΈ.На этом Π²Π΅Π±-сайтС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ асиммСтричный ΠΌΠ°ΠΊΠ΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ отсутствиС равСнства ΠΌΠ΅ΠΆΠ΄Ρƒ двумя частями страницы. АсиммСтрия — Π΄Π°Π²Π½ΠΈΠΉ ΠΈΠ·Π»ΡŽΠ±Π»Π΅Π½Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠ΅ΠΌ Π² ΠΌΠΈΡ€Π΅ искусства; ΠΈ Π½Π΅Π΄Π°Π²Π½ΠΎ стал популярным срСди Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ².

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ асиммСтрия отличаСтся ΠΎΡ‚ дисбаланса. ЦСль асиммСтрии — ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ баланс, ΠΊΠΎΠ³Π΄Π° Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ»ΠΈ Π½Π΅ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΉ вСс для Π΄Π²ΡƒΡ… сСкций. ИспользованиС асиммСтрии позволяСт ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ напряТСниС ΠΈ Π΄ΠΈΠ½Π°ΠΌΠΈΠ·ΠΌ. АсиммСтрия способствуСт Π»ΡƒΡ‡ΡˆΠ΅ΠΌΡƒ ΡΠΊΠ°Π½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ, фокусируя Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π½Π° ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°Ρ… (Ρ‚ΠΎΡ‡ΠΊΠ°Ρ… фокусировки).ИзмСняя ΡˆΠΈΡ€ΠΈΠ½Ρƒ, ΠΌΠ°ΡΡˆΡ‚Π°Π± ΠΈ Ρ†Π²Π΅Ρ‚ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ асиммСтричного Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ поощряСт посСтитСля ΠΎΡΡ‚Π°Π²Π°Ρ‚ΡŒΡΡ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ Π²ΠΎΠ²Π»Π΅Ρ‡Π΅Π½Π½Ρ‹ΠΌ.

Π­Ρ‚ΠΎΡ‚ Ρ‚ΠΈΠΏ ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, ΠΊΠΎΠ³Π΄Π° Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ хотят ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ интСрСсныС ΠΈ Π½Π΅ΠΎΠΆΠΈΠ΄Π°Π½Π½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹, ΠΏΡ€ΠΈ этом обСспСчивая Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹ΠΉ Π°ΠΊΡ†Π΅Π½Ρ‚. ΠŸΡ€ΠΈ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΈ асиммСтрия ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅ пространство, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ направляСт взгляд ΠΎΡ‚ ΠΎΠ΄Π½ΠΎΠ³ΠΎ элСмСнта ΠΊ Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ, Π΄Π°ΠΆΠ΅ сквозь пустоту. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅, ΠΊΠ°ΠΊ Dropbox Ρ‡Π΅Ρ‚ΠΊΠΎ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Ρ‚ΠΎΡ‡ΠΊΠΈ фокуса Π² ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅.

Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ ваш ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ прСдставлСн Π² асиммСтричном ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ . АсиммСтричный ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ Π½Π΅ для всСх сайтов. Π›ΡƒΡ‡ΡˆΠ΅ всСго ΠΎΠ½ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для минималистичных ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ².

Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ Π°ΠΊΡ†Π΅Π½Ρ‚ Π½Π° Ρ†Π²Π΅Ρ‚Π΅. АсиммСтрия основана Π½Π° ΠΈΠ΄Π΅Π΅, Ρ‡Ρ‚ΠΎ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ с большим Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΌ вСсом Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Π΅Ρ‚ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ элСмСнты с высоким Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹ΠΌ контрастом, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ вСса ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ частям Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

23. Shopify

ИдСя ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта: Ρ‡Π΅Ρ‚ΠΊΠΈΠΉ CTA ΠΈ ΠΈΠ·Π±Ρ€Π°Π½Π½Ρ‹Π΅ истории

Shopify — это Π²Π΅Π±-сайт элСктронной ΠΊΠΎΠΌΠΌΠ΅Ρ€Ρ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт Π»ΡŽΠ±ΠΎΠΌΡƒ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½ ΠΈ ΠΏΡ€ΠΎΠ΄Π°Π²Π°Ρ‚ΡŒ свои ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Ρ‹.Π’ ΠΆΠΈΡ€Π½ΠΎΠΌ ΠΈ Ρ‡Π΅Ρ‚ΠΊΠΎΠΌ слоганС упоминаСтся, Ρ‡Ρ‚ΠΎ любой Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊ ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π°Ρ‡Π°Ρ‚ΡŒ свой бизнСс Π² любом мСстС. CTA Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΌΠ°Π½ ΠΈ скомпонован. ИспользованиС синСго Ρ„ΠΎΠ½Π° выдСляСт Π±Π΅Π»Ρ‹Π΅ Π±ΡƒΠΊΠ²Ρ‹. ΠŸΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ Π²Π½ΠΈΠ· Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΊΠ°ΠΊ симмСтричныС, Ρ‚Π°ΠΊ ΠΈ асиммСтричныС элСмСнты, прСдставлСнныС Π² ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Π½ΠΎΠΌ Π²ΠΈΠ΄Π΅. Π•ΡΡ‚ΡŒ Π²ΠΈΠ΄Π΅ΠΎ ΠΈ рассказы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ. ΠšΡΡ‚Π°Ρ‚ΠΈ, Π² ΠΊΠΎΠ½Ρ†Π΅ страницы Π΅ΡΡ‚ΡŒ глобус, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΊΡ€ΡƒΡ‚ΠΈΡ‚ΡŒ.

24. Undersight.co

ИдСя ΠΌΠ°ΠΊΠ΅Ρ‚Π° сайта: Π΄Π΅Π΄Π»Π°ΠΉΠ½ ΠΈ галСрСя ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

Undersight.co — это сайт-ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π° Π­Π΄ΡƒΠ°Ρ€Π΄ΠΎ НунСса. ΠœΠ°ΠΊΠ΅Ρ‚ прСдставляСт собой ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡƒΡŽ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΡŽ Π±Π°Π·ΠΎΠ²ΠΎΠΉ сСтки ΠΈ тСкстового Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π­Ρ‚Π° тСндСнция Π΄ΠΈΠ·Π°ΠΉΠ½Π° довольно популярна срСди Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ² ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ элСктронной ΠΊΠΎΠΌΠΌΠ΅Ρ€Ρ†ΠΈΠΈ. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ ΠΎΠ½ΠΈ содСрТат ΠΊΡ€ΡƒΠΏΠ½Ρ‹Π΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ Π²Π²Π΅Ρ€Ρ…Ρƒ ΠΈ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ коммСрчСскиС описания. Π’ основной части Π²Π΅Π±-страницы Π΅ΡΡ‚ΡŒ Π½Π°Π±ΠΎΡ€ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΉ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ². Undersight.co — Ρ‚ΠΈΠΏΠΈΡ‡Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€. Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π° состоит ΠΈΠ· Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ², Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… ΠΆΠΈΡ€Π½Ρ‹ΠΌ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ, ΠΈ Π±Π»ΠΎΠΊΠΎΠ² ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ для дСмонстрации ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ².

ИдСя ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта: Одна большая фотография с Ρ‡Π΅Ρ‚ΠΊΠΈΠΌ CTA

ΠžΡΠ½ΠΎΠ²Π½Ρ‹ΠΌ элСмСнтом этого ΠΌΠ°ΠΊΠ΅Ρ‚Π° являСтся ΠΎΠ΄Π½Π° большая фотография, которая ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² качСствС Ρ„ΠΎΠ½Π° для страницы. Он ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для ознакомлСния посСтитСлСй с содСрТаниСм сайта. Π­Ρ‚ΠΎΡ‚ ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΈΠΌΠ΅Π΅Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ произвСсти сильноС ΠΏΠ΅Ρ€Π²ΠΎΠ΅ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅ ΠΈ способствуСт Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ.

Π­Ρ‚ΠΎΡ‚ ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ мСньшС, Π° ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ большС. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΌΠ°ΠΊΠ΅Ρ‚ — ΠΈ сообщСниС — Π²Ρ€Π°Ρ‰Π°ΡŽΡ‚ΡΡ Π²ΠΎΠΊΡ€ΡƒΠ³ ΠΎΠ΄Π½ΠΎΠ³ΠΎ изобраТСния, ΠΎΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ использовали идСальноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.Π’Ρ‰Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π²Ρ‹Π±ΠΈΡ€Π°ΠΉΡ‚Π΅ своС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ΅ сообщСниС ΠΈΠ»ΠΈ ΡΠ±ΠΈΡ‚ΡŒ с Ρ‚ΠΎΠ»ΠΊΡƒ посСтитСлСй.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π²ΠΈΠ΄Π΅ΠΎ вмСсто ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ посСтитСлСй. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, стоит ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²ΠΈΠ΄Π΅ΠΎ вмСсто Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ, особСнно ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π² дСйствии.

26. Crazy Egg

ИдСя ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта: ΠΎΠ΄Π½Π° страница с ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌ описаниСм

Crazy Egg — это Π²Π΅Π±-сайт, Ρ†Π΅Π»ΡŒ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ — ΠΏΠΎΠΌΠΎΡ‡ΡŒ посСтитСлям ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ свои собствСнныС страницы. ΠœΠ°ΠΊΠ΅Ρ‚ ΠΏΡ€Π΅Π΄Π΅Π»ΡŒΠ½ΠΎ прост. Π•ΡΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ говорится, для Ρ‡Π΅Π³ΠΎ этот сайт.Π—Π°Ρ‚Π΅ΠΌ появляСтся ΠΎΠΊΠ½ΠΎ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ввСсти Π²Π΅Π±-ссылку, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ‚. Π’Π°ΠΊΠΎΠΉ Π²ΠΈΠ΄ одностраничного ΠΌΠ°ΠΊΠ΅Ρ‚Π° с ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌ описаниСм Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ эффСктивСн. Он ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ±ΡƒΠ΄ΠΈΡ‚ΡŒ посСтитСлСй Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ свой URL-адрСс для просмотра Ρ‚Π΅ΠΏΠ»ΠΎΠ²ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚Ρ‹. Π—Π°Ρ‚Π΅ΠΌ Π²Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ бСсплатная пробная вСрсия, ΠΈ ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ΡΡŒ.

27. Marc Jacobs

ИдСя ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта: качСствСнныС изобраТСния ΠΈ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ

ΠœΠ°Ρ€ΠΊ ДТСйкобс — амСриканский экспСрт ΠΌΠΎΠ΄Ρ‹, ΠΈ Π½Π° этом Π²Π΅Π±-сайтС ΠΏΡ€ΠΎΠ΄Π°ΡŽΡ‚ΡΡ Π΅Π³ΠΎ Ρ‚ΠΎΠ²Π°Ρ€Ρ‹.Π’ ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½Ρ‹ качСствСнныС изобраТСния ΠΈ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ. Π’Π΅Π±-сайт ΠΈΠΌΠ΅Π΅Ρ‚ минималистичный, Π½ΠΎ ΡƒΡ‚ΠΎΠ½Ρ‡Π΅Π½Π½Ρ‹ΠΉ Π²ΠΈΠ΄. Π‘ΠΎΠ»ΡŒΡˆΠ΅ всСго Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ посСтитСлСй ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Π΅Ρ‚ ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΊΠΎΠΏΠΈΡ€Π°ΠΉΡ‚ΠΈΠ½Π³. ДинамичСскиС изобраТСния врСмя ΠΎΡ‚ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ. Π’Ρ‹ смоТСтС ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΈΡ‚ΡŒ Π²Π½ΠΈΠ· ΠΈ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ для сСбя Π»ΡƒΡ‡ΡˆΠΈΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚. Π£ Π½Π΅Π³ΠΎ Π½Π΅ слишком ΠΌΠ½ΠΎΠ³ΠΎ описания. Вся информация прСдставлСна ​​с качСствСнными изобраТСниями ΠΈ наглядными ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΡΠΌΠΈ.

28. Slack

ИдСя ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта: ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ

Slack — это ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ° ΠΎΠ±ΠΌΠ΅Π½Π° сообщСниями Π½Π° основС ΠΊΠ°Π½Π°Π»ΠΎΠ², Π³Π΄Π΅ Ρ€Π°Π·Π½Ρ‹Π΅ люди ΠΌΠΎΠ³ΡƒΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ вмСстС.Π£ сайта мягкий свСтлый Ρ„ΠΎΠ½, приятный для Π³Π»Π°Π· ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с Π±Π΅Π»Ρ‹ΠΌ Ρ„ΠΎΠ½ΠΎΠΌ. Π­Ρ‚ΠΎ слСдуСт ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π²Π΅Π±-страниц. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π΅ΡΡ‚ΡŒ нСсколько ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ… ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΉ, Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‰ΠΈΡ… интСрфСйс ΠΈ использованиС ΠΈΡ… ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ². По ΠΌΠ΅Ρ€Π΅ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π²Π½ΠΈΠ· Π²Π²Π΅Ρ€Ρ…Ρƒ страницы появляСтся ΠΏΠ»Π°Π²Π°ΡŽΡ‰Π΅Π΅ мСню. Π­Ρ‚ΠΎ Π΄Π°Π΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π»Π΅Π³ΠΊΠΈΠΉ доступ ΠΊ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎΠ± этом Π²Π΅Π±-сайтС. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ бСсплатно, ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ с ΠΏΡ€ΠΎΠ΄Π°Π²Ρ†Π°ΠΌΠΈ ΠΈ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ ΠΈΡ… список ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ².

29. NOC Coffee

ИдСя ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта: ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ с Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ экраном

NOC Coffee — это сайт, Π³Π΄Π΅ ΠΊΠΎΡ„Π΅ встрСчаСтся с ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ.Π­Ρ‚ΠΎΡ‚ сайт ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ экран с Π½Π΅ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΌ располоТСниСм Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ мСню. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π½Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ Π² сСрСдинС экрана. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, этот ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ Π΄Π΅Π»Π°Π΅Ρ‚ это, ΠΈ ΠΎΠ½ Ρ…ΠΎΡ€ΠΎΡˆΠΎ сочСтаСтся с Ρ„ΠΎΠ½ΠΎΠΌ. Когда Π²Ρ‹ Π½Π°Π²Π΅Π΄Π΅Ρ‚Π΅ Π½Π° Π½Π΅Π³ΠΎ курсор, появятся изобраТСния ΠΈ описаниС для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ. К Ρ‚ΠΎΠΌΡƒ ΠΆΠ΅ Π΄Π²Π΅ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½ΠΊΠΈ экрана Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΡΠΎΡ‡Π΅Ρ‚Π°ΡŽΡ‚ΡΡ Π΄Ρ€ΡƒΠ³ с Π΄Ρ€ΡƒΠ³ΠΎΠΌ.

30. Asana

ИдСя ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта: контрастныС Ρ†Π²Π΅Ρ‚Π° с Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌΠΈ страницами

Asana — это инструмСнт управлСния Π·Π°Π΄Π°Ρ‡Π°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π³Ρ€ΡƒΠΏΠΏΠ°ΠΌ ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ, ΠΎΡ‚ΡΠ»Π΅ΠΆΠΈΠ²Π°Ρ‚ΡŒ ΠΈ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ своСй Ρ€Π°Π±ΠΎΡ‚ΠΎΠΉ.Π”ΠΈΠ·Π°ΠΉΠ½ Π΅Π³ΠΎ Π²Π΅Π±-сайта ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΠΎΠ½ΡΡ‚Π½ΡƒΡŽ ΠΈ ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ. Раскладка Π² основном Ρ‡Π΅Ρ€Π½ΠΎ-бСлая. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΠΎΠ½ создал ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΡƒΡŽ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΡŽ. Когда Ρ„ΠΎΠ½ Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ, основная информация отобраТаСтся Π±Π΅Π»Ρ‹ΠΌ, ΠΈ Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π²Ρ‹ Π»Π΅Π³ΠΊΠΎ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ, ΠΊΠΎΠ³Π΄Π° Π·Π°ΠΉΠ΄Π΅Ρ‚Π΅ Π½Π° этот сайт. НСт нСобходимости ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Ρ‚ΡŒ Π²Π½ΠΈΠ· ΠΈΠ»ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΊ Π΄Ρ€ΡƒΠ³ΠΈΠΌ страницам, Ссли Π²Ρ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Ρ… функциях.

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

Π’ΠΎΡ‚ 30 Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² вСрстки Π²Π΅Π±-сайтов.ΠœΡ‹ надССмся, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π²Ρ‹Π±Π΅Ρ€Π΅Ρ‚Π΅ Ρ‡Ρ‚ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ ΠΈΠ· этих ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚Π΅ ΠΈΡ… Π² своих ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ…. И послСднСС, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π·Π°Π±Ρ‹Π²Π°Ρ‚ΡŒ, — это ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ Mockplus ΠΏΡ€ΠΈ создании ΠΌΠ°ΠΊΠ΅Ρ‚Π° вашСго ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π³ΠΎ Π²Π΅Π±-сайта. Благодаря ΡˆΠΈΡ€ΠΎΠΊΠΎΠΌΡƒ Π½Π°Π±ΠΎΡ€Ρƒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΈ Π·Π½Π°Ρ‡ΠΊΠΎΠ² Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΠΏΠ΅Ρ€Π΅Ρ‚Π°ΡΠΊΠΈΠ²Π°Ρ‚ΡŒ элСмСнты, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π²Π΅Ρ€ΡˆΠΈΡ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ страницы. Π£Π΄Π°Ρ‡ΠΈ ΠΈ ΡƒΠ΄Π°Ρ‡Π½ΠΎΠ³ΠΎ творчСства!

10 ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π²Π΅Π±-сайтов для вашСго ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½-ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°

Если Π±Ρ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта Π±Ρ‹Π»ΠΎ Ρ‚Π°ΠΊ ΠΆΠ΅ Π»Π΅Π³ΠΊΠΎ, ΠΊΠ°ΠΊ просто Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Ρ‚ΡŒ вмСстС с Π½ΠΈΠΌ.Π’Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π½Π°ΠΌΠ΅Ρ€Π΅Π½Π½ΠΎ с вашим Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚, ΠΈ Π²Ρ‹ смоТСтС ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π΅ взаимодСйствиС с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ. Π’Ρ‹Π±Π΅Ρ€ΠΈ Π½Π΅ Ρ‚ΠΎΡ‚ ΠΈ Π½Ρƒ …

О, Arngren.net. Π”Π΅Ρ‚ΠΊΠ°, Ρ‡Ρ‚ΠΎ Ρ‚Ρ‹ дСлаСшь?

Π’Ρ‹Π±ΠΎΡ€ ΡƒΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ ваш ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π·Π°Ρ…ΠΎΡ‡Π΅Ρ‚ ΠΎΡΡ‚Π°Ρ‚ΡŒΡΡ ΠΈ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚Π΅.

Π’ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒ вас с 10 распространСнными ΠΌΠ°ΠΊΠ΅Ρ‚Π°ΠΌΠΈ Π²Π΅Π±-сайтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для своСго ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠœΡ‹ объясним ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· Π½ΠΈΡ… ΠΈ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ потрСбностям Π²Π΅Π±-сайта ΠΈ подходящим ΠΌΠ°ΠΊΠ΅Ρ‚Π°ΠΌ.

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎ:

  • Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта?
  • 10 ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π²Π΅Π±-сайтов для вашСго ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°
  • 3 Ρ‚ΠΈΠΏΠ° Π²Π΅Π±-сайтов ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹

Π”Π°Π²Π°ΠΉΡ‚Π΅ Π½Π°Ρ‡Π½Π΅ΠΌ.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта?

Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, Π²Π°ΠΆΠ½ΠΎ ΠΏΠΎΠ½ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта ΠΈ .

ΠœΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта — это основа Π΅Π³ΠΎ построСния ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π”ΡƒΠΌΠ°ΠΉΡ‚Π΅ ΠΎΠ± этом ΠΊΠ°ΠΊ ΠΎ ΡΡ‚Ρ€ΠΎΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ‡Π΅Ρ€Ρ‚Π΅ΠΆΠ°Ρ… вашСго Π²Π΅Π±-сайта.Подобно Ρ‚ΠΎΠΌΡƒ, ΠΊΠ°ΠΊ Ρ‡Π΅Ρ€Ρ‚Π΅ΠΆ опрСдСляСт, ΠΊΠ°ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π·Π΄Π°Π½ΠΈΠ΅ — Π³Π΄Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΊΠΎΠΌΠ½Π°Ρ‚Ρ‹, Π³Π΄Π΅ стСны ΠΈ Ρ‚. Π”. — ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта сообщаСт Π²Π°ΠΌ, Π³Π΄Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ всС ваши Π°ΠΊΡ‚ΠΈΠ²Ρ‹, ΠΎΡ‚ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΉ Π΄ΠΎ тСкста ΠΈ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠ².

Π’ Ρ†Π΅Π»ΠΎΠΌ, Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ соотвСтствуСт Π²Π°ΠΆΠ½ΠΎΠΌΡƒ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡƒ: Π”Π΅Ρ€ΠΆΠΈΡ‚Π΅ Π΅Π³ΠΎ простым, Π³Π»ΡƒΠΏΡ‹ΠΌ (ΠΈΠ»ΠΈ KISS).

Богласно исслСдованию, ΠΏΡ€ΠΎΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌΡƒ Hubspot, 76% ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΈΡ‚Π΅Π»Π΅ΠΉ говорят, Ρ‡Ρ‚ΠΎ простота ΠΈ удобная навигация ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½Ρ‹ΠΌΠΈ Ρ„Π°ΠΊΡ‚ΠΎΡ€Π°ΠΌΠΈ β„–1 Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π²Π΅Π±-сайтов.Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Π²Ρ‹Π±ΠΎΡ€ ΠΌΠ°ΠΊΠ΅Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ смоТСт Π²Π·ΡΡ‚ΡŒ всС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ рСсурсы ΠΈ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ ΠΈΡ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ простым способом.

На Ρ‡Ρ‚ΠΎ это ΠΏΠΎΡ…ΠΎΠΆΠ΅? Π― Ρ€Π°Π΄Π°, Ρ‡Ρ‚ΠΎ Π²Ρ‹ спросили.

10 ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π²Π΅Π±-сайтов для вашСго ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°

НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Ρ‹ 10 ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π²Π΅Π±-сайтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для своСго ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… прСдставляСт свой ΡΡ‚ΠΈΠ»ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс.

Π’Ρ‹ смоТСтС Π½Π°ΠΉΡ‚ΠΈ эти ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π² использовании Π½Π° бСсчислСнном мноТСствС Ρ€Π°Π·Π½Ρ‹Ρ… Π²Π΅Π±-сайтов. ΠŸΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°ΠΉΡ‚Π΅ Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒ Π΄ΠΎ ΠΊΠΎΠ½Ρ†Π°, Π³Π΄Π΅ ΠΌΡ‹ ΡƒΠ·Π½Π°Π΅ΠΌ, ΠΊΠ°ΠΊ ΡΠΎΡ‡Π΅Ρ‚Π°Ρ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ Π²Π΅Π±-сайта с ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π°!

1.F-образная

F-ΠΎΠ±Ρ€Π°Π·Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта нСвСроятно распространСн, ΠΎΠ½ построСн Π½Π° основС исслСдования, ΠΏΡ€ΠΎΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ³ΠΎ Nielsen Norman Group, консалтинговой Ρ„ΠΈΡ€ΠΌΠΎΠΉ, Π·Π°Π½ΠΈΠΌΠ°ΡŽΡ‰Π΅ΠΉΡΡ исслСдованиями UX, которая ΠΏΡ€ΠΎΠ²Π΅Π»Π° исслСдованиС с отслСТиваниСм взгляда ΠΈ ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ»Π°, Ρ‡Ρ‚ΠΎ люди ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Ρ‡ΠΈΡ‚Π°ΡŽΡ‚ Π±Π»ΠΎΠΊΠΈ тСкста ΠΈ рСсурсов Π² F-ΠΎΠ±Ρ€Π°Π·Π½ΠΎΠΌ ΠΎΠ±Ρ€Π°Π·Π΅. .

ВСпловая ΠΊΠ°Ρ€Ρ‚Π° ΠΈΠ· исслСдования Π³Π»Π°Π· Nielsen, ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰Π°Ρ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ±Ρ‰ΠΈΠ΅ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹

На ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ Π²Ρ‹ΡˆΠ΅ собраны тысячи записСй Ρ‚Π΅ΠΏΠ»ΠΎΠ²ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚Ρ‹. ΠŸΠΎΠ½ΡΡ‚Π½ΠΎ, Ρ‡Ρ‚ΠΎ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΠΈ, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, сканировали Π² Π΄Π²Π΅ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Π»ΠΈΠ½ΠΈΠΈ, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡΡ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Π½Π° сторонС, создавая ΡƒΠ·ΠΎΡ€ F ΠΈΠ»ΠΈ E.

МногиС Π²Π΅Π±-сайты ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ шаблон F-ΠΎΠ±Ρ€Π°Π·Π½ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΡ‹, ΠΊΠΎΠ³Π΄Π° хотят ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ мноТСство Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² для наТатия. ΠŸΠΎΠ΄ΡƒΠΌΠ°ΠΉΡ‚Π΅ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ прСдставлСны Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ поиска Google ΠΈΠ»ΠΈ ΠΊΠ°ΠΊ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ новостных Π²Π΅Π±-сайтов Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ свои Π°ΠΊΡ‚ΠΈΠ²Ρ‹.

Protip: Π Π°ΡΡΡ‚Π°Π²ΡŒΡ‚Π΅ ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚Ρ‹ для ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ страницу. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ принятиС Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊΠΈΠ΅ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½Ρ‹Π΅ элСмСнты Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π²Π°ΡˆΠ΅ΠΌΡƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ. Π­Ρ‚ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚, ΠΊΠ°ΠΊ Π²Ρ‹ размСститС ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ.

2. Z-образная (ΠΈΠ»ΠΈ зигзагообразная)

Как ΠΈ F-образная Ρ„ΠΎΡ€ΠΌΠ°, Z-образная ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π° для отслСТивания ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡Π΅ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΊ просмотру.ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡŽΡ‚ сканированиС Π² Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ свСрху слСва Π½Π°ΠΏΡ€Π°Π²ΠΎ, Π·Π°Ρ‚Π΅ΠΌ Π²Π½ΠΈΠ· ΠΏΠΎ Π΄ΠΈΠ°Π³ΠΎΠ½Π°Π»ΠΈ Π΄ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΡƒΠ³Π»Π° Π² Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΏΡ€Π°Π²Ρ‹ΠΉ ΡƒΠ³ΠΎΠ» — ΠΏΠΎΡ‡Ρ‚ΠΈ Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ Π²Ρ‹ Ρ‡ΠΈΡ‚Π°Π»ΠΈ ΠΊΠ½ΠΈΠ³Ρƒ.

Π Π°Π·Π½ΠΈΡ†Π° ΠΌΠ΅ΠΆΠ΄Ρƒ этим ΠΈ F-ΠΎΠ±Ρ€Π°Π·Π½ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΠΎΠΉ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Z-ΠΎΠ±Ρ€Π°Π·Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта Π»ΡƒΡ‡ΡˆΠ΅ всСго ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для страниц с ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ Ρ†Π΅Π»ΡŒΡŽ, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ цСлСвая страница для подписки Π½Π° ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ Π±ΡŽΠ»Π»Π΅Ρ‚Π΅Π½ΡŒ ΠΈΠ»ΠΈ услугу.

Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π²Π΅Π±-сайта Π² Ρ„ΠΎΡ€ΠΌΠ΅ Π±ΡƒΠΊΠ²Ρ‹ Z с ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ этого.

Линия Π³Π»Π°Π· повторяСт Π΅ΡΡ‚Π΅ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ Z-ΠΎΠ±Ρ€Π°Π·Π½ΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒ Π½Π° всСй этой Π²Π΅Π±-страницС, ΠΎΡ‚ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ° Facebook Π΄ΠΎ области Π²Ρ…ΠΎΠ΄Π° Π² систСму, Π·Π°Ρ‚Π΅ΠΌ Π΄ΠΎ области копирования Ρ†Π΅Π»Π΅Π²ΠΎΠΉ страницы ΠΈ области рСгистрации.

Π‘ΠΎΠ²Π΅Ρ‚: Π’Π΅Π±-сайт Z-Ρ„ΠΎΡ€ΠΌΡ‹ Π»ΡƒΡ‡ΡˆΠ΅ всСго ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для страниц с ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌ количСством ΠΊΠΎΠΏΠΈΠΉ ΠΈ содСрТимого, Π° Ρ‚Π°ΠΊΠΆΠ΅ с дСмонстрациСй ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΠ³Π΄Π° взгляд двиТСтся Π²Π½ΠΈΠ· ΠΏΠΎ страницС. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΊ Π½Π΅ΠΌΡƒ слайдСр с нСсколькими изобраТСниями, ΠΈ Π²Ρ‹ смоТСтС ΡΠΎΡΡ€Π΅Π΄ΠΎΡ‚ΠΎΡ‡ΠΈΡ‚ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»Π΅ΠΉ Π½Π° страницС.

3. Π–ΡƒΡ€Π½Π°Π»

ΠœΠ°ΠΊΠ΅Ρ‚ Π² стилС ΠΆΡƒΡ€Π½Π°Π»Π° Ρ‡Π°Ρ‰Π΅ всСго ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ с публикациями Π² БМИ. ΠœΠ°ΠΊΠ΅Ρ‚ основан Π½Π° сСтках , , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ ΠΎΠ³Ρ€ΠΎΠΌΠ½ΠΎΠ΅ количСство ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, Π½Π΅ пСрСгруТая Π΅Π³ΠΎ.

Π­Ρ‚ΠΎΡ‚ ΠΌΠ°ΠΊΠ΅Ρ‚ Ρ‚Π°ΠΊΠΆΠ΅ позволяСт ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€Π°ΠΌ Π²Π΅Π±-сайтов Π½Π°Π·Π½Π°Ρ‡Π°Ρ‚ΡŒ ΠΏΠΎΠ½ΡΡ‚Π½ΡƒΡŽ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΡŽ для своих статСй, помогая ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊΠΈΠ΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½Ρ‹ΠΌΠΈ ΠΈΠ»ΠΈ Π½Π΅Π΄Π°Π²Π½ΠΈΠΌΠΈ ΠΏΡ€ΠΈ Ρ‡Ρ‚Π΅Π½ΠΈΠΈ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΡΠΊΠ°Π½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ страницу ΠΈ Π²ΠΏΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚.

Если Π½Π° вашСм Π²Π΅Π±-сайтС ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° — ΠΏΠΎΠ΄ΡƒΠΌΠ°ΠΉΡ‚Π΅ ΠΎ Π±Π»ΠΎΠ³Π΅ ΠΈΠ»ΠΈ ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠΈ новостСй — ΠΏΠΎΠ΄ΡƒΠΌΠ°ΠΉΡ‚Π΅ ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ Π² стилС ΠΆΡƒΡ€Π½Π°Π»Π°.

Π‘ΠΎΠ²Π΅Ρ‚: НС спитС Π½Π° πŸ‘ изобраТСниях πŸ‘πŸ‘πŸ‘ ΠœΠ°ΠΊΠ΅Ρ‚ Π² ΠΆΡƒΡ€Π½Π°Π»ΡŒΠ½ΠΎΠΌ стилС Π² Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ стСпСни зависит ΠΎΡ‚ Ρ€Π°Π·Π½ΠΎΠΎΠ±Ρ€Π°Π·Π½ΠΎΠ³ΠΎ количСства Ρ…ΠΎΡ€ΠΎΡˆΠΈΡ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»Π΅ΠΉ.ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π»ΡƒΡ‡ΡˆΠΈΠΉ для ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠΈ.

4. Ѐотография Ρ†Π΅Π»ΠΈΠΊΠΎΠΌ (ΠΈΠ»ΠΈ ΠΈΠ·Π±Ρ€Π°Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅)

ΠœΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта с фотографиями Π΄Π°Π΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ большоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с нСбольшими Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π°ΠΌΠΈ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΏΠΎΠ²Π΅Ρ€Ρ… Π½Π΅Π³ΠΎ. ΠŸΡ€Π΅ΠΊΡ€Π°ΡΠ½ΠΎ, Ссли Ρƒ вас Π΅ΡΡ‚ΡŒ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΉ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π΅Π΄Π° для рСсторана.

Для этого Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ красивыС Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ ΠΈ изобраТСния. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ свой ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚, изобраТСния Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΡƒΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΈ Π΄ΠΈΠ½Π°ΠΌΠΈΡ‡Π½Ρ‹ΠΌΠΈ — Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎΠ³Π΄Π° Π²Ρ‹ смоТСтС ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΈ ΡƒΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ ΠΈΡ… Π½Π° сайтС.

Π‘ΠΎΠ²Π΅Ρ‚: ΠŸΠΎΠΌΠ½ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ вашС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ совмСстимо с ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌΠΈ. Π’ΠΎ, Ρ‡Ρ‚ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΎ выглядит Π½Π° Ρ€Π°Π±ΠΎΡ‡Π΅ΠΌ столС, Π½Π° Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ уТасно.

5. Π Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ экран

Π­Ρ‚ΠΎΡ‚ ΠΌΠ°ΠΊΠ΅Ρ‚ относится ΠΊ экранам, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Ρ‹ Π»ΠΈΠ±ΠΎ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, Π»ΠΈΠ±ΠΎ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ — ΠΈΠ»ΠΈ ΠΏΠΎ ΠΎΠ±ΠΎΠΈΠΌ, ΠΊΠ°ΠΊ ΡƒΠΊΠ°Π·Π°Π½ΠΎ Π²Ρ‹ΡˆΠ΅!

Π­Ρ‚ΠΎΡ‚ ΠΌΠ°ΠΊΠ΅Ρ‚ часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для Π²Π΅Π±-сайтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°Π·Π΄Π΅Π»ΡΡŽΡ‚ прСдлоТСния для ΠΌΡƒΠΆΡ‡ΠΈΠ½ ΠΈ ΠΆΠ΅Π½Ρ‰ΠΈΠ½ ΠΈΠ»ΠΈ взрослых ΠΈ Π΄Π΅Ρ‚Π΅ΠΉ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ для ΠΌΠ°Π³Π°Π·ΠΈΠ½ΠΎΠ² элСктронной ΠΊΠΎΠΌΠΌΠ΅Ρ€Ρ†ΠΈΠΈ ΠΈ ΠΌΠΎΠ΄Π΅Π»ΡŒΠ½Ρ‹Ρ… агСнтств.

Π‘ΠΎΠ²Π΅Ρ‚: Π‘Π²Π΅Π΄ΠΈΡ‚Π΅ содСрТимоС ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌΡƒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ экрана.ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ сосрСдоточСно Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° Π²Π°ΡˆΠΈΡ… Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… рСсурсах, Π²Π°ΠΌ Π½Π΅ слСдуСт Π·Π°Π³Ρ€ΠΎΠΌΠΎΠΆΠ΄Π°Ρ‚ΡŒ ΠΈΡ… ΠΏΠΎΠ»Π΅ зрСния ΠΊΡƒΡ‡Π΅ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΈ посторонними изобраТСниями.

6. ΠšΠ°Ρ€Ρ‚Ρ‹

Π Π°Π±ΠΎΡ‚Π° с ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ, Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Π²ΠΈΠ΄ сСтки, ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Π²Π΅Π±-сайтов, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ ΠΎΠ³Ρ€ΠΎΠΌΠ½Ρ‹ΠΉ Π±Π°Π½ΠΊ нСиСрархичСского ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°.

Π­Ρ‚ΠΎΡ‚ ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для Π²Π΅Π±-сайтов новостСй, Π±Π»ΠΎΠ³ΠΎΠ², ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ ΠΈ Π²ΠΈΠ΄Π΅ΠΎ — Π²Π΅Π±-сайтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ большой объСм ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ, настраиваСмым ΠΈ простым способом.

Π‘ΠΎΠ²Π΅Ρ‚: Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ оставили достаточно свободного мСста.НСдостаточно, ΠΈ ваши ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡˆΠ΅Π»ΠΎΠΌΠ»Π΅Π½Ρ‹ ΠΈ пропустят вСсь Ρ‚ΠΎΡ‚ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ ΠΏΡ‹Ρ‚Π°Π΅Ρ‚Π΅ΡΡŒ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ.

[Π—ΠΠ“ΠžΠ›ΠžΠ’ΠžΠš: О Π±ΠΎΠΆΠ΅. ΠŸΠΎΡ‡Π΅ΠΌΡƒ?]

7. АсиммСтричный

Как ΠΎΠ΄Π½Π°ΠΆΠ΄Ρ‹ сказал Ѐрэнк Π‘ΠΈΠ½Π°Ρ‚Ρ€Π°: Β«ΠŸΠΎΠ΄Π½ΠΈΠΌΠΈΡ‚Π΅ ΡˆΠ»ΡΠΏΡƒ — ΡƒΠ³Π»Ρ‹ — это ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅Β». Помимо Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π³ΠΎΠ»ΡƒΠ±ΠΎΠ³Π»Π°Π·Ρ‹ΠΉ ΠΏΠ΅Π²Π΅Ρ†, каТСтся, ΠΎΠ½ Ρ‚Π°ΠΊΠΆΠ΅ Π±Ρ‹Π» сторонником асиммСтричного ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайтов.

АсиммСтрия ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для добавлСния напряТСния ΠΈ Π΄ΠΈΠ½Π°ΠΌΠΈΠΊΠΈ Π² ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΊ ΠΎΠ΄Π½ΠΎΠΉ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΉ части ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта.

Π’ этом ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ контрастныС Ρ†Π²Π΅Ρ‚Π° для выдСлСния содСрТимого. Π•Ρ‰Π΅ ΠΎΠ΄Π½Π° ΠΎΡ‚Π»ΠΈΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ Ρ‡Π΅Ρ€Ρ‚Π° — это ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ Π³Π»ΡƒΠ±ΠΈΠ½Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠ΄Π°Ρ‚ΡŒ страницС. Π•Π³ΠΎ Ρ‡Π°Ρ‰Π΅ всСго ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ для сайтов-ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ хотят Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒΡΡ срСди Π΄Ρ€ΡƒΠ³ΠΈΡ…, Π° Ρ‚Π°ΠΊΠΆΠ΅ для ΠΈΠ½Π½ΠΎΠ²Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… ΠΈ смСлых Π±Ρ€Π΅Π½Π΄ΠΎΠ².

Π‘ΠΎΠ²Π΅Ρ‚: Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ асиммСтричный ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Π°ΡˆΠ΅ΠΌΡƒ Π±Ρ€Π΅Π½Π΄Ρƒ, Π½ΠΎ ΠΈ вашим ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π½Ρ‹ΠΌ рСсурсам. Π­Ρ‚ΠΎΡ‚ ΠΌΠ°ΠΊΠ΅Ρ‚ Π»ΡƒΡ‡ΡˆΠ΅ всСго ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Π²Π΅Π±-сайтов с мСньшим количСством ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°.

8. ΠžΠ΄Π½ΠΎΠΊΠΎΠ»ΠΎΠ½Π½Ρ‹ΠΉ

Π’Π΅Π±-сайты с ΠΎΠ΄Π½ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΎΠΉ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ просты, насколько это Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ.

ВсС ваши Π°ΠΊΡ‚ΠΈΠ²Ρ‹ ΠΏΠΎΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ Π² ΠΎΠ΄Π½Ρƒ ΠΊΠΎΠ»ΠΎΠ½ΠΊΡƒ Π½Π° вашСм Π²Π΅Π±-сайтС. Π’ΠΎΡ‚ ΠΈ всС. ВсС, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ, — это ΠΎΠ΄ΠΈΠ½ столбСц, ΠΈ всС, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ, — это ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΈΡ‚ΡŒ Π²Π½ΠΈΠ·, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ большС ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°.

Π­Ρ‚ΠΎ популярный ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта для минималистичных ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌ Π±Π»ΠΎΠ³ΠΎΠ², Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Tumblr ΠΈ Medium, ΠΈΠ»ΠΈ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌ ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтСй, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Instagram ΠΈ Twitter, Π³Π΄Π΅ сообщСния автоматичСски ΡΠΎΡ€Ρ‚ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΌΡƒ Ρ„Π°ΠΊΡ‚ΠΎΡ€Ρƒ: Π΄Π°Ρ‚Π΅.

Π‘ΠΎΠ²Π΅Ρ‚: ΠŸΡ€ΠΈ использовании этого ΠΌΠ°ΠΊΠ΅Ρ‚Π° для вашСго собствСнного Π²Π΅Π±-сайта ΠΏΠΎΠ΄ΡƒΠΌΠ°ΠΉΡ‚Π΅ ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠΈ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΡ… ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ваш ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΌΠΎΠ³ Π»Π΅Π³ΠΊΠΎ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ ΠΏΠΎ сайту, нСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, Π³Π΄Π΅ ΠΎΠ½ΠΈ находятся Π½Π° страницС.

9. Π Π°ΠΌΠΊΠΈ (ΠΈΠ»ΠΈ эскизы)

Π­Ρ‚ΠΎΡ‚ Π±Π»ΠΎΡ‡Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта идСально ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Π±Π»ΠΎΠ³ΠΎΠ² ΠΈ новостных Π²Π΅Π±-сайтов, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… выдСляСтся Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚.

ΠžΠ±Ρ‹Ρ‡Π½ΠΎ ΠΎΠ½ прСдставлСн Π² Π²ΠΈΠ΄Π΅ Ρ‚Ρ€Π΅Ρ… Ρ€Π°Π·Π½Ρ‹Ρ… частСй ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, располоТСнных Π² ΠΊΠΎΡ€ΠΎΠ±ΠΊΠ°Ρ…, ΠΏΡ€ΠΈΡ‡Π΅ΠΌ ΠΎΠ΄Π½Π° большая находится ΠΏΠΎΠ²Π΅Ρ€Ρ… Π΄Π²ΡƒΡ… Π΄Ρ€ΡƒΠ³ΠΈΡ…. Π’ Π±ΠΎΠ»Π΅Π΅ ΠΊΡ€ΡƒΠΏΠ½ΠΎΠΌ Π±Π»ΠΎΠΊΠ΅ Β«Π˜Π·Π±Ρ€Π°Π½Π½Ρ‹Π΅Β» ΠΈΠ½ΠΎΠ³Π΄Π° Π΅ΡΡ‚ΡŒ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ для ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

Protip: Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ свои ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ для продвиТСния ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°, сплСтая ΠΈΡ… вмСстС.На ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ Π²Ρ‹ΡˆΠ΅ Microsoft ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΏΠΎΠ»Π΅ для продвиТСния Surface. КаТдая ΠΊΠΎΡ€ΠΎΠ±ΠΊΠ° Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, дСмонстрируя Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ ΠΈΠ»ΠΈ направляя ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Ρ‚ΡƒΠ΄Π°, Π³Π΄Π΅ ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС ΠΎ Surface.

10. Ѐиксированная боковая панСль (ΠΈΠ»ΠΈ фиксированная навигация)

Π£ фиксированной Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта Π΅ΡΡ‚ΡŒ ΠΈΠΌΠ΅Π½Π½ΠΎ это: фиксированная панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ с Π»Π΅Π²ΠΎΠΉ ΠΈΠ»ΠΈ ΠΏΡ€Π°Π²ΠΎΠΉ стороны, которая позволяСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π»Π΅Π³ΠΊΠΎ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ ΠΏΠΎ сайту нСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, Π³Π΄Π΅ ΠΎΠ½ΠΈ находятся Π½Π° Π²Π΅Π±-страницС. Π­Ρ‚ΠΎ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π²Π΅Π±-сайта Π½ΡƒΠΆΠ½ΠΎ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ потрСбности ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ.

Однако Π·Π° это приходится ΠΏΠ»Π°Ρ‚ΠΈΡ‚ΡŒ: фиксированная боковая панСль Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒ большС страницы, Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ мСньшС мСста для Π΄Ρ€ΡƒΠ³ΠΈΡ… рСсурсов. Π­Ρ‚Ρƒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ ΠΌΠΎΠΆΠ½ΠΎ нСсколько ΡΠΌΡΠ³Ρ‡ΠΈΡ‚ΡŒ, Ссли Ρƒ вас исчСзнСт панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, ΠΏΠΎΠΊΠ° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π΅ Π½Π°Π²Π΅Π΄Π΅Ρ‚ Π½Π° Π½Π΅Π΅ курсор. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, это Π±Ρ‹Π»ΠΎ большим Π΄Π΅Π»ΠΎΠΌ Π²ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½Π° iframe Π² Π½Π°Ρ‡Π°Π»Π΅ 2000-Ρ… Π³ΠΎΠ΄ΠΎΠ².

Protip: ΠŸΠΎΠΌΠ½ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ боковая панСль ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ ΠΏΠΎ рСсурсам Π½Π° Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ страницС, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»Π΅ΠΉ Π² Π΄Ρ€ΡƒΠ³ΠΈΠ΅ мСста, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ваши ΠΊΠ°Π½Π°Π»Ρ‹ ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтСй ΠΈ страница ΠΎ страницС.

3 Ρ‚ΠΈΠΏΠ° сайтов ΠΈ ΠΈΡ… ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅ нСсколько распространСнных ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π²Π΅Π±-сайтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² своСм ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅, ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒ вас с Π½ΠΈΠΌΠΈ Π² дСйствии.

НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Ρ‹ Ρ‚Ρ€ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Ρ‚ΠΈΠΏΠΎΠ² Π²Π΅Π±-сайтов:

  1. SaaS
  2. РСдакция
  3. Π›ΠΈΡ‡Π½Ρ‹ΠΉ

ΠœΡ‹ Ρ‚Π°ΠΊΠΆΠ΅ Π²ΠΊΠ»ΡŽΡ‡ΠΈΠ»ΠΈ ΠΏΠΎ ΠΏΡΡ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π²Π΅Π±-сайтов ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ½ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚. НадСюсь, ΠΎΠ½ΠΈ вдохновят ваш ΠΏΡ€ΠΎΠ΅ΠΊΡ‚, нСзависимо ΠΎΡ‚ Π΅Π³ΠΎ Ρ„ΠΎΡ€ΠΌΡ‹.

ΠœΠ°ΠΊΠ΅Ρ‚Ρ‹ SaaS

Π’Π΅Π±-сайты для ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ² SaaS ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΠ΄ΠΈΠ½ ΠΌΠ°ΠΊΠ΅Ρ‚: Z-ΠΎΠ±Ρ€Π°Π·Π½ΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒ.Π­Ρ‚ΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΊ ΠΏΡ€ΠΈΠ·Ρ‹Π²Ρƒ ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ Π½Π° страницС.

Для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ Π½ΠΈΠΆΠ΅, это ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ для подписки Π½Π° услуги, ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅ΠΌΡ‹Π΅ Π²Π΅Π±-сайтом.

Evernote (Z-образная)

Mailchimp (Z-образная)

Hubspot (Z-образная)

Π‘Π»Π°Π±ΠΈΠ½Π° (Z-образная)

Salesforce (Z-образная)

Π Π΅Π΄Π°ΠΊΡ†ΠΈΠΎΠ½Π½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹

ΠŸΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠΈ ΡΠΊΠ»ΠΎΠ½ΡΡŽΡ‚ΡΡ ΠΊ ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΌΡƒ для читатСля ΠΌΠ°ΠΊΠ΅Ρ‚Ρƒ Π²Π΅Π±-сайтов, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΆΡƒΡ€Π½Π°Π»ΡŒΠ½ΠΎΠΌΡƒ ΠΈΠ»ΠΈ F-ΠΎΠ±Ρ€Π°Π·Π½ΠΎΠΌΡƒ ΡΡ‚ΠΈΠ»ΡŽ. Π­Ρ‚ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Ρƒ Π²Π΅Π±-сайта ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡ‚ΡŒ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΡŽ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, давая ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ свободу Π²Ρ‹Π±ΠΎΡ€Π° части ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΎΠ½ΠΈ хотят ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ.

The Verge (Π–ΡƒΡ€Π½Π°Π»)

ΠŸΠ ΠžΠ’ΠžΠ”ΠΠžΠ™ (Π–ΡƒΡ€Π½Π°Π»)

LA Times (Π–ΡƒΡ€Π½Π°Π»)

ΠœΠ°ΠΊΠ΅Ρ‚Ρ‹ Π»ΠΈΡ‡Π½Ρ‹Ρ… сайтов

ОсобСнно ΠΏΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ собствСнного Π²Π΅Π±-сайта Π²Ρ‹Π±ΠΎΡ€ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΡ‚Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Ρ‚ΠΎ, ΠΊΠ΅ΠΌ Π²Ρ‹ ΡΠ²Π»ΡΠ΅Ρ‚Π΅ΡΡŒ — ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ для вас ΠΈ Π²Π°ΡˆΠΈΡ… Ρ†Π΅Π»Π΅ΠΉ.

НапримСр, Ссли Ρƒ вас Π΅ΡΡ‚ΡŒ Π±Π»ΠΎΠ³, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ с ΠΎΠ΄Π½ΠΈΠΌ столбцом ΠΈΠ»ΠΈ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΎΠ½ΠΈ Π»ΡƒΡ‡ΡˆΠ΅ всСго Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‚ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚. Если Ρƒ вас Π΅ΡΡ‚ΡŒ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΎΠ΄Π°Ρ‚ΡŒ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ»Π½ΡƒΡŽ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΡŽ ΠΈΠ»ΠΈ Z-ΠΎΠ±Ρ€Π°Π·Π½ΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ΠΈ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ подходят для дСмонстрации ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ² ΠΈ ΠΏΡ€ΠΈΠ·Ρ‹Π²Π° ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ.

Π”ΠΆΠ΅Ρ€Π°Π»ΡŒΠ΄ΠΈΠ½ Π”Π΅Π ΡƒΠΈΡ‚Π΅Ρ€ (ПолноС Ρ„ΠΎΡ‚ΠΎ / ΠœΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Π°)

Гэри Шэн (ПолноС Ρ„ΠΎΡ‚ΠΎ / ΠœΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Π°)

Π’ΠΎΠ½ΠΈ Π”β€™ΠžΡ€ΠΈΠΎ (ПолноС Ρ„ΠΎΡ‚ΠΎ / ΠœΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅)

Ник ДТонс (Π‘Π΅Ρ‚ΠΊΠ°)

Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΡƒΡŽ ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²ΠΊΡƒ

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ Π·Π½Π°Ρ‚ΡŒ: ΠΊΠ°ΠΊΠΎΠΉ ваш Π»ΡŽΠ±ΠΈΠΌΡ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта ΠΈ ΠΏΠΎΡ‡Π΅ΠΌΡƒ? Π‘ΠΎΠΎΠ±Ρ‰ΠΈΡ‚Π΅ Π½Π°ΠΌ ΠΈ ΠΏΡ€ΠΈΠ²Π΅Π΄ΠΈΡ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€. ΠœΡ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π² Π±ΡƒΠ΄ΡƒΡ‰ΠΈΠΉ пост ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π²Π΅Π±-сайтов.

Π₯ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π²Π΅Π±-сайтов?

Π›ΡƒΡ‡ΡˆΠΈΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π²Π΅Π±-сайтов для Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ вашСго сообщСния

Π’Ρ‹Π±ΠΎΡ€ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π° — ΠΎΠ΄ΠΈΠ½ ΠΈΠ· самых ΠΏΠ΅Ρ€Π²Ρ‹Ρ… шагов Π² создании Π²Π΅Π±-сайта, ΠΈ ΠΎΠ½ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π΅ΡˆΠ°ΡŽΡ‰Π΅Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ для ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ³ΠΎ выполнСния.ΠœΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта, слуТащий основой вашСго Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΌΠΎΠΆΠ΅Ρ‚ сильно ΠΏΠΎΠ²Π»ΠΈΡΡ‚ΡŒ Π½Π° Ρ‚ΠΎ, насколько ΠΊΠΎΠΌΠΌΡƒΠ½ΠΈΠΊΠ°Ρ‚ΠΈΠ²Π½Ρ‹ΠΌ ΠΈ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятным Π±ΡƒΠ΄Π΅Ρ‚ ваш сайт.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта?

ΠœΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта — это располоТСниС всСх Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… элСмСнтов Π½Π° Π²Π΅Π±-страницС ΠΈ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠ΅ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ. Благодаря ΠΏΡ€Π΅Π΄Π½Π°ΠΌΠ΅Ρ€Π΅Π½Π½ΠΎΠΌΡƒ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΡŽ элСмСнтов страницы ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ сообщСниС сайта, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π΅Π³ΠΎ удобство использования.

ВСрстка — ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π²Π΅Π±-сайта. Он опрСдСляСт ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ элСмСнты страницы Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‚ΡΡ срСди посСтитСлСй, ΠΊΠ°ΠΊΠΈΠ΅ элСмСнты ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°ΡŽΡ‚ наибольшСС Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΈ ΠΎΠ±Ρ‰ΠΈΠΉ баланс, достигаСмый Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅.

ΠŸΡ€ΠΎΡ‰Π΅ говоря, Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π°ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ посСтитСлСй Π² ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ ΠΈΠΌ ΡΠΎΡΡ€Π΅Π΄ΠΎΡ‚ΠΎΡ‡ΠΈΡ‚ΡŒΡΡ Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ Π½Π° самом Π²Π°ΠΆΠ½ΠΎΠΌ, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΊ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ Ρ€Π°Π·Π΄Π΅Π»Π°ΠΌ Π² порядкС значимости.

Π’Ρ‹Π±ΠΎΡ€ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта

ΠŸΡ€ΠΈ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π΅ ΠΊ Π·Π°Π΄Π°Ρ‡Π΅ Π²Ρ‹Π±ΠΎΡ€Π° ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π° для вашСго Π²Π΅Π±-сайта Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ Π΄Π²Π° основных Ρ„Π°ΠΊΡ‚ΠΎΡ€Π°:

  • Π Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ вашСго ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°: ΠœΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡƒΠ»ΡƒΡ‡ΡˆΠ°Ρ‚ΡŒ ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ вашС сообщСниС , участвуя Π² рассказС истории, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Ρ€Π°ΡΡΠΊΠ°Π·Π°Ρ‚ΡŒ.НСкоторыС ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π²Π΅Π±-сайтов Π»ΡƒΡ‡ΡˆΠ΅ всСго ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для дСмонстрации ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ² ΠΈΠ»ΠΈ Ρ€Π°Π±ΠΎΡ‚, Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ быстро ΠΈ эффСктивно ΠΏΠ΅Ρ€Π΅Π΄Π°ΡŽΡ‚ Ρ„Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π±Π»ΠΎΠ³ ΠΈΠ»ΠΈ новостная ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ°). Π’Ρ‹Π±Ρ€Π°Π½Π½Ρ‹ΠΉ Π²Π°ΠΌΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π²Π°ΡˆΠ΅ΠΌΡƒ Ρ‚ΠΈΠΏΡƒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°.

  • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹: Π₯отя Π΅ΡΡ‚ΡŒ мСсто для творчСства, Ρ…ΠΎΡ€ΠΎΡˆΠΎ извСстныС ΠΈ ΠΏΡ€ΠΎΠ²Π΅Ρ€Π΅Π½Π½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π²Π΅Π±-сайтов ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π»ΡƒΡ‡ΡˆΠΈΠΌ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠΌ. Π­Ρ‚ΠΈ классичСскиС ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, каТутся ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π·Π½Π°ΠΊΠΎΠΌΡ‹ΠΌΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ΠΈ ΠΎΡΠ½ΠΎΠ²Ρ‹Π²Π°ΡŽΡ‚ΡΡ Π½Π° ΠΈΡ… ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… оТиданиях ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΡˆΠ»ΠΎΠΌ ΠΎΠΏΡ‹Ρ‚Π΅ Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Π²Π΅Π±-сайтами.Π—Π½Π°ΠΊΠΎΠΌΡ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Ρ‚ ΠΊ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятному ΠΈ простому Π² использовании интСрфСйсу.

НиТС ΠΌΡ‹ Π²Ρ‹Π΄Π΅Π»ΠΈΠ»ΠΈ Π΄Π΅ΡΡΡ‚ΡŒ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ эффСктивных ΠΈ распространСнных ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π²Π΅Π±-сайтов, объяснив, Ρ‡Ρ‚ΠΎ заставляСт ΠΈΡ… Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΈ ΠΊΠ°ΠΊΠΎΠΉ Ρ‚ΠΈΠΏ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π»ΡƒΡ‡ΡˆΠ΅ всСго ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· Π½ΠΈΡ…. Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ собой всС ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π²Π΅Π±-сайтов ΠΎΡ‚ Wix, ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ настраиваСмыС Π² соотвСтствии с вашим стилСм ΠΈ потрСбностями:

10 Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π²Π΅Π±-сайтов

  1. ΠœΠ°ΠΊΠ΅Ρ‚ Z-шаблона

  2. ΠœΠ°ΠΊΠ΅Ρ‚ F-ΠΎΠ±Ρ€Π°Π·Ρ†Π°

  3. ΠœΠ°ΠΊΠ΅Ρ‚ полноэкранного изобраТСния

  4. ΠœΠ°ΠΊΠ΅Ρ‚ с Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ экраном

  5. АсиммСтричный ΠΌΠ°ΠΊΠ΅Ρ‚

  6. ΠžΠ΄Π½ΠΎΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚

  7. Π‘Π»ΠΎΡ‡Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚

  8. ΠœΠ°ΠΊΠ΅Ρ‚ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ

  9. ΠœΠ°ΠΊΠ΅Ρ‚ ΠΆΡƒΡ€Π½Π°Π»Π°

  10. Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ полосы

    01.Z-ΠΎΠ±Ρ€Π°Π·Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚

    Попадая Π½Π° Π½ΠΎΠ²ΡƒΡŽ Π²Π΅Π±-страницу, ΠΌΡ‹ сразу ΠΆΠ΅ просматриваСм Π΅Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ½ΡΡ‚ΡŒ ΡΡƒΡ‚ΡŒ Π²Π΅Ρ‰Π΅ΠΉ. Π­Ρ‚ΠΎ быстроС сканированиС, Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΠΎΠ΅ Π±Π΅Π³Π»Ρ‹ΠΌ Ρ‡Ρ‚Π΅Π½ΠΈΠ΅ΠΌ, часто выполняСтся Π² Ρ„ΠΎΡ€ΠΌΠ΅ Π±ΡƒΠΊΠ²Ρ‹ Z ΠΈΠ»ΠΈ Π·ΠΈΠ³Π·Π°Π³ΠΎΠΎΠ±Ρ€Π°Π·Π½ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΡ‹. Наши Π³Π»Π°Π·Π° ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ ΠΈΠ· Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΡƒΠ³Π»Π° Π² Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ ΠΏΡ€Π°Π²Ρ‹ΠΉ ΡƒΠ³ΠΎΠ», Π·Π°Ρ‚Π΅ΠΌ Π²Π½ΠΈΠ· Π² Π»Π΅Π²Ρ‹ΠΉ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΈ, Π½Π°ΠΊΠΎΠ½Π΅Ρ†, снова Π²ΠΏΡ€Π°Π²ΠΎ.

    ΠœΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта с Z-ΠΎΠ±Ρ€Π°Π·Π½Ρ‹ΠΌ рисунком ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ эту Π½Π°ΡˆΡƒ ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡ΠΊΡƒ ΠΊ Ρ‡Ρ‚Π΅Π½ΠΈΡŽ, распрСдСляя всю Π²Π°ΠΆΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΏΠΎ Z-ΠΎΠ±Ρ€Π°Π·Π½ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΠ΅. Π›ΠΎΠ³ΠΎΡ‚ΠΈΠΏ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ размСщаСтся Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡƒΠ³Π»Ρƒ, поэтому ΠΎΠ½ рСгистрируСтся ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ.Напротив Π½Π΅Π³ΠΎ, Π² ΠΊΡ€Π°ΠΉΠ½Π΅ΠΌ ΠΏΡ€Π°Π²ΠΎΠΌ ΡƒΠ³Π»Ρƒ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ вмСстС с Π·Π°ΠΌΠ΅Ρ‚Π½Ρ‹ΠΌ ΠΏΡ€ΠΈΠ·Ρ‹Π²ΠΎΠΌ ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ.

    Π”ΠΈΠ°Π³ΠΎΠ½Π°Π»ΡŒΠ½Π°Ρ Ρ‡Π°ΡΡ‚ΡŒ Z-шаблона, ΠΎΡ…Π²Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‰Π°Ρ всю страницу свСрху Π²Π½ΠΈΠ·, — это мСсто, Π³Π΄Π΅ Π΄ΠΎΠ»ΠΆΠ½Π° Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°ΡŽΡ‰Π°Ρ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ информация. Π­Ρ‚ΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΡΡ‚ΠΈΡ‡ΡŒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Π΅ эффСкты ΠΈ Π»Π°ΠΊΠΎΠ½ΠΈΡ‡Π½ΡƒΡŽ строку тСкста, Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ ΡΡƒΡ‚ΡŒ Π²Π΅Π±-сайта.

    НиТняя Ρ‡Π°ΡΡ‚ΡŒ Z-ΠΎΠ±Ρ€Π°Π·Π½ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ ΠΊΡƒΠ»ΡŒΠΌΠΈΠ½Π°Ρ†ΠΈΠ΅ΠΉ всСго, Ρ‡Ρ‚ΠΎ Π΄ΠΎ сих ΠΏΠΎΡ€ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΠ»ΠΎ ΠΊ Π½Π΅ΠΉ.НСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, Π½Π°ΠΊΠ°ΠΏΠ»ΠΈΠ²Π°Π»ΠΈ Π»ΠΈ Π²Ρ‹ ΠΏΡ€Π΅Π΄Π²ΠΊΡƒΡˆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠΊΡƒΠΏΠΊΠΈ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π° ΠΈΠ»ΠΈ бронирования услуги, сСйчас самоС врСмя ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ посСтитСлСй сайта. ΠŸΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚Π΅ ΡΠ°ΠΌΡƒΡŽ Π²Π°ΠΆΠ½ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ с ΠΏΡ€ΠΈΠ·Ρ‹Π²ΠΎΠΌ ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ (CTA) Π² самом ΠΊΠΎΠ½Ρ†Π΅ Ρ„ΠΎΡ€ΠΌΡ‹ Z, побуТдая ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ.

    ИдСально для: страниц с высокой ΡΡ‚Π΅ΠΏΠ΅Π½ΡŒΡŽ Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌ объСмом письмСнной ΠΊΠΎΠΏΠΈΠΈ. Π¦Π΅Π»Π΅Π²Ρ‹Π΅ страницы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ слуТат для ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ Ρ†Π΅Π»ΠΈ конвСрсии, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ идСально подходят.

    02. ΠœΠ°ΠΊΠ΅Ρ‚ с F-ΠΎΠ±Ρ€Π°Π·Π½Ρ‹ΠΌ рисунком

    Подобно ΠΌΠ°ΠΊΠ΅Ρ‚Ρƒ с Z-ΠΎΠ±Ρ€Π°Π·Π½Ρ‹ΠΌ ΡƒΠ·ΠΎΡ€ΠΎΠΌ, этот Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ‚Π°ΠΊΠΆΠ΅ основан Π½Π° ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΌ Ρ€Π΅ΠΆΠΈΠΌΠ΅ сканирования страницы.На Π²Π΅Π±-сайтах, содСрТащих большС тСкста, ΠΌΡ‹, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, просматриваСм ΠΈΠ»ΠΈ Ρ‡ΠΈΡ‚Π°Π΅ΠΌ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Π² Ρ„ΠΎΡ€ΠΌΠ΅ F. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ вСрхняя Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Π°Ρ Ρ‡Π°ΡΡ‚ΡŒ страницы ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ ΠΎΡΠ½ΠΎΠ²Π½ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ нашСго внимания, Π° наши Π³Π»Π°Π·Π° ΠΈΠ΄ΡƒΡ‚ ΠΎΡ‚Ρ‚ΡƒΠ΄Π° Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ Π²Π½ΠΈΠ·, Π° лСвая сторона слуТит нашим фокусом.

    ΠŸΡ€ΠΈ использовании ΠΌΠ°ΠΊΠ΅Ρ‚Π° с F-ΠΎΠ±Ρ€Π°Π·Π½Ρ‹ΠΌ рисунком ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π²ΠΊΠ»Π°Π΄Ρ‹Π²Π°ΠΉΡ‚Π΅ рСсурсы Π² Π²Π΅Ρ€Ρ…Π½ΡŽΡŽ Ρ‡Π°ΡΡ‚ΡŒ страницы, Π³Π΄Π΅ посСтитСли ΠΌΠΎΠ³ΡƒΡ‚ Π·Π°Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ дольшС. ΠΠ°ΠΏΠΈΡˆΠΈΡ‚Π΅ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π²Π΅Π±-сайта, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ прСдставляСт ΠΎΡΡ‚Π°Π»ΡŒΠ½ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ страницы.Π­Ρ‚Π° вСрхняя Ρ‡Π°ΡΡ‚ΡŒ Ρ„ΠΈΠ³ΡƒΡ€Ρ‹ F ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΠΏΠΎΠ΄Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

    Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Π°Ρ линия F-шаблона Π² Π»Π΅Π²ΠΎΠΉ части страницы ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π° для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ тСкст Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΠΈΠ»ΠΈ элСмСнтов форматирования, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ ΠΈΠ»ΠΈ нумСрация.

    ИдСально для: Π’Π΅Π±-сайтов, Π² основном посвящСнных тСксту. НапримСр, ΠΏΡ€ΠΈ создании Π±Π»ΠΎΠ³Π° этот ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌ ΠΊΠ°ΠΊ для домашнСй страницы, Ρ‚Π°ΠΊ ΠΈ для ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… страниц сообщСний Π±Π»ΠΎΠ³Π°.

    03. ΠœΠ°ΠΊΠ΅Ρ‚ полноэкранного изобраТСния

    Π­Ρ‚ΠΎΡ‚ ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ нСбольшой Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ тСкста ΠΏΠΎΠ²Π΅Ρ€Ρ… ΠΈΠ·Π±Ρ€Π°Π½Π½ΠΎΠ³ΠΎ изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ являСтся большим ΠΈΠ»ΠΈ полноэкранным. Один Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ элСмСнт, Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½Π½Ρ‹ΠΉ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ, ΠΌΠΎΠΆΠ΅Ρ‚ привСсти ΠΊ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΌΡƒ ΠΈ Π·Π°Ρ…Π²Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌΡƒ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ домашнСй страницы. Он ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ слуТит для эффСктивной ΠΈ ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎΠΉ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ сообщСния.

    ΠšΡ€ΡƒΠΏΠ½Ρ‹Π΅ ΠΌΡƒΠ»ΡŒΡ‚ΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Ρ€Π°ΡΡΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎ вас ΠΈ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Π΅ΠΌ Π²Ρ‹ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚Π΅ΡΡŒ, — Π΄Π°ΠΆΠ΅ мСльком. Π‘Π°ΠΌ Π²ΠΈΠ·ΡƒΠ°Π» ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ‡Π΅ΠΌ ΡƒΠ³ΠΎΠ΄Π½ΠΎ, ΠΎΡ‚ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ Π΄ΠΎ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ ΠΈΠ»ΠΈ Π²ΠΈΠ΄Π΅ΠΎ.Π’ любом случаС ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ высокого качСства ΠΈ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ вашим услугам, ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Ρƒ ΠΈΠ»ΠΈ ΠΎΠ±Ρ‰Π΅ΠΉ атмосфСрС.

    Π’ этом Ρ‚ΠΈΠΏΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта полноэкранный Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ элСмСнт сопровоТдаСтся ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΎΠΉ строкой тСкста, ΠΏΠΎΡΡΠ½ΡΡŽΡ‰Π΅ΠΉ, Ρ‡Ρ‚ΠΎ это Π·Π° сайт. Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ ΡΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈΠ»ΠΈ броский слоган, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚Π΅ ΠΊΠ°ΠΊ бизнСс, Ρ‡Ρ‚ΠΎΠ±Ρ‹ посСтитСли Π±Ρ‹Π»ΠΈ Ρ€Π°Π΄Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС.

    НаконСц, этот ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ смотрится ΠΈ Π½Π° мобильной вСрсии Π²Π΅Π±-сайта.

    ИдСально для: Компаниям, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ хотят Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΡƒΡŽ Π½ΠΈΡˆΡƒ ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚.НапримСр, Π²Π΅Π±-сайты рСсторанов ΠΌΠΎΠ³ΡƒΡ‚ с Π³ΠΎΡ€Π΄ΠΎΡΡ‚ΡŒΡŽ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ΅ блюдо, Π° Π²Π΅Π±-сайты свадСб ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΡΡ‡Π°ΡΡ‚Π»ΠΈΠ²ΡƒΡŽ ΠΏΠ°Ρ€Ρƒ.

    04. Π Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ экрана

    Π Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ экрана — основная тСндСнция Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π Π°Π·Π΄Π΅Π»ΠΈΠ² экран ΠΏΠΎΠΏΠΎΠ»Π°ΠΌ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ, ΠΎΠ½ создаСт идСально симмСтричный баланс, Ρ‡Ρ‚ΠΎ являСтся Π²Π°ΠΆΠ½Ρ‹ΠΌ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π­Ρ‚ΠΎ Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½ΠΎΠ΅ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π½Π° Π΄Π²Π΅ части позволяСт ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ Ρ€Π°Π·Π΄Π΅Π»Ρƒ Π²Ρ‹Ρ€Π°ΠΆΠ°Ρ‚ΡŒ ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Ρ€Π°Π·Π½Ρ‹Π΅ ΠΈΠ΄Π΅ΠΈ — ΠΈΠ»ΠΈ, Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½ΠΎ, ΡΡΡ‹Π»Π°Ρ‚ΡŒΡΡ Π½Π° ΠΎΠ΄Π½Ρƒ ΠΈ Ρ‚Ρƒ ΠΆΠ΅ идСю с Π΄Π²ΡƒΡ… Ρ€Π°Π·Π½Ρ‹Ρ… Ρ‚ΠΎΡ‡Π΅ΠΊ зрСния.

    Π¨Π°Π±Π»ΠΎΠ½ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта, ΠΏΠΎΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΉ здСсь, прСдставляСт собой ΠΎΠ±Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ ΠΎΠΏΡ‹Ρ‚ с ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠ΅ΠΉ слСва ΠΈ тСкстом ΠΈ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΉ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠΉ справа. ΠœΠ°ΠΊΠ΅Ρ‚ позволяСт ΠΎΠ±Π΅ΠΈΠΌ сторонам ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π΄ΠΎΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Π°, Π° Π½Π΅ Π±ΠΎΡ€ΠΎΡ‚ΡŒΡΡ Π·Π° Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅. Π­Ρ‚ΠΎΡ‚ ΠΆΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ‚Π°ΠΊΠΆΠ΅ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π² Ρ‚Π΅Ρ… случаях, ΠΊΠΎΠ³Π΄Π° посСтитСлСй сайта просят Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΌΠ΅ΠΆΠ΄Ρƒ двумя ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½Ρ‹ΠΌΠΈ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°ΠΌΠΈ, Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ «муТскиС» ΠΈ «ТСнскиС» Π½Π° Π²Π΅Π±-сайтС элСктронной ΠΊΠΎΠΌΠΌΠ΅Ρ€Ρ†ΠΈΠΈ.

    Π§Ρ‚ΠΎΠ±Ρ‹ максимально ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ экрана, ΠΏΠΎΠ΄ΡƒΠΌΠ°ΠΉΡ‚Π΅ ΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ двиТСния, заставив ΠΊΠ°ΠΆΠ΄ΡƒΡŽ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρƒ экрана вСсти сСбя Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎ-Ρ€Π°Π·Π½ΠΎΠΌΡƒ.НапримСр, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ эффСкты ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ параллакса Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° ΠΎΠ΄Π½ΠΎΠΉ сторонС экрана. Π”Ρ€ΡƒΠ³ΠΎΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ — Ρ€Π°ΡΡˆΠΈΡ€ΠΈΡ‚ΡŒ этот ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΈ Π½Π° Π²Ρ‚ΠΎΡ€ΠΎΠΉ сгиб вашСго Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π½ΠΎ ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ мСстами содСрТимоС с Π΄Π²ΡƒΡ… сторон экрана для Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ интСрСса.

    ИдСально для: Π²Π΅Π±-сайтов, ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‰ΠΈΡ… Π΄Π²Π° сущСствСнно Ρ€Π°Π·Π½Ρ‹Ρ… Ρ‚ΠΈΠΏΠ° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, ΠΈΠ»ΠΈ Π²Π΅Π±-сайтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ хотят Ρ€Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½ΠΎ ΡΠΎΡ‡Π΅Ρ‚Π°Ρ‚ΡŒ ΠΏΠΈΡΡŒΠΌΠ΅Π½Π½ΡƒΡŽ копию ΠΈ изобраТСния. Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠ΅Π³ΠΌΠ΅Π½Ρ‚ΠΈΡ€ΡƒΡŽΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΏΠΎ возрасту, ΠΏΠΎΠ»Ρƒ ΠΈΠ»ΠΈ повСдСнию, Ρ…ΠΎΡ€ΠΎΡˆΠΎ подходят для этого ΠΌΠ°ΠΊΠ΅Ρ‚Π°.

    05. АсиммСтричный ΠΌΠ°ΠΊΠ΅Ρ‚

    Подобно ΠΌΠ°ΠΊΠ΅Ρ‚Ρƒ с Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ экраном, этот ΡΡ‚ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта Ρ‚Π°ΠΊΠΆΠ΅ раздСляСт экран. Волько Π½Π° этот Ρ€Π°Π· Π΄Π²Π΅ части Π½Π΅ Ρ€Π°Π²Π½Ρ‹ ΠΏΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ ΠΈ вСсу. Π­Ρ‚ΠΎΡ‚ сдвиг баланса с ΠΎΠ΄Π½ΠΎΠΉ стороны Π½Π° Π΄Ρ€ΡƒΠ³ΡƒΡŽ создаСт Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ΅ напряТСниС ΠΈ Π΄Π΅Π»Π°Π΅Ρ‚ страницу Π±ΠΎΠ»Π΅Π΅ Π΄ΠΈΠ½Π°ΠΌΠΈΡ‡Π½ΠΎΠΉ. Π­Ρ‚ΠΎ смСлый Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ слуТит ΠΌΠΎΡ‰Π½Ρ‹ΠΌ инструмСнтом для стимулирования ΠΈ удСрТания взаимодСйствия с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ.

    Π—Π° счСт Π½Π΅Ρ€Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½ΠΎΠ³ΠΎ распрСдСлСния ΠΌΠ°ΡΡˆΡ‚Π°Π±Π°, Ρ†Π²Π΅Ρ‚Π° ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΏΠΎ страницС Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ посСтитСлСй ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‰Π΅Π½ΠΎ Π½Π° ΠΎΠ΄Π½ΠΈ элСмСнты, Π° Π½Π΅ Π½Π° Π΄Ρ€ΡƒΠ³ΠΈΠ΅.Для этого ΠΏΡ€ΠΈΠ΄Π°ΠΉΡ‚Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ элСмСнтам больший Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ вСс, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ дСйствовали Π² качСствС фокусных Ρ‚ΠΎΡ‡Π΅ΠΊ.

    Π Π΅ΡˆΠΈΡ‚Π΅, ΠΊΠ°ΠΊΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ вашСго ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ ΡƒΠ³ΠΎΠ΄Π½ΠΎ, ΠΎΡ‚ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π° Π΄ΠΎ ΠΎΠ½Π»Π°ΠΉΠ½-Ρ„ΠΎΡ€ΠΌΡ‹, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ. Π—Π°Ρ‚Π΅ΠΌ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚Π΅ Π΅Π³ΠΎ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ высокий Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ контраст, ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½Π½Ρ‹Π΅ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π²ΠΈΠ΄Ρ‹ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π°ΠΊΡ†Π΅Π½Ρ‚Π°.

    ИдСально для: Π’Π΅Π±-сайтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ соврСмСнный ΠΈ ΠΈΠ½Π½ΠΎΠ²Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ Π²ΠΈΠ΄ ΠΈ заинтСрСсованы Π² ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡Π΅Π½ΠΈΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ.Π₯ΠΎΡ€ΠΎΡˆΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ — бизнСс-сайт ΠΈΠ»ΠΈ ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ дизайнСрского агСнтства.

    06. ΠœΠ°ΠΊΠ΅Ρ‚ Π² ΠΎΠ΄ΠΈΠ½ столбСц

    Π­Ρ‚ΠΎΡ‚ ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ всС Π΅Π³ΠΎ содСрТимоС Π² ΠΎΠ΄ΠΈΠ½ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ столбСц. Π­Ρ‚ΠΎ простой ΠΈ понятный Π΄ΠΈΠ·Π°ΠΉΠ½ (фактичСски, ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π½Π° этой страницС).

    Навигация здСсь Ρ‚Π°ΠΊΠΆΠ΅ проста для понимания — посСтитСли сразу ΡƒΠ·Π½Π°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΈΡ‚ΡŒ страницу Π²Π½ΠΈΠ· для получСния Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ. Однако Π΅ΡΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ Π²Π°ΠΆΠ½Ρ‹ΠΉ совСт ΠΏΠΎ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΏΠΎ Π²Π΅Π±-сайту, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ слСдуСт ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈ использовании этого ΠΌΠ°ΠΊΠ΅Ρ‚Π°.НС Π·Π°Π±ΡƒΠ΄ΡŒΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«Π’Π΅Ρ€Π½ΡƒΡ‚ΡŒΡΡ ΠΊ Π½Π°Ρ‡Π°Π»ΡƒΒ» ΠΈΠ»ΠΈ фиксированноС ΠΏΠ»Π°Π²Π°ΡŽΡ‰Π΅Π΅ мСню, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³Π»ΠΈ дальшС ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ ваш сайт.

    ΠŸΡ€ΠΈ использовании ΠΌΠ°ΠΊΠ΅Ρ‚Π° с ΠΎΠ΄Π½ΠΈΠΌ столбцом для сайтов с большим количСством тСкста Π½Π΅ Π·Π°Π±Ρ‹Π²Π°ΠΉΡ‚Π΅ врСмя ΠΎΡ‚ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Ρ€Π°Π·Π±ΠΈΠ²Π°Ρ‚ΡŒ тСкст Π½Π° изобраТСния, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΠΈΠ»ΠΈ ΠΏΠΎΠ΄Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ.

    ИдСально для: Π’Π΅Π±-сайты с Π΄Π»ΠΈΠ½Π½Ρ‹ΠΌ содСрТаниСм ΠΈΠ»ΠΈ Π²Π΅Π±-сайты, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‰ΠΈΠ΅ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π² хронологичСском порядкС. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ ΡƒΠ³ΠΎΠ΄Π½ΠΎ, ΠΎΡ‚ Π±Π»ΠΎΠ³ΠΎΠ² Π΄ΠΎ Π»Π΅Π½Ρ‚ ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтСй.

    07. Блочная ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ°

    Блочная ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ° Π²Π΅Π±-сайта ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΠ΅Ρ‚ нСсколько частСй ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π² ΠΎΠ΄ΠΈΠ½ гСомСтричСский Π΄ΠΈΠ·Π°ΠΉΠ½.ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Π±ΠΈΡ‚ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½ΠΎ ΠΏΠΎΠΌΠ΅Ρ‰Π΅Π½ Π² Ρ€Π°ΠΌΠΊΡƒ, элСмСнты Π½Π΅ Π·Π°Ρ‚ΠΌΠ΅Π²Π°ΡŽΡ‚ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Π°, Π° вмСсто этого ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ Π΅Π΄ΠΈΠ½Ρ‹ΠΉ Π²ΠΈΠ΄. КаТдоС ΠΎΠΊΠ½ΠΎ Π²Π΅Π΄Π΅Ρ‚ Π½Π° ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΡƒΡŽ Π²Π΅Π±-страницу, Π³Π΄Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС ΠΎ Ρ‚Π΅ΠΌΠ΅, которая ΠΈΡ… большС всСго интСрСсуСт.

    РСкомСндуСмая ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ° — Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ большой Π±Π»ΠΎΠΊ с ΠΏΡ€ΠΈΠ·Π½Π°ΠΊΠ°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠ»ΡƒΠΆΠΈΡ‚ΡŒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ, ΠΈ ΡΠ²ΡΠ·Π°Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ Π±Π»ΠΎΠΊΠΈ вмСстС. ПолС «Π˜Π·Π±Ρ€Π°Π½Π½Ρ‹Π΅» ΠΌΠΎΠΆΠ΅Ρ‚ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ страницы ΠΈ ΠΊΡ€Π°Ρ‚ΠΊΠΎΠ΅ объяснСниС Π΅Π΅ содСрТания. Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ совСт — ΠΎΡ‚ΠΎΠ±Ρ€Π°Ρ‚ΡŒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Π΅ эффСкты Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠ· ΠΊΠΎΡ€ΠΎΠ±ΠΎΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ вмСстС, создавая Ρ†Π΅Π»ΠΎΡΡ‚Π½ΡƒΡŽ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ‡Π½ΠΎΡΡ‚ΡŒ Π±Ρ€Π΅Π½Π΄Π°.

    Если Π²Ρ‹ создаСтС сайт Π½Π° Wix, галСрСя Wix Pro Gallery — ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ способ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚. Благодаря качСствСнному ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ ΠΏΠΎΠ»Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Π½Π°Π΄ своим Π±Π»ΠΎΡ‡Π½Ρ‹ΠΌ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠΌ, начиная с количСства столбцов ΠΈ строк ΠΈ заканчивая ΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»ΠΎΠΌ.

    ИдСально для: Π‘Π»ΠΎΠΆΠ½Ρ‹Π΅ структуры Π²Π΅Π±-сайтов с нСсколькими страницами. Π­Ρ‚ΠΎΡ‚ ΠΌΠ°ΠΊΠ΅Ρ‚ — Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ для ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ графичСского Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π³Π΄Π΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΏΠΎΠ»Π΅ Π²Π΅Π΄Π΅Ρ‚ Π½Π° ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΡƒΡŽ страницу ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

    08. ΠœΠ°ΠΊΠ΅Ρ‚ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ

    Как ΠΈ Π±Π»ΠΎΡ‡Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚, ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ для отобраТСния Ρ€Π°Π·Π½ΠΎΠΎΠ±Ρ€Π°Π·Π½ΠΎΠ³ΠΎ содСрТимого.Π­Ρ‚ΠΎΡ‚ ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта Π½Π΅ являСтся иСрархичСским, Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π½ΠΈ ΠΎΠ΄ΠΈΠ½ элСмСнт Π½Π΅ выдСляСтся срСди Π΄Ρ€ΡƒΠ³ΠΈΡ…, ΠΈ вся информация обрабатываСтся ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ.

    ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ всС ΠΊΠ°Ρ€Ρ‚Ρ‹ ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ (Ρ€Π°Π·ΠΌΠ΅Ρ€, ΡˆΡ€ΠΈΡ„Ρ‚ ΠΈ Ρ‚. Π”.), Π›Π΅Π³ΠΊΠΎ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π² ΠΊΠ°ΠΆΠ΄ΡƒΡŽ ΠΈΠ· Π½ΠΈΡ…. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ получаСтся ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ конструкция, подходящая для экранов любого Ρ€Π°Π·ΠΌΠ΅Ρ€Π°. Он Ρ‚Π°ΠΊΠΆΠ΅ обСспСчиваСт ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятный ΠΈ доступный просмотр, нСсмотря Π½Π° большой объСм ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, ΡƒΠ»ΡƒΡ‡ΡˆΠ°Ρ взаимодСйствиС с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ.

    ИдСально для: Π’Π΅Π±-сайтов с Π±ΠΎΠ³Π°Ρ‚Ρ‹ΠΌ содСрТаниСм.Π­Ρ‚ΠΎΡ‚ ΠΌΠ°ΠΊΠ΅Ρ‚ сайта идСально ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Π²ΠΈΠ΄Π΅ΠΎΠ±Π»ΠΎΠ³Π° ΠΈΠ»ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½Π°.

    09. ΠœΠ°ΠΊΠ΅Ρ‚ ΠΆΡƒΡ€Π½Π°Π»Π°

    Π’Π΄ΠΎΡ…Π½ΠΎΠ²Π»Π΅Π½Π½Ρ‹ΠΉ ΠΏΠ΅Ρ‡Π°Ρ‚Π½Ρ‹ΠΌΠΈ Π³Π°Π·Π΅Ρ‚Π°ΠΌΠΈ, ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта ΠΆΡƒΡ€Π½Π°Π»Π° основан Π½Π° сСткС ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… столбцов для создания слоТной Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΠΈ. Благодаря Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½ΠΎ, ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΆΡƒΡ€Π½Π°Π»Π° позволяСт Π²Π°ΠΌ ΠΎΡ‚Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚ основным Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌ Π½Π°Π΄ нСбольшими ΡΡ‚Π°Ρ‚ΡŒΡΠΌΠΈ.

    Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π»ΠΈΠ±ΠΎ ΠΏΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ (Π±ΠΎΠ»Π΅Π΅ ΠΊΡ€ΡƒΠΏΠ½Ρ‹Π΅ изобраТСния ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΠΏΠ΅Ρ€Π²Ρ‹ΠΌΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°ΡŽΡ‚ нашС Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅), Π»ΠΈΠ±ΠΎ ΠΏΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΡŽ элСмСнтов (ΡΡ‚Π°Ρ‚ΡŒΡ Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части страницы, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π²ΠΎΠΉ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΡ‹ Ρ‡ΠΈΡ‚Π°Π΅ΠΌ), Π»ΠΈΠ±ΠΎ ΠΏΠΎ количСству Π΄Π΅Ρ‚Π°Π»Π΅ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠΏΡ€ΠΈ условии (ΡΡ‚Π°Ρ‚ΡŒΡ с Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½ΠΎΠΉ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠ΅ΠΉ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Π΅Ρ‚ большС внимания, Ρ‡Π΅ΠΌ ΡΡ‚Π°Ρ‚ΡŒΡ с простым тСкстом).

    ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ ΠΆΡƒΡ€Π½Π°Π»Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π±Π΅Π³Π»Ρ‹ΠΉ рисунок F-ΠΎΠ±Ρ€Π°Π·Π½ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΡ‹, Ρ‡Ρ‚ΠΎ позволяСт ΡΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ объСм внимания Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»Π΅ΠΉ. Π‘ΠΎΡ‡Π΅Ρ‚Π°Π½ΠΈΠ΅ F-шаблона с Π±ΠΎΠ»Π΅Π΅ слоТной сСткой позволяСт Ρ€Π°Π·Π±ΠΈΡ‚ΡŒ большиС ΠΎΠ±ΡŠΠ΅ΠΌΡ‹ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ Π½Π° ΡƒΠ΄ΠΎΠ±ΠΎΠ²Π°Ρ€ΠΈΠΌΡ‹Π΅ чтСния, сохраняя ΠΏΡ€ΠΈ этом чувство порядка ΠΈ чистый, Π½Π΅Π·Π°Π³Ρ€ΠΎΠΌΠΎΠΆΠ΄Π΅Π½Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½.

    ИдСально для: Π’Π΅Π±-сайтов с большим объСмом ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ новостныС ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠΈ ΠΈΠ»ΠΈ Π±Π»ΠΎΠ³ΠΈ.

    10. ΠœΠ°ΠΊΠ΅Ρ‚ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Ρ… полос

    Π­Ρ‚ΠΎΡ‚ ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта Ρ€Π°Π·Π±ΠΈΠ²Π°Π΅Ρ‚ Π΄Π»ΠΈΠ½Π½ΡƒΡŽ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΡƒ Π²Π΅Π±-страницы Π½Π° полосы Π²ΠΎ всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ.ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ каТдая полоса Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΊΠ°ΠΊ полноэкранный Ρ€Π΅ΠΆΠΈΠΌ (ΠΈΠ»ΠΈ Π±Π»ΠΈΠ·ΠΊΠΈΠΉ ΠΊ полноэкранному), этот дивСрсифицированный ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π½ΠΎΠ²Ρ‹ΠΉ ΡΡŽΡ€ΠΏΡ€ΠΈΠ· ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°ΡŽΡ‚ страницу Π²Π½ΠΈΠ·.

    Π§Ρ‚ΠΎΠ±Ρ‹ каТдая полоска ΠΎΡ‚Π»ΠΈΡ‡Π°Π»Π°ΡΡŒ ΠΎΡ‚ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΉ, ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Π΅Π΅ с ΠΎΠ΄Π½ΠΎΠΉ Π½Π° Π΄Ρ€ΡƒΠ³ΡƒΡŽ. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΎΡ‚Ρ‚Π΅Π½ΠΎΠΊ, ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ ΠΎΡ‚ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ схСмы вашСго Π²Π΅Π±-сайта Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ полосС, ΠΈΠ»ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠ² изобраТСния Π½Π° ΠΎΠ΄Π½ΠΈΡ… полосках ΠΈ ΠΏΠΈΡΡŒΠΌΠ΅Π½Π½Ρ‹Π΅ ΠΊΠΎΠΏΠΈΠΈ Π½Π° Π΄Ρ€ΡƒΠ³ΠΈΡ…. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² эффСкты ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΊ полосС, Π²Ρ‹ смоТСтС ΠΏΡ€ΠΈΠ΄Π°Ρ‚ΡŒ этому ΠΌΠ°ΠΊΠ΅Ρ‚Ρƒ ΠΎΡ‰ΡƒΡ‰Π΅Π½ΠΈΠ΅ двиТСния ΠΈ Π³Π»ΡƒΠ±ΠΈΠ½Ρ‹.

    ИдСально для: Π’Π΅Π±-сайтов с Π΄Π»ΠΈΠ½Π½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ. Π­Ρ‚ΠΎΡ‚ ΠΌΠ°ΠΊΠ΅Ρ‚ особСнно ΡƒΠ΄ΠΎΠ±Π΅Π½, ΠΊΠΎΠ³Π΄Π° Ρ€Π΅Ρ‡ΡŒ ΠΈΠ΄Π΅Ρ‚ ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΎΠ΄Π½ΠΎΠΉ страницы. ВзглянитС Π½Π° эту ΡΡ‚Π°Ρ‚ΡŒΡŽ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ нСсколько ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² одностраничных Π²Π΅Π±-сайтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ эту Ρ‚Π΅Ρ…Π½ΠΈΠΊΡƒ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

    Автор: Π­Π΄Π΅Π½ Π‘ΠΏΠΈΠ²Π°ΠΊ

    ЭкспСрт ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ ΠΈ ΠΏΠΈΡΠ°Ρ‚Π΅Π»ΡŒ

    17 ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² вСрстки Π²Π΅Π±-сайтов Rock Solid Π½Π° 2019 Π³ΠΎΠ΄

    НСкоторыС ΠΈΠ· самых ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² ΡΠΎΡΡ€Π΅Π΄ΠΎΡ‚Π°Ρ‡ΠΈΠ²Π°ΡŽΡ‚ΡΡ Π½Π° создании Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π°. Π’ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π½Π° самом Π΄Π΅Π»Π΅ большС Π²Π΅Ρ‰Π΅ΠΉ, Ρ‡Π΅ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΌΠ°ΠΊΠ΅Ρ‚Π°, Π² этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ эти аспСкты Π½Π΅ Ρ€Π°ΡΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°ΡŽΡ‚ΡΡ.

    Π― собрал 17 Π²Π΅Π±-сайтов со всСго Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π° с фантастичСским ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ΠΌ. Π― расскаТу, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π»ΠΈ, ΠΊΠ°ΠΊΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΌΠ°ΠΊΠ΅Ρ‚ Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅.

    Π”Π°Π²Π°ΠΉΡ‚Π΅ Π½Π°Ρ‡Π½Π΅ΠΌ с Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π›ΠΎΡˆΠ°Π΄ΠΈ!

    Square — ΠΎΠ΄ΠΈΠ½ ΠΈΠ· самых ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ… Π²Π΅Π±-сайтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΊΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ Π²ΠΈΠ΄Π΅Π»ΠΈ. Когда Π²Ρ‹ Π²ΠΏΠ΅Ρ€Π²Ρ‹Π΅ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ Π²Π΅Π±-сайт, ΠΎΠ½ встрСтит вас Π·Π°Π²ΠΎΡ€Π°ΠΆΠΈΠ²Π°ΡŽΡ‰ΠΈΠΌ привСтствСнным Π²ΠΈΠ΄Π΅ΠΎ, Π° Π·Π°Ρ‚Π΅ΠΌ Π²Ρ‹ ΠΏΠΎΠΏΠ°Π΄Π΅Ρ‚Π΅ Π½Π° Π΅Π³ΠΎ домашнюю страницу, которая Π½Π°ΠΏΠΎΠ»Π½Π΅Π½Π° ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ элСмСнтами ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ, Π° Ρ‚Π°ΠΊΠΆΠ΅ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΉ ΠΌΡƒΠ·Ρ‹ΠΊΠΎΠΉ для развлСчСния.

    На этом Π²Π΅Π±-сайтС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ с Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ экраном. Один ΠΈΠ· самых Π½Π΅ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… элСмСнтов сайта — это Ρ†Π΅Π½Ρ‚Ρ€Π°Π»ΡŒΠ½ΠΎΠ΅ располоТСниС Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ мСню. Однако это ΠΈΠΌΠ΅Π΅Ρ‚ смысл, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° ссылку Π² мСню описания ΠΈ изобраТСния Ρ€Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π½Π° Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ экранС.

    Π­Ρ‚ΠΎ ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π° Лукаса Π–Π°Ρ€Π΄ΠΈΠ½Π°, Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π° ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса. ВмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ старый ΠΈ ΡƒΠ½Ρ‹Π»Ρ‹ΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ ΠΌΠ°ΠΊΠ΅Ρ‚Π°ΠΌ ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ, Лукас ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ эффСкт Π²ΠΎΠ΄Π½ΠΎΠΉ ряби Π½Π° Π²Π΅Π±-сайтС, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΄Π΅Π»Π°Π΅Ρ‚ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌ ΠΈ интСрСсным для просмотра.

    ΠžΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ сайт Π΄ΠΆΠ°Π·ΠΎΠ²ΠΎΠ³ΠΎ фСстиваля Π² ΠœΠΎΠ½Ρ‚Ρ€Ρ‘ 2019 Π½Π°ΠΏΠΎΠ»Π½Π΅Π½ развлСчСниями ΠΈ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΉ ΠΌΡƒΠ·Ρ‹ΠΊΠΎΠΉ. Как Π²Ρ‹ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚Π΅ с ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ взгляда, этот Π²Π΅Π±-сайт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΡΡ‚ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Π΄Π²ΡƒΡ…Ρ†Π²Π΅Ρ‚Π½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ эффСкт Π²ΠΎ всСм своСм Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΈ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ для ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π²Π΅Π±-сайта.

    Одной ΠΈΠ· особСнностСй, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Π΅Π»Π°ΡŽΡ‚ этот ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ, являСтся ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉΡΡ тСкст Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ связываСт Π²Π΅Π±-сайт ΠΈ Π΅Π³ΠΎ ΠΈΠ·Π±Ρ€Π°Π½Π½Ρ‹Π΅ изобраТСния вмСстС.ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π½Π° Π²Π΅Π±-сайтС Π΅ΡΡ‚ΡŒ мноТСство ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… элСмСнтов, ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… слайдСров ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ Π΅Π³ΠΎ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ СдинствСнным Π² своСм Ρ€ΠΎΠ΄Π΅.

    ΠšΡ€Π°ΡΠΈΠ²Ρ‹Π΅ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Π΅ эффСкты ΠΈ изобраТСния — Π½Π΅ СдинствСнныС ΠΎΡ‚Π»ΠΈΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ особСнности этого соврСмСнного ΠΈ элСгантного Π²Π΅Π±-сайта. Он Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ сСнсорный интСрфСйс просмотра Π²Π΅Π±-сайтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ ΠΏΠΎ Π²Π΅Π±-сайту, проводя Π²Π²Π΅Ρ€Ρ… ΠΈ Π²Π½ΠΈΠ· ΠΏΠΎ экрану ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ колСсо ΠΌΡ‹ΡˆΠΈ.

    ИспользованиС ΠΊΡ€ΡƒΠΏΠ½Ρ‹Ρ… ΠΏΠΎΠ»ΡƒΠΆΠΈΡ€Π½Ρ‹Ρ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² — ΠΎΠ΄ΠΈΠ½ ΠΈΠ· способов ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΊ Π²Π΅Π±-сайту с ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ.ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ это Π²Π΅Π±-сайт для творчСского Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°, мСньшСго Π²Ρ‹ Π½Π΅ ΠΎΠΆΠΈΠ΄Π°Π΅Ρ‚Π΅. Π₯отя этот сайт-ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ — это Π³ΠΎΡ€Π°Π·Π΄ΠΎ большС, Ρ‡Π΅ΠΌ просто большиС ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹. Он Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ мноТСство ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ… ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… элСмСнтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹Π΄Π΅Π»ΡΡŽΡ‚ вСсь ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта ΠΈΠ· ΠΎΠ±Ρ‰Π΅ΠΉ массы.

    Если Π²Ρ‹ ΠΏΠΎΠΊΠ»ΠΎΠ½Π½ΠΈΠΊ типографского Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… элСмСнтов, этот Π²Π΅Π±-сайт покаТСтся Π²Π°ΠΌ вСсьма ΡƒΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ. На Π²Π΅Π±-сайтС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ эффСкт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ оТивляСт Π΅Π³ΠΎ большиС Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ Π²Π΅Π±-сайта.

    Π‘Π°ΠΉΡ‚ ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ ΡŽΠΆΠ½ΠΎΠΊΠΎΡ€Π΅ΠΉΡΠΊΠΎΠ³ΠΎ агСнтства ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΎΠΏΡ‹Ρ‚Π° отличаСтся простым, Π½ΠΎ новаторским Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ. Он ΠΈΠΌΠ΅Π΅Ρ‚ полноэкранный ΠΌΠ°ΠΊΠ΅Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ бСспроблСмный просмотр Π²Π΅Π±-сайтов, дСмонстрируя всС ΠΈΡ… ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ страницС.

    МнС нравится Π²Π΅Π±-сайт Π ΡƒΠ΄ΠΈ ΠΈΠ·-Π·Π° мноТСства Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ…, Π½ΠΎ Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹ Π² Π΄ΠΈΠ·Π°ΠΉΠ½. Π­Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ ΠΌΠ°ΠΊΠ΅Ρ‚ интСрСсным ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°ΡŽΡ‰ΠΈΠΌ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅. ΠšΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹Π΅ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ довольно Ρ‡Π΅Ρ‚ΠΊΠΈΠ΅.На самом Π΄Π΅Π»Π΅, Π² Π½ΠΈΡ… Π½Π΅Ρ‚ Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ³ΠΎ, Π½ΠΎ нСбольшая анимация Π΄Π΅Π»Π°Π΅Ρ‚ Π΅Π³ΠΎ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ интСрСснСС.

    На страницах Ρ‚ΠΎΠ²Π°Ρ€ΠΎΠ² Π΅ΡΡ‚ΡŒ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π²ΠΈΠ΄Ρ‹ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΉ. Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΈΠ· Π½ΠΈΡ… — это ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Π°Ρ ΠΎΠ±ΡƒΠ²ΡŒ. Они Π½Π΅ ΠΏΠΎΡ…ΠΎΠΆΠΈ Π½Π° ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ. МнС это нравится, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ Ρ€Π°Π·Ρ€ΡƒΡˆΠ°Π΅Ρ‚ шаблон ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹Ρ… Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ практичСски Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΌ Π²Π΅Π±-сайтС, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ этот.

    МСня ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊ этот сайт ΠΈΠ·-Π·Π° Ρ‚ΠΎΠ³ΠΎ нСбольшого Π°Π±Π·Π°Ρ†Π° Π² Π½ΠΈΠΆΠ½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡƒΠ³Π»Ρƒ. Π’Ρ‹ большС Π½ΠΈΠ³Π΄Π΅ Π½Π΅ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ Ρ‚Π°ΠΊΠΎΠ³ΠΎ описания ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°.ΠŸΠΎΡ…ΠΎΠΆΠ΅ Π½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΡƒ статСй Π² Π³Π°Π·Π΅Ρ‚Π΅ ΠΈΠ»ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΆΡƒΡ€Π½Π°Π»Π΅.

    На сайтС тСкст Ρ‚Π°ΠΊ Π½Π΅ трактуСтся. Π§Π°Ρ‰Π΅ всСго тСкст Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ большС мСста, Ρ‡Π΅ΠΌ изобраТСния. Но Π½Π΅ здСсь, Π½Π° сайтС Stuff!

    Happiness Abscissa — это, мягко говоря, интСрСсный сайт. ΠœΠ°ΠΊΠ΅Ρ‚ ΠΈΡ… домашнСй страницы просто фантастичСский! Они ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ эффСкт параллакса с нСсколькими случайными изобраТСниями ΡƒΠΊΡ€Π°ΡˆΠ΅Π½ΠΈΠΉ ΠΈ нСсколькими изобраТСниями своих ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ².

    По ΠΌΠ΅Ρ€Π΅ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π²Π½ΠΈΠ· ΠΌΠ°ΠΊΠ΅Ρ‚ измСняСтся, ΠΈ Π² Π½Π΅ΠΌ отобраТаСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ тСкст, сопровоТдаСмый ΠΎΠ΄Π½ΠΈΠΌ ΡƒΠΊΡ€Π°ΡˆΠ΅Π½ΠΈΠ΅ΠΌ.Π”Π΅ΠΊΠΎΡ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ Ρ„ΠΎΡ€ΠΌΡ‹ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π·Π°Π±Π°Π²Π½Ρ‹!

    SALt — ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒ ΠΎΡ‡ΠΊΠΎΠ². Π˜Ρ… домашняя страница — ΠΎΠ΄Π½Π° ΠΈΠ· ΠΌΠΎΠΈΡ… Π»ΡŽΠ±ΠΈΠΌΡ‹Ρ… Π² этом спискС. ΠœΠ°ΠΊΠ΅Ρ‚ Ρ€Π°Π·Π±ΠΈΡ‚ Π½Π° нСсколько Π±Π»ΠΎΠΊΠΎΠ². МСня большС интСрСсуСт, Ρ‡Ρ‚ΠΎ Π²Π½ΡƒΡ‚Ρ€ΠΈ этих Π±Π»ΠΎΠΊΠΎΠ².

    Π­Ρ‚ΠΎΡ‚ Π΄ΠΈΠ·Π°ΠΉΠ½ слСдуСт ΡˆΠ°Π±Π»ΠΎΠ½Ρƒ: ΠΎΠ΄Π½ΠΎ высококачСствСнноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² сочСтании с нСбольшим Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠΌ тСкста. ΠšΠΎΠΌΠΏΠΎΠ·ΠΈΡ†ΠΈΡ изобраТСния ΠΈ тСкста Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Π° Ρ…ΠΎΡ€ΠΎΡˆΠΎ. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ Π±Π»ΠΎΠΊ слСдуСт этому ΠΏΡ€Π°Π²ΠΈΠ»Ρƒ, Π½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ изобраТСния ΠΈ тСкста ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π· Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ мСняСтся.

    На сайтС Π‘ΠΈΠ»Π»Π° Басса прСдставлСна ​​осСнняя коллСкция Calm. Вся страница Π² основном ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π° для всСх элСмСнтов ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΈ. Однако элСмСнты Π²Ρ‹Π»ΠΎΠΆΠ΅Π½Ρ‹ Π½Π΅Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½ΠΎΠΉ сСткой.

    Они всС Π΅Ρ‰Π΅ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ»ΠΈ ΠΌΠ΅Π½Π΅Π΅ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Ρ‹, Π½ΠΎ это Π½Π΅ обычная сСтка, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π²Ρ‹ ΠΏΡ€ΠΈΠ²Ρ‹ΠΊΠ»ΠΈ. Π­Ρ‚ΠΎ Ρ‚ΠΎΡ‡Π½ΠΎ Π½Π΅ ΠΏΠΎΡ…ΠΎΠΆΠ΅ Π½Π° ERDEM. Но такая Π½Π΅ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½Π½ΠΎΡΡ‚ΡŒ Π΄Π΅Π»Π°Π΅Ρ‚ Π΄ΠΈΠ·Π°ΠΉΠ½ интСрСсным ΠΈ Π·Π°ΠΏΠΎΠΌΠΈΠ½Π°ΡŽΡ‰ΠΈΠΌΡΡ.

    Π― Π±Ρ‹Π» влюблСн Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² Π² Everlane ΠΌΠ½ΠΎΠ³ΠΎ Π»Π΅Ρ‚.На этот Ρ€Π°Π· ΠΎΠ½ΠΈ сдСлали это снова, ΠΌΠ°ΠΊΠ΅Ρ‚ этой Ρ†Π΅Π»Π΅Π²ΠΎΠΉ страницы ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠΉ! Π’Π΅Ρ‰ΠΈ Π½Π°ΠΊΠ»Π°Π΄Ρ‹Π²Π°ΡŽΡ‚ΡΡ Π΄Ρ€ΡƒΠ³ Π½Π° Π΄Ρ€ΡƒΠ³Π°. Π’Π΅Ρ‰ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹.

    Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Ρ€Π°Π·Π΄Π΅Π»Π° ΠΈΠΌΠ΅Π΅Ρ‚ мноТСство отступов. Π’Π°ΠΊΠΆΠ΅ сущСствуСт Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ баланс ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΈ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌΠΈΡΡ Ρ€Π°Π·Π΄Π΅Π»Π°ΠΌΠΈ.

    Π― Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽ Wooden Dot Π² этот список ΠΏΠΎ Π΄Π²ΡƒΠΌ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°ΠΌ. Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ΅Π½, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π² Π½Π΅ΠΌ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΠΊΠ°ΠΊ ΠΏΠΎΠ»Π½ΠΎΡ€Π°Π·ΠΌΠ΅Ρ€Π½Ρ‹Π΅ изобраТСния, Ρ‚Π°ΠΊ ΠΈ сСтки ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Π­Ρ‚ΠΎ Π΄Π°Π΅Ρ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Π°Ρ€ΠΈΠ°Ρ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚Π°. Однако нСбольшоС использованиС ΠΏΡ€ΠΎΠΊΠ»Π°Π΄ΠΎΠΊ ΠΈ качСство Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ Π·Π°ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ ΠΌΠ°ΠΊΠ΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ.Π­Ρ‚ΠΎ Π±Ρ‹Π»ΠΎ Π±Ρ‹ Π½Π΅ Ρ‚Π°ΠΊ Ρ…ΠΎΡ€ΠΎΡˆΠΎ с Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ Ρ‚ΠΈΠΏΠ°ΠΌΠΈ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΉ.

    Вторая ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΌΠ½Π΅ Ρ‚Π°ΠΊ нравится этот Π΄ΠΈΠ·Π°ΠΉΠ½, Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ изобраТСния ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π³ΠΈΡ„ΠΊΠ°ΠΌΠΈ. Π’Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ это Π½Π° статичСском снимкС экрана, Π½ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ это Π½Π° Π΄Π΅ΠΉΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΌ сайтС. Π“ΠΈΡ„ΠΊΠΈ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚, ΠΊΠ°ΠΊ Π½Π° самом Π΄Π΅Π»Π΅ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ ΠΏΡ€Π΅Π΄ΠΌΠ΅Ρ‚Ρ‹ ΠΌΠ΅Π±Π΅Π»ΠΈ.

    Π­Ρ‚ΠΎ, бСзусловно, самый простой ΠΌΠ°ΠΊΠ΅Ρ‚ Π² этом спискС. Π­Ρ‚ΠΎ ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ Π½Π° этой страницС большС Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅Ρ‚, Π½ΠΎ это Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ интСрСсный сайт.

ΠžΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *