Адаптыўная вёрстка для сайтаў

Чым больш папулярнымі становяцца мабільныя прылады, тым мацней адчуваецца дыскамфорт пры скролінг большасці сайтаў. Менавіта таму, пачынаючы з 2012 года, вэб-майстрамі стала выкарыстоўвацца рашэнне, якое робіць прагляд рэсурсаў на экранах з невялікім дазволам больш камфортным, - адаптыўная вёрстка.

сучасная тэндэнцыя

Сёння каля пяці мільярдаў людзей на Зямлі выкарыстоўваюць мабільныя тэлефоны, пры гэтым трэць з іх маюць смартфоны. Таму мабільны трафік набывае ўсё большае значэнне для ўладальнікаў сайтаў. Верагодна, такі крыніца наведвальнікаў з часам будзе толькі расці.

Пошукавыя сістэмы аператыўна прарэагавалі на такую тэндэнцыю. Вялікія карпарацыі "Яндэкс" і Google ўнеслі істотныя змены ў свае алгарытмы ранжыравання сайтаў у пошукавай выдачы з улікам наяўнасці адаптыўнай вёрсткі і дызайну. Прасцей кажучы, вэб-рэсурсы, аптымізаваныя для мабільных тэлефонаў, смартфонаў і планшэтаў, будуць мець некаторую перавагу перад сваімі канкурэнтамі.

Вызначэнне адаптыўнай вёрсткі

Адаптыўная вёрстка - метад стварэння каркаса вэб-старонкі, аўтаматычна змяняе размяшчэнне блокаў у адпаведнасці з дазволам экрана прылады, на якім яна праглядаецца. Гэта значыць пры такім падыходзе ствараюцца асобныя стылі для самых розных дазволаў. Такі эфект дасягаецца асаблівым напісаннем CSS-файлаў. Раней праблема вырашалася некалькі інакш. Распрацоўнікам даводзілася здзяйсняць значна больш «рухаў цела», ствараючы вёрстку і дызайн асноўнай версіі сайта і тое ж самае робячы для мабільнай. У залежнасці ад экрана прылады, на якім праглядаўся інтэрнэт-праект з наяўнай мабільнай платформай, запускалася падыходная версія сайта.

Такі падыход шмат у чым сябе не апраўдваў, і большасць вэб-майстроў так і не ўзяліся за стварэнне мабільнай версіі. Цяпер на змену такому парадку прыйшла адаптыўная вёрстка. Ствараючы каркас сайта пры дапамозе такой тэхналогіі, вэб-майстар канцэнтруе ўсе свае намаганні на стварэнні адной версіі праекта, а наведвальнікі могуць з аднолькавым узроўнем камфорту праглядаць яго як на вялікім экране кампутара, так і на мабільным тэлефоне, смартфоне або планшэце.

Годнасці адаптыўнага макета

Якія вартасці мае адаптыўная вёрстка сайтаў? Раней было адзначана, што плюсам з'яўляецца карэктнае адлюстраванне ўсіх блокаў старонкі на любым прыладзе. Таксама станоўчым аспектам такога падыходу ў стварэнні шаблону можна назваць хуткасць рэалізацыі змен. Што гэта значыць?


Пры наяўнасці ў сайта двух платформаў занесеныя ў вёрстку змены трэба было спачатку рэалізаваць у рабочай версіі, а пасля - у мабільнай. Калі праўкі ў кодзе былі даволі істотнымі, то працэс унясення такіх зменаў мог моцна зацягнуцца. Пры адаптыўнай вёрстцы праца над сайтам вядзецца ў адным файле. Змены, унесеныя ў макет вэб-старонкі, будуць аднолькава хутка адлюстроўвацца як у рабочай версіі, так і ў мабільнай.

Мінусам такога падыходу некаторыя вэб-майстры называюць складанасць яго рэалізацыі. Але з з'яўленнем CSS 3 стварыць шаблон адаптыўнай вёрсткі стала зусім проста. Нават не самыя дасведчаныя вэб-майстры могуць зрабіць свой сайт зручным для прагляду на мабільных прыладах.

Прынцыпы і асаблівасці адаптыўнай вёрсткі

Якія прынцыпы ляжаць у аснове метаду адаптыўнай вёрсткі ў вэб-дызайне?

- Выкарыстанне «гумовага» тыпу макета.

- «Гумовыя» малюнка.

- Выкарыстанне медиазапросов (media-queries).

- Неабходнасць думаць аб мабільных прыладах з самага пачатку стварэння вёрсткі.

З гэтых асноватворных прынцыпаў такога метаду стварэння шаблону выцякаюць наступныя асаблівасці адаптыўнай вёрсткі:

1. Праектаванне і стварэнне дызайну сайта з улікам працы на ўсім спектры дазволаў: ад мабільных да шырокафарматных дысплеяў.

2. Вёрстка з дапамогай каскадных табліц стыляў з выкарыстаннем тэхналогіі медиазапросов, якая з'явілася ў CSS 3.

3. Праграмаванне на баку як кліента, так і сервера для перадачы мабільным прыладам малюнка меншага аб'ёму і дазволу.

Важны аспект, з улікам якога ствараецца адаптыўная вёрстка, - дазволу матрыцы папулярных электронных прылад. Такі падыход у распрацоўцы дызайну зробіць прагляд вэб-старонак на любым экране вельмі камфортным. Але як даведацца, якія з іх варта ўключаць у стылі?

З чаго пачаць вёрстку адаптыўнага макета?

Большасць сайтаў зроблены так, што на экранах смартфонаў і планшэтаў з'яўляюцца паласы пракруткі, якія не гэтак зручныя для серфінгу, а дызайн і вёрстка шматлікіх інтэрнэт-праектаў проста «плывуць». На сайтах, створаных для навучання вэб-дызайне, сабраны самыя розныя дазволу экранаў розных прылад, пад якія варта вярстаць старонкі свайго сайта.
Адаптыўная вёрстка, прыклады якой можна сустрэць даволі часта, мае масу добрых якасцяў. Што варта памятаць пры такім падыходзе да стварэння макета старонак?

Прыступіўшы да працы над шаблонам, важна перыядычна тэставаць, наколькі ўдала адлюстроўваецца кантэнт і блокі макета на розных экранах. Для гэтага часам дастаткова проста змяніць шырыню акна браўзэра. Файл са стылямі атрымлівае медиазапрос і змяняе размяшчэнне блокаў, уносячы істотныя змены. Добрым інструментам для тэставання шаблону адаптыўнай вёрсткі могуць стаць сайты, якія імітуюць экраны мабільных прылад розных мадэляў. Такія сэрвісы дазволяць ўважліва разгледзець і ацаніць, як глядзіцца дызайн на дысплеях самых розных мабільных прылад.

Хоць тэхналогія такога адаптыўнага макета не гэтак простая, яе засваенне прынясе плён ўжо вельмі хутка.