50 fantastičnih alata za responzivni web dizajn

Autor: Monica Porter
Datum Stvaranja: 17 Ožujak 2021
Datum Ažuriranja: 17 Svibanj 2024
Anonim
50 fantastičnih alata za responzivni web dizajn - Kreativan
50 fantastičnih alata za responzivni web dizajn - Kreativan

Sadržaj

Kao što je Ethan Marcotte predstavio / skovao u svom članku "Responzivni web dizajn", kao i u svojoj najprodavanijoj knjizi, potrebna su tri elementa kako bi stranica postala responzivna:

  1. Fleksibilna / fluidna mreža
  2. Odzivne slike
  3. Upiti za medije

Puno je sjajnih članaka koji pokrivaju motive, koncepte i tehnike u vezi s responzivnim web dizajnom, pa ćemo ovaj članak zadržati na nekim vrhunskim alatima koji će vam pomoći da odgovorno reagirate.

Alati za početak

Prije nego što započnete s izradom web stranice, najbolje je skicirati kako će se elementi na stranici prilagoditi različitim veličinama preglednika različitih uređaja na kojima će se gledati i kako bi se izbjeglo prekidanje veze koje često dolazi od razmišljanja prvenstveno o dizajn radne površine i ostatak responzivnih iteracija kao naknadna zamisao (vidi posebno komentar Stephanie (Sullivan) Rewis).

01. Tablice skica responzivnog web dizajna

Ovaj set odgovarajućih listova skica, Jeremyja P Alforda, izvrsna je polazna točka za početak mapiranja načina na koji će se dijelovi stranice pomicati u različitim rezolucijama.


02. Sketchbook responzivnog dizajna

Ako više volite sve svoje skice držati na jednom mjestu, možda ćete htjeti razmotriti ovu knjigu uvezanu u žicu od 50 odgovarajućih listova skica tvrtke App Sketchbook.

03. Responzivni žičani okviri

Jedna od poteškoća u stvaranju responzivnih web stranica je korištenje žičanih okvira kako bi se pokazalo kako će responzivni dizajn funkcionirati. James Mellers iz Adobea sastavio je ovaj eksperimentalni alat kako bi pokazao kako može funkcionirati responzivno žičano oblikovanje složenih izgleda.


04. Uzorci rasporeda više uređaja

Kada planirate responzivni dizajn, korisno je vidjeti kako su mu drugi pristupili prije vas, pa su uzorci rasporeda uređaja s više uređaja Luke Wroblewskog, u kojem su navedeni popularni uzorci s vezama do primjera, izvrsno mjesto za početak.

05. Pločice za stil

Samanatha Warren's Style Tiles predlaže novu tehniku ​​za dizajn u dobu reagiranja; umjesto dizajna fiksne širine, ovo su poput uzorka ili daske s raspoloženjem koji pokazuju općeniti pristup dizajnu bez ulaska u sitne detalje.

Alati za fleksibilnu / fluidnu mrežu

Kao što je ranije rečeno, prva komponenta potrebna za reagirajući dizajn je fleksibilna / fluidna mreža.Sljedeće je već unaprijed izrađeno: samo ih trebate preuzeti i brzo ćete krenuti na put prema responzivnijoj web lokaciji.


06. Sustav Golden Grid

Joni Korpi, koji je također razvio Less Framework, nedavno je objavio ovu novu verziju pouzdanog mrežnog sustava za responzivan dizajn. Smatra se "preklopnim", jer se lako prilagođava od 16, do osam, do četiri stupca, Golden Grid System također sadrži mali sloj preglednika koji mrežu na vašim stranicama izlaže na testiranje.

07. Foldy960

Talentirani gospodo iz tvrtke Paravel, Inc. objavili su modificiranu mrežu od 960.gs koju koriste kao osnovu za svoje responzivne projekte.

08. SimpleGrid

SimpleGrid, Conor Muirhead, izgrađen je uz brz odaziv, tako da je lako pokrenuti se i pokrenuti s vašim projektom responzivnih web stranica.

09. CSS mreža od 1140px

Još jedan sjajan mrežni sustav koji reagira je CSS Grid od 1140px, dizajnera Melbournea Andyja Taylora, koji od široke razlučivosti radne površine prelazi na mobitel.

10. Kolumnalni CSS mrežni sustav

Mrežni sustav Columnal, stvoren od strane Pulp + Pixela, zvanog kreativni direktor Nick Gorsline, zasnovan je na mrežnom sustavu od 1140px, ali s nekim dodatnim dodacima, poput dizajnerskog kompleta s skicama i predlošcima žičanog okvira, kao i CSS stilovima za uklanjanje pogrešaka.

11. Semantički mrežni sustav

Unaprijed obrađena CSS proširenja poput Sass i LESS postaju sve popularnija, a Semantički mrežni sustav Tyler Tatea koristi ih za maksimalan učinak u ovom mrežnom sustavu koji tvrdi da ne koristi nepotrebne klase ili elemente. Pročitajte više na coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/.

12. SMRTNI

Kao i Semantički mrežni sustav, Oddbirdov SUSY stvorio je mrežni sustav koji ne koristi dodatne oznake ili posebne klase, ali SUSY je namijenjen samo korisnicima Sass-a (i njegovog proširenja, Compass-a).

13. Gridpak

Gridpak, tvrtke Erskine Design, jedan je od najnovijih mrežnih generatora koji brzo reagira. Omogućuje vam postavljanje stupaca i oluka na brojne točke prekida, a zatim izlazi CSS, JavaScript i PNG datoteke tako da cijeli vaš tim radi s iste početne točke.

14. Rešetka

Još uvijek postoji lagana tajnovitost Gridseta, jer u vrijeme kad ovo pišem, još uvijek nije objavljen. No, alat Mark Boulton Design obećava mrežne sustave po mjeri, koji se ne prepisuju i način za mrežno spremanje i upravljanje mrežama.

15. Bolja Photoshop mreža za RWD

Elliot Jay Stocks predlaže napuštanje starog de facto mrežnog standarda od 960 piksela i rad s bazom od 1000 piksela, što olakšava rad sa svim izračunima postotaka. Ako se slažete, izradio je PSD za početak rada s njim.

16. Tekuće rešetke

Ako je vaš dizajn visoko specijaliziran i trebate stvoriti vlastitu prilagođenu mrežu, to možete učiniti pomoću kalkulatora tekućih rešetki .net Awards briljantnog novopridošlog nominiranog Harryja Robertsa.

17. Odzivni kalkulator

Još jedan kalkulator za piksele u postocima, ali ovaj Stua Robsona ide korak dalje od ostalih generirajući za vas sva CSS pravila, što znači da ih možete jednostavno kopirati i zalijepiti u svoje tablice stilova.

Alati za responzivne slike (i tekst)

Sljedeća presudna komponenta responzivnog web dizajna su fluidne slike. Iako je tehnika za postizanje fluidnih slika jednostavna, čini se da je optimizacija performansi i učitavanja stranica za različite uređaje jedan od najvećih izazova u responzivnom web dizajnu. Evo nekoliko izvora za pristup problemu.

18. Odzivne slike

Grupa Filament osmislila je način slanja slike odgovarajuće veličine na temelju razlučivosti zaslona. Ovaj eksperiment sa slikama prvim za mobilne uređaje koji se prilagodljivo i odgovorno skaliraju zahtijeva referenciranje dvije slike različitih veličina.

19. Prilagodljive slike

Matt Wilcox nadahnuo se iz alata Responsive Images za stvaranje Adaptivnih slika, koji koristi PHP i malo JavaScript-a za posluživanje odgovarajućih slika na korisnikov uređaj bez potrebe za dodatnim označavanjem.

20. Sencha.io Src (nekada Tinysrc)

Sencha pruža uslugu u oblaku koja šalje optimizirane verzije hostiranih slika za veličinu uređaja koji ih zahtijeva. Da biste saznali kako ga koristiti, pogledajte docs.sencha.com/io/src/.

21. FitText

Još jedan dragulj tvrtke Paravel, Inc je FitText.js, dodatak jQuery za stvaranje web naslova koji odgovara dizajnu i uređaju. Za detalje pogledajte trentwalton.com/2011/05/10/fit-to-scale/.

22. pločaTekst

Inspiriran FitTextom i algoritmom SlabType, slabText Briana McAllistera dodatak je jQuery koji izrađuje podebljane blokove teksta koji odgovaraju veličini, a zadržavaju definiranu širinu.

Alati za medijske upite

Sad kad imate ideju kako će se vaš izgled promijeniti za različite uređaje, fluidnu mrežu i fluidne slike, trebaju vam medijski upiti kako biste elemente stranice prebacili u stanje reakcije.

23. Odgovoriti.js

Problem s responzivnim dizajnom je taj što preglednici koji ne mogu čitati medijske upite zaostaju. To možda nije problem s vašom ciljanom publikom, ali svejedno je dobra praksa prilagoditi korisnike starijim preglednicima. Respond.js, autora Scotta Jehla, podržava samo svojstva min-width i max-width.

Za više pogledajte filamentgroup.com/lab/respojs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/.

24. CSS3-Mediaqueries.js

CSS3-Mediaqueries.js, autora Woutera van der Graafa, omogućuje starijim verzijama IE-a i drugim preglednicima da učinkovito testiraju i primjenjuju sve vrste medijskih upita.

25. Adapt.js

Nathan Smith, autor izvornog mrežnog sustava 960.gs, napisao je Adapt.js, skriptu koja otkriva dimenzije preglednika i služi samo traženim tablicama stilova - poput medijskih upita, ali bez medijskih upita, što znači da radi i u starijim preglednicima.

26. Categorizr

Ovo je otkrivanje uređaja kojem se pristupa iz suprotnog kuta - skripta Categorizr Bretta Jankorda pretpostavlja da su uređaji mobilni, osim ako nije drugačije otkriveno kao radna površina ili tablet, omogućujući vam posluživanje resursa preglednicima na simpatičan način.

Kotlovi s prilagodljivim dizajnom (i mobilni)

U duhu učinkovitog reakcijskog tijeka rada, bojleri olakšavaju postupak premještanja dizajna u preglednik što prije. Većina ovih kotlovskih pločica kombinira najbolje od gore spomenutih alata u jedan uredan paket: fleksibilnu mrežu poboljšanu skriptama, istodobno implementirajući filozofiju izdvajanja sadržaja prije svega za mobilne uređaje.

27. 320 i više

Andy Clarke's 320 and Up prvi je mobilni model koji se integrira s mnogim drugim modernim alatima za web dizajn, poput LESS i Bootstrap (vidi br. 30). To je lagan i okretan način za brzo pokretanje web stranice. Pogledajte i naš intervju s Andyjem u kojem nam govori više o novoj verziji.

28. Bez mreže

Gridless je HTML5 i CSS3 uzorak koji može poslužiti kao osnova za vaše responzivne dizajne, s naglaskom na tipografiju i kompatibilnost ukrštenih preglednika.

29. Kostur

Za razliku od prethodna dva kotla, čija je početna točka s najmanjom rezolucijom, razvojni komplet Skeleton, koji je stvorio Dave Gamache, temelji se na mrežnom sustavu 960.gs i svodi se na mobilni uređaj. Skeleton se također može pohvaliti sjajnim stilskim okvirom za programere za izgradnju stilova na vrhu.

30. Bootstrap

Izradio ga je Twitter i sada je otvoreni izvor, Bootstrap je okvir i niz komponenata za brzo dobivanje web mjesta na mreži, a od verzije dvije svi njegovi jezgri djeluju brzo.

Dodaci, podlošci i polifili

Iako su moderni preglednici i softver skloni prilagoditi se reakcijama, ponekad moramo koristiti dodatne alate kako bismo pružili dosljedno iskustvo.

31. Odzivni dodatak

Marios Lublinski napisao je WordPress dodatak koji obećava pretvoriti bilo koju trenutnu WP temu u reaktivnu. Kako ovo funkcionira, još ne znam jer nije objavljeno u vrijeme pisanja ovog teksta, ali ako ispuni obećanja, trebalo bi biti vrlo korisno.

32. Svrgnuti

Rukovanje preljevom sadržaja dobro funkcionira na preglednicima stolnih računala, ali stariji mobilni preglednici to rješavaju nedosljedno. Površi Overthrow iz marljive Filament Group dodaje dosljedno graciozno propadanje na svim uređajima, osiguravajući da svi mobilni korisnici dobiju najbolje moguće iskustvo.

33. MediaTable

Dodatak jQuery Marco Pegoraro, MediaTable, radi s Respond.js-om kako bi vam pomogao da zaobiđete problem prikaza velikih tablica podataka na uređajima s malim zaslonima, praveći odgovarajuće stupce i dodajući prekidač za prikaz / sakrivanje gdje je to prikladno.

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

Sljedeći aspekt responzivnog tijeka rada je poznavanje ciljnih uređaja i razlučivosti, a zatim testiranje na njima.

34. resizeMyBrowser

resizeMyBrowser, razvojnog programera Chen Luo-a, ima nekoliko unaprijed zadanih dimenzija za prozor vašeg preglednika za testiranje responzivno dizajniranih stranica ili stvaranje nove unaprijed postavljene postavke ako ne možete pronaći onu koja odgovara vašim potrebama.

35. responsivepx

Slično kao resizeMyBrowser, responsivepx, koji je izradio Remy Sharp, učitava vaše stranice u prozor u kojem možete testirati širinu i visinu kako biste utvrdili koliko dobro se pokreću vaši medijski upiti i gdje su točke prekida u dizajnu.

36. Odzivno testiranje dizajna

Nevjerojatno koristan alat dizajnera i programera Matta Kersleyja: jednostavno unesite URL svoje responzivne web stranice u Responsive Design Testing da biste vidjeli kako se prikazuje u različitim veličinama preglednika.

37. Odgovornik

Unesite URL i Responsinator će vam pokazati kako se prikazuje u mnogim uobičajenim veličinama uređaja - uz nemilosrdnu robotsku učinkovitost. Za ovaj su zaslužni Tama Pugsley i Andy Hovey.

38. Odzivno.je

Još jedan emulator uređaja na stranici, Responsive.is, omogućuje vam da upišete URL, a zatim ga brzo promijenite između niza različitih unaprijed postavljenih postavki. Napravio ga je tim koji stoji iza nadolazeće aplikacije Typecast.

39. Screenqueri.es

Još jedan alat za dimenzije preglednika, ali Screenqueri.es iz tvrtke Mandar Shirke razlikuje se po tome što ima opsežan skup unaprijed postavljenih postavki za mobilne uređaje i tablete, kao i mrežu i ravnala koji mnogo olakšavaju fino mjerenje.

40. Aptus

Još jedna aplikacija za testiranje web lokacija u više definiranih veličina, ali Aptus je izvorni Mac. Dostupna je putem Mac App Storea, a izvorni donosi dodatne značajke poput jednostavnih snimaka zaslona i izvanmrežne podrške.

41. Odzivni dizajn knjižnih oznaka

Victor Coulon napravio je vrlo jednostavnu, ali učinkovitu knjižnu knjižicu; kada ga aktivirate na bilo kojoj web stranici, dodaje alatnu traku koja vam omogućuje prebacivanje između četiri uobičajene dimenzije zaslona kako biste mogli vidjeti kako se web stranica prikazuje u različitim veličinama.

42. Oznaka odgovora na test dizajna

Ova knjižna knjižica Benjamina Keena omogućuje više prilagodbi dopuštajući vam da definirate vlastite veličine uređaja i koliko ih želite ili malo. Kada se aktivira, prikazuje mjesto u svim odabranim veličinama, jedno uz drugo za jednostavnu usporedbu.

43. Screenfly

Screenfly, QuirkTools, omogućuje vam testiranje web mjesta u različitim rezolucijama na radnoj površini, tabletu, mobitelu i televiziji. Testiranje na radnoj površini trenutno je ograničeno na Safari, dok tablet i mobitel imaju više mogućnosti za uređaje i preglednike. Televizija je ograničena na Operu.

44. Pokazatelj medijskih upita

Johan Brook nudi čisti CSS način za testiranje kada je preglednik pokrenuo medijski upit. Pokazatelj medijskih upita još je jedan dobar alat za testiranje i igranje s prijelomnim točkama dizajna.

45. Šim

Jedan od alata koji se koristi za redizajn bostonskog globusa, dječaka s posterima pokreta RWD, Shim je aplikacija Node.js koja pokreće web stranicu na više uređaja na istoj Wifi mreži, čineći međusobno testiranje mnogo lakšim .

46. ​​Uvoz

Ako nemate Node.js poslužitelj za pokretanje Shima, Scott Jehl izradio je jednostavniju verziju nazvanu Drive-In koja radi u osnovi na isti način, ali koristeći PHP, Apache i .htaccess datoteku.

47. Adobe Shadow

Adobe nastavlja s radom na web tehnologijama s ovim alatom za daljinsko uklanjanje pogrešaka. Instalirajte Shadow i proširenje Chrome na Macu ili Windowsu, kao i klijent Shadow na Androidu ili iPhoneu, a web stranice možete dijeliti između različitih uređaja.

48. Opera Mobile Emulator + daljinsko ispravljanje pogrešaka

Jednostavniji način ispravljanja pogrešaka na mobilnim stranicama je instaliranje Opere i Opera Mobile Emulator te njihovo povezivanje s njihovom opcijom Remote Debug. Jednostavno i brzo za postavljanje, a ima dodatnu prednost testiranja na više od WebKita.

Daljnja inspiracija

Želite li dobiti ideju o tome kako drugi prilagođavaju njihove dizajne?

49. MediaQueri.es

Ako ga već niste vidjeli, web mjesto Mediaqueri.es ima sve veći broj web mjesta koja su prešla na responzivnu stranu.

50. @ RWD

Ethan Marcotte vodi Twitter račun koji donosi najnovije vijesti, alate i vitrine iz svijeta RWD-a.

Denise Jacobs obožava biti govornica, autorica, trenerica web dizajna i evanđelistica kreativnosti, dok je Peter Gasston autor knjige The CSS3 i veteran web programer koji bloguje na Broken Links.

Sviđa li vam se ovo? Pročitajte ovo!

  • Profesionalni savjeti za izradu mobilne web stranice
  • Vrhunske CSS i JavaScript tehnike
  • Kako izraditi aplikaciju
  • Najbolji besplatni web fontovi za dizajnere
  • Otkrijte što slijedi za proširenu stvarnost
  • Preuzmite besplatne teksture: visoke razlučivosti i spremne za upotrebu sada
Prethodni Članak

Ovladajte znanošću optimizacije stope konverzije
Sljedeći Članak

5 povremenih igara za dizajnere
Popularni Članci
25 predložaka web stranica vrhunske klase
Unaprijediti

25 predložaka web stranica vrhunske klase

Svibanj 2024
Iako e web dizajneri i programeri mogu namrštiti korištenjem predložaka web tranica za pokretanje web tranice, ako web mje to trebate brzo, a nemate vremena ili vještina za izradu vla titog HTML-a, ne...
Pređite s grafičkog na web dizajn u sedam jednostavnih koraka
Unaprijediti

Pređite s grafičkog na web dizajn u sedam jednostavnih koraka

Svibanj 2024
Ako te nedavno završili kupu školu za dizajn ili te ambiciozni amouki dizajner koji prvo želi zaroniti u uzbudljivi vijet web dizajna, ali previše e boji žargona, tehnoloških ljudi i C -a, pre tanite!...
Konstruirajte identitet temeljen na tipu
Unaprijediti

Konstruirajte identitet temeljen na tipu

Svibanj 2024
2010. područje Ruhra u Njemačkoj proglašeno je Europ kom prije tolnicom kulture, a od Lave je zatraženo da dizajnira identitet za ve kulturne aktivno ti u Nizozem koj. Glavna ideja bila je organizirat...