Задаволены
- Інструменты для пачатку
- 01. Спагадныя аркушы эскізаў вэб-дызайну
- 02. Спагадны дызайнерскі нарыс
- 03. Спагадныя каркасы
- 04. Шаблоны макета некалькіх прылад
- 05. Стылявая плітка
- Інструменты для гнуткай / вадкай сеткі
- 06. Сістэма "Залатая сетка"
- 07. Складчысты960
- 08. SimpleGrid
- 09. CSS-сетка 1140 пікс
- 10. Слупковая сістэма CSS-сеткі
- 11. Семантычная сеткавая сістэма
- 12. СУДНА
- 13. Грыдпак
- 14. Сетка
- 15. Лепшая сетка Photoshop для RWD
- 16. Вадкія сеткі
- 17. Спагадны калькулятар
- Інструменты для рэагавання на выявы (і тэкст)
- 18. Спагадныя малюнкі
- 19. Адаптыўныя вобразы
- 20. Sencha.io Src (раней Tinysrc)
- 21. FitText
- 22. плітаТэкст
- Інструменты для медыя-запытаў
- 23. Respond.js
- 24. CSS3-Mediaqueries.js
- 25. Adapt.js
- 26. Categorizr
- Спагадны дызайн (і мабільны) катлоў
- 27. 320 і вышэй
- 28. Без сеткі
- 29. Шкілет
- 30. Бутстрап
- Убудовы, пракладкі і поліпаўняльнікі
- 31. Спагадны убудова
- 32. Звяржэнне
- 33. МедыяТабліца
- "Тэставанне, тэсціраванне: 1-2-3 ..."
- 34. resizeMyBrowser
- 35. responsivepx
- 36. Спагадны тэст на дызайн
- 37. Адказчык
- 38. Спагадны.is
- 39. Screenqueri.es
- 40. Аптус
- 41. Спагадны дызайнерскі букмарк
- 42. Блакітны буклет тэсту на спагадны дызайн
- 43. Экран
- 44. Індыкатар медыя-запыту
- 45. Шым
- 46. Уезд
- 47. Adobe Shadow
- 48. Мабільны эмулятар Opera + дыстанцыйная адладка
- Далейшае натхненне
- 49. MediaQueri.es
- 50. @RWD
- Спадабалася гэта? Прачытайце гэтыя!
Як было прадстаўлена / прыдумана Ітанам Маркатэ як у яго артыкуле "Спагадны вэб-дызайн", так і ў яго самай прадаванай кнізе, трэба зрабіць тры элементы, каб зрабіць сайт гнуткім:
- Гнуткая / вадкая сетка
- Спагадныя выявы
- Запыты ў СМІ
Ёсць мноства іншых выдатных артыкулаў, якія ахопліваюць матывы, канцэпцыі і метады рэагавання на веб-дызайн, таму мы спынімся ў гэтым артыкуле на некаторых лепшых інструментах, якія дапамогуць вам рэагаваць адказна.
Інструменты для пачатку
Перш чым пачаць ствараць свой сайт, лепш накрэсліць, як элементы на старонцы будуць адаптавацца да розных памераў аглядальніка розных прылад, на якіх яны будуць праглядацца, і каб пазбегнуць разрыву сувязі, які часта ўзнікае пры думках у першую чаргу пра дызайн працоўнага стала і астатнія аператыўныя ітэрацыі як дадатковая думка (гл. асабліва каментарый Стэфані (Саліван) Рэвіс).
01. Спагадныя аркушы эскізаў вэб-дызайну
Гэты набор гнуткіх аркушаў эскізаў, зроблены Джэрэмі П Алфардам, з'яўляецца выдатнай адпраўной кропкай для таго, каб пачаць адлюстроўваць змены раздзелаў старонкі ў розных дазволах.
02. Спагадны дызайнерскі нарыс
Калі вы аддаеце перавагу захоўваць усе свае эскізы ў адным месцы, вы можаце разгледзець гэтую падшытую кнігу з 50 спагадных лістоў эскізаў кампаніі App Sketchbook.
03. Спагадныя каркасы
Адна са складанасцей стварэння адаптыўных вэб-сайтаў - выкарыстанне каркасаў, каб паказаць, як будзе працаваць адаптыўны дызайн. Джэймс Мелерс з Adobe сабраў гэты эксперыментальны інструмент, каб прадэманстраваць, як можа працаваць спагадны каркасны комплекс складаных макетаў.
04. Шаблоны макета некалькіх прылад
Пры планаванні адаптыўнага дызайну карысна паглядзець, як іншыя падышлі да яго перад вамі, таму Шаблоны макета некалькіх прылад Люка Урублеўскага, у якім пералічаныя папулярныя шаблоны са спасылкамі на прыклады, - выдатнае месца для пачатку.
05. Стылявая плітка
Стыль-плітка Саманаты Уорэна прапануе новую тэхніку дызайну ў спагадным узросце; а не дызайнерскія макеты з фіксаванай шырынёй, яны падобныя на ўзоры або дошкі настрою, якія паказваюць агульны дызайнерскі падыход, не ўдаючыся ў дробныя дэталі.
Інструменты для гнуткай / вадкай сеткі
Як было сказана раней, першым кампанентам, неабходным для рэагавання на дызайн, з'яўляецца гнуткая / вадкасная сетка.Наступнае ўжо падрыхтавана: вам трэба проста загрузіць іх, і вы хутка паедзеце на больш гнуткі сайт.
06. Сістэма "Залатая сетка"
Джоні Корпі, які таксама распрацаваў Less Framework, нядаўна выпусціў новую версію надзейнай сеткавай сістэмы для хуткага дызайну. Сістэма Golden Grid, якую можна лёгка адаптаваць ад 16 да васьмі і чатырох слупкоў, таксама мае невялікую накладку на браўзэр, якая выстаўляе сетку на вашыя старонкі для тэставання.
07. Складчысты960
Таленавітыя мужчыны з Paravel, Inc. выпусцілі дапрацаваную сетку 960.gs, якую яны выкарыстоўваюць у якасці асновы для рэагавання на свае праекты.
08. SimpleGrid
SimpleGrid, зроблены Конарам Мюрхедам, быў пабудаваны з хуткасцю рэагавання, таму лёгка пачаць працу з вашым спагадным праектам вэб-сайта.
09. CSS-сетка 1140 пікс
Яшчэ адна выдатная адаптыўная сеткавая сістэма - гэта CSS Grid 1140 пікселяў ад дызайнера Мельбурна Эндзі Тэйлара, які пераходзіць ад шырокага дазволу працоўнага стала да мабільнага.
10. Слупковая сістэма CSS-сеткі
Сеткавая сістэма Columnal, створаная Pulp + Pixels, яна ж крэатыўны дырэктар Нік Горслін, заснавана на сеткавай сістэме 1140px, але з дадатковымі смачнасцямі, такімі як дызайнерскі набор з эскізамі і шаблонамі каркасных рамак, а таксама стылямі адладкі CSS.
11. Семантычная сеткавая сістэма
Папярэдне апрацаваныя пашырэнні CSS, такія як Sass і LESS, становяцца ўсё больш папулярнымі, і семантычная сеткавая сістэма Тайлера Тэйта выкарыстоўвае іх для максімальнага эфекту ў гэтай сеткавай сістэме, якая сцвярджае, што не выкарыстоўвае непатрэбных класаў і элементаў. Больш падрабязна на coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/.
12. СУДНА
Як і семантычная сеткавая сістэма Oddbird, SUSY стварыла сеткавую сістэму, якая не выкарыстоўвае дадатковай разметкі і спецыяльных класаў, але SUSY арыентавана толькі на карыстальнікаў Sass (і яго пашырэння, Compass).
13. Грыдпак
Gridpak, ад Erskine Design, з'яўляецца адным з найноўшых рэактыўных генератараў сеткі. Гэта дазваляе ўсталяваць слупкі і вадасцёкавыя трубы ў шэрагу кропак спынення, пасля чаго выводзіць файлы CSS, JavaScript і PNG, каб уся ваша каманда працавала з адной і той жа адпраўной кропкі.
14. Сетка
Над Gridset па-ранейшаму адчуваецца таямніца, бо на момант напісання гэтага артыкула ён яшчэ не быў выпушчаны. Але інструмент Mark Boulton Design абяцае індывідуальныя, непрадказальныя, сеткавыя сістэмы і спосаб захаваць і кіраваць сваімі сеткамі ў Інтэрнэце.
15. Лепшая сетка Photoshop для RWD
Elliot Jay Stocks прапаноўвае адмовіцца ад старога фактычнага стандарту сеткі 960px і замест гэтага працаваць з базай 1000px, палягчаючы працу з усімі працэнтнымі разлікамі. Калі вы згодныя, ён зрабіў PSD для вас, каб пачаць працаваць.
16. Вадкія сеткі
Калі ваш дызайн з'яўляецца вузкаспецыялізаваным і вам трэба стварыць уласную сетку, вы можаце зрабіць гэта з дапамогай калькулятара вадкасных сетак .net Awards бліскучага наватара Гары Робертса.
17. Спагадны калькулятар
Яшчэ адзін піксель да працэнтнага калькулятара, але гэты Сцю Робсана ідзе на крок далей, чым іншыя, ствараючы для вас усе правілы CSS, гэта значыць вы можаце проста скапіяваць і ўставіць іх у свае табліцы стыляў.
Інструменты для рэагавання на выявы (і тэкст)
Іншым важным кампанентам адаптыўнага вэб-дызайну з'яўляюцца цякучыя малюнкі. У той час як методыка дасягнення вадкасных малюнкаў простая, аптымізацыя прадукцыйнасці і загрузкі старонак для розных прылад, здаецца, з'яўляецца адной з самых вялікіх праблем у спагадным дызайне. Вось некалькі рэсурсаў для вырашэння праблемы.
18. Спагадныя малюнкі
Filament Group распрацавала спосаб адпраўкі выявы адпаведнага памеру на аснове дазволу экрана. Гэты эксперымент з выявамі для мабільных прылад, якія хутка рэагуюць і адказна, патрабуе спасылак на два малюнкі розных памераў.
19. Адаптыўныя вобразы
Мэт Уілкакс натхніўся інструментам Responsive Images для стварэння адаптыўных малюнкаў, які выкарыстоўвае 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
Адзіная праблема адаптыўнага дызайну заключаецца ў тым, што аглядальнікі, якія не могуць чытаць медыя-запыты, застаюцца ззаду. Магчыма, гэта не праблема вашай мэтавай аўдыторыі, але ўсё ж гэта добрая практыка для размяшчэння карыстальнікаў старых браўзэраў. Respond.js, Скот Джэл, падтрымлівае толькі ўласцівасці min-width і max-width.
Для больш падрабязнай інфармацыі глядзіце filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/.
24. CSS3-Mediaqueries.js
CSS3-Mediaqueries.js, аўтар Вутэра ван дэр Граафа, дазваляе старым версіям IE і іншым браўзэрам эфектыўна тэставаць і прымяняць усе віды медыя-запытаў.
25. Adapt.js
Натан Сміт, аўтар арыгінальнай сеткавай сістэмы 960.gs, напісаў Adapt.js, сцэнар, які вызначае памеры браўзэра і абслугоўвае толькі неабходныя табліцы стыляў - напрыклад, мультымедыйныя запыты, але без медыя-запытаў, гэта азначае, што ён працуе і ў старых браўзэрах.
26. Categorizr
Гэта выяўленне прылады, якое падыходзіць з процілеглага боку - сцэнар Categorizr Брэта Джанкарда мяркуе, што прылады мабільныя, калі іншае не выяўлена як настольны кампутар альбо планшэт, што дазваляе спагадліва абслугоўваць рэсурсы для аглядальнікаў.
Спагадны дызайн (і мабільны) катлоў
У духу эфектыўнага аператыўнага працоўнага працэсу бойлерныя планкі палягчаюць працэс перамяшчэння дызайну ў браўзэр раней, чым пазней. Большасць з гэтых апаратаў аб'ядноўваюць лепшыя з вышэйзгаданых інструментаў у адзін цудоўны пакет: гнуткая сетка, узмоцненая сцэнарыямі, у той час як у першую чаргу рэалізуюцца мабільныя філасофіі.
27. 320 і вышэй
Эндзі Кларк 320 і вышэй - гэта першы шаблон для мабільных прылад, які інтэгруецца з многімі іншымі сучаснымі інструментамі вэб-дызайну, такімі як LESS і Bootstrap (гл. No 30). Гэта лёгкі і рухомы спосаб хутка запусціць сайт. Таксама праверце наша інтэрв'ю з Эндзі, у якім ён раскажа нам больш пра новую версію.
28. Без сеткі
Gridless - гэта шаблонны шаблон HTML5 і CSS3, які можа паслужыць асновай для вашых спагадных дызайнаў, з акцэнтам на тыпаграфіку і ўбудаваную сумяшчальнасць у некалькіх браўзэрах.
29. Шкілет
У адрозненне ад двух папярэдніх катлоў, адпраўной кропкай якіх з'яўляецца найменшае дазвол, камплект распрацоўкі Skeleton, створаны Дэйвам Гамашам, заснаваны на сеткавай сістэме 960.gs і маштабуецца да мабільнага. Skeleton таксама можа пахваліцца выдатным стылем для распрацоўшчыкаў для пабудовы стыляў.
30. Бутстрап
Пабудаваны Twitter і цяпер з адкрытым кодам, Bootstrap - гэта аснова і серыя кампанентаў для хуткага доступу да сайта ў Інтэрнэце, а з другой версіі ўсе яго асноўныя часткі працуюць аператыўна.
Убудовы, пракладкі і поліпаўняльнікі
Хоць сучасныя браўзэры і праграмнае забеспячэнне, як правіла, настроены на рэагаванне, часам нам даводзіцца выкарыстоўваць дадатковыя інструменты, каб забяспечыць стабільны досвед.
31. Спагадны убудова
Марыёс Люблінскі напісаў убудова WordPress, які абяцае ператварыць любую бягучую тэму WP у адаптыўную. Як гэта працуе, я пакуль не ведаю, бо ён не быў апублікаваны на момант напісання гэтага артыкула, але калі ён апраўдае свае абяцанні, гэта можа быць вельмі карысна.
32. Звяржэнне
Апрацоўка перапаўнення кантэнту добра працуе ў настольных браўзэрах, але старыя мабільныя аглядальнікі працуюць з гэтым непаслядоўна. Скідванне поліфіла ад працавітай Filament Group дадае паслядоўную вытанчаную дэградацыю на ўсіх прыладах, гарантуючы, што ўсе карыстальнікі мабільных прылад атрымліваюць найлепшы досвед.
33. МедыяТабліца
Убудова jQuery Марка Пегорара, MediaTable, працуе з Respond.js, каб дапамагчы вам абысці праблему, як адлюстраваць вялікія табліцы дадзеных на прыладах з невялікім экранам, зрабіць адаптыўныя слупкі і дадаць пераключэнне "паказаць / схаваць", дзе гэта падыходзіць.
"Тэставанне, тэсціраванне: 1-2-3 ..."
Іншы аспект аператыўнага працоўнага працэсу - ведаць мэтавыя прылады і дазволы, а затым праверыць іх.
34. resizeMyBrowser
resizeMyBrowser, распрацоўшчык інтэрфейсу Чэнь Луо, мае некалькі зададзеных вымярэнняў для акна вашага аглядальніка, каб праверыць старонкі, якія рэагуюць на дызайн, альбо стварыць новы набор, калі вы не можаце знайсці той, які адпавядае вашым патрэбам.
35. responsivepx
Падобна resizeMyBrowser, responsivepx, пабудаваны Remy Sharp, загружае вашы старонкі ў акно, дзе вы можаце праверыць шырыню і вышыню, каб вызначыць, наколькі добра спрацоўваюць вашы запыты на мультымедыя і дзе кропкі разрыву ў дызайне.
36. Спагадны тэст на дызайн
Неверагодна карысны інструмент дызайнера і распрацоўшчыка Мэта Керслі: проста ўвядзіце URL вашага адаптыўнага сайта ў Responsive Design Testing, каб убачыць, як ён адлюстроўваецца пры розных памерах браўзэра.
37. Адказчык
Увядзіце URL-адрас, і Responsinator пакажа, як ён адлюстроўваецца ў розных тыпах прылад - з бязлітаснай робататэхнічнай эфектыўнасцю. За гэта адказваюць Тама Пагслі і Эндзі Хові.
38. Спагадны.is
Яшчэ адзін унутраны эмулятар прылады, Responsive.is, дазваляе ўводзіць URL, а затым хутка змяняць яго памер паміж дыяпазонам розных прадусталяваных налад. Гэта зроблена камандай будучага прыкладання Typecast.
39. Screenqueri.es
Яшчэ адзін інструмент памераў браўзэра, але Screenqueri.es ад Mandar Shirke адрозніваецца тым, што мае шырокі набор мабільных і планшэтных прадусталяваных установак, а таксама сетку і лінейкі, якія значна палягчаюць дакладнае вымярэнне.
40. Аптус
Яшчэ адно прыкладанне для тэставання сайтаў з некалькімі памерамі, але Aptus з'яўляецца ўласным Mac. Гэта даступна ў краме Mac App Store, а роднасць прыносіць дадатковыя функцыі, такія як простыя скрыншоты і падтрымка ў аўтаномным рэжыме.
41. Спагадны дызайнерскі букмарк
Віктар Кулон зрабіў вельмі просты, але эфектыўны букмарклет; калі вы актывуеце яго на любой вэб-старонцы, ён дадае панэль інструментаў, якая дазваляе пераключацца паміж чатырма агульнымі памерамі экрана, каб вы маглі бачыць, як ваш сайт адлюстроўваецца ў розных памерах.
42. Блакітны буклет тэсту на спагадны дызайн
Гэты букмарклет Бенджаміна Кіна дазваляе наладзіць больш, дазваляючы вам вызначаць уласныя памеры прылад і колькі заўгодна альбо мала. Пры актывацыі ён паказвае сайт усіх выбраных памераў побач для зручнага параўнання.
43. Экран
Screenfly ад QuirkTools дазваляе праверыць сайт з розным дазволам на працоўным стале, планшэце, мабільным тэлебачанні і тэлебачанні. У цяперашні час тэсціраванне працоўнага стала абмежавана Safari, у той час як планшэт і мабільны маюць больш магчымасцей для прылад і аглядальнікаў. Тэлебачанне абмежавана операй.
44. Індыкатар медыя-запыту
Ёхан Брук прапануе чысты спосаб CSS праверыць, калі браўзэр запускае мультымедыйны запыт. Індыкатар медыя-запытаў - яшчэ адзін добры інструмент для тэставання і гульні з дызайнерскімі кропкамі.
45. Шым
Адзін з інструментаў, які выкарыстоўваецца ў рэдызайне Бостанскага глобуса, хлопчыка-плакатара руху RWD, - гэта прыкладанне Node.js, якое запускае вэб-старонку на некалькіх прыладах у адной сетцы Wi-Fi, што робіць тэставанне крос-прылад значна прасцей .
46. Уезд
Калі ў вас няма сервера Node.js для запуску Shim, Скот Джэль зрабіў больш простую версію пад назвай Drive-In, якая працуе прынцыпова аднолькава, але з выкарыстаннем PHP, Apache і файла .htaccess.
47. Adobe Shadow
Adobe працягвае імкненне да вэб-тэхналогій з дапамогай гэтага інструмента аддаленай адладкі. Усталюйце Shadow і пашырэнне Chrome на Mac або Windows, а таксама кліент Shadow на Android або iPhone, і вы можаце абменьвацца вэб-старонкамі паміж рознымі прыладамі.
48. Мабільны эмулятар Opera + дыстанцыйная адладка
Больш просты спосаб адладкі мабільных старонак - усталяваць Opera і Opera Mobile Emulator і злучыць іх з магчымасцю аддаленай адладкі. Простая і хуткая ўстаноўка, а таксама дадатковая перавага тэставання на больш чым WebKit.
Далейшае натхненне
Хочаце даведацца, як іншыя рэагуюць на іх дызайн?
49. MediaQueri.es
Калі вы гэтага яшчэ не бачылі, на сайце Mediaqueri.es пастаянна расце колькасць сайтаў, якія перайшлі на спагадны бок.
50. @RWD
Ітан Маркат вядзе твітэр-акаўнт, які прадстаўляе апошнія навіны, інструменты і вітрыны са свету RWD.
Дэніз Джэйкабс абажае быць спікерам, аўтарам, трэнерам вэб-дызайну і евангелістам творчасці, а Пітэр Газстан - аўтар кнігі "CSS3" і ветэран-вэб-распрацоўшчык, які вядзе блогі на Broken Links.
Спадабалася гэта? Прачытайце гэтыя!
- Прафесійныя парады па стварэнні мабільнага сайта
- Лепшыя метады CSS і JavaScript
- Як стварыць прыкладанне
- Лепшыя бясплатныя вэб-шрыфты для дызайнераў
- Даведайцеся, што чакае дапоўненая рэальнасць
- Загрузіце бясплатныя тэкстуры: з высокім дазволам і гатовыя да выкарыстання зараз
