Садржај
- Алати за почетак
- 01. Одзивни листови скица веб дизајна
- 02. Скетцхбоок прилагодљивог дизајна
- 03. Респонсиве Вирефрамес
- 04. Узорци распореда више уређаја
- 05. Стиле плочице
- Алати за флексибилну / флуидну мрежу
- 06. Голден Грид Систем
- 07. Фолди960
- 08. СимплеГрид
- 09. ЦСС мрежа од 1140пк
- 10. Колумнални ЦСС мрежни систем
- 11. Семантички систем мреже
- 12. СУСИ
- 13. Гридпак
- 14. Гридсет
- 15. Боља Пхотосхоп мрежа за РВД
- 16. Течне решетке
- 17. Одзивни калкулатор
- Алати за одзивне слике (и текст)
- 18. Одзивне слике
- 19. Прилагодљиве слике
- 20. Сенцха.ио Срц (раније Тинисрц)
- 21. ФитТект
- 22. слабТект
- Алати за медијске упите
- 23. Одговорити.јс
- 24. ЦСС3-Медиакуериес.јс
- 25. Адапт.јс
- 26. Цатегоризр
- Котлови са прилагодљивим дизајном (и мобилни)
- 27. 320 и више
- 28. Без мреже
- 29. Костур
- 30. Боотстрап
- Додаци, подлошке и полифили
- 31. Респонсиве Плугин
- 32. Рушење
- 33. МедиаТабле
- „Тестирање, тестирање: 1-2-3 ...“
- 34. ресизеМиБровсер
- 35. респонсивепк
- 36. Одзивно тестирање дизајна
- 37. Одговорник
- 38. Респонсиве.ис
- 39. Сцреенкуери.ес
- 40. Аптус
- 41. Пригодни дизајн обележивача
- 42. Боокмарклет реактивног дизајна
- 43. Сцреенфли
- 44. Показатељ медијских упита
- 45. Шим
- 46. Дриве-Ин
- 47. Адобе Схадов
- 48. Опера Мобиле Емулатор + Ремоте Дебуг
- Даља инспирација
- 49. МедиаКуери.ес
- 50. @РВД
- Свиђа вам се ово? Прочитајте ово!
Као што је Етхан Марцотте представио / сковао у свом чланку „Респонсиве Веб Десигн“, као и у својој најпродаванијој књизи, потребна су три елемента да би страница постала одзивна:
- Флексибилна / флуидна мрежа
- Одзивне слике
- Упити за медије
Постоји мноштво других сјајних чланака који покривају мотиве, концепте и технике у вези са респонзивним веб дизајном, па ћемо задржати фокус овог чланка на неким врхунским алатима који ће вам помоћи да одговорно реагујете.
Алати за почетак
Пре него што започнете са израдом своје веб локације, најбоље је скицирати како ће се елементи на страници прилагодити различитим величинама прегледача различитих уређаја на којима ће се гледати и како бисте избегли прекид везе који често долази од размишљања првенствено о томе дизајн радне површине и остатак одговарајућих итерација као накнадна мисао (видети посебно коментар Степхание (Сулливан) Ревис).
01. Одзивни листови скица веб дизајна
Овај сет одговарајућих листова скица, аутор Јереми П Алфорд, одлична је полазна тачка за почетак мапирања како ће се делови странице мењати у различитим резолуцијама.
02. Скетцхбоок прилагодљивог дизајна
Ако више волите да све своје скице држите на једном месту, можда ћете желети да узмете у обзир ову књигу у жици увезану са 50 одговарајућих листова скица компаније Апп Скетцхбоок.
03. Респонсиве Вирефрамес
Једна од потешкоћа у стварању респонзивних веб локација је коришћење жичаних оквира како би се показало како ће прилагодљиви дизајн функционисати. Јамес Меллерс из Адобе-а саставио је овај експериментални алат како би показао како може реаговати реаговање на жичане оквире сложених распореда.
04. Узорци распореда више уређаја
Када планирате одзивни дизајн, корисно је видети како су му други приступили пре вас, тако да су обрасци распореда више уређаја Луке Вроблевски, који наводе популарне обрасце са везама до примера, одлично место за почетак.
05. Стиле плочице
Саманатха Варрен'с Стиле Тилес предлаже нову технику за дизајн у доба реаговања; уместо дизајна фиксне ширине, ово су попут узорка или даске за расположење који показују општи приступ дизајну без уласка у ситне детаље.
Алати за флексибилну / флуидну мрежу
Као што је раније речено, прва компонента потребна за реаговање дизајна је флексибилна / флуидна мрежа.Следеће је већ унапред направљено: потребно је само да их преузмете и брзо ћете стићи на пут до флексибилније веб локације.
06. Голден Грид Систем
Јони Корпи, који је такође развио Лесс Фрамеворк, недавно је објавио ову нову верзију поузданог мрежног система за брзи дизајн. Сматра се „преклопним“, јер се лако прилагођава од 16, до осам, до четири колоне, Голден Грид Систем такође има мали слој прегледача који мрежу на вашим страницама излаже на тестирање.
07. Фолди960
Талентовани мушкарци из компаније Паравел, Инц. објавили су модификовану мрежу од 960.гс коју користе као основу за своје реактивне пројекте.
08. СимплеГрид
СимплеГрид, Цонор-а Муирхеад-а, направљен је са одзивним реакцијама, тако да је лако започети и покренути свој реагујући пројекат веб странице.
09. ЦСС мрежа од 1140пк
Још један одличан мрежни систем који реагује је 1140пк ЦСС Грид дизајнера Мелбоурне-а Анди-ја Таилора, који од широке резолуције радне површине прелази на мобилни уређај.
10. Колумнални ЦСС мрежни систем
Мрежни систем Цолумнал, који је креирао Пулп + Пикелс, звани креативни директор Ницк Горслине, заснован је на мрежном систему од 1140пк, али са неким додатним додацима, попут дизајнерског комплета са скицама и шаблонима за израду жичаних оквира, као и ЦСС стиловима отклањања грешака.
11. Семантички систем мреже
Унапред обрађене ЦСС екстензије попут Сасс и ЛЕСС постају све популарније, а Семантиц грид систем Тилер Тате-а користи их за максималан ефекат у овом мрежном систему који тврди да не користи непотребне класе или елементе. Прочитајте више на цодинг.смасхингмагазине.цом/2011/08/23/тхе-семантиц-грид-систем-паге-лаиоут-фор-томорров/.
12. СУСИ
Попут семантичког мрежног система, Оддирд-ов СУСИ створио је мрежни систем који не користи додатне ознаке или посебне класе, али је СУСИ намењен само корисницима Сасс-а (и његовог проширења, Цомпасс-а).
13. Гридпак
Гридпак, компаније Ерскине Десигн, један је од најновијих мрежних генератора који брзо реагује. Омогућава вам постављање колона и олука на више тачака прекида, а затим излази ЦСС, ЈаваСцрипт и ПНГ датотеке тако да цео ваш тим ради са исте почетне тачке.
14. Гридсет
Још увек постоји мало тајновите атмосфере над Гридсетом, јер у време када ово пишем, још увек није објављен. Али алат Марк Боултон Десигн обећава мрежне системе по мери, који се не преписују и начин на који можете да сачувате и управљате мрежама на мрежи.
15. Боља Пхотосхоп мрежа за РВД
Еллиот Јаи Стоцкс предлаже напуштање старог де фацто мрежног стандарда од 960 пиксела и рад од 1000 пиксела, што олакшава рад са свим прорачунима у процентима. Ако се слажете, направио је ПСД за почетак рада.
16. Течне решетке
Ако је ваш дизајн високо специјализован и морате да направите сопствену прилагођену мрежу, то можете учинити помоћу калкулатора течних мрежа .нет Авардс, сјајног новопридошлог номинованог Харрија Робертса.
17. Одзивни калкулатор
Још један пиксел до процентуалног калкулатора, али овај Сту Робсона иде корак даље од осталих генеришући сва ЦСС правила за вас, што значи да их можете једноставно копирати и налепити у своје табеле стилова.
Алати за одзивне слике (и текст)
Још једна кључна компонента респонзивног веб дизајна су флуидне слике. Иако је техника за постизање флуидних слика једноставна, чини се да је оптимизација перформанси и учитавања страница за различите уређаје један од највећих изазова у прилагодљивом веб дизајну. Ево неколико ресурса за приступ проблему.
18. Одзивне слике
Филамент Гроуп је осмислила начин слања слике одговарајуће величине на основу резолуције екрана. Овај експеримент са сликама првим за мобилне уређаје који се прилагођавају одговорно и одговорно захтева позивање две слике различитих величина на референцу.
19. Прилагодљиве слике
Матт Вилцок је инспирацију из алата Респонсиве Имагес (Инстант слике) створио за стварање прилагодљивих слика, које користе ПХП и мало ЈаваСцрипт-а да би сервирали одговарајуће слике на корисников уређај без потребе за додатним маркирањем.
20. Сенцха.ио Срц (раније Тинисрц)
Сенцха пружа услугу у облаку која шаље оптимизоване верзије хостованих слика за величину уређаја који их захтева. Да бисте сазнали како се користи, погледајте доцс.сенцха.цом/ио/срц/.
21. ФитТект
Још један драгуљ компаније Паравел, Инц је ФитТект.јс, додатак јКуери који омогућава да веб-наслови реагују на дизајн и уређај. За детаље погледајте трентвалтон.цом/2011/05/10/фит-то-сцале/.
22. слабТект
Инспирисан ФитТект-ом и алгоритмом СлабТипе, слабТект Брајана Мекалистера је додатак јКуери који прави подебљане блокове текста који одговарају величини, а задржавају се на дефинисаној ширини.
Алати за медијске упите
Сад кад имате идеју о томе како ће се ваш изглед променити за различите уређаје, флуидну мрежу и флуидне слике, потребни су вам медијски упити да бисте елементе странице пребацили у стање одзива.
23. Одговорити.јс
Проблем са респонзивним дизајном је тај што прегледачи који не могу да читају медијске упите остају за собом. Ово можда није проблем са вашом циљном публиком, али и даље је добра пракса да се корисници прилагоде старијим прегледачима. Респонд.јс, Сцотт Јехл, подржава само својства мин-видтх и мак-видтх.
За више информација погледајте филаментгроуп.цом/лаб/респојс_фаст_цсс3_медиа_куериес_фор_интернет_екплорер_6_8_анд_море/.
24. ЦСС3-Медиакуериес.јс
ЦСС3-Медиакуериес.јс, аутора Воутера ван дер Граафа, омогућава старијим верзијама ИЕ и других прегледача да ефикасно тестирају и примене све врсте медијских упита.
25. Адапт.јс
Натхан Смитх, аутор оригиналног мрежног система 960.гс, написао је Адапт.јс, скрипту која открива димензије прегледача и служи само потребне табеле стилова - попут медијских упита, али без медијских упита, што значи да то функционише и у старијим прегледачима.
26. Цатегоризр
Ово је откривање уређаја којем се приступа из супротног угла - скрипта Цатегоризр Бретта Јанкорда претпоставља да су уређаји мобилни, осим ако није другачије откривено као радна површина или таблет, што вам омогућава да на симпатичан начин послужите ресурсе прегледачима.
Котлови са прилагодљивим дизајном (и мобилни)
У духу ефикасног радног процеса који реагује, бојлери олакшавају процес премештања дизајна у прегледач пре него касније. Већина ових котловских плоча комбинује најбоље од горе поменутих алата у један уредан пакет: флексибилну мрежу побољшану скриптама, истовремено примењујући филозофију издвајања садржаја за мобилне уређаје.
27. 320 и више
Анди Цларке'с 320 анд Уп је први модел за мобилне уређаје који се интегрише са многим другим модерним алатима за веб дизајн, као што су ЛЕСС и Боотстрап (види бр. 30). То је лаган и агилан начин за брзо покретање веб локације. Погледајте и наш интервју са Андијем, у којем нам говори више о новој верзији.
28. Без мреже
Гридлесс је ХТМЛ5 и ЦСС3 узорак који може послужити као основа за ваше респонзивне дизајне, са фокусом на типографију и компатибилност међу прегледачима.
29. Костур
За разлику од претходна два бојлера, чија је почетна тачка са најмањом резолуцијом, развојни комплет Скелетон, који је креирао Даве Гамацхе, заснован је на мрежном систему 960.гс и своди се на мобилни уређај. Скелетон се такође може похвалити одличним стилским оквиром за програмере за изградњу стилова.
30. Боотстрап
Израдио га је Твиттер и сада је отворени извор, Боотстрап је оквир и низ компонената за брзо успостављање веб локације на мрежи, а од верзије две сви његови основни делови реагују брзо.
Додаци, подлошке и полифили
Иако савремени прегледачи и софтвер имају тенденцију да буду прилагођени за реаговање, понекад морамо да користимо додатне алате како бисмо пружили доследно искуство.
31. Респонсиве Плугин
Мариос Лублински је написао ВордПресс додатак који обећава да ће било коју тренутну ВП тему претворити у одговарајућу. Како ово функционише, још не знам, јер није објављено у време овог писања, али ако испуни обећања, требало би да буде врло корисно.
32. Рушење
Руковање прекомерним садржајем добро функционише у прегледачима за рачунаре, али старији прегледачи за мобилне уређаје то раде недоследно. Површи Овертхров из марљиве Филамент Гроуп додаје доследно грациозно пропадање на свим уређајима, осигуравајући да сви корисници мобилних уређаја добију најбоље могуће искуство.
33. МедиаТабле
Додатак јКуери Марцо Пегораро, МедиаТабле, ради са Респонд.јс-ом како би вам помогао да заобиђете проблем приказивања великих табела података на уређајима са малим екраном, правећи одговарајуће колоне и додајући прекидач за приказ / сакривање где је то потребно.
„Тестирање, тестирање: 1-2-3 ...“
Други аспект прилагодљивог тока посла је познавање циљних уређаја и резолуција, а затим тестирање на њима.
34. ресизеМиБровсер
ресизеМиБровсер, програмера фронтенд-а Цхен Луо-а, има неколико унапред подешених димензија за прозор вашег прегледача за тестирање одговарајућих дизајнираних страница или стварање нове унапред постављене поставке ако не можете да пронађете ону која одговара вашим потребама.
35. респонсивепк
Слично као ресизеМиБровсер, респонсивепк, који је направио Реми Схарп, учитава ваше странице у прозор где можете да тестирате ширину и висину да бисте утврдили колико добро се покрећу ваши медијски упити и где су тачке прекида у дизајну.
36. Одзивно тестирање дизајна
Невероватно корисна алатка дизајнера и програмера Матта Керслеи-а: једноставно унесите УРЛ своје реактивне локације у Респонсиве Десигн Тестинг да бисте видели како се приказује у различитим величинама прегледача.
37. Одговорник
Унесите УРЛ и Респонсинатор ће вам показати како се приказује у многим уобичајеним величинама уређаја - са безобзирном роботском ефикасношћу. Тама Пугслеи и Анди Ховеи су одговорни за овај.
38. Респонсиве.ис
Још један емулатор уређаја на страници, Респонсиве.ис, омогућава вам да унесете УРЛ адресу, а затим је брзо промените у величину између низа различитих унапред подешених поставки. Направио га је тим који стоји иза будуће апликације Типецаст.
39. Сцреенкуери.ес
Још један алат за димензије прегледача, али Сцреенкуери.ес из компаније Мандар Схирке разликује се по томе што има широк сет унапред подешених опција за мобилне уређаје и таблете, као и мрежу и лењире који много олакшавају фино мерење.
40. Аптус
Још једна апликација за тестирање локација у више дефинисаних величина, али Аптус је Мац-нативе. То је доступно путем Мац Апп Сторе-а, а изворни доноси додатне функције као што су лаки снимци екрана и подршка ван мреже.
41. Пригодни дизајн обележивача
Вицтор Цоулон је направио врло једноставну, али ефикасну књижицу; када га активирате на било којој веб страници, додаје траку са алаткама која вам омогућава да се пребацујете између четири уобичајене димензије екрана како бисте могли да видите како се ваша страница приказује у различитим величинама.
42. Боокмарклет реактивног дизајна
Ова књижица маркера Бењамин Кеен омогућава више прилагођавања омогућавајући вам да сами дефинишете величине уређаја и колико их желите или мало. Када се активира, приказује локацију у свим одабраним величинама, једну до друге за лако поређење.
43. Сцреенфли
Сцреенфли, КуиркТоолс, омогућава вам да тестирате веб локацију у различитим резолуцијама на радној површини, таблету, мобилном уређају и телевизији. Тестирање радне површине тренутно је ограничено на Сафари, док таблет и мобилни имају више опција за уређаје и прегледаче. Телевизија је ограничена на Оперу.
44. Показатељ медијских упита
Јохан Броок нуди чисти ЦСС начин за тестирање када је претраживач покренуо медијски упит. Индикатор медијских упита је још један добар алат за тестирање и играње тачака прелома у дизајну.
45. Шим
Један од алата који се користи за редизајн Бостонског глобуса, постер постер покрета РВД, Схим је апликација Ноде.јс која покреће веб страницу на више уређаја на истој Вифи мрежи, чинећи међусобно тестирање много лакшим .
46. Дриве-Ин
Ако немате Ноде.јс сервер за покретање Схима, Сцотт Јехл је направио једноставнију верзију под називом Дриве-Ин која ради у основи на исти начин, али користећи ПХП, Апацхе и .хтаццесс датотеку.
47. Адобе Схадов
Адобе наставља да улаже у веб технологије са овим алатом за даљинско уклањање грешака. Инсталирајте Схадов и Цхроме додатак на Мац или Виндовс, као и Схадов клијент на Андроиду или иПхонеу, а можете да делите веб странице између различитих уређаја.
48. Опера Мобиле Емулатор + Ремоте Дебуг
Једноставнији начин отклањања грешака у мобилним страницама је инсталирање Опере и Опера Мобиле Емулатор-а и њихово повезивање помоћу њихове опције даљинског отклањања грешака. Једноставно и брзо за подешавање и има додатну предност тестирања на више од ВебКита.
Даља инспирација
Желите да добијете идеју о томе како други прилагођавају своје дизајне?
49. МедиаКуери.ес
Ако га већ нисте видели, сајт Медиакуери.ес има све већи број сајтова који су прешли на одговарајућу страну.
50. @РВД
Етхан Марцотте води Твиттер налог који доноси најновије вести, алате и витрине из света РВД.
Денисе Јацобс обожава да буде говорник, аутор, тренер веб дизајна и еванђелист креативности, док је Петер Гасстон аутор књиге ЦСС3 и ветеран веб програмер који блогује на Брокен Линкс.
Свиђа вам се ово? Прочитајте ово!
- Професионални савети за изградњу веб локације за мобилне уређаје
- Врхунске ЦСС и ЈаваСцрипт технике
- Како се прави апликација
- Најбољи бесплатни веб фонтови за дизајнере
- Откријте шта следи за проширену стварност
- Преузмите бесплатне текстуре: високе резолуције и спремне за употребу сада
