50 fantastiškų reaguojančio interneto dizaino įrankių

Autorius: Monica Porter
Kūrybos Data: 17 Kovas 2021
Atnaujinimo Data: 17 Gegužė 2024
Anonim
Iphone 8 Plus apžvalga
Video.: Iphone 8 Plus apžvalga

Turinys

Kaip pristatė / sugalvojo Ethanas Marcotte'as savo straipsnyje „Reaguojantis interneto dizainas“ ir savo geriausiai parduodamoje knygoje, norint, kad svetainė būtų jautri, reikia trijų elementų:

  1. Lankstus / skystas tinklelis
  2. Reaguojantys vaizdai
  3. Žiniasklaidos užklausos

Yra daugybė kitų puikių straipsnių, kurie apima motyvus, koncepcijas ir metodus, susijusius su reaguojančiu interneto dizainu, todėl šiame straipsnyje daugiausia dėmesio skirsime kai kuriems svarbiausiems įrankiams, kurie padės jums tapti atsakingesniais.

Pradžios įrankiai

Prieš pradedant kurti savo svetainę, geriausia nubrėžti, kaip puslapio elementai bus pritaikyti, kad atitiktų įvairius naršyklių dydžius įvairiuose įrenginiuose, į kuriuos jie bus žiūrimi, ir išvengti atjungimo, kuris dažnai kyla galvojant pirmiausia apie darbalaukio dizainą ir likusias reaguojančias iteracijas kaip papildomą sumanymą (ypač žr. Stephanie (Sullivan) Rewis komentarą).

01. Interaktyvūs interneto dizaino eskizų lapai

Šis Jeremy P Alfordo reaguojančių eskizų lapų rinkinys yra puikus pradinis taškas norint pradėti žemėlapių išdėstymą skirtingomis raiškomis.


02. Reaguojantis dizaino eskizų knygelė

Jei norite, kad visi eskizai būtų laikomi vienoje vietoje, galbūt norėsite apsvarstyti šią „App Sketchbook“ įmonės laidais susietą 50 atsakingų eskizų lapų knygą.

03. Jautrūs laidiniai rėmai

Vienas iš sunkumų kuriant reaguojančias svetaines yra vielinių rėmelių naudojimas parodant, kaip veiks interaktyvus dizainas. Jamesas Mellersas iš „Adobe“ sukūrė šį eksperimentinį įrankį, norėdamas parodyti, kaip gali veikti reaguojantis sudėtingų išdėstymų laidų formavimas.


04. Daugelio įrenginių išdėstymo modeliai

Planuodami reaguojantį dizainą, naudinga sužinoti, kaip kiti žmonės kreipėsi į jį prieš jus, todėl Luko Wroblewskio kelių įrenginių išdėstymo modeliai, kuriuose pateikiami populiarūs modeliai su nuorodomis į pavyzdžius, yra puiki vieta pradėti.

05. Stiliaus plytelės

„Samanatha Warren“ stiliaus plytelės siūlo naują dizaino techniką reaguojančiame amžiuje; o ne fiksuoto pločio dizaino maketai, tai yra tarsi pavyzdžiai arba „moodboards“, rodantys bendrą dizaino požiūrį, nesigilinant į detales.

Įrankiai lanksčiam / skystam tinkleliui

Kaip minėta anksčiau, pirmasis komponentas, reikalingas reaguojančiam dizainui, yra lankstus / skystas tinklelis.Šie elementai jau yra iš anksto sukurti: jums tereikia juos atsisiųsti ir greitai eisite į labiau reaguojančią svetainę.


06. Auksinių tinklelių sistema

Joni Korpi, kuris taip pat sukūrė „Less Framework“, neseniai išleido šią naują patikimos tinklelio sistemos versiją, skirtą reaguoti į dizainą. Laikoma, kad „sulankstoma“, nes lengvai pritaikoma nuo 16 iki aštuonių iki keturių stulpelių, „Golden Grid“ sistemoje taip pat yra nedidelis naršyklės perdanga, kuri jūsų tinklelį atidengia testavimui.

07. Foldy960

Talentingi „Paravel, Inc.“ gentainiai išleido modifikuotą 960.gs tinklelį, kurį naudoja kaip atsakingų projektų pagrindą.

08. „SimpleGrid“

Conor Muirhead sukurtas „SimpleGrid“ buvo sukurtas reaguojant į reakciją, todėl lengvai galite pradėti naudotis savo reaguojančio tinklalapio projektu.

09. 1140px CSS tinklelis

Kita puiki reaguojanti tinklelio sistema yra Melburno dizainerio Andy Tayloro 1140px CSS tinklelis, kuris pereina nuo plačios darbalaukio raiškos iki mobiliosios.

10. Kolumbinė CSS tinklelio sistema

„Columnal“ tinklelio sistema, kurią sukūrė „Pulp + Pixels“, dar žinomas kaip kūrybos direktorius Nickas Gorsline'as, yra paremta 1140 taškų tinklelio sistema, tačiau turi keletą papildomų gėrybių, tokių kaip dizaino rinkinys su eskizų ir vielinių kadrų šablonais, taip pat CSS derinimo stiliai.

11. Semantinio tinklelio sistema

Iš anksto apdoroti CSS plėtiniai, tokie kaip „Sass“ ir „LESS“, tampa vis populiaresni, o „Tyler Tate“ semantinio tinklelio sistema juos maksimaliai išnaudoja šioje tinklelio sistemoje, kuri teigia nenaudojanti nereikalingų klasių ar elementų. Skaitykite daugiau adresu coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/.

12. SUSY

Kaip ir semantinių tinklelių sistema, „Oddbird“ „SUSY“ sukūrė tinklelio sistemą, kurioje nenaudojami jokie papildomi žymėjimai ar specialios klasės, tačiau „SUSY“ skirta tik „Sass“ (ir jos plėtinio „Compass“) vartotojams.

13. „Gridpak“

„Erskine Design“ sukurtas „Gridpak“ yra vienas iš naujausių reaguojančių tinklelio generatorių. Tai leidžia jums nustatyti stulpelius ir latakus keliuose taškuose, tada išvedami CSS, „JavaScript“ ir PNG failai, kad visa jūsų komanda dirbtų iš to paties pradinio taško.

14. Grotelės

„Gridset“ vis dar yra šiek tiek paslapties, nes tuo metu, kai aš tai rašau, jis dar nebuvo išleistas. Tačiau Marko Boultono dizaino įrankis žada specialias, neprivalomas tinklelio sistemas ir būdą, kaip išsaugoti ir valdyti tinklelius internete.

15. Geresnis „Photoshop“ tinklelis, skirtas RWD

Elliotas Jay Stocksas siūlo atsisakyti senojo 960 taškų de facto tinklelio standarto ir vietoje to dirbti iš 1000 taškų, kad būtų lengviau dirbti su visais procentiniais skaičiavimais. Jei sutinkate, jis sukūrė PSD, kad galėtumėte pradėti dirbti.

16. Skysčio tinkleliai

Jei jūsų dizainas yra labai specializuotas ir jums reikia sukurti savo pasirinktinį tinklelį, tai galite padaryti naudodamiesi .net Awards puikiu naujokų nominanto Harry Robertso skysčių tinklelio skaičiuokle.

17. Interaktyvioji skaičiuoklė

Kitas procentų skaičiuoklės taškų skaičius, tačiau šis Stu Robsono žingsnis yra didesnis nei kitų, sugeneruodamas visas CSS taisykles, o tai reiškia, kad galite jas tiesiog nukopijuoti ir įklijuoti į savo stiliaus lapus.

Interaktyvių vaizdų (ir teksto) įrankiai

Kitas svarbus reaguojančio interneto dizaino komponentas yra sklandūs vaizdai. Nors sklandžių vaizdų pasiekimo technika yra paprasta, našumo ir puslapių apkrovos optimizavimas skirtingiems įrenginiams, atrodo, yra vienas didžiausių iššūkių reaguojant į žiniatinklio dizainą. Štai keletas šaltinių, kaip spręsti šią problemą.

18. Reaguojantys vaizdai

Filament Group sukūrė būdą, kaip siųsti tinkamo dydžio vaizdą, atsižvelgiant į ekrano skiriamąją gebą. Šis eksperimentas su pirmiausia mobiliaisiais vaizdais, kurių mastelis reaguoja atsakingai ir atsakingai, reikalauja turėti du skirtingo dydžio vaizdus.

19. Prisitaikantys vaizdai

Mattas Wilcoxas įkvėpė „Responsive Images“ įrankio, kad sukurtų „Adaptive Images“, kuris naudoja PHP ir šiek tiek „JavaScript“, kad naudotojo įrenginyje pateiktų tinkamus vaizdus, ​​nereikalaujant jokių papildomų žymėjimų.

20. „Sencha.io Src“ (anksčiau „Tinysrc“)

„Sencha“ teikia debesijos paslaugą, kuri siunčia optimizuotas priglobtų vaizdų versijas pagal įrenginio dydį, prašydamas jų. Norėdami sužinoti, kaip juo naudotis, žr. Docs.sencha.com/io/src/.

21. „FitText“

Dar vienas „Paravel, Inc“ perlas yra „FitText.js“, „jQuery“ papildinys, kad antraštės žiniatinklio tipas atitiktų dizainą ir įrenginį. Išsamesnės informacijos ieškokite trentwalton.com/2011/05/10/fit-to-scale/.

22. slabText

Įkvėptas „FitText“ ir „SlabType“ algoritmo, Briano McAllisterio „slabText“ yra „jQuery“ įskiepis, kuris sukuria drąsius teksto blokus, kurių dydis keičiasi reaguojant, išlaikant nustatytą plotį.

Žiniasklaidos užklausų įrankiai

Dabar, kai turite idėją, kaip pasikeis jūsų išdėstymas skirtingiems įrenginiams, skysčių tinkleliui ir sklandiems vaizdams, jums reikia medijos užklausų, kad puslapio elementai būtų nukreipti į reagavimo būseną.

23. Atsakyti.js

Reaguojančio dizaino problema yra ta, kad naršyklės, negalinčios skaityti medijos užklausų, lieka už nugaros. Galbūt tai nėra jūsų tikslinės auditorijos problema, tačiau vis tiek yra gera praktika pritaikyti vartotojus senesnėse naršyklėse. Skoto Jehlio „Respond.js“ palaiko tik min. Ir maks. Pločio savybes.

Daugiau informacijos rasite filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/.

24. CSS3-Mediaqueries.js

Wouterio van der Graafo CSS3-Mediaqueries.js leidžia senesnėms IE ir kitų naršyklių versijoms efektyviai išbandyti ir pritaikyti visų rūšių medijos užklausas.

25. Adapt.js

Nathanas Smithas, originalios 960.gs tinklelio sistemos autorius, parašė scenarijų „Adapt.js“, kuris aptinka naršyklės matmenis ir aptarnauja tik reikiamus stiliaus lapus, pvz., Medijos užklausas, bet be medijos užklausų, vadinasi, jis veikia ir senesnėse naršyklėse.

26. Kategororizr

Tai yra prietaiso aptikimas, kuris artėja priešingu kampu - Bretto Jankordo „Kategororizr“ scenarijus daro prielaidą, kad įrenginiai yra mobilūs, nebent kitaip būtų nustatyta kaip darbalaukis ar planšetinis kompiuteris.

Reaguojančios konstrukcijos (ir mobilios) katilinės

Efektyvaus reagavimo proceso eigoje katilinės palengvina dizaino perkėlimo į naršyklę procesą anksčiau nei vėliau. Dauguma šių katilų sujungia geriausius aukščiau paminėtus įrankius į vieną tvarkingą paketą: lankstų tinklelį, patobulintą scenarijais, įgyvendinant pirmiausia mobiliųjų telefonų filosofijas.

27. 320 ir daugiau

Andy Clarke'o „320 and Up“ yra mobilioji katilinė, integruota su daugeliu kitų šiuolaikinių interneto dizaino įrankių, tokių kaip LESS ir Bootstrap (žr. 30). Tai lengvas ir judrus būdas greitai sukurti svetainę. Taip pat peržiūrėkite mūsų interviu su Andy, kuriame jis pasakoja daugiau apie naująją versiją.

28. Be tinklelio

„Gridless“ yra HTML5 ir CSS3 katilinė, kuri gali būti jūsų reaguojančio dizaino pagrindas, daugiausia dėmesio skiriant tipografijai ir suderinamam kryžminių naršyklių suderinamumui.

29. Skeletas

Skirtingai nuo dviejų ankstesnių katilų, kurių pradinis taškas yra mažiausia skiriamoji geba, „Dave Gamache“ sukurtas „Skeleton“ kūrimo rinkinys yra pagrįstas 960.gs tinklelio sistema ir keičiamas į mobilųjį. Skeletas taip pat gali pasigirti puikia stiliaus sistema, kuria kūrėjai gali kurti stilius.

30. Bootstrap

„Twitter“ sukurtas ir dabar atviras šaltinis „Bootstrap“ yra sistema ir komponentų serija, leidžianti greitai pasiekti svetainę internete, o nuo antrosios versijos visos pagrindinės jos dalys veikia reaguoja.

Įskiepiai, tarpikliai ir užpildymai

Nors šiuolaikinės naršyklės ir programinė įranga yra pritaikytos reaguoti, kartais turime naudoti papildomus įrankius, kad galėtume teikti nuoseklią patirtį.

31. Reaguojantis papildinys

Mariosas Lublinskis parašė „WordPress“ papildinį, kuris žada bet kurią dabartinę WP temą paversti interaktyvia. Kaip tai veikia, dar nežinau, nes dar nebuvo išleista kaip šio rašymo laikas, tačiau jei tai pateisins pažadus, tai turėtų būti labai naudinga.

32. nuversti

Turinio perpildymo valdymas gerai veikia stalinių kompiuterių naršyklėse, tačiau senesnės mobiliųjų įrenginių naršyklės jį tvarko nenuosekliai. Darbščiosios „Filament Group“ „Overthrow“ polifillas suteikia nuolatinį grakščią degradaciją įrenginiuose, užtikrindamas, kad visi mobiliojo ryšio vartotojai gautų geriausią įmanomą patirtį.

33. „MediaTable“

Marco Pegoraro „jQuery“ papildinys „MediaTable“ dirba su „Respond.js“, kad padėtų jums išspręsti problemą, kaip rodyti dideles duomenų lenteles mažo ekrano įrenginiuose, sudarant reaguojančius stulpelius ir pridedant rodymo / slėpimo perjungiklį, kur tinkama.

"Testavimas, testavimas: 1-2-3 ..."

Kitas reaguojančio darbo eigos aspektas yra žinoti tikslinius įrenginius ir skiriamąsias gebas, o tada juos išbandyti.

34. resizeMyBrowser

„resizeMyBrowser“, kurį sukūrė frontendo kūrėjas Chenas Luo, turi kelis iš anksto nustatytus jūsų naršyklės lango matmenis, kad būtų galima išbandyti interaktyviai suprojektuotus puslapius arba sukurti naują išankstinį nustatymą, jei negalite rasti savo poreikius atitinkančio.

35. respondivepx

Panašiai kaip „resizeMyBrowser“, „Remy Sharp“ sukurtas „responsivepx“ įkelia jūsų puslapius į langą, kuriame galite išbandyti plotį ir aukštį, kad nustatytumėte, kaip gerai veikia jūsų medijos užklausos ir kur yra lūžio taškai.

36. Interaktyvus dizaino testavimas

Neįtikėtinai naudingas dizainerio ir kūrėjo Matto Kersley įrankis: tiesiog įveskite savo reaguojančios svetainės URL į „Responsive Design Testing“, kad pamatytumėte, kaip jis pateikiamas įvairiais naršyklės dydžiais.

37. Atsakovas

Įveskite URL ir „Responsinator“ parodys, kaip jis rodomas daugeliu įprastų įrenginių dydžių - su negailestingu robotų efektyvumu. Už šį atsakingi Tama Pugsley ir Andy Hovey.

38. Reaguojantis.yra

Kitas puslapyje esantis įrenginio emuliatorius „Responsive.is“ leidžia įvesti URL, tada greitai keičia jo dydį tarp skirtingų išankstinių nustatymų. Jį sukūrė būsimos „Typecast“ programos komanda.

39. Screenqueri.es

Dar vienas naršyklės matmenų įrankis, tačiau „Screenqueri.es“ iš Mandaro Shirke'o skiriasi tuo, kad turi platų mobiliųjų ir planšetinių kompiuterių išankstinių nustatymų rinkinį, taip pat tinklelį ir liniuotes, kurios labai palengvina puikų matavimą.

40. Aptusas

Kita programa, skirta išbandyti svetaines keliais nustatytais dydžiais, tačiau „Aptus“ yra gimtoji „Mac“. Tai galima naudotis per „Mac App Store“, o būdamas gimtoji suteikia papildomų funkcijų, tokių kaip lengvi ekrano kopijos ir palaikymas neprisijungus.

41. Reaguojantis dizaino žymeklis

Viktoras Coulonas sukūrė labai paprastą, bet efektyvią žymelę; suaktyvinus bet kuriame tinklalapyje, ji prideda įrankių juostą, leidžiančią persijungti tarp keturių įprastų ekrano matmenų, kad galėtumėte pamatyti, kaip jūsų svetainė pateikiama skirtingais dydžiais.

42. Interaktyvus dizaino testas

Ši Benjamino Keeno žymelė leidžia labiau pritaikyti, leidžiant jums nustatyti savo įrenginių dydžius ir tiek, kiek norite. Įjungus, svetainė rodoma visų pasirinktų dydžių greta, kad būtų lengva palyginti.

43. „Screenfly“

„QuirkTools“ sukurta „Screenfly“ leidžia išbandyti svetainę skirtingomis skiriamosiomis raiškomis darbalaukyje, planšetiniame kompiuteryje, mobiliajame ir televizijos ekrane. Šiuo metu darbalaukio bandymai atliekami tik „Safari“, o planšetiniame ir mobiliajame įrenginiuose yra daugiau galimybių įrenginiams ir naršyklėms. Televizija yra tik „Opera“.

44. Žiniasklaidos užklausos rodiklis

Johanas Brookas siūlo gryną CSS būdą patikrinti, kada naršyklė suaktyvino medijos užklausą. „Media Query Indicator“ yra dar viena gera priemonė išbandyti ir žaisti su dizaino lūžio taškais.

45. Shim

Vienas iš įrankių, naudojamų pertvarkant „Boston Globe“, RWD judėjimo plakato berniuką, „Shim“ yra „Node.js“ programa, valdanti tinklalapį keliuose įrenginiuose tame pačiame „Wifi“ tinkle, todėl daugelį įrenginių lengviau išbandyti. .

46. ​​Įvažiavimas

Jei neturite „Node.js“ serverio, kad galėtumėte paleisti „Shim“, Scottas Jehlas sukūrė paprastesnę versiją, vadinamą „Drive-In“, kuri veikia iš esmės taip pat, tačiau naudoja PHP, „Apache“ ir .htaccess failą.

47. „Adobe Shadow“

„Adobe“ tęsia žiniatinklio technologijų naudojimą naudodama šį nuotolinio derinimo įrankį. Įdiekite „Shadow“ ir „Chrome“ plėtinį „Mac“ ar „Windows“, taip pat „Shadow“ klientą „Android“ ar „iPhone“ ir galite bendrinti tinklalapius tarp daugelio skirtingų įrenginių.

48. „Opera“ mobilusis emuliatorius + nuotolinis derinimas

Lengvesnis būdas derinti mobiliuosius puslapius yra įdiegti „Opera“ ir „Opera Mobile Emulator“ ir sujungti abu su nuotolinio derinimo parinktimi. Paprasta ir greita sąranka, taip pat yra papildoma nauda bandant daugiau nei „WebKit“.

Tolesnis įkvėpimas

Norite sužinoti, kaip kiti reaguoja į jų dizainą?

49. MediaQueri.es

Jei dar nematėte, svetainėje Mediaqueri.es yra vis daugiau svetainių, kurios perėjo į reaguojančią pusę.

50. @ RWD

Ethanas Marcotte'as turi „Twitter“ paskyrą, kurioje pateikiamos naujausios naujienos, įrankiai ir vitrinos iš RWD pasaulio.

Denise Jacobs dievina būti pranešėja, autore, interneto dizaino treneriu ir kūrybiškumo evangeliste, o Peteris Gasstonas yra knygos „CSS3“ autorius ir veteranas, interneto svetainių kūrėjas, rašantis dienoraščius „Broken Links“.

Jums tai patiko? Perskaitykite tai!

  • Profesionalūs patarimai kuriant svetainę mobiliesiems
  • Populiariausios CSS ir „JavaScript“ technikos
  • Kaip sukurti programą
  • Geriausi nemokami žiniatinklio šriftai dizaineriams
  • Sužinokite, kas toliau yra papildytoje realybėje
  • Atsisiųskite nemokamas tekstūras: didelės skiriamosios gebos ir paruoštas naudoti dabar
Ankstesnis Straipsnis

„Adobe“ peržiūri naują interaktyvų interneto dizaino įrankį
Kitas Straipsnis

5 geriausi metų agentūros projektai
Skaitytojų Pasirinkimas
„Apple AirPods“ nukrenta iki pigiausios kainos, kurią matėme šiais metais
Toliau

„Apple AirPods“ nukrenta iki pigiausios kainos, kurią matėme šiais metais

Gegužė 2024
Nor „Apple AirPod “, be abejo, yra vieno šauniau ių au inių planetoje, jo nėra pigio . Taigi, kai pa iek ite nemažą andorį, nenorite gaišti laiko, kai į juo patek ite. Ir jum pa i ekė, ne šiandien ger...
Geriausias smulkaus verslo svetainių kūrėjas 2021 m
Toliau

Geriausias smulkaus verslo svetainių kūrėjas 2021 m

Gegužė 2024
Gerų ir prieinamų vetainių kūrėjų poreiki mulkiom įmonėm niekada nebuvo tok dideli . Ver lui vi ame pa aulyje turint atidaryti ir uždaryti laikanti vyriau ybė apribojimų, kiekviena fizinio mulkau ver ...
Monolitinių butelių dizainu siekiama suburti žmones
Toliau

Monolitinių butelių dizainu siekiama suburti žmones

Gegužė 2024
Naudojant tokį produktą kaip kvepalai, unku neat i akyti klišiško dizaino pa irinkimo, kuri garantuotai patik kirtingom lytim ir amžiau grupėm . Tačiau mažai totemo apklau o buteliai , pagamintai „Ken...