Параўноўваючы два розных падыходу да Multi-Device Вэб-дызайн
Спагадны і адаптыўны вэб - дызайн з'яўляюцца метадамі стварэння некалькіх прылад дружалюбных сайтаў , якія добра працуюць на розных памерах экрана. У той час як спагадны вэб - дызайн з дапамогай Google рэкамендуецца і з'яўляецца больш папулярным з двух падыходаў, абодва з гэтых метадаў для некалькіх прылад вэб - дызайну маюць свае моцныя і слабыя бакі іх.
Давайце паглядзім на адрозненні паміж гнуткай і адаптыўнай вэб-дызайну, у прыватнасці, засяродзіўшы ўвагу на гэтых ключавых галінах:
- прастата распрацоўкі
- Ўзровень кантролю ў вас ёсць над дызайнам
- Шырыня прылады падтрымкі / экран
- Як будучы сяброўская рашэнне
- Агульная хуткасць загрузкі і эфектыўнасць сайта
некаторыя вызначэння
Перад тым, як трапіць у нашы бок аб бок параўнання гнуткай і адаптыўнай вэб-дызайну, давайце момант, каб паглядзець на вызначэнне высокага ўзроўню гэтых двух падыходаў.
Спагадны вэб-сайты маюць раскладку вадкасці, якая змяняе і прыстасоўвае незалежна ад памеру экрана выкарыстоўваецца. Медыя - запыты дазваляюць рэагуюць сайты нават змяніць "на ляту" , калі браўзэр змяняе памер.
Адаптыўны дызайн выкарыстоўвае фіксаваныя памеры на аснове загадзя вызначаных кантрольных кропак, каб даць найбольш прыдатны варыянт макета для памеру экрана, які выяўляецца пры першай загрузцы старонкі.
З улікам гэтых агульных азначэнняў ў месцы, давайце звернемся да нашых ключавых напрамках увагі.
прастата распрацоўкі
Найбольш істотнае адрозненне паміж гнуткай і адаптыўнай вэб-дызайн такім чынам, што гэтыя рашэнні прымяняюцца да вэб-сайту. Паколькі адаптыўны дызайн стварае макет цалкам вадкасці, то лепш за ўсё выкарыстоўваць у праектах , дзе вы рэдызайн сайта з нуля . Спроба мадыфікаваць код існуючага вэб-сайта, каб стаць спагадным часта знясільваючы справу, таму што вы проста не маюць узровень кантролю, які вы б, калі б вы распрацоўвалі гэты код з нуля і прымаючы адаптыўны дызайн пад увагу на самых ранніх этапах гэтага працэсу , Гэта азначае, што пры мадэрнізацыі сайта, каб быць спагадлівым, вы вымушаныя ісці на кампрамісы для таго, каб застацца ў гэтым існуючым кодзе.
Калі вы працуеце з існуючай фіксаванай шырынёй сайта, адаптыўны падыход азначае, што вы можаце пакінуць памер, што сайт быў распрацаваны для непашкоджанай і дадаць у дадатковых адаптыўных кропак супыну па меры неабходнасці. У некаторых выпадках, калі бюджэт праекта, з'яўляецца невялікім, і калі ён будзе змяшчаць толькі невялікая колькасць доследна-канструктарскія работ, вы можаце выбраць толькі дадаваць новыя адаптыўныя кантрольныя кропкі для невялікіх экранаў мабільных / арыентаваных памераў. Гэта азначае, што дазволіць больш буйныя экраны ўсё выкарыстоўваюць адзін і той жа макет - магчыма, 960 кропак супыну версія, якая была то, што сайт быў, верагодна, першапачаткова быў распрацаваны.
Годнасць адаптыўнага падыходу заключаецца ў тым, што вы можаце лепш выкарыстоўваць код існуючага сайта, але адзін з недахопаў з'яўляецца тое, што вы ствараеце розныя шаблоны макетаў для кожнай кропкі вы выбіраеце для падтрымкі. Гэта, які будзе аказваць уплыў на рабочую нагрузку, неабходную для распрацоўкі і падтрымання гэтага рашэння ў доўгатэрміновай перспектыве.
дызайн кіравання
Адна з моцных бакоў рэагуюць сайтаў з'яўляецца тое, што іх цякучасць дазваляе ім адаптавацца і падтрымліваць усе памеры экрана ў адрозненне ад толькі папярэдне зададзеных кантрольных кропак, вызначаных у адаптыўным падыходзе. Рэальнасць, аднак, з'яўляецца тое, што рэагуюць сайты могуць выглядаць выдатна на некаторых ключавых памерах экрана (як правіла, памерамі, адпаведныя папулярныя прылады, даступных на рынку), але візуальны дызайн часта ламаецца паміж гэтымі папулярнымі дазволамі.
Напрыклад, сайт можа выглядаць выдатна на макеце шырокага экрана 1400 кропак, аб'ём сярэдняга экрана 960 пікселяў, а маленькі просмотровый экрана на 480 пікселях, але што ў прамежку паміж станамі гэтых памераў? Як дызайнер, вы практычна не маеце кантролю над гэтым на прамежку паміж памерамі і візуальным выглядам старонкі ў тых памерах, часта менш, чым ідэал.
З адаптыўным вэб-сайт, у вас ёсць значна больш кантролю над дызайн розных макетаў выкарыстоўваецца, таму што яны фіксаваныя памеры на аснове вашых устаноўленых кантрольных кропак. Тыя, няёмка, паміж дзяржавамі не з'яўляюцца праблемай больш, таму што вы старанна распрацаваны кожны «выгляд» (гэта значыць адлюстраванне кожнай кропкі супыну), які будзе дастаўлены для наведвальнікаў.
Як прывабны, як гэты ўзровень кантролю дызайну можа гучаць, вы павінны ведаць, што гэта адбываецца па кошце. Так, у вас ёсць поўны кантроль над знешнім выглядам кожнай кропкі супыну, але гэта азначае, што вы павінны інвеставаць час распрацоўкі, неабходныя для праектавання для кожнага з гэтых унікальных макетаў. Чым больш кантрольных кропак вы выбіраеце дызайн для, тым больш часу вам трэба будзе выдаткаваць на гэты працэс.
шырыня падтрымкі
Абодва спагадны і адаптыўны вэб-дызайн карыстаецца даволі надзейнай падтрымкай, асабліва ў сучасных браўзэрах.
Адаптыўныя сайты патрабуюць альбо боку сервера кампанентаў або Javascript для вызначэння памеру экрана. Відавочна, што калі адаптыўны сайт патрабуе Javascript, гэта азначае, што браўзэр павінен быць уключаным для таго, каб сайт працаваў правільна. Гэта не можа быць сур'ёзнай праблемай для вас, так як большасць людзей будзе мець Javascript ў браўзэры, але кожны раз, калі сайт мае крытычную залежнасць ад нічога, варта адзначыць.
Спагадны вэб-сайты і запыты сродкаў масавай інфармацыі, што ўлада іх будуць добра працаваць ва ўсіх сучасных браўзэрах. Адзіныя праблемы , вы будзеце мець гэта з самымі старымі версіямі Internet Explorer , пачынаючы з версіяй 8 і ніжэй не падтрымліваюць медыя - запытаў . Каб абыйсці гэтую праблему , polyfill Javascript часта выкарыстоўваецца , што азначае , што існуе залежнасць ад Javascript і тут, па меншай меры для тых састарэлых версій IE. Зноў жа, гэта не можа быць шмат праблемы для вас, асабліва калі ваш сайта аналітыка паказвае, што вы не атрымаеце шмат наведвальнікаў, выкарыстоўваючы гэтыя старыя версіі браўзэра.
будучыню Прыязнасць
Прырода вадкасці рэагуюць сайтаў дае ім перавагу над адаптыўнай сайтамі, калі гаворка ідзе пра будучыню выгоды. Гэта таму, што гэтыя адчувальныя ўчасткі не пабудаваныя для размяшчэння толькі раней устаноўленага набору кантрольных кропак. Яны прыстасоўваюцца , каб адпавядаць ўсе экраны, у тым ліку тыя , якія не могуць быць на самай справе на рынку сёння. Гэта азначае, што адаптыўныя сайты не павінны быць «фіксаванымі», калі новы дазвол экрана раптам становіцца папулярным.
Гледзячы на неверагоднае разнастайнасць у ландшафт прылады (па стане на жнівень 2015 года налічвалася больш за 24 000 розных Android прылад на рынку), маючы сайт, які робіць усё магчымае, каб размясціць гэты шырокі спектр экранаў з'яўляецца крытычна важным для будучага зручнасць. Гэта адбываецца таму, што ландшафт наўрад ці атрымаюць якія-небудзь менш разнастайна ў будучыні, што азначае, што распрацоўка канкрэтных экранаў або памеры стане немагчымым, калі мы яшчэ не дасягнулі гэтай рэальнасці.
З іншага боку гэтага сцэнара параўнання, калі сайт з'яўляецца адаптыўным і не ўлічвае новых рашэнняў, якія могуць стаць важным на рынку, то тады вы можаце быць вымушаны дадаць, што кропка супыну на сайты, якія вы стварылі. Гэта дадае праектавання і распрацоўкі часу на праекты, і гэта азначае, што гэтыя адаптыўныя сайты павінны быць паслядоўна правераныя, каб гарантаваць, што ніякія новыя кантрольныя кропкі не былі ўведзеныя ў рынак, які павінен быць дададзены на сайт. Зноў жа, з разнастайнасцю прылады з'яўляецца тое, што ён, маючы пастаянна правяраць наяўнасць новых памераў і магчымасці размясціць іх новымі кантрольнымі кропкамі з'яўляецца пастаяннай праблемай, якая будзе мець уплыў на працу вы павінны падтрымліваць сайт і кошт гэтага абслугоўвання для кампанія або арганізацыя, для якіх сайт для.
прадукцыйнасць
Адаптыўны вэб-дызайн ўжо даўно абвінавачваюць (несправядліва, так і ў многіх выпадках) быць дрэнным рашэннем з пункту гледжання хуткасці загрузкі / прадукцыйнасць. Шмат у чым гэта звязана з тым, што ў першыя дні гэтага падыходу, многія вэб-дызайнеры проста прымацаваў невялікія запыты прасейваюць на існуючы CSS сайта. Гэта прымусіла ладу і рэсурсы, прызначаныя для вялікіх экранаў, якія будуць дастаўлены на ўсе прылады, нават калі гэтыя невялікія экраны не выкарыстоўваць іх у сваіх канчатковых макетах. Адаптыўны дызайн прарабіў доўгі шлях з тых дзён, а рэальнасць такая, што якасць рэагуюць сайты сёння не пакутуюць ад магутнасці сістэмы.
Павольная хуткасць загрузкі і разадзьмутыя сайты не рэагуе праблема сайта - гэта праблема, якую можна знайсці на ўсіх сайты. Выявы, якія занадта цяжкія, сілкуецца ад сацыяльных медыя, празмерных скрыптоў і пры многасьці іншы, і важыць сайт ўніз, але абодва рэагуюць і адаптыўныя вэб-сайты могуць быць пабудаваны для хуткай загрузкі. Вядома, яны таксама могуць быць сканструяваныя такім чынам , што ня робіць прадукцыйнасць з'яўляецца прыярытэтам, але гэта не з'яўляецца прыкмета самога рашэння, а хутчэй адлюстраванне каманды , якая прымала ўдзел у распрацоўцы самога сайта.
Beyond Layout
Адным з найбольш прывабных аспектаў адаптыўнага вэб-дызайну з'яўляецца тое, што ў вас ёсць не толькі кантроль над дызайнам сайта для набору кантрольных кропак, але і рэсурсы, якія пастаўляюцца для гэтых версій сайта. Напрыклад, гэта азначае , што сятчатка малюнак можа быць накіравана толькі на сятчатку прылад, у той час як не-сятчатка экраны атрымаць больш прыдатныя малюнка , якія менш па памеры файла. Іншыя рэсурсы сайта (JavaScript-файлы, стылі CSS і г.д.) могуць быць шыкоўна дастаўлены толькі тады, калі яны неабходныя, і будуць выкарыстоўвацца.
Гэта выкарыстанне адаптыўнага вэба-дызайн, выходзіць далёка за рамкамі простага ўраўненні «калі вы дааснашчэнне сайта, адаптыўны можа быць прасцей падыход да выкарыстання.» Усе сайтаў, у тым ліку поўнага рэдызайну, можа атрымаць выгаду з больш разумнага падыходу да больш адаптаванаму досведу.
Гэты сцэнар паказвае тонкі характар гэтага «рэагаваць супраць адаптыўнага» дэбатаў. Хоць гэта праўда, што адаптыўны падыход можа быць лепш падыходзіць, чым рэагаваць на мадэрнізацыі сайта, ён таксама можа быць выдатным рашэннем для поўнага рэдызайну. Акрамя таго, у некаторых выпадках, спагадны падыход можа быць дададзены на код базы існуючага сайта, даючы, што сайт ўсе перавагі цалкам спагадным падыходу.
Які падыход лепш?
Калі справа даходзіць да спагадным супраць адаптыўнага вэб-дызайну, не ясна, «пераможца», хоць у адказ, безумоўна, з'яўляецца больш папулярным падыходам. Па праўдзе кажучы, «лепш» падыход залежыць ад патрэбаў канкрэтнага праекта. Акрамя таго, гэта не трэба быць «ці / або» сітуацыя. Ёсць шмат вэб-прафесіяналаў, якія будуюць сайты, якія спалучаюць у сабе лепшыя спагадлівага вэб-дызайну (вадкасці шырынёй, у будучыні падтрымка) з моцнымі адаптыўнага дызайну (лепшага кантролю праектавання, смарт загрузкі рэсурсаў сайта).
Звычайна вядомы як ССГ (Адаптыўны вэб-дызайн з кампанентамі на боку сервера), гэты падыход паказвае, што на самой справе няма «адзін памер падыходзіць ўсім рашэнне.» Як рэагаваць вэб-дызайн і адаптыўная маюць свае моцныя бакі і свае праблемы, так што вы павінны вызначыць, які з іх будзе працаваць лепш для вашага канкрэтнага праекта, або калі гібрыднае рашэнне можа на самай справе падыдзе вам лепш за ўсё.