50 Nyttige Responsive Web Design Tools For Designers
I de siste dagene har vi vist deg noen av de beste WordPress og Joomla responsive temaene du kan laste ned og bruke på nettstedet ditt. I dag skal vi gi deg verktøyene. Omfattende av rammer, tjenester og nedlastbare skript, tror vi at de skal være en stor hjelp når det gjelder responsiv webutvikling.
For å gjøre det enklere å gå ned i hele listen over verktøy, har vi kategorisert dem i følgende seksjoner:
- Grid & Frameworks
- Sketch Sheets & Wireframes
- JavaScript og jQuery-plugins
- Testing og forhåndsvisning
- Sliders
- andre
Grid & Frameworks
[Tilbake til toppen]
Columnal
Columnal er et Pulp + Pixels prosjekt, som har blitt lånt fra cssgrid.net, mens noen kodeinspirasjoner er tatt fra 960.g. Columnal hjelper deg mye i ditt responsive webdesign, ved å gjøre nettene dine fleksible for å endres dynamisk når nettleservinduet endres.
Skjelett
Skeleton er et enkelt og kraftig CSS-rammeverk, som hovedsakelig likt av utviklere og designere på grunn av sin enkelhet og effektivitet. Det er ingen tungløfting med Javascript her, bare bra og rent CSS med ren dokumentasjon.
LessFramework 4
Mindre rammeverk er mer eller mindre et rammeverk, i navnet til skaperen. Det er et adaptivt CSS-nettverkssystem basert på bruk av inline CSS-mediesøk, noe som gjør utviklingen av lydhør nettsteder enklere..
Semantisk rutenett
Semantic Grid System brukes til å designe responsive grid layouts. Den bruker forhåndsbehandlede CSS-utvidelser som LESS, SCSS eller Stylus for å gi maksimal effektivitet. Du kan velge kolonne- og ryggbredder, velge antall kolonner og bytte mellom piksler og prosenter.
Golden Grid System
Golden Grid System er et fluid-grid system som fungerer som utgangspunkt for ditt responsive webdesign. Det gjør at nettstedet kan tjene gode sider fra 240 til 2560 px.
320 og opp
320 og Up er en CSS media spørringer boilerplate, som tjener til å være startmalen for din responsive design. Det følger en helt omvendt tilnærming enn de flere andre kjeleplatene som er tilgjengelige.
Inuit.css
Inuit.css er et CSS-rammeverk, som er ekstremt enkelt å bruke, selv for nybegynnere. Den har en minimalistisk tilnærming, og du må derfor bare håndtere ting som trengs, men hvis det er nødvendig, kan det også utvides med en håndfull plugins tilgjengelig.
Gridless
Gridless er en boilerplate for å skape responsive og cross-browser nettsteder med vakker typografi. Dette verktøyet fokuserer på progressiv utvikling av et prosjekt, og det tjener som utgangspunkt for ethvert design.
1140 CSS-nett
1140 CSS Grid er et flott CSS-grid-system designet av Melbourne-designer Andy Taylor, som lar designen passe perfekt til 1140px for store skjermer, og væskeoppsettet tilpasses sømløst til andre mindre oppløsninger med svært lite ekstra arbeid.
1KBCSSGrid
1KB CSS Grid designet av Tyler Tate, er en enkel og lett CSS Grid generator. Det vil tillate deg å angi antall kolonner, kolonnebredde og ryggbredde, og du kan få en nedlastbar CSS for nettstøtten til nettverket ditt.
Bootstrap
Bootstrap, opprettet og vedlikeholdt av Mark Otto og Jacob Thornton på Twitter, er et utmerket sett med brukergrensesnittelementer, layouter og javascript-verktøy, fritt tilgjengelig for deg å laste ned og bruke i dine webdesignprosjekter.
Fluid Grid Kalkulator
Dette enkle verktøyet vil hjelpe deg med å raskt ta tak i CSS i ditt nettnettdesign.
Fluid Grids
Fluid Grid er et enkelt, men nyttig fluid grid rammeverk, som skaper responsive layouter basert på 6, 7, 8, 9, 10, 12 eller 16 kolonner.
Flurid
Flurid er et enkelt og veldig nyttig cross-browser CSS-gridramme med opptil 16 kolonner. Og dessuten skjuler det ikke piksler i marginer.
Gridset
Gridset er et verktøy for å lage grids av noe slag, for eksempel kolonnert, asymmetrisk, fast, forhold, sammensatt, responsiv og mer. Dette verktøyet fra Mark Boulton, er fortsatt i beta, men viser seg å være lovende. Og jeg nevnte, det er så enkelt å bruke det som en integrert link.
Gridpak
Gridpak er en online-responsiv gridgenerator, hvor antall kolonner, polstring og renner kan endres, og tilpassede bruddpunkter kan legges til. CSS genereres av verktøyet og gjøres klar for nedlasting. Det gir også PNG-nettmaler, som kan brukes til å designe formål i Photoshop.
SimpleGrid
SimpleGrid, utviklet av Michael Kuhn, er et veldig enkelt og rettferdig CSS-rammeverk for å lage uendelige gridbaserte oppsett. Som standard er SimpleGrid forberedt på 4 forskjellige størrelser av skjermstørrelser.
Susy
Susy av Oddbird, ligner på samme måte som det semantiske grid-systemet. Det bruker ingen ekstra oppslag eller andre spesielle klasser, men er bare rettet mot brukerne av Saas og dens utvidelseskompass.
Tiny Fluid Grid
Tiny Fluid Grid er en fantastisk webapp, som kan hjelpe deg med å bestemme gridsystemet på nettstedet ditt på en interaktiv måte. Du kan angi antall kolonner, gutter prosent, minimum og maksimal bredde på webområdet ditt layout, og kan få en nedlastbar CSS for det.
Variable Grid System
Variable Grid System er designet og utviklet av SprySoft og er basert på 960 Grid System. Det tillater utviklere og designere å generere egendefinert rutenett og deretter laste ned den medfølgende CSS-filen basert på det rutenettet.
Sketch Sheets & Wireframes
[Tilbake til toppen]
Responsive Web Design Sketch Sheets
Dette verktøyet er nyttig når du skal kartlegge plasseringene av ulike elementer i ditt nettstedoppsett på tvers av ulike enheter. Ved hjelp av denne enheten kan du danne en ide om hvor du skal plassere de nødvendige elementene på et nettsted for forskjellige skjermstørrelser og -oppløsninger.
Responsive Wireframes
Responsive Wireframes er et eksperimentelt verktøy laget av James Mellers of Adobe. Den er bygget med bare HTML og CSS (ingen bilder eller JS ble brukt) som du kan bruke til å visualisere hvordan din responsive design vil se ut på de faktiske nettleserne på forskjellige skrivebord og mobile enheter.
StyleTiles
Style Tiles gir deg en måte å utvikle en ide om hvordan et nettsted vil se ut, uavhengig av de kompliserte stilene som kommer inn i spill. Det gir deg muligheten til en perfekt responsiv design arbeidsflyt og også muligheten til å integrere klient tilbakemeldinger.
JavaScript og jQuery-plugins
[Tilbake til toppen]
Adapt.Js
Adapt.js er en Javascript-løsning og et utmerket alternativ til CSS media spørringer. Bruke @media tilnærming er god praksis, men dette virker ikke for alle nettlesere. Nathan Smith, skaperen av 960 Grid System, ga ut Adapt.js, et veldig lett javascript bibliotek for å overvinne dette problemet.
isotope
Isotop er en fantastisk jQuery-plugin, som viser seg å være svært nyttig når du designer en responsiv design. Det hjelper ikke bare å omorganisere elementene på en side når nettleservinduet er endret eller skjermstørrelsen er mindre, men det hjelper også å filtrere elementene.
murverk
Masonry er et utmerket jQuery-plugin, som brukes til å lage dynamiske og adaptive layouter. Denne plugin hjelper å omorganisere elementene i din responsive design, slik at de kan passe bedre i åpne steder på rutenettet.
Respond.js
Respond.js er et raskt og lett (3 Kb-minifisert og 1 Kb gzipped) skript, hvis hovedmål er å muliggjøre responsivt webdesign i de som ikke støtter CSS3 Media Queries, som IE-nettlesere.
TinyNav.js
TinyNav.js er en liten og lett jQuery-plugin, bare 362 byte, som konverterer store navigasjonslister til små rullegardinmenyer for mindre skjermer.
Wookmark jQuery Plugin
Wookmark er et jQuery-plugin som registrerer nettleservinduets størrelse og automatisk organiserer elementene på siden i kolonner. Du kan også se et live forhåndsvisning nederst på selve siden.
Testing og forhåndsvisning
[Tilbake til toppen]
ProtoFluid
ProtoFluid er et webbasert prototypingsverktøy som lar deg teste nettstedets prototyper i ulike skjermstørrelser og -oppløsninger. Bare skriv inn nettadressen, velg enheten (eller noen egendefinerte dimensjoner) og trykk på start. Siden det er et nettbasert verktøy, kan du også bruke andre utvidelser som FireBug.
Responsive.Is
Responsive.Is er laget av TypeCast et annet nettleseremulatorverktøy, som du kan bruke til å teste din responsive design. Skriv bare inn en nettadresse, og den endrer automatisk størrelsen avhengig av hvilken enhet du velger.
Responsivepx.Com
ResponsivePx er et fantastisk verktøy for å teste ditt responsive webdesign. Hovedfunksjonen som skiller den fra andre, er dens evne til å endre størrelsen på nettsiden pixel-by-pixel. Denne fantastiske funksjonen, vil la deg identifisere breakpoints og også teste hvordan CSS media spørringer jobber på nettstedet ditt.
Responsive Web Design Testing Tool
Et fantastisk testingverktøy, som kan gi deg mulighet til å vise ditt responsive nettsted i ulike skjermstørrelser samtidig i en enkelt skjerm, mens du bygger eller designer dem. Jeg liker dette verktøyet, hovedsakelig fordi det viser alle skjermoppløsninger side ved side som gjør det enklere for feilsøking.
ReView.Js
ReView er et dynamisk viewport-system, utviklet i ren JavaScript, noe som gir deg en fantastisk visningsopplevelse for ditt responsive webdesign.
Screenfly
Screenfly av QuirkTools, er et fantastisk verktøy som gjør det mulig for deg å se ditt lydige nettsted i en rekke enheter: Desktop, Tablet, Mobile og TV. Det har også muligheter for å aktivere eller deaktivere rulling eller til og med for å rotere skjermen.
Screenqueri.es
Screenqueri.es er et piksel-perfekt responsivt designtestverktøy. Bare skriv inn en nettadresse du vil sjekke, og dette verktøyet utfører vil vise nettstedet i ulike skjermstørrelser i henhold til enheten. Du kan også endre størrelsen på pixel-for-pixel manuelt for å identifisere breakpoints.
Respondatoren
Test nettstedet ditt i forskjellige enheter fra en iPhone og iPad, til en tenne og på Android på Respondatoren. Den viser også nettstedet ditt både i stående og liggende modus. Jeg liker dette verktøyet mye mer på grunn av skissene til enhetene som vises på siden, noe som gir mer mening til hele prosessen.
Sliders
[Tilbake til toppen]
Blåbær
Blueberry er en fantastisk åpen kildekode jQuery bildeskli, som er skrevet for å jobbe spesielt for flytende eller responsive layouter.
Elastislide
Vil du ha en karusell som automatisk vil tilpasse seg skjermstørrelsen når nettleservinduet er endret eller når du er i en mindre skjerm? Elastislide er det mest passende jQuery-pluginet for dine behov.
Responsive CSS3 Slider
Dette er en ren, responsiv CSS3-glidebryter som enkelt kan tilpasse seg hvilken som helst skjermstørrelse og skjermoppløsning. Det fine med denne skyveknappen er at pilene går inn i esken når skjermstørrelsen på enheten er liten nok. Ingen JavaScript nødvendig.
ResponsiveSlides.Js
ResponsiveSlides.Js er en veldig enkel og ekstremt lett (bare 1Kb) jQuery-plugin som skaper en responsiv glidebryter ved hjelp av uordnede lister. Den fungerer på et bredt spekter av nettlesere, også på IE6 og opp.
andre
[Tilbake til toppen]
Adaptive Images
Adaptive Images er et online verktøy for responsiv webdesign, som registrerer besøkendees skjermstørrelse og skaper, caches og leverer rescaled bilder, basert på skjermstørrelsen og oppløsningen.
FitText.Js
FitText.js er et lite javascript verktøy, som gjør det mulig å automatisk endre størrelse på tekst og overskrifter når nettleservinduet endres. Ikke flere bekymringer for manglende samsvar med tekststørrelse med dette verktøyet om bord.
FitVid.Js
Vil du rescale de innebygde videoene når nettleservinduet er endret eller enheten har mindre oppløsning? FitVid.Js kan hjelpe deg å oppnå dette. Det er et lett, enkelt, brukervennlig jQuery-plugin som brukes til å oppnå væskebredde innebygde videoer.
Retina Bilder
Retina Images er en fantastisk javascript-løsning, som automatisk vil tjene @ 2X større, høyoppløselige bilder når de vises på netthinnen. Alt du trenger å gjøre er å sette en høyoppløselig versjon av hvert enkelt bilde, og det vil klare resten.
Sømløs Responsive Photo Grid
Sømløs Responsive Photo Grid viser bildene kant-til-kant i nettleseren, uten hull i mellom bildene. Bildene er flislagt og de flyter fra venstre til høyre over hele siden i kolonner. Antallet kolonner justerer tilsvarende ettersom nettleservinduet er endret.
SlabText
SlabText er en jQuery-plugin eller et verktøy av Brian McAllister basert på platekst algoritmen, som deler overskriftene i rader før du endrer størrelsen på hver rad for å fylle ledig plass. Det er ganske lik FitText.Js plugin i aksjon.
Zurb - ResponsiveTables
Har du noen gang lurt på hvordan du skal håndtere de store datatabellene i responsiv design? Zurb, en CSS / JS-kombinasjon gir deg svaret; det tar datatabellene og endrer dem slik at de ikke bryter det responsive layoutet på mindre skjerm enheter.
Categorizr
Categorizr er et veldig lite PHP-skript, som gir dine besøkende en mer målrettet nettopplevelse. Det vil hjelpe deg med å levere enhetsspesifikke design for Tablet, TV, Mobile eller Desktop.
Media Query Bookmarklet
Media Query Bookmarklet viser deg hvilken størrelse den nåværende visningsporten har, og hvilket medieforespørsel ble bare avbrutt for det.
Den Responsive Calculator
Den Responsive Calculator er et veldig enkelt nettbasert verktøy som kan hjelpe deg med å slå piksler i prosenter mens du designer ditt responsive nettsted.
Opp neste uke
I den andre uken i denne serien vil vi gi deg opplæringsprogrammer som virkelig får deg til Responsive Web Design (RWD).
Ikke gå glipp av det.
