Ранните разработчици на уеб сайтове не трябваше да се притесняват много от дизайна на уеб сайтове, тъй като потребителите ги разглеждаха на компютри и тези компютри имаха фиксирана резолюция на екрана. С мобилната революция все повече хора търсят на мобилните си устройства - таблети или мобилни телефони - за информация. Ето защо е необходимо разработчиците на уеб сайтове да създадат уеб сайт, който да обслужва всичко от Windows PC до мобилни устройства. Тази статия обяснява разликата между адаптивен срещу отзивчив уеб дизайн и ви позволява да решите кой е по-добър за вас и вашата организация.
Отзивчив уеб дизайн
Отзивчивият уеб дизайн включва допълнително кодиране и използва така наречените "течни решетки". Номерата са посочени в "процент", а не в точен брой пиксели. Това прави правилния код на уебсайта да се показва правилно на екрана на компютъра и на екрана на мобилния телефон. По този начин, без значение как преоразмерявате екрана си, този уебсайт е представен по лесен за четене начин. За по-малките уеб сайтове текстът и изображенията лесно протичат с екранното пространство и се вписват в него без да се нарушава уебсайта или без да се изрязват части от уебсайта.
Режимът на отговорния уеб дизайн прави задължително използването на CSS3 вместо само CSS. Също така се използват мащабируеми изображения и течни решетки, които са малко трудни за кодиране.
Адаптивен уеб дизайн
Адаптивният уеб дизайн се фокусира и върху представянето на видим уебсайт на таблети и мобилни телефони в допълнение към екранните компютри. Подходът обаче е малко по-различен. В отзивчивия уеб дизайн това беше гъвкавост, която позволи свободният поток на текст и размера на изображенията да се поберат на различните екрани.
При адаптивния уеб дизайн разработчиците използват предварително определени размери на екрана и кодират съответно. Тоест, когато даден потребител пристигне на уебсайта, уебсайтът определя вида на използваното устройство и представя уебсайта, разработен за този размер на екрана на дадено устройство. В някои случаи съдържанието може да е различно за различните устройства.
Например разработчиците биха помислили за 1280 × 800 пиксела за персонални компютри, 8 "за таблети и 5" за мобилни телефони. Ранният код на адаптивното уеб проектиране съдържа идентификация на екрани. Ако е компютър, покажете версията на уеб сайта на компютъра. Ако е таблетка от 8 ", покажете версията на таблета на уеб сайта и също така, ако устройството е мобилен телефон, покажете мобилната версия на уеб сайта. Това се постига, като се използва изразът "IF", последван от различни величини, определени точно в пиксели, а не като процент.
Ако се появят нови устройства с различна разделителна способност на екрана, разработчиците ще трябва да се върнат към кодирането, за да включат новите резолюции на екрана. По този начин адаптивният уеб дизайн има известни шансове за изрязване на по-малки устройства, ако разработчиците не са внимателни.
В сравнение с отзивчивият уеб дизайн, адаптивният уеб дизайн е по-лесен за кодиране и повечето разработчици избират последния от отзивчивия уеб дизайн.
Отзивчив срещу адаптивен уеб дизайн
Отзивчивите уеб сайтове трудно могат да бъдат кодирани. Кодът е сложен и използва процентни стойности вместо фиксирани пикселни стойности. Тя се нуждае от добра концентрация, за да изгради уебсайт, който да се мащабира според размера на екрана на устройствата. Напротив, е по-лесно да създадете различни уебсайтове за различни устройства, какъвто е случаят с адаптивния уеб дизайн. Макар че работата е по-скоро в адаптивното уеб проектиране, тъй като разработчиците биха създавали различни уеб сайтове за различни размери на устройствата, тя все още е по-лесна в сравнение с отзивчивия уеб дизайн.
Тъй като на пазара има твърде много мобилни устройства, разработчиците не могат непременно да включват всички видове резолюции на екрана. Това води до изрязване на уеб сайтове в по-малки екрани, когато се използва адаптивен подход за уеб дизайн.
Адаптивните уеб сайтове са малко бавни при зареждането, тъй като уебсайтът първо трябва да разбере какво устройство и каква резолюция на екрана се използва. Въз основа на това свързаната версия на уебсайта е заредена на екрана на устройството. В случай на отзивчив уеб дизайн, се използва единичен код, който автоматично се свива, за да пасне на мобилните екрани.
Може да искате да погледнете и тази публикация на MSDN Защо предпочитам адаптивен уеб дизайн чрез отзивчив уеб дизайн.
UPDATE: Свързаната страница не е налична в Microsoft. Може да искате да проверите вместо това SharePoint Responsive Web Design.
