Поводът да напиша това е размяната на няколко съобщения в Twitter с Константин Данков след като той сподели една статия от миналата година. Откакто Итън Маркот описа приложението на CSS media queries за създаване на уеб-сайтове, подходящи за всякакви екрани и устройства, някои хора видях в нея заплаха за дълго пропагандираната идея, че мобилния уеб е напълно различен от досегашния, доминиран от настолните компютри, и съответно изисква съвсем отделни сайтове. Срещу всяка статия, показваща как да се прилагат идеите на Итън Маркот бяха написани по две, критикуващи техниките на адаптивния дизайн и изтъкващи недостатъците. И за някои неща са прави.

За да обясня защо смятам, че атаптивния дизайн Е единствения уеб-дизайн, ще ви разкажа аз стигнах до същите основни похвати. Когато започнах да пиша в този блог тъкмо се беше появил Asus EeePC. Първата версия беше със 7 инчов екран с разделителна сподобност 800×480. И тъй като много ми харесваше тази джаджа и се чудех дали да не си купя, исках съответно сайтът ми да е използваем и на нейния екран. Да, ама повечето (почти всички) сайтове се правят за екрани 1024×768 пиксела и това важи и за темите за WordPress. Така че едно от първите неща, които направих с темата на моя блог беше да я направя да се свива и разпъва според размера на браузъра. Но бях ограничил ширината до 1200 пиксела, защото при по-големи ширини редовете ставаха твърде дълги и нечетими. След това заедно със стиловете за печат добавих и стилове за hendheld устройства. Това трябваше да осигури подходящ изглед за мобилни телефони и PDA устройства. Работата е там, че Apple повлякоха крак още с първия iPhone и всички мобилни браузъри след него не се съобразяват със стиловете за hendheld медия, а лъжат че са настолни браузъри, за да покажат колко добре се справят със съществуващите сайтове.

След време обаче научих, че в CSS3 е предвиден начин стиловете, които браузъра ползва, да бъдат подбирани не само по типа медия, но и по нейните характеристики. Първото нещо, което направих, беше да насоча стиловете за hendheld и към screen медия, ако ширината на браузъра е по-малко от 800 пиксела. След това седнах и написах кратка статия за това.

Да, ама от време на време като разпъна прозореца на браузъра върху всичките 1650 на 1050 пиксела на домашния монитор и много се дразнех на празните бели полета от двете страни на сайта. А с повечето сайтове положението е още по-зле, защото са с едно 200 пиксела по-тясни. И реших, че медийните заявки могат да се използват и за адаптиране на дизайна към много големи екрани. Накрая имах сайт, който е ползваем на малкия екран на мобилен телефон и в същото време се възползва максимално (макар и не по най-добрия начин) от пространството на голям настолен монитор. А, и след няколко месеца в A List Apart излезе статията на Итън Маркот.

След този дълъг и надявам се не много скучен увод да видим къде критиките към responsive дизайна издишат.

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

Сама презумпция, че обемът на трафика е от съществено значение само за мобилните потребители е абсолютно погрешна. В България може и да има съществена разлика в скоростите, защото не навсякъде има 3G покритие и мобилния интернет все още е екстра, докато доставчиците предлагат скорости над 5 мегабита, но по света съвсем не е така.

Често се изтъква факта, че ако даден елемент е скрит в стиловете за малки екрани, голямата картинка за фон все пак се зарежта. Ама не се прави така бе, хора! Ако фонът е поставен в стил, който важи само за големи екрани, браузърът на мобилния телефон няма да тегли картинката.

Медийните заявки не оптимизират съдържанието за мобилните потребители и те пак трябва да свалят пълния размер на сайта.

А защо смятате, че обикновения сайт трябва да е претрупан с неща, които не са пряко свързани с основното съдържание на страницата и само отвличат вниманието на потребителите от това, заради което са дошли на сайта? Защо е допустимо да отрупате страницата с реклами и освен това да накарате потребителя да цъка найсе пъти през междинни рекламни страници и банери, отварящи се върху основното съдържание?

Ако един обикновен, настолен ако щете, сайт не е фокусиран върху основната цел, заради която потребителите го посещават, как очаквате мобилния вариант да остане фокусиран?

Адаптивния дизайн не взима предвид мобилния контекст.

Колкото повече чета за този мобилен контекст, толкова повече се убеждавам, че това е някаква пълна глупост. Презумпцията, че потребителят на мобилния телефон е задължително в движение и бърза да намери някаква информация на сайта ви догато се шмуга между тълпата излизайки от метрото, е изсмукана от пръстите. Повечето хора използват iPhone-ите си за браузване докато си пият кафето в Старбъкс или вкъщи пред телевизора. Това къде се намира потребителя, с каква скорост се движи, или колко е шумно не определя целта на посещението му на вашия сайт. Ще ви дам примери: Бизнесмен си седи в удобното кресло на частния самолет, летейки с 1000км/ч над Ню Йорк и разглежда сайт за резервации на самолетни билети на своя iPhone, защото планира семейната почивка след 2 месеца. Или пък обикновен служител, заседнал в задръстване заради катастрова на магистралата край Ихтиман отваря същия този сайт на своя лаптоп (щот шефа не му е купил умен телефон), защото след 5 минути има среща в кол-центъра на фирмата, изнесен за по-евтино в Пловдив.

И след тези излияния, нека ви разкажа как смятам, че трябва да се използва техниката на адаптивния дизайн. Първо започваме от най-основните неща, които ще са общи за всички размери на дисплея – типографията, цветовата схема и т.н. След това чрез медийна заявка можем да опишем специфични стилове за малки екрани със съвременен браузър, ако искаме да добавим нещо специфично за тях – малки картинки за фон например. После идва ред на по-големите екрани – пак затворени в медийна заявка поставяме допълните стилове, които оформят разположението на елементите по страницата за големи екрани. В този блок включваме и @font-face декларациите, и фоновите картинки, ако не искаме да товарим мобилните устройства с допълнителен трафик. Що се отнася до изображенията в сайта, варианти много в зависимост от целта на сайта. Ако картинките са особено важна част от съдържанието (фотоблог примерно) и не са твърде големи, можем да ги сервираме както са и да ги намалим със CSS. Ако пък са само за илюстрация на текста и държим да намалим трафика, можем да сложим в сайта картинки с малък размер, които след зареждане на страницата да заменим с по-големи само за големи екрани чрез JavaScript.

Адаптивния дизайн не е техника за пригаждане на десктоп-сайтове към мобилни браузъри. Адаптивния дизайн е техника за цялостен дизайн на сайтове. През XXI век, когато екраните, на които потребителите ползват уеб, варира от 200 до 2000 пиксела адаптивният дизайн Е начинът на направим сайта си достъпен за всички.

Ето и малко връзки към статии по темата, които намирам за особено полезни:

• Mobile First
• Context
• ★ I don’t care about Responsive Web Design
• Using Media Queries in the Real World
• Windows mobile media queries
• Respond
• 320 and Up
• Rethinking the Mobile Web

Етикети: CSS3, media queries, mobile web, responsive design, адаптивен дизайн