Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ Π²ΠΎ врСмя Π±ΡƒΠΌΠ° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств Π±Π΅Π· ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… вСрсий сайтов Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ ΠΎΠ±ΠΎΠΉΡ‚ΠΈΡΡŒ. Они стоят ΠΏΠ΅Ρ€Π΅Π΄ Π²Ρ‹Π±ΠΎΡ€ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π»ΡƒΡ‡ΡˆΠ΅: ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ сайт Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ ΠΊ просмотру с Π³Π°Π΄ΠΆΠ΅Ρ‚ΠΎΠ² ΠΈΠ»ΠΈ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ сайт? Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ с Π²Π°ΠΌΠΈ рассмотрим, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄ΡƒΡŽ ΠΈΠ· Ρ‚Π°ΠΊΠΈΡ… вСрсий, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΡ… прСимущСства ΠΈ нСдостатки.

Π˜Ρ‚Π°ΠΊ, сущСствуСт Ρ‚Ρ€ΠΈ способа построСния ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… вСрсий сайтов:

  1. Адаптивный Π΄ΠΈΠ·Π°ΠΉΠ½. Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π° сайта Π² Π΄Π°Π½Π½ΠΎΠΌ случаС Π½Π΅ мСняСтся, Π½ΠΎ CSS-Ρ„Π°ΠΉΠ» примСняСт Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΡ€Π°Π²ΠΈΠ»Π°, Π² зависимости ΠΎΡ‚ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, ΠΈ β€œΠ°Π΄Π°ΠΏΡ‚ΠΈΡ€ΡƒΠ΅Ρ‚ΡΡβ€ ΠΏΠΎΠ΄ Π½Π΅Π³ΠΎ.
  2. ΠžΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ сайт. Он размСщаСтся Π½Π° ΠΏΠΎΠ΄Π΄ΠΎΠΌΠ΅Π½Π΅ ΠΈΠ»ΠΈ Π² ΠΏΠΎΠ΄ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³Π΅, ΠΈΠ½ΠΎΠ³Π΄Π° основной ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ сайт ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΉ URL. Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ° HTML-ΠΊΠΎΠ΄Π° зависит ΠΎΡ‚ значСния user-agent («динамичСской Π²Ρ‹Π΄Π°Ρ‡ΠΈΒ»). Если URL Ρ€Π°Π·Π½Ρ‹ΠΉ, Ρ‚ΠΎ структура страниц ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ сохраняСтся, Π½ΠΎ Π½ΠΈΡ‡Ρ‚ΠΎ Π½Π΅ ΠΌΠ΅ΡˆΠ°Π΅Ρ‚ ΠΈΡ… ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ эти вСрсии сайтов хранятся Π² Ρ€Π°Π·Π½Ρ‹Ρ… ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³Π°Ρ…. ΠžΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ – ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ сайт Π’ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Π΅ (m.vk.com).
  3. Мобильная вСрсия сайта ΠΈΠ»ΠΈ RESS (Responsive Design + Server Side). Π­Ρ‚ΠΎΡ‚ ΠΌΠ΅Ρ‚ΠΎΠ΄ слоТный Π² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅, Π½ΠΎ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя прСимущСства ΠΊΠ°ΠΊ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Ρ‚Π°ΠΊ ΠΈ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ мобильного сайта.

ΠŸΡ€ΠΎΠ³Ρ€Π΅ΡΡΠΈΠ²Π½Ρ‹Π΅ Π²Π΅Π±-прилоТСния

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ сайта

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

Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π° Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π° ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅. Для этого ΠΌΠΎΠΆΠ½ΠΎ вСсь ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² ΠΎΠ΄Π½Ρƒ ΠΊΠΎΠ»ΠΎΠ½ΠΊΡƒ ΠΈ Π½Π΅ ΠΏΠ΅Ρ€Π΅Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠΉ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ ΡΠ½ΠΈΠΆΠ°Ρ‚ΡŒ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ сайта.

По Π΄Π»ΠΈΠ½Π΅ страницы ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ Π½Π΅Ρ‚. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ Π½Π° экранС Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒΡΡ тСзис Π·Π° тСзисом для удСрТания внимания.

Π’Π΅Π½Π΄Π΅Π½Ρ†ΠΈΠΈ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°

  1. Β«Mobile FirstΒ»

Π˜Π·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ создаСтся мобильная вСрсия, Π° Π·Π°Ρ‚Π΅ΠΌ основной сайт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ дополняСтся Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ элСмСнтами ΠΈ адаптируСтся ΠΏΠΎΠ΄ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€. Π’Π°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ примСняСтся, Ссли Π½Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ сайтов совпадаСт.

  1. Навигация

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

  1. Π Π°Π·ΠΌΠ΅Ρ€Ρ‹ экрана

Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ смартфонов ΠΈΠΌΠ΅ΡŽΡ‚ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ 320 пиксСлСй.Β  МногиС ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΡƒΡŽΡ‚ΡΡ Π½Π° 240. Π§Ρ‚ΠΎΠ±Ρ‹ всС элСмСнты Π±Ρ‹Π»ΠΈ Π² Ρ€Π°ΠΌΠΊΠ°Ρ… страницы, Π½ΡƒΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ 100% Π² Ρ‚Π°Π±Π»ΠΈΡ‡ΠΊΠ΅ стилСй CSS, Ρ‚ΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠΎΠ΄ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΏΠΎΠ΄ ΡˆΠΈΡ€ΠΈΠ½Ρƒ экрана.

АналитичСский инструмСнт Google Analytics Π΄Π°Π΅Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ самыС популярныС ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ устройства, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ вашСго сайта, ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ Π²Ρ‹Π²ΠΎΠ΄Ρ‹ ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΡ€Π°Π±ΠΎΡ‚ΠΊΠ΅ мобильной вСрсии.

  1. Вачскрин

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

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΏΠΎΠΊΠ° сайт ΠΏΠΎΠ΄Π³Ρ€ΡƒΠΆΠ°Π΅Ρ‚ страницу ΠΏΠΎ ссылкС, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ссылка Π½Π°ΠΆΠ°Ρ‚Π°, ΠΈ Π½Π΅ ΠΊΠ»ΠΈΠΊΠ°Ρ‚ΡŒ ΠΏΠΎ Π½Π΅ΠΉ нСсколько Ρ€Π°Π·. Для этого ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ ΠΏΠΎΠ΄ΠΎΠΉΠ΄ΡƒΡ‚ Π²Π΄Π°Π²Π»Π΅Π½Π½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΠ»ΠΈ ссылки, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠ΅Π½ΡΡŽΡ‚ Ρ†Π²Π΅Ρ‚, Ρ‡Ρ‚ΠΎ сигнализируСт ΠΎ принятии ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹.

Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ касаСтся экрана. ΠŸΡ€ΠΈ этом ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ Π² Π½Π΅ΠΌ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΠΊΡ€ΡƒΠΏΠ½Ρ‹Π΅ ΠΈ Ρ‡Π΅Ρ‚ΠΊΠΎ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Ρ‹.

мобильная вСрсия сайта Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню

  1. По возмоТности Π½ΡƒΠΆΠ½ΠΎ ΠΎΡ‚ΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ Π²Π²ΠΎΠ΄Π° тСкста.
  2. НС ΠΏΡ€Π΅Π½Π΅Π±Ρ€Π΅Π³Π°ΠΉΡ‚Π΅ Ρ‚Π°ΠΊΠΈΠΌΠΈ возмоТностями ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹, ΠΊΠ°ΠΊ функция Β«click to callΒ» ΠΈΠ»ΠΈ адрСс ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ Π² Π²ΠΈΠ΄Π΅ ссылки (Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° ΠΊΠ°Ρ€Ρ‚Ρ‹ с ΠΌΠ°Ρ€ΡˆΡ€ΡƒΡ‚ΠΎΠΌ).

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΡƒΡŽ вСрстку

ΠŸΡ€ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΎΠ΄ΠΈΠ½ HTML-ΠΊΠΎΠ΄ для всСх Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² экранов. ВсС элСмСнты ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ Π² зависимости ΠΎΡ‚ ΠΏΡ€Π°Π²ΠΈΠ», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ Π² Ρ„Π°ΠΉΠ»Π΅ CSS media.

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

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

ΠŸΡ€Π°Π²ΠΈΠ»Π° вСрстки

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

Часто сТатыС элСмСнты ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽΡ‚ΡΡ Π½Π΅Ρ€Π°Π·Π±ΠΎΡ€Ρ‡ΠΈΠ²Ρ‹ΠΌΠΈ, поэтому ΠΈΡ… Π½ΡƒΠΆΠ½ΠΎ пСрСнСсти Π² Π΄Ρ€ΡƒΠ³ΠΎΠ΅ мСсто, Π° Π»Π΅Π²Ρ‹ΠΉ Π±Π»ΠΎΠΊ мСню ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ Π·Π°ΠΌΠ΅Ρ‚Π½Ρ‹ΠΌ (Π·Π°ΠΊΡ€Π΅ΠΏΠΈΡ‚ΡŒ Π² Π½ΠΈΠΆΠ½Π΅ΠΉ части страницы послС основного ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°).

ΠŸΠΎΠΈΡΠΊΠΎΠ²ΡƒΡŽ строку Π»ΡƒΡ‡ΡˆΠ΅ Π·Π°ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΠΎΠΉ Β«ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ стСкло». А Π²Π΅Ρ€Ρ…Π½Π΅Π΅ мСню ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΌ. Π­Ρ‚ΠΎ обСспСчиваСт удобство использования ΠΈ экономит пространство.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Progressive Web Apps

Π›ΡŽΠ±ΡƒΡŽ Ρ€Π΅ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΡŽ Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‚ с ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… Π±Π»ΠΎΠΊΠΎΠ², Π° ΠΌΠ΅Π½Π΅Π΅ Π·Π½Π°Ρ‡ΠΈΠΌΡ‹Π΅ элСмСнты Π½Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚Β Π½Π° усмотрСниС Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°.

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

  • Π’Π΅ΡΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ находится Π² ΠΎΠ΄Π½ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ΅, Π½ΠΎ раздСляСтся Π½Π° Π±Π»ΠΎΠΊΠΈ с подсказками. Π’ Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ элСмСнты Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ;
  • Β«Π“Π°Ρ€ΠΌΠΎΡˆΠΊΠ°Β» — ΠΏΡ€ΠΈΠ΅ΠΌ, ΠΊΠΎΠ³Π΄Π° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ скрываСтся ΠΏΠΎΠ΄ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌΠΈ Π² Π²ΠΈΠ΄Π΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ.

ВсС Π±Π»ΠΎΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡƒΠ΄Π°Π»Π΅Π½Ρ‹ с мобильной вСрсии, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ внСсти Π² HTML-ΠΊΠΎΠ΄ ΠΈ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΈΡ… ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… устройствах.

Π§Ρ‚ΠΎ касаСтся Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ для Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ вСрстки, Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π°Π½Π°Π»ΠΈΡ‚ΠΈΠΊΡƒ самых популярных ΠΌΠΎΠ΄Π΅Π»Π΅ΠΉ Ρ€Π°Π·Π½Ρ‹Ρ… устройств ΠΈΠ»ΠΈ Π·Π°ΠΉΡ‚ΠΈ Π½Π° Firefox -> ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ мСню -> Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° -> Адаптивный Π΄ΠΈΠ·Π°ΠΉΠ½. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ растягиваниС с шагом ΠΏΠΎ 100 пиксСлСй.

Π£Π΄Π°Ρ‡Π½Ρ‹Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… сайтов:

  1. New Adventures In Web Design Conference 2012

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

New Adventures In Web Design Conference 201 Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ сайта

  1. Ribot

Ribot Π΄ΠΈΠ·Π°ΠΉΠ½ сайта для экранов всСх Π³Π°Π΄ΠΆΠ΅Ρ‚ΠΎΠ²

Π”ΠΈΠ·Π°ΠΉΠ½ этого сайта ΡƒΠ΄ΠΎΠ±Π΅Π½ для экранов всСх Π³Π°Π΄ΠΆΠ΅Ρ‚ΠΎΠ² ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ всю ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ ΠΈ сСрвисС.

  1. Adaptive Web Design – Ρ€Π΅ΠΊΠ»Π°ΠΌΠ½Ρ‹ΠΉ сайт ΠΊΠ½ΠΈΠ³ΠΈ, которая ΠΎΡ‚Π²Π΅Ρ‚ΠΈΡ‚ Π½Π° всС вопросы ΠΎΠ± Π°Π΄Π°ΠΏΡ‚Π°Ρ‚ΠΈΠ²Π½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅. ЕстСствСнно, Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ сайт Π½Π° Π²Ρ‹ΡΡˆΠ΅ΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅.

Adaptive Web Design – Ρ€Π΅ΠΊΠ»Π°ΠΌΠ½Ρ‹ΠΉ сайт ΠΊΠ½ΠΈΠ³ΠΈ ΠΎΠ± Π°Π΄Π°ΠΏΡ‚Π°Ρ‚ΠΈΠ²Π½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅

Если ΠΆΠ΅ массив Π΄Π°Π½Π½Ρ‹Ρ… ΠΎΠ³Ρ€ΠΎΠΌΠ΅Π½, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ смысл ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ сайт для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств.

Π Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅ΠΌ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ сайт ΠΏΠΎΠ΄ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ устройства

ΠžΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ сайт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ собствСнный HTML-ΠΊΠΎΠ΄. ИмСнно поэтому Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ сам Ρ€Π΅ΡˆΠ°Π΅Ρ‚, Π±ΡƒΠ΄Π΅Ρ‚ Π»ΠΈ сайт ΠΊΠΎΠΏΠΈΠ΅ΠΉ основного ΠΈΠ»ΠΈ сущСствСнно ΠΎΡ‚Π»ΠΈΡ‡Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ Π½Π΅Π³ΠΎ. Π’ любом случаС, слСдуСт ΠΏΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ ΠΏΠΎΠ·Π°ΠΈΠΌΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ основной ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΈ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ, ΠΊΠ°ΠΊΠΈΠ΅ элСмСнты стоит ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ, Π° ΠΊΠ°ΠΊΠΈΠ΅ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ.

ΠŸΠ΅Ρ€Π΅Π΄ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΎΠΉ Π²Π°ΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ запросы, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΈΡ‰ΡƒΡ‚ Π΄Π°Π½Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚. Π­Ρ‚Ρƒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π² Google Analytics Π² ΠΎΡ‚Ρ‡Π΅Ρ‚Π΅ «Поисковая оптимизация».

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ сайта ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΠΎ ΡƒΠΆΠ΅ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ шаблонам Π² конструкторах. Π­Ρ‚ΠΎ Π·Π°ΠΉΠΌΠ΅Ρ‚ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ мСньшС Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ.

ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²Π° ΠΈ нСдостатки этих способов Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ

ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²Π°ΠΠ΅Π΄ΠΎΡΡ‚Π°Ρ‚ΠΊΠΈ
Адаптивный дизайн●       Удобство Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ. Вся структура сайта подстраиваСтся ΠΏΠΎΠ΄ Ρ€Π°Π·Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ экранов;

●       НС Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΈΡΠ°Ρ‚ΡŒ сайт с нуля, достаточно внСсти измСнСния Π² CSS ΠΈ HTML;

●       ΠŸΡ€ΠΎΡΡ‚Π°Ρ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°;

●       НаличиС ΠΎΠ΄Π½ΠΎΠ³ΠΎ адрСса ΠΏΠΎΠ·ΠΈΡ‚ΠΈΠ²Π½ΠΎ сказываСтся Π½Π° ΠΏΡ€ΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΈ сайта.

 

●       Π Π°Π·Π½Ρ‹Π΅ Π·Π°Π΄Π°Ρ‡ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ПК;

●       МСдлСнная Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ°;

●       Адаптивный сайт нСльзя ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΈ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π½Π° ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ Π΄ΠΎΠΌΠ΅Π½.

ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ сайт●       Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½ сущСствуСт ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ ΠΎΡ‚ основной вСрсии, Π² Π½Π΅Π³ΠΎ Π»Π΅Π³ΠΊΠΎ Π²Π½ΠΎΡΠΈΡ‚ΡŒ измСнСния;

●       Π£Π΄ΠΎΠ±Π΅Π½ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ;

●       Быстрая Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ°;

●       Π•ΡΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° Π½Π° основной сайт.

●       Π Π°Π·Π½Ρ‹Π΅ адрСса дСсктопной ΠΈ мобильной вСрсии;

●       ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΡΡ‚ΡŒ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΏΡ€ΠΈ создании мобильного сайта приходится ΠΈΠ·Π±Π°Π²ΠΈΡ‚ΡŒΡΡ ΠΎΡ‚ части ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»Π°.

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

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

Учитывая Π½Ρ‹Π½Π΅ΡˆΠ½ΠΈΠ΅ Ρ‚Π΅Π½Π΄Π΅Π½Ρ†ΠΈΠΈ использования ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств, созданиС мобильной вСрсии просто Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ заходят Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚ Ρ‡Π΅Ρ€Π΅Π· Π³Π°Π΄ΠΆΠ΅Ρ‚Ρ‹. Если Ρƒ вас ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΉ Π±ΡŽΠ΄ΠΆΠ΅Ρ‚ ΠΈ Π²Ρ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Ρ‚Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ дСньги Π½Π° созданиС мобильного прилоТСния для вашСго сайта — компания Google Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅Ρ‚Β Π½ΠΎΠ²ΡƒΡŽ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΡŽ Progressive Web AppΒ  ΠΈΠ»ΠΈ прогрСссивныС Π²Π΅Π±-прилоТСния.

ВСхнология позволяСт ΡΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ качСства мобильного сайта ΠΈ прилоТСния. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π·Π°Ρ…ΠΎΠ΄ΠΈΡ‚ Π½Π° сайт ΠΈ сразу ΠΆΠ΅ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π½Π° Ρ€Π°Π±ΠΎΡ‡Π΅ΠΌ столС. Установка происходит ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΌΡƒ ΠΊΠ»ΠΈΠΊΡƒ (ярлык сохраняСтся Π½Π° Ρ€Π°Π±ΠΎΡ‡Π΅ΠΌ столС). PWA Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ мСста (Π΄ΠΎ 200 Кб) ΠΈ Π½Π΅ Ρ‚Ρ€Π°Ρ‚ΠΈΡ‚ рСсурсы мобильного устройства, Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ ΠΎΡ„Ρ„Π»Π°ΠΉΠ½ ΠΈ ΠΏΡ€ΠΈ ΠΏΠ»ΠΎΡ…ΠΎΠΉ Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-связи, автоматичСски обновляСт ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΏΡ€ΠΈ Π½Π°Π»ΠΈΡ‡ΠΈΠΈ Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π³ΠΎ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-соСдинСния, загруТаСтся ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ (!).

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