Кроссбраузерная вёрстка, "прываблівае" пошукавыя сістэмы

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

Што сабой уяўляе кроссбраузерная вёрстка?

Html / css - гэта аснова пры стварэнні сайта. Многія вэб-майстры падыходзяць да гэтага па прынцыпе: мне добра - і хопіць. І як жа непрыемна бывае, калі заходзіш са свайго браўзэра або мабільнага прылады, а сайт адлюстроўваецца няправільна. У такіх выпадках на дапамогу прыходзіць адаптыўны дызайн і кроссбраузерная вёрстка.

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

Пакрокавае кіраўніцтва ў агульных рысах

Такім чынам, давайце разгледзім, як зрабіць кроссбраузерную вёрстку. Першапачаткова варта вызначыцца, з якімі праграмамі сайт будзе працаваць. Прыміце да ведама, што колькасць браўзэраў набліжаецца да двух сотням, таму спрабаваць дагадзіць усім - справа неймавернай складанасці. Таму выбіраюць лік у дыяпазоне ад 3 да 8. Каб вызначыцца, на што арыентавацца, можна скарыстацца і дапаможнымі сэрвісамі накшталт Yandex Metrika і Google Analytics. Пасля гэтага варта высветліць, як жа будзе вырашацца праблема дасягнення кроссбраузерности.

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

адаптыўны дызайн

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

Ёсць такія браўзэры, як Opera і Opera Mini. на мобильных телефонах. Першы выкарыстоўваецца на звычайных кампутарах, а другі - на мабільных тэлефонах. У цэлым яны падобныя, але маюць цэлы шэраг асаблівасцяў. У такіх выпадках важным з'яўляецца падлучэнне асобных файлаў і / або жа выкарыстанне медиазапросов. Што ж гэта такое? У першым выпадку ствараюцца асобныя файлы, якія накіраваны на працу канкрэтнага браўзэра, і прапісваецца іх выклік. У другім выпадку неабходныя файлы з медиазапросами. Калі выкарыстоўваная праграма адпавядае спецыфічным патрабаванням, то падгружаецца файл у патрэбнай канфігурацыі.

Што трэба рабіць?

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

У яе шырыня была зададзена ў памеры 800рх. З экранам у 1600рх гэта будзе даволі прывабна. А вось на 700рх яна будзе глядзецца недарэчна. Што рабіць у такім выпадку? Можна задаць памер не ў пікселях, а ў працэнтах! І займаць надпіс будзе не фіксаваную даўжыню, а палову шырыні экрана. У працэнтах можна задаваць і адлегласць, на якім ад краёў экрана будзе размешчаны асобны элемэнт. Але вось што рабіць, калі экран занадта ўжо маленькі?

Дапусцім, ён складае 300рх? У гэтым выпадку нам дапаможа медиазапрос, якому неабходна прапісаць фіксаванне шырыні. І калі яна складае 700рх і менш, то можна ўсталяваць, што надпіс будзе займаць 75% месцы. А калі шырыня складае 300рх і менш, то можна выставіць і ўсе 100%. У цэлым тэма вельмі цікавая і карысная, таму яе можна вывучыць вельмі падрабязна. Але, на жаль, тут інфармацыі на кнігу, і змясціць усё ў артыкул не атрымаецца.

Чаму кроссбраузерная адаптыўная вёрстка прыцягвае пошукавыя сістэмы?

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

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

заключэнне

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