50 fantastiske verktøy for responsiv webdesign

Forfatter: Monica Porter
Opprettelsesdato: 17 Mars 2021
Oppdater Dato: 17 Kan 2024
Anonim
50 fantastiske verktøy for responsiv webdesign - Kreativ
50 fantastiske verktøy for responsiv webdesign - Kreativ

Innhold

Som introdusert / laget av Ethan Marcotte i både artikkelen "Responsive Web Design" og hans bestselgende bok, trenger man tre elementer for å gjøre et nettsted responsivt:

  1. Et fleksibelt / flytende rutenett
  2. Responsive bilder
  3. Mediespørsmål

Det er mange andre flotte artikler som dekker motiver, konsepter og teknikker angående responsiv webdesign, så vi vil holde fokus i denne artikkelen på noen av de beste verktøyene som vil hjelpe deg å bli ansvarlig responsiv.

Verktøy for start

Før du begynner med å bygge nettstedet ditt, er det best å skissere hvordan elementene på siden vil tilpasse seg de forskjellige nettleserstørrelsene på de forskjellige enhetene de vil bli sett på, og å unngå koblingen som ofte kommer fra å tenke primært på skrivebordsdesignet og resten av responsive iterasjoner som en ettertanke (se spesielt Stephanie (Sullivan) Rewis 'kommentar).

01. Responsive Web Design Sketch Sheets

Dette settet med responsive skisseark, av Jeremy P Alford, er et flott utgangspunkt for å begynne å kartlegge hvordan sideseksjonene vil skifte i forskjellige oppløsninger.


02. Responsive Design Sketchbook

Hvis du foretrekker å ha alle skissene dine på ett sted, kan det være lurt å vurdere denne trådbundet boken med 50 responsive skisseark fra App Sketchbook-selskapet.

03. Responsive Wireframes

En av vanskelighetene med å bygge responsive nettsteder er å bruke trådrammer for å vise hvordan det responsive designet vil fungere. James Mellers fra Adobe har satt sammen dette eksperimentelle verktøyet for å vise hvordan responsiv wireframing av komplekse oppsett kan fungere.


04. Oppsettmønstre for flere enheter

Når du planlegger et responsivt design, er det nyttig å se hvordan andre har kontaktet det før deg, så Luke Wroblewskis Layoutmønstre for flere enheter, som viser populære mønstre med lenker til eksempler, er et flott sted å starte.

05. Stilfliser

Samanatha Warren's Style Tiles foreslår en ny teknikk for design i den responsive tidsalderen; i stedet for designmockups med fast bredde, er disse som fargeprøver eller humørbrett som viser den generelle designtilnærmingen uten å gå i detalj.

Verktøy for et fleksibelt / flytende rutenett

Som nevnt tidligere er den første komponenten som trengs for responsiv design, et fleksibelt / flytende rutenett.Følgende er allerede forhåndsbygd: du trenger bare å laste dem ned, så er du raskt på vei til et mer responsivt nettsted.


06. Golden Grid System

Joni Korpi, som også utviklet Less Framework, har nylig gitt ut denne nye versjonen av et pålitelig rutenett for responsiv design. Ansett som "folding" da det lett kan tilpasses fra 16, til åtte, til fire kolonner, og Golden Grid System har også et lite nettleseroverlegg som avslører rutenettet på sidene dine for testing.

07. Foldy960

De talentfulle herrene til Paravel, Inc. har gitt ut det modifiserte 960.gs-rutenettet som de bruker som grunnlag for sine responsive prosjekter.

08. SimpleGrid

SimpleGrid, av Conor Muirhead, ble bygget med responsivitet innbakt, så det er enkelt å komme i gang med det responsive nettstedsprosjektet ditt.

09. CSS-rutenettet på 1140 px

Et annet flott responsivt rutenettsystem er 1140px CSS Grid av Melbourne-designeren Andy Taylor, som går fra en bred skrivebordsoppløsning ned til mobil.

10. Kolonnesystem CSS

Columnal grid system, opprettet av Pulp + Pixels aka creative director Nick Gorsline, er basert på 1140px rutenett, men med noen ekstra godbiter som et design kit med skisseark og wireframing maler, samt CSS feilsøkingsstiler.

11. Semantisk rutenett

Forbehandlede CSS-utvidelser som Sass og LESS blir mer og mer populære, og Tyler Tates semantiske rutenettsystem bruker dem til maksimal effekt i dette rutenettet som hevder å ikke bruke unødvendige klasser eller elementer. Les mer på coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/.

12. SUSY

Som det semantiske rutenettet opprettet Oddbirds SUSY et rutenett som ikke bruker ekstra markering eller spesielle klasser, men SUSY er bare rettet mot brukere av Sass (og utvidelsen, Compass).

13. Gridpak

Gridpak, av Erskine Design, er en av de nyeste responsive nettgeneratorene rundt. Det lar deg sette kolonnene og takrennene dine til en rekke brytpunkter, og deretter sende ut CSS-, JavaScript- og PNG-filer slik at hele teamet jobber fra samme startpunkt.

14. Rutenett

Det er fortsatt en liten mystisk luft over Gridset, da den ikke ble utgitt ennå da jeg skriver dette. Men verktøyet fra Mark Boulton Design lover skreddersydde, ikke-reseptive, rutenettsystemer og en måte å lagre og administrere nettene dine online.

15. Et bedre Photoshop-rutenett for RWD

Elliot Jay Stocks foreslår å forlate den gamle 960px de facto nettstandarden og arbeide fra en 1000px base i stedet, noe som gjør alle prosentberegninger lettere å jobbe med. Hvis du er enig, har han laget en PSD som du kan begynne å jobbe med.

16. Fluid Grids

Hvis designet ditt er høyt spesialisert og du trenger å lage ditt eget tilpassede rutenett, kan du gjøre det med .net Awards strålende nykommer-nominerte Harry Roberts ’fluid grid calculator.

17. Responsiv kalkulator

En annen piksler til prosents kalkulator, men denne av Stu Robson går et skritt videre enn andre ved å generere alle CSS-reglene for deg, noe som betyr at du bare kan kopiere og lime dem inn i stilarkene dine.

Verktøy for responsive bilder (og tekst)

En annen viktig komponent i responsivt webdesign er flytende bilder. Mens teknikken for å oppnå flytende bilder er grei, ser det ut til å være en av de største utfordringene innen responsivt webdesign å optimalisere ytelse og sidelast for forskjellige enheter. Her er noen ressurser for å nærme seg problemet.

18. Responsive bilder

Filament Group utviklet en måte å sende et bilde av passende størrelse basert på skjermoppløsning. Dette eksperimentet med mobil-første bilder som skaleres responsivt og ansvarlig, krever at du har to bilder i forskjellige størrelser som referanse.

19. Adaptive Images

Matt Wilcox hentet inspirasjon fra Responsive Images-verktøyet for å lage Adaptive Images, som bruker PHP og litt JavaScript for å servere passende bilder til brukerens enhet uten å kreve noen ekstra markering.

20. Sencha.io Src (tidligere Tinysrc)

Sencha tilbyr en skytjeneste som sender optimaliserte versjoner av vertsbilder for størrelsen på enheten som ber om dem. For å finne ut hvordan du bruker den, se docs.sencha.com/io/src/.

21. FitText

Nok en annen perle fra Paravel, Inc er FitText.js, en jQuery-plugin-modul for å gjøre overskriftens webtype lydhør overfor designet og enheten. For detaljer se trentwalton.com/2011/05/10/fit-to-scale/.

22. slabText

Brian McAllister's slabText er inspirert av FitText og SlabType-algoritmen, og er en jQuery-plugin-modul som lager dristige tekstblokker som endrer størrelsen responsivt og holder seg til en definert bredde.

Verktøy for mediespørsmål

Nå som du har en ide om hvordan oppsettet ditt vil endres for forskjellige enheter, et flytende rutenett og flytende bilder, trenger du mediespørsmål for å skifte elementene på siden til en responsiv tilstand.

23. Respond.js

Det eneste problemet med responsiv design er at nettlesere som ikke kan lese mediespørsmål, blir igjen. Dette kan ikke være et problem med målgruppen din, men det er fortsatt en god praksis å imøtekomme brukere i eldre nettlesere. Respond.js, av Scott Jehl, støtter bare egenskapene min-bredde og maks-bredde.

For mer se filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/.

24. CSS3-Mediaqueries.js

CSS3-Mediaqueries.js, av Wouter van der Graaf, lar eldre versjoner av IE og andre nettlesere effektivt teste og bruke alle slags mediespørsmål.

25. Adapt.js

Nathan Smith, forfatter av det originale 960.gs-rutenettet, har skrevet Adapt.js, et skript som oppdager nettleserdimensjoner og kun serverer de nødvendige stilarkene - som mediespørsmål, men uten mediespørsmål, noe som betyr at det også fungerer i eldre nettlesere.

26. Categorizr

Dette er enhetsgjenkjenning nærmet fra motsatt vinkel - Brett Jankords Categorizr-skript forutsetter at enhetene er mobile med mindre annet blir oppdaget som skrivebord eller nettbrett, slik at du kan servere ressurser til nettlesere på en sympatisk måte.

Responsive design (og mobile) kjeleplater

I ånden av en effektiv responsiv arbeidsflyt, gjør kjeleplater prosessen med å flytte design til nettleseren raskere enn senere. De fleste av disse kjeleplatene kombinerer det beste av verktøyene som er nevnt ovenfor, i en pakkepakke: et fleksibelt rutenett forbedret med skript, mens du implementerer den mobile første innholdsfilosofien.

27. 320 og oppover

Andy Clarke's 320 and Up er en mobil-første kjeleplate som integreres med mange andre moderne webdesignverktøy, som MINDRE og Bootstrap (se nr. 30). Det er en lett og smidig måte å få et nettsted raskt i gang. Sjekk også intervjuet vårt med Andy, der han forteller oss mer om den nye versjonen.

28. Rutenett

Gridless er en HTML5- og CSS3-kjeleplate som kan tjene som grunnlag for dine responsive design, med fokus på typografi og innbakt kompatibilitet mellom nettlesere.

29. Skjelett

I motsetning til de to foregående kokeplatene, hvis utgangspunkt er med den minste oppløsningen, er skjelettutviklingssettet, laget av Dave Gamache, basert på 960.gs rutenett og skalerer seg ned til mobil. Skeleton har også et flott stilrammeverk for utviklere å bygge stiler på toppen av.

30. Bootstrap

Bootstrap er bygget av Twitter og er nå åpen, og er et rammeverk og en serie komponenter for raskt å få et nettsted på nettet, og fra og med versjon to fungerer alle kjernedelene responsivt.

Plugins, shims og polyfills

Selv om moderne nettlesere og programvare har en tendens til å være tilpasset responsive, må vi noen ganger bruke ekstra verktøy for å gi en jevn opplevelse.

31. Responsivt plugin

Marios Lublinski har skrevet en WordPress-plugin-modul som lover å gjøre ethvert nåværende WP-tema til et responsivt tema. Hvordan dette fungerer vet jeg ennå ikke, siden det ikke ble utgitt i skrivende stund, men hvis det lever opp til sitt løfte, bør det være veldig nyttig.

32. Kaste

Innholdsoverløpshåndtering fungerer bra på stasjonære nettlesere, men eldre mobilnettlesere håndterer det inkonsekvent. Overthrow-fyllingen fra den flittige Filament Group legger til jevn, grasiøs nedbrytning på tvers av enheter, og sørger for at alle mobilbrukere får en best mulig opplevelse.

33. Medietabell

Marco Pegoraro's jQuery-plugin, MediaTable, fungerer med Respond.js for å hjelpe deg med å omgå problemet med hvordan du viser store datatabeller på enheter med liten skjerm, lager responsive kolonner og legger til en vis / skjul-veksel der det er passende.

"Testing, testing: 1-2-3 ..."

Et annet aspekt av den responsive arbeidsflyten er å kjenne dine målenheter og oppløsninger og deretter teste dem.

34. resizeMyBrowser

resizeMyBrowser, av frontend-utvikler Chen Luo, har flere forhåndsinnstilte dimensjoner for nettleservinduet ditt for å teste responsivt utformede sider eller opprette en ny forhåndsinnstilling hvis du ikke finner den som passer dine behov.

35. responsivepx

I likhet med resizeMyBrowser, responsivepx, bygget av Remy Sharp, laster du inn sidene dine i et vindu der du kan teste bredden og høyden for å bestemme hvor godt mediespørsmålene dine skyter og hvor bruddpunktene er i designet.

36. Testing av responsiv design

Et utrolig nyttig verktøy av designeren og utvikleren Matt Kersley: skriv ganske enkelt inn nettadressen til ditt responsive nettsted i Responsive Design Testing for å se hvordan det gjengis i forskjellige nettleserstørrelser.

37. The Responsinator

Skriv inn en URL og Responsinator vil vise deg hvordan den vises i mange vanlige enhetsstørrelser - med hensynsløs roboteffektivitet. Tama Pugsley og Andy Hovey er ansvarlige for denne.

38. Responsive.is

En annen enhetsemulator på siden, Responsive.is, lar deg skrive inn en URL og deretter endre størrelsen på den mellom en rekke forskjellige forhåndsinnstillinger. Den er laget av teamet bak den kommende Typecast-appen.

39. Screenqueri.es

Enda et nettleserdimensjonsverktøy, men Screenqueri.es fra Mandar Shirke skiller seg ut ved å ha et omfattende sett med forhåndsinnstillinger for mobil og nettbrett, samt et rutenett og linjaler som gjør finmåling så mye enklere.

40. Aptus

En annen app for testing av nettsteder i flere definerte størrelser, men Aptus er Mac-innfødt. Det er tilgjengelig gjennom Mac App Store, og det å være innfødt gir ekstra funksjoner som enkle skjermbilder og offline-støtte.

41. Responsive Design Bookmarklet

Victor Coulon har laget et veldig enkelt, men effektivt bokmerke; når du aktiverer den på en hvilken som helst webside, legger den til en verktøylinje som lar deg bytte mellom fire vanlige skjermdimensjoner, slik at du kan se hvordan nettstedet ditt gjengis i forskjellige størrelser.

42. Responsive Design Test Bookmarklet

Dette bokmerket fra Benjamin Keen muliggjør mer tilpasning ved å la deg definere dine egne enhetsstørrelser, og så mange eller få du vil. Når den er aktivert, viser den nettstedet i alle valgte størrelser, side om side for enkel sammenligning.

43. Skjermfly

Screenfly, av QuirkTools, lar deg teste et nettsted med forskjellige oppløsninger på skrivebord, nettbrett, mobil og TV. Skrivebordstesten er for tiden begrenset til Safari, mens nettbrettet og mobilen har flere alternativer for enheter og nettlesere. TV er begrenset til Opera.

44. Media Query Indicator

Johan Brook tilbyr en ren CSS-måte å teste når et mediespørsmål har blitt utløst av nettleseren. Media Query Indicator er et annet godt verktøy for å teste og spille med designbruddpunkter.

45. Shim

Et av verktøyene som brukes i redesignet av Boston Globe, plakatgutten til RWD-bevegelsen, Shim er en Node.js-app som kjører en webside på tvers av flere enheter på samme Wifi-nettverk, noe som gjør testing på tvers av enheter mye enklere. .

46. ​​Innkjøring

Hvis du ikke har en Node.js-server for å kjøre Shim, har Scott Jehl laget en enklere versjon kalt Drive-In, som fungerer på grunnleggende måte, men bruker PHP, Apache og en .htaccess-fil.

47. Adobe Shadow

Adobe fortsetter arbeidet med webteknologier med dette eksterne feilsøkingsverktøyet. Installer Shadow og Chrome-utvidelsen på Mac eller Windows, pluss Shadow-klienten på Android eller iPhone, og du kan dele websider mellom mange forskjellige enheter.

48. Opera Mobile Emulator + Ekstern feilsøking

En enklere måte å feilsøke mobilsider på er å installere Opera og Opera Mobile Emulator og koble de to med alternativet Ekstern feilsøking. Enkel og rask å installere, og har den ekstra fordelen av å teste på mer enn WebKit.

Ytterligere inspirasjon

Vil du få en ide om hvordan andre gjør designene responsive?

49. MediaQueri.es

Hvis du ikke allerede har sett det, har nettstedet Mediaqueri.es et stadig voksende antall nettsteder som har gått over til den responsive siden.

50. @RWD

Ethan Marcotte driver en Twitter-konto som gir de siste nyhetene, verktøyene og utstillingsvinduene fra RWD-verdenen.

Denise Jacobs elsker å være høyttaler, forfatter, webdesigntrener og kreativitetsevangelist, mens Peter Gasston er forfatter av The Book of CSS3 og en veteran webutvikler som blogger på Broken Links.

Likte dette? Les disse!

  • Pro tips for å bygge et mobilnettsted
  • Topp CSS og JavaScript teknikker
  • Hvordan lage en app
  • De beste gratis nettfonter for designere
  • Oppdag hva som er neste for Augmented Reality
  • Last ned gratis teksturer: høy oppløsning og klar til bruk nå
Forrige Artikkel

Hvordan eksportere dine designferdigheter
Neste Artikkel

18 kreative MacBook-dekaler
Sovjetisk
Hvordan frilans når du har en baby
Lese

Hvordan frilans når du har en baby

Kan 2024
Åtte måneder på min mu ikal ke aktivitet leke til den gjentatte melodien til 'Baa Baa Black heep', er min åtte måneder gamle ab orbert i in egen lille verden og piller...
50 utrolige verktøy for nettutvikling du trenger å vite
Lese

50 utrolige verktøy for nettutvikling du trenger å vite

Kan 2024
HOPPE TIL: Java cript-verktøy C - og HTML-verktøy Te t- og dataverktøy Biblioteker og rammer Arbeid flyt og mer Velkommen til guiden vår til må-ha verktøy for nettutvikl...
Ekspert typografi tips
Lese

Ekspert typografi tips

Kan 2024
Fra å utvikle le bare kropp krifter til å lage tilpa ede bok taver for logotyper, krever god type de ign en gan ke intere ant - og litt mot tridende - blanding av kvaliteter. Det er et h...