Садржај
- Дизајнирање за непознато
- Прагматичан приступ дизајну
- Постати агностик распореда
- Кодирање прогресивно
- Роњење у надокнади
Чини се да сви данас говоре о прилагодљивом веб дизајну и то са добрим разлогом; како број уређаја са омогућеном мрежом и даље расте - сваки са различитим могућностима и функцијама - више није смислено правити веб локације фиксне ширине.
Истина је, никада није била. Ипак, до сада се сматрало најбољом праксом да се дизајнирају искуства која су створила бројне претпоставке, било да се ради о резолуцији екрана, пропусном опсегу или начину уноса. Ако сте икада дизајнирали веб локацију ширине 960 пиксела, само да бисте је прегледали на нетбоок-у пријатеља на малом екрану (и да, пишем из болног искуства овде), разумећете зашто ово није био нарочито паметан приступ. Сада, када се паметни телефони и таблети убаце у мешавину, јасно је да наше традиционалне методе више нису примерене сврси.
Срећом, појава ЦСС медијских упита и све веће признање да је веб медиј сам за себе, значи да почињемо да прихватамо праву природу платформе, прихватајући да је њена универзалност снага, а не слабост.
Током следећих пет дана водићу вас кроз технику која препознаје ову чињеницу: прилагодљив веб дизајн. Развио га је Етхан Марцотте, он комбинује флуидне распореде, флексибилне слике и медијске упите како би нам помогао да направимо веб локације које се грациозно прилагођавају било ком окружењу на које наиђу.
Показаћу овај приступ показујући вам како да направите једноставну галерију медија. У својим примерима направићу малу веб страницу која ће документовати недавно путовање које сам прешао преко Сједињених Држава, али слободно прилагодите код и дизајн тако да одговара вашим потребама.
Дизајнирање за непознато
Већина овог водича усредсредиће се на развојни аспект прилагодљивог дизајна. Али пре него што истражимо било који код, узмимо тренутак да размислимо како бисмо могли да дизајнирамо веб локацију која би могла да има бесконачно много распореда.
Сад имам среће у томе што могу да дизајнирам интерфејсе и развити предњи код који их чини стварним. Ово наравно није јединствена вештина - ако радите за себе, вероватно сте исти. Али свакако је корисно разумети како се садржај може прилагодити и преобликовати приликом израде дизајна течности.
Такође радим као део већег тима где је моја улога специјализованија. У таквом окружењу, визуелни дизајнер може да се фокусира само на превођење жичаних оквира у атрактивне, привлачне (одјављене, савршене пикселе) компове. И није необично да се програмери налазе одвојено, преводећи ове распореде у чисте и ефикасне ознаке и ЦСС.
Међутим, такви линеарни и одвојени токови посла брзо се распадају када почнемо да процењујемо како ће се дизајни прилагодити различитим окружењима. Као и било који нови алат или технологија, и ми бисмо требали размотрити сарадничкији и агилнији начин рада. Многи од најтежих проблема с којима се сусрећу приликом дизајнирања одговарајућих веб локација могу се решити једноставним разговором, експериментисањем и понављањем.
Прагматичан приступ дизајну
То не значи да дизајнери немају простора да размишљају о томе како дизајн може да функционише ван граница било ког одређеног уређаја.
У Цлеарлефт-у покрећемо визуелни дизајн из перспективе радне површине. Почињемо са дефинисањем свеобухватног дизајнерског језика и визуелне естетике, често темељећи почетна истраживања око суштинског дела садржаја. На пример, ако дизајнирамо локацију са храном, почећемо са страницом рецепата; за веб локацију вести, страницу приче.
Не само да је ово важна страница на веб локацији, већ вероватно укључује довољно структурираног садржаја да бисмо могли да направимо типографску палету. Такође ћемо размислити о томе како се изглед може прилагодити - чак и ако нам је у овој фази само у позадини.
Један од корисних начина тестирања отпорности на стрес је заузимање такве странице и прилагођавање за ужи (приближно 320 пиксела) екран. Вероватно ћете открити да ће неки аспекти дизајна морати да се преиспитају да би радили на овој ширини. Ево неколико примера:
- Типографија: Велики наслови могу добро да функционишу на ширим распоредима, али на мањим екранима могу да заузимају пуно вертикалног простора и зато захтевају додатно померање. Како се дужине линија мењају, требало би да узмете у обзир висине линија и друге типографске третмане.
- Везе: Како ће ваш дизајн функционисати на додирним екранима? Иако још увек немамо једноставан начин да их откријемо (што значи да бисмо требали узети у обзир у свим аспектима нашег дизајна), дизајнирање ужег екрана може нам пружити прилику да размишљамо о циљаним областима за линкове и друге интерактивне елементе . ИОС смернице препоручују да оне буду квадратне најмање 44 пиксела / тачке, што је добра цифра којој треба тежити.
- Навигација: Ово ће вероватно бити најнеугоднија компонента сваког одзивног дизајна, посебно ако ваша веб локација има много одељака и дубоку хијерархију. Брад Фрост је написао резиме неких различитих приступа навигацији који се тренутно разматрају.
- Сувишан садржај: Да ли је потребан неки садржај? Да ли други садржај треба бити приказан само у одређеним сценаријима? Не заговарам скривање садржаја на основу тога који уређај корисник користи, али технике попут условног учитавања (које ћемо размотрити касније ове недеље) могу нам помоћи да послужимо мање странице које учитавају комплементарни садржај само када је то потребно.
Дизајнирање два контрастна распореда појачава идеју да ће се дизајн прилагодити, док се рано испеглају потенцијалне потешкоће. Иако ово звучи као удвостручавање посла, имајте на уму да не дизајнирамо сваку страницу са пиксел-савршеном прецизношћу. Уместо тога, фокусирамо се на изградњу скалабилног дизајнерског језика - оног који ће се развијати како га почнемо примењивати у коду, а другог који се заснива на појединачним модулима и компонентама.
Постати агностик распореда
Није изненађујуће што су се за индустрију која се кроз историју веб понашала попут штампе, распореди фиксне ширине прожели кроз многе испоручене производе. Како започињемо са дизајнирањем прилагодљивог медија, разматрају се нови приступи који нам омогућавају да решавамо проблеме и комуницирамо идеје, истовремено признајући флуидну природу медија. Ево неколико мојих омиљених:
- Дијаграми описа странице: Иако жичани оквири често могу подразумевати изглед (и на тај начин претпостављају одређени тип уређаја), дијаграми описа странице уклањају ову претпоставку и уместо тога описују појединачне компоненте, поређане у документу у смислу приоритета.
- Стиле плочице: Када комуницирамо са клијентима о дизајнерским идејама, можемо се наћи како представљамо „слике веб локација“. Ако не будемо пажљиви, клијенти ће с правом тражити да виде концепте који показују како ће дизајн изгледати и на другим уређајима. То нас може натерати у неодрживу ситуацију стварања више страница за више уређаја. Самантха Варрен је размислила о овом проблему и смислила плочице са стилом. Они се налазе негде између табле расположења (али мање нејасне) и потпуно реализованих компоненти (али мање прецизних) и помажу нам у комуникацији типографије, стилова дугмета и третмана мастхеад-а. Они такође подстичу зрелији ниво разговора са нашим клијентима.
- Дизајн игре Мобилифи: Ова вежба може заиста добро да функционише током заједничких радионица дизајна. У овој вежби сви записују на Пост-ит бележи елементе који се могу појавити на одређеној страници. Затим се залепе за зид по редоследу важности, као да изгледају линеарно на мобилном телефону. Резултат дискусије може донети неке изненађујуће закључке. На пример, можда схватите да навигација није најважнија компонента на страници. Ово би могло уследити до дизајна, где линк за прескакање на врху странице води до навигације у подножју.
Још увек има простора за алате које већ користимо, наравно, али приликом дизајнирања веб странице у ширем смислу, морамо имати на уму да изглед више није познат.
Кодирање прогресивно
Срећом, не морамо да бринемо о визуелном дизајну у примеру на којем радимо јер је напоран посао урађен за нас! Уместо тога, можемо се концентрисати на кодирање нашег дизајна у потпуно одговарајућу веб локацију.
Још једна ствар пре него што започнемо. Важно је запамтити основни принцип медија са којим радимо: универзалност. То значи не само изградњу за данашње уређаје са омогућеном мрежом, већ и осигуравање компатибилности са оним од јуче и сутра. Џон Аллсоп је објаснио зашто је овај принцип важан у свом посту Следећих 6 милијарди:
"Сљедећих шест милијарди чине дјеца у руралним дијеловима Индије, Африке, Кине гдје приступ енергији и мрежама може бити испрекидан. То је неко на Суматри у деценији старој Винтеловој кутији. То су људи који говоре стотине различитих језика, са десетинама различитих језика системи писања. То су људи који су први у својој породици који могу читати и писати. То је 20 посто људи широм света који не знају читати или писати. Ипак.’
Своје разумевање веба можемо пратити увидом у различите моде (у потрази за бољом речју) које су завладале нашом професијом: веб стандарди, доступност, неупадљиви ЈаваСцрипт ... све су варијанте на исту тему: прогресивно унапређење. Исто важи и за прилагодљиви веб дизајн. За изградњу а истински респонзивна веб локација је изградња веб странице која није само уназад компатибилна, већ и будућа.
Роњење у надокнади
Ок, доста преамбуле, време је да отворимо уређивач текста.Наш дизајнер нам је пружио дизајн оријентисан ка радној површини и био је љубазан да пружи примере како се ово може појавити и у ужем погледу.
Можда би било примамљиво да се ови кодови одвојено кодирају, али предложићу другачији приступ. Стављањем одвојених компонената - или образаца - који чине дизајн на једну страницу, можемо створити портфолио узорака. То нам омогућава да развијемо компоненте ван граница било ког изгледа странице и даће нам нешто на шта ћемо се касније позвати за било које регресијско тестирање. Погледајмо почетно означавање на неколико различитих уређаја:
Погледајте наш означени портфолио узорака
Па, проклет био - већ имамо прилагодљив веб сајт! Наш садржај се прилагођава ограничењима сваког уређаја, било да је то фенси нови иПад или одбачени телефон са карактеристикама. Функционише чак и у текстуалном прегледачу попут Линк-а.
Захваљујући основним принципима универзалности, веб је подразумевано реагује. То је сјајно, али такође значи да све што од сада радимо на коду може угрозити ову изворну прилагодљивост.
Сутра: Крочит ћемо пажљиво и почети да примењујемо први аспект прилагодљивог дизајна: типографију и флуидне решетке.
