Мазмұны
- Жаңадан бастауға арналған құралдар
- 01. Веб-дизайнға жауап беретін эскиз парақтары
- 02. Дизайнға жауап беретін эскиздер
- 03. Жауапты сымдар
- 04. Көпқұрылымды орналастыру үлгілері
- 05. Стиль плиткалары
- Иілгіш / сұйық торға арналған құралдар
- 06. Алтын тор жүйесі
- 07. Foldy960
- 08. SimpleGrid
- 09. 1140px CSS торы
- 10. Columnal CSS тор жүйесі
- 11. Семантикалық тор жүйесі
- 12. SUSY
- 13. Гридпак
- 14. Gridset
- 15. RWD үшін жақсы Photoshop торы
- 16. Сұйықтық торлары
- 17. Жауапты калькулятор
- Жауапты суреттерге арналған құралдар (және мәтін)
- 18. Жауапты кескіндер
- 19. Бейімделгіш кескіндер
- 20. Sencha.io Src (бұрынғы Tinysrc)
- 21. FitText
- 22. тақта мәтіні
- Медиа сұраныстарға арналған құралдар
- 23. жауап беру
- 24. CSS3-Mediaqueries.js
- 25. Adapt.js
- 26. категориялау
- Жобалық (және жылжымалы) қазандықтар
- 27. 320 және одан жоғары
- 28. Торсыз
- 29. Қаңқа
- 30. Жүктеу бауы
- Плагиндер, шимдер және полифиллдер
- 31. Жауапты плагин
- 32. Төңкеру
- 33. MediaTable
- «Тестілеу, тестілеу: 1-2-3 ...»
- 34. MyBrowser өлшемін өзгерту
- 35. жауап беру
- 36. Жауапты дизайнерлік тестілеу
- 37. Респонсинатор
- 38. Жауапты
- 39. Screenqueri.es
- 40. Аптус
- 41. Дизайнға жауап беретін Bookmarklet
- 42. Жауапты дизайн бойынша сынақ бетбелгісі
- 43. Экран
- 44. БАҚ сұранысының индикаторы
- 45. Шим
- 46. кіру
- 47. Adobe Shadow
- 48. Opera Mobile эмуляторы + қашықтан жөндеу
- Әрі қарайғы шабыт
- 49. MediaQueri.es
- 50. @RWD
- Ұнады ма? Оларды оқыңыз!
Этан Маркотте өзінің «Жауапты веб-дизайн» мақаласында да, ең көп сатылатын кітабында да ұсынған / ұсынғанындай, сайтқа жауап беру үшін үш элемент қажет:
- Иілгіш / сұйық тор
- Жауапты кескіндер
- Медиа-сауалдар
Жауапты веб-дизайнға қатысты мотивтер, тұжырымдамалар мен әдістерді қамтитын басқа көптеген керемет мақалалар бар, сондықтан біз сіздерге осы мақаланың назарын жауапкершілікпен қарауға көмектесетін кейбір жақсы құралдарға аударамыз.
Жаңадан бастауға арналған құралдар
Өз сайтыңызды құруды бастамас бұрын, беттегі элементтердің қаралатын құрылғылардың әртүрлі шолғыштарының өлшемдеріне сәйкес келуін қалай бейімдейтінін сызып алғаныңыз жөн, және көбінесе бұл туралы ойлаудан туындайтын ажыратылымды болдырмау керек. жұмыс үстелінің дизайны және жауап қайтарудың қайталануы туралы ойлану (әсіресе Стефани (Салливан) Ревистің түсініктемесін қараңыз).
01. Веб-дизайнға жауап беретін эскиз парақтары
Джереми П Элфордтың жауап беретін эскиз парақтарының бұл жиынтығы парақ бөлімдері әр түрлі ажыратымдылықта қалай өзгеретінін бейнелеуге кірісудің керемет нүктесі болып табылады.
02. Дизайнға жауап беретін эскиздер
Егер сіз барлық эскиздеріңізді бір жерде ұстауды қаласаңыз, онда App Sketchbook компаниясының 50 жауап беретін эскиз парағынан тұратын осы сыммен жазылған кітапты қарастырғаныңыз жөн болар.
03. Жауапты сымдар
Жауапты веб-сайттарды құрудағы қиындықтардың бірі - сымсыз кадрларды қолдану, жауап беретін дизайнның қалай жұмыс істейтінін көрсету. Adobe компаниясының Джеймс Меллерсі бұл күрделі эксперименттік құралды күрделі сызбалардың сымсыз байланысы қаншалықты жауап беретінін көрсету үшін жинады.
04. Көпқұрылымды орналастыру үлгілері
Жауапты дизайнды жоспарлау кезінде сізден бұрын басқа адамдар оған қалай жақындағанын білу өте пайдалы, сондықтан Люк Вроблевскийдің мысалдарға сілтемелері бар танымал үлгілерді тізімдейтін «Көпқұрылғылардың орналасу үлгілері» өте жақсы орын.
05. Стиль плиткалары
Саманата Уорреннің стиль плиткалары жауап беру кезеңінде дизайнның жаңа техникасын ұсынады; ені бойынша бекітілген макеттерден гөрі, олар түйіршіктелген бөлшектерге бармай-ақ дизайнның жалпы тәсілін көрсететін үлгі немесе көңіл-күй тақталарына ұқсайды.
Иілгіш / сұйық торға арналған құралдар
Бұрын айтылғандай, сезімтал дизайн үшін қажет бірінші компонент - бұл икемді / сұйық тор.Келесі алдын-ала дайындалған: оларды жүктеу керек, сонда сіз жылдам жауап беретін сайтқа жетесіз.
06. Алтын тор жүйесі
Сондай-ақ Less Framework-ті дамытқан Джони Корпи жақында жауап беру үшін сенімді тор жүйесінің жаңа нұсқасын шығарды. 16-дан, сегізге дейін, төрт бағанға дейін оңай бейімделетіндіктен, «бүктелген» деп саналады, Golden Grid жүйесі сонымен қатар сіздің беттеріңіздегі торды сынау үшін ашатын шағын шолғыш қабатын ұсынады.
07. Foldy960
Paravel, Inc-тегі талантты генттер өздерінің жауап беретін жобалары үшін негіз ретінде қолданылған 960.gs өзгертілген торды шығарды.
08. SimpleGrid
SimpleGrid, Conor Muirhead, дайындалған сезімталдықпен салынған, сондықтан сіздің веб-сайтыңыздың жобасымен жұмыс істеу оңай.
09. 1140px CSS торы
Мельбурндық дизайнер Энди Тейлордың 1140 пиксельді CSS торы - бұл өте жақсы жауап беретін тор жүйесі, ол жұмыс үстелінің кеңейтілген ажыратымдылығынан мобильді телефонға ауысады.
10. Columnal CSS тор жүйесі
Pulp + Pixels аға креативті директоры Ник Горслайн жасаған Columnal тор жүйесі 1140px торлы жүйеге негізделген, бірақ кейбір қосымша жақсылықтармен бірге эскиздік кестелер мен сымдарды құру шаблоны бар дизайн жиынтығы, сондай-ақ CSS түзету стильдері бар.
11. Семантикалық тор жүйесі
Sass және LESS сияқты алдын-ала өңделген CSS кеңейтілімдері күннен күнге танымал бола бастады және Tyler Tate-тің Semantic grid жүйесі оларды қажетсіз кластар мен элементтер қолданбайтын осы жүйеде максималды әсер ету үшін пайдаланады. Толығырақ coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/ сайтынан оқыңыз.
12. SUSY
Семантикалық тор жүйесі сияқты Oddbird-тің SUSY торы жүйесін құрды, онда ешқандай қосымша түзетулер немесе арнайы сыныптар қолданылмайды, бірақ SUSY тек Sass қолданушыларына бағытталған (және оның компасы).
13. Гридпак
Gridpak, Эрскайн Дизайн, бұл ең жаңа жауап беретін тор генераторларының бірі. Бұл бағаналар мен арықтарды бірнеше үзіліс нүктелерінде орнатуға мүмкіндік береді, содан кейін CSS, JavaScript және PNG файлдарын шығарады, осылайша сіздің бүкіл командаңыз бір нүктеден жұмыс істейді.
14. Gridset
Gridset-тің құпиясы әлі де аз, өйткені мен оны жазған кезде ол әлі шыққан жоқ. Бірақ Марк Боултон Дизайн құралы арнайы, нұсқамалық емес, торлы жүйелер мен желіде өз торларыңызды сақтау мен басқару әдісін уәде етеді.
15. RWD үшін жақсы Photoshop торы
Elliot Jay Stocks ескі 960px торлы стандарттан бас тартуды және оның орнына 1000px базасынан жұмыс жасауды ұсынады, осылайша барлық пайыздық есептеулермен жұмыс істеуді жеңілдетеді. Егер сіз келіссеңіз, ол сізге жұмыс істеуге PSD жасады.
16. Сұйықтық торлары
Егер сіздің дизайныңыз өте мамандандырылған болса және сіз өзіңіздің жеке торыңызды жасауыңыз керек болса, оны .net Awards марапаттарының керемет жаңа үміткері Гарри Робертстің сұйық торлы калькуляторымен жасай аласыз.
17. Жауапты калькулятор
Калькулятор үшін пиксельдер үшін тағы бір пиксел, бірақ Сту Робсонның суреті басқаларға қарағанда сізге барлық CSS ережелерін құру арқылы алға басады, яғни сіз оларды стильдеріңізге көшіріп алып қоюыңызға болады.
Жауапты суреттерге арналған құралдар (және мәтін)
Жауапты веб-дизайнның тағы бір маңызды компоненті - сұйық суреттер. Сұйық суреттерге қол жеткізу әдісі қарапайым болғанымен, әр түрлі құрылғылар үшін өнімділікті және парақтың жүктелуін оңтайландыру жылдам веб-дизайндағы ең үлкен қиындықтардың бірі болып көрінеді. Мұнда мәселені шешуге арналған бірнеше ресурстар бар.
18. Жауапты кескіндер
Filament Group компаниясы экранның ажыратымдылығы негізінде сәйкес өлшемді кескінді жіберудің тәсілін ойлап тапты. Масштабты мұқият және жауапкершілікпен масштабтайтын мобильді алғашқы суреттерге арналған бұл эксперимент әр түрлі өлшемдегі екі суретке сілтеме жасауды талап етеді.
19. Бейімделгіш кескіндер
Мэтт Уилкокс жауап беретін кескіндер құралынан шабыт алып, бейімделгіш кескіндерді құрды, ол PHP және кішкене JavaScript-ті қолданушы құрылғысына қосымша кескін талап етпестен сәйкес кескіндерді қызмет етеді.
20. Sencha.io Src (бұрынғы Tinysrc)
Sencha орналастырылған кескіндердің оңтайландырылған нұсқаларын сұрайтын құрылғының көлеміне жіберетін бұлтты қызметті ұсынады. Оны қалай пайдалану керектігін білу үшін docs.sencha.com/io/src/ сайтына кіріңіз.
21. FitText
Paravel, Inc компаниясының тағы бір асыл заты - бұл FitText.js, тақырып пен веб-сайттың дизайнына жауап беретін jQuery қосылатын модулі. Толығырақ ақпаратты trentwalton.com/2011/05/10/fit-to-scale/ сайтынан қараңыз.
22. тақта мәтіні
FitText және SlabType алгоритмімен шабыттандырылған Брайан Макаллистердің slabText - бұл анықталған енде сақтай отырып, көлемін өзгертетін батыл мәтін блоктарын жасайтын jQuery қосылатын модулі.
Медиа сұраныстарға арналған құралдар
Енді сізде әртүрлі құрылғыларға, сұйықтық торына және сұйық суреттерге арналған орналасу схемасы қалай өзгеретіні туралы білетін болсаңыз, сізге парақтың элементтерін жауап беру жағдайына ауыстыру үшін медиа сұраулар қажет.
23. жауап беру
Жауапты дизайндағы бір мәселе - медиа сұранысты оқи алмайтын шолғыштар қалып қояды. Бұл сіздің мақсатты аудиторияңызға қатысты мәселе болмауы мүмкін, бірақ ескі браузерлерде қолданушыларды орналастыру жақсы тәжірибе болып табылады. Respond.js, Скотт Джелдің ені мен ені максимумды ғана қолдайды.
Толығырақ filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/ сайтынан қараңыз.
24. CSS3-Mediaqueries.js
Wouter van der Graaf ұсынған CSS3-Mediaqueries.js IE және басқа браузерлердің ескі нұсқаларына медиа-сұраныстың барлық түрлерін тиімді тексеруге және қолдануға мүмкіндік береді.
25. Adapt.js
960.gs тор жүйесінің түпнұсқасының авторы Натан Смит Adapt.js сценарийін жазды, ол браузердің өлшемдерін анықтайды және тек қажетті стильдер кестесіне қызмет етеді, мысалы медиа-сұраулар сияқты, бірақ медиа-сұрауларсыз, ол ескі браузерлерде де жұмыс істейді.
26. категориялау
Бұл қарама-қарсы жақтан жақындаған құрылғыны анықтау - Бретт Джанкордтың Категоризр сценарийі, егер басқаша жұмыс үстелі немесе планшет ретінде анықталмаса, мобильді болады деп болжайды, бұл ресурстарға браузерлерге түсіністікпен қызмет етуге мүмкіндік береді.
Жобалық (және жылжымалы) қазандықтар
Тиімді жұмыс процесінің рухында қазандықтар дизайндарды браузерге тезірек көшіру процесін жеңілдетеді. Бұл қазандықтардың көпшілігі жоғарыда аталған құралдардың ішіндегі ең жақсысын бір пакетке біріктіреді: сценарийлермен жақсартылған икемді тор, мобильді бірінші, мазмұнды философияны жүзеге асырады.
27. 320 және одан жоғары
Энди Кларктың 320 және одан жоғары моделі - бұл көптеген басқа заманауи веб-дизайн құралдарымен, мысалы, LESS және Bootstrap-мен біріктірілген (№30 қараңыз). Бұл сайтты жылдам іске қосудың жеңіл әрі ептілігі. Сонымен бірге Эндидің жаңа нұсқасы туралы толығырақ әңгімелескен сұхбатымызды қараңыз.
28. Торсыз
Gridless - бұл типографияға және кросс-браузердің үйлесімділігіне назар аудара отырып, сіздің жауаптарыңыздың дизайнына негіз бола алатын HTML5 және CSS3 қазандығы.
29. Қаңқа
Бастапқы нүктесі ең кіші ажыратымдылықтағы алдыңғы екі қазандықтардан айырмашылығы, Дейв Гамач жасаған Skeleton development kit 960.gs тор жүйесіне негізделген және ұялы телефонға дейін таралады. Қаңқа сонымен қатар дизайнерлерге стильдерді құру үшін керемет стильдік құрылымға ие.
30. Жүктеу бауы
Твиттерде құрылған және қазір көзі ашық Bootstrap - бұл сайтты жылдам желіге қосуға арналған рамка және компоненттер сериясы, және екінші нұсқаға сәйкес оның барлық негізгі бөліктері жауап береді.
Плагиндер, шимдер және полифиллдер
Қазіргі заманғы браузерлер мен бағдарламалық жасақтама жауап беруге бейім болғанымен, кейде тұрақты тәжірибе беру үшін қосымша құралдарды қолдануға тура келеді.
31. Жауапты плагин
Мариос Люблинский кез-келген ағымдағы WP тақырыбын жауап беретін тақырыпқа айналдыруға уәде беретін WordPress плагинін жазды. Бұл қалай жұмыс істейтінін мен әлі білмеймін, өйткені ол жазылған кезде шығарылған жоқ, бірақ егер ол уәдесінде тұрса, бұл өте пайдалы болуы керек.
32. Төңкеру
Мазмұннан асып кетуді өңдеу жұмыс үстелі браузерлерінде жақсы жұмыс істейді, бірақ ескі мобильді браузерлер оны үйлесімсіз басқарады. Filament Group-тің полифиллін құлату барлық ұялы байланыс пайдаланушыларының мүмкіндігінше жақсы тәжірибе жинауына көз жеткізіп, барлық құрылғыларда ұтымды деградацияны қосады.
33. MediaTable
Марко Пегорароның MediaTable jQuery плагині Respond.js-пен жұмыс істейді, ол сізге үлкен экран кестелерін кішігірім экрандағы құрылғыларда қалай көрсетуге болады, жауап беретін бағандар жасайды және шоу / жасыру траекториясын қосады.
«Тестілеу, тестілеу: 1-2-3 ...»
Жауапты жұмыс процесінің тағы бір аспектісі - мақсатты құрылғыларды және ажыратымдылықтарды білу, содан кейін оларды тексеру.
34. MyBrowser өлшемін өзгерту
resizeMyBrowser, фронталды әзірлеуші Чен Луо, сіздің браузеріңіздің терезесінде бірнеше алдын-ала орнатылған өлшемдерге жауап беретін жобаланған беттерді тексеруге немесе қажеттіліктеріңізге сай таба алмасаңыз, жаңа алдын-ала орнатуға болады.
35. жауап беру
Remy Sharp құрастырған resizeMyBrowser, responseivepx сияқты, сіздің беттеріңізді терезеге жүктейді, сіз ені мен биіктігін тексеріп, медиа сұрауларыңыздың қаншалықты жақсы жұмыс істейтінін және дизайндағы қай нүктелер екенін анықтай аласыз.
36. Жауапты дизайнерлік тестілеу
Дизайнер және әзірлеуші Мэтт Керслидің керемет пайдалы құралы: жауап беретін сайттың URL мекенжайын Responsive Design Testing ішіне енгізіп, оның әртүрлі шолғыш өлшемдерінде қалай жұмыс істейтінін көріңіз.
37. Респонсинатор
URL мекен-жайын енгізіңіз және «Респонсинатор» құрылғының көптеген кеңейтілген өлшемдерінде қалай көрсетілетінін көрсетеді - бұл роботтың тиімділігі. Бұған Тама Пугсли мен Энди Хови жауапты.
38. Жауапты
Басқа беттегі құрылғы эмуляторы, Responsive.is URL мекенжайын теруге мүмкіндік береді, содан кейін оны әр түрлі алдын-ала орнатылған параметрлер арасында жылдам өзгертеді. Оны алдағы Typecast бағдарламасының артында жасайтын команда жасайды.
39. Screenqueri.es
Браузердің тағы бір өлшемі құралы, бірақ Mandar Shirke-ден Screenqueri.es мобильді және планшеттік алдын ала орнатулар жиынтығымен, сондай-ақ тор мен сызғыштарды дәл өлшеуді жеңілдететін ерекшеленеді.
40. Аптус
Сайттарды бірнеше анықталған мөлшерде тексеруге арналған басқа бағдарлама, бірақ Aptus - бұл Mac-native. Бұл Mac App Store арқылы қол жетімді және жергілікті болу оңай скриншоттар және оффлайн қолдау сияқты қосымша функцияларды ұсынады.
41. Дизайнға жауап беретін Bookmarklet
Виктор Кулон өте қарапайым, бірақ тиімді бетбелгі жасады; оны кез-келген веб-бетте белсендіргенде, ол сізге төрт жалпы экран өлшемдерін ауыстыруға мүмкіндік беретін құралдар тақтасын қосады, осылайша сіз өзіңіздің сайтыңыздың әртүрлі өлшемдерде қалай жұмыс істейтінін көре аласыз.
42. Жауапты дизайн бойынша сынақ бетбелгісі
Бенджамин Киннің бұл бетбелгісі құрылғының жеке өлшемдерін және қалағаныңызша көп немесе аз мөлшерін анықтауға мүмкіндік бере отырып, көбірек теңшеуге мүмкіндік береді. Іске қосылған кезде ол сайтты барлық салыстырылған өлшемдермен қатар, оңай салыстыру үшін көрсетеді.
43. Экран
Screenfly, QuirkTools арқылы сайтты жұмыс үстелінде, планшетте, мобильді және теледидарда әртүрлі ажыратымдылықта тексеруге мүмкіндік береді. Қазіргі уақытта жұмыс үстелін тестілеу тек Safari-мен шектелген, ал планшет пен мобильді құрылғылар мен браузерлерге арналған көптеген мүмкіндіктерге ие. Теледидар тек Операмен шектеледі.
44. БАҚ сұранысының индикаторы
Йохан Брук браузерде медиа сұрау туындаған кезде тестілеудің таза CSS әдісін ұсынады. Медиа сұраныстың индикаторы - тестілеудің және дизайнның бұзылу нүктелерімен ойнаудың тағы бір жақсы құралы.
45. Шим
Boston Globe қайта құру кезінде қолданылатын құралдардың бірі, RWD қозғалысының постері, Shim - бұл Wifi желісіндегі бірнеше құрылғыларда веб-парақты басқаратын Node.js қосымшасы, бұл құрылғылар арасындағы тестілеуді айтарлықтай жеңілдетеді .
46. кіру
Егер сізде Shim бағдарламасын іске қосатын Node.js сервері болмаса, Скотт Джел Drive-In деп аталатын қарапайым нұсқасын жасады, ол негізінен дәл осылай жұмыс істейді, бірақ PHP, Apache және .htaccess файлын қолданады.
47. Adobe Shadow
Adobe осы қашықтан түзету құралымен веб-технологияларды дамытуды жалғастыруда. Shadow және Chrome кеңейтімін Mac немесе Windows-қа, сонымен қатар Shadow клиентін Android немесе iPhone-ға орнатыңыз, сонда сіз веб-парақтарды көптеген құрылғылар арасында бөлісе аласыз.
48. Opera Mobile эмуляторы + қашықтан жөндеу
Ұялы парақтарды жөндеудің оңай әдісі - Opera және Opera Mobile эмуляторын орнату және екеуін олардың қашықтан түзету параметрімен қосу. Қарапайым және жылдам орнату және WebKit-тен артық тестілеудің артықшылығы бар.
Әрі қарайғы шабыт
Басқалардың өз дизайнын қалай қабылдайтындығы туралы түсінік алғыңыз келе ме?
49. MediaQueri.es
Егер сіз бұны әлі көрмеген болсаңыз, Mediaqueri.es сайтында жауап беретін жағына өтіп кеткен сайттардың саны күн санап өсіп келеді.
50. @RWD
Этан Маркотте Twitter-де аккаунт ашады, онда RWD әлемінен соңғы жаңалықтар, құралдар мен витриналар бар.
Денис Джейкобс спикер, автор, веб-дизайн бойынша жаттықтырушы және креативті евангелист болуды ұнатады, ал Питер Гасстон - CSS3 кітабының авторы және Broken Links-те блог жүргізетін ардагер веб-әзірлеуші.
Ұнады ма? Оларды оқыңыз!
- Ұялы веб-сайтты құруға арналған кеңестер
- CSS және JavaScript-тің ең жақсы әдістері
- Қосымшаны қалай құруға болады
- Дизайнерлер үшін ең жақсы ақысыз веб-қаріптер
- Толықтырылған шындық үшін не болатынын біліп алыңыз
- Тегін текстураны жүктеңіз: жоғары ажыратымдылық және қазір пайдалануға дайын
