50 upeaa työkalua reagoivaan web-suunnitteluun

Kirjoittaja: Monica Porter
Luomispäivä: 17 Maaliskuu 2021
Päivityspäivä: 17 Saattaa 2024
Anonim
50 upeaa työkalua reagoivaan web-suunnitteluun - Luova
50 upeaa työkalua reagoivaan web-suunnitteluun - Luova

Sisältö

Kuten Ethan Marcotte esitteli / keksi sekä artikkelissaan "Reagoiva web-suunnittelu" että myydyimmässä kirjassaan, tarvitaan kolme elementtiä, jotta sivusto olisi reagoiva:

  1. Joustava / sujuva ritilä
  2. Reagoivat kuvat
  3. Mediakyselyt

On olemassa paljon muita hienoja artikkeleita, jotka käsittelevät responsiivisen verkkosuunnittelun motiiveja, käsitteitä ja tekniikoita, joten pidämme tämän artikkelin painopisteen joihinkin tärkeimpiin työkaluihin, jotka auttavat sinua tulemaan vastuullisesti reagoiviksi.

Työkalut aloittamiseen

Ennen kuin aloitat sivustosi rakentamisen, on parasta hahmotella, miten sivun elementit mukautuvat sopimaan eri laitteiden eri selainkokoihin, joita niitä tarkastellaan, ja välttämään katkaisua, joka usein johtuu ensisijaisesti ajattelusta työpöydän suunnittelu ja loput reagoivat iteraatiot jälkikäteen (katso erityisesti Stephanie (Sullivan) Rewisin kommentti).

01. Reagoivat verkkosivujen luonnoslehdet

Tämä Jeremy P Alfordin reagoivien luonnoslehtien sarja on loistava lähtökohta kartoittamaan, kuinka sivuosuudet siirtyvät eri tarkkuuksilla.


02. Reagoiva suunnittelun luonnoskirja

Jos haluat pitää kaikki luonnoksesi yhdessä paikassa, sinun kannattaa harkita tätä App Sketchbook -yhtiön johtosidottu kirja, jossa on 50 reagoivaa luonnoslehteä.

03. Reagoivat lankakehykset

Yksi reagoivien verkkosivustojen rakentamisen vaikeuksista on lankakehysten käyttäminen osoittamaan, kuinka reagoiva suunnittelu toimii. James Mellers Adobesta on koonnut tämän kokeellisen työkalun osoittaakseen, kuinka monimutkaisten asettelujen reagoiva lankakehys voi toimia.


04. Usean laitteen asettelumallit

Reagenssisuunnittelua suunnitellessa on hyödyllistä nähdä, kuinka muut ihmiset ovat lähestyneet sitä ennen sinua, joten Luke Wroblewskin Usean laitteen asettelumallit, joissa luetellaan suositut mallit ja linkit esimerkkeihin, on hyvä paikka aloittaa.

05. Tyylilaatat

Samanatha Warrenin tyylilaatat ehdottavat uutta tekniikkaa suunnitteluun reagoivana aikakautena; Kiinteän leveyden muotoilumallien sijasta nämä ovat kuin värimallit tai moodboardit, jotka näyttävät yleisen suunnittelun lähestymistavan syventämättä yksityiskohtia.

Työkalut joustavaan / nestemäiseen verkkoon

Kuten aiemmin todettiin, reagoivan suunnittelun ensimmäinen komponentti on joustava / nestemäinen ristikko.Seuraavat on jo valmiiksi rakennettu: sinun tarvitsee vain ladata ne ja olet nopeasti matkalla reagoivammalle sivustolle.


06. Golden Grid -järjestelmä

Joni Korpi, joka myös kehitti Less Frameworkin, on hiljattain julkaissut tämän uuden version luotettavasta ruudukkojärjestelmästä reagoivaan suunnitteluun. Kultaisen ruudukon järjestelmässä pidetään "kokoontaitettavana", koska se sopeutuu helposti 16: sta kahdeksaan neljään sarakkeeseen, ja siinä on myös pieni selainpeite, joka paljastaa sivujesi ruudukon testattavaksi.

07. Foldy960

Paravel, Inc: n lahjakkaat miehet ovat julkaisseet muokatun 960.gs-ruudukon, jota he käyttävät perustana reagoiville projekteilleen.

08. SimpleGrid

Conor Muirheadin kirjoittama SimpleGrid on rakennettu reagoivalla tavalla, joten reagoivan verkkosivustoprojektisi avulla on helppo päästä alkuun.

09. 1140 kuvapisteen CSS-ruudukko

Toinen suuri reagoiva ruudukkojärjestelmä on Melbournen suunnittelijan Andy Taylorin 1140px CSS Grid, joka siirtyy laajasta työpöydän tarkkuudesta mobiiliin.

10. Columnal CSS -verkkojärjestelmä

Pulp + Pixelsin eli luovan johtajan Nick Gorslinen luoma Columnal-ruudukkojärjestelmä perustuu 1140px-ruudukkojärjestelmään, mutta sisältää joitain ylimääräisiä herkkuja, kuten luonnossivuilla ja lankakehysmalleilla varustetun suunnittelupaketin sekä CSS-virheenkorjaustyylit.

11. Semanttinen ruudukko

Valmiiksi käsitellyt CSS-laajennukset, kuten Sass ja LESS, ovat yhä suositumpia, ja Tyler Tate's Semantic grid -järjestelmä käyttää niitä mahdollisimman tehokkaasti tässä ruudukkojärjestelmässä, joka väittää käyttävänsä tarpeettomia luokkia tai elementtejä. Lue lisää osoitteesta coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/.

12. SUSY

Semanttisen ruudukon tavoin Oddbird's SUSY loi ruudukkojärjestelmän, joka ei käytä ylimääräisiä merkintöjä tai erikoisluokkia, mutta SUSY on suunnattu vain Sassin (ja sen laajennuksen, Compass) käyttäjille.

13. Gridpak

Erskine Designin tuottama Gridpak on yksi uusimmista reagoivista verkkogeneraattoreista. Sen avulla voit asettaa sarakkeet ja kourut useaan katkaisupisteeseen ja antaa sitten CSS-, JavaScript- ja PNG-tiedostot, jotta koko tiimisi työskentelee samasta lähtökohdasta.

14. ristikko

Gridsetissä on vielä vähän mysteeriä, koska kirjoittaessani tätä, sitä ei ole vielä julkaistu. Mutta Mark Boulton Designin työkalu lupaa räätälöityjä, määräämättömiä verkkojärjestelmiä ja tapaa tallentaa ja hallita verkkoja verkossa.

15. Parempi Photoshop-ruudukko RWD: lle

Elliot Jay Stocks ehdottaa vanhan 960 kuvapisteen tosiasiallisen ruudukon standardin hylkäämistä ja sen sijaan työskentelemistä 1000 kuvapisteen kannasta, mikä helpottaa kaikkien prosenttilaskelmien käyttöä. Jos suostut, hän on tehnyt PSD: n, jotta voit aloittaa työskentelyn.

16. Nesteverkot

Jos suunnittelusi on pitkälle erikoistunut ja sinun on luotava oma mukautettu ruudukko, voit tehdä sen .net Awardsin loistavan uuden tulokkaan ehdokkaan Harry Robertsin nestemäisen ruudukon laskimen avulla.

17. Reagoiva laskin

Toinen pikseliä prosenttilaskuriin, mutta Stu Robsonin tämä menee askelta pidemmälle kuin toiset luomalla kaikki CSS-säännöt sinulle, mikä tarkoittaa, että voit vain kopioida ja liittää ne tyylitaulukoihisi.

Työkalut reagoiville kuville (ja tekstille)

Toinen tärkeä osa reagoivaa web-suunnittelua on sujuvia kuvia. Vaikka tekniikka sujuvien kuvien saavuttamiseksi on yksinkertainen, suorituskyvyn ja sivulatauksen optimointi eri laitteille näyttää olevan yksi suurimmista haasteista reagoivassa verkkosuunnittelussa. Tässä on joitain resursseja ongelman ratkaisemiseen.

18. Reagoivat kuvat

Filament Group kehitti tapaa lähettää sopivan kokoinen kuva näytön tarkkuuden perusteella. Tämä kokeilu, jossa on ensimmäiset mobiilikuvat, jotka skaalautuvat reagoivasti ja vastuullisesti, vaatii kahden erikokoisen kuvan vertailua.

19. Mukautuvat kuvat

Matt Wilcox otti inspiraation Responsive Images -työkalusta luoda mukautuvat kuvat, jotka käyttävät PHP: tä ja vähän JavaScriptiä tarjoamaan sopivia kuvia käyttäjän laitteeseen tarvitsematta ylimääräisiä merkintöjä.

20. Sencha.io Src (aiemmin Tinysrc)

Sencha tarjoaa pilvipalvelun, joka lähettää isännöityjen kuvien optimoidut versiot niitä pyytävän laitteen kokoon nähden. Lisätietoja sen käytöstä on osoitteessa docs.sencha.com/io/src/.

21. FitText

Paravel, Inc: n toinen helmi on FitText.js, jQuery-laajennus, jonka avulla otsikkotyypit reagoivat suunnitteluun ja laitteeseen. Lisätietoja on osoitteessa trentwalton.com/2011/05/10/fit-to-scale/.

22. slabText

FitTextin ja SlabType-algoritmin innoittamana Brian McAllisterin slabText on jQuery-laajennus, joka tekee lihavoituja tekstilohkoja, joiden kokoa muutetaan reagoivasti pitäen samalla määritelty leveys.

Työkalut mediakyselyihin

Nyt kun sinulla on käsitys siitä, miten asettelusi muuttuu eri laitteille, juoksevalle ruudukolle ja sujuville kuville, tarvitset mediakyselyjä siirtääksesi sivun elementit reagoivaan tilaan.

23. Respond.js

Reagoivan suunnittelun yksi asia on, että selaimet, jotka eivät osaa lukea mediakyselyjä, jäävät jälkeensä. Tämä ei välttämättä ole ongelma kohdeyleisössäsi, mutta on silti hyvä käytäntö sijoittaa käyttäjät vanhempiin selaimiin. Scott Jehlin kirjoittama Respond.js tukee vain ominaisuuksia min-width ja max-width.

Lisätietoja on osoitteessa filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/.

24. CSS3-Mediaqueries.js

Wouter van der Graafin CSS3-Mediaqueries.js antaa IE: n ja muiden selainten vanhemmille versioille mahdollisuuden testata ja soveltaa kaikenlaisia ​​mediakyselyjä tehokkaasti.

25. Adapt.js

Alkuperäisen 960.gs-ruudukkojärjestelmän kirjoittaja Nathan Smith on kirjoittanut Adapt.js-komentosarjan, joka tunnistaa selaimen mitat ja palvelee vain vaadittuja tyylitaulukoita - kuten mediakyselyjä, mutta ilman mediakyselyjä, mikä tarkoittaa, että se toimii myös vanhemmissa selaimissa.

26. Kategoriat

Tämä on laitetunnistus, jota lähestytään päinvastaisesta kulmasta - Brett Jankordin Kategororizr-komentosarja olettaa, että laitteet ovat mobiililaitteita, ellei toisin havaita pöytätietokoneina tai tabletteina.

Reagoiva suunnittelu (ja mobiili) kattilat

Tehokkaan reagoivan työnkulun hengessä kattilalevyt helpottavat mallien siirtämistä selaimeen ennemmin kuin myöhemmin. Suurin osa näistä kattiloista yhdistää parhaat edellä mainitut työkalut yhdeksi siistiksi paketiksi: joustava ruudukko, jota on parannettu skripteillä, samalla kun toteutetaan mobiili ensin, sisältöä sisältävä filosofia.

27. 320 ja enemmän

Andy Clarken 320 ja Up on ensin mobiililaitteille tarkoitettu kattilalevy, joka integroituu moniin muihin moderneihin web-suunnittelutyökaluihin, kuten LESS ja Bootstrap (katso # 30). Se on kevyt ja ketterä tapa saada sivusto nopeasti toimintaan. Katso myös Andyn haastattelu, jossa hän kertoo meille uudesta versiosta.

28. ristikoton

Gridless on HTML5- ja CSS3-kattilalevy, joka voi toimia perustana reagoiville malleillesi keskittyen typografiaan ja paistettuun selainten yhteensopivuuteen.

29. Luuranko

Toisin kuin kaksi edellistä kattilaa, joiden lähtöpiste on pienimmällä tarkkuudella, Dave Gamachen luoma luurankokehityspaketti perustuu 960.gs-ruudukkojärjestelmään ja skaalautuu mobiililaitteisiin. Luuranko tarjoaa myös loistavan tyylin kehittäjille kehittää tyylejä päälle.

30. Bootstrap

Twitterin rakentama ja nyt avoimen lähdekoodin omaava Bootstrap on kehys ja sarja komponentteja sivuston nopeaan saamiseen verkossa, ja versiosta 2 lähtien kaikki sen ydinosat toimivat reagoivasti.

Laajennukset, välilevyt ja polyfillit

Vaikka nykyaikaiset selaimet ja ohjelmistot ovat taipuvaisia ​​reagoimaan, meidän on joskus käytettävä ylimääräisiä työkaluja yhtenäisen kokemuksen tarjoamiseksi.

31. Reagoiva laajennus

Marios Lublinski on kirjoittanut WordPress-laajennuksen, joka lupaa muuttaa minkä tahansa nykyisen WP-teeman reagoivaksi. Kuinka tämä toimii, en vielä tiedä, koska sitä ei ole julkaistu tämän kirjoituksen ajankohtana, mutta jos se täyttää lupauksensa, sen pitäisi olla erittäin hyödyllinen.

32. Kaataa

Sisällön ylivuotojen käsittely toimii hyvin työpöydän selaimissa, mutta vanhemmat mobiiliselaimet käsittelevät sitä epäjohdonmukaisesti. Ahkera Filament Group -yhtiön Overthrow-polyfill-täyttö lisää laitteiden tasaista ja sulavaa heikkenemistä varmistaen, että kaikki mobiilikäyttäjät saavat parhaan mahdollisen kokemuksen.

33. MediaTable

Marco Pegoraron jQuery-laajennus, MediaTable, toimii Respond.js: n kanssa auttaakseen sinua kiertämään ongelman, kuinka suuret tietotaulukot näytetään pienillä näytöillä, tekemällä reagoivia sarakkeita ja lisäämällä näytä / piilota -vaihtokohde tarvittaessa.

"Testaus, testaus: 1-2-3 ..."

Toinen näkökohta reagoivassa työnkulussa on tuntea kohdelaitteet ja tarkkuudet ja testata niitä sitten.

34. resizeMyBrowser

Käyttöliittymäkehittäjän Chen Luon resizeMyBrowserilla on useita esiasetettuja mittasuhteita selainikkunallesi, jotta voidaan testata reagoivia sivuja tai luoda uusi esiasetus, jos et löydä tarpeitasi vastaavaa.

35. responsiivinen

Aivan kuten resizeMyBrowser, Remy Sharpin rakentama responsivepx lataa sivusi ikkunaan, jossa voit testata leveyttä ja korkeutta selvittääksesi, kuinka hyvin mediakyselysi käynnistyvät ja missä rajapisteet ovat suunnittelussa.

36. Reagoiva suunnittelutestaus

Suunnittelijan ja kehittäjän Matt Kersleyn uskomattoman hyödyllinen työkalu: kirjoita reagoivan sivustosi URL-osoite Responsiivisen suunnittelun testaukseen nähdäksesi, miten se toimii eri selainkoossa.

37. Vastaaja

Kirjoita URL-osoite, ja Responsinator näyttää sinulle, kuinka se näkyy monissa tavallisissa laitekokoissa - häikäilemättömällä robottitehokkuudella. Tama Pugsley ja Andy Hovey ovat vastuussa tästä.

38. Reagoiva.on

Toinen sivun sisäinen laitemulaattori, Responsive.is, antaa sinun kirjoittaa URL-osoitteen ja muuttaa sen kokoa nopeasti eri esiasetusten välillä. Sen on tehnyt tulevan Typecast-sovelluksen takana oleva tiimi.

39. Screenqueri.es

Yksi selaimen ulottuvuustyökalu, mutta Mandar Shirken Screenqueri.es eroaa itsestään sillä, että sillä on laaja joukko matkapuhelin- ja tablet-esiasetuksia sekä ruudukko ja viivaimet, jotka tekevät hienomittauksesta niin paljon helpompaa.

40. Aptus

Toinen sovellus sivustojen testaamiseen useissa määritetyissä kooissa, mutta Aptus on Mac-syntyperäinen. Se on saatavana Mac App Storen kautta, ja natiivi oleminen tuo lisäominaisuuksia, kuten helpot kuvakaappaukset ja offline-tuki.

41. Reagoiva Design Bookmarklet

Victor Coulon on tehnyt hyvin yksinkertaisen mutta tehokkaan kirjanmerkin; Kun aktivoit sen millä tahansa verkkosivulla, se lisää työkalurivin, jonka avulla voit vaihtaa neljän yleisen näytön ulottuvuuden välillä, jotta voit nähdä, miten sivustosi toimii erikokoisina.

42. Reagoiva suunnittelutesti Bookmarklet

Tämä Benjamin Keenin kirjanmerkki antaa enemmän mukautuksia antamalla sinun määrittää omat laitekoot ja niin monta tai vähän kuin haluat. Kun se on aktivoitu, se näyttää sivuston kaikissa valituissa kooissa, vierekkäin vertailun helpottamiseksi.

43. Screenfly

QuirkToolsin Screenfly-sovelluksen avulla voit testata sivustoa eri resoluutioilla työpöydällä, tablet-laitteella, mobiililaitteella ja televisiossa. Työpöydän testaus on tällä hetkellä rajoitettu Safariin, kun taas tablet-laitteella ja mobiililaitteella on enemmän vaihtoehtoja laitteille ja selaimille. Televisio on rajoitettu Operaan.

44. Mediakyselyn ilmaisin

Johan Brook tarjoaa puhtaan CSS-tavan testata, milloin selain on käynnistänyt mediakyselyn. Mediakyselyindikaattori on toinen hyvä työkalu suunnittelun murtumispisteiden testaamiseen ja pelaamiseen.

45. Välilevy

Yksi Boston Globe, RWD-liikkeen julistajapoika, suunnittelussa käytetyistä työkaluista, Shim, on Node.js-sovellus, joka käyttää verkkosivua useiden laitteiden kanssa samassa Wifi-verkossa, mikä tekee laitteiden välisestä testauksesta paljon helpompaa. .

46. ​​Sisäänkäynti

Jos sinulla ei ole Node.js-palvelinta paikallaan Shimin suorittamiseen, Scott Jehl on tehnyt yksinkertaisemman version Drive-In, joka toimii periaatteessa samalla tavalla, mutta käyttää PHP: tä, Apache-tiedostoa ja .htaccess-tiedostoa.

47. Adobe Shadow

Adobe jatkaa työtään verkkoteknologioihin tämän etävianetsintätyökalun avulla. Asenna Shadow ja Chrome-laajennus Maciin tai Windowsiin sekä Shadow-asiakasohjelma Androidiin tai iPhoneen, ja voit jakaa verkkosivuja useiden eri laitteiden välillä.

48. Opera Mobile Emulator + Remote Debug

Helpompi tapa virheenkorjaukseen mobiilisivuilla on asentaa Opera ja Opera Mobile Emulator ja yhdistää ne etävianetsintävaihtoehdolla. Yksinkertainen ja nopea asennus, ja sillä on lisäetuna testaaminen muilla kuin WebKit-ohjelmistoilla.

Lisää inspiraatiota

Haluatko saada käsityksen siitä, miten muut tekevät suunnitelmistaan ​​reagoivia?

49. MediaQueri.es

Jos et ole vielä nähnyt sitä, sivustolla Mediaqueri.es on jatkuvasti kasvava määrä sivustoja, jotka ovat siirtyneet responsiiviselle puolelle.

50. @RWD

Ethan Marcotte ylläpitää Twitter-tiliä, joka tuo viimeisimmät uutiset, työkalut ja esittelyt RWD-maailmasta.

Denise Jacobs rakastaa puhujaa, kirjoittajaa, verkkosuunnittelun kouluttajaa ja luovuuden evankelistaa, kun taas Peter Gasston on kirjan The CSS3 kirja ja veteraani web-kehittäjä, joka bloggaa Broken Linksissä.

Piditkö tästä? Lue nämä!

  • Pro-vinkkejä mobiilisivuston rakentamiseen
  • Suosituimmat CSS- ja JavaScript-tekniikat
  • Kuinka rakentaa sovellus
  • Parhaat ilmaiset web-fontit suunnittelijoille
  • Tutustu laajennetun todellisuuden seuraaviin vaiheisiin
  • Lataa ilmaiset tekstuurit: korkea resoluutio ja käyttövalmis nyt
Edellinen Artikkeli

Muuta selaimesi syntetisaattoriksi Flora Driftin avulla
Seuraava Artikkeli

Negatiivisten arvostelujen voima
Meidän Neuvomme
Palomino Blackwing Pencils -katsaus
Lue Lisää

Palomino Blackwing Pencils -katsaus

Saattaa 2024
Blackwing on nimen ä, jota elää kynän panok i a, mutta Palomino on tehnyt en ylpeänä näillä upeilla tarjouk illa. ileä käyttää, ja iinä...
Supersankarit saavat film-noir-muodonmuutoksen
Lue Lisää

Supersankarit saavat film-noir-muodonmuutoksen

Saattaa 2024
Lego ta paperikonei iin ja 3D: tä top-motion-mainok iin luovutetut eivät vain voi e tää it eään kuvittelema ta uo ikki ankareitamme - ja tä ä on toinen hieno e ...
Ultimate Olympic -brändiprojekti tekee globaalista suunnitteluhistoriasta
Lue Lisää

Ultimate Olympic -brändiprojekti tekee globaalista suunnitteluhistoriasta

Saattaa 2024
En immäi tä kertaa hi toria a kaikki menneiden olympialai ten logot, identiteettielementit ja ma kotit a etetaan kan ainväli ten li en in aajien aataville.Olympialai ten fanit ympä...