50 Användbara Responsive Web Design Tools För Designers
Under de senaste dagarna har vi visat dig några av de bästa WordPress- och Joomla-responsiva teman som du kan ladda ner och använda på din webbplats. Idag ska vi ge dig verktygen. Omfattar ramar, tjänster och nedladdningsbara skript, tror vi att de kommer att vara till stor hjälp när det gäller responsiv webbutveckling.
För att göra det enklare att gå ner hela listan över verktyg har vi kategoriserat dem i följande avsnitt:
- Grid & Frameworks
- Sketch Sheets & Wireframes
- JavaScript och jQuery-plugins
- Testa och förhandsgranska
- sliders
- Övriga
Grid & Frameworks
[Tillbaka till toppen]
Columnal
Columnal är ett Pulp + Pixels-projekt, som har lånats från cssgrid.net, medan vissa kodinspirationer har tagits från 960.g. Columnal hjälper dig mycket i din lyhörda webbdesign, genom att göra dina nät flexibla för att förändras dynamiskt när webbläsarfönstret ändras.
Skelett
Skelett är ett enkelt och kraftfullt CSS-ramverk, som huvudsakligen gynnas av utvecklare och designers på grund av dess enkelhet och effektivitet. Det finns ingen tunglyftning med Javascript här, bara bra och ren CSS med ren dokumentation.
LessFramework 4
Mindre ramverk är mer eller mindre ett ramverk, i namnet på dess skapare. Det är ett adaptivt CSS-nätverkssystem baserat på att använda inline CSS-mediafrågor, vilket gör utvecklingen av lyhörda webbplatser mycket enklare.
Semantic Grid System
Semantic Grid System används för att designa responsiva rutnätlayouter. Den använder förbehandlade CSS-tillägg som LESS, SCSS eller Stylus för att ge maximal effektivitet. Du kan välja kolumn- och rännbredd, välj antal kolumner och växla mellan pixlar och procentandelar.
Golden Grid System
Golden Grid System är ett vätskegridssystem som fungerar som utgångspunkt för din lyhörda webbdesign. Det gör det möjligt för webbplatsen att servera snygga sidor som sträcker sig från 240 till 2560px.
320 och uppåt
320 och Up är en CSS media queries boilerplate, som fungerar som startmall för din responsiva design. Det följer en helt omvänd inställning än de flera andra pannplattor som finns tillgängliga.
Inuit.css
Inuit.css är en CSS-ram, som är extremt lätt att använda, även för nybörjare. Den har en minimalistisk inställning, så du behöver bara hantera saker som behövs, men om det behövs kan det också utökas med en handfull plugins som är tillgängliga.
Gridless
Gridless är en panna för att skapa responsiva och cross-browser webbplatser med vacker typografi. Det här verktyget fokuserar på en progressiv utveckling av ett projekt, och det fungerar som utgångspunkt för vilken design som helst.
1140 CSS-rutnät
1140 CSS Grid är ett bra CSS-gridsystem som designats av Melbourne-designer Andy Taylor, vilket gör att din design passar perfekt vid 1140px för stora bildskärmar och din vätskelayout anpassas sömlöst till andra mindre upplösningar med mycket lite extra arbete.
1KBCSSGrid
1KB CSS Grid designad av Tyler Tate, är en enkel och lätt CSS Grid generator. Det låter dig ställa in antalet kolumner, kolumnbredd och rännbredd, och du kan få en nedladdningsbar CSS för ditt nätverksnät.
bootstrap
Bootstrap, skapad och underhållen av Mark Otto och Jacob Thornton på Twitter, är en utmärkt uppsättning användargränssnitt, layouter och javascriptverktyg, fritt tillgängliga för dig att ladda ner och använda i dina webbdesignprojekt.
Fluid Grid Calculator
Det här enkla verktyget hjälper dig att snabbt ta tag i CSS i din webbdesign.
Fluid Grids
Fluid Grid är ett enkelt men ändamålsenligt fluidgridramverk som skapar responsiva layouter baserat på 6, 7, 8, 9, 10, 12 eller 16 kolumner.
Flurid
Flurid är ett enkelt och mycket användbart cross-browser CSS-ramverk med upp till 16 kolumner. Och dessutom döljer det inte bildpunkter i marginaler.
Gridset
Gridset är ett verktyg för att skapa grids av vilken typ som helst, kolumnär, asymmetrisk, fast, förhållande, sammansatt, lyhörd och mer. Detta verktyg av Mark Boulton, är fortfarande i beta, men visar sig vara lovande. Och nämnde jag, att använda det är lika enkelt som att bädda in en länk.
Gridpak
Gridpak är en online-responsiv nätgenerator, där antalet kolumner, vadderingar och rännor kan ändras, och anpassade brytpunkter kan läggas till. CSS genereras av verktyget och görs redo för nedladdning. Det tillhandahåller även PNG-gallermallar, som kan användas för utformning i Photoshop.
SimpleGrid
SimpleGrid, utvecklad av Michael Kuhn, är ett mycket enkelt och rakt CSS-ramverk för att skapa oändliga rutnätbaserade layouter. Som standard är SimpleGrid förberedd för 4 distinkta skärmstorlekar.
Susy
Susy av Oddbird, är liknande i åtgärd för Semantic Grid System. Det använder ingen extra markup eller någon annan speciell klass, men riktar sig bara till användarna av Saas och dess förlängningskompass.
Tiny Fluid Grid
Tiny Fluid Grid är en fantastisk webbapp, som kan hjälpa dig att bestämma nätverket på din webbplats på ett interaktivt sätt. Du kan ange antalet kolumner, rännprocent, minsta och maximala bredden på din webbplatss layout och kan hämta en CSS för nedladdning.
Variabelt nät system
Variable Grid System är designat och utvecklat av SprySoft och bygger på 960 Grid System. Det gör det möjligt för utvecklare och designers att skapa det anpassade rutnätet och sedan ladda ner den medföljande CSS-filen baserat på det nätet.
Sketch Sheets & Wireframes
[Tillbaka till toppen]
Responsive Web Design Sketch Sheets
Det här verktyget är användbart vid kartläggning av placeringar av olika element i din webbplatslayout över olika enheter. Med hjälp av den här enheten kan du skapa en uppfattning om var du ska placera de nödvändiga elementen på en webbplats för olika skärmstorlekar och upplösningar.
Responsive Wireframes
Responsive Wireframes är ett experimentellt verktyg skapat av James Mellers of Adobe. Den är byggd med endast HTML och CSS (inga bilder eller JS användes) som du kan använda för att visualisera hur din responsiva design skulle se ut på de faktiska webbläsarna på olika stationära och mobila enheter.
StyleTiles
Style Tiles ger dig ett sätt att utveckla en uppfattning om hur en webbplats skulle se ut, oberoende av de komplicerade stilar som spelar in. Det ger dig möjlighet till ett perfekt responsivt design arbetsflöde och även möjligheten att integrera klientåterkopplingar.
JavaScript och jQuery-plugins
[Tillbaka till toppen]
Adapt.Js
Adapt.js är en Javascript-lösning och ett utmärkt alternativ till CSS-mediafrågorna. Att använda @media-tillvägagångssätt är bra, men det fungerar inte för alla webbläsare. Nathan Smith, skaparen av 960 Grid System, släppte Adapt.js, ett mycket lätt javascript bibliotek för att övervinna detta problem.
Isotop
Isotop är ett fantastiskt jQuery-plugin, vilket visar sig vara mycket användbart när du utformar en lyhörd design. Det hjälper inte bara att omorganisera elementen på en sida när webbläsarfönstret ändras eller skärmstorleken är mindre, men det hjälper också att filtrera de elementen.
Murverk
Masonry är ett utmärkt jQuery-plugin, som används för att skapa dynamiska och adaptiva layouter. Denna plugin hjälper till att omorganisera elementen i din lyhörda design, så de kan passa bättre i öppna ytor på rutnätet.
Respond.js
Respond.js är ett snabbt och lättviktsprogram (3 Kb-miniverat och 1 Kb gzipped), vars huvudsyfte är att möjliggöra responsiv webbdesign i de som inte stöder CSS3 Media Queries, som IE-webbläsare.
TinyNav.js
TinyNav.js är en liten och lätt jQuery-plugin, bara 362 byte, som konverterar stora navigationslistor till små menyer för mindre menyer för mindre skärmar.
Wookmark jQuery-plugin
Wookmark är ett jQuery-plugin som upptäcker webbläsarfönstervärdet och ordnar automatiskt elementen i sidan i kolumner. Du kan också se en live förhandsvisning längst ner på sidan.
Testa och förhandsgranska
[Tillbaka till toppen]
ProtoFluid
ProtoFluid är ett webbaserat prototyperverktyg som låter dig testa dina webbplatsprototyper i olika skärmstorlekar och upplösningar. Skriv bara in URL-adressen, välj enheten (eller några anpassade dimensioner) och tryck på starta. Eftersom det är ett webbaserat verktyg kan du också använda andra tillägg som FireBug.
Responsive.Is
Responsive.Is skapas av TypeCast ett annat webbläsare emulatorverktyg, som du kan använda för att testa din responsiva design. Skriv bara in en webbadress, och den ändrar automatiskt sin storlek beroende på vilken enhet du väljer.
Responsivepx.Com
ResponsivePx är ett fantastiskt verktyg för att testa din responsiva webbdesign. Huvudfunktionen som skiljer den från andra, är dess förmåga att ändra storlek på webbplatsen pixel-by-pixel. Den här fantastiska funktionen kommer att låta dig identifiera brytpunkterna och även testa hur CSS-mediafrågorna fungerar på din webbplats.
Responsive Web Design Testing Tool
Ett fantastiskt testverktyg som kan låta dig se din mottagliga webbplats i olika skärmstorlekar samtidigt i en enda skärm medan du bygger eller utformar dem. Jag gillar det här verktyget, främst eftersom det visar alla skärmupplösningar sida vid sida vilket gör det enklare att felsöka.
ReView.Js
ReView är ett dynamiskt viewport-system, utvecklat i ren JavaScript, vilket ger dig en fantastisk tittarupplevelse för din lyhörda webbdesign.
Screenfly
Screenfly av QuirkTools, är ett fantastiskt verktyg som gör att du kan se din lyhörda webbplats i en mängd olika enheter: Skrivbord, Tablet, Mobil och TV. Det har också alternativ för att aktivera eller inaktivera rullning eller till och med för att rotera skärmen.
Screenqueri.es
Screenqueri.es är ett pixel-perfekt responsivt design testverktyg. Ange bara vilken webbadress du vill kontrollera, och det här verktyget visar webbplatsen i olika skärmstorlekar enligt enhet. Du kan också manuellt ändra storleken pixel-för-pixel för att identifiera brytpunkterna.
Respondatorn
Testa din webbplats i olika enheter från en iPhone och iPad, till en Kindle och på Android på Respondator. Den visar också din webbplats både i stående och liggande läge. Jag gillar det här verktyget mycket mer på grund av konturerna för de enheter som visas på sidan, vilket ger mer mening åt hela processen.
sliders
[Tillbaka till toppen]
Blåbär
Blueberry är en fantastisk open source jQuery bildreglage, som är skriven för att specifikt fungera för flytande eller responsiva layouter.
Elastislide
Vill du ha en karusell som automatiskt anpassas till skärmstorlek när webbläsarfönstret ändras eller när du befinner dig i en mindre skärm? Elastislide är det lämpligaste jQuery-pluginet för dina behov.
Responsive CSS3 Slider
Detta är en ren responsiv CSS3-reglage som enkelt kan anpassa sig till skärmstorlek och skärmupplösning. Det fina med den här skjutreglaget är att pilarna går in i lådan när skärmens storlek är tillräckligt liten. Ingen JavaScript behövs.
ResponsiveSlides.Js
ResponsiveSlides.Js är ett mycket enkelt och extremt lätt (endast 1Kb) jQuery-plugin som skapar en responsiv reglage med oordnade listor. Den fungerar på ett brett spektrum av webbläsare, även på IE6 och upp.
Övriga
[Tillbaka till toppen]
Adaptiva bilder
Adaptive Images är ett onlineverktyg för responsiv webbdesign, som upptäcker besökarnas skärmstorlek och skapar, cachar och levererar uppskalade bilder baserat på skärmstorlek och upplösning.
FitText.Js
FitText.js är ett litet JavaScript-verktyg, vilket möjliggör automatisk ändring av text och rubriker när webbläsarfönstret ändras. Inga fler bekymmer om att textstorlek matchas med det här verktyget ombord.
FitVid.Js
Vill du skifta in de inbäddade videoklippen när webbläsarfönstret ändras eller enheten har mindre upplösning? FitVid.Js kan hjälpa dig att uppnå detta. Det är ett lätt, enkelt, lättanvänt jQuery-plugin som används för att uppnå inbyggda videoinsatser med fluidbredd.
Näthinnans bilder
Retina Images är en fantastisk javascript-lösning som automatiskt kan tjäna @ 2X större bilder med hög upplösning när de ses på näthinnans skärm. Allt du behöver göra är att lägga en högupplöst upplösning av varje enskild bild, och det kommer att hantera resten.
Seamless Responsive Photo Grid
Seamless Responsive Photo Grid visar bilderna kant mot kanten i webbläsaren, utan några luckor mellan bilderna. Bilderna är sida vid sida och de strömmar från vänster till höger hela sidan i kolumnerna. Antalet kolumner anpassas därefter när webbläsarfönstret ändras.
SlabText
SlabText är ett jQuery-plugin eller verktyg av Brian McAllister baserat på algoritmen för slabText, som delar upp rubrikerna i rader innan du ändrar storlek på varje rad för att fylla det lediga utrymmet. Det är ganska lik FitText.Js plugin i åtgärd.
Zurb - ResponsiveTables
Har du någonsin undrat hur man hanterar de stora datatabellerna i responsiv design? Zurb, en CSS / JS combo ger dig svaret; Det tar data tabellerna och ändrar dem så att de inte bryter mot den responsiva layouten på mindre skärm enheter.
Categorizr
Categorizr är ett mycket litet PHP-skript, som ger dina besökare en mer målinriktad webbupplevelse. Det hjälper dig att leverera enhetsspecifika mönster för Tablet, TV, Mobile eller Desktop.
Media Query Bookmarklet
Media Query Bookmarklet visar vilken storlek det aktuella visningsporten har och vilken mediefråga som bara avfyrades för den.
Den Responsive Calculator
Den Responsive Calculator är ett mycket enkelt onlineverktyg som kan hjälpa dig att vända pixlar till procentandelar när du utformar din lyhörda webbplats.
Upp Nästa vecka
I den andra veckan i den här serien kommer vi att lägga till dig handledning som verkligen får dig till Responsive Web Design (RWD).
Missa inte det.
