Tarkib
- Boshlash uchun vositalar
- 01. Javob beruvchi veb-dizayn eskiz varaqlari
- 02. Javob beruvchi dizayn eskizlari
- 03. Javob beruvchi simli ramkalar
- 04. Ko'p qurilmalarni joylashtirish naqshlari
- 05. Stil plitkalari
- Moslashuvchan / suyuq tarmoq uchun vositalar
- 06. Oltin panjara tizimi
- 07. Foldy960
- 08. SimpleGrid
- 09. 1140 pikselli CSS tarmog'i
- 10. Columnal CSS grid tizimi
- 11. Semantik panjara tizimi
- 12. SUSY
- 13. Gridpak
- 14. Gridset
- 15. RWD uchun yaxshiroq fotoshop tarmog'i
- 16. Suyuqlik panjaralari
- 17. Javob beruvchi kalkulyator
- Tezkor rasmlar (va matn) uchun vositalar
- 18. Javob beruvchi tasvirlar
- 19. Moslashuvchan tasvirlar
- 20. Sencha.io Src (sobiq Tinysrc)
- 21. FitText
- 22. slabText
- Media-so'rovlar uchun vositalar
- 23. Respond.js
- 24. CSS3-Mediaqueries.js
- 25. Adapt.js
- 26. Kategorizatsiya
- Javob beruvchi dizayn (va mobil) qozonxonalar
- 27. 320 va undan yuqori
- 28. Tarmoqsiz
- 29. skelet
- 30. Bootstrap
- Plaginlar, shimlar va polyfiller
- 31. Javob beruvchi plagin
- 32. ag'darish
- 33. MediaTable
- "Sinov, sinov: 1-2-3 ..."
- 34. resizeMyBrowser
- 35. javob beruvchi
- 36. Javob beruvchi dizayn sinovlari
- 37. Responsator
- 38. Javob beruvchi.is
- 39. Screenqueri.es
- 40. Aptus
- 41. Javob beruvchi dizayndagi Bookmarklet
- 42. Responsive Design Test Bookmarklet
- 43. Screenfly
- 44. Media Query Indicator
- 45. Shim
- 46. Kirishga kirish
- 47. Adobe Shadow
- 48. Opera Mobile Emulator + Remote Debug
- Keyinchalik ilhom
- 49. MediaQueri.es
- 50. @RWD
- Bu sizga yoqdimi? Buni o'qing!
Ethan Marcotte o'zining "Javob beruvchi veb-dizayn" maqolasida va shuningdek, eng ko'p sotilgan kitobida taqdim etgan / yaratganidek, saytga javob berish uchun uchta element kerak:
- Moslashuvchan / suyuq panjara
- Javob beruvchi tasvirlar
- Media so'rovlari
Javob beradigan veb-dizaynga oid motivlar, tushunchalar va texnikani qamrab oladigan boshqa ko'plab ajoyib maqolalar mavjud, shuning uchun biz ushbu maqolaning diqqat markazida sizni javobgar bo'lishga yordam beradigan ba'zi bir eng yaxshi vositalarda saqlaymiz.
Boshlash uchun vositalar
O'zingizning saytingizni yaratishni boshlashdan oldin, sahifadagi elementlarning turli xil brauzer o'lchamlariga mos keladigan tarzda qanday moslashishini eskirgan holda ko'rib chiqing va ko'pincha birinchi navbatda o'ylashdan kelib chiqadigan uzilishni oldini oling. ish stoli dizayni va boshqa javob beradigan takroriy takrorlashlar (ayniqsa Stefani (Sallivan) Rewisning izohiga qarang).
01. Javob beruvchi veb-dizayn eskiz varaqlari
Jeremy P Alford tomonidan yozilgan ushbu eskizlar to'plami sahifa bo'limlari turli xil o'lchamlarda qanday o'zgarishini xaritada boshlash uchun juda yaxshi boshlang'ich nuqtadir.
02. Javob beruvchi dizayn eskizlari
Agar siz o'zingizning barcha eskizlaringizni bir joyda saqlashni ma'qul ko'rsangiz, unda App Sketchbook kompaniyasi tomonidan 50 ta javob beradigan eskiz varaqlaridan iborat ushbu simli kitobni ko'rib chiqishingiz mumkin.
03. Javob beruvchi simli ramkalar
Javob beruvchi veb-saytlarni yaratishdagi qiyinchiliklardan biri bu simli ramkalardan foydalanib, javob beradigan dizayn qanday ishlashini ko'rsatishdir. Adobe-dan Jeyms Mellers ushbu murakkab eksperimental vositani birlashtirdi, bu esa murakkab maketlarning simli ramkalari qanday javob berishini ko'rsatdi.
04. Ko'p qurilmalarni joylashtirish naqshlari
Tezkor dizaynni rejalashtirishda sizdan oldin boshqa odamlar unga qanday murojaat qilganini ko'rish foydalidir, shuning uchun Luqo Vroblevskiyning "Ko'p moslamali maket naqshlari", misollarda havolalar bilan mashhur naqshlar ro'yxati, boshlash uchun juda yaxshi joy.
05. Stil plitkalari
Samanatha Warren's Style Tiles, javob beradigan davrda dizayn uchun yangi texnikani taklif qiladi; sobit kenglikdagi dizayn maketlari o'rniga, ular detallarga kirmasdan umumiy dizayn yondashuvini ko'rsatadigan namunalar yoki kayfiyat taxtalariga o'xshaydi.
Moslashuvchan / suyuq tarmoq uchun vositalar
Yuqorida aytib o'tilganidek, sezgir dizayn uchun zarur bo'lgan birinchi komponent moslashuvchan / suyuq tarmoqdir.Quyidagilar allaqachon qurilgan: siz ularni yuklab olishingiz kerak va siz tezda javob beradigan saytga borasiz.
06. Oltin panjara tizimi
Bundan tashqari, Less Framework-ni ishlab chiqqan Joni Korpi yaqinda sezgir dizayn uchun ishonchli tarmoq tizimining ushbu yangi versiyasini chiqardi. Oltita panjara tizimida 16 dan sakkizgacha, to'rtta ustunga osongina moslasha oladigan "katlama" deb hisoblanadi, shuningdek sizning sahifalaringizdagi katakchani sinovdan o'tkazadigan kichik brauzer qoplamasi mavjud.
07. Foldy960
Paravel, Inc-dagi iste'dodli gentlar o'zlarining javob loyihalari uchun asos sifatida foydalanadigan o'zgartirilgan 960.gs tarmog'ini chiqardi.
08. SimpleGrid
SimpleGrid, Conor Muirhead tomonidan, sezgirlik bilan qurilgan, shuning uchun sizning veb-saytingiz loyihasi bilan ishlash oson.
09. 1140 pikselli CSS tarmog'i
Yana bir ajoyib javob beruvchi tarmoq tizimi - bu Melburn dizayner Endi Teylorning 1140 pikselli CSS Grid-i, bu ish stolining keng piksellar sonidan tortib mobil telefonga o'tishiga qadar.
10. Columnal CSS grid tizimi
Pulp + Pixels aka ijodiy direktori Nik Gorsline tomonidan yaratilgan Columnal grid tizimi 1140px grid tizimiga asoslangan, ammo eskizlar jadvallari va simlarni tuzish shablonlari bilan dizayn to'plami, shuningdek CSS disk raskadrovka uslublari kabi ba'zi qo'shimcha qo'shimcha narsalar bilan ta'minlangan.
11. Semantik panjara tizimi
Sass va LESS kabi oldindan qayta ishlangan CSS kengaytmalari tobora ommalashib bormoqda va Tyler Tate-ning Semantic grid tizimi ularni keraksiz sinflar yoki elementlardan foydalanmaslikni da'vo qiladigan ushbu tarmoq tizimida maksimal darajada ishlatadi. Batafsil ma'lumotni coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/ sahifasida o'qing.
12. SUSY
Semantik panjara tizimi kabi Oddbird-ning SUSY-si qo'shimcha tizim yoki maxsus sinflardan foydalanmaydigan tarmoq tizimini yaratdi, ammo SUSY faqat Sass (va uning kengaytmasi - Compass) foydalanuvchilariga qaratilgan.
13. Gridpak
Gridpak, Erskine Design tomonidan ishlab chiqarilgan, eng yangi javob beradigan tarmoq generatorlaridan biridir. Bu sizning ustunlaringiz va oluklaringizni bir nechta to'xtash nuqtalarida o'rnatishga imkon beradi, so'ngra CSS, JavaScript va PNG fayllarini chiqaradi, shunda butun jamoangiz bir xil boshlang'ich nuqtadan ishlaydi.
14. Gridset
Gridset ustida hali ham ozgina sirli havo bor, chunki men buni yozganimda, u hali chiqarilgan emas. Ammo Mark Boulton Design-ning vositasi buyurtma qilingan, retseptsiz, tarmoq tizimlarini va tarmoqlarni onlayn saqlash va boshqarish usulini va'da qiladi.
15. RWD uchun yaxshiroq fotoshop tarmog'i
Elliot Jay Stocks eski 960px de-fakto grid standartidan voz kechishni va buning o'rniga 1000 pikselli bazadan ishlashni taklif qiladi va barcha foizli hisob-kitoblarni ishlashni osonlashtiradi. Agar siz rozi bo'lsangiz, u siz bilan ishlashni boshlash uchun PSD-ni yaratdi.
16. Suyuqlik panjaralari
Agar sizning dizayningiz yuqori darajada ixtisoslashgan bo'lsa va siz o'zingizning shaxsiy tarmog'ingizni yaratishingiz kerak bo'lsa, buni .net Awards mukofotining ajoyib yangi nomzodi Garri Robertsning suyuqlik panjarasi kalkulyatori bilan qilishingiz mumkin.
17. Javob beruvchi kalkulyator
Fikrlarni hisoblash uchun yana bir piksel, ammo Stu Robson tomonidan ishlab chiqilgan bu CSS qoidalarini boshqalar uchun yaratishda boshqalarnikiga qaraganda bir qadam oldinga siljiydi, ya'ni ularni o'zingizning uslublar jadvalingizga nusxalashingiz mumkin.
Tezkor rasmlar (va matn) uchun vositalar
Ta'sirchan veb-dizaynning yana bir muhim tarkibiy qismi bu suyuq tasvirlar. Suyuq tasvirlarga erishish texnikasi sodda bo'lsa-da, turli xil qurilmalar uchun ishlash va sahifa yuklanishini optimallashtirish sezgir veb-dizayndagi eng katta muammolardan biri bo'lib tuyuladi. Muammoni hal qilish uchun ba'zi manbalar.
18. Javob beruvchi tasvirlar
Filament Group ekran o'lchamlari asosida mos o'lchamdagi rasmni yuborish usulini ishlab chiqdi. Maslahat va mas'uliyat bilan masshtabni birinchi mobil tasvirlar bilan o'tkazilgan ushbu tajriba mos yozuvlar uchun har xil o'lchamdagi ikkita rasmga ega bo'lishni talab qiladi.
19. Moslashuvchan tasvirlar
Mett Uilkoks Adaptiv Tasvirlarni yaratish uchun Responsive Images vositasidan ilhom oldi, bu PHP va kichik JavaScript-ni ishlatib, foydalanuvchi qurilmasiga qo'shimcha rasmlarni talab qilmasdan mos rasmlarni taqdim etadi.
20. Sencha.io Src (sobiq Tinysrc)
Sencha bulutli xizmatni taqdim etadi, ular joylashtirilgan rasmlarning optimallashtirilgan versiyalarini so'ragan qurilma hajmiga yuboradi. Uni qanday ishlatishni bilish uchun docs.sencha.com/io/src/ ga qarang.
21. FitText
Paravel, Inc kompaniyasining yana bir marvaridi - bu FitText.js, jQuery plaginidir, bu veb-sayt turini dizaynga va qurilmaga javob beradi. Tafsilotlar uchun trentwalton.com/2011/05/10/fit-to-scale/ saytiga qarang.
22. slabText
FitText va SlabType algoritmidan ilhomlangan Brayan Makallisterning slabText - jQuery plaginidir, bu aniqlangan kenglikda saqlanib, hajmini o'zgartiradigan qalin matn bloklarini yaratadi.
Media-so'rovlar uchun vositalar
Endi sizning sxemangiz turli xil qurilmalar, suyuqlik panjarasi va suyuq tasvirlar uchun qanday o'zgarishi haqida tasavvurga ega bo'lsangiz, sahifa elementlarini javob berish holatiga o'tkazish uchun sizga media-so'rovlar kerak.
23. Respond.js
Ta'sirchan dizayndagi bitta muammo shundaki, ommaviy axborot so'rovlarini o'qiy olmaydigan brauzerlar orqada qoladilar. Bu sizning maqsadli auditoriyangiz bilan bog'liq muammo bo'lmasligi mumkin, ammo eski brauzerlarda foydalanuvchilarni joylashtirish hali ham yaxshi amaliyotdir. Respond.js, Scott Jehl tomonidan faqat min-width va max-width xususiyatlarini qo'llab-quvvatlaydi.
Qo'shimcha ma'lumot olish uchun filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/ saytiga tashrif buyuring.
24. CSS3-Mediaqueries.js
Wouter van der Graaf tomonidan yaratilgan CSS3-Mediaqueries.js IE va boshqa brauzerlarning eski versiyalarida har qanday media-so'rovlarni samarali sinab ko'rish va qo'llashga imkon beradi.
25. Adapt.js
Natan Smit, dastlabki 960.gs grid tizimining muallifi, Adapt.js skriptini yozdi, u brauzer o'lchamlarini aniqlaydi va faqat kerakli uslublar jadvallariga xizmat qiladi - masalan, media-so'rovlarsiz, ammo media-so'rovlarsiz, ya'ni u eski brauzerlarda ham ishlaydi.
26. Kategorizatsiya
Bu qarama-qarshi tomondan yaqinlashib kelayotgan qurilmani aniqlash - Bret Jankordning "Kategorizr" skriptida, agar qurilmalar ish stoli yoki planshet sifatida aniqlanmasa, mobil qurilmalar mavjud bo'lib, brauzerlarga xushmuomalalik bilan resurslarni taqdim etish imkoniyatini beradi.
Javob beruvchi dizayn (va mobil) qozonxonalar
Ishga yaroqli ish oqimi ruhida qozon plitalari dizaynlarni brauzerga tezroq ko'chirish jarayonini tezroq osonlashtiradi. Ushbu qozon plitalarining aksariyati yuqorida aytib o'tilgan asboblarning eng yaxshisini bitta toza to'plamga birlashtiradi: skriptlar bilan yaxshilangan moslashuvchan panjara, birinchi navbatda, mobil kontentga oid falsafalarni amalga oshirish.
27. 320 va undan yuqori
Andy Clarke's 320 and Up - bu mobil va boshqa ko'plab zamonaviy veb-dizayn vositalari bilan, masalan, LESS va Bootstrap bilan birlashtirilgan qozon plitasi (qarang # 30). Bu saytni tezda ishga tushirishning engil va epchil usuli. Shuningdek, Andy bilan suhbatimizga e'tibor bering, unda u yangi versiya haqida ko'proq ma'lumot beradi.
28. Tarmoqsiz
Gridless - bu sizning sezgir dizaynlaringiz uchun asos bo'lib xizmat qilishi mumkin bo'lgan HTML5 va CSS3 qozon plitasi bo'lib, tipografiya va o'zaro faoliyat brauzerning mosligiga e'tibor beradi.
29. skelet
Avvalgi ikkita qozon plitalaridan farqli o'laroq, ularning boshlang'ich nuqtasi eng kichik o'lchamlari bilan, Deyv Gamax tomonidan yaratilgan Skeleton ishlab chiqarish to'plami, 960.gs grid tizimiga asoslangan va mobil telefonga qadar tarozi. Skeleton shuningdek, ishlab chiquvchilar uchun uslublarni yaratish uchun ajoyib uslublar bazasiga ega.
30. Bootstrap
Twitter tomonidan yaratilgan va hozirda ochiq manbali Bootstrap - bu saytni tezkor ravishda onlayn tarzda olish uchun ramka va tarkibiy qismlar to'plami, va uning ikkinchi qismidan boshlab uning barcha asosiy qismlari javob beradi.
Plaginlar, shimlar va polyfiller
Garchi zamonaviy brauzerlar va dasturiy ta'minot javob berishga moslashgan bo'lsa-da, ba'zida doimiy tajribani ta'minlash uchun qo'shimcha vositalardan foydalanishimiz kerak.
31. Javob beruvchi plagin
Marios Lublinski har qanday hozirgi WP mavzusini sezgir mavzuga aylantirishni va'da qilgan WordPress plaginini yozdi. Bu qanday ishlashini men hali bilmayman, chunki bu yozilish vaqti sifatida nashr etilmagan, ammo agar u va'dasini bajarsa, bu juda foydali bo'lishi kerak.
32. ag'darish
Tarkibni to'ldirish bilan ishlash stol brauzerlarida yaxshi ishlaydi, ammo eski mobil brauzerlar uni mos kelmaydi. Mehnatsevar Filament Group-dan olib tashlangan polyfill, barcha mobil foydalanuvchilarning iloji boricha eng yaxshi tajribaga ega bo'lishiga ishonch hosil qilib, qurilmalar bo'ylab muttasil oqlangan degradatsiyani qo'shib qo'yadi.
33. MediaTable
Marko Pegoraroning jQuery plaginlari, MediaTable, Respond.js bilan ishlaydi, bu sizga kichik ekranli qurilmalarda katta ma'lumotlar jadvallarini qanday aks ettirish, javob beradigan ustunlar yaratish va kerak bo'lganda shou / yashirish tugmachasini qo'shish muammosini hal qilishda yordam beradi.
"Sinov, sinov: 1-2-3 ..."
Ta'sirchan ish oqimining yana bir jihati - bu sizning maqsad qurilmalaringiz va piksellar sonini bilish va keyin ularni sinab ko'rish.
34. resizeMyBrowser
resizeMyBrowser, frontend dasturchisi Chen Luo tomonidan, sizning brauzer oynangizda sezgir ravishda ishlab chiqilgan sahifalarni sinab ko'rish yoki sizning ehtiyojlaringizga mos sahifani topa olmasangiz, yangi sozlamalarni yaratish uchun bir nechta oldindan o'rnatilgan o'lchovlar mavjud.
35. javob beruvchi
Remy Sharp tomonidan qurilgan resizeMyBrowser, responseivepx singari, sizning sahifalaringizni sizning kengligingiz va balandligingizni sinab ko'rishingiz mumkin bo'lgan oynada yuklaydi, bu sizning media-so'rovlaringiz qay darajada o'qqa tutilayotganini va dizayndagi to'xtash nuqtalari qaerdaligini aniqlaydi.
36. Javob beruvchi dizayn sinovlari
Dizayner va ishlab chiquvchi Mett Kerslining ajoyib foydali vositasi: javob beradigan saytning URL manzilini Responsive Design Testing-ga kiritib, uning turli xil brauzer o'lchamlarida ishlashini ko'rish uchun.
37. Responsator
URL-manzilni kiriting va Responsator sizga uning ko'plab umumiy o'lchamlarda qanday ko'rsatilishini ko'rsatadi - shafqatsiz robot samaradorligi bilan. Bunga Tama Pugsli va Endi Xovi javobgardir.
38. Javob beruvchi.is
Yana bir sahifadagi qurilma emulyatori, Responsive.is URL-manzilni kiritishga imkon beradi, so'ngra uni tezda turli xil sozlamalar oralig'ida o'zgartiradi. Uni kelgusi Typecast ilovasi ortidagi jamoa yaratdi.
39. Screenqueri.es
Brauzerning yana bir o'lchov vositasi, ammo Mandar Shirke-dan Screenqueri.es mobil va planshetning oldindan sozlangan to'plami, shuningdek, o'lchovni juda osonlashtiradigan panjara va chiziqlar bilan ajralib turadi.
40. Aptus
Saytlarni bir nechta aniq o'lchamlarda sinab ko'rish uchun boshqa dastur, ammo Aptus - bu Mac-native. Bu Mac App Store-da mavjud va mahalliy bo'lish oson skrinshotlar va oflayn qo'llab-quvvatlash kabi qo'shimcha funktsiyalarga ega.
41. Javob beruvchi dizayndagi Bookmarklet
Viktor Kulon juda oddiy, ammo samarali xatcho'p yaratdi; uni har qanday veb-sahifada faollashtirganingizda, u to'rtta umumiy ekran o'lchamlari o'rtasida almashish imkonini beradigan asboblar panelini qo'shadi, shunda siz saytingizning turli o'lchamlarda qanday ishlashini ko'rishingiz mumkin.
42. Responsive Design Test Bookmarklet
Benjamin Kin tomonidan ishlab chiqarilgan ushbu xatcho'p sizga o'zingizning qurilmangiz o'lchamlarini belgilashga imkon berish orqali ko'proq sozlash imkoniyatini beradi. Faollashtirilganda u saytni tanlangan barcha o'lchamlarda, oson taqqoslash uchun yonma-yon ko'rsatadi.
43. Screenfly
Screenfly, QuirkTools tomonidan sizga ish stolida, planshetda, mobil telefonda va televizorda turli o'lchamlarda saytni sinashga imkon beradi. Hozirda ish stoli sinovlari faqat Safari bilan cheklangan, planshet va mobil qurilmalarda qurilmalar va brauzerlar uchun ko'proq imkoniyatlar mavjud. Televizor Opera bilan cheklangan.
44. Media Query Indicator
Yoxan Bruk brauzer tomonidan media-so'rov qachon ishga tushirilganligini tekshirishning sof CSS usulini taklif etadi. Media Query Indicator - bu dizaynni buzish nuqtalari bilan o'ynash va o'ynash uchun yana bir yaxshi vosita.
45. Shim
Boston Globe-ni qayta ishlashda ishlatiladigan vositalardan biri, RWD harakatining afishasi Shim, veb-sahifani bir xil Wi-Fi tarmog'idagi bir nechta qurilmalarda boshqaradigan Node.js ilovasi bo'lib, qurilmalararo sinovni ancha osonlashtiradi. .
46. Kirishga kirish
Agar sizda Shimni ishlatish uchun Node.js serveringiz bo'lmasa, Skott Jehl Drive-In deb nomlangan sodda versiyasini yaratdi, u asosan xuddi shu tarzda ishlaydi, lekin PHP, Apache va .htaccess fayllaridan foydalanadi.
47. Adobe Shadow
Adobe ushbu masofadan disk raskadrovka vositasi yordamida veb-texnologiyalarga o'tishni davom ettiradi. Shadow va Chrome kengaytmasini Mac yoki Windows-ga, shuningdek Shadow mijozini Android yoki iPhone-ga o'rnating va veb-sahifalarni turli xil qurilmalar bilan baham ko'rishingiz mumkin.
48. Opera Mobile Emulator + Remote Debug
Mobil sahifalarni disk raskadrovka qilishning eng oson usuli bu Opera va Opera Mobile Emulator-ni o'rnatish va ikkitasini ularning masofaviy disk raskadrovka opsiyasi bilan bog'lashdir. O'rnatish oson va tezkor bo'lib, WebKit-dan ko'proq testlarni o'tkazish qo'shimcha afzalliklarga ega.
Keyinchalik ilhom
Boshqalar o'zlarining dizaynlarini qanday ta'sirchan qilishlari haqida tasavvurga ega bo'lishni xohlaysizmi?
49. MediaQueri.es
Agar siz buni hali ko'rmagan bo'lsangiz, Mediaqueri.es saytida javob beradigan tomonga o'tgan saytlar soni tobora ko'payib bormoqda.
50. @RWD
Ethan Marcotte RWD dunyosidagi so'nggi yangiliklar, vositalar va vitrinalarni olib keladigan Twitter akkauntini yuritadi.
Denis Jeykobs ma'ruzachi, muallif, veb-dizayn bo'yicha murabbiy va ijodkorlik bo'yicha xushxabarchi bo'lishni yaxshi ko'radi, Piter Gastston esa "Kitob CSS3" ning muallifi va Broken Links-da blog yuritadigan faxriy veb-dasturchi.
Bu sizga yoqdimi? Buni o'qing!
- Mobil veb-sayt yaratish uchun professional maslahatlar
- CSS va JavaScript-ning eng yaxshi texnikasi
- Ilovani qanday yaratish kerak
- Dizaynerlar uchun eng yaxshi bepul veb-shriftlar
- Kengaytirilgan haqiqat uchun yana nima borligini bilib oling
- Bepul to'qimalarni yuklab oling: yuqori aniqlikdagi va hozir foydalanishga tayyor
