Сравняване на два различни подхода към уеб дизайна с множество устройства
Отзивчивият и адаптивен уеб дизайн са и двата метода за създаване на многопотребителски уеб сайтове, които работят добре на различни размери на екрана. Докато отзивчивият уеб дизайн се препоръчва от Google и е по-популярен от двата подхода, и двата метода за уеб дизайна с много устройства имат своите силни страни и слабости.
Нека да разгледаме разликите между адаптивния и адаптивен уеб дизайн, съсредоточен специално върху следните ключови области:
- Лекота на развитие
- Нивото на контрол над дизайна
- Ширина на устройството / екранната поддръжка
- Как бъдещето е приятелско решение
- Обща скорост на изтегляне и ефективност на сайта
Някои дефиниции
Преди да се доберем до съпоставянето на отзивчивия и адаптивен уеб дизайн, нека да отделим малко време, за да разгледаме дефиницията на тези два подхода на високо ниво.
Отзивчивите уеб сайтове имат плавно оформление, което се променя и адаптира независимо от размера на екрана, който се използва. Заявките на медиите позволяват на отзивчивите сайтове дори да се променят "в движение", ако браузърът е преоразмерен.
Адаптивният дизайн използва фиксирани размери въз основа на предварително определени гранични стойности, за да предостави най-подходящата версия на оформлението за размера на екрана, който се установява при първоначалното зареждане на страницата.
С тези широки определения, нека се обърнем към ключовите си области на фокус.
Лекота на развитие
Най-съществената разлика между адаптивния и адаптивния уеб дизайн е в това, че тези решения се прилагат към уебсайт. Тъй като отзивчивият дизайн създава напълно флуидно оформление, той най-добре се използва за проекти, при които реконструирате сайта отгоре . Опитвайки се да модернизирате кода на съществуващия уебсайт, за да реагирате, често е изтощителна работа, защото просто нямате нивото на контрол, което бихте имал, ако разработвате този код от самото начало и вземате отзивчив дизайн в предвид за най-ранните етапи от този процес , Това означава, че когато преоборудвате сайт, за да реагирате, вие сте принудени да правите компромиси, за да останете в рамките на тази съществуваща кодова база.
Ако работите със съществуващ уеб сайт с фиксирана ширина, адаптивен подход означава, че можете да оставите размера, който сайтът е проектиран за непокътнати, и да добавите допълнителни адаптивни прекъсвачи, ако е необходимо. В някои случаи, ако бюджетът на даден проект е малък и ако ще се погрижи само малка част от разработката, можете да изберете само да добавите нови адаптивни гранични стойности за по-малки размери на екрана / мобилните центрове. Това означава, че бихте позволили на по-големите екрани за всички да използват същото оформление - може би версия 960 с точка на прекъсване, за която първоначално е бил проектиран този сайт.
В посока към адаптивен подход е, че можете да използвате по-добре кода на съществуващ сайт, но едно от недостатъците е, че създавате различни шаблони за оформление за всяка точка на прекъсване, която избирате да поддържате. Това ще окаже влияние върху работното натоварване, необходимо за разработването и поддържането на това решение в дългосрочен план.
Контрол на дизайна
Една от силните страни на отзивчивите уеб сайтове е, че тяхната плавност позволява да се адаптират и поддържат всички размери на екрана, а не само предварително зададените гранични стойности, определени в адаптивен подход. Реалността обаче е, че отзивчивите сайтове могат да изглеждат страхотно при някои ключови размери на екрана (обикновено размери, които съответстват на популярните устройства, налични на пазара), но визуалният дизайн често се разпада между тези популярни резолюции.
Например, сайтът може да изглежда страхотно при широкоекранното оформление от 1400 пиксела, средния размер на екрана от 960 пиксела, а малкият екран изглежда на 480 пиксела, но какво ще кажеш за състоянията между тези размери? Като дизайнер имате малко или никакъв контрол над тези между размерите, а визуалният облик на страницата с тези размери често е по-малко от идеален.
С адаптивен уебсайт имате много по-голям контрол върху дизайна на различните оформления, които се използват, защото са с фиксирани размери, базирани на установените ви гранични стойности. Тези неловки между държави не са проблем, защото сте внимателно проектирали всеки "поглед" (означаващ всеки дисплей на прекъсване), който ще бъде предоставен на посетителите.
Тъй като това ниво на контрол на дизайна може да звучи толкова атрактивно, трябва да сте наясно, че идва на цена. Да, имате пълен контрол над външния вид на всяка точка на прекъсване, но това означава, че трябва да инвестирате времето за проектиране, необходимо за проектиране за всяко от тези уникални оформления. Колкото повече прекъсвания сте избрали да проектирате, толкова повече време ще трябва да похарчите за този процес.
Ширина на подкрепата
Както отзивчивият, така и адаптивният уеб дизайн се радват на доста силна подкрепа, особено в модерните браузъри.
Адаптивните уеб сайтове изискват компоненти от страна на сървъра или Javascript за откриване на размера на екрана. Очевидно е, че ако адаптивният сайт изисква Javascript, това означава, че браузърът трябва да го активира, за да може този сайт да работи правилно. Това може да не е основен проблем за вас, тъй като повечето хора ще имат Javascript в своите браузъри, но всеки път, когато даден сайт има критична зависимост от нещо, трябва да се отбележи.
Отзивчивите уеб сайтове и медийните заявки, които ги захранват, ще работят добре във всички съвременни браузъри. Единствените проблеми, които ще имате, са с най-старите версии на Internet Explorer, тъй като версиите 8 и по-долу не поддържат медийни заявки . За да обработите това, често се използва Javascript polyfill , което означава, че има и зависимост от Javascript тук, поне за тези остарели версии на IE. Отново това може да не е много загриженост за вас, особено ако анализите на сайта Ви показват, че не получавате много посетители, използващи тези по-стари версии на браузъра.
Бъдеща приятелска атмосфера
Течният характер на отзивчивите уеб сайтове им дава предимство пред адаптивните сайтове, когато става въпрос за бъдещо удобство. Това е така, защото тези отзивчиви сайтове не са създадени, за да се приспособят само към предварително установения набор от прекъсвания. Те се адаптират, за да се поберат всички екрани , включително тези, които всъщност не могат да бъдат на пазара днес. Това означава, че отзивчивите сайтове няма да бъдат "фиксирани", ако нова разделителна способност на екрана изведнъж стане популярна.
Разглеждайки невероятното разнообразие в ландшафта на устройството (от август 2015 г. насам имаше над 24 000 отделни устройства с Android на пазара), имайки в себе си сайт, който прави всичко възможно, за да приспособи тази широка гама от екрани, е от изключително значение за бъдещето. Това е така, защото този пейзаж е малко вероятно да бъде по-малко разнообразен в бъдеще, което означава, че проектирането за конкретни екрани или размери ще стане невъзможно, ако все още не сме достигнали тази реалност.
От другата страна на този сценарий на сравнение, ако даден сайт е адаптивен и не отговаря на нови решения, които могат да станат важни на пазара, тогава може да бъдете принудени да добавите тази точка на прекъсване върху сайтовете, които сте създали. Това допринася за проектирането и времето за разработване на проекти и това означава, че тези адаптивни обекти трябва да бъдат последователно наблюдавани, за да се гарантира, че на пазара не се въвеждат нови гранични стойности, които трябва да се добавят към сайта. Отново, тъй като разнообразието на устройствата е това, което е, непрекъснато да проверявате за нови размери и евентуално да ги приспособявате с нови прекъсвания, е постоянно предизвикателство, което ще окаже влияние върху работата, която трябва да поддържате за даден сайт, и разходите за тази поддръжка компанията или организацията, за които сайтът е за.
производителност
Отзивчивият уеб дизайн отдавна е обвиняван (несправедливо в много случаи), че е лошо решение от гледна точка на скоростта на изтегляне / изпълнение. Това до голяма степен се дължи на факта, че в първите дни на този подход много уеб дизайнери просто се захванаха с малки заявки за екранна медия в съществуващите CSS на сайта. Това принуди изображенията и ресурсите, предназначени за по-големи екрани, да бъдат доставени на всички устройства, дори ако тези по-малки екрани не ги използват в окончателните си оформления. Отзивчивият дизайн е дошъл дълъг път от онези дни и реалността е, че отговарящите на качеството сайтове днес не страдат от проблеми с производителността.
Бавните скорости на изтегляне и подутите уеб сайтове не са проблем с уебсайта, който е отзивчив - това е проблем, който може да се намери на всички уебсайтове. Изображения, които са твърде тежки, се захранват от социални медии, прекомерни скриптове и други и тежат сайт надолу, но и адаптивните и адаптивни уеб сайтове могат да бъдат изградени така, че да се зареждат бързо. Разбира се , те могат да бъдат конструирани по начин, който не прави изпълнението като приоритет, но това не е характерна черта на самото решение, а по-скоро отражение на екипа, участващ в развитието на самия обект.
Отвъд оформлението
Един от най-убедителните аспекти на адаптивния уеб дизайн е, че не само имате контрол върху дизайна на сайта за зададени прекъсвачи, но и ресурсите, които се доставят за тези версии на сайта. Например, това означава, че изображенията на ретината могат да се изпращат само до ретина, докато екрани без ретина получават по-подходящи изображения, които са по-малки по размер на файла. Другите ресурси на сайта (Javascript файлове, CSS стилове и т.н.) могат да бъдат изявени само когато са необходими и ще бъдат използвани.
Това използване на адаптивния уеб дизайн надхвърля простото уравнение "Ако реконструирате уеб сайт, адаптивният подход може да бъде по-лесен за използване". Всички сайтове, включително пълни реконструкции, могат да се възползват от по-интелигентен подход към по-пригоден опит.
Този сценарий показва нюансирания характер на този "отзивчив към адаптивен" дебат. Макар да е вярно, че адаптивният подход може да бъде по-подходящ, отколкото да реагира при реконструкциите на обекта, той може да бъде и чудесно решение за цялостни редизакции. Аналогично, в някои случаи може да се добави отзивчив подход към кодовата база на съществуващия сайт, като се даде на този сайт всички предимства на напълно отговорен подход.
Кой подход е по-добър?
Когато става дума за отзивчив и адаптивен уеб дизайн, няма ясен "победител", въпреки че отговорът е със сигурност по-популярен. В действителност, подходът "по-добър" зависи от нуждите на конкретен проект. Освен това, това не е необходимо да бъде "една или друга" ситуация. Има много уеб специалисти, които изграждат сайтове, които съчетават най-доброто от отзивчивия уеб дизайн (ширини на флуидите, бъдеща поддръжка) със силните страни на адаптивния дизайн (по-добър дизайн, интелигентно зареждане на ресурсите на сайта).
Обикновено е известно като RESS (Отзивчив уеб дизайн с компоненти от страна на сървъра), но този подход показва, че наистина няма "един размер, който да пасва на всяко решение". И двата отзивчиви уеб дизайна и адаптивни са силни и предизвикателни, така че трябва да определите кой ще работи най-добре за конкретния ви проект или ако хибридното решение наистина ви хареса.