50 fantastilist tööriista tundlikuks veebidisainiks

Autor: Monica Porter
Loomise Kuupäev: 17 Märts 2021
Värskenduse Kuupäev: 17 Mai 2024
Anonim
50 fantastilist tööriista tundlikuks veebidisainiks - Loominguline
50 fantastilist tööriista tundlikuks veebidisainiks - Loominguline

Sisu

Nagu Ethan Marcotte tutvustas / mõtles välja nii oma artiklis "Reageeriv veebidisain" kui ka tema enimmüüdud raamatus, on saidi tundlikuks muutmiseks vaja kolme elementi:

  1. Paindlik / voolav võre
  2. Reageerivad pildid
  3. Meediapäringud

On palju muid suurepäraseid artikleid, mis käsitlevad reageeriva veebidisaini motiive, kontseptsioone ja tehnikaid, seega keskendume selles artiklis mõnele tipptasemel tööriistale, mis aitavad teil vastutustundlikult reageerida.

Tööriistad alustamiseks

Enne saidi ülesehitamise alustamist on parem visandada, kuidas lehe elemendid kohanduvad, et need sobiksid erinevate vaadatavate seadmete erineva brauserisuurusega, ja vältida katkestust, mis tuleneb peamiselt peaasjalikult mõtlemisest. töölaua kujundus ja ülejäänud reageerivad kordused tagantjärele (vt eriti Stephanie (Sullivan) Rewise kommentaari).

01. Reageerivad veebidisaini visandilehed

See Jeremy P Alfordi reageerivate eskiislehtede komplekt on suurepärane lähtepunkt, et alustada kaardistamist, kuidas lehesektsioonid erinevates resolutsioonides nihkuvad.


02. Tundlik disaini visandiraamat

Kui eelistate kõiki oma visandeid ühes kohas hoida, võiksite kaaluda seda juhtmetega köidetud raamatut, mis sisaldab App Sketchbooki 50 reageerivat visandilehte.

03. Reageerivad traadiraamid

Reageerivate veebisaitide loomise üks raskusi on traadiraamide kasutamine, et näidata, kuidas reageeriv disain töötab. James Mellers Adobe'ist on selle eksperimentaalse tööriista kokku pannud, et näidata, kuidas keerukate paigutuste tundlik traadistamine saab toimida.


04. Mitme seadme paigutusmustrid

Reageeriva kujunduse kavandamisel on kasulik näha, kuidas teised inimesed on enne teid lähenenud, nii et Luke Wroblewski mitme seadme paigutusmustrid, kus on loetletud populaarsed mustrid koos linkidega näidetele, on hea koht alustamiseks.

05. Stiiliplaadid

Samanatha Warreni stiiliplaadid pakuvad reageerimise ajastul välja uue disaini tehnika; Fikseeritud laiusega kujundusmudelite asemel on need nagu näidised või moodboardid, mis näitavad üldist disainilahendust, ilma et läheks detailidesse.

Tööriistad paindlikuks / voolavaks võreks

Nagu varem öeldud, on esimene reageeriva disaini jaoks vajalik komponent paindlik / voolav võre.Järgmised on juba eelnevalt koostatud: peate lihtsalt need alla laadima ja olete kiiresti teel tundlikumale saidile.


06. Kuldvõrgu süsteem

Joni Korpi, kes arendas välja ka Less Framework, andis hiljuti välja usaldusväärse võrgusüsteemi uue versiooni tundliku disaini jaoks. Tundub, et see on "kokkuklapitav", kuna see kohandub hõlpsasti 16 kuni kaheksa veeruga nelja veeruni, ja Golden Grid süsteem sisaldab ka väikest brauseri ülekatet, mis paljastab teie lehtede võrgu testimiseks.

07. Foldy960

Paravel, Inc. andekad härrad on välja andnud muudetud 960.gs võrgu, mida nad kasutavad oma tundlike projektide aluseks.

08. SimpleGrid

Conor Muirheadi poolt koostatud SimpleGrid ehitati küpsetatud reageerimisvõimega, nii et teie tundliku veebisaidi projektiga on lihtne käima saada.

09. 1140px CSS-võrk

Teine suurepärane reageeriv võrgusüsteem on Melbourne'i disaineri Andy Taylori 1140px CSS Grid, mis ulatub laia töölaua eraldusvõimest kuni mobiilini.

10. Kolumniline CSS-võrgusüsteem

Colulpali võrgusüsteem, mille on loonud Pulp + Pixels ehk loovjuht Nick Gorsline, põhineb 1140px võrgusüsteemil, kuid sisaldab mõningaid ekstra maiustusi, nagu eskiisilehtede ja traadist raamimallidega kujunduskomplekt ning CSS-i silumisstiilid.

11. Semantiline võrgusüsteem

Eeltöödeldud CSS-i laiendused, nagu Sass ja LESS, on muutumas üha populaarsemaks ning Tyler Tate'i Semantilise ruudustiku süsteem kasutab neid selles võrgusüsteemis, mis väidetavalt ei kasuta mittevajalikke klasse ega elemente, maksimaalselt. Lisateavet leiate aadressilt coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/.

12. SUSY

Sarnaselt semantilise võrgusüsteemiga lõi ka Oddbirdi SUSY võrgusüsteemi, mis ei kasuta lisamärgistusi ega eriklasse, kuid SUSY on suunatud ainult Sassi (ja selle laienduse Compass) kasutajatele.

13. Gridpak

Gridpak, autor Erskine Design, on üks uusimaid reageerivaid võrgugeneraatoreid. See võimaldab teil oma veerud ja vihmaveerennid seada mitmele murdepunktile, seejärel väljastada CSS-, JavaScripti- ja PNG-failid, nii et kogu teie meeskond töötab samast lähtepunktist.

14. Võre

Gridseti kohal on endiselt väike salapära, sest sel ajal, kui ma seda kirjutan, pole seda tegelikult veel avaldatud. Kuid Mark Boultoni disaini tööriist lubab kohandatud, ettekirjutuseta võrgusüsteeme ja viisi võrkude võrgus salvestamiseks ja haldamiseks.

15. Parem Photoshopi võrk RWD jaoks

Elliot Jay Stocks teeb ettepaneku loobuda vanast 960px de facto võrgustandardist ja töötada selle asemel 1000px baasilt, muutes kõigi protsendiarvutuste kasutamise lihtsamaks. Kui olete nõus, on ta teinud PSD, et saaksite hakata koostööd tegema.

16. Vedelikud võred

Kui teie disain on väga spetsialiseerunud ja peate looma oma kohandatud võrgu, saate seda teha .net Awards suurepärase uustulnukakandidaadi Harry Roberts'i vedeliku võrgu kalkulaatoriga.

17. Reageeriv kalkulaator

Veel üks pikslite protsentuaalne kalkulaator, kuid see Stu Robsoni üks läheb teistest sammu kaugemale, luues teie jaoks kõik CSS-reeglid, mis tähendab, et saate need lihtsalt oma stiilitabelidesse kopeerida ja kleepida.

Tööriistad reageerivate piltide (ja teksti) jaoks

Teine tundliku veebidisaini oluline komponent on sujuvad pildid. Kuigi sujuvate piltide saavutamise tehnika on lihtne, näib erinevate seadmete jõudluse ja lehekoormuse optimeerimine tundliku veebikujunduse üks suurimaid väljakutseid. Siin on mõned ressursid probleemile lähenemiseks.

18. Reageerivad pildid

Filament Group töötas välja viisi, kuidas ekraani eraldusvõime põhjal saata sobiva suurusega pilt. See katse mobiilseadmetele mõeldud piltidega, mille mõõtkava on reageeriv ja vastutustundlik, nõuab viitamist kahe erineva suurusega pildi olemasolu.

19. Kohanevad pildid

Matt Wilcox sai Adaptive Images loomiseks inspiratsiooni Responsive Images tööriistast, mis kasutab PHP-d ja väikest JavaScripti selleks, et kasutaja seadmesse asjakohaseid pilte kuvada, ilma et oleks vaja mingit täiendavat märgistust.

20. Sencha.io Src (varem Tinysrc)

Sencha pakub pilveteenust, mis saadab hostitud piltide optimeeritud versioonid neid nõudva seadme suuruse järgi. Selle kasutamise kohta leiate teavet aadressilt docs.sencha.com/io/src/.

21. FitText

Veel üks Paravel, Inc pärl on FitText.js, jQuery pistikprogramm, et pealkirjaveebitüüp vastaks kujundusele ja seadmele. Lisateavet leiate trentwalton.com/2011/05/10/fit-to-scale/.

22. plaatTekst

Inspireerituna FitTextist ja SlabType algoritmist, on Brian McAllisteri slabText jQuery pistikprogramm, mis muudab paksud tekstiplokid, mis muutuvad reageerivalt, hoides samal ajal kindlaksmääratud laiust.

Tööriistad meediumipäringute jaoks

Nüüd, kui teil on idee selle kohta, kuidas teie paigutus muutub erinevate seadmete, vedeliku ruudustiku ja sujuvate piltide jaoks, vajate lehe elementide reageerimisvõimeliseks muutmiseks meediumipäringuid.

23. Reageeri.js

Reageeriva kujundusega probleem on see, et brauserid, mis ei suuda meediumipäringuid lugeda, jäävad maha. See ei pruugi teie sihtrühma probleem olla, kuid siiski on hea tava kasutajate majutamiseks vanemates brauserites. Scott Jehli autor Respond.js toetab ainult omadusi min-width ja max-width.

Lisateavet leiate filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/.

24. CSS3-Mediaqueries.js

Wouter van der Graafi loodud CSS3-Mediaqueries.js võimaldab IE ja muude brauserite vanematel versioonidel tõhusalt testida ja rakendada igasuguseid meediumipäringuid.

25. Adapt.js

Nathan Smith, originaalse 960.gs-võrgusüsteemi autor, on kirjutanud skripti Adapt.js, mis tuvastab brauseri mõõtmed ja teenindab ainult nõutavaid stiililehti - nagu meediumipäringud, kuid ilma meediumipäringuteta, mis tähendab, et see töötab ka vanemates brauserites.

26. Kategoriseerimine

See on seadme tuvastamise lähenemine vastupidise nurga alt - Brett Jankordi skript Kategororizr eeldab, et seadmed on mobiilsed, kui töölaua või tahvelarvutina pole teisiti tuvastatud, mis võimaldab teil brauseritele ressursse sümpaatselt teenindada.

Reageerivad disaini- (ja mobiilsed) boilerid

Tõhusa reageeriva töövoo vaimus hõlbustavad boilerplates kujunduste brauserisse viimist varem kui hiljem. Enamik neist katlaplaatidest ühendab parimad ülalnimetatud tööriistad üheks puhtaks paketiks: paindlik võrk, mida täiendab skript, rakendades samal ajal kõigepealt mobiiltelefoni, sisu sisulisi filosoofiaid.

27. 320 ja rohkem

Andy Clarke's 320 and Up on kõigepealt mobiilne katlaplaat, mis integreerub paljude teiste kaasaegsete veebidisaini tööriistadega, nagu LESS ja Bootstrap (vt # 30). See on kerge ja kiire viis saidi kiireks käivitamiseks. Vaadake ka meie intervjuud Andyga, kus ta räägib meile uuest versioonist lähemalt.

28. Ruudustik

Gridless on HTML5 ja CSS3 katlaplaat, mis võib olla aluseks teie tundlikele kujundustele, keskendudes tüpograafiale ja küpsetatud brauserite ühilduvusele.

29. Skelett

Erinevalt kahest eelmisest katlaplaadist, mille alguspunkt on kõige väiksema eraldusvõimega, põhineb Dave Gamache loodud Skeletoni arenduskomplekt võrgusüsteemil 960.gs ja taandub mobiilseks. Skeletonil on ka suurepärane stiiliraamistik, mille abil arendajad saavad stiile üles ehitada.

30. Bootstrap

Twitteri ehitatud ja nüüd avatud lähtekoodiga Bootstrap on raamistik ja komponentide seeria saidi kiireks võrguühenduse loomiseks ning alates 2. versioonist töötavad kõik selle põhiosad reageerivalt.

Pistikprogrammid, alused ja polüfillid

Kuigi tänapäevased brauserid ja tarkvara kipuvad olema reageerimisvõimelised, peame järjepideva kogemuse pakkumiseks mõnikord kasutama lisatööriistu.

31. Reageeriv pistikprogramm

Marios Lublinski on kirjutanud WordPressi pistikprogrammi, mis lubab muuta mis tahes praeguse WP-teema tundlikuks. Kuidas see töötab, ei tea ma veel, sest seda pole selle kirjutamise ajal veel avaldatud, kuid kui see lubadusi täidab, peaks see olema väga kasulik.

32. Kukutada

Sisu ülevoolu haldamine töötab töölauabrauserites hästi, kuid vanemad mobiilibrauserid käituvad sellega ebaühtlaselt. Usina Filament Groupi ületäitmine lisab järjepidevat graatsilist degradeerumist seadmetes, tagades, et kõik mobiilikasutajad saaksid parima võimaliku kogemuse.

33. MediaTable

Marco Pegoraro jQuery pistikprogramm MediaTable töötab koos Respond.js-iga, et aidata teil lahendada probleem, kuidas kuvada väikeste ekraanidega seadmetes suuri andmetabeleid, teha reageerivaid veerge ja lisada näitamise / peitmise lüliti, kui see on sobiv.

"Testimine, testimine: 1-2-3 ..."

Teine tundliku töövoo aspekt on teada oma sihtseadmeid ja eraldusvõime ning seejärel neid testida.

34. resizeMyBrowser

Eesliidesiarendaja Chen Luo resizeMyBrowseril on teie brauseriakna jaoks mitu eelseadistatud mõõdet, et testida reageerivate kujundustega lehti või luua uus eelseadistus, kui te ei leia oma vajadustele vastavat.

35. responsivepx

Nii nagu resizeMyBrowser, laadib Remy Sharpi ehitatud responsivepx teie lehed aknasse, kus saate testida laiust ja kõrgust, et teha kindlaks, kui hästi teie meediumipäringud käivituvad ja kus on katkestuspunktid kujunduses.

36. Reageeriv disaini testimine

Disaineri ja arendaja Matt Kersley uskumatult kasulik tööriist: sisestage lihtsalt automaatselt reageeriva saidi URL automaatselt reageeriva disaini testimisse, et näha, kuidas see renderdub brauseri erinevates suurustes.

37. Responsinaator

Sisestage URL ja Responsinator näitab teile, kuidas see kuvatakse paljudes tavalistes seadmesuurustes - halastamatu robotitõhususega. Selle eest vastutavad Tama Pugsley ja Andy Hovey.

38. Reageeriv.on

Teine lehesisene seadmeemulaator Responsive.is võimaldab teil sisestada URL-i ja suurendab seda kiiresti erinevate eelseadete vahemiku vahel. Selle on teinud tulevase Typecasti rakenduse taga olev meeskond.

39. Screenqueri.es

Veel üks brauseri mõõtmete tööriist, kuid Mandar Shirkelt pärit Screenqueri.es eristab end sellest, et omab laia valikut mobiili- ja tahvelarvutite eelseadistusi, samuti võrku ja joonlaudu, mis muudavad peene mõõtmise palju lihtsamaks.

40. Aptus

Teine rakendus mitme määratletud suurusega saitide testimiseks, kuid Aptus on Mac-emakeel. See on saadaval Mac App Store'i kaudu ja emakeelena olemine toob kaasa lisafunktsioone, nagu lihtsad ekraanipildid ja võrguühenduseta tugi.

41. Tundlik disaini järjehoidja

Victor Coulon on teinud väga lihtsa, kuid tõhusa järjehoidja; kui aktiveerite selle mis tahes veebisaidil, lisab see tööriistariba, mis võimaldab teil vahetada nelja tavalise ekraanimõõtme vahel, nii et näete, kuidas teie sait renderdub erineva suurusega.

42. Reageeriv disaini testi järjehoidja

See Benjamin Keeni järjehoidja võimaldab rohkem kohandada, võimaldades teil määrata oma seadme suurused ja nii palju kui väheseid, kui soovite. Aktiveerimisel näitab saiti kõigi valitud suurustega kõrvuti, et hõlpsasti võrrelda.

43. Screenfly

QuirkToolsi poolt koostatud Screenfly võimaldab teil katsetada saiti töölaual, tahvelarvutis, mobiilis ja teleris erineva eraldusvõimega. Töölaua testimine on praegu piiratud Safariga, samas kui tahvelarvutis ja mobiilseadmes on seadmete ja brauserite jaoks rohkem võimalusi. Televisioon piirdub ooperiga.

44. Meediumipäringu indikaator

Johan Brook pakub puhast CSS-i viisi testimiseks, kui brauser on käivitanud meediumipäringu. Meediapäringu indikaator on veel üks hea tööriist disaini murdepunktide testimiseks ja mängimiseks.

45. Shim

Shim on RWD liikumise plakatipoisi Boston Globe ümberkujundamisel kasutatud tööriist Node.js, mis käitab veebilehte ühes ja samas WiFi-võrgus mitmes seadmes, mis muudab seadmetevahelise testimise palju lihtsamaks. .

46. ​​Sissesõit

Kui teil pole Shimi käitamiseks Node.js-serverit, on Scott Jehl teinud lihtsama versiooni nimega Drive-In, mis töötab põhimõtteliselt samamoodi, kuid kasutades PHP-d, Apache'i ja .htaccess-faili.

47. Adobe Shadow

Adobe jätkab selle kaugsilumise tööriista abil veebitehnoloogiate arendamist. Installige varju ja Chrome'i laiendus Macile või Windowsile, lisaks Shadow klient Androidile või iPhone'ile ja saate veebisaite jagada paljude erinevate seadmete vahel.

48. Opera mobiilimulaator Opera + silumine kaugjuhtimisega

Lihtsam viis mobiililehtede silumiseks on installida Opera ja Opera Mobile Emulator ning ühendada need kaks kaugsilumise suvandiga. Lihtne ja kiire seadistamine ning sellel on täiendav eelis testimisest rohkem kui WebKitis.

Edasine inspiratsioon

Kas soovite saada aimu, kuidas teised muudavad oma kujunduse tundlikuks?

49. MediaQueri.es

Kui te pole seda veel näinud, on saidil Mediaqueri.es pidevalt kasvav arv saite, mis on reageerivale poolele üle läinud.

50. @ RWD

Ethan Marcotte peab Twitteri kontot, mis toob uusimaid uudiseid, tööriistu ja vitriine RWD maailmast.

Denise Jacobs jumaldab olla esineja, autor, veebidisaini koolitaja ja loovuse evangelist, Peter Gasston on aga raamatu CSS3 autor ja veteran veebiarendaja, kes ajaveebi vahendab Broken Links'is.

Meeldis see? Loe neid!

  • Pro näpunäited mobiilse veebisaidi loomiseks
  • Parimad CSS- ja JavaScripti tehnikad
  • Rakenduse loomine
  • Parimad tasuta veebifondid disaineritele
  • Vaadake, mis on liitreaalsuse järgmine
  • Laadige alla tasuta tekstuurid: kõrge eraldusvõimega ja kohe kasutamiseks valmis
Eelmine Artikkel

Parim vasakukäeline hiir, mida saate osta 2021. aastal
Järgmine Artikkel

Brändingu inimnägu
Populaarsed Väljaanded
5 enesereklaami kuldreeglit
Loe Rohkem

5 enesereklaami kuldreeglit

Mai 2024
Ük kõik, ka olete vabakut eline kun tnik, ke töötab kodu , di ainitudeng või taažika di ainiprofe ionaal, pange teid tähele nende parimate ene ereklaamitehnikate abil, mi...
Creative Cloud 2014 on tulemas
Loe Rohkem

Creative Cloud 2014 on tulemas

Mai 2024
Kui Creative Cloudi logo on mallina jagatud 48 ’paanik , kujundab iga paani erinev e itaja. "Valmi tükk aab väljendu e Creative Cloudi lõputute t võimalu te t," ütle...
Dominik Martin disainikoolist väljalangemise kohta
Loe Rohkem

Dominik Martin disainikoolist väljalangemise kohta

Mai 2024
Dominik Martin on 2014. aa ta netiauhindade jagami el kümne aa ta areneva talendi nominendi ea . Ta on i eõppinud veebidi ainer, ke töötab praegu Müncheni a uva agentuuri . Uu...