50 fantastičnih orodij za odzivno spletno oblikovanje

Avtor: Monica Porter
Datum Ustvarjanja: 17 Pohod 2021
Datum Posodobitve: 17 Maj 2024
Anonim
Introduction To Responsive Web Design - HTML & CSS Tutorial
Video.: Introduction To Responsive Web Design - HTML & CSS Tutorial

Vsebina

Kot je Ethan Marcotte predstavil / skoval tako v svojem članku "Odzivno spletno oblikovanje" kot tudi v svoji najbolj prodajani knjigi, potrebujemo tri elemente, da bo spletno mesto odzivno:

  1. Prilagodljiva / tekoča mreža
  2. Odzivne slike
  3. Medijska vprašanja

Obstaja veliko drugih odličnih člankov, ki zajemajo motive, koncepte in tehnike glede odzivnega spletnega oblikovanja, zato se bomo v tem članku osredotočili na nekaj najboljših orodij, ki vam bodo pomagala, da postanete odgovorno odzivni.

Orodja za začetek

Preden začnete z izdelavo spletnega mesta, je najbolje, da skicirate, kako se bodo elementi na strani prilagodili različnim velikostim brskalnikov različnih naprav, na katerih si bodo ogledali, in se izognili prekinitvi povezave, ki je pogosto posledica razmišljanja predvsem o zasnova namizja in ostale odzivne ponovitve kot naknadna misel (glej zlasti komentar Stephanie (Sullivan) Rewis).

01. Odzivni listi za skice spletnega oblikovanja

Ta nabor odzivnih listov skic Jeremyja P Alforda je odlično izhodišče za začetek načrtovanja premikanja odsekov strani v različnih ločljivostih.


02. Sketchbook za odziven dizajn

Če vse skice raje hranite na enem mestu, boste morda želeli razmisliti o tej žično vezani knjigi 50 odzivnih listov skic podjetja App Sketchbook.

03. Odzivni žični okvirji

Ena od težav pri izdelavi odzivnih spletnih mest je uporaba žičnih okvirjev, ki kažejo, kako bo odziven dizajn deloval. James Mellers iz Adobe je sestavil to eksperimentalno orodje, da bi pokazal, kako lahko deluje odzivno ožičenje zapletenih postavitev.


04. Vzorci postavitve več naprav

Pri načrtovanju odzivnega dizajna je koristno videti, kako so se drugi lotili tega pred vami, zato so vzorci postavitve več naprav Luke Wroblewskega, ki navaja priljubljene vzorce s povezavami do primerov, odličen kraj za začetek.

05. Ploščice za slog

Samanatha Warren's Style Tiles predlaga novo tehniko oblikovanja v odzivni dobi; namesto oblikovalnih maket s fiksno širino, so to vzorci ali razpoložljive plošče, ki prikazujejo splošen pristop k oblikovanju, ne da bi se spuščali v podrobne podrobnosti.

Orodja za prožno / fluidno mrežo

Kot smo že omenili, je prva komponenta, ki je potrebna za odziven dizajn, prilagodljiva / fluidna mreža.Naslednje je že vnaprej izdelano: le prenesti jih morate in hitro boste na poti do bolj odzivnega spletnega mesta.


06. Sistem Golden Grid

Joni Korpi, ki je razvil tudi Less Framework, je nedavno izdal to novo različico zanesljivega mrežnega sistema za odzivno oblikovanje. Sistem Golden Grid, ki se zlahka prilagodi od 16, do osem do štiri stolpce, ima tudi majhen brskalniški pokrov, ki mrežo na vaših straneh izpostavi za testiranje.

07. Foldy960

Nadarjeni gospodje pri podjetju Paravel, Inc. so izdali spremenjeno mrežo 960.gs, ki jo uporabljajo kot osnovo za svoje odzivne projekte.

08. SimpleGrid

SimpleGrid, Conor Muirhead, je bil zgrajen z odzivnostjo, zato je enostavno začeti delovati s svojim projektom odzivnega spletnega mesta.

09. Mreža CSS 1140px

Še en odličen odzivni mrežni sistem je 1140px CSS Grid oblikovalca iz Melbourna Andyja Taylorja, ki sega od široke namizne ločljivosti do mobilne.

10. Stolpčni sistem omrežij CSS

Mrežni sistem Columnal, ki ga je ustvaril Pulp + Pixels, znan tudi kot kreativni direktor Nick Gorsline, temelji na omrežnem sistemu 1140px, vendar z nekaj dodatnimi dobrotami, kot je na primer oblikovalski komplet s skicami in predlogami za ožičenje, ter slogi za odpravljanje napak CSS.

11. Semantični mrežni sistem

Predobdelane razširitve CSS, kot sta Sass in LESS, postajajo vse bolj priljubljene, sistem mreže Semantic Tyler Tate pa jih uporablja za največji učinek v tem omrežnem sistemu, ki trdi, da ne uporablja nepotrebnih razredov ali elementov. Preberite več na coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/.

12. SUSY

Tako kot Semantični mrežni sistem je Oddbird SUSY ustvaril mrežni sistem, ki ne uporablja dodatnih oznak ali posebnih razredov, vendar je SUSY namenjen samo uporabnikom Sass-a (in njegove razširitve Compass).

13. Gridpak

Gridpak, Erskine Design, je eden najnovejših odzivnih omrežnih generatorjev. Omogoča vam, da stolpce in žlebove nastavite na več mejnih točk, nato pa prikaže datoteke CSS, JavaScript in PNG, tako da celotna ekipa deluje z istega izhodišča.

14. Rešetka

Gridset je še vedno rahlo skrivnosten, saj v času, ko to pišem, še ni izšel. Toda orodje Mark Boulton Design obljublja mrežne sisteme po meri, ki ne predpisujejo predpisov, in način za shranjevanje in upravljanje omrežij v spletu.

15. Izboljšana mreža Photoshop za RWD

Elliot Jay Stocks predlaga opustitev starega dejanskega omrežnega standarda 960px in namesto tega dela iz osnove 1000px, kar bi olajšalo delo z vsemi izračuni v odstotkih. Če se strinjate, je naredil PSD, s katerim lahko začnete sodelovati.

16. Tekoče mreže

Če je vaša zasnova visoko specializirana in morate ustvariti lastno mrežo po meri, lahko to storite s kalkulatorjem tekočih mrež Harry Roberts, briljantnim novincem.

17. Odzivni kalkulator

Kalkulator še za slikovne pike do odstotkov, toda Stu Robsona gre še korak dlje od drugih, tako da za vas ustvari vsa pravila CSS, kar pomeni, da jih lahko preprosto kopirate in prilepite v svoje sloge.

Orodja za odzivne slike (in besedilo)

Druga ključna komponenta odzivnega spletnega oblikovanja so tekoče slike. Čeprav je tehnika za doseganje tekočih slik preprosta, se zdi, da je optimizacija zmogljivosti in obremenitve strani za različne naprave eden največjih izzivov pri odzivnem spletnem oblikovanju. Tu je nekaj virov za pristop k vprašanju.

18. Odzivne slike

Skupina Filament je zasnovala način za pošiljanje ustrezne slike na podlagi ločljivosti zaslona. Ta eksperiment s slikami, ki so prve za mobilne naprave, ki se odzivno in odgovorno spreminjajo, zahteva sklicevanje na dve sliki različnih velikosti.

19. Prilagodljive slike

Matt Wilcox se je za orodje Responsive Images navdihnil za ustvarjanje prilagodljivih slik, ki uporablja PHP in malo JavaScripta, da uporabnikovi napravi prikaže ustrezne slike, ne da bi zahteval dodatne oznake.

20. Sencha.io Src (prej Tinysrc)

Sencha ponuja storitev v oblaku, ki pošilja optimizirane različice gostujočih slik glede na velikost naprave, ki jih zahteva. Če želite izvedeti, kako ga uporabljati, glejte docs.sencha.com/io/src/.

21. FitText

Še en dragulj podjetja Paravel, Inc je FitText.js, vtičnik jQuery, ki omogoča, da se spletni naslov naslov odziva na zasnovo in napravo. Za podrobnosti glejte trentwalton.com/2011/05/10/fit-to-scale/.

22. ploščaBesedilo

Navdihnjen s FitText in algoritmom SlabType, je BTT Bxt McAllister vtičnik jQuery, ki ustvarja krepke bloke besedila, ki se odzivno spreminjajo, hkrati pa ohranjajo določeno širino.

Orodja za predstavnostna vprašanja

Zdaj, ko imate idejo, kako se bo vaša postavitev spremenila za različne naprave, mrežo tekočin in tekoče slike, potrebujete medijske poizvedbe, da elemente strani prestavite v stanje odzivnosti.

23. Odgovori.js

Edina težava pri odzivnem oblikovanju je, da brskalniki, ki ne morejo brati medijskih poizvedb, ostanejo zadaj. To morda ni težava z vašo ciljno publiko, vendar je vseeno dobra praksa, da uporabnike namestite v starejših brskalnikih. Respond.js, avtorja Scotta Jehla, podpira samo lastnosti min-width in max-width.

Za več glejte filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/.

24. CSS3-Mediaqueries.js

CSS3-Mediaqueries.js, avtorja Wouterja van der Graafa, omogoča starejšim različicam IE in drugim brskalnikom, da učinkovito preizkusijo in uporabijo vse vrste medijskih poizvedb.

25. Adapt.js

Nathan Smith, avtor prvotnega omrežnega sistema 960.gs, je napisal Adapt.js, skript, ki zaznava dimenzije brskalnika in streže le zahtevane tabele slogi - na primer medijska poizvedbe, vendar brez predstavnostnih poizvedb, kar pomeni, da deluje tudi v starejših brskalnikih.

26. Categorizr

To je zaznavanje naprav, ki se ga lotevamo iz nasprotnega kota - skript Categorizr Brett Jankord predvideva, da so naprave mobilne, če ni drugače zaznano kot namizje ali tablični računalnik, kar vam omogoča, da brskalnikom na simpatičen način servirate vire.

Odzivni dizajn (in mobilni) bojlerji

Kotli v duhu učinkovitega odzivnega delovnega procesa olajšajo postopek premikanja modelov v brskalnik prej kot slej. Večina teh grelnih plošč združuje najboljša zgoraj omenjena orodja v en dober paket: prilagodljivo mrežo, obogateno s skripti, hkrati pa uvajajo filozofije vsebine, ki so najprej mobilne.

27. 320 in več

Andy Clarke's 320 in Up je prvi model za mobilne naprave, ki se integrira s številnimi drugimi sodobnimi orodji za spletno oblikovanje, kot sta LESS in Bootstrap (glej št. 30). To je lahek in gibčen način za hitro vzpostavitev spletnega mesta. Oglejte si tudi naš intervju z Andyjem, v katerem nam pove več o novi različici.

28. Brez mreže

Gridless je vzorčna plošča HTML5 in CSS3, ki lahko služi kot osnova za vaše odzivne modele, s poudarkom na tipografiji in vgrajeni združljivosti med brskalniki.

29. Skelet

Za razliko od prejšnjih dveh kotlov, katerih izhodišče je z najmanjšo ločljivostjo, razvojni komplet Skeleton, ki ga je ustvaril Dave Gamache, temelji na omrežnem sistemu 960.gs in se pomanjša na mobilno. Skeleton se ponaša tudi z odličnim stilskim okvirom, s katerim lahko razvijalci gradijo sloge na vrhu.

30. Bootstrap

Zgrajen s strani Twitterja in zdaj odprt, Bootstrap je ogrodje in vrsta komponent za hitro vzpostavitev spletnega mesta, od njegove različice pa vsi njegovi osnovni deli delujejo odzivno.

Vtičniki, podložke in polnila

Čeprav so sodobni brskalniki in programska oprema ponavadi pripravljeni na odzivnost, moramo včasih uporabiti dodatna orodja, da zagotovimo dosledno izkušnjo.

31. Odzivni vtičnik

Marios Lublinski je napisal vtičnik WordPress, ki obljublja, da bo katero koli trenutno temo WP spremenil v odzivno. Kako to deluje, še ne vem, saj v času pisanja tega še ni izšlo, a če bo izpolnilo obljubo, bi moralo biti zelo koristno.

32. Strmoglavljenje

Obravnavanje prelivanja vsebine dobro deluje v namiznih brskalnikih, vendar starejši mobilni brskalniki to obravnavajo nedosledno. Polnilo Overthrow iz pridne skupine Filament Group doda dosledno graciozno razgradnjo med napravami in poskrbi, da vsi mobilni uporabniki dobijo najboljšo možno izkušnjo.

33. MediaTable

Vtičnik jQuery Marco Pegoraro, MediaTable, deluje z Respond.js, da vam pomaga rešiti težavo, kako prikazati velike podatkovne tabele na napravah z majhnim zaslonom, ustvariti odzivne stolpce in dodati preklop / pokaži, če je to primerno.

"Testiranje, testiranje: 1-2-3 ..."

Drug vidik odzivnega poteka dela je poznavanje ciljnih naprav in ločljivosti ter nato preizkušanje v njih.

34. resizeMyBrowser

resizeMyBrowser, razvijalca vmesnika Chen Luo, ima več prednastavljenih dimenzij za okno brskalnika, da preizkusi odzivno oblikovane strani ali ustvari novo prednastavitev, če ne najdete tiste, ki ustreza vašim potrebam.

35. responsivepx

Podobno kot resizeMyBrowser, responsivepx, ki ga je zgradil Remy Sharp, naloži vaše strani v okno, kjer lahko preizkusite širino in višino, da ugotovite, kako dobro se sprožijo vaše medijske poizvedbe in kje so mejne točke v zasnovi.

36. Odzivno preizkušanje oblikovanja

Neverjetno uporabno orodje oblikovalca in razvijalca Matta Kersleyja: preprosto vnesite URL odzivnega spletnega mesta v odzivno testiranje oblikovanja, da vidite, kako se upodablja v različnih velikostih brskalnika.

37. Odgovornik

Vnesite URL in The Responsinator vam bo pokazal, kako se prikazuje v številnih običajnih velikostih naprav - z neusmiljeno robotsko učinkovitostjo. Za to sta odgovorna Tama Pugsley in Andy Hovey.

38. Odziven.is

Še en emulator naprave na strani, Responsive.is, vam omogoča, da vnesete URL, nato pa ga hitro spremenite med vrsto različnih prednastavitev. Izdelala ga je ekipa, ki stoji za prihajajočo aplikacijo Typecast.

39. Screenqueri.es

Še eno orodje za dimenzije brskalnika, vendar se Screenqueri.es podjetja Mandar Shirke loči po širokem naboru prednastavitev za mobilne naprave in tablične računalnike ter rešetki in ravnilih, ki olajšajo fino merjenje.

40. Aptus

Druga aplikacija za preizkušanje spletnih mest v več določenih velikostih, vendar je Aptus domači Mac. To je na voljo prek trgovine Mac App Store, domačnost pa prinaša dodatne funkcije, kot so preprosti posnetki zaslona in podpora brez povezave.

41. Odziven oblikovalski zaznamek

Victor Coulon je naredil zelo preprost, a učinkovit zaznamek; ko ga aktivirate na kateri koli spletni strani, doda orodno vrstico, ki vam omogoča preklop med štirimi običajnimi dimenzijami zaslona, ​​tako da lahko vidite, kako se vaše spletno mesto prikazuje v različnih velikostih.

42. Zaznamek odzivnega preizkusa oblikovanja

Ta zaznamek, ki ga je napisal Benjamin Keen, vam omogoča večjo prilagoditev, saj vam omogoča, da določite lastne velikosti naprav in poljubno ali malo. Ko je aktivirana, prikazuje stran v vseh izbranih velikostih, eno za drugo za lažjo primerjavo.

43. Screenfly

Screenfly, QuirkTools, vam omogoča, da spletno mesto preizkusite v različnih ločljivostih na namizju, tablici, mobilnem telefonu in televiziji. Testiranje namizja je trenutno omejeno na Safari, tablični računalnik in mobilnik pa imata več možnosti za naprave in brskalnike. Televizija je omejena na Opera.

44. Indikator medijskih poizvedb

Johan Brook ponuja čisti način CSS za preizkušanje, kdaj je brskalnik sprožil medijsko poizvedbo. Indikator medijskih poizvedb je še eno dobro orodje za preizkušanje in igranje s prelomnimi točkami oblikovanja.

45. Šim

Eno od orodij, uporabljenih pri prenovi Bostonskega globusa, dečka plakata gibanja RWD, je aplikacija Node.js, ki vodi spletno stran v več napravah v istem omrežju Wifi, kar olajša testiranje med napravami. .

46. ​​Drive-In

Če za namestitev Shima nimate strežnika Node.js, je Scott Jehl izdelal preprostejšo različico Drive-In, ki deluje v bistvu na enak način, vendar z uporabo PHP, Apache in datoteke .htaccess.

47. Adobe Shadow

Adobe nadaljuje s prizadevanjem za spletne tehnologije s tem orodjem za odpravljanje napak na daljavo. Namestite Shadow in razširitev Chrome za Mac ali Windows ter odjemalca Shadow za Android ali iPhone in lahko delite spletne strani med različnimi napravami.

48. Opera Mobile Emulator + oddaljeno odpravljanje napak

Enostavnejši način za odpravljanje napak na mobilnih straneh je namestitev Opera in Opera Mobile Emulator ter njihovo povezavo z možnostjo oddaljenega odpravljanja napak. Preprosta in hitra nastavitev ter dodana prednost testiranja na več kot WebKit.

Nadaljni navdih

Bi radi dobili idejo o tem, kako se drugi odzivajo na njihove zasnove?

49. MediaQueri.es

Če ga še niste videli, ima spletno mesto Mediaqueri.es vedno večje število spletnih mest, ki so prešla na odzivno stran.

50. @RWD

Ethan Marcotte vodi Twitter račun, ki prinaša najnovejše novice, orodja in predstavitve iz sveta RWD.

Denise Jacobs obožuje govornika, avtorja, trenerja spletnega oblikovanja in evangelista ustvarjalnosti, medtem ko je Peter Gasston avtor knjige CSS3 in veteran, ki razvija spletne strani, ki piše na spletnih straneh Broken Links.

Je to všeč? Preberite jih!

  • Pro nasveti za izdelavo mobilnega spletnega mesta
  • Vrhunske tehnike CSS in JavaScript
  • Kako zgraditi aplikacijo
  • Najboljše brezplačne spletne pisave za oblikovalce
  • Odkrijte, kaj sledi za razširjeno resničnost
  • Prenesite brezplačne teksture: visoka ločljivost in pripravljeni za uporabo zdaj
Prejšnji Članek

Umetnost iz papirja, ki bo pretresla vaš svet
Naslednji Članek

Kako odstraniti zaščito iz Excelovega lista brez gesla
Poglej
Popoln vodnik Kaj je privezek za iPhone in Mac
Nadalje

Popoln vodnik Kaj je privezek za iPhone in Mac

Maj 2024
"Živjo! Pred kratkim em iz naprave Android pretopil na napravo iO. Vakič, ko e prijavim na neko pletno meto ali aplikacijo, e pojavi kakšen ključek. Zdaj e prašujem, kaj točno je ključ? Ali vam l...
Se ne spomnite gesla za Windows 10? 3 načini dostopa!
Nadalje

Se ne spomnite gesla za Windows 10? 3 načini dostopa!

Maj 2024
Window je bil vedno zelo varen računalniški operacijki item, toda Window 10 ga naredi za en razred višji. Microoft je v item Window 10 uvedel veliko novih funkcij za povečanje njegove učinkovitoti, en...
Kako spremeniti geslo za goste v sistemu Windows 10?
Nadalje

Kako spremeniti geslo za goste v sistemu Windows 10?

Maj 2024
Gotujoči račun Window omogoča drugim poameznikom uporabo računalnika, ne da bi lahko preminjali natavitve računalnika, uvajali programe ali dotopali do vaših zaebnih evidenc. To e izkaže za koritno, č...