Оформление на уебсайта

Мобилна версия на сайта, отзивчив дизайн или течно оформление?

Здравейте! Както обикновено, от комуникацията с клиенти се раждат теми за писане и обсъждане на статии. Ето, наскоро ми изпратиха задача да създам уебсайт от нулата. В ТЗ, в допълнение към всички желания и изисквания към сайта, беше посочено: оформлението на сайта е адаптивно. След въпроса ми какво означават под адаптивно оформление, получих отговора, вие сте професионалист тук, така че разберете сами какво е, но ние се нуждаем от него.

Изглежда елементарно нещо, което, както се оказа, не всеки разбира. Може би не разбирам правилно, затова реших да задам въпрос по същата тема във форуми и социални мрежи. По принцип очакваме резултата - всеки със своето мнение и концепция.

Мненията бяха следните:

отзивчивият и отзивчив дизайн са две различни неща
дизайнът "заточен" за различни устройства е "адаптивен"
приспособяването към размера на прозореца на браузъра е каучуков тип оформление
различни версии на сайта (включително мобилни) - попада под концепцията за реагиращ дизайн

Като цяло, в тази кратка статия, нека разберем какво е какво. В края на публикацията ще дам таблица за сравнение на тези три типа.

Мобилна версия на сайта

http://www.pda.spb.mts.ru/
http://m.mvideo.ru/
http://m.kinopoisk.ru/

В десктоп браузъра мобилните версии на сайта, разбира се, изглеждат по-различно от обикновените версии. Принципът на заместване на сайта е следният: устройство или браузър се откриват, пренасочват към m.site.ru. Плюсовете и минусите могат да бъдат преценени в таблицата в края на публикацията.

Отзивчив дизайн (отзивчиво оформление на сайта)

URL адресът на сайта остава един и същ при различните адаптации, тъй като имаме един и същ сайт с еднакво оформление (най-често. Има и по-сложни опции). Примери можете да намерите тук. Ето няколко:

За да сме сигурни, че тя реагира и да разберем какво е, нека отворим уебсайта Time. Сега свийте прозореца на браузъра и преценете/разширете. Сайтът се адаптира към ширината на прозореца: блоковете променят позицията си, стилове на типография се променят, нещо се премахва и т.н.

Между другото, някои хора споделят понятието "отзивчив" и "адаптивен". Няма голяма разлика, просто „адаптивен“ е по-широко понятие, което включва „отзивчив“. Малък откъс от wikipedia, за по-добро разбиране:

в отзивчив дизайн

използване на гъвкаво, базирано на мрежа оформление;
използването на гъвкави изображения (гъвкави изображения);
работа с медийни заявки (медийни заявки);

В допълнение към това в отзивчив дизайн

прилагане на постепенно подобрение;
дизайн за мобилни устройства от най-ранните етапи

При влизане в уебсайт с реагиращ дизайн не се получава пренасочване, за разлика от уебсайт с мобилна версия.

Оформление от каучуков тип

Или, по-просто, "каучуково оформление" (каучук) - вид оформление на оформление, при което пропорциите на сайта се променят в зависимост от размера на прозореца на браузъра. В повечето случаи това означава, че без значение какъв широкоекранен екран имате, гуменият сайт напълно ще заема прозореца на браузъра, без да се изпразва отстрани. Има и каучук преди преразпределението на сайта. Тоест, в някакъв интервал от ширина, мястото е каучуково и над прага остава на максималната си ширина. Лично аз наистина не харесвам тези типове оформления, те са много проблематични, ако се размотавате и допълвате функционалността на сайта.

Като пример си спомних само http://www.searchengines.ru/ (също издърпайте прозореца на браузъра, сайтът ще се плъзне). Разбира се, отзивчивият дизайн може да се комбинира с типа каучук и други неща, но тук става въпрос за изчистено каучуково оформление, не пропускайте идеята.

Сега табела с основните характеристики за мен. Няма да изброявам всички останали функции: