Π”ΠΈΠ·Π°ΠΉΠ½

Адаптивный Π΄ΠΈΠ·Π°ΠΉΠ½: Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ сайта для всСх устройств?

17.05.2018

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

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΈ ΠΏΠΎΡ‡Π΅ΠΌΡƒ адаптивная вСрстка сайта Π΄ΠΎΡ€ΠΎΠΆΠ΅?

{Β«idΒ»:166963,Β»urlΒ»:Β»https:\/\/vc.ru\/design\/166963-chto-takoe-adaptivnyy-dizayn-i-pochemu-adaptivnaya-verstka-sayta-dorozheΒ»,Β»titleΒ»:Β»\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d, \u0438 \u043f\u043e\u0447\u0435\u043c\u0443 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0442\u043a\u0430 \u0441\u0430\u0439\u0442\u0430 \u0434\u043e\u0440\u043e\u0436\u0435?Β»,Β»servicesΒ»:{Β«facebookΒ»:{Β«urlΒ»:Β»https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/vc.ru\/design\/166963-chto-takoe-adaptivnyy-dizayn-i-pochemu-adaptivnaya-verstka-sayta-dorozheΒ»,Β»short_nameΒ»:Β»FBΒ»,Β»titleΒ»:Β»FacebookΒ»,Β»widthΒ»:600,Β»heightΒ»:450},Β»vkontakteΒ»:{Β«urlΒ»:Β»https:\/\/vk.com\/share.php?url=https:\/\/vc.ru\/design\/166963-chto-takoe-adaptivnyy-dizayn-i-pochemu-adaptivnaya-verstka-sayta-dorozhe&title=\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d, \u0438 \u043f\u043e\u0447\u0435\u043c\u0443 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0442\u043a\u0430 \u0441\u0430\u0439\u0442\u0430 \u0434\u043e\u0440\u043e\u0436\u0435?Β»,Β»short_nameΒ»:Β»VKΒ»,Β»titleΒ»:Β»\u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435β€³,Β»widthΒ»:600,Β»heightΒ»:450},Β»twitterΒ»:{Β«urlΒ»:Β»https:\/\/twitter.com\/intent\/tweet?url=https:\/\/vc.ru\/design\/166963-chto-takoe-adaptivnyy-dizayn-i-pochemu-adaptivnaya-verstka-sayta-dorozhe&text=\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d, \u0438 \u043f\u043e\u0447\u0435\u043c\u0443 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0442\u043a\u0430 \u0441\u0430\u0439\u0442\u0430 \u0434\u043e\u0440\u043e\u0436\u0435?Β»,Β»short_nameΒ»:Β»TWΒ»,Β»titleΒ»:Β»TwitterΒ»,Β»widthΒ»:600,Β»heightΒ»:450},Β»telegramΒ»:{Β«urlΒ»:Β»tg:\/\/msg_url?url=https:\/\/vc.ru\/design\/166963-chto-takoe-adaptivnyy-dizayn-i-pochemu-adaptivnaya-verstka-sayta-dorozhe&text=\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d, \u0438 \u043f\u043e\u0447\u0435\u043c\u0443 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0442\u043a\u0430 \u0441\u0430\u0439\u0442\u0430 \u0434\u043e\u0440\u043e\u0436\u0435?Β»,Β»short_nameΒ»:Β»TGΒ»,Β»titleΒ»:Β»TelegramΒ»,Β»widthΒ»:600,Β»heightΒ»:450},Β»odnoklassnikiΒ»:{Β«urlΒ»:Β»http:\/\/connect.ok.ru\/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https:\/\/vc.ru\/design\/166963-chto-takoe-adaptivnyy-dizayn-i-pochemu-adaptivnaya-verstka-sayta-dorozheΒ»,Β»short_nameΒ»:Β»OKΒ»,Β»titleΒ»:Β»\u041e\u0434\u043d\u043e\u043a\u043b\u0430\u0441\u0441\u043d\u0438\u043a\u0438β€³,Β»widthΒ»:600,Β»heightΒ»:450},Β»emailΒ»:{Β«urlΒ»:Β»mailto:?subject=\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d, \u0438 \u043f\u043e\u0447\u0435\u043c\u0443 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0442\u043a\u0430 \u0441\u0430\u0439\u0442\u0430 \u0434\u043e\u0440\u043e\u0436\u0435?&body=https:\/\/vc.ru\/design\/166963-chto-takoe-adaptivnyy-dizayn-i-pochemu-adaptivnaya-verstka-sayta-dorozheΒ»,Β»short_nameΒ»:Β»EmailΒ»,Β»titleΒ»:Β»\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0447\u0442\u0443β€³,Β»widthΒ»:600,Β»heightΒ»:450}},Β»isFavoritedΒ»:false}

2614 просмотров

Ρ‡Ρ‚ΠΎ Π»ΡƒΡ‡ΡˆΠ΅ с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния SEO β€” SEO Π½Π° vc.ru

{Β«idΒ»:41305,Β»urlΒ»:Β»https:\/\/vc.ru\/seo\/41305-mobilnyy-sayt-ili-adaptivnaya-verstka-chto-luchshe-s-tochki-zreniya-seoΒ»,Β»titleΒ»:Β»\u041c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0439 \u0441\u0430\u0439\u0442 \u0438\u043b\u0438 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0430\u044f \u0432\u0451\u0440\u0441\u0442\u043a\u0430: \u0447\u0442\u043e \u043b\u0443\u0447\u0448\u0435 \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f SEOΒ»,Β»servicesΒ»:{Β«facebookΒ»:{Β«urlΒ»:Β»https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/vc.ru\/seo\/41305-mobilnyy-sayt-ili-adaptivnaya-verstka-chto-luchshe-s-tochki-zreniya-seoΒ»,Β»short_nameΒ»:Β»FBΒ»,Β»titleΒ»:Β»FacebookΒ»,Β»widthΒ»:600,Β»heightΒ»:450},Β»vkontakteΒ»:{Β«urlΒ»:Β»https:\/\/vk.com\/share.php?url=https:\/\/vc.ru\/seo\/41305-mobilnyy-sayt-ili-adaptivnaya-verstka-chto-luchshe-s-tochki-zreniya-seo&title=\u041c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0439 \u0441\u0430\u0439\u0442 \u0438\u043b\u0438 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0430\u044f \u0432\u0451\u0440\u0441\u0442\u043a\u0430: \u0447\u0442\u043e \u043b\u0443\u0447\u0448\u0435 \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f SEOΒ»,Β»short_nameΒ»:Β»VKΒ»,Β»titleΒ»:Β»\u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435β€³,Β»widthΒ»:600,Β»heightΒ»:450},Β»twitterΒ»:{Β«urlΒ»:Β»https:\/\/twitter.com\/intent\/tweet?url=https:\/\/vc.ru\/seo\/41305-mobilnyy-sayt-ili-adaptivnaya-verstka-chto-luchshe-s-tochki-zreniya-seo&text=\u041c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0439 \u0441\u0430\u0439\u0442 \u0438\u043b\u0438 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0430\u044f \u0432\u0451\u0440\u0441\u0442\u043a\u0430: \u0447\u0442\u043e \u043b\u0443\u0447\u0448\u0435 \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f SEOΒ»,Β»short_nameΒ»:Β»TWΒ»,Β»titleΒ»:Β»TwitterΒ»,Β»widthΒ»:600,Β»heightΒ»:450},Β»telegramΒ»:{Β«urlΒ»:Β»tg:\/\/msg_url?url=https:\/\/vc.ru\/seo\/41305-mobilnyy-sayt-ili-adaptivnaya-verstka-chto-luchshe-s-tochki-zreniya-seo&text=\u041c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0439 \u0441\u0430\u0439\u0442 \u0438\u043b\u0438 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0430\u044f \u0432\u0451\u0440\u0441\u0442\u043a\u0430: \u0447\u0442\u043e \u043b\u0443\u0447\u0448\u0435 \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f SEOΒ»,Β»short_nameΒ»:Β»TGΒ»,Β»titleΒ»:Β»TelegramΒ»,Β»widthΒ»:600,Β»heightΒ»:450},Β»odnoklassnikiΒ»:{Β«urlΒ»:Β»http:\/\/connect.ok.ru\/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https:\/\/vc.ru\/seo\/41305-mobilnyy-sayt-ili-adaptivnaya-verstka-chto-luchshe-s-tochki-zreniya-seoΒ»,Β»short_nameΒ»:Β»OKΒ»,Β»titleΒ»:Β»\u041e\u0434\u043d\u043e\u043a\u043b\u0430\u0441\u0441\u043d\u0438\u043a\u0438β€³,Β»widthΒ»:600,Β»heightΒ»:450},Β»emailΒ»:{Β«urlΒ»:Β»mailto:?subject=\u041c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0439 \u0441\u0430\u0439\u0442 \u0438\u043b\u0438 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0430\u044f \u0432\u0451\u0440\u0441\u0442\u043a\u0430: \u0447\u0442\u043e \u043b\u0443\u0447\u0448\u0435 \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f SEO&body=https:\/\/vc.ru\/seo\/41305-mobilnyy-sayt-ili-adaptivnaya-verstka-chto-luchshe-s-tochki-zreniya-seoΒ»,Β»short_nameΒ»:Β»EmailΒ»,Β»titleΒ»:Β»\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0447\u0442\u0443β€³,Β»widthΒ»:600,Β»heightΒ»:450}},Β»isFavoritedΒ»:false}

20 710 просмотров

ΠŸΡΡ‚ΡŒ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ распространённых ошибок Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° β€” Π”ΠΈΠ·Π°ΠΉΠ½ Π½Π° vc.ru

{Β«idΒ»:72250,Β»urlΒ»:Β»https:\/\/vc.ru\/design\/72250-pyat-naibolee-rasprostranennyh-oshibok-adaptivnogo-dizaynaΒ»,Β»titleΒ»:Β»\u041f\u044f\u0442\u044c \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0451\u043d\u043d\u044b\u0445 \u043e\u0448\u0438\u0431\u043e\u043a \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0430β€³,Β»servicesΒ»:{Β«facebookΒ»:{Β«urlΒ»:Β»https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/vc.ru\/design\/72250-pyat-naibolee-rasprostranennyh-oshibok-adaptivnogo-dizaynaΒ»,Β»short_nameΒ»:Β»FBΒ»,Β»titleΒ»:Β»FacebookΒ»,Β»widthΒ»:600,Β»heightΒ»:450},Β»vkontakteΒ»:{Β«urlΒ»:Β»https:\/\/vk.com\/share.php?url=https:\/\/vc.ru\/design\/72250-pyat-naibolee-rasprostranennyh-oshibok-adaptivnogo-dizayna&title=\u041f\u044f\u0442\u044c \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0451\u043d\u043d\u044b\u0445 \u043e\u0448\u0438\u0431\u043e\u043a \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0430β€³,Β»short_nameΒ»:Β»VKΒ»,Β»titleΒ»:Β»\u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435β€³,Β»widthΒ»:600,Β»heightΒ»:450},Β»twitterΒ»:{Β«urlΒ»:Β»https:\/\/twitter.com\/intent\/tweet?url=https:\/\/vc.ru\/design\/72250-pyat-naibolee-rasprostranennyh-oshibok-adaptivnogo-dizayna&text=\u041f\u044f\u0442\u044c \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0451\u043d\u043d\u044b\u0445 \u043e\u0448\u0438\u0431\u043e\u043a \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0430β€³,Β»short_nameΒ»:Β»TWΒ»,Β»titleΒ»:Β»TwitterΒ»,Β»widthΒ»:600,Β»heightΒ»:450},Β»telegramΒ»:{Β«urlΒ»:Β»tg:\/\/msg_url?url=https:\/\/vc.ru\/design\/72250-pyat-naibolee-rasprostranennyh-oshibok-adaptivnogo-dizayna&text=\u041f\u044f\u0442\u044c \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0451\u043d\u043d\u044b\u0445 \u043e\u0448\u0438\u0431\u043e\u043a \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0430β€³,Β»short_nameΒ»:Β»TGΒ»,Β»titleΒ»:Β»TelegramΒ»,Β»widthΒ»:600,Β»heightΒ»:450},Β»odnoklassnikiΒ»:{Β«urlΒ»:Β»http:\/\/connect.ok.ru\/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https:\/\/vc.ru\/design\/72250-pyat-naibolee-rasprostranennyh-oshibok-adaptivnogo-dizaynaΒ»,Β»short_nameΒ»:Β»OKΒ»,Β»titleΒ»:Β»\u041e\u0434\u043d\u043e\u043a\u043b\u0430\u0441\u0441\u043d\u0438\u043a\u0438β€³,Β»widthΒ»:600,Β»heightΒ»:450},Β»emailΒ»:{Β«urlΒ»:Β»mailto:?subject=\u041f\u044f\u0442\u044c \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0451\u043d\u043d\u044b\u0445 \u043e\u0448\u0438\u0431\u043e\u043a \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0430&body=https:\/\/vc.ru\/design\/72250-pyat-naibolee-rasprostranennyh-oshibok-adaptivnogo-dizaynaΒ»,Β»short_nameΒ»:Β»EmailΒ»,Β»titleΒ»:Β»\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0447\u0442\u0443β€³,Β»widthΒ»:600,Β»heightΒ»:450}},Β»isFavoritedΒ»:false}

2125 просмотров

Ρ‡Ρ‚ΠΎ это Ρ‚Π°ΠΊΠΎΠ΅ – Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½

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

Адаптивный Π΄ΠΈΠ·Π°ΠΉΠ½ сайта

ΠžΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° для сайта

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

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

ΠšΠ»Π°ΡΡΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΉ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° сайтов

ΠŸΠ΅Ρ€Π²Ρ‹ΠΌ массовым ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΎΠΌ ΠΊ созданию Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ интСрфСйса стала концСпция Β«Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°Β». Π Π°Π±ΠΎΡ‚Π°Π»Π° ΠΎΠ½Π° максимально просто. ПослС Π°Π½Π°Π»ΠΈΠ·Π° ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ дисплСя ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ растягивался ΠΈΠ»ΠΈ сТимался. Но тСхнология Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΡΠΏΡ€Π°Π²Π»ΡΠ»Π°ΡΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΠΌΠΈ ПК ΠΈ Π½ΠΎΡƒΡ‚Π±ΡƒΠΊΠΎΠ², Π½ΠΎ Π°Π΄Π΅ΠΊΠ²Π°Ρ‚Π½ΠΎ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΊ ΠΊΠ°Ρ€ΠΌΠ°Π½Π½Ρ‹ΠΌ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΌ устройствам ΡƒΠΆΠ΅ Π½Π΅ смогла. ΠœΠ½ΠΎΠ³ΠΎΠΊΡ€Π°Ρ‚Π½ΠΎΠ΅ сТатиС Π΄Π΅Π»Π°Π»ΠΎ тСкст ΠΈ изобраТСния слишком ΠΌΠ΅Π»ΠΊΠΈΠΌΠΈ для восприятия.

БСгодня ΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅, Π±ΠΎΠ»Π΅Π΅ ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½Ρ‹Π΅ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΈΠΊΠΈ создания Π²ΠΈΠ΄ΠΎΠ² Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

  • Адаптивный ΠΌΠ°ΠΊΠ΅Ρ‚.

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

  • ΠžΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚.

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

  • Π‘ΠΌΠ΅ΡˆΠ°Π½Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚.

    Если стоит Π·Π°Π΄Π°Ρ‡Π° ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ максимально Β«Π΄Ρ€ΡƒΠΆΠ΅Π»ΡŽΠ±Π½Ρ‹ΠΉΒ» ΠΊ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°ΠΌ дисплССв ΠΌΠ°ΠΊΠ΅Ρ‚ сайта, Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄. ΠŸΡ€ΠΈ Π΅Π³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°ΠΊΡ€Π΅ΠΏΠ»ΡΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… элСмСнтов Π² пиксСлях, Π° Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΡ€ΠΈΠ²ΡΠ·Ρ‹Π²Π°Ρ‚ΡŒ ΠΊ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π½ΠΎΠΉ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ.

ΠŸΡ€ΠΈ Π³Ρ€Π°ΠΌΠΎΡ‚Π½ΠΎΠΉ ΠΈ качСствСнной Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ любой ΠΈΠ· пСрСчислСнных Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… шаблонов ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΡ€Π°Π²ΠΎ Π½Π° сущСствованиС.

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ отличия ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΌΠΈ ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ сайтами

Адаптивный ΠΈ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ сайт: Π² Ρ‡Π΅ΠΌ Ρ€Π°Π·Π½ΠΈΡ†Π°

Адаптивный сайт

Π‘Π°ΠΉΡ‚ с ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ создаСтся Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… структурных ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ°Ρ…:

  • Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚;
  • ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚ видимости мСдиазапросов;
  • Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²Ρ‹ΠΉ графичСский ΠΈ ΠΌΡƒΠ»ΡŒΡ‚ΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚.

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

Адаптивный шаблон сайта создаСтся Π² соотвСтствии с Ρ„ΡƒΠ½Π΄Π°ΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠΎΠΌ mobile first. Π’ΠΎ Π΅ΡΡ‚ΡŒ сначала создаСтся сайт для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ впослСдствии услоТняСтся ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅Ρ‚ΡΡ Π΄ΠΎ «взрослой» дСсктопной вСрсии. РСализуСтся это ΠΏΡƒΡ‚Π΅ΠΌ «наращивания» Π½Π° Π±Π°Π·Ρƒ ΠΈΠ· HTML + CSS Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… элСмСнтов, созданных Π½Π° основС CSS + JS.

Как это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅

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

Адаптивный Π΄ΠΈΠ·Π°ΠΉΠ½ срСдствами ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹Ρ… шаблонов

Π’ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅, ΠΊΠ°ΠΊ извСстно, Π½Π΅Ρ‚ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ, Π½ΠΎ Π΅ΡΡ‚ΡŒ ΠΏΡ€ΠΎΠ²Π΅Ρ€Π΅Π½Π½Ρ‹Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ. МоТно ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹, ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΡƒΡΡΡŒ Π½Π° собствСнноС Π²ΠΈΠ΄Π΅Π½ΠΈΠ΅. Но Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ профСссионалов всС-Ρ‚Π°ΠΊΠΈ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΡƒΡŽΡ‚ΡΡ Π½Π° Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½Ρ‹Π΅ Π›ΡŽΠΊΠΎΠΌ ВроблСвски β€” Π³Π»Π°Π²Π½Ρ‹ΠΌ ΠΈΠ΄Π΅ΠΎΠ»ΠΎΠ³ΠΎΠΌ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΈ mobile first. Π’ΠΎΡ‚ ΠΊΠ°ΠΊΠΈΠΌ ΠΎΠ½ Π²ΠΈΠ΄Π΅Π» качСствСнный Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½.

  1. Mostly Fluid (самый Π³ΠΈΠ±ΠΊΠΈΠΉ)

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

  2. Column Drop (сброс ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ)

    Π­Ρ‚ΠΎΡ‚ Π²ΠΈΠ΄ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ. ΠŸΡ€ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΠΈ дисплСя ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ постСпСнно ΠΏΠ΅Ρ€Π΅Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²Ρ‹Π²Π°ΡŽΡ‚ΡΡ ΠΎΠ΄Π½Π° ΠΏΠΎΠ΄ ΠΎΠ΄Π½Ρƒ Π² Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΌ располоТСнии. Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Mostly Fluid здСсь ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Π΅ΠΌΡƒΡŽ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒΠ½ΡƒΡŽ Ρ‚ΠΎΡ‡ΠΊΡƒ для ΠΏΠ»Π°Π²Π½ΠΎΠΉ трансформации Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°.

  3. Layout Shifter (сдвиг ΠΌΠ°ΠΊΠ΅Ρ‚Π°)

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

  4. Tiny Tweaks (малСнькиС хитрости)

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

  5. Off Canvas (Π·Π° Π³Ρ€Π°Π½ΠΈΡ†Π°ΠΌΠΈ)

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

    НуТно ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ пСрСчислСнныС классичСскиС ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΌΠ΅ΠΆΠ΄Ρƒ собой, Ρ‡Ρ‚ΠΎ Π΄Π°Π΅Ρ‚ ΠΏΠΎΠ»Π½ΡƒΡŽ свободу Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌ.

ПодвСдСм ΠΈΡ‚ΠΎΠ³ΠΈ

ΠŸΡ€ΠΎΡΡ‚ΠΎ Π²Π΄ΡƒΠΌΠ°ΠΉΡ‚Π΅ΡΡŒ Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Ρ„Π°ΠΊΡ‚Ρ‹. ΠŸΠΎΠΈΡΠΊΠΎΠ²Ρ‹Π΅ систСмы строго Β«Π½Π°ΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚Β» Π½Π΅Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ сайты. Рост мобильного Ρ‚Ρ€Π°Ρ„ΠΈΠΊΠ° Π½Π΅ ΠΎΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ. ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΎΠ΄Π°ΠΆ становится всС большС. НуТно Π»ΠΈ Π² Ρ‚Π°ΠΊΠΈΡ… условиях Π΄Π΅Π»Π°Ρ‚ΡŒ ΡƒΠ΄ΠΎΠ±Π½Ρ‹Π΅ ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ сайты для всСх устройств? Вопрос риторичСский. Но Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ сайт β€” это Π½Π΅ Ρ‚Π°ΠΊ ΡƒΠΆ ΠΈ слоТно. А Π·Π½Π°Ρ‡ΠΈΡ‚, ваши ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ ΠΈΠΌΠ΅ΡŽΡ‚ всС ΡˆΠ°Π½ΡΡ‹ ΡΡ‚Π°Ρ‚ΡŒ ΡƒΡΠΏΠ΅ΡˆΠ½Ρ‹ΠΌΠΈ.

Π’Π΅Π³ΠΈ

Π’Π°ΠΌ Ρ‚Π°ΠΊΠΆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ интСрСсно

45+ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² сайтов с Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΠΈ вСрсткой

Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€-ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄Ρ‡ΠΈΠΊ SEOnews

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

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

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

Π₯отя сСгодня этот сСроватый статичный сСточный шаблон выглядит Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ скучным, сайт ΠΊΠΎΠ³Π΄Π°-Ρ‚ΠΎ ΠΏΡ€ΠΎΠΈΠ·Π²Ρ‘Π» Ρ„ΡƒΡ€ΠΎΡ€ благодаря своСму высококлассному Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΌΡƒ ΠΌΠ°ΠΊΠ΅Ρ‚Ρƒ.


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

Π‘Π°ΠΉΡ‚ посвящён Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π½ΠΎΠΉ ΠΈ дизайнСрской студии, поэтому Π½Π΅ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ, Ρ‡Ρ‚ΠΎ основной Π°ΠΊΡ†Π΅Π½Ρ‚ сдСлан Π½Π° фотографиях, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‚ Π½Π°Π²Ρ‹ΠΊΠΈ, ΠΎΠΏΡ‹Ρ‚ ΠΈ мастСрство ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ.


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

Π£ Stephen Caver пСрвоклассный сайт Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ касаСтся адаптивности. Π§Ρ‚ΠΎ Π² Π½Ρ‘ΠΌ особСнного? Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚Π²Π΅Ρ‚ΠΈΡ‚ΡŒ Π½Π° этот вопрос, Π½ΡƒΠΆΠ½ΠΎ просто Π²Π·Π³Π»ΡΠ½ΡƒΡ‚ΡŒ Π½Π° Π³Π»Π°Π²Π½ΡƒΡŽ страницу сайта. Она состоит ΠΈΠ·:

β€” ΠΎΠ³Ρ€ΠΎΠΌΠ½ΠΎΠ³ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π³Ρ€ΡƒΠ±ΠΎΠ³ΠΎ ΠΆΠΈΡ€Π½ΠΎΠ³ΠΎ ΡˆΡ€ΠΈΡ„Ρ‚Π°;

β€” Π½Π°Π±ΠΎΡ€Π° Π±ΠΎΠ»ΡŒΡˆΠΈΡ… Π±Π»ΠΎΠΊΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΄ΡƒΠ±Π»ΠΈΡ€ΡƒΠ΅Ρ‚ Π³Π»Π°Π²Π½ΠΎΠ΅ мСню свСрху;

β€” стандартный ΠΌΠ°ΠΊΠ΅Ρ‚ для Π±Π»ΠΎΠ³Π°;


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

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


Π‘Π°ΠΉΡ‚ дСмонстрируСт Ρ‚Ρ€Π°Π½ΡΡ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΈΠ· стандартной лСвостороннСй ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΆΡƒΡ€Π½Π°Π»Π° Π² стилС Π±Π»ΠΎΠ³Π° с бСсчислСнными Π°ΠΏΠΏΠ΅Ρ‚ΠΈΡ‚Π½Ρ‹ΠΌΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌΠΈ Π² ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΡƒΡŽ Π»Π΅Π½Ρ‚Ρƒ.


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

The Boston Globe являСтся прСкрасным ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΌΠ°Π½Π½ΠΎΠ³ΠΎ новостного Π²Π΅Π±-сайта, Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‰Π΅Π³ΠΎ ΠΏΠΎ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΌΡƒ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡƒ. Π’Π°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ Ρ…ΠΎΡ€ΠΎΡˆ для часто обновляСмых ΠΎΠ½Π»Π°ΠΉΠ½-ΠΆΡƒΡ€Π½Π°Π»ΠΎΠ².


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

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


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

На Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ сайт выглядит ΠΏΠΎ-Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΏΡ€ΠΎΠΈΠ·ΠΎΡˆΡ‘Π» Ρ€Π΅Π±Ρ€Π΅Π½Π΄ΠΈΠ½Π³ ΠΈ Ρ€Π΅Π΄ΠΈΠ·Π°ΠΉΠ½ сайта. 

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


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

9. Internet Images

Π­Ρ‚ΠΎ Π΅Ρ‰Ρ‘ ΠΎΠ΄ΠΈΠ½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ вСбсайта, ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ основан Π½Π° Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Ρ… сСкциях. Адаптация здСсь эффСктивно поддСрТиваСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ€Π°Π·Π½Ρ‹Ρ… Ρ†Π²Π΅Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ ΠΎΡ‚Π΄Π΅Π»ΡΡŽΡ‚ ΠΎΠ΄ΠΈΠ½ смысловой Π±Π»ΠΎΠΊ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ.


Π­Ρ‚ΠΎ простая, Π½ΠΎ мощная комбинация ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΏΠΎΠ²Ρ‹ΡΠΈΡ‚ΡŒ ΡƒΠ΄ΠΎΠ±ΠΎΡ‡ΠΈΡ‚Π°Π΅ΠΌΠΎΡΡ‚ΡŒ сайта Π½Π° Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… дСвайсах, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ…, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, вСсь ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» прСдставлСн Π² Π²ΠΈΠ΄Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΏΠΎΡ‚ΠΎΠΊΠ°, ΠΌΠΎΠ½ΠΎΡ‚ΠΎΠ½Π½ΠΎΡΡ‚ΡŒ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΏΠΎΠ½ΠΈΠΆΠ°Π΅Ρ‚ интСрСс Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»Π΅ΠΉ.

К соТалСнию, с апрСля 2015 Π³ΠΎΠ΄Π° сайт Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚.

Π’ этом случаС ΡΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡ‚ΡŒ сайта Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΊΠ°ΠΊ ΠΊ малСньким, Ρ‚Π°ΠΊ ΠΈ ΠΊ большим экранам, Π΄Π°Ρ‘Ρ‚ нСсколько прСимущСств:

β€” прСкрасная ΡƒΠ΄ΠΎΠ±ΠΎΡ‡ΠΈΡ‚Π°Π΅ΠΌΠΎΡΡ‚ΡŒ, нСзависимо ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° дСвайса;

β€” ΡΡ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΡΡ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… Π±Π»ΠΎΠΊΠΎΠ²;

β€” донСсСниС ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ Π΄ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ смартфонов ΠΈ ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚ΠΎΠ²;


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

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


Π”Π΅ΠΌΠΎ-страница Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ, ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ Π±Π»ΠΎΠΊ тСкста, ΡΠ΅Ρ‚ΠΎΡ‡Π½ΡƒΡŽ Π·ΠΎΠ½Ρƒ ΠΈ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ΠΉ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ элСмСнтов.

Команда дСмонстрируСт, ΠΊΠ°ΠΊ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ всСх Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ², Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π½Π° ΠΏΠΎΡ€Ρ‚Π°Ρ‚ΠΈΠ²Π½ΠΎΠΌ дСвайсС.

Naomi Atkinson ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΌΠΎΠ·Π°ΠΈΡ‡Π½Ρ‹ΠΉ ΡΡ‚ΠΈΠ»ΡŒ для Π³Π»Π°Π²Π½ΠΎΠΉ страницы. Π­Ρ‚ΠΎ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ Ρ…ΠΎΡ‡Π΅Ρ‚ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ яркоС ΠΎΠ½Π»Π°ΠΉΠ½-ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ.


Π­Ρ‚ΠΎΡ‚ сайт стоит ΡƒΠΏΠΎΠΌΡΠ½ΡƒΡ‚ΡŒ Π½Π΅ ΠΈΠ·-Π·Π° Π΅Π³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΅Ρ‰Ρ‘ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΡ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ, Π° ΠΈΠ·-Π·Π° Π΅Π³ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠΉ ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰Π΅ΠΉ, которая ΠΏΡ€ΠΎΡ€Π°Π±ΠΎΡ‚Π°Π½Π° ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠΌΠ½ΠΎ. Π”ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π³ΠΈΠ±ΠΊΡƒΡŽ сСтку, которая мСняСт Ρ€Π°Π·ΠΌΠ΅Ρ€, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅Ρ‚Π΅ ΠΈΠ»ΠΈ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚Π΅ ΠΎΠΊΠ½ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. Но это Π΅Ρ‰Ρ‘ Π½Π΅ всё: ΠΌΠ΅Ρ‚Π°ΠΌΠΎΡ€Ρ„ΠΎΠ·Ρ‹ ΡΠΎΠΏΡ€ΠΎΠ²ΠΎΠΆΠ΄Π°ΡŽΡ‚ΡΡ приятными эффСктами, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρƒ динамичности ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ.

Π§Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ± этом сайтС? Он, Π±Π΅Π· сомнСнья, ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ сильноС Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅ своим бСсподобным Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ. Команда Π½Π΅ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°Π»Π° сСбя Π² творчСствС, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ проявляСтся Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ… элСмСнтах.

ВСбсайт ΠΎΡ‡Π°Ρ€ΠΎΠ²Ρ‹Π²Π°Π΅Ρ‚ своим нСвСроятным ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ΠΌ Π² Ρ€Π΅Ρ‚Ρ€ΠΎ-стилС, нарисованными Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΡΠΌΠΈ, тСкстурированным Ρ„ΠΎΠ½ΠΎΠΌ ΠΈ ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠΉ. Всё это взаимодСйствуСт с тСкстом, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ особоС мСсто Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅.


Как Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅, ΠΊΠΎΠΌΠ°Π½Π΄Π΅ ΠΏΡ€ΠΈΡˆΠ»ΠΎΡΡŒ ΠΏΡ€ΠΈΠ½ΡΡ‚ΡŒ Π²ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ мноТСство Π΄Π΅Ρ‚Π°Π»Π΅ΠΉ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ свой сайт Π² ΠΊΠΎΠΌΡ„ΠΎΡ€Ρ‚Π½Ρ‹ΠΉ рСсурс, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΡƒΠ΄ΠΎΠ²Π»Π΅Ρ‚Π²ΠΎΡ€ΠΈΡ‚ Π½ΡƒΠΆΠ΄Ρ‹ всСх ΠΎΠ½Π»Π°ΠΉΠ½-Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»Π΅ΠΉ, нСзависимо ΠΎΡ‚ ΠΈΡ… дСвайса.

Π—Π΄Π΅ΡΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ сайта проявляСтся Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² стандартном сСтчатом ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ ΠΈ построчном располоТСнии ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ Π½Π° сайтС, Π½ΠΎ ΠΈ Π² ΠΈΠ½Ρ‚Ρ€ΠΎ-Π²ΠΈΠ΄Π΅ΠΎ, Π΄ΠΈΠ½Π°ΠΌΠΈΡ‡Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠ΅ ΠΈ мСню.


Команда Π²Ρ‹Π±Ρ€Π°Π»Π° элСгантный Π΄ΠΈΠ·Π°ΠΉΠ½, сопровоТдаСмый нСсколькими изящными элСмСнтами, ΠΈ свСтлый Ρ„ΠΎΠ½ Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π²ΠΈΠ΄Π΅Π½ тСкст, нСзависимо ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² экрана.

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


Π’Π°ΠΊ ΠΊΠ°ΠΊ сайт посвящён ΠΊΠΎΠ½Ρ„Π΅Ρ€Π΅Π½Ρ†ΠΈΠΈ ΠΏΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ, Π΅Π³ΠΎ создатСлям Π²Π°ΠΆΠ½ΠΎ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π² курсС всСх соврСмСнных Ρ‚Π΅Π½Π΄Π΅Π½Ρ†ΠΈΠΉ Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅.

ΠΠ΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ являСтся Π²Π°ΠΆΠ½Ρ‹ΠΌ качСством любого высококачСствСнного Ρ€Π΅ΠΊΠ»Π°ΠΌΠ½ΠΎΠ³ΠΎ сайта, создатСлям ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ извСстны ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌΡ‹ привлСчСния ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΈΡ‚Π΅Π»Π΅ΠΉ. Illy Issimo ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π³ΠΈΠ±ΠΊΡƒΡŽ сСтку, Ρ‡Ρ‚ΠΎΠ±Ρ‹:

β€” ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ сайт ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ;

β€” Ρ€Π°ΡΡˆΠΈΡ€ΠΈΡ‚ΡŒ Ρ†Π΅Π»Π΅Π²ΡƒΡŽ Π°ΡƒΠ΄ΠΈΡ‚ΠΎΡ€ΠΈΡŽ;

β€” ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΡ… ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ дСвайсы;


Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ эта рСкламная компания являСтся ΠΎΡ‡Π΅Π½ΡŒ ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎΠΉ.

Π­Ρ‚ΠΎΡ‚ Π²Π΅Π±-сайт большС фокусируСтся Π½Π° тСкстС, Ρ‡Π΅ΠΌ Π½Π° ΠΌΡƒΠ»ΡŒΡ‚ΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½ΠΎΠΌ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π΅. Π˜Ρ‚Π°ΠΊ, Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ сайта Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ Π±Π΅Π»Ρ‹ΠΉ Ρ„ΠΎΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ΠΈΠ³Ρ€Ρ‹ΡˆΠ½ΠΎ оттСняСт тСкст ΠΈ ΠΌΠΎΠ΄Π½Ρ‹Π΅ сСйчас Β«ΠΏΡ€ΠΈΠ·Ρ€Π°Ρ‡Π½Ρ‹Π΅Β» ΠΊΠ½ΠΎΠΏΠΊΠΈ.


Главная страница мСняСтся соотвСтствСнно измСнСниям Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, сайт ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ всС Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΎΡ‚ 1920px Π΄ΠΎ 240px, Ρ‡Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠ΄ΠΎΠ±Π½ΠΎ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π΅Π³ΠΎ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΠΈ явно Π·Π½Π°ΡŽΡ‚, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ дСвайсами для поиска ΠΊΠΎΠ½Ρ„Π΅Ρ€Π΅Π½Ρ†ΠΈΠΈ Π² ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅.

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


Earth Hour являСтся Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹ΠΌ ΠΈ комплСксным Π²Π΅Π±-сайтом, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π°ΠΏΠΎΠ»Π½Π΅Π½ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌ ΠΌΡƒΠ»ΡŒΡ‚ΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½Ρ‹ΠΌ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, это Π΅Ρ‰Ρ‘ ΠΈ прСкрасная ΠΈΠ½Ρ„ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠ°, которая ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ красивыС изобраТСния ΠΈ ΠΏΠ»Π°Π²Π½Ρ‹Π΅ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΊ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ посвящСн вСбсайт.


К соТалСнию, адаптация сайта Π½Π΅ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΏΡ€ΠΎΡ€Π°Π±ΠΎΡ‚Π°Π½Π°, нСбольшиС нСдостатки Π²ΠΈΠ΄Π½Ρ‹ ΡƒΠΆΠ΅ Π½Π° ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Π΅, Π½Π΅ говоря ΡƒΠΆΠ΅ ΠΎ дСвайсах мСньшСго Ρ€Π°Π·ΠΌΠ΅Ρ€Π°.

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


Π₯удоТСствСнная сторона ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ½Π°. Как насчёт способности Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΊ Ρ€Π°Π·Π½Ρ‹ΠΌ дСвайсам? Π—Π΄Π΅ΡΡŒ всё Ρ‚ΠΎΠΆΠ΅ Π·Π΄ΠΎΡ€ΠΎΠ²ΠΎ. Π₯отя вСбсайт достаточно статичСн, Π½Π΅Ρ‚ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΡΡŽΡ‰ΠΈΡ… эффСктов ΠΈΠ»ΠΈ ΠΊΠ°ΠΊΠΈΡ…-Π»ΠΈΠ±ΠΎ динамичСских особСнностСй, Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ обСспСчиваСт максимально ΡƒΠ΄ΠΎΠ±Π½ΠΎΠ΅ пользованиС сайтом.

Ribot – это ΠΏΡ€ΠΈΠΌΠ΅Ρ€ высококлассного Ρ†ΠΈΡ„Ρ€ΠΎΠ²ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ спСциализируСтся Π½Π° ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Π°Ρ… ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах.


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

Deren Keskin ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚Π½ΠΎ ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π» ΠΎΠ½Π»Π°ΠΉΠ½-ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ сайта, слСдуя ΠΏΡ€Π°Π²ΠΈΠ»Ρƒ, Ρ‡Ρ‚ΠΎ любой сайт, Π² Ρ‚ΠΎΠΌ числС ΠΈ Π±Π»ΠΎΠ³, Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡƒΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ Π² ΠΎΠΊΠ½ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.


Π’ΠΎ ΠΆΠ΅ самоС ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ ΠΈ для мобильной вСрсии сайта. Π”ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρƒ ΡƒΠ΄Π°Π»ΠΎΡΡŒ ΠΏΡ€ΠΈ этом ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ всС ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ ΠΈ ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΈ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚Π½Ρ‹Π΅ элСмСнты.

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


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

Π’ настоящСС врСмя этот сайт ΡƒΠΆΠ΅ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚. Главная страница содСрТит ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ…, ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Π΅ ссылки ΠΈ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ. Π­Ρ‚ΠΎ всСго лишь ΠΎΠ΄Π½Π° страница, Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°ΡŽΡ‰Π°Ρ ΠΎ ΠΏΡ€ΠΎΡˆΠ»ΠΎΠΉ активности сайта.


Однако Π½Π΅Ρ€Π°Π±ΠΎΡ‡Π΅Π΅ состояниС сайта Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ влияСт Π½Π° Π΅Π³ΠΎ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅. Π”Π°ΠΆΠ΅ сСйчас сайт модифицируСтся, Π² зависимости ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, с ΠΊΠ°ΠΊΠΎΠ³ΠΎ устройства ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ заходят Π½Π° Π½Π΅Π³ΠΎ.

dConstruct – это сайт, посвящСнный ΠΊΠΎΠ½Ρ„Π΅Ρ€Π΅Π½Ρ†ΠΈΠΈ ΠΈ Π²ΠΎΡ€ΠΊΡˆΠΎΠΏΠ°ΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π·Π°Ρ‚Ρ€Π°Π³ΠΈΠ²Π°ΡŽΡ‚ вопросы восприятия Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ ΠΈ ΠΊΡƒΠ»ΡŒΡ‚ΡƒΡ€Ρ‹. И хотя Π΄ΠΈΠ·Π°ΠΉΠ½ сайта достаточно ΠΏΡ€ΠΈΠΌΠΈΡ‚ΠΈΠ²Π΅Π½, ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ аспСкт Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΏΡ€ΠΎΡ€Π°Π±ΠΎΡ‚Π°Π½. Π˜Ρ‚Π°ΠΊ, главная страница ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Π΅Ρ‚ вашС Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΊ 3 ΠΌΠΎΠΌΠ΅Π½Ρ‚Π°ΠΌ:

β€” спикСрам ΠΈ прСподаватСлям Π²ΠΎΡ€ΠΊΡˆΠΎΠΏΠΎΠ²;

β€” описанию событий;

β€” спонсорам;

Π­Ρ‚ΠΎ Ρ‚Ρ€ΠΈ ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π°ΠΆΠ½Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ, ΠΈ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π²Ρ‹Π΄Π΅Π»ΡΡ‚ΡŒΡΡ.


Как ΠΏΠΎΠ΄Ρ€Π°Π·ΡƒΠΌΠ΅Π²Π°Π΅Ρ‚ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ сайта, ΠΎΠ½ спСциализируСтся Π½Π° вопросах, связанных с Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ. Π’ΠΎΡ‡Π½Π΅Π΅, это Ρ€Π΅ΠΊΠ»Π°ΠΌΠ½Ρ‹ΠΉ сайт, посвящённый ΠΊΠ½ΠΈΠ³Π΅, которая ΠΎΡ‚Π²Π΅Ρ‚ΠΈΡ‚ Π½Π° всС ваши вопросы.


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

Authentic Jobs – это ΠΎΠ½Π»Π°ΠΉΠ½-справочник, Π½Π°Ρ†Π΅Π»Π΅Π½Π½Ρ‹ΠΉ Π½Π° созданиС ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π° ΠΌΠ΅ΠΆΠ΄Ρƒ работодатСлями ΠΈ людьми, ΠΈΡ‰ΡƒΡ‰ΠΈΠΌΠΈ Ρ€Π°Π±ΠΎΡ‚Ρƒ. Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ прСдставлСна Π² Π²ΠΈΠ΄Π΅ списка, Ρ‡Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠ΄ΠΎΠ±Π½ΠΎ для обСспСчСния подвиТности сайта Π² Ρ€Π°ΠΌΠΊΠ°Ρ… Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.


Врансформация Π½Π΅ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ структура сайта Π½Π΅ мСняСтся. ИзмСнСнию подвСргаСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π±ΠΎΠΊΠΎΠ²ΠΎΠ΅ ΠΏΠΎΠ»Π΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ смСщаСтся Π² ниТнюю Ρ‡Π°ΡΡ‚ΡŒ страницы, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°Π²Π΅Ρ€Ρ…Ρƒ ΠΎΡΡ‚Π°Π²Π°Π»Π°ΡΡŒ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ваТная ΠΈ Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½Π°Ρ информация.

Π£ сайта Five Simple Steps ΠΎΡ‡Π΅Π½ΡŒ простая главная страница, Π³Π΄Π΅ Π²Ρ‹ Π½Π°ΠΉΠ΄Ρ‘Ρ‚Π΅ нСсколько ΠΏΡ€ΠΎΡ‰Π°Π»ΡŒΠ½Ρ‹Ρ… постов ΠΈ ссылки Π½Π° ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΎΡ‚ Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ Ρ€Π°Π½Π΅Π΅ занимался сайтом.


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

29. Splendid

Splendid – это ΠΎΠ½Π»Π°ΠΉΠ½-ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ, Π·Π°Π΄Π°Ρ‡Π΅ΠΉ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ являлась концСнтрация внимания ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π½Π° творчСствС. Π”ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ придСрТивался минималистичСского ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π°, Ρ‡Ρ‚ΠΎ Π²Ρ‹Π³ΠΎΠ΄Π½ΠΎ ΠΎΡ‚Π»ΠΈΡ‡Π°Π΅Ρ‚ Π΅Π³ΠΎ Ρ€Π°Π±ΠΎΡ‚Ρƒ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³ΠΈΡ… Π²Π΅Π±-сайтов с ΠΈΠ·ΠΎΡ‰Ρ€Ρ‘Π½Π½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ.


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

К соТалСнию, сСйчас Π²Π΅Π±-сайт Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚.

Взглянув Π½Π° ΠΎΠ½Π»Π°ΠΉΠ½-ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ Ryan O’Rourke, сразу понимаСшь, Ρ‡Ρ‚ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ руководствуСтся Ρ„Ρ€Π°Π·ΠΎΠΉ Β«ΠΊΡ€Π°Ρ‚ΠΊΠΎΡΡ‚ΡŒ сСстра Ρ‚Π°Π»Π°Π½Ρ‚Π°Β». Минимализм, ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΠ·ΠΌ ΠΈ снова минимализм… Π‘Π°ΠΉΡ‚ прСдставляСт собой всСго ΠΎΠ΄Π½Ρƒ страницу, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ содСрТится ΠΎΠ΄Π½ΠΎ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅, email ΠΈ нСбольшая Π³ΠΈΡ„ΠΊΠ°, Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‰Π°Ρ Ρ‚ΠΎ, Ρ‡Π΅ΠΌ Π΅Π³ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΡŒ занимаСтся.

НСсмотря Π½Π° это, Π΄Π°Π½Π½Ρ‹ΠΉ вСбсайт Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠΉ, Π³ΠΎΡ‚ΠΎΠ² ΠΊ использованию Π½Π° Π»ΡŽΠ±Ρ‹Ρ… устройствах.


FlexSlider – это Π»Ρ‘Π³ΠΊΠΈΠΉ jQuery слайдСр ΠΎΡ‚ WooThemes с простой сСмантичСской Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΎΠΉ ΠΈ ΠΎΠ³Ρ€ΠΎΠΌΠ½Ρ‹Ρ… количСством Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±Ρ‹Π» создан для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ изобраТСния Π½Π° любом ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΌ Π²Π°ΠΌ дСвайсС.


НСсмотря Π½Π° это, Π²Π΅Π±-страница, Ρ€Π΅ΠΊΠ»Π°ΠΌΠΈΡ€ΡƒΡŽΡ‰Π°Ρ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚, Π½Π΅ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Π°, ΠΊΠ°ΠΊ сам слайдСр. К соТалСнию, ΠΊΠΎΠΌΠ°Π½Π΄Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² упустила этот ΠΌΠΎΠΌΠ΅Π½Ρ‚.

Π’Π΅Π±-сайт El Sendero del Cacao ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ‚ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠΉ ΠΈ Ρ‚Ρ‘ΠΏΠ»ΠΎΠΉ спокойной атмосфСрой, которая создаётся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ мягких Ρ†Π²Π΅Ρ‚ΠΎΠ² ΠΈ эффСктных ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ.


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

Do Lectures прСдставляСт собой стандартный Π±Π»ΠΎΠ³, состоящий ΠΈΠ· Ρ‚Ρ€Ρ‘Ρ… ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΏΡƒΠ±Π»ΠΈΠΊΡƒΡŽΡ‚ΡΡ посты с ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌΠΈ. Π’Π΅Π±-сайт ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ старомодноС Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅ ΠΈΠ·-Π·Π° консСрвативного ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΈ отсутствия динамичСских эффСктов.


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

БСйчас ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΡƒΡ‡Π΅Π±Π½Ρ‹Π΅ завСдСния заводят свои Π²Π΅Π±-сайты. St Paul’s School Π½Π΅ являСтся ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ. Π‘Π°ΠΉΡ‚ ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ характСристиками:

β€” нСброскоС ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅;

β€” информативная главная страница;

β€” удобная навигация;

β€” ΠΈ, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, адаптация для ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚ΠΎΠ² ΠΈ смартфонов;


Π­Ρ‚ΠΎ прСкрасный сайт для ΡˆΠΊΠΎΠ»Ρ‹, ΠΎΡ‚Π»ΠΈΡ‡Π°ΡŽΡ‰ΠΈΠΉΡΡ приятным ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ΠΌ ΠΈ качСствСнным Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ.

Naomi Atkinson Design – это нСбольшая британская Π΄ΠΈΠ·Π°ΠΉΠ½-студия. Π‘Π°ΠΉΡ‚, состоящий ΠΈΠ· Π±Π»ΠΎΠΊΠΎΠ², ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ Π² минималистичСском стилС, Ρ‡Ρ‚ΠΎΠ±Ρ‹:

β€” ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΎ, Π½ΠΎ ΠΏΠΎΠ»Π½ΠΎ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ;

β€” ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΊ элСмСнтам ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ;

β€” ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΡƒΠ΄ΠΎΠ±Π½ΠΎΠ΅ пользованиС слуТбой ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ;


ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Ρ‚Π°ΠΊΠΎΠ΅ располоТСниС Π»Π΅Π³ΠΊΠΎ адаптируСтся ΠΊ Π»ΡŽΠ±ΠΎΠΌΡƒ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρƒ, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ это достаточно эффСктивноС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅.

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


Как ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ½ΡΡ‚ΡŒ ΠΈΠ· названия, это сайт посвящён Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΠΌ media queries, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΡ‡Π΅Π½ΡŒ популярны сСгодня срСди Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ².

ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, Π΄ΠΈΠ·Π°ΠΉΠ½, ΡΡ‚ΠΈΠ»ΡŒ ΠΈ сСмантика сайта достаточно ΠΏΡ€ΠΈΠΌΠΈΡ‚ΠΈΠ²Π½Ρ‹, Π½ΠΎ это Π½Π΅ Ρ‚Π°ΠΊ Π²Π°ΠΆΠ½ΠΎ. Настоящим достоинством этого сайта являСтся адаптивная сСтка, которая слуТит прСкрасным ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ Ρ‚Ρ€Π°Π½ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ сайт, состоящий ΠΈΠ· Ρ‡Π΅Ρ‚Ρ‹Ρ€Ρ‘Ρ… ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ, ΠΏΡ€ΠΈ использовании Π΅Π³ΠΎ Π½Π° Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… дСвайсах.


ВСбсайт Nordic Ruby Conference оставляСт Ρƒ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΎΡ‰ΡƒΡ‰Π΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΡ‚ΠΈ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ интСрСсноС. Π’Π°ΠΊΠΈΠ΅ характСристики, ΠΊΠ°ΠΊ простой Π΄ΠΈΠ·Π°ΠΉΠ½, тСкстурный Ρ„ΠΎΠ½, Ρ‡Ρ‘Ρ‚ΠΊΠΈΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ сайта, информативная домашняя страница ΡΠΎΠ·Π΄Π°ΡŽΡ‚ ΠΏΡ€ΠΈΡΡ‚Π½ΡƒΡŽ ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΡƒΡŽ атмосфСру.


Адаптивная сСтка, взятая Π·Π° основу Π²Π΅Π±-сайта, позволяСт ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΡŽ события доступной для ΡˆΠΈΡ€ΠΎΠΊΠΎΠΉ Π°ΡƒΠ΄ΠΈΡ‚ΠΎΡ€ΠΈΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ.

ВСбсайт Halifax Game Jam ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ сильноС Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅ своСй своСобразной, Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°ΡŽΡ‰Π΅ΠΉ Ρ„Π»Π°Π΅Ρ€ страницСй с психодСличСскими ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΡΠΌΠΈ ΠΈ ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌ Ρ„ΠΎΠ½ΠΎΠΌ.


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

Команда Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½ΠΎ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π»Π° Π²ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ соврСмСнныС Ρ‚Ρ€Π΅Π½Π΄Ρ‹, создавая этот сайт. Π—Π΄Π΅ΡΡŒ Π²Ρ‹ Π½Π°ΠΉΠ΄Ρ‘Ρ‚Π΅:

β€” Π³Π»Π°Π²Π½ΡƒΡŽ Π·ΠΎΠ½Ρƒ, которая привСтствуСт Π½ΠΎΠ²Ρ‹Ρ… посСтитСлСй;

β€” ΠΏΠ»Π°Π²Π½Ρ‹Π΅ эффСкты;

β€” ΡƒΠ΄ΠΎΠ±Π½ΡƒΡŽ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ;

β€” ΠΊΠ°Ρ‡Π΅ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ Π°Π΄Π°ΠΏΡ‚Π°Ρ†ΠΈΡŽ для Ρ€Π°Π·Π½Ρ‹Ρ… дСвайсов.


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

Π§Ρ‚ΠΎ касаСтся Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ, Π²Π΅Π±-сайт ΠΎΡ‚Π»ΠΈΡ‡Π°ΡŽΡ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ характСристики:

β€” Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ;

β€” seo оптимизация;

β€” ΠΊΡ€ΠΎΡΡΠ±Ρ€Π°ΡƒΠ·Π΅Ρ€Π½ΠΎΡΡ‚ΡŒ.


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

β€” соврСмСнный «плоский» Π΄ΠΈΠ·Π°ΠΉΠ½;

β€” ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½Π°Ρ организация ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ;

β€” Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚.


Kings Hill Cars – ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ сайт ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ такси. Π”ΠΎΠΌΠ°ΡˆΠ½ΡΡ страница содСрТит всю ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, которая ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΌΡƒ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Ρƒ.


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

8 Faces – это ΠΏΠ΅Ρ‡Π°Ρ‚Π½Ρ‹ΠΉ ΠΆΡƒΡ€Π½Π°Π», посвящённый Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π·Π°Π΄Π°Ρ‘Ρ‚ своим читатСлям всСго ΠΎΠ΄ΠΈΠ½ вопрос: «Если Π±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ всСго 8 Ρ€Π°Π·Π½Ρ‹Ρ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ², ΠΊΠ°ΠΊΠΈΠ΅ Π±Ρ‹ Π²Ρ‹ Π²Ρ‹Π±Ρ€Π°Π»ΠΈ?Β»

ΠžΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π²Π΅Π±-сайт ΠΆΡƒΡ€Π½Π°Π»Π° Π½Π°Ρ†Π΅Π»Π΅Π½ Π½Π° ΠΏΠΎΠΏΡƒΠ»ΡΡ€ΠΈΠ·Π°Ρ†ΠΈΡŽ издания ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ для этого:

β€” простой элСгантный Π΄ΠΈΠ·Π°ΠΉΠ½;

β€” ΡˆΠΈΡ€ΠΎΠΊΠΈΠΉ слайдСр изобраТСния;

β€” ΡΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡ‚ΡŒ сайта Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΊ экранам Π»ΡŽΠ±Ρ‹Ρ… дСвайсов.


Asbury Agile – это конфСрСнция для Π²Π΅Π±-профСссионалов. Как ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, Ссли событиС касаСтся Π²Π΅Π±-Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ для высококлассных профСссионалов, сайт Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ соврСмСнным трСбованиям ΠΈ Π±Ρ‹Ρ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ, Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ ΠΈ кроссбраузСрным.


AlsacrΓ©ations – это французскоС Π²Π΅Π±-агСнтство со стандартным ΠΎΠ½Π»Π°ΠΉΠ½ ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ.

И хотя ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ сайта выглядит старомодным, Π΅Π³ΠΎ создатСли Π²Ρ‹Π±Ρ€Π°Π»ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚, Ρ‡Ρ‚ΠΎ Π΄Π°Ρ‘Ρ‚ ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΌ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°ΠΌ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ Π½Π°Π΄Π΅ΠΆΠ΄Ρƒ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠΉ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ.


Sleepstreet – это сайт, ΠΎΡ‚Π»ΠΈΡ‡Π°ΡŽΡ‰ΠΈΠΉΡΡ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΌΠ°Π½Π½ΠΎΠΉ Π°Π΄Π°ΠΏΡ‚Π°Ρ†ΠΈΠ΅ΠΉ, ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ прСкрасно выглядит Π΄Π°ΠΆΠ΅ Π½Π° экранС мобильного Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π°. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π²Π΅Π±-сайт ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ достоинствами:

β€” Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠΌ для дСмонстрации Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ²;

β€” Ρ€Π΅Ρ‚Ρ€ΠΎ-стилСм, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ создаёт ΡƒΡŽΡ‚Π½ΡƒΡŽ домашнюю атмосфСру;

β€” ΠΌΡƒΠ»ΡŒΡ‚ΠΈΡΠ·Ρ‹ΠΊΠΎΠ²ΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ для максимального ΠΎΡ…Π²Π°Ρ‚Π° Π°ΡƒΠ΄ΠΈΡ‚ΠΎΡ€ΠΈΠΈ.

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

Адаптивный Π΄ΠΈΠ·Π°ΠΉΠ½ β€” ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ с нуля?

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

ИмСнно адаптивная вСрстка обСспСчиваСт автоматичСскоС ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π²Π΅Π±-страницы Π² соотвСтствии с характСристиками ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π³Π°Π΄ΠΆΠ΅Ρ‚Π°.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ адаптивная вСрстка?

Под этим понятиСм подразумСваСтся Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ дСйствий, Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹Ρ… Π½Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ страниц, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠ΄ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΏΠΎΠ΄ любоС Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ дисплСя. Π•Ρ‰Π΅ нСсколько Π»Π΅Ρ‚ Π½Π°Π·Π°Π΄ спСциалисты Π² Π΄Π°Π½Π½ΠΎΠΉ сфСрС создавали ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ страницы ΠΏΠΎΠ΄ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ΅ устройство. Но Π² 2010 Π³ΠΎΠ΄Ρƒ Π²ΠΎΠ·Π½ΠΈΠΊΠ»Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ° создания Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… страниц посрСдством JavaScript. БСгодня для создания адаптивная сайтов Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ HTML5 ΠΈ CCS3.

НазначСниС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта

Π Π°Π·ΠΎΠ±Ρ€Π°Π²ΡˆΠΈΡΡŒ с Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ сайт, стоит ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΎ Π΅Π³ΠΎ Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΈ. Он ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… Π·Π°Π΄Π°Ρ‡:

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

Π§Ρ‚ΠΎ Π»ΡƒΡ‡ΡˆΠ΅: мобильноС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ сайт?

ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ прилоТСния, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… дублируСтся ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ с основного Π²Π΅Π±-сайта – это прСкрасноС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ адаптивности. Но ΠΈ Ρ‚Π°ΠΊΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ†Π΅Π»Ρ‹ΠΉ ряд минусов:

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

Π£ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π΅ΡΡ‚ΡŒ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ нСдостатки. НапримСр, отсутствиС Ρ‚ΠΎΡ‡Π½Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ… ΠΎ показатСлях посСщаСмости рСсурса. Π”Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Ρ‚Ρ€Π°Ρ„ΠΈΠΊ основного сайта ΠΈ прилоТСния Π½Π΅ суммируСтся. Π‘Π»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Π²Π»Π°Π΄Π΅Π»Π΅Ρ† сайта Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ‚ΠΎΡ‡Π½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ популярности своСго рСсурса.

Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ – интСграция ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. ΠŸΡ€ΠΈ Π½Π°Π»ΠΈΡ‡ΠΈΠΈ прилоТСния Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Ρƒ сайта стоит Π±Ρ‹Ρ‚ΡŒ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΌ ΠΊ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ инвСстициями, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ΠΌ для синхронизации ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. К Ρ‚ΠΎΠΌΡƒ ΠΆΠ΅ синхронизация ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ² – это сущСствСнныС Π·Π°Ρ‚Ρ€Π°Ρ‚Ρ‹ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π΄Π΅Π½Π΅Π³, Π½ΠΎ ΠΈ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ.

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ сайт с нуля

Π Π°Π·ΠΎΠ±Ρ€Π°Π²ΡˆΠΈΡΡŒ с Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ адаптивная вСрстка, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΡ‚ΡŒ ΠΊ созданию сайта, Π³ΠΎΡ‚ΠΎΠ²ΠΎΠ³ΠΎ ΠΊ Ρ€Π°Π±ΠΎΡ‚Π΅ Π½Π° Π»ΡŽΠ±Ρ‹Ρ… соврСмСнных устройствах.

Π˜Π½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΡ для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ… вСбмастСров, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚:

  • Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° сайта для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств;
  • ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π³ΠΈΠ±ΠΊΠΈΡ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ;
  • использованиС Π³ΠΈΠ±ΠΊΠΈΡ… ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ²;
  • ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ мСдиазапросов.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта с нуля прСдусматриваСт, Ρ‡Ρ‚ΠΎ Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Ρ‚Π°ΠΊΠΈΠ΅ Π²ΠΈΠ΄Ρ‹ шаблонов:

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

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π½ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· пСрСчислСнных Π²ΠΈΠ΄ΠΎΠ² ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π½Π΅ являСтся ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ΠΌ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΏΡ€ΠΈ Π²Ρ‹Π±ΠΎΡ€Π΅ подходящСго Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° всСгда стоит ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ особСнности ΠΈ возмоТности Π²Π΅Π±-рСсурса.

Адаптивная вСрстка: Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ дСйствий

Адаптивная вСрстка сайта с нуля прСдусматриваСт ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ HTML5 ΠΈ CSS3. Π―Π·Ρ‹ΠΊ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ HTML5 ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для указания мСсторасполоТСния Π΄Π΅Ρ‚Π°Π»Π΅ΠΉ страницы. CSS3 ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для указания Ρ‚Π°ΠΊΠΈΡ… ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ², ΠΊΠ°ΠΊ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ элСмСнта Π² соотвСтствии с Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ экрана ΠΈ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚ Π·Π°Π½ΠΈΠΌΠ°Π΅ΠΌΠΎΠ³ΠΎ пространства. ΠšΠ»Π°ΡΡΡ‹, созданныС CSS3, ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ Π² HTML-Ρ‚Π΅Π³Π°Ρ…. Благодаря этому, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ Π² соотвСтствии с Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ экрана.

Π˜Ρ‚Π°ΠΊ, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° начинаСтся с создания простого изобраТСния, ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½ΠΎΠ³ΠΎ для ΠΏΠΎΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π³ΠΎ увСличСния:

ИмСнно Ρ‚Π°ΠΊ создаСтся ΠΎΠ±ΠΎΠ»ΠΎΡ‡ΠΊΠ° для дальнСйшСй ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ. Π”Π°Π»Π΅Π΅ Π½ΡƒΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹:

На ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ этапС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ изобраТСния img. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ этого ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒ всС пространство экрана любого Ρ€Π°Π·ΠΌΠ΅Ρ€Π°.

Настройка ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… элСмСнтов

Разрабатывая Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ сайт с нуля, Ρ‚Π°ΠΊΠΆΠ΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ·Π°Π±ΠΎΡ‚ΠΈΡ‚ΡŒΡΡ ΠΎ настройкС ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… элСмСнтов:

    • Π¨Π°ΠΏΠΊΠΈ сайта. Π’ Β«Ρ…Π΅Π΄Π΅Ρ€Π΅Β» Π½ΡƒΠΆΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ элСмСнты: Π»ΠΎΠ³ΠΎ (<a class=Β»logoΒ»>), ΠΊΠ½ΠΎΠΏΠΊΡƒ скрытия мСню (
    • Π‘Π»ΠΎΠΊΠ° с тСкстовым ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ. Для обСртывания тСкста стоит ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ элСмСнт:
      .
    • Π‘ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ. Для этого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Ρ‚Π΅Π³
      .
    • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Π° . Π­Ρ‚ΠΎΡ‚ ΠΊΠΎΠ΄ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² Ρ‚Π΅Π»ΠΎ страницы. Он обСспСчиваСт ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ высоты мСню ΠΈ ΠΏΠΎΠ΄Π³ΠΎΠ½ΠΊΡƒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΏΠΎΠ΄ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ экрана.

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ΠΌΠΈΠ½ΠΈ-Π³Π°Π»Π΅Ρ€Π΅ΠΈ

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

Для обСспСчСния возмоТности взаимодСйствия ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ с Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΠΌΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS3:

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


Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π½ΠΎΠ²ΠΈΡ‡ΠΊΡƒ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ?

Π”Π°ΠΆΠ΅ ΠΏΡ€ΠΈ условии, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π½ΠΈΠΊΠΎΠ³Π΄Π° Ρ€Π°Π½ΡŒΡˆΠ΅ Π½Π΅ Π±Ρ‹Π»ΠΈ связаны с созданиСм сайтов β€” Ρƒ вас Π΅ΡΡ‚ΡŒ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ инструмСнт для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ качСствСнный, соврСмСнный Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ своСго Π»ΠΈΡ‡Π½ΠΎΠ³ΠΎ сайта. ΠŸΡ€ΠΎΡΡ‚ΠΎ Π·Π°Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΡƒΠΉΡ‚Π΅ΡΡŒ Π² конструкторС сайтов FO.ru β€” ΠΏΠΎΠ΄Π±Π΅Ρ€ΠΈΡ‚Π΅ шаблон ΠΈ Π·Π°Π½ΠΈΠΌΠ°ΠΉΡ‚Π΅ΡΡŒ Π½Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ сайта качСствСнным ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ. ΠœΡ‹ ΡƒΠΆΠ΅ ΠΏΠΎΠ·Π°Π±ΠΎΡ‚ΠΈΠ»ΠΈΡΡŒ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ шаблон, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ прСдлагаСтся нашим ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π½Π° Π²Ρ‹Π±ΠΎΡ€ β€” Π±ΡƒΠ΄Π΅Ρ‚ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΈΠ· устройств.

Адаптивный Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΡ€ΠΎΡ‚ΠΈΠ² Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ | Interaction Design Foundation (IxDF)

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

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

Автор / ΠŸΡ€Π°Π²ΠΎΠΎΠ±Π»Π°Π΄Π°Ρ‚Π΅Π»ΡŒ: Π‘Ρ‚Π΅Ρ„Π°Π½ΠΈ Π’Π°Π»ΡŒΡ‚Π΅Ρ€. Условия авторских ΠΏΡ€Π°Π² ΠΈ лицСнзия: CC BY-SA 3.0

БущСствуСт опрСдСлСнная ΠΏΡƒΡ‚Π°Π½ΠΈΡ†Π° Π² ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΈ Ρ€Π°Π·Π½ΠΈΡ†Ρ‹ ΠΌΠ΅ΠΆΠ΄Ρƒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ .Π“Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ Ρ€Π°Π·ΠΌΡ‹Ρ‚Ρ‹ΠΌΠΈ для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ Π½Π΅ Π·Π½Π°ΠΊΠΎΠΌ с ΠΊΠ°ΠΊΠΈΠΌ-Π»ΠΈΠ±ΠΎ стилСм Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π½ΠΎ Π΅ΡΡ‚ΡŒ явныС различия, Ссли Π²Ρ‹ Π²Π½ΠΈΠΌΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎ посмотритС Π½Π° Π½ΠΈΡ….

Адаптивный Π΄ΠΈΠ·Π°ΠΉΠ½

Автор / ΠŸΡ€Π°Π²ΠΎΠΎΠ±Π»Π°Π΄Π°Ρ‚Π΅Π»ΡŒ: ΠœΡƒΡ…Π°ΠΌΠΌΠ°Π΄ Π Π°Ρ„ΠΈΠ·Π΅Π»ΡŒΠ΄ΠΈ .. Условия авторских ΠΏΡ€Π°Π² ΠΈ лицСнзия: CC BY-SA 3.0

Π’Π΅Ρ€ΠΌΠΈΠ½ «Адаптивный Π΄ΠΈΠ·Π°ΠΉΠ½Β» Π²ΠΏΠ΅Ρ€Π²Ρ‹Π΅ Π±Ρ‹Π» ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Π½ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠΌ ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠΌ Π˜Ρ‚Π°Π½ΠΎΠΌ ΠœΠ°Ρ€ΠΊΠΎΡ‚Ρ‚ΠΎΠΌ Π² Π΅Π³ΠΎ ΠΊΠ½ΠΈΠ³Π΅ Β« Адаптивный Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ Β». Адаптивный Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ€Π΅Π°Π³ΠΈΡ€ΡƒΠ΅Ρ‚ Π½Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Π½Π° , настраивая Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ элСмСнтов Π΄ΠΈΠ·Π°ΠΉΠ½Π° Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΠ»ΠΎΡΡŒ Π² доступном пространствС.

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

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

Адаптивный Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½

Адаптивный Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ Π±Ρ‹Π» прСдставлСн Π² 2011 Π³ΠΎΠ΄Ρƒ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠΌ Аароном Густафсоном Π² Π΅Π³ΠΎ ΠΊΠ½ΠΈΠ³Π΅ Β« Адаптивный Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½: созданиС Π±ΠΎΠ³Π°Ρ‚ΠΎΠ³ΠΎ ΠΎΠΏΡ‹Ρ‚Π° с прогрСссивным ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΠ΅ΠΌΒ». Он Ρ‚Π°ΠΊΠΆΠ΅ извСстСн ΠΊΠ°ΠΊ прогрСссивноС ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΠ΅ Π²Π΅Π±-сайта.

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

НСкоторыС сайты быстро Π²Π½Π΅Π΄Ρ€ΠΈΠ»ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½. Amazon, USA Today, Apple ΠΈ About.com сконфигурировали сСбя ΠΊΠ°ΠΊ Π²Π΅Π±-сайты, ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств. ΠœΠ°ΠΊΠ΅Ρ‚ мобильного Π²Π΅Π±-сайта с Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚Π»ΠΈΡ‡Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ вСрсии для ПК. Однако это связано с Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ Π²Ρ‹Π±Ρ€Π°Π»ΠΈ Π΄Ρ€ΡƒΠ³ΡƒΡŽ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΡƒ экрана Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π°, вмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΏΡ‹Ρ‚Π°Ρ‚ΡŒΡΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΅Π³ΠΎ.

Π’ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‚ ΡˆΠ΅ΡΡ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ² для ΡˆΠ΅ΡΡ‚ΠΈ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ распространСнных Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ экрана; 320, 480, 760, 960, 1200 ΠΈ 1600 пиксСлСй.

Автономный ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½

БущСствуСт Ρ‚Π°ΠΊΠΆΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²Π΅Π±-сайт Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств (ΠΎΠ½ΠΈ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°ΡŽΡ‚ΡΡ Π² строкС URL-адрСса Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ прСфикса Β«m.Β»). Π­Ρ‚ΠΎΡ‚ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ ΠΊΠΎΠ³Π΄Π°-Ρ‚ΠΎ Π±Ρ‹Π» ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΌ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΎΠΌ. Π”ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ создавали сайты для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств, настраивая элСмСнты ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚ для ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°. Google обСспСчиваСт Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… сайтов Π² поисковых систСмах, Π½ΠΎ сСгодня Ρ‚Π΅ ΠΆΠ΅ прСдпочтСния ΠΎΡ‚Π΄Π°ΡŽΡ‚ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ сайтам.

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

Π’Ρ‹Π±ΠΎΡ€ ΠΌΠ΅ΠΆΠ΄Ρƒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ

Автор / ΠΏΡ€Π°Π²ΠΎΠΎΠ±Π»Π°Π΄Π°Ρ‚Π΅Π»ΡŒ: Π‘Ρ‚Π΅Ρ„Π°Π½ΠΈ Π£ΠΎΠ»Ρ‚Π΅Ρ€. Условия авторских ΠΏΡ€Π°Π² ΠΈ лицСнзия: CC BY-SA 3.0

Адаптивный Π΄ΠΈΠ·Π°ΠΉΠ½ Π½Π° ΠΏΡ€ΠΎΡ‰Π΅ ΠΈ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ Π½Π° мСньшС Ρ€Π°Π±ΠΎΡ‚Ρ‹ для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ. Он Π΄Π°Π΅Ρ‚ мСньшС возмоТностСй для управлСния Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° экрана, Π½ΠΎ Π½Π° Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ это, бСзусловно, ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄ для создания Π½ΠΎΠ²Ρ‹Ρ… сайтов.Π­Ρ‚ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Ρ‚ΠΎ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ ΠΊ Π±ΠΎΠ»ΡŒΡˆΠΎΠΌΡƒ количСству Π΄Π΅ΡˆΠ΅Π²Ρ‹Ρ… шаблонов, доступных для Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π° систСм управлСния ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ (CMS), Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ WordPress, Joomla ΠΈ Ρ‚. Π”. β€” Π² ΠΊΠΎΠ½Ρ†Π΅ ΠΊΠΎΠ½Ρ†ΠΎΠ², ΠΊΡ‚ΠΎ Ρ…ΠΎΡ‡Π΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π΅Ρ‚Π°Ρ‚ΡŒ вСлосипСд?

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

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

SEO β€” Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ вСский Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚ Π² ΠΏΠΎΠ»ΡŒΠ·Ρƒ использования Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π‘Π°ΠΉΡ‚Ρ‹ с Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ (Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ сайты с URL-адрСсами, ΠΎΠ±ΡΠ»ΡƒΠΆΠΈΠ²Π°ΡŽΡ‰ΠΈΠΌΠΈ всС устройства) Π² настоящСС врСмя Π±ΠΎΠ»Π΅Π΅ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ для поисковых систСм.

Π£ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π΅ΡΡ‚ΡŒ вСскиС основания для использования. Π§Ρ‚ΠΎ ΠΆ, ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ; ΠΎΠ΄Π½Π°ΠΊΠΎ ΠΈΠΌΠ΅ΠΉΡ‚Π΅ Π² Π²ΠΈΠ΄Ρƒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

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

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

Бильная сторона Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ каТСтся Π±ΠΎΠ»Π΅Π΅ Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΌ для соврСмСнного ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΎΠΏΡ‹Ρ‚Π°, Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ дСмонстрируСт Π±ΠΎΠ»Π΅Π΅ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π½Π° Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ стол ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ (с трСбованиями Π΄Ρ€ΡƒΠ³ΠΈΡ… устройств, Π·Π°Π½ΠΈΠΌΠ°ΡŽΡ‰ΠΈΡ… второстСпСнноС, ΠΏΠΎΡ‡Ρ‚ΠΈ пассивноС мСсто). Как ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ, ΠΌΡ‹ Π΄Π΅Π»Π°Π΅ΠΌ большС с нашими ΡƒΠΌΠ½Ρ‹ΠΌΠΈ устройствами. Нам нравится Ρ‡ΡƒΠ²ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ наши устройства Π·Π½Π°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ ΠΏΠ΅Ρ€Π΅ΠΆΠΈΠ²Π°Π΅ΠΌ. Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим Π±ΡƒΠΊΠ²Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€. Если Π±Ρ‹ Π²Ρ‹ Π΅Ρ…Π°Π»ΠΈ ΠΏΠΎ Π΄Π»ΠΈΠ½Π½ΠΎΠΌΡƒ Ρ‚ΡƒΠ½Π½Π΅Π»ΡŽ, Ρ€Π°Π·Π²Π΅ Π²Ρ‹ Π½Π΅ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Π»ΠΈ Π±Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ экран GPS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ адаптируСтся ΠΊ ΠΎΠΊΡ€ΡƒΠΆΠ°ΡŽΡ‰Π΅ΠΉ срСдС ΠΈ Ρ€Π΅Π³ΡƒΠ»ΠΈΡ€ΡƒΠ΅Ρ‚ Π΅Π΅ ΡΡ€ΠΊΠΎΡΡ‚ΡŒ? Π­Ρ‚Π° контСкстная ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΈ удобство использования ΠΎΠ±Π½Π°Π΄Π΅ΠΆΠΈΠ²Π°ΡŽΡ‚, Π² Ρ‚ΠΎ ΠΆΠ΅ врСмя подтвСрТдая, Ρ‡Ρ‚ΠΎ вашС ΠΈΠ½Ρ‚Π΅Π»Π»Π΅ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΠ΅ устройство достаточно ΡƒΠΌΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΈ Π±Ρ‹Ρ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌ.

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

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

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

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

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

НаконСц, хотя Π±ΠΎΡ‚Ρ‹ поисковых систСм всС Π»ΡƒΡ‡ΡˆΠ΅ ΠΈ Π»ΡƒΡ‡ΡˆΠ΅ Π°Π½Π°Π»ΠΈΠ·ΠΈΡ€ΡƒΡŽΡ‚ ΠΈ ΡΠΎΡ€Ρ‚ΠΈΡ€ΡƒΡŽΡ‚ попадания, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·Π»ΠΈΡ‡Π°Ρ‚ΡŒ ваши сайты Β«.comΒ» ΠΈ Β«m .comΒ», Ρ€Π°Π·ΡƒΠΌΠ½ΠΎ ΠΏΡ€ΠΈΠ½ΡΡ‚ΡŒ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²Π΅Ρ‰Π΅ΠΉ. Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ поисковых систСм ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ Π½Π΅Ρ€Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½ΠΎ Ρ€Π°Π½ΠΆΠΈΡ€ΡƒΡŽΡ‚ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ‡Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΏΠΎ нСскольким URL. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ ΡƒΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ вас ΠΎΡ‚ SEO.

Π˜Ρ‚Π°ΠΊ, хотя Π² настоящСС врСмя сущСствуСт явноС ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚Π΅Π½ΠΈΠ΅ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π½Π΅ ΠΎΡ‚ΠΊΠ°Π·Ρ‹Π²Π°ΠΉΡ‚Π΅ΡΡŒ ΠΎΡ‚ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Ссли Ρƒ вас Π΅ΡΡ‚ΡŒ Π±ΡŽΠ΄ΠΆΠ΅Ρ‚.Google Π»ΡŽΠ±ΠΈΡ‚ сайты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π·Π°Π³Ρ€ΡƒΠΆΠ°ΡŽΡ‚ΡΡ быстро, ΠΊΠ°ΠΊ ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ.

The Take Away

Автор / ΠΏΡ€Π°Π²ΠΎΠΎΠ±Π»Π°Π΄Π°Ρ‚Π΅Π»ΡŒ: Brisbane Web Design. Условия авторских ΠΏΡ€Π°Π² ΠΈ лицСнзия: Public Domain

Π‘ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹ΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ Π΄Π°Π΅Ρ‚ Π½Π°ΠΌ Ρ‚Ρ€ΠΈ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° использования: Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ, Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΈ Π°Π²Ρ‚ΠΎΠ½ΠΎΠΌΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, хотя Π°Π²Ρ‚ΠΎΠ½ΠΎΠΌΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π²Ρ‹ΡˆΠ΅Π» ΠΈΠ· употрСблСния.

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


ΠŸΠ»ΡŽΡΡ‹

ΠœΠΈΠ½ΡƒΡΡ‹

  • Π Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½ΠΎΠ΅ ΠΈ бСсшовноС = Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ UX.
  • ОбилиС шаблонов для использования.
  • ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ для SEO.
  • Часто ΠΏΡ€ΠΎΡ‰Π΅ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ
  • Π£ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ мСньшСго Ρ€Π°Π·ΠΌΠ΅Ρ€Π° экрана.
  • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ
  • Π Π΅ΠΊΠ»Π°ΠΌΠ½Ρ‹Π΅ объявлСния Ρ‚Π΅Ρ€ΡΡŽΡ‚ΡΡ Π½Π° экранС.
  • Π‘ΠΎΠ»Π΅Π΅ Π΄Π»ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ врСмя Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ мобильного Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π°.

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

ΠŸΠ»ΡŽΡΡ‹

ΠœΠΈΠ½ΡƒΡΡ‹

  • ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π»ΡƒΡ‡ΡˆΠΈΠΉ UX для ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π³ΠΎ устройства.
  • ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ устройства ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡ‚ΡŒ срСду своСго ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.
  • Π”ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π΅ΠΊΠ»Π°ΠΌΡƒ Π½Π° основС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… Π΄Π°Π½Π½Ρ‹Ρ… со смарт-устройств.
  • Π’Ρ€ΡƒΠ΄ΠΎΠ΅ΠΌΠΊΠΈΠΉ процСсс создания β€” Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² ΠΌΠΎΠ΄Π΅Ρ€Π½ΠΈΠ·ΠΈΡ€ΡƒΡŽΡ‚ Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½Ρ‹Π΅ сайты, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΡ… Π±ΠΎΠ»Π΅Π΅ доступными.
  • Π£ ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚ΠΎΠ² ΠΈ Π½Π΅Ρ‚Π±ΡƒΠΊΠΎΠ² ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠ΅ΠΉ сайта, ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΉ Π½Π° смартфон ΠΈΠ»ΠΈ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€.
  • ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ° для SEO β€” поисковыС систСмы Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡ†Π΅Π½ΠΈΡ‚ΡŒ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ‡Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… сайтах.

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

ΠœΡ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ Π»ΡƒΡ‡ΡˆΠ΅ всСго ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ эти измСнСния ΠΊΠ°ΠΊ ΡΠ²ΠΎΠ»ΡŽΡ†ΠΈΡŽ. Π§Π°Ρ€Π»ΡŒΠ· Π”Π°Ρ€Π²ΠΈΠ½ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΠ», Ρ‡Ρ‚ΠΎ особи ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π²ΠΈΠ΄Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ΠΆΠΈΠ²Π°ΡŽΡ‚, Π½Π΅ самыС ΡΠΈΠ»ΡŒΠ½Ρ‹Π΅ ΠΈ ΡƒΠΌΠ½Ρ‹Π΅, Π° Ρ‚Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π»ΡƒΡ‡ΡˆΠ΅ всСго Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΊ измСнСниям. Π’ свСтС этого Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Ρ€Π°ΡΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π΄ΠΈΠ½ΠΎΠ·Π°Π²Ρ€ΠΎΠ².

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

РСсурсы ΠΈ Π³Π΄Π΅ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ гСроя: Автор / ΠŸΡ€Π°Π²ΠΎΠΎΠ±Π»Π°Π΄Π°Ρ‚Π΅Π»ΡŒ: tfinc. Условия авторских ΠΏΡ€Π°Π² ΠΈ лицСнзия: CC BY-SA 3.0

Holst, C.(2012). «АдаптивныС ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΈ ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΌΠ΅Ρ‚ΠΊΠΈ ΠΏΠΎΠ»Π΅ΠΉ Ρ„ΠΎΡ€ΠΌΒ». Smashing Magazine. ΠŸΠΎΠ»ΡƒΡ‡Π΅Π½ΠΎ с: http: //www.smashingmagazine.com/2012/11/08/ux-desi … [2014, 1 сСнтября]

Π˜Ρ†ΠΊΠΎΠ²ΠΈΡ‡, А. (2012). Β«Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ систСмы для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ UXΒ». Π Π°Π·Ρ€ΡƒΡˆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΆΡƒΡ€Π½Π°Π» . ΠŸΠΎΠ»ΡƒΡ‡Π΅Π½ΠΎ с: http://www.smashingmagazine.com/2012/12/creating-an-adaptive-system-to-enhance-ux/

Найт, К. (2011). «Адаптивный Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½: Ρ‡Ρ‚ΠΎ это Ρ‚Π°ΠΊΠΎΠ΅ ΠΈ ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΒ». Smashing Magazine. ΠŸΠΎΠ»ΡƒΡ‡Π΅Π½ΠΎ с: http://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/The Smashing Editor. (2012). Β«Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ ΠΈ ΡƒΡ‡Π΅Π±Π½Ρ‹Π΅ пособия ΠΏΠΎ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΌΡƒ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ΡƒΒ». (NB. Π­Ρ‚ΠΎ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ рСсурс для поиска Π»ΡƒΡ‡ΡˆΠΈΡ… статСй Smashing Magazine ΠΎΠ± Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅.) Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: http://www.smashingmagazine.com/responsive-web-des …

Π¦Π°ΠΎ, Π”ΠΆ. (2015). «Адаптивный ΠΈΠ»ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½: Ρ‡Ρ‚ΠΎ Π»ΡƒΡ‡ΡˆΠ΅ для Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ²?Β», Бтудия UXPin.ΠŸΠΎΠ»ΡƒΡ‡Π΅Π½ΠΎ с: http://studio.uxpin.com/blog/responsive-vs-adaptive-design-whats-best-choice-designers/

Π‘ΠΈΠ½ Π£Π·Π°ΠΉΡ€, Π‘. (2013). «Адаптивный Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΡ€ΠΎΡ‚ΠΈΠ² Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎΒ». ΠœΠΎΠΌΠ΅Π½Ρ‚ . ΠŸΠΎΠ»ΡƒΡ‡Π΅Π½ΠΎ с: http://torquemag.io/responsive-design-vs-adaptive-design/


RWD β€” это Π½Π΅ ΠΏΠΎΠ»Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠ²ΠΎΠ΄, Ρ€Π°Π·Π½ΠΈΡ†Π° ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΌ ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ

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

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

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°?

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

Адаптивный D esign (RWD) Π±Ρ‹Π» Π²Π²Π΅Π΄Π΅Π½ Π˜Ρ‚Π°Π½ΠΎΠΌ ΠœΠ°Ρ€ΠΊΠΎΡ‚Ρ‚ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠ» Π΅Π³ΠΎ ΠΏΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π²Π΅Π±-страницы ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° страницы для Π°Π΄Π°ΠΏΡ‚Π°Ρ†ΠΈΠΈ ΠΊ Ρ€Π°Π·Π½Ρ‹ΠΌ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΠΌ экрана Ρ‡Π΅Ρ€Π΅Π· CSS Media Query, Content ( На основС Ρ‚ΠΎΡ‡ΠΊΠΈ останова) ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ.

Π•ΡΡ‚ΡŒ нСсколько ΠΏΡ€ΠΈΡ‡ΠΈΠ½, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ±ΡƒΠ΄ΠΈΡ‚ΡŒ вас Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½:

  • Β· это стало популярной Ρ‚Π΅Π½Π΄Π΅Π½Ρ†ΠΈΠ΅ΠΉ срСди Π½ΠΎΠ²Ρ‹Ρ… сайтов;
  • Β· прост Π² использовании ΠΈ обслуТивании Π΄Π°ΠΆΠ΅ для ΠΌΠ΅Π½Π΅Π΅ ΠΎΠΏΡ‹Ρ‚Π½Ρ‹Ρ… Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ²;
  • Β· большоС количСство Ρ‚Π΅ΠΌ, доступных Ρ‡Π΅Ρ€Π΅Π· систСмы CMS;
  • Β· ΠΎΠ½ ΠΈΠΌΠ΅Π΅Ρ‚ Π³ΠΈΠ±ΠΊΠΈΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π»ΡƒΡ‡ΡˆΠ΅ подходят для Π½ΠΎΠ²Ρ‹Ρ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ².

Адаптивный Π΄ΠΈΠ·Π°ΠΉΠ½ (AWD) β€” это созданиС Ρ€Π°Π·Π½Ρ‹Ρ… страниц Π² соотвСтствии с ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ ΠΈ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ экрана устройства.

НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Ρ‹ r easons для нас ing Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½:

  • Β· ΠΎΠ½ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΏΠΎ ΠΌΠΎΠ΄Π΅Ρ€Π½ΠΈΠ·Π°Ρ†ΠΈΠΈ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π³ΠΎ сайта, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΌ;
  • Β· позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ экраны с ΡˆΠ΅ΡΡ‚ΡŒΡŽ стандартными значСниями ΡˆΠΈΡ€ΠΈΠ½Ρ‹: 320, 480, 760, 960, 1200 ΠΈ 1600;
  • Β· ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ сайт с нуля, создавая Π΅Π³ΠΎ с ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ постСпСнно ΠΏΠΎΠ²Ρ‹ΡˆΠ°Ρ Π΅Π³ΠΎ.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Ρ€Π°Π·Π½ΠΈΡ†Π° с ΠΌΠ΅ΠΆΠ΄Ρƒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ?

НаиболСС очСвидная Ρ€Π°Π·Π½ΠΈΡ†Π° ΠΌΠ΅ΠΆΠ΄Ρƒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² ΠΈΡ… ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… ΠΌΠ°ΠΊΠ΅Ρ‚Π°Ρ….

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

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

ΠŸΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΡˆΠ΅ΡΡ‚ΡŒ ΠΎΠ±Ρ‰ΠΈΡ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ экрана: 320, 480, 760, 960, 1200 ΠΈ 1600.

Π’ΠΎ-Π²Ρ‚ΠΎΡ€Ρ‹Ρ…, каТдая ΠΈΠ· этих Π΄Π²ΡƒΡ… Ρ„ΠΎΡ€ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π°Π·Π½Ρ‹Π΅ ΡΠΈΠ»ΡŒΠ½Ρ‹Π΅ стороны ΠΈ прСимущСства.

ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²Π° Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°:

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

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

ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²Π° Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°:

  • Β· Π‘ΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒ Π΄Π°ΠΆΠ΅ с Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ слоТными сайтами.
  • Β· Π’ΠΎΠ·ΠΌΠΎΠΆΠ½Π° рСализация ΠΏΠΎ Π±ΠΎΠ»Π΅Π΅ Π½ΠΈΠ·ΠΊΠΎΠΉ Ρ†Π΅Π½Π΅.
  • Β· Π­ΠΊΠΎΠ½ΠΎΠΌΠΈΡ‡Π½ΠΎΠ΅ ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅.
  • Β· Π‘ΠΎΠ»Π΅Π΅ простоС тСстированиС ΠΈ Π±ΠΎΠ»Π΅Π΅ точная Ρ€Π°Π±ΠΎΡ‚Π°.

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

Π§Ρ‚ΠΎ Π»ΡƒΡ‡ΡˆΠ΅ , Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΈΠ»ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½?

Π˜Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π²Ρ‹ Ρ€Π΅ΡˆΠΈΡ‚Π΅, ΠΊΠ°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ Π²Π°ΠΌ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚? ΠŸΠΎΠ·Π²ΠΎΠ»ΡŒΡ‚Π΅ Π½Π°ΠΌ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ идСями, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒΡΡ.

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

Π’ΠΎ-Π²Ρ‚ΠΎΡ€Ρ‹Ρ…, Π²Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅ Π½Π° ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΌ сайтС ΠΈΠ»ΠΈ создаСтС Π½ΠΎΠ²Ρ‹ΠΉ.Адаптивный Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Π½ΠΎΠ²Ρ‹Ρ… Π²Π΅Π±-сайтов, Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ…ΡΡ с нуля, Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Π·Π°Π΄Π°Ρ‡ΠΈ ΠΌΠΎΠ΄Π΅Ρ€Π½ΠΈΠ·Π°Ρ†ΠΈΠΈ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π³ΠΎ сайта.

ΠžΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ с ΡƒΡ‡Π΅Π±Π½ΠΈΠΊΠΎΠΌ 20 Best Responsive Web Design, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°

Π’ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΠΊΠ°ΠΊ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Π΅, Ρ‚Π°ΠΊ ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹, Π½ΠΎ ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ Π½Π° самом Π΄Π΅Π»Π΅ выглядят? Π£ нас Π΅ΡΡ‚ΡŒ Π΄Π΅ΡΡΡ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΏΡΡ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΈ ΠΏΡΡ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ…, ΠΈ ΠΌΡ‹ надССмся, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ вдохновят вас.

ΠŸΡΡ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°:

1. Corcoran

Corcoran β€” извСстная нью-йоркская Ρ„ΠΈΡ€ΠΌΠ° ΠΏΠΎ нСдвиТимости. Он ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ ΠΏΠΎΠ²Ρ‹ΡΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΈ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ ΠΎΠΏΡ‹Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. Он ΠΈΠΌΠ΅Π΅Ρ‚ большоС количСство Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΌ покупатСлям ΠΈ Π°Ρ€Π΅Π½Π΄Π°Ρ‚ΠΎΡ€Π°ΠΌ Тилья список удобств.

2. Turkish Airlines

Turkish Airlines ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ своим ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π»ΡƒΡ‡ΡˆΠΈΠΉ Π²Ρ‹Π±ΠΎΡ€ ΠΎΠΏΡ‹Ρ‚Π°.ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ ΠΌΠ΅ΠΆΠ΄Ρƒ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹ΠΌ Π²Π΅Π±-сайтом, ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΌ Π²Π΅Π±-сайтом ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΌ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ.

3. Adidas

Adidas β€” всСмирно извСстный Π±Ρ€Π΅Π½Π΄. Благодаря Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΌΡƒ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΈ посСтитСли с ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств ΠΌΠΎΠ³ΡƒΡ‚ ΡΠΎΠ²Π΅Ρ€ΡˆΠ°Ρ‚ΡŒ ΠΏΠΎΠΊΡƒΠΏΠΊΠΈ Π»ΡƒΡ‡ΡˆΠ΅.

4. Avenue 32

Avenue 32 β€” это ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-сайт для Ρ€ΠΎΡΠΊΠΎΡˆΠ½Ρ‹Ρ… ΠΏΠΎΠΊΡƒΠΏΠΎΠΊ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠΉ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½.

5. About.com

About.com принял Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΅Π³ΠΎ Π²Π΅Π±-страницы Π·Π°Π³Ρ€ΡƒΠΆΠ°Π»ΠΈΡΡŒ быстро ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ Π½Π° всСх Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… устройствах.

ΠŸΡΡ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°:

1. Dribbble

Dribbble β€” это Π²Π΅Π±-сайт, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠΉ CSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΅Π³ΠΎ столбцы автоматичСски мСнялись Π² соотвСтствии с Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ экрана ΠΈΠ»ΠΈ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.

2. New York City Ballet

New York City Ballet β€” это Ρ‚ΠΈΠΏΠΈΡ‡Π½Ρ‹ΠΉ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π²Π΅Π±-сайт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ свои Π»ΡƒΡ‡ΡˆΠΈΠ΅ характСристики Π½Π° всСх Ρ‚ΠΈΠΏΠ°Ρ… устройств.

3.Shopify

Shopify ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ² Π½Π° всСх устройствах. Благодаря Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΌΡƒ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ всС ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ Π»Π΅Π³ΠΊΠΎ ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΌΠ΅ΠΆΠ΄Ρƒ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΌΠΈ устройствами.

4. Swiss Air

Swiss Air β€” ΠΎΡ‡Π΅Π½ΡŒ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ Π²Π΅Π±-сайт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² Π²Π½ΠΈΠΌΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈΠ·ΡƒΡ‡ΠΈΠ»ΠΈ. Он ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ свой смСлый ΠΏΡ€ΠΈΠ·Ρ‹Π² ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ Π½Π° всСх ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ….

5. ΠŸΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ АлСксандра Π­Π½Π³Π·Π΅Π»Π»Π°

АлСксандр Π­Π½Π³Ρ†Π΅Π»Π» β€” Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π²Π΅Π±-сайт швСдской Π΄ΠΈΠ·Π°ΠΉΠ½-студии.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΉΡ‚ΠΈ Π΅Ρ‰Π΅ Π±ΠΎΠ»Π΅Π΅ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ Π² Β«20 Π²Π΄ΠΎΡ…Π½ΠΎΠ²Π»ΡΡŽΡ‰ΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π»ΡƒΡ‡ΡˆΠ΅Π³ΠΎ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°Β».

Π§Ρ‚ΠΎ дальшС?

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

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

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

Fluid vs. Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΈΠ»ΠΈ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½

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

ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Π½Π΅ Π² вашСм устройствС, Π° Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ этих сайтов. И вопрос Π² Ρ‚ΠΎΠΌ, примСнялся Π»ΠΈ Π³ΠΈΠ±ΠΊΠΈΠΉ, Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΈΠ»ΠΈ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π² процСссС ΠΈΡ… Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

Π’ Ρ‡Π΅ΠΌ Ρ€Π°Π·Π½ΠΈΡ†Π° ΠΌΠ΅ΠΆΠ΄Ρƒ этими трСмя ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π°ΠΌΠΈ?

ΠœΡ‹ собираСмся ΠΎΠ±ΡŠΡΡΠ½ΠΈΡ‚ΡŒ ΠΈΡ… здСсь Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ ΠΎΡΡ‚Π°Π²Π°ΠΉΡ‚Π΅ΡΡŒ Π½Π° Π±ΠΎΡ€Ρ‚Ρƒ.

ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Ρ‚ΠΈΠΏΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½Π°

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

Но Ρ‡Ρ‚ΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΠΎΡΡ‚ΡŒ для Π²Π΅Π±-сайта ΠΈ Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Π³ΠΈΠ±ΠΊΠΈΠΉ ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½?

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ½ΡΡ‚ΡŒ эти Ρ‚ΠΈΠΏΡ‹, ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ сначала ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ фиксированный Π΄ΠΈΠ·Π°ΠΉΠ½.

Ѐиксированный ΠΌΠ°ΠΊΠ΅Ρ‚ страницы

Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Ρ‹ с ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠΌ с фиксированной ΠΈΠ»ΠΈ статичСской ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Ρ‹ для ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ Π·Π°Ρ€Π°Π½Π΅Π΅ Π·Π°Π΄Π°Π½Π½ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈ Π½Π΅ ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ, нСзависимо ΠΎΡ‚ ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡ сторон экрана ΠΈΠ»ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° экрана, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΠΌΠ΅Π΅Ρ‚ Π·Ρ€ΠΈΡ‚Π΅Π»ΡŒ.Π¨ΠΈΡ€ΠΈΠ½Π° указываСтся Π² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΈ пиксСля, Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ распространСнная ΡˆΠΈΡ€ΠΈΠ½Π° β€” 960 пиксСлСй, ΠΈ ΠΎΠ½Π° Π½Π΅ зависит ΠΎΡ‚ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² экрана.

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

Π–ΠΈΠ΄ΠΊΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½

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

РаньшС стандартный Ρ€Π°Π·ΠΌΠ΅Ρ€ экрана составлял 1024 Γ— 768 пиксСлСй, Π½ΠΎ сСйчас ΠΌΠ½ΠΎΠ³ΠΈΠ΅ люди ΠΈΠΌΠ΅ΡŽΡ‚ экраны с Π±ΠΎΠ»Π΅Π΅ высоким Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ. Π’ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ ΠΏΠ»Π°Π²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ»Π΅Π·Π΅Π½.

ΠŸΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° экрана элСмСнты Π³ΠΈΠ±ΠΊΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Ρ€Π°ΡΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ΡΡ ΠΏΠΎ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΌΡƒ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Ρƒ пространства.Π‘Π»ΠΎΠΊΠΈ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°ΡΡ‚ΡΠ³ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΈΠ»ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Ρ‚ΡŒΡΡ Π² зависимости ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° экрана.

ΠŸΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ просмотр Π΄ΠΈΠ·Π°ΠΉΠ½Π° Fluid / Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ изобраТСния: UX Alpaca

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΠ»Π°Π²Π½Ρ‹ΠΌ, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π² ΠΊΠΎΠ΄.

Π’ΠΈΠ΄Π΅ΠΎ: Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π³ΠΈΠ±ΠΊΡƒΡŽ Π²Π΅Π±-страницу

Адаптивный Π΄ΠΈΠ·Π°ΠΉΠ½

Адаптивный Π΄ΠΈΠ·Π°ΠΉΠ½ β€” это процСсс создания Π²Π΅Π±-сайта ΠΈΠ»ΠΈ Ρ‚Π΅ΠΌΡ‹ с ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Ρ… устройств ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² экрана.Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ созданиС ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ для iMac, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΈΠ»ΠΈ для 13,3-Π΄ΡŽΠΉΠΌΠΎΠ²Ρ‹Ρ… Π½ΠΎΡƒΡ‚Π±ΡƒΠΊΠΎΠ², iPhone, часов Galaxy ΠΈΠ»ΠΈ любого Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ устройства с дисплСями ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°.

Если Π΄ΠΈΠ·Π°ΠΉΠ½ сдСлан Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ, это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π½Π° самом Π΄Π΅Π»Π΅ создаСтся нСсколько вСрсий Π΄ΠΈΠ·Π°ΠΉΠ½Π°, каТдая ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π° для ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°. Однако ΠΌΠ°ΠΊΠ΅Ρ‚ Ρ‚ΠΎΡ‡Π½ΠΎ Π½Π΅ опрСдСляСтся Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ, Π° скорСС Π² ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² экрана.

По ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с Π³ΠΈΠ±ΠΊΠΈΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ, Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ ΡƒΠ²Π΅Ρ€Π΅Π½Π½ΠΎΡΡ‚ΡŒ Π² Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠΌ интСрфСйсС ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΎΠΏΡ‹Ρ‚.Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ плюс β€” ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… страниц, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ настроСк Π½Π΅ Ρ‚Π°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ ΠΈ страницы Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒΡΡ быстро.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π½Π° экранС Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ стола ΠΈ мобильного устройства / Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ изобраТСния: Pixabay

Адаптивный Π²Π΅Π±-сайт

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

Благодаря ΡΠΎΡ‡Π΅Ρ‚Π°Π½ΠΈΡŽ Π³ΠΈΠ±ΠΊΠΈΡ… сСток, Π³ΠΈΠ±ΠΊΠΈΡ… ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² ΠΈ ΠΈΠ½Ρ‚Π΅Π»Π»Π΅ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ использования мСдиазапросов, Π° Ρ‚Π°ΠΊΠΆΠ΅ со спСцифичСским CSS для Ρ€Π°Π·Π½Ρ‹Ρ… Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ, Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π² послСднСС врСмя стал ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Ρ„Π°Π²ΠΎΡ€ΠΈΡ‚ΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ².

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

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

Адаптивный ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ / Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ изобраТСния: UX planet

Какой Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ?

Π”Π°Π²Π½ΠΎ ΠΏΡ€ΠΎΡˆΠ»ΠΈ Ρ‚Π΅ Π²Ρ€Π΅ΠΌΠ΅Π½Π°, ΠΊΠΎΠ³Π΄Π° Π±Ρ‹Π» Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ Ρ‚ΠΈΠΏΠΈΡ‡Π½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ дисплССв ПК. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΡΡ‚Π°Π»ΠΊΠΈΠ²Π°ΡŽΡ‚ΡΡ с ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΎΠΉ проСктирования Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ΠΎΠ², Π½ΠΎΡƒΡ‚Π±ΡƒΠΊΠΎΠ², ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚ΠΎΠ², устройств для чтСния, часов ΠΈ, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅, ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½ΠΎΠ² всСх Ρ„ΠΎΡ€ΠΌ ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ².

Π˜Ρ‚Π°ΠΊ, Π΄Π°, это ΠΌΠΎΠΆΠ΅Ρ‚ ΡΡ‚Π°Ρ‚ΡŒ довольно Π·Π°ΠΏΡƒΡ‚Π°Π½Π½Ρ‹ΠΌ, Ссли Π²Ρ‹ смоТСтС Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ‚ΠΈΠΏ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρƒ, Π½Π°Π΄ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Π²Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅ ΠΊΠ°ΠΊ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€.Он Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ ΠΈΠ»ΠΈ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΌ?

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

Π‘ Π΄Ρ€ΡƒΠ³ΠΎΠΉ стороны, всСгда ΠΏΠΎΠΌΠ½ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎΡ‡Ρ‚ΠΈ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌ Π² соврСмСнном ΠΌΠΈΡ€Π΅, ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Ρ‹ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠΆΠΈΠ΄Π°ΡŽΡ‚ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° для своСго Π²Π΅Π±-сайта.Π˜Ρ‚Π°ΠΊ, Π²Ρ‹ Π±Ρ‹ Π½Π΅ Ρ…ΠΎΡ‚Π΅Π»ΠΈ ΠΈΡ… Ρ€Π°Π·ΠΎΡ‡Π°Ρ€ΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ, Π½Π΅ Ρ‚Π°ΠΊ Π»ΠΈ?

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ· этих Ρ‚ΠΈΠΏΠΎΠ² ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΡƒΡŽΡ‚ΡΡ. НапримСр, ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ любой Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ‚Π°ΠΊΠΆΠ΅ являСтся Π³ΠΈΠ±ΠΊΠΈΠΌ, Π½ΠΎ Π½Π΅ всСгда Π³ΠΈΠ±ΠΊΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ.

Π’ΠΈΠ΄Π΅ΠΎ: созданиС Π³ΠΈΠ±ΠΊΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π° для Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°

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

Как Π²ΠΈΠ΄ΠΈΡ‚Π΅, всС Π΄Π΅Π»ΠΎ Π² Ρ€Π°Π·ΠΌΠ΅Ρ€Π°Ρ… экрана ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Π°Ρ… страниц.

Π˜Ρ‚Π°ΠΊ, Ссли ваш новСйший Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½ ΠΈΠΌΠ΅Π΅Ρ‚ нСстандартноС ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон экрана ΠΈΠ»ΠΈ Π½Π΅ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ΅ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅, Π²Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ слоТно Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π΅Π±-страницы, Π²ΠΈΠ΄Π΅ΠΎ ΠΈ прилоТСния Π² соотвСтствии с Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ экрана.Учитывая, Ρ‡Ρ‚ΠΎ Π² послСднСС врСмя Ρ€Ρ‹Π½ΠΎΠΊ Π½Π°Π²ΠΎΠ΄Π½ΠΈΠ»ΠΈ Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Ρ‹ с ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ΠΌ сторон 18: 9, Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ стандартизированного 16: 9, Π½ΠΎ большая Ρ‡Π°ΡΡ‚ΡŒ Π²ΠΈΠ΄Π΅ΠΎ ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ Π²Π΅Π±-сайтов Π΅Ρ‰Π΅ Π½Π΅ Π±Ρ‹Π»Π° скоррСктирована, становится ясно, Ρ‡Ρ‚ΠΎ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ измСнСния Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ сдСланный. И Π»ΡƒΡ‡ΡˆΠ΅Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ β€” Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΈΡ… автоматичСски с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

ΠŸΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ просмотр Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π½Π° экранах Ρ€Π°Π·Π½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² / Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ Π² Iamge: Pixabay

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

ΠœΡ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ±Π΅Π΄ΠΈΡ‚Π΅Π»Π΅ΠΌ Π² этой Π±ΠΈΡ‚Π²Π΅ Ρ‚Ρ€Π΅ΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ° гибкости, Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

ΠœΡ‹ надССмся, Ρ‡Ρ‚ΠΎ это ΠΏΠΎΠΌΠΎΠ³Π»ΠΎ Ρ€Π°Π·Π»ΠΈΡ‡ΠΈΡ‚ΡŒ различия ΠΌΠ΅ΠΆΠ΄Ρƒ фиксированным, Π³ΠΈΠ±ΠΊΠΈΠΌ, Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ ΠΈ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ. Π§Ρ‚ΠΎ Π²Ρ‹ Π΄ΡƒΠΌΠ°Π΅Ρ‚Π΅? Какой Π΄ΠΈΠ·Π°ΠΉΠ½ Π²Π°ΠΌ нравится большС всСго ΠΈ ΠΏΠΎΡ‡Π΅ΠΌΡƒ? Π”Π°ΠΉΡ‚Π΅ Π½Π°ΠΌ Π·Π½Π°Ρ‚ΡŒ Π² коммСнтариях Π½ΠΈΠΆΠ΅ ΠΈΠ»ΠΈ Π½Π° нашСй страницС Π² Facebook.


ВзглянитС Ρ‚Π°ΠΊΠΆΠ΅ Π½Π° ΠΏΠΎΡ…ΠΎΠΆΠΈΠ΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ:

Π’Π΄ΠΎΡ…Π½ΠΎΠ²Π»Π΅Π½Π½Ρ‹ΠΉ ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ повСствованиями ΠΈ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΡΡŽΡ‰ΠΈΠΉ эффСктной Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠΉ.Π›ΡŽΠ±ΠΈΡ‚ ΠΏΠΎΠ³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒΡΡ Π² ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅ ΡΡŽΠΆΠ΅Ρ‚Π°. Π£Ρ‡Π΅Π½ΠΈΠΊ Π½Π° протяТСнии всСй ΠΆΠΈΠ·Π½ΠΈ ΠΈ Π²Π΅Ρ‡Π½Ρ‹ΠΉ оптимист.

ПослСдниС сообщСния Naa BoΕΎoviΔ‡ (ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ всС)

10 ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°

Адаптивный Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ (AWD) β€” это ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² обращСния ΠΊ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΌ посСтитСлям, ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ ΠΈΡ… Ρ€Π°Π±ΠΎΡ‚Ρƒ Π½Π° Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… экранах. Π₯отя сСгодня RWD ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ стандартным ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΎΠΌ, ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ Π½Π° Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π²Π΅Π±-сайтов Π΄Π°Π΅Ρ‚ большС гибкости Π² настройкС ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° для удовлСтворСния потрСбностСй ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΈ максимизации Π΄ΠΎΡ…ΠΎΠ΄ΠΎΠ² ΠΎΡ‚ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… источников.Π’ΠΎΡ‚ 10 Π²Π΄ΠΎΡ…Π½ΠΎΠ²Π»ΡΡŽΡ‰ΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½?

Адаптивный Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈΠ»ΠΈ адаптация ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° β€” это структура Π²Π΅Π±-сайта, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Ρ€Π°Π·Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ Π²Π΅Π±-сайта Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ для Ρ€Π°Π·Π½Ρ‹Ρ… Π³Ρ€ΡƒΠΏΠΏ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΎΠ΄Π½ΠΎΠ³ΠΎ URL-адрСса (динамичСскоС обслуТиваниС) ΠΈΠ»ΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ URL-адрСсов для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ m-dot ΠΈΠ»ΠΈ dot-mobi. Π’ ΠΎΠ±ΠΎΠΈΡ… случаях ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠ΅Π½ΠΈΠ΅ устройства Π½Π° сторонС сСрвСра, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰Π΅Π΅ Π²Π΅Π±-сСрвСру ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ слСдуСт ΠΈ Ρ‡Ρ‚ΠΎ Π½Π΅ слСдуСт ΠΎΡ‚ΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Π½Π° Π·Π°ΠΏΡ€Π°ΡˆΠΈΠ²Π°ΡŽΡ‰Π΅Π΅ устройство.

Адаптивный ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ с:

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

Если Π²Ρ‹ Π²Ρ‹Π±Π΅Ρ€Π΅Ρ‚Π΅ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ (RWD), ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠ΅Π½ΠΈΠ΅ устройства Π½Π΅ являСтся строго Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ΠΌ, Π½ΠΎ всС устройства ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽΡ‚ ΠΎΠ΄ΠΈΠ½ ΠΈ Ρ‚ΠΎΡ‚ ΠΆΠ΅ ΠΊΠΎΠ΄ Π²Π΅Π±-сайта, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π·Π°Ρ‚Π΅ΠΌ пСрСстраиваСтся Π½Π° сторонС ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ΅Π½ΡŒΡˆΠ΅ΠΌΡƒ экрану.Π₯отя этот ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΎΡ‡Π΅Π½ΡŒ популярСн, ΠΎΠ½ Π½Π΅ лишСн своих ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… нСдостатков, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ больший вСс страницы ΠΈ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ. По этой ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π΅ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΊΡ€ΡƒΠΏΠ½Ρ‹Ρ… ΠΈΠ³Ρ€ΠΎΠΊΠΎΠ² Π² элСктронной ΠΊΠΎΠΌΠΌΠ΅Ρ€Ρ†ΠΈΠΈ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°ΡŽΡ‚ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½.

А Π²ΠΎΡ‚ нСсколько ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ², Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‰ΠΈΡ… мноТСство ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΉ ΠΈΠ· Ρ€Π°Π·Π½Ρ‹Ρ… отраслСй.

1. Maplin

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

2. Home Depot

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

3.ΠšΠΎΡ€ΠΊΠΎΡ€Π°Π½

Corcoran, нью-йоркская Ρ„ΠΈΡ€ΠΌΠ° ΠΏΠΎ нСдвиТимости, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ особСнности мСстополоТСния, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΌ покупатСлям ΠΈ Π°Ρ€Π΅Π½Π΄Π°Ρ‚ΠΎΡ€Π°ΠΌ Тилья ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ список удобств рядом с искомой Π½Π΅Π΄Π²ΠΈΠΆΠΈΠΌΠΎΡΡ‚ΡŒΡŽ.

4. IHG

InterContinental Hotels Group Ρ€Π΅ΡˆΠΈΠ»Π°, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ сосрСдоточСны Π½Π° быстром поискС ΠΈ Π±Ρ€ΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ отСля. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Π²Π΅Π±-сайт поощряСт мСстныС Π·Π°ΠΊΠ°Π·Ρ‹ Π½Π° Ρ…ΠΎΠ΄Ρƒ Ρ‡Π΅Ρ€Π΅Π· слуТбы опрСдСлСния мСстополоТСния, обслуТивая Π±Π»ΠΈΠ·Π»Π΅ΠΆΠ°Ρ‰ΠΈΠ΅ ΠΎΡ‚Π΅Π»ΠΈ для ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ² Π½Π° основС Π΄Π°Π½Π½Ρ‹Ρ… GPS с ΠΈΡ… Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½ΠΎΠ².ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ сайт ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ Π½Π° дСйствия, с быстрыми ссылками, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΠΉΡ‚ΠΈ ΠΎΡ‚Π΅Π»ΡŒ поблизости, ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ свои бронирования ΠΈ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠ΅ прСдлоТСния.

5. Opentable.com

ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ сайт Open Table ΠΏΠΎ адрСсу m.opentable.com выдСляСт мСстополоТСниС ΠΈ ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Π½Π° мобильном устройствС, Π° сайт для Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ПК Π΄Π΅Π»Π°Π΅Ρ‚ ΡƒΠΏΠΎΡ€ Π½Π° ΠΎΠ±Π·ΠΎΡ€Ρ‹ ΠΈ просмотр. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ пСрСходят Π½Π° сайт для Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ΠΎΠ², Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ мСсто, Π³Π΄Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΅ΡΡ‚ΡŒ, ΠΈ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°ΡŽΡ‚ ΠΎΡ‚Π·Ρ‹Π²Ρ‹, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²Ρ‹Π±ΠΎΡ€, Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΡΠΊΠ°Ρ‚ΡŒ ΠΏΠΎΠ»Π΅Π·Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, Ρ‚Π°ΠΊΡƒΡŽ ​​как:

  • Π½ΠΎΠΌΠ΅Ρ€ Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π° для Π·Π²ΠΎΠ½ΠΊΠ°,
  • ссылка Π½Π° ΠΊΠ°Ρ€Ρ‚Ρƒ Google, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ ΠΌΠ°Ρ€ΡˆΡ€ΡƒΡ‚ Π΄ΠΎ рСсторана ΠΎΡ‚ ΠΈΡ… мСстонахоТдСния,
  • информация ΠΎ ΠΏΠ°Ρ€ΠΊΠΎΠ²ΠΊΠ΅ ΠΈ Π±Π»ΠΈΠ·Π»Π΅ΠΆΠ°Ρ‰ΠΈΡ… мСстах,
  • β€” быстрый ΠΈ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ процСсс бронирования.

Π©Π΅Π»Ρ‡ΠΎΠΊ ΠΏΠΎ ΠΊΠ°Ρ€Ρ‚Π΅ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Ρ‚ вас прямо ΠΊ ΠΏΡƒΡ‚Π΅Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŽ ΠΏΠΎ ΠΌΠ°Ρ€ΡˆΡ€ΡƒΡ‚Ρƒ ΠΈΠ· вашСго Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π³ΠΎ мСстополоТСния, Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΉ Π²Ρ‹ΡˆΠ΅ Π½ΠΎΠΌΠ΅Ρ€ Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π° вводится Π² Π½ΠΎΠΌΠ΅Ρ€ΠΎΠ½Π°Π±ΠΈΡ€Π°Ρ‚Π΅Π»ΡŒ вашСго Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π° ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ.

8 способов ΠΏΠΎΠ²Ρ‹ΡΠΈΡ‚ΡŒ коэффициСнт конвСрсии Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах

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

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

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ бСсплатноС руководство

6. Π’ΡƒΡ€Π΅Ρ†ΠΊΠΈΠ΅ Π°Π²ΠΈΠ°Π»ΠΈΠ½ΠΈΠΈ

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

7. Π˜ΠšΠ•Π

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ интСрСсный ΠΏΡ€ΠΈΠΌΠ΅Ρ€ β€” ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ сайт Π˜ΠšΠ•Π. Он ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ для смартфонов Π²Π΅Ρ€ΡΠΈΡŽ с Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ m-dot с ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌΠΈ мСню ΠΈ просмотром ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ², Π° Ρ‚Π°ΠΊΠΆΠ΅ выдСляСт ΠΎΠΏΡ†ΠΈΡŽ списка ΠΏΠΎΠΊΡƒΠΏΠΎΠΊ, которая Π½Π° Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½ΠΎΠΌ сайтС Π³ΠΎΡ€Π°Π·Π΄ΠΎ ΠΌΠ΅Π½Π΅Π΅ Π·Π°ΠΌΠ΅Ρ‚Π½Π°. ΠžΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎ, это Π½Π°Ρ†Π΅Π»Π΅Π½ΠΎ Π½Π° ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ², Ρƒ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π΅ΡΡ‚ΡŒ свои Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Ρ‹, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ Π΄Π΅Π»Π°ΡŽΡ‚ ΠΏΠΎΠΊΡƒΠΏΠΊΠΈ Π² ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΌ мСстС.

8. AccuWeather

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

9. HostelWorld.com

Hostelworld.com β€” это Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π²Π΅Π±-сайта, ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π½Π° ΠΏΡƒΡ‚Π΅ΡˆΠ΅ΡΡ‚Π²ΠΈΡ, Π² этом спискС, ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½ΠΎΠ³ΠΎ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… посСтитСлСй с ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ интСрфСйсом.На Π²Π΅Π±-сайтС Hostelworld m-dot Π΅ΡΡ‚ΡŒ поисковая систСма, оптимизированная для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ Β«Π’Π΅ΠΊΡƒΡ‰Π΅Π΅ мСстополоТСниС» с использованиСм GPS.

10. Adidas

Adidas прСдоставляСт своим ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΌ посСтитСлям Π²Π΅Π±-сайт с m-Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΠΌΠΈΡ‚ΠΈΡ€ΡƒΠ΅Ρ‚ Π²Π΅Π±-сайт для Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ΠΎΠ², обСспСчивая бСспроблСмный ΠΎΠΏΡ‹Ρ‚. Он ΠΈΠΌΠ΅Π΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ свСтлыС изобраТСния ΠΈ ΡƒΠΏΡ€ΠΎΡ‰Π΅Π½Π½Ρ‹ΠΉ процСсс ΠΏΠΎΠΊΡƒΠΏΠΎΠΊ.

Π‘Ρ€Π°Π²Π½Π΅Π½ΠΈΠ΅ вСса страниц

ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ вашСго Π²Π΅Π±-сайта для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΡΠ½ΠΈΠ·ΠΈΡ‚ΡŒ вСс страницы Π΄ΠΎ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌΠ°.Π’ΠΎΡ‚ Ρ‚Π°Π±Π»ΠΈΡ†Π°, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ сравниваСтся вСс страницы Π² ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹Ρ… Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ… AWD, ΠΈΠ·ΠΌΠ΅Ρ€Π΅Π½Π½Ρ‹ΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ Firefox ΠšΡ€ΠΈΡΠ° ΠŸΠ΅Π΄Π΅Ρ€ΠΈΠΊΠ°.

Π’Π΅Π±-сайт ВСс мобильной страницы ВСс Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½ΠΎΠΉ страницы Π‘ΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΈ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ΠΎΠ²
Maplin 1756KB 1921KB 1: 1
Home Depot 1158KB 1928KB 3: 5
ΠšΠΎΡ€ΠΊΠΎΡ€Π°Π½ 1811KB 4768KB 3: 8
IHG 1388KB 2492KB 5: 9
ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΉ стол 1131KB 2252 ΠšΠ‘ 1: 2
Π’ΡƒΡ€Π΅Ρ†ΠΊΠΈΠ΅ Π°Π²ΠΈΠ°Π»ΠΈΠ½ΠΈΠΈ 1664KB 3810KB 3: 7
Π˜ΠšΠ•Π 1388KB 2492KB 5: 9
AccuWeather 1019KB 3262KB 1: 3
Hostelworld 216KB 900KB 1: 4
Adidas 2358KB 4974KB 1: 2

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

ΠžΠ±Π·ΠΎΡ€ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΊΠ°Ρ€Ρ‚ β€” АдаптивныС ΠΊΠ°Ρ€Ρ‚Ρ‹

  • 3 ΠΌΠΈΠ½ΡƒΡ‚Ρ‹ Π½Π° Ρ‡Ρ‚Π΅Π½ΠΈΠ΅

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅

Adaptive Cards β€” это ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ ΠΎΠ±ΠΌΠ΅Π½Π° ΠΊΠ°Ρ€Ρ‚Π°ΠΌΠΈ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΉ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ ΠΎΠ±ΠΌΠ΅Π½ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΌ ΠΈ согласованным способом.

Как ΠΎΠ½ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚

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

НапримСр, Contoso Bot ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΡƒ Ρ‡Π΅Ρ€Π΅Π· Bot Framework, ΠΈ ΠΏΡ€ΠΈ доставкС Π² Skype ΠΎΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΈ ΠΎΡ‰ΡƒΡ‰Π°Ρ‚ΡŒΡΡ ΠΊΠ°ΠΊ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ° Skype. Когда Ρ‚Π° ΠΆΠ΅ полСзная Π½Π°Π³Ρ€ΡƒΠ·ΠΊΠ° отправляСтся Π² Microsoft Teams, ΠΎΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΈ ΠΎΡ‰ΡƒΡ‰Π°Ρ‚ΡŒΡΡ ΠΊΠ°ΠΊ Microsoft Teams. По ΠΌΠ΅Ρ€Π΅ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ всС большС хост-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΊΠ°Ρ€Ρ‚Ρ‹, Ρ‚Π° ΠΆΠ΅ самая полСзная Π½Π°Π³Ρ€ΡƒΠ·ΠΊΠ° автоматичСски загораСтся Π²Π½ΡƒΡ‚Ρ€ΠΈ этих ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, Π½ΠΎ ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ ощущаСтся ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Ρ€ΠΎΠ΄Π½ΠΎΠΉ для прилоТСния.

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

Π“ΠΎΠ»Ρ‹

Π¦Π΅Π»ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ:

  • Portable β€” для любого прилоТСния, устройства ΠΈ инфраструктуры ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса
  • ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ β€” Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΠΈ схСмы с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ ΠΈ совмСстно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ
  • Низкая ΡΡ‚ΠΎΠΈΠΌΠΎΡΡ‚ΡŒ β€” Π›Π΅Π³ΠΊΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ
  • Expressive β€” Π½Π°Ρ†Π΅Π»Π΅Π½ΠΎ Π½Π° Π΄Π»ΠΈΠ½Π½Ρ‹ΠΉ хвост ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ хотят ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒ
  • Чисто Π΄Π΅ΠΊΠ»Π°Ρ€Π°Ρ‚ΠΈΠ²Π½ΠΎ β€” Код Π½Π΅ трСбуСтся ΠΈ Π½Π΅ допускаСтся
  • Π‘ автоматичСским ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ΠΌ β€” К хост-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡŽ UX ΠΈ руководящиС ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹ Π±Ρ€Π΅Π½Π΄Π°

Авторам ΠΊΠ°Ρ€Ρ‚

АдаптивныС ΠΊΠ°Ρ€Ρ‚Ρ‹ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ подходят для Π°Π²Ρ‚ΠΎΡ€ΠΎΠ² ΠΊΠ°Ρ€Ρ‚:

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

Для ΠΎΠΏΡ‹Ρ‚Π½Ρ‹Ρ… Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Π΅Π²

Если Π²Ρ‹ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ…ΠΎΡ‡Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ экосистСму стороннСго ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, Π²Π°ΠΌ понравятся Adaptive Cards, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ:

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

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹ проСктирования

Adaptive Cards Ρ€ΡƒΠΊΠΎΠ²ΠΎΠ΄ΡΡ‚Π²ΡƒΡŽΡ‚ΡΡ Π½Π°Π±ΠΎΡ€ΠΎΠΌ руководящих ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³Π»ΠΈ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ Π² Π½ΡƒΠΆΠ½ΠΎΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ.

БСмантичСский вмСсто Ρ‚ΠΎΡ‡Π½ΠΎΠ³ΠΎ Π΄ΠΎ пиксСля

ΠœΡ‹ ΡΡ‚Ρ€Π΅ΠΌΠΈΠ»ΠΈΡΡŒ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ большС ΠΊ сСмантичСским значСниям ΠΈ концСпциям, Π° Π½Π΅ ΠΊ ΠΌΠ°ΠΊΠ΅Ρ‚Ρƒ, идСально подходящСму для пиксСлСй. ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ сСмантичСского выраТСния ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π² Ρ†Π²Π΅Ρ‚Π°Ρ…, Ρ€Π°Π·ΠΌΠ΅Ρ€Π°Ρ… ΠΈ Π² Ρ‚Π°ΠΊΠΈΡ… элСмСнтах, ΠΊΠ°ΠΊ FactSet ΠΈ ImageSet. ВсС это позволяСт Π²Π΅Π΄ΡƒΡ‰Π΅ΠΌΡƒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡŽ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ обоснованныС Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΎ фактичСском внСшнСм Π²ΠΈΠ΄Π΅.

ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΏΡ€ΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ‚ Π°Π²Ρ‚ΠΎΡ€Π°ΠΌ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ, внСшний Π²ΠΈΠ΄ ΠΏΡ€ΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ‚ Host App

Авторы ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ Π²Π»Π°Π΄Π΅ΡŽΡ‚ Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ хотят ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Π½ΠΎ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‰Π΅Π΅ это, Π²Π»Π°Π΄Π΅Π΅Ρ‚ внСшним Π²ΠΈΠ΄ΠΎΠΌ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ Π² контСкстС своСго прилоТСния.

Π‘ΡƒΠ΄ΡŒΡ‚Π΅ просты, Π½ΠΎ Π²Ρ‹Ρ€Π°Π·ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹

ΠœΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Adaptive Cards Π±Ρ‹Π»ΠΈ Π²Ρ‹Ρ€Π°Π·ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΈ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ, Π½ΠΎ ΠΌΡ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ структуру ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса. ЦСль состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΡ‡Π½Ρ‹ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ «достаточно Π²Ρ‹Ρ€Π°Π·ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΒ» Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ Markdown достаточно Π²Ρ‹Ρ€Π°Π·ΠΈΡ‚Π΅Π»Π΅Π½ для Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ².

Π‘Π΄Π΅Π»Π°Π² Π°ΠΊΡ†Π΅Π½Ρ‚ Π½Π° простотС ΠΈ Π²Ρ‹Ρ€Π°Π·ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ, Markdown создал Π»Π΅Π³ΠΊΠΎΠ΅ ΠΈ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ описаниС содСрТимого Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°.

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *