Saturs
- Sākuma rīki
- 01. Atsaucīgas tīmekļa dizaina skiču lapas
- 02. Atsaucīga dizaina skiču grāmata
- 03. Atsaucīgi stiepļu rāmji
- 04. Vairāku ierīču izkārtojuma modeļi
- 05. Stila flīzes
- Instrumenti elastīgam / šķidram režģim
- 06. Zelta režģa sistēma
- 07. Foldy960
- 08. SimpleGrid
- 09. 1140px CSS režģis
- 10. Kolonnu CSS režģu sistēma
- 11. Semantiskā režģa sistēma
- 12. SUSY
- 13. Gridpaks
- 14. Režģis
- 15. Labāks Photoshop režģis RWD
- 16. Šķidruma režģi
- 17. Reaģējošais kalkulators
- Rīki reaģējošiem attēliem (un tekstam)
- 18. Atsaucīgi attēli
- 19. Adaptīvie attēli
- 20. Sencha.io Src (agrāk Tinysrc)
- 21. FitText
- 22. plāksneText
- Rīki multivides vaicājumiem
- 23. Atbildēt.js
- 24. CSS3-Mediaqueries.js
- 25. Adapt.js
- 26. Kategororizr
- Atsaucīgas dizaina (un mobilās) katlu plāksnes
- 27. 320 un vairāk
- 28. Bez režģa
- 29. Skelets
- 30. Bootstrap
- Spraudņi, starplikas un polifilmas
- 31. Atsaucīgais spraudnis
- 32. Gāzt
- 33. MediaTable
- "Testēšana, testēšana: 1-2-3 ..."
- 34. resizeMyBrowser
- 35. atbildes reakcija
- 36. Atsaucīga dizaina pārbaude
- 37. Atbildētājs
- 38. Atsaucīgs.ir
- 39. Screenqueri.es
- 40. Aptus
- 41. Atsaucīga dizaina grāmatzīme
- 42. Atsaucīgais dizaina pārbaudes grāmatiņš
- 43. Ekrāns
- 44. Multivides vaicājumu rādītājs
- 45. Shim
- 46. Iebraukšana
- 47. Adobe Shadow
- 48. Opera mobilais emulators + attālā atkļūdošana
- Turpmāka iedvesma
- 49. MediaQueri.es
- 50. @ RWD
- Patika tas? Izlasiet šos!
Kā Ītans Markots ieviesa / izdomāja gan rakstā "Atsaucīgais tīmekļa dizains", gan arī vislabāk pārdotajā grāmatā, lai vietne būtu atsaucīga, ir nepieciešami trīs elementi:
- Elastīgs / plūstošs režģis
- Reaģējoši attēli
- Mediju vaicājumi
Ir daudz citu lielisku rakstu, kas aptver motīvus, koncepcijas un paņēmienus saistībā ar atsaucīgu tīmekļa dizainu, tāpēc šajā rakstā uzmanība tiks pievērsta dažiem galvenajiem rīkiem, kas palīdzēs jums kļūt atbildīgākiem.
Sākuma rīki
Pirms sākat veidot savu vietni, vislabāk ir ieskicēt, kā lapas elementi tiks pielāgoti, lai tie atbilstu dažādu pārlūkprogrammu izmēriem dažādās ierīcēs, kuras tie tiks apskatīti, un lai izvairītos no atvienošanās, kas bieži rodas, domājot galvenokārt par darbvirsmas dizains un pārējās atsaucīgās iterācijas kā pārdomas (skat. īpaši Stefānijas (Salivana) Rewisa komentāru).
01. Atsaucīgas tīmekļa dizaina skiču lapas
Šis Džeremija P Alforda atsaucīgo skicju lapu komplekts ir lielisks sākumpunkts, lai sāktu kartēt, kā lapu sadaļas mainīsies dažādās izšķirtspējās.
02. Atsaucīga dizaina skiču grāmata
Ja vēlaties visas skices glabāt vienā vietā, varat apsvērt šo App Sketchbook uzņēmuma vadu iesieto grāmatu ar 50 atsaucīgām skiču lapām.
03. Atsaucīgi stiepļu rāmji
Viena no grūtībām, veidojot atsaucīgas vietnes, ir stiepļu rāmju izmantošana, lai parādītu, kā darbosies atsaucīgais dizains. Džeimss Mellers no Adobe ir izveidojis šo eksperimentālo rīku, lai parādītu, kā var darboties sarežģīta izkārtojuma atsaucīga stiepļu veidošana.
04. Vairāku ierīču izkārtojuma modeļi
Plānojot atsaucīgu dizainu, ir noderīgi uzzināt, kā citi cilvēki ir pie jums vērsušies, tāpēc Luka Vrubļevska Vairāku ierīču izkārtojuma modeļi, kuros uzskaitīti populāri modeļi ar saitēm uz piemēriem, ir lieliska vieta, kur sākt.
05. Stila flīzes
Samanatha Warren stila flīzes piedāvā jaunu dizaina tehniku atsaucīgā laikmetā; nevis fiksēta platuma dizaina maketi, tie ir kā paraugi vai moodboards, kas parāda vispārējo dizaina pieeju, neiedziļinoties detaļās.
Instrumenti elastīgam / šķidram režģim
Kā minēts iepriekš, pirmais komponents, kas nepieciešams atsaucīgai konstrukcijai, ir elastīgs / plūstošs režģis.Tālāk ir jau iepriekš izveidots: jums vienkārši tie ir jālejupielādē, un jūs ātri nonāksiet ceļā uz atsaucīgāku vietni.
06. Zelta režģa sistēma
Joni Korpi, kurš arī izstrādāja Less Framework, nesen ir izlaidis šo uzticamās režģa sistēmas jauno versiju atsaucīgam dizainam. Tiek uzskatīts, ka "saliekamais", jo tas viegli pielāgojas no 16 līdz astoņām līdz četrām kolonnām, Golden Grid sistēmā ir arī neliels pārlūka pārklājums, kas testēšanai atklāj jūsu lapu režģi.
07. Foldy960
Paravel, Inc. talantīgie kungi ir izlaiduši modificēto 960.gs režģi, kuru viņi izmanto par pamatu saviem atsaucīgajiem projektiem.
08. SimpleGrid
Conor Muirhead, SimpleGrid, tika uzbūvēts ar gatavu atsaucību, tāpēc ir viegli sākt darboties ar jūsu atsaucīgās vietnes projektu.
09. 1140px CSS režģis
Vēl viena lieliska atsaucīga režģa sistēma ir Melburnas dizainera Endija Teilora 1140px CSS režģis, kas pāriet no plašas darbvirsmas izšķirtspējas uz mobilo.
10. Kolonnu CSS režģu sistēma
Columnal režģa sistēma, ko izveidojis Pulp + Pixels, aka radošais direktors Niks Gorsline, ir balstīta uz 1140px režģa sistēmu, taču ar dažiem papildu labumiem, piemēram, dizaina komplektu ar skiču lapām un stiepļu veidošanas veidnēm, kā arī CSS atkļūdošanas stiliem.
11. Semantiskā režģa sistēma
Iepriekš apstrādāti CSS paplašinājumi, piemēram, Sass un LESS, kļūst arvien populārāki, un Tailera Teita Semantiskā režģa sistēma tos maksimāli izmanto šajā tīkla sistēmā, kas apgalvo, ka neizmanto nevajadzīgas klases vai elementus. Lasiet vairāk vietnē coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/.
12. SUSY
Tāpat kā semantiskā režģa sistēma, arī Oddbird's SUSY izveidoja režģa sistēmu, kurā netiek izmantoti papildu marķējumi vai īpašas klases, taču SUSY ir paredzēta tikai Sass (un tā paplašinājuma Compass) lietotājiem.
13. Gridpaks
Gridpak, autors Erskine Design, ir viens no jaunākajiem atsaucīgajiem tīkla ģeneratoriem apkārt. Tas ļauj iestatīt kolonnas un notekas vairākos punktos, pēc tam izvada CSS, JavaScript un PNG failus, lai visa jūsu komanda strādā no tā paša sākuma punkta.
14. Režģis
Gridset joprojām ir nedaudz noslēpumains, jo brīdī, kad es to uzrakstīju, tas vēl nav faktiski izlaists. Bet Marka Boultona Dizaina rīks sola ekskluzīvas, bezrecepšu tīkla sistēmas un veidu, kā tiešsaistē saglabāt un pārvaldīt jūsu tīklus.
15. Labāks Photoshop režģis RWD
Eljots Džejs Stocks ierosina atteikties no vecā 960 pikseļu de facto režģa standarta un tā vietā strādāt no 1000 pikseļu bāzes, tādējādi atvieglojot visu procentu aprēķinu izmantošanu. Ja jūs piekrītat, viņš ir izveidojis PSD, lai jūs varētu sākt strādāt.
16. Šķidruma režģi
Ja jūsu dizains ir ļoti specializēts un jums ir jāizveido savs pielāgotais režģis, to varat izdarīt, izmantojot .net Awards izcilo jaunpienācēju nominētā Harija Robertsa šķidruma režģa kalkulatoru.
17. Reaģējošais kalkulators
Vēl viens pikseļu un procentu kalkulators, taču šis Stu Robsona solis iet tālāk nekā citi, ģenerējot jums visus CSS noteikumus, kas nozīmē, ka jūs varat tos vienkārši nokopēt un ielīmēt savās stila lapās.
Rīki reaģējošiem attēliem (un tekstam)
Vēl viena būtiska atsaucīga tīmekļa dizaina sastāvdaļa ir plūstoši attēli. Kaut arī plūstošo attēlu iegūšanas tehnika ir vienkārša, veiktspējas un lapu ielādes optimizēšana dažādām ierīcēm, šķiet, ir viena no lielākajām problēmām reaģējošā tīmekļa dizainā. Šeit ir daži resursi, lai tuvotos problēmai.
18. Atsaucīgi attēli
Filament Group izstrādāja veidu, kā nosūtīt piemērota izmēra attēlu, pamatojoties uz ekrāna izšķirtspēju. Šis eksperiments ar pirmajiem mobilajiem attēliem, kuru mērogs ir atsaucīgs un atbildīgs, prasa atsauces uz diviem dažāda lieluma attēliem.
19. Adaptīvie attēli
Mets Vilkoks iedvesmojās no rīka Responsive Images, lai izveidotu adaptīvos attēlus, kas izmanto PHP un nelielu JavaScript, lai lietotāja ierīcē piegādātu atbilstošus attēlus, neprasot nekādu papildu marķējumu.
20. Sencha.io Src (agrāk Tinysrc)
Sencha nodrošina mākoņpakalpojumu, kas nosūta optimizētas mitināto attēlu versijas atbilstoši ierīces lielumam, pieprasot tos. Lai uzzinātu, kā to izmantot, skatiet vietni docs.sencha.com/io/src/.
21. FitText
Vēl viena Paravel, Inc pērle ir FitText.js, jQuery spraudnis, lai virsraksta tīmekļa tips reaģētu uz dizainu un ierīci. Sīkāku informāciju skatiet vietnē trentwalton.com/2011/05/10/fit-to-scale/.
22. plāksneText
Iedvesmojoties no FitText un SlabType algoritma, Braiena Makalistera slabText ir spraudnis jQuery, kas padara drosmīgus teksta blokus, kas mainīgi mainās, vienlaikus saglabājot noteiktu platumu.
Rīki multivides vaicājumiem
Tagad, kad jums ir ideja par to, kā mainīsies jūsu izkārtojums dažādām ierīcēm, šķidruma režģim un plūstošiem attēliem, jums ir nepieciešami multivides vaicājumi, lai lapas elementi tiktu pārvērsti reaģēšanas stāvoklī.
23. Atbildēt.js
Viena problēma ar atsaucīgu dizainu ir tā, ka pārlūkprogrammas, kas nespēj lasīt multivides vaicājumus, tiek atstātas aiz muguras. Iespējams, ka tā nav problēma ar jūsu mērķauditoriju, taču tā joprojām ir laba prakse lietotāju izmitināšanai vecākās pārlūkprogrammās. Skots Jehls “Respond.js” atbalsta tikai rekvizītus min-width un max-width.
Plašāku informāciju skatiet 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 ļauj vecākām IE un citu pārlūkprogrammu versijām efektīvi pārbaudīt un lietot visu veidu multivides vaicājumus.
25. Adapt.js
Sākotnējā 960.gs režģu sistēmas autors Neitans Smits ir uzrakstījis skriptu Adapt.js, kas nosaka pārlūka izmērus un apkalpo tikai nepieciešamās stila lapas, piemēram, multivides vaicājumus, bet bez multivides vaicājumiem, kas nozīmē, ka tas darbojas arī vecākās pārlūkprogrammās.
26. Kategororizr
Šī ir ierīču noteikšana, kurai tuvojas pretējs leņķis - Breta Jankorda skripts Kategororizr pieņem, ka ierīces ir mobilas, ja vien nav noteikts citādi kā darbvirsma vai planšetdators, kas ļauj simpātiski apkalpot resursus pārlūkprogrammām.
Atsaucīgas dizaina (un mobilās) katlu plāksnes
Efektīvas un atsaucīgas darbplūsmas garā katlu plāksnes atvieglo dizaina pārvietošanas procesu pārlūkprogrammā ātrāk nekā vēlāk. Lielākā daļa šo katlu apvieno labākos no iepriekš minētajiem rīkiem vienā veiklā iepakojumā: elastīgs režģis, kas papildināts ar skriptiem, vienlaikus īstenojot mobilo sakaru saturu saturošas filozofijas.
27. 320 un vairāk
Endija Klarka 320 un Up ir mobilo sakaru katls, kas integrējas ar daudziem citiem moderniem tīmekļa dizaina rīkiem, piemēram, LESS un Bootstrap (skat. # 30). Tas ir viegls un veikls veids, kā ātri izveidot vietni. Apskatiet arī mūsu interviju ar Endiju, kurā viņš vairāk stāsta par jauno versiju.
28. Bez režģa
Gridless ir HTML5 un CSS3 katlu plāksne, kas var kalpot par pamatu jūsu atsaucīgajiem dizainiem, galveno uzmanību pievēršot tipogrāfijai un izceltai pārlūkprogrammu saderībai.
29. Skelets
Atšķirībā no iepriekšējām divām katlām, kuru sākumpunkts ir ar mazāko izšķirtspēju, Deivs Gamache izveidotais skeleta izstrādes komplekts ir balstīts uz 960.gs režģa sistēmu un tiek samazināts līdz mobilajam. Skelets lepojas arī ar lielisku stila ietvaru, lai izstrādātāji varētu veidot stilus virsū.
30. Bootstrap
Bootstrap ir Twitter veidots un tagad atvērts, un tas ir ietvars un komponentu sērija, lai ātri iegūtu vietni tiešsaistē, un kopš otrās versijas visas tās pamatdaļas darbojas atsaucīgi.
Spraudņi, starplikas un polifilmas
Lai gan mūsdienu pārlūkprogrammas un programmatūra parasti ir pielāgota reaģēšanai, dažreiz mums ir jāizmanto papildu rīki, lai nodrošinātu konsekventu pieredzi.
31. Atsaucīgais spraudnis
Marios Ļubļinskis ir uzrakstījis WordPress spraudni, kas sola jebkuru pašreizējo WP tēmu pārvērst atsaucīgā. Kā tas darbojas, es vēl nezinu, jo tas vēl nav izlaists šīs rakstīšanas laikā, taču, ja tas piepilda solījumus, tam vajadzētu būt ļoti noderīgam.
32. Gāzt
Satura pārpildes apstrāde darbojas labi darbvirsmas pārlūkprogrammās, taču vecākas mobilās pārlūkprogrammas to izturas pretrunīgi. Cītīgās Filament Group aizpildīšanas polifilma nodrošina vienmērīgu un graciozu degradāciju visās ierīcēs, nodrošinot, ka visi mobilo ierīču lietotāji gūst vislabāko iespējamo pieredzi.
33. MediaTable
Marco Pegoraro spraudnis jQuery, MediaTable, darbojas ar Respond.js, lai palīdzētu jums apiet problēmu, kā parādīt lielas datu tabulas uz maza ekrāna ierīcēm, izveidojot atsaucīgas kolonnas un pievienojot rādīt / paslēpt pārslēgu, kur tas ir piemērots.
"Testēšana, testēšana: 1-2-3 ..."
Vēl viens atsaucīgas darbplūsmas aspekts ir zināt mērķa ierīces un izšķirtspējas un pēc tam pārbaudīt tajās.
34. resizeMyBrowser
resizeMyBrowser, ko nodrošina frontend izstrādātājs Chen Luo, jūsu pārlūkprogrammas logā ir vairākas iepriekš iestatītas dimensijas, lai pārbaudītu atsaucīgi veidotas lapas vai izveidotu jaunu sākotnējo iestatījumu, ja nevarat atrast tādu, kas atbilst jūsu vajadzībām.
35. atbildes reakcija
Līdzīgi kā resizeMyBrowser, Remy Sharp izveidotais responsivepx ielādē jūsu lapas logā, kurā varat pārbaudīt platumu un augstumu, lai noteiktu, cik veiksmīgi tiek aktivizēti jūsu multivides vaicājumi un kur atrodas pārtraukuma punkti.
36. Atsaucīga dizaina pārbaude
Dizainera un izstrādātāja Meta Kerslija neticami noderīgs rīks: vienkārši ievadiet savas atsaucīgās vietnes URL sadaļā Reaģējošā dizaina pārbaude, lai redzētu, kā tas tiek sniegts dažādos pārlūkprogrammas izmēros.
37. Atbildētājs
Ievadiet URL, un Responsinator parādīs, kā tas tiek parādīts daudzos izplatītos ierīču izmēros - ar nežēlīgu robotu efektivitāti. Par šo atbild Tama Pugsley un Endijs Hovijs.
38. Atsaucīgs.ir
Vēl viens lapā ievietots ierīces emulators Responsive.is ļauj ierakstīt URL, pēc tam ātri mainot tā lielumu starp dažādiem sākotnējiem iestatījumiem. To izgatavojusi komanda, kas atrodas aiz gaidāmās Typecast lietotnes.
39. Screenqueri.es
Vēl viens pārlūkprogrammas izmēru rīks, bet Screenqueri.es no Mandara Širkes atšķiras ar to, ka tam ir plašs mobilo un planšetdatoru sākotnējo iestatījumu komplekts, kā arī režģis un lineāli, kas daudz atvieglo smalko mērīšanu.
40. Aptus
Vēl viena lietotne vietņu testēšanai vairākos noteiktos izmēros, taču Aptus ir vietēja Mac versija. Tā ir pieejama, izmantojot Mac App Store, un dzimtā valoda nodrošina tādas papildu funkcijas kā vienkāršus ekrānuzņēmumus un bezsaistes atbalstu.
41. Atsaucīga dizaina grāmatzīme
Viktors Kulons ir izveidojis ļoti vienkāršu, bet efektīvu grāmatzīmi; aktivizējot to jebkurā tīmekļa lapā, tā pievieno rīkjoslu, kas ļauj pārslēgties starp četrām parastajām ekrāna dimensijām, lai jūs varētu redzēt, kā jūsu vietne tiek atveidota dažādos izmēros.
42. Atsaucīgais dizaina pārbaudes grāmatiņš
Šī Benjamin Keen grāmatzīme ļauj veikt vairāk pielāgošanas, ļaujot jums noteikt savus ierīces izmērus un tik daudz vai maz, cik vēlaties. Kad tas ir aktivizēts, vietne tiek parādīta visos atlasītajos izmēros, lai to varētu viegli salīdzināt.
43. Ekrāns
Ekrāns, ko izveidoja QuirkTools, ļauj pārbaudīt vietni ar dažādām izšķirtspējām galddatoros, planšetdatoros, mobilajos tālruņos un televizoros. Darbvirsmas testēšana pašlaik ir ierobežota ar Safari, savukārt planšetdatorā un mobilajā ierīcē ir vairāk iespēju ierīcēm un pārlūkiem. Televīzija aprobežojas ar Opera.
44. Multivides vaicājumu rādītājs
Johans Bruks piedāvā tīru CSS veidu, kā pārbaudīt, kad pārlūks ir aktivizējis multivides vaicājumu. Multivides vaicājumu indikators ir vēl viens labs rīks, lai pārbaudītu un spēlētu ar dizaina lūzuma punktiem.
45. Shim
Viens no RWD plakātu zēna Boston Globe pārveidošanā izmantotajiem rīkiem Shim ir lietotne Node.js, kas vienā un tajā pašā Wifi tīklā vada tīmekļa lapu vairākās ierīcēs, padarot daudzu ierīču testēšanu daudz vieglāku. .
46. Iebraukšana
Ja jums nav Node.js servera, lai palaistu Shim, Skots Jehls ir izveidojis vienkāršāku versiju ar nosaukumu Drive-In, kas darbojas principā vienādi, bet izmantojot PHP, Apache un .htaccess failu.
47. Adobe Shadow
Adobe turpina virzību uz tīmekļa tehnoloģijām, izmantojot šo attālās atkļūdošanas rīku. Instalējiet Shadow un Chrome paplašinājumu Mac vai Windows, kā arī Shadow klientu Android vai iPhone, un jūs varat koplietot tīmekļa lapas starp daudzām dažādām ierīcēm.
48. Opera mobilais emulators + attālā atkļūdošana
Vienkāršāks veids, kā atkļūdot mobilās lapas, ir instalēt Opera un Opera Mobile Emulator un savienot abus ar opciju Attālā atkļūdošana. Vienkārša un ātra iestatīšana, un tai ir papildu priekšrocības, ko rada testēšana vairāk nekā WebKit.
Turpmāka iedvesma
Vai vēlaties gūt priekšstatu par to, kā citi padara viņu dizainus atsaucīgus?
49. MediaQueri.es
Ja vēl neesat to redzējis, vietnē Mediaqueri.es ir arvien lielāks vietņu skaits, kas pāriet uz atsaucīgo pusi.
50. @ RWD
Ītans Marcotte pārvalda Twitter kontu, kurā tiek parādīti jaunākie jaunumi, rīki un vitrīnas no RWD pasaules.
Denīze Džeikobs dievina būt runātāja, autore, tīmekļa dizaina treneris un radošuma evaņģēliste, savukārt Pīters Gasstons ir grāmatas CSS3 autors un veterāns tīmekļa izstrādātājs, kurš raksta emuārus vietnē Broken Links.
Patika tas? Izlasiet šos!
- Pro padomi mobilās vietnes izveidošanai
- Populārākās CSS un JavaScript metodes
- Kā izveidot lietotni
- Labākie bezmaksas web fonti dizaineriem
- Atklājiet paplašinātās realitātes iespējas
- Lejupielādējiet bezmaksas tekstūras: augsta izšķirtspēja un gatava lietošanai tūlīt
