Кратък курс - "Адаптивен уебсайт за една седмица" ние проектираме адаптивен дизайн (част I)
| Становище:Григорий Коченов |
Изглежда, че изразът "отзивчив уеб дизайн" вече е твърдо установен в ежедневието - има причини за това: всеки ден има все повече и повече нови устройства за достъп до интернет, всяко със свои собствени възможности и функции, което означава, че сега е станало неразумно да се създават сайтове с фиксирана ширина.
За щастие, с появата на CSS медийни заявки и осъзнаването, че мрежата е медия сама по себе си, ние започнахме да приемаме истинската природа на платформата, празнувайки, че гъвкавостта е нейната сила, а не слабост.
Поредица от статии „Адаптивен сайт за една седмица“ ще ви позволи да се задълбочите в технологията за създаване на адаптивни сайтове колкото е възможно повече. Разработен от Ethan Marcote, методът включва: плавни оформления, гъвкави изображения и медийни заявки, които ни позволяват да създаваме уебсайтове, които се адаптират към всяко устройство.
Ще анализирам визуално този метод, използвайки примера на проста медийна галерия. Например, аз ще създам малък уебсайт, посветен на скорошното ми пътуване през Съединените щати, и вие сте свободни да промените кода и дизайна в него по свое усмотрение.
Дизайн за непознатото
По-голямата част от това ръководство се фокусира върху програмната страна на адаптивния уеб дизайн. Но преди да се потопим в кода, нека разберем как можете да създадете уебсайт, който има безкраен брой оформления.
Имам късмет, че мога да рисувам интерфейси и в същото време да кодирам целия интерфейс, за да съживя тези интерфейси. Това със сигурност не е уникално умение, особено за тези, които правят всичко сами. Но е неоспоримопредимството да разберете как съдържанието може да тече и да се коригира, когато рисувате течен дизайн.
Но на всичкото отгоре работя в екип, в който върша по-тясно специализирана работа. Подобни условия ми позволяват, като дизайнер, да се съсредоточа единствено върху адаптирането на телените рамки към по-привлекателен външен вид. И дори ако разработчиците са отделни, за тях не е трудно да преведат тези оформления в разбираем CSS.
Познатият работен процес приключва, когато започнем да оценяваме как оформленията с новия дизайн ще се адаптират към различни условия. Както при всеки нов инструмент или технология, струва си да обмислите по-плътни и по-гъвкави начини за съвместна работа (като AGILE, например). Повечето от най-трудните въпроси, свързани с адаптивния уеб дизайн, могат да бъдат решени много просто чрез дискусия, експериментиране и итерация.
Прагматичен подход към дизайна
Първо започваме да разработваме визуалния дизайн на сайта с вариант за обикновен компютърен монитор. Второ, ние оформяме цялостния стил на сайта и цялата му визуална естетика, често въз основа на анализ на ключово съдържание. Например, ако разработваме уебсайт за храна, ще започнем със страница с рецепти; ако новинарският сайт - от информационната страница.
И не само защото е важна страница в сайта, но и защото най-вероятно съдържа достатъчно структурирано съдържание, за да можем да създадем типографска палитра въз основа на него. Ние също мислим как ще се държи тази структура, ще се адаптира към различни устройства - дори ако мисълта за това, на този етап, е второстепенна.
полезен начиннаправете стрес тест на дизайна на сайта - адаптирайте страницата към най-тясната разделителна способност на екрана (широка 320px). Вероятно ще откриете, че някои детайли на дизайна трябва да бъдат преосмислени, за да се показват правилно при тази ширина. Ето няколко примера:
Типография : Големите заглавия работят добре в широко оформление, но на малки екрани те заемат много вертикално пространство и изискват допълнително превъртане. В съответствие с промяната на ширината на колоната трябва да се промени височината на линията и останалите елементи на типографията.
Връзки : как вашият дизайн ще работи на сензорни екрани? Въпреки че нямаме лесен начин да дефинираме тези екрани (трябва да вземем предвид сензорните устройства във всички наши дизайнерски елементи), проектирането за устройства с минимална разделителна способност ще ни даде възможност да помислим за основните места за поставяне на връзки и други интерактивни елементи. В указанията на iOS се препоръчва да се използват квадрати за тях, с площ от поне 44px / пиксела, което е доста добър вариант и можете да се съсредоточите върху него.
Навигация : Това е може би най-проблемната част от всеки адаптивен дизайн, особено ако вашият сайт има много секции и сложни вътрешни йерархии. Брад Фрост направи отличен преглед на различните опции за навигация, които днес се използват широко в адаптивния дизайн.
Приготвяне на две различниlayouts подсилва идеята за адаптивност на нашия дизайн. Това може да звучи като двойна работа, но имайте предвид, че ние не проектираме всяка страница до пиксела. Вместо това, ние търсим създаването на мащабируем език за проектиране, който работи веднага щом го отразим в кода, и който се основава на отделни модули и компоненти.
Станете безразлични към местоположението
Не е изненада, че една индустрия, която традиционно гледа на мрежата през призмата на печата, ни принуди да разработим уеб страници с фиксирана ширина. Когато започнем да проектираме за адаптивна среда, ние вземаме предвид нови подходи, които ни помагат да решаваме проблеми, да комуникираме идеи, като признаваме гъвкавостта и променливостта на средата. Ето някои от любимите ми:
Структурни диаграми на страници : Докато прототипите на страници често ни налагат местоположението на определени блокове на страницата (включително на конкретни устройства), структурните диаграми, напротив, описват всеки компонент поотделно и ги подреждат в документа по приоритет.
Стил на сайта : по време на обсъждането на идеята за дизайн с клиента, може да се окажем в ситуация, в която представяме на клиента „снимки на новия сайт“. Ако не сме достатъчно внимателни, тогава клиентът с право ще поиска от нас да му покажем концепцията как ще изглежда дизайнът на всички устройства. Това искане може да ни изненада и ще трябва да направим много скици за различни устройства. Саманта Уорън анализира подобна ситуация и излезе прекрасно от нея, като предложи стил за сайта. Това е кръстоска между хартиени банкноти, коркбяла дъска (но по-малко спонтанно) и подробни оформления (но по-малко сложни). Стилът ни позволява да обсъждаме типографията, стила на бутоните и основните визуални елементи, докато изграждаме по-зряло ниво на дискусия с клиента.
Разбира се, има място и за класическите инструменти, които вече използваме в практиката си, но при изготвянето на дизайн на уеб сайт в широк смисъл е необходимо да се има предвид фактът, че подредбата на елементите на една страница вече не е самоочевиден факт.
Прогресивно кодиране
За щастие, не е нужно да се тревожим за визуалните ефекти в примера, върху който работим, защото цялата тежка работа вече е свършена вместо нас! Вместо това можем да се съсредоточим върху софтуерната страна и да превърнем нашия дизайн в напълно адаптивен уебсайт.
Още нещо важно преди да започнем. Важно е да запомним основния принцип на средата, в която работим – универсалността. И това е развитие не само за съвременните устройства, но и необходимостта да се осигури съвместимост с устройства от вчера и устройства, които ще се появят едва утре. Джон Елсоп описа защо този принцип е толкова важен в публикацията на The Next 6 Billion:
Потопете се в маркирането
Би било изкушаващо тези части да бъдат програмирани отделно, но предлагам различен подход. Чрез поставяне на отделни компоненти или шаблони, които съставят дизайн на една страница, можем да създадем колекция от шаблони. Това ще ни позволи да работимнад отделните модули, извън техните изгледи за отделни типове страници, и ни дават нещо, на което можем да се позоваваме, докато тестваме сайта по-нататък. Нека да разгледаме първоначалното маркиране на няколко различни устройства:
Поради основните принципи на универсалност, мрежата е отзивчива по подразбиране. Това е страхотно, но също така означава, че всичко, което правим в кода сега, може да компрометира тази естествена адаптивност.
Прочетете следната статия: Първите стъпки в създаването на уебсайт с адаптивен уеб дизайн – типография и мрежа.