50 Nyttige Responsive Web Design Tools til designere
I de sidste par dage har vi vist dig nogle af de bedste WordPress og Joomla responsive temaer, du kan downloade og bruge på dit websted. I dag skal vi give dig værktøjerne. Komponenter af rammer, tjenester og downloadble scripts, vi tror, de vil være en stor hjælp, når det kommer til lydhør webudvikling.
For at gøre det nemmere at gå ned i hele listen over værktøjer, har vi kategoriseret dem i følgende afsnit:
- Gitter og rammer
- Sketch Sheets & Wireframes
- JavaScript & jQuery-plugins
- Test og preview
- sliders
- Andre
Gitter og rammer
[Tilbage til toppen]
Columnal
Columnal er et Pulp + Pixels-projekt, som er blevet lånt fra cssgrid.net, mens nogle kodeinspirationer er taget fra 960.g. Columnal hjælper dig meget i dit lydhørige webdesign ved at gøre dine net fleksible til at ændre dynamisk, når browservinduet ændres.
Skelet
Skelet er en simpel og kraftfuld CSS ramme, som hovedsagelig kan lide af udviklere og designere på grund af sin enkelhed og effektivitet. Der er ingen tunge løft med Javascript her, kun god og ren CSS med ren dokumentation.
LessFramework 4
Mindre ramme er mere eller mindre en ramme, i navnet på dens skaber. Det er et adaptivt CSS-netværkssystem baseret på brug af inline CSS-medieforespørgsler, hvilket gør udviklingen af lydhøre websites meget lettere.
Semantic Grid System
Semantic Grid System bruges til at designe responsive grid layouts. Den bruger forudbehandlede CSS-udvidelser som LESS, SCSS eller Stylus til at levere maksimal effektivitet. Du kan vælge kolonne- og rendebredder, vælge antal kolonner og skifte mellem pixel og procentdele.
Golden Grid System
Golden Grid System er et fluid-grid system, der tjener som udgangspunkt for dit responsive webdesign. Det gør det muligt for hjemmesiden at servere flotte sider fra 240 til 2560 px.
320 og op
320 og Up er en CSS medie forespørgsler boilerplate, som tjener til at være startskabelonen for dit responsive design. Det følger en helt omvendt tilgang end de mange andre kedler, der er til rådighed.
Inuit.css
Inuit.css er en CSS ramme, som er ekstremt nem at bruge, selv for begyndere. Det har en minimalistisk tilgang, så du behøver kun at håndtere ting, der er nødvendige, men hvis det er nødvendigt, kan det også udvides med en håndfuld plugins til rådighed.
gitterløs
Gridless er en kedelplader til oprettelse af lydhørige og cross-browser websites med smuk typografi. Dette værktøj fokuserer på progressiv udvikling af et projekt, og det tjener som udgangspunkt for ethvert design.
1140 CSS-net
1140 CSS Grid er et godt CSS gittersystem designet af Melbourne designer Andy Taylor, som lader dit design passe perfekt til 1140px til store skærme, og dit fluid layout tilpasses problemfrit til andre mindre opløsninger med meget lidt ekstra arbejde.
1KBCSSGrid
1KB CSS Grid designet af Tyler Tate, er en simpel og letvægts CSS Grid generator. Det giver dig mulighed for at indstille antallet af kolonner, kolonnebredde og rendebredde, og du kan få en downloadbar CSS til dit websites net.
bootstrap
Bootstrap, skabt og vedligeholdt af Mark Otto og Jacob Thornton på Twitter, er et glimrende sæt brugergrænsefladeelementer, layouter og javascriptværktøjer, der er gratis tilgængelige for dig at downloade og bruge i dine webdesignprojekter.
Fluid Grid Calculator
Dette enkle værktøj hjælper dig med hurtigt at få fat i CSS i dit væskenettet website design.
Fluidgitter
Fluid Grid er et simpelt, men nyttigt fluid grid framework, der skaber responsive layouter baseret på 6, 7, 8, 9, 10, 12 eller 16 kolonner.
Flurid
Flurid er en simpel og meget nyttig cross-browser CSS grid ramme med op til 16 kolonner. Og det skjuler heller ikke pixler i marginaler.
Gridset
Gridset er et værktøj til at lave grids af enhver type, såsom kolonneformet, asymmetrisk, fast, forhold, sammensat, lydhør og mere. Dette værktøj af Mark Boulton, er stadig i beta, men viser sig at være lovende. Og jeg nævner, at bruge det er lige så enkelt som at indlejre et link.
Gridpak
Gridpak er en online responsiv grid generator, hvor antallet af kolonner, polstring og rende kan ændres, og brugerdefinerede breakpoints kan tilføjes. CSS genereres af værktøjet og gøres klar til download. Det giver også PNG-netmaler, som kan bruges til designformål i Photoshop.
SimpleGrid
SimpleGrid, udviklet af Michael Kuhn, er en meget enkel og ligetil CSS ramme for at skabe uendelige grid-baserede layouter. Som standard er SimpleGrid forberedt til 4 forskellige størrelser af skærmstørrelser.
Susy
Susy af Oddbird, er i lighed med det semantiske gittersystem. Det bruger ingen ekstra markup eller andre specielle klasser, men er kun rettet mod brugerne af Saas og dens udvidelseskompas.
Lille væske
Tiny Fluid Grid er en fantastisk webapp, der kan hjælpe dig med at bestemme netværket på dit websted på en interaktiv måde. Du kan indstille antallet af kolonner, gutter procent, minimum og maksimal bredde på dit website layout, og kan få en downloadbar CSS til det.
Variable Grid System
Variable Grid System er designet og udviklet af SprySoft og er baseret på 960 Grid System. Det giver udviklere og designere mulighed for at generere det tilpassede net og derefter hente den medfølgende CSS-fil baseret på det pågældende net.
Sketch Sheets & Wireframes
[Tilbage til toppen]
Responsive Web Design Sketch Sheets
Dette værktøj er nyttigt til kortlægning af placeringerne af forskellige elementer i dit website layout på tværs af forskellige enheder. Ved hjælp af denne enhed kan du danne en ide om, hvor du skal placere de nødvendige elementer på et websted for forskellige skærmstørrelser og opløsninger.
Responsive Wireframes
Responsive Wireframes er et eksperimentelt værktøj skabt af James Mellers of Adobe. Det er bygget med kun HTML og CSS (der blev ikke brugt billeder eller JS), som du kan bruge til at visualisere, hvordan dit lydhøre design vil se ud på de faktiske browsere på forskellige desktops og mobile enheder.
StyleTiles
Style Fliser giver dig mulighed for at udvikle en ide om, hvordan et websted vil se ud, uafhængigt af de komplicerede stilarter, der kommer i spil. Det giver dig mulighed for en perfekt responsiv design arbejdsgang og også evnen til at integrere klient tilbagemeldinger.
JavaScript & jQuery-plugins
[Tilbage til toppen]
Adapt.Js
Adapt.js er en Javascript-løsning og et fremragende alternativ til CSS-medierne. Brug af @media tilgang er god praksis, men det virker ikke for alle browsere. Nathan Smith, skaberen af 960 Grid System, udgav Adapt.js, et meget let javascript bibliotek for at overvinde dette problem.
isotop
Isotop er en fantastisk jQuery-plugin, som viser sig at være meget nyttig, når man designer et lydhørt design. Det hjælper ikke kun med at omarrangere elementerne på en side, når browservinduet ændres, eller skærmens størrelse er mindre, men det hjælper også med at filtrere disse elementer.
Murværk
Murværk er et glimrende jQuery-plugin, som bruges til at skabe dynamiske og adaptive layouter. Dette plugin hjælper med at omarrangere elementerne i dit lydhørige design, så de kan passe bedre i åbningerne på nettet.
Respond.js
Respond.js er et hurtigt og letvægts (3 Kb-minificeret og 1 Kb gzipped) script, hvis hovedformål er at muliggøre responsivt webdesign i dem, der ikke understøtter CSS3 Media Queries, som IE-browsere.
TinyNav.js
TinyNav.js er et lille og let jQuery-plugin, kun 362 bytes, der konverterer store navigationslister til små rullemenuer til mindre skærme.
Wookmark jQuery-plugin
Wookmark er et jQuery-plugin, der registrerer browservinduets størrelse og automatisk arrangerer elementets elementer i kolonner. Du kan også se et live preview nederst på selve siden.
Test og preview
[Tilbage til toppen]
ProtoFluid
ProtoFluid er et webbaseret prototypeværktøj, som giver dig mulighed for at teste dine websites prototyper i forskellige skærmstørrelser og opløsninger. Indtast bare URL-adressen, vælg enheden (eller eventuelle tilpassede dimensioner), og tryk på start. Da det er et webbaseret værktøj, kan du også bruge andre udvidelser som FireBug.
Responsive.Is
Responsive.Is er skabt af TypeCast et andet browser emulator værktøj, som du kan bruge til at teste dit responsive design. Indtast bare en URL, og den ændrer automatisk størrelsen afhængigt af den enhed, du vælger.
Responsivepx.Com
ResponsivePx er et fantastisk værktøj til at teste dit responsive website design. Hovedfunktionen, der adskiller den fra andre, er dens evne til at ændre størrelsen på pixel-for-pixelens hjemmeside. Denne fantastiske funktion vil lade dig identificere breakpoints og også teste, hvordan CSS-medieforespørgslen virker på dit websted.
Responsive Web Design Testing Tool
Et fantastisk testværktøj, der kan give dig mulighed for at se din lydhøre hjemmeside i forskellige skærmstørrelser samtidigt i en enkelt skærm, mens du bygger eller designer dem. Jeg kan godt lide dette værktøj, hovedsagelig fordi det viser alle skærmopløsninger side om side, hvilket gør det nemmere at fejle.
ReView.Js
ReView er et dynamisk viewport-system, udviklet i ren JavaScript, som giver dig en fantastisk oplevelse for dit lydhørige webdesign.
Screenfly
Screenfly af QuirkTools, er et fantastisk værktøj, der gør det muligt for dig at se din lydhør hjemmeside i forskellige enheder: Desktop, Tablet, Mobile og TV. Det har også muligheder for at aktivere eller deaktivere rulning eller endda at rotere displayet.
Screenqueri.es
Screenqueri.es er et pixel-perfekt responsivt design testværktøj. Indtast bare en webadresse, som du vil tjekke, og dette værktøj udfører vil vise hjemmesiden i forskellige skærmstørrelser i henhold til enheden. Du kan også manuelt ændre størrelse på pixel-for-pixel for at identificere breakpoints.
Respondatoren
Test dit websted i forskellige enheder fra en iPhone og iPad, til en Kindle og på Android på Respondatoren. Det viser også dit websted både i portræt og liggende tilstand. Jeg kan godt lide dette værktøj meget mere på grund af konturerne af de enheder, der vises på siden, hvilket giver mere mening til hele processen.
sliders
[Tilbage til toppen]
Blåbær
Blåbær er en fantastisk open source jQuery billedskyder, som er skrevet til specifikt arbejde for væskeformige eller lydhørige layouter.
Elastislide
Vil du have en karrusel, der automatisk tilpasser sig skærmens størrelse, når browservinduet er ændret, eller når du er i en mindre skærm? Elastislide er det mest egnede jQuery-plugin til dine behov.
Responsive CSS3 Slider
Dette er en ren lydhør CSS3 skyder, der nemt kan tilpasse sig enhver skærmstørrelse og skærmopløsning. Det gode ved denne skyder er, at pilene går ind i kassen, når enhedens skærmstørrelse er lille nok. Ingen JavaScript nødvendig.
ResponsiveSlides.Js
ResponsiveSlides.Js er et meget simpelt og ekstremt letvægts (kun 1Kb) jQuery-plugin, der skaber en responsiv skyder ved hjælp af uordnede lists. Det fungerer på en bred vifte af browsere, også på IE6 og op.
Andre
[Tilbage til toppen]
Adaptive Images
Adaptive Images er et online værktøj til responsivt webdesign, der registrerer besøgernes skærmstørrelse og skaber, caches og leverer forkalkede billeder, baseret på skærmstørrelse og opløsning.
FitText.Js
FitText.js er et lille javascriptværktøj, som gør det muligt automatisk at ændre størrelse på tekst og overskrifter, når browservinduet ændres. Ikke mere bekymringer for manglende tekststørrelse med dette værktøj om bord.
FitVid.Js
Vil du omskalere de indlejrede videoer, når browservinduet er ændret, eller enheden har mindre opløsning? FitVid.Js kan hjælpe dig med at opnå dette. Det er et let, nemt og nemt at bruge jQuery-plugin, der bruges til at opnå indbyggede videoindhold af væskebredde.
Nethinden billeder
Retina Images er en fantastisk javascript-løsning, som automatisk serverer @ 2X større billeder i høj opløsning, når de ses på nethinden. Alt du skal gøre er at lægge en højopløsningsversion af hvert enkelt billede, og det vil klare resten.
Problemfri Responsive Photo Grid
Problemfri Fotoregulering viser billederne kant-til-kant i browseren, uden huller imellem billeder. Billederne er flisebelagt og de flyder fra venstre til højre hele siden i kolonner. Antallet af kolonner justeres efterhånden som browservinduet er ændret.
SlabText
SlabText er en jQuery-plugin eller et værktøj af Brian McAllister baseret på slabText-algoritmen, der opdeler overskrifterne i rækker, før du ændrer størrelsen på hver række for at udfylde det ledige rum. Det svarer meget til FitText.Js plugin i aktion.
Zurb - ResponsiveTables
Har du nogensinde spekuleret på, hvordan man håndterer de store datatabeller i responsivt design? Zurb, en CSS / JS combo giver dig svaret; det tager datatabellerne og ændrer dem, så de ikke bryder det responsive layout på mindre skærmenheder.
Categorizr
Categorizr er et meget lille PHP script, der giver dine besøgende en mere målrettet weboplevelse. Det hjælper dig med at levere enhedsspecifikke design til Tablet, TV, Mobile eller Desktop.
Media Query Bookmarklet
Medieforespørgsel Bogmærke viser dig, hvilken størrelse den aktuelle visningsport har, og hvilken medieforespørgsel blev netop fyret for den.
Den Responsive Calculator
Den Responsive Calculator er et meget simpelt online værktøj, der kan hjælpe dig med at omdanne pixels til procentdele, mens du designer dit lydhørige websted.
Op næste uge
I den anden uge af denne serie vil vi give dig vejledning, der virkelig får dig til Responsive Web Design (RWD).
Gå ikke glip af det.
