50 frábær verkfæri fyrir móttækilega vefhönnun

Höfundur: Monica Porter
Sköpunardag: 17 Mars 2021
Uppfærsludagsetning: 17 Maint. 2024
Anonim
50 frábær verkfæri fyrir móttækilega vefhönnun - Skapandi
50 frábær verkfæri fyrir móttækilega vefhönnun - Skapandi

Efni.

Eins og Ethan Marcotte kynnti / mótaði bæði í grein sinni „Móttækileg vefhönnun“ sem og metsölubók hans, þarf maður þrjá þætti til að gera vefsíðu móttækilega:

  1. Sveigjanlegt / vökvakerfi
  2. Móttækilegar myndir
  3. Fjölmiðlafyrirspurnir

Það eru fullt af öðrum frábærum greinum sem fjalla um hvatir, hugtök og aðferðir varðandi móttækilega vefsíðuhönnun, svo við munum halda áherslu þessarar greinar á nokkur helstu verkfæri sem hjálpa þér að verða ábyrg viðbrögð.

Verkfæri til að byrja

Áður en þú byrjar að byggja upp síðuna þína er best að skissa út hvernig þættirnir á síðunni munu aðlagast að mismunandi stærðum vafra hinna ýmsu tækja sem þeir verða skoðaðir á og forðast að aftengjast sem oft kemur frá því að hugsa fyrst og fremst um skjáborðshönnunin og restin af móttækilegum endurtekningum sem eftiráhugsun (sjá sérstaklega ummæli Stephanie (Sullivan) Rewis).

01. Móttækileg skissublöð fyrir vefsíðuhönnun

Þessi hópur móttækilegra skissublaða, eftir Jeremy P Alford, er frábær upphafsstaður til að byrja að kortleggja hvernig blaðsíðukaflarnir breytast í mismunandi upplausnum.


02. Sketsbók fyrir móttækilega hönnun

Ef þú kýst að geyma allar skissurnar þínar á einum stað, þá gætirðu viljað íhuga þessa vírbundnu bók með 50 móttækilegum skissublöðum frá App Sketchbook fyrirtækinu.

03. Móttækileg víramma

Einn af erfiðleikunum við að byggja upp móttækilegar vefsíður er að nota vírramma til að sýna hvernig móttækileg hönnun mun virka. James Mellers hjá Adobe hefur sett saman þetta tilraunatól til að sýna hversu móttækileg vírritun flókinna skipulags getur virkað.


04. Uppsetningarmynstur með mörgum tækjum

Þegar þú skipuleggur móttækilega hönnun er gagnlegt að sjá hvernig aðrir hafa nálgast það á undan þér, þannig að Multi-Device Layout Patterns frá Luke Wroblewski, sem listar vinsæl mynstur með krækjum í dæmi, er frábær staður til að byrja.

05. Stílflísar

Stílflísar Samanatha Warren leggja til nýja tækni við hönnun á viðbragðsöld; frekar en föst breidd hönnunar mockups, þetta eru eins og litapróf eða moodboards sem sýna almenna hönnunar nálgun án þess að fara í smáatriði.

Verkfæri fyrir sveigjanlegt / vökvakerfi

Eins og fyrr segir er fyrsti þátturinn sem þarf fyrir móttækilegri hönnun sveigjanlegt / vökvakerfi.Eftirfarandi eru þegar fyrirfram smíðuð: þú þarft bara að hlaða þeim niður og þú munt fljótt vera á leiðinni á móttækilegri síðu.


06. Golden Grid System

Joni Korpi, sem einnig þróaði Less Framework, hefur nýlega gefið út þessa nýju útgáfu af áreiðanlegu ristkerfi fyrir móttækilega hönnun. Þykir „brjóta saman“ þar sem það lagast auðveldlega frá 16, í átta, í fjóra dálka, og Golden Grid System er einnig með lítið vafraálegg sem afhjúpar ristina á síðunum þínum til prófunar.

07. Foldy960

Hæfileikaríkir herjar hjá Paravel, Inc. hafa gefið út breytt 960.g-ristrið sem þeir nota sem grunn að móttækilegum verkefnum sínum.

08. SimpleGrid

SimpleGrid, eftir Conor Muirhead, var byggt með svörun í svörun svo það er auðvelt að koma í gang með móttækilegt vefsíðuverkefni þitt.

09. 1140px CSS netið

Annað frábært móttækilegt netkerfi er 1140px CSS Grid eftir Melbourne hönnuðinn Andy Taylor, sem fer frá breiðri skjáborðsupplausn niður í farsíma.

10. Dálkur CSS ristkerfi

Columnal ristakerfið, búið til af Pulp + Pixels, aka skapandi leikstjóra Nick Gorsline, er byggt á 1140px ristakerfinu, en með nokkrum auka góðgæti svo sem hönnunarbúnaði með teikniblöðum og vírritunar sniðmát, svo og CSS kembiforrit.

11. Merkingarnetakerfi

Fyrirfram unnar CSS viðbætur eins og Sass og LESS verða sífellt vinsælli og Semantic netkerfi Tyler Tate notar þær til að ná sem mestum árangri í þessu netkerfi sem segist ekki nota neina óþarfa flokka eða þætti. Lestu meira á coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/.

12. SUSY

Eins og með Semantic ristakerfið bjó SUSY Oddbird til netkerfi sem notar enga aukamerkingu eða sérstaka flokka, en SUSY beinist aðeins að notendum Sass (og eftirnafn þess, Kompás).

13. Gridpak

Gridpak, frá Erskine Design, er einn af nýjustu móttækilegu rafveitunum í kring. Það gerir þér kleift að stilla dálka þína og þakrennur við fjölda brotpunkta og senda síðan út CSS, JavaScript og PNG skrár svo allt liðið þitt sé að vinna frá sama upphafsstað.

14. Gridset

Það er enn smá dulúð yfir Gridset þar sem þegar ég skrifa þetta hefur það ekki verið gefið út í raun ennþá. En tólið frá Mark Boulton Design lofar sérsniðnum, óávísandi netkerfum og leið til að vista og stjórna netum þínum á netinu.

15. Betra Photoshop rist fyrir RWD

Elliot Jay Stocks leggur til að falla frá gamla 960px de facto riststaðlinum og vinna úr 1000px grunni í staðinn, sem gerir alla prósentuútreikninga auðveldari að vinna með. Ef þú ert sammála hefur hann búið til PSD fyrir þig til að byrja að vinna með.

16. Vökvakerfi

Ef hönnunin þín er mjög sérhæfð og þú þarft að búa til þitt eigið sérsniðna rist geturðu gert það með .net verðlaununum glæsilegu nýliða tilnefndu Harry Roberts vökvakerfisreiknivél.

17. Móttækilegur reiknivél

Annar punktar í prósentu reiknivél, en þessi eftir Stu Robson gengur skrefi lengra en aðrir með því að búa til allar CSS reglurnar fyrir þig, sem þýðir að þú getur bara afritað og límt þær í stílblöðin þín.

Verkfæri fyrir móttækilegar myndir (og texta)

Annar mikilvægur þáttur í móttækilegri vefhönnun er fljótandi myndir. Þó að tæknin til að ná vökvamyndum er einföld virðist hagræðing á frammistöðu og síðuálag fyrir mismunandi tæki vera ein stærsta áskorunin í móttækilegri vefhönnun. Hér eru nokkur úrræði til að nálgast málið.

18. Móttækilegar myndir

Filament Group bjó til leið til að senda mynd í viðeigandi stærð byggð á skjáupplausn. Þessi tilraun með farsíma-fyrstu myndir sem mælikvarða með viðbrögðum og ábyrgð kallar á að hafa tvær myndir af mismunandi stærðum til hliðsjónar.

19. Aðlagandi myndir

Matt Wilcox sótti innblástur frá Responsive Images tólinu til að búa til Adaptive Images, sem notar PHP og smá JavaScript til að þjóna viðeigandi myndum í tæki notandans án þess að þurfa aukalega álagningu.

20. Sencha.io Src (áður Tinysrc)

Sencha veitir skýjaþjónustu sem sendir bjartsýnar útgáfur af hýstum myndum fyrir stærð tækisins sem biður um þær. Til að komast að því hvernig á að nota það, sjá docs.sencha.com/io/src/.

21. FitText

Enn ein gimsteinninn frá Paravel, Inc er FitText.js, jQuery viðbót sem gerir vefsíðuformið móttækilegt fyrir hönnunina og tækið. Nánari upplýsingar eru á trentwalton.com/2011/05/10/fit-to-scale/.

22. slabText

Innblásin af FitText og SlabType reikniritinu, slabText Brian McAllister er jQuery viðbætur sem búa til djarfar textablokkir sem breyta stærð með viðbrögðum en halda sér í skilgreinda breidd.

Verkfæri fyrir fjölmiðlafyrirspurnir

Nú þegar þú hefur hugmynd um hvernig uppsetning þín mun breytast fyrir mismunandi tæki, vökvakerfi og vökvamyndir þarftu fjölmiðlafyrirspurnir til að breyta þætti síðunnar í svörun.

23. Svaraðu.js

Málið með móttækilegri hönnun er að vafrar sem geta ekki lesið fjölmiðlafyrirspurnir verða eftir. Þetta er kannski ekki vandamál hjá markhópnum þínum, en það er samt góð venja að koma til móts við notendur í eldri vöfrum. Respond.js, eftir Scott Jehl, styður aðeins eiginleika min-breidd og max-breidd.

Nánari upplýsingar eru á filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/.

24. CSS3-Mediaqueries.js

CSS3-Mediaqueries.js, eftir Wouter van der Graaf, gerir eldri útgáfum af IE og öðrum vöfrum kleift að prófa og beita alls kyns fjölmiðlafyrirspurnum.

25. Aðlagast.js

Nathan Smith, höfundur upprunalega 960.gs netkerfisins, hefur skrifað Adapt.js, handrit sem skynjar víddir vafrans og þjónar aðeins tilskildum stílblöðum - eins og fjölmiðlafyrirspurnum en án fjölmiðlafyrirspurna, sem þýðir að það virkar líka í eldri vöfrum.

26. Categorizr

Þetta er tækjagreining sem nálgast frá gagnstæðu sjónarhorni - Categorizr handrit Brett Jankord gerir ráð fyrir að tæki séu hreyfanleg nema annað sé greint sem skjáborð eða spjaldtölva, sem gerir þér kleift að þjóna vöfrum á samhuga hátt.

Móttækileg hönnun (og farsíma) ketilplötur

Í anda skilvirks móttækilegs vinnuflæðis auðvelda ketilplötur að flytja hönnun í vafrann fyrr en síðar. Flestir af þessum ketilplötum sameina það besta af verkfærunum sem nefnd eru hér að ofan í einn snyrtilegan pakka: sveigjanlegt rist aukið með forskriftir, en útfæra farsíma fyrst, innihaldsspeki.

27. 320 og upp

Andy Clarke's 320 og Up er farsímapíla sem fellur saman við mörg önnur nútímatæki fyrir vefhönnun, svo sem LESS og Bootstrap (sjá # 30). Það er létt og lipur leið til að koma síðunni hratt í gang. Skoðaðu einnig viðtal okkar við Andy, þar sem hann segir okkur meira um nýju útgáfuna.

28. Ristlaust

Gridless er HTML5 og CSS3 ketilplata sem getur verið grundvöllur fyrir móttækilegri hönnun þinni, með áherslu á leturfræði og innbyggða samhæfni yfir vafra.

29. Beinagrind

Ólíkt tveimur fyrri ketilplötum, þar sem upphafspunktur er með minnstu upplausn, er beinagrindarþróunarbúnaðurinn, búinn til af Dave Gamache, byggður á 960.gs netkerfinu og minnkar niður í farsíma. Beinagrind státar einnig af frábærum stílramma fyrir verktaki til að byggja stíl ofan á.

30. Stígvél

Bootstrap er byggt af Twitter og er nú opið og er rammi og röð íhluta til að fá vefsíðu á fljótlegan hátt og frá og með útgáfu tvö virka allir kjarnahlutar hennar með viðbrögðum.

Tappi, shims og fjölfyllingar

Þó að nútíma vafrar og hugbúnaður hafi tilhneigingu til að vera tilbúinn til að svara, þá verðum við stundum að nota auka verkfæri til að veita stöðuga upplifun.

31. Móttækileg viðbót

Marios Lublinski hefur skrifað WordPress viðbætur sem lofa að breyta hvaða WP-þema sem er í svörum. Hvernig þetta virkar veit ég ekki enn þar sem það hefur ekki verið gefið út þegar þetta er skrifað, en ef það stendur við loforð sitt ætti það að vera mjög gagnlegt.

32. Fella

Meðhöndlun efnisflæðis virkar vel á skjáborðsvöfrum en eldri farsímavafrar sjá um það með ósamræmi. Yfirfyllingarfyllingin frá hinum vinnusama Filament Group bætir stöðugu tignarlegu niðurbroti yfir tæki og tryggir að allir farsímanotendur fái sem besta upplifun.

33. MediaTable

JQuery viðbætur Marco Pegoraro, MediaTable, vinnur með Respond.js til að hjálpa þér að komast í kringum vandamálið um hvernig á að birta stóra gagnatöflur á litlum skjábúnaði, búa til móttækilega dálka og bæta við sýningar / fela víxl þar sem það hentar.

"Próf, próf: 1-2-3 ..."

Annar þáttur í móttækilegu vinnuflæði er að þekkja marktækin þín og upplausnir og prófa síðan í þeim.

34. resizeMyBrowser

resizeMyBrowser, eftir framendahönnuðinn Chen Luo, hefur nokkrar forstilltar víddir fyrir vafragluggann þinn til að prófa viðbrögð sem eru hannaðar eða búa til nýja forstillingu ef þú finnur ekki þá sem hentar þínum þörfum.

35. responsivepx

Rétt eins og resizeMyBrowser, responsivepx, byggt af Remy Sharp, hleður blaðsíðunum þínum í glugga þar sem þú getur prófað breidd og hæð til að ákvarða hversu vel fjölmiðlafyrirspurnir þínar skjóta og hvar brotpunktar eru í hönnuninni.

36. Móttækileg hönnunarprófun

Ótrúlega gagnlegt tól hönnuðarins og verktakans Matt Kersley: sláðu einfaldlega inn slóðina á móttækilegu síðuna þína í Móttækilegri hönnunarprófun til að sjá hvernig hún kemur fram í ýmsum vafrastærðum.

37. The Responsinator

Sláðu inn vefslóð og þá mun Responsinator sýna þér hvernig hún birtist í mörgum algengum tækjastærðum - með miskunnarlausri vélrænni skilvirkni. Tama Pugsley og Andy Hovey bera ábyrgð á þessari.

38. Móttækilegur.is

Annað tækjasérhermi á síðunni, Responsive.is, leyfir þér að slá inn vefslóð og breytir því fljótt stærð á milli mismunandi forstillinga. Það er unnið af liðinu á bak við væntanlegt Typecast app.

39. Screenqueri.es

Enn eitt víddarstærðartæki vafrans, en Screenqueri.es frá Mandar Shirke aðgreinir sig með því að hafa umfangsmikið forstillt fyrir farsíma og spjaldtölvur, auk rist og höfðingja sem gera fín mælingar svo miklu auðveldari.

40. Aptus

Annað app til að prófa vefsíður í mörgum skilgreindum stærðum, en Aptus er Mac-innfæddur. Það er fáanlegt í gegnum Mac App Store og að vera innfæddur færir aukalega möguleika eins og auðveldar skjámyndir og stuðning utan nets.

41. Bókamerki fyrir móttækilega hönnun

Victor Coulon hefur búið til mjög einfaldan en áhrifaríkan bókamerki; þegar þú virkjar það á hvaða vefsíðu sem er bætir það við tækjastiku sem gerir þér kleift að skipta á milli fjögurra algengra skjávídda svo þú getir séð hvernig vefsvæðið þitt verður til í mismunandi stærðum.

42. Bókamerki við móttækilegri hönnun

Þessi bókamerki eftir Benjamin Keen gerir ráð fyrir meiri aðlögun með því að leyfa þér að skilgreina stærðir tækisins og eins marga eða fáa og þú vilt. Þegar það er virkt sýnir það síðuna í öllum völdum stærðum, hlið við hlið til að auðvelda samanburðinn.

43. Skjáfluga

Screenfly, frá QuirkTools, gerir þér kleift að prófa síðu á mismunandi upplausnum á skjáborði, spjaldtölvu, farsíma og sjónvarpi. Skrifborðsprófunin er sem stendur takmörkuð við Safari, en spjaldtölvan og farsíminn hafa fleiri möguleika fyrir tæki og vafra. Sjónvarp er takmarkað við Opera.

44. Vísir fyrir fjölmiðlafyrirspurn

Johan Brook býður upp á hreina CSS leið til að prófa hvenær fjölmiðlafyrirspurn hefur verið sett af stað af vafranum. Vísir fyrir fjölmiðlafyrirspurn er annað gott tæki til að prófa og leika sér með brotpunkta hönnunar.

45. Shim

Eitt af tækjunum sem notuð eru við endurhönnun Boston Globe, plakatstrákur RWD hreyfingarinnar, Shim er Node.js forrit sem rekur vefsíðu yfir mörg tæki á sama Wifi neti, sem gerir prófun á tækjum mun auðveldara .

46. ​​Innkeyrsla

Ef þú ert ekki með Node.js miðlara til að keyra Shim, hefur Scott Jehl búið til einfaldari útgáfu sem kallast Drive-In sem virkar í grunninn á sama hátt en notar PHP, Apache og .htaccess skrá.

47. Adobe Shadow

Adobe heldur áfram að ýta á veftækni með þessu fjarstýrðu kembiforrit. Settu upp Shadow og Chrome viðbótina á Mac eða Windows, auk Shadow viðskiptavinarins á Android eða iPhone og þú getur deilt vefsíðum milli margra mismunandi tækja.

48. Opera Mobile keppinautur + fjarlæg kembiforrit

Auðveldari leið til að kemba farsímasíður er að setja upp Opera og Opera Mobile keppinautinn og tengja þetta tvennt við Remote Debug valkostinn. Einfalt og hratt í uppsetningu og hefur þann aukna ávinning að prófa meira en WebKit.

Frekari innblástur

Viltu fá hugmynd um hvernig aðrir láta hönnun sína bregðast við?

49. MediaQueri.es

Ef þú hefur ekki séð það þegar, þá hefur síða Mediaqueri.es sívaxandi fjölda vefsvæða sem hafa farið yfir til móttækilegu hliðarinnar.

50. @RWD

Ethan Marcotte rekur Twitter reikning sem færir nýjustu fréttir, verkfæri og sýningarskápur úr heimi RWD.

Denise Jacobs elskar að vera ræðumaður, rithöfundur, vefhönnunarþjálfari og sköpunarfræðingur, en Peter Gasston er höfundur bókarinnar CSS3 og gamalreyndur vefhönnuður sem bloggar á Broken Links.

Líkaði þetta? Lestu þessar!

  • Pro ráð til að byggja upp farsímavefsíðu
  • Helstu CSS og JavaScript tækni
  • Hvernig á að smíða app
  • Bestu ókeypis leturgerðirnar fyrir hönnuði
  • Uppgötvaðu hvað er næst fyrir aukinn veruleika
  • Sæktu ókeypis áferð: háupplausn og tilbúin til notkunar núna
Fyrri Grein

Hershey’s afhjúpar umdeilt nýtt merki
Næsta Grein

Það sem þú ættir að leita að þegar þú kaupir fartölvu til atvinnumyndagerðar
Útlit
Ef Van Gogh hefði málað uppvakninga hefðu þeir litið svona út
Uppgötvaðu

Ef Van Gogh hefði málað uppvakninga hefðu þeir litið svona út

Maint. 2024
Hug aðu uppvakninga og þú heldur að blóð, þörmum og blóði í iðnaðar magni. Þú hug ar örugglega ekki um falleg og kyrrl&#...
Muse CC: gagnrýninn
Uppgötvaðu

Muse CC: gagnrýninn

Maint. 2024
Það er kýrt vigrúm til úrbóta, en þetta er amt be ta tólið á markaðnum fyrir kóðalau a vef köpun. Engin kóðun krafi t Au...
Samfélag til að stjórna Diaspora
Uppgötvaðu

Samfélag til að stjórna Diaspora

Maint. 2024
Á Dia pora blogginu hafa tofnendur lý t því yfir að þjónu tan eigi að verða afhent amfélaginu til að tjórna. tofnendur kröfðu t &#...