Споредба на два различни пристапи кон мулти-уред веб дизајн
Отворени и адаптивни веб дизајн се методи за создавање на мулти-уред пријателски веб-сајтови кои работат добро на различни големини на екранот. Додека одговорен веб дизајн е препорачан од Google и е попопуларен од двата пристапи, и двата од овие методи за мулти-уред веб дизајн имаат свои предности и нивните слабости.
Ајде да ги разгледаме разликите помеѓу реагирачкиот и адаптивниот веб дизајн, посебно фокусирајќи се на овие клучни области:
- Леснотија на развој
- Нивото на контрола што го имате над дизајнот
- Ширина на поддршка за уред / екран
- Како идното пријателско решение е
- Целосна брзина на преземање и перформанси на сајтот
Некои дефиниции
Пред да влеземе во споредба со придружниот и адаптивен веб-дизајн, да земеме еден миг да погледнеме на високо ниво дефинирање на овие два пристапа.
Отворени веб-страници имаат изглед на течност што се менува и се прилагодува, без оглед на големината на екранот што се користи. Медиумските пребарувања дозволуваат локации што реагираат да се променат дури и "во лет" ако прелистувачот е променет.
Адаптивниот дизајн користи фиксни големини врз основа на претходно утврдени точки на прекин за да ја испорача најсоодветната верзија на распоред за големината на екранот што се открива кога страната прво се вчитува.
Со овие широки дефиниции на место, ајде да се свртиме кон нашите клучни области на фокус.
Леснотија на развојот
Најзначајната разлика помеѓу одзивниот и адаптивниот веб дизајн е во начинот на кој овие решенија се применуваат на веб-страница. Бидејќи реагирачкиот дизајн создава потполно флуиден распоред, најдобро се користи за проекти каде што го редизајнирате локацијата од земјата . Обидувајќи се да го обновите постоечкиот веб-сајт за да одговорите е често исцрпувачки афера затоа што едноставно немате ниво на контрола што би го имале доколку го развивте тој код од нула и земајќи одговорен дизајн во предвид за најраните фази од тој процес . Ова значи дека кога ќе го обновите сајтот за да одговорите, вие сте принудени да направите компромиси за да останете во рамките на постоечката кодирана база.
Ако работите со постоечка веб-локација со фиксна ширина, адаптивниот приод значи дека можете да ја оставите големината дека страницата е дизајнирана за недопрена и да додадете дополнителни адаптивни точки на прекин по потреба. Во некои случаи, ако буџетот на проектот е мал, и ако тоа само ќе се приспособат на мала количина на развојни активности, можете да одберете да додадете нови адаптивни пречки за помали екран / мобилни-центрични големини. Ова значи дека ќе им овозможи на поголеми екрани за сите да го користат истиот изглед - можеби 960 верзија на точката на прекршување која беше она за што таа локација најверојатно била првично дизајнирана.
Превртеноста на адаптивниот пристап е тоа што можете подобро да го искористите кодот на постоечкиот сајт, но една од downsides е тоа што создавате различни шаблони на распоред за секоја точка на препреки што ќе ја изберете. Ова што ќе има влијание врз обемот на работа потребен за развој и одржување на ова решение на долг рок.
Контрола на дизајн
Една од предностите на веб-страниците што реагираат е тоа што нивната флуидност им овозможува да се прилагодат и да ги поддржат сите големини на екранот, за разлика од претходно поставените гранични точки определени со адаптивен приод. Реалноста, сепак, е дека одговорите сајтови може да изгледаат одлично на одредени клучни големини на екранот (обично големини кои одговараат на популарните уреди достапни на пазарот), но визуелниот дизајн често се распаѓа меѓу оние популарни резолуции.
На пример, веб-страницата може да изгледа одлично на широк екран со големина од 1400 пиксели, големина на среден екран од 960 пиксели и малиот екран со 480 пиксели, но што е со меѓусебните состојби на овие големини? Како дизајнер, немате никаква контрола врз овие меѓу-големини и визуелниот изглед на страницата во тие големини често е помалку од идеален.
Со адаптивна веб-локација, имате многу повеќе контрола на дизајнот врз различните распореди што се користат, бидејќи тие се фиксни големини врз основа на вашите воспоставени гранични точки. Оние непријатни меѓу државите веќе не се проблем, бидејќи внимателно го дизајниравте секој изглед (што значи дисплеј на секоја точка на размена), кој ќе биде доставен до посетителите.
Како атрактивен, бидејќи ова ниво на контрола на дизајнот може да звучи, мора да бидете свесни дека станува збор за цена. Да, имате целосна контрола врз изгледот на секоја точка на прекин, но тоа значи дека мора да го инвестирате времето за дизајн што е потребно за дизајнирање за секој од тие уникатни распореди. Колку повеќе гранични точки ќе одберете да дизајнирате, толку повеќе време ќе треба да потрошите за тој процес.
Ширина на поддршка
И одговорен и адаптивен веб дизајн ужива прилично робусна поддршка, особено во современите прелистувачи.
Адаптивните веб-страници бараат или компоненти на серверот или Javascript за откривање на големината на екранот. Очигледно, ако адаптивното место бара Javascript, тоа значи дека прелистувачот треба да го овозможи за да работи правилно. Тоа не може да биде голема грижа за вас, бидејќи повеќето луѓе ќе имаат Javascript во нивните прелистувачи, но во секое време веб-сајтот има критична зависност од било што, тоа треба да се забележи.
Отворените веб-страници и медиумските пребарувања што ќе ги напојуваат ќе функционираат добро во сите современи прелистувачи. Единствените проблеми што ќе ги имате се со најстарите верзии на Internet Explorer, бидејќи верзиите 8 и подолу не ги поддржуваат медиумските пребарувања . За да се работи околу ова , често се користи полифаил за Javascript , што значи дека постои и зависност од Javascript тука, барем за оние застарени верзии на IE. Повторно, ова можеби не е грижа за вас, особено ако анализата на вашиот сајт покаже дека не добивате многу посетители со користење на постарите верзии на прелистувачот.
Идната пријатеност
Флуидната природа на одговораните веб-страници им дава предност во однос на адаптивни сајтови кога станува збор за иднината-пријателство. Ова е затоа што оние одговора сајтови не се изградени за да се приспособат само на претходно воспоставениот сет на точки на прекин. Тие се прилагодуваат за да ги соберат сите екрани , вклучувајќи ги и оние кои можеби всушност не се присутни на пазарот денес. Ова значи дека одговора сајтови нема да треба да бидат "фиксни" ако нова резолуција на екранот одеднаш станува популарна.
Гледајќи ја неверојатната разновидност во пејзажот на уредот (од август 2015 година имаше повеќе од 24.000 различни Android уреди на пазарот), имајќи веб-сајт кој прави се што е најдобро да се приспособат на овој широк спектар на екрани е од клучно значење за иднината-пријателство. Ова е затоа што тој пејзаж веројатно нема да биде помалку разновиден во иднина, што значи дека дизајнирањето за специфични екрани или големини ќе стане невозможно, ако веќе не ја достигнавме таа реалност.
Од друга страна на ова споредбено сценарио, ако некоја страница е прилагодлива и не одговара на нови резолуции кои можат да станат важни на пазарот, тогаш може да бидете принудени да ја додадете таа точка на прекин на веб-сајтовите што сте ги создале. Ова додава време на проектирање и развој на проекти и тоа значи дека овие адаптивни сајтови мора да бидат постојано следени за да се осигура дека нема нови точки на прекин на пазарот што мора да се додадат на страницата. Повторно, со различноста на уредот што е она што е, мора постојано да проверувате за нови големини и можно да ги приспособите со нови точки на прекин е тековен предизвик кој ќе има влијание врз работата што мора да ја поддржите страницата и трошокот за тоа одржување за компанијата или организацијата за која се наоѓа веб-страницата.
Перформанси
Отворениот веб-дизајн долго време е обвинет (неправедно, па во многу случаи) да биде лошо решение од ставот за брзина на преземање / перформанси. Ова во голема мера се должи на фактот дека во раните денови на овој пристап, многу веб-дизајнери едноставно ги опфаќаа медиумските пребарувања на мал екран на постоечки CSS на страницата. Ова ги принуди сликите и ресурсите наменети за поголеми екрани да бидат испорачани на сите уреди, дури и ако тие помали екрани не ги користеа во нивните последни распореди. Реагирачки дизајн е долг пат од тие денови и реалноста е дека квалитетно одговорите сајтови денес не страдаат од перформанси проблеми.
Бавните брзини на преземање и подуените веб-страници не се одговорачки проблем на веб-сајтот - тоа е проблем што може да се најде на сите веб-страници. Сликите кои се премногу тешки, се храни од социјалните медиуми, прекумерните скрипти и многу повеќе и тежат еден сајт надолу, но и одговора и прилагодливи веб-страници можат да бидат изградени за брзо подигнување. Се разбира , тие исто така може да се конструираат на начин кој не дава перформанси како приоритет, но тоа не е особина на самиот раствор, туку рефлексија на тимот кој бил вклучен во развојот на самата локација.
Надвор од распределбата
Еден од најинтересните аспекти на адаптивниот веб дизајн е тоа што вие не само што имате контрола над дизајнот на страницата за поставени точки на прекин, туку исто така и ресурсите што се испорачуваат за тие веб-страници. На пример, ова значи дека сликите на мрежницата можат да се праќаат само на мрежницата, додека не-мрежницата добива посоодветни слики кои се помали во големината на датотеката. Други ресурси на веб-сајтови (Javascript-датотеки, стилови на CSS, итн.) Може да бидат умно предадени само кога се потребни и ќе се користат.
Оваа употреба на адаптивниот веб-дизајн оди подалеку од едноставната равенка на "ако ја реинтектирате веб-страница, адаптивниот може да биде полесен пристап за користење". Сите веб-сајтови, вклучувајќи ги и целосните редизајни, можат да имаат корист од попаметен пристап кон поприлагоденото искуство.
Ова сценарио ја покажува нијансираната природа на оваа "деликатна наспроти адаптивна" дебата. Додека е вистина дека адаптивниот пристап може да биде подобар одошто од одговорот на реинтеграцијата на теренот, исто така може да биде одлично решение за целосно редизајнирање. Слично на тоа, во некои случаи може да се додаде и пристапен пристап кон кодот на базата на постоечки сајт, давајќи му на тој сајт сите придобивки од целосно одговорен приод.
Кој пристап е подобар?
Кога станува збор за реагирачки наспроти адаптивниот веб-дизајн, не постои јасен "победник", иако одговорот, секако, е повеќе популарен пристап. Всушност, "подобар" пристап зависи од потребите на конкретен проект. Понатаму, ова не мора да биде "или / или" ситуација. Постојат многу веб-професионалци кои градат сајтови кои го комбинираат најдоброто од реагираниот веб-дизајн (ширина на течност, идна поддршка) со предностите на адаптивниот дизајн (подобра контрола на дизајнот, паметно вчитување на ресурсите на сајтот).
Позната како RESS (Отворени Веб Дизајн со компоненти на серверот), овој пристап покажува дека навистина не постои "една големина која одговара на сите решенија". Двата реагирачки веб-дизајни и адаптивни имаат свои предности и предизвици, па затоа треба да одредите кој ќе работи најдобро за вашиот конкретен проект, или ако хибридното решение навистина може да ви одговара.