Чувствителен дизайн: Защо го правите неправилно

Отзивчивият дизайн не е прищявка, възникнала поради страхотна CSS техника, това е отговор на проблем. Винаги помнете това и постоянно се питайте дали наистина решавате адекватно този проблем. Ако използвате копиране и поставяне, за да вмъкнете точките за прекъсване на вашите медийни заявки, решението ви може да бъде погрешно.

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

Тази статия е част от нашата поредица за „гледане извън дизайна на работния плот“, представена ви в партньорство със Heart Internet VPS.

Идеята зад медийните заявки

За да започнете правилно този дебат, е необходимо да обсъдите защо медийните заявки изведнъж станаха толкова популярни. Отговорът е, разбира се, че "Responsive Design", термин, създаден от Итън Маркот, е фантастичен начин за справяне с непрекъснато нарастващия проблем за уеб дизайнерите.

Докато всички пламваха за това как „мобилната мрежа“ ще изпревари традиционната, революцията, която се проведе, беше много по-драстична: мрежата стана повсеместна.

Този „проблем“ е чудесен за света като цяло, но истинско главоболие за нас. През последното десетилетие световната мрежа се трансформира в нещо ново. Вече не е обвързан със стените, които предварително установихме. Казах го преди, но си струва да повторим. Докато всички пламваха за това как „мобилната мрежа“ ще изпревари традиционната, революцията, която се проведе, беше много по-драстична: мрежата стана повсеместна.

В този момент ние нямаме достъп до мрежата от една точка. Не се отказахме от лаптопите си в полза на смартфоните, както прогнозираха експертите. Вместо това мрежата е навсякъде, където сме. Не е само в нашите телефони и компютри, а в нашите таблети, iPod-и, игрални системи, телевизори и дори коли.

Тази тенденция ще продължи само с течение на времето. Отзивчивият дизайн ни измина през сезон на създаване на отделни мобилни сайтове и в епоха, в която разработваме един сайт, който се развива и адаптира към устройството, на което се гледа. Използвайки медийни заявки, можем да представим конкретен CSS на произволен брой различни размери на прозореца и да се уверим, че всеки има най-доброто възможно изживяване.

Проблемът с отзивчивия дизайн

Разделът по-горе не е полуисторическа тира, която има за цел да запълни пространството, а е важен поглед върху целите, които трябва да постигне отзивчивият дизайн. Тогава става въпросът, отговаря ли на тези цели? Адекватният дизайн отговаря ли на проблема с повсеместността?

Отговорът е сложен, в най-добрия случай мога да кажа, „зависи от това как го правите.“ Това е объркващо твърдение, нали? Отзивчивият дизайн е лесен: използвайте медийни заявки, за да обслужвате персонализирани CSS до различни размери на прозореца. Ето как всеки подхожда правилно? И така, как може да има правилен и грешен начин?

Сложността възниква, когато започнем да обсъждаме решаваща част от тази техника: кои медийни заявки да използвам? Или казано по друг начин, кои „точки на прекъсване“ трябва да насоча за потребителски CSS? Настоящият популярен отговор предсказуемо започва с най-добрите „мобилни“ устройства наоколо: iPhone и iPad (щеки гневни коментари на потребители на Android). От тези архетипи създаваме така наречените „общи“ размери на смартфони и таблети. След това се придвижваме нагоре и адресираме лаптопи и малки настолни компютри и накрая големи екрани. Стандартният набор от медийни заявки, като този от CSS-трикове, обикновено има девет или десет предварително установени точки на прекъсване.

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

За да бъдем справедливи, тази система работи до известна степен. Всички сме виждали много страхотни отзивчиви сайтове, създадени с помощта на набор, подобен на горния Coyier. Не мога обаче да не мисля, че това по някакъв начин повтаря същата грешка, която допуснахме, като проектирахме „мобилни сайтове“ преди няколко години. Целият фокус тук е върху устройството, преглеждащо сайта. Преди дори да изградим сайта, имаме предвид тези точки на прекъсване.

Но устройствата се променят. Вече установихме, че мрежата е свързана с почти всичко с превключвател на захранването, така че защо отново поставяме толкова голям акцент върху често срещаните размери на екрана? Има ли по-добра алтернатива? Какво става, ако се съсредоточим върху нуждите на конкретен дизайн вместо хипотетичен случай на използване на устройството? Ами ако изградихме оформления, които просто работеха навсякъде?

Дизайн, фокусиран върху съдържанието

Гореспоменатите проблеми с предварително установени медийни запитвания ми се появиха едва когато се разрових и наистина започнах да произвеждам отзивчива работа самостоятелно. На теория стандартните предложения са страхотни, но щом ги приложите към сложен дизайн, ще откриете, че тези точки на прекъсване не винаги го покриват. Проблемът, както дизайнерите от Бостънския глобус откриха бързо, след като сайтът излезе на живо, е, че възникват проблеми „във времето“ (за протокола, този проект е фантастичен и всички проблеми с оформлението са засегнати до голяма степен). Нещата стават объркани, когато дизайнът е в размер, който не сте отчели и трябва да влезете и да залепите дупките след факта.

Казвам това като запален фенбой на Apple: спрете да проектирате уебсайтове за iPhone.

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

Казвам това като запален фенбой на Apple: спрете да проектирате уебсайтове за iPhone. Вместо това, създайте уебсайт, който поддържа своята цялост, тъй като размерът му на прозорец е намален до всяко възможно състояние. Имайте предвид конкретни устройства като ръководство за вашия дизайн (пример: по-малките устройства са склонни да се базират на допир, така че направете връзки големи), но не поставяйте щорите си и не проглеждайте по-голямата картина: че вашият дизайн трябва да изглежда добре на всеки екран.

Нов работен поток

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

Нещо вълшебно се случва, когато следвате този работен процес.

Хипотетично, да речем, че сте започнали с голям, 1020px широк сайт. Вижте го на най-големия екран, на който можете да се сдобиете с ръце и се уверете, че изглежда страхотно. Сега плъзнете прозореца и го направете по-малък, докато дизайнът стане грозен. Там е първата ви точка на прекъсване. Задайте медийна заявка за тази точка и коригирайте всичко, което трябва да адресирате. След като приключите, вземете този прозорец и намерете следващата точка на грозотата. Повторете тези стъпки, докато не сте доволни от обхвата, който сте отчели.

Но какво да кажем за iPad? Какво ще кажете за Kindle Fire или най-новия опит на Samsung да бъде релевантен? Нещо вълшебно се случва, когато следвате този работен процес. Току-що сте го направили, така че оформлението да изглежда добре почти на всеки размер. Ако сте го направили правилно, тогава, когато го издърпате нагоре на телефона или таблета, ще изглежда страхотно.

Само оформление
Имайте предвид, че тази дискусия се отнася само за съотношенията на оформлението. Абсолютно не излизате от тестване на функционалността на различни браузъри и устройства. Отзивчивият дизайн не отчита нищо, че различните двигатели на браузъра интерпретират HTML, CSS и JavaScript по различен начин.

заключение

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

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