21 fantastiska verktyg för responsiv webbdesign
Som webbdesigner vet vi att responsiv webbdesign hade kommit för att stanna. Du har tagit dig tid att bygga en mycket vacker och robust webbplats, med ett stort antal trafik till din webbplats från sökmotorer. Sedan kommer du till verkligheten av enheter. Vilken enhet kommer att användas för att öppna din webbplats?. Hur är det med enhetens höjd och bredd? Det finns tusentals enheter, tillsammans med flera dimensioner och visningsportar.
Som webbdesigners vet vi att vår design kommer att ses från olika enheter och webbläsare, och samtidigt kommer våra kodblock att exekveras av olika enheter.
Det hade skett en enorm ökning av antalet webbaktiverade enheter, med mycket pixeltäthet, interaktion, upplösning och så vidare, även att döma av de nuvarande trenderna inom teknik, kommer det att finnas fler enheter med vilka människor kan komma åt webben.
Det faktum att responsiv webbdesign är nödvändig för varje webb betyder inte att det är så enkelt, med tanke på att du måste ta hänsyn till flera enheter samt dimensioner och vyportar. Utmaningen är att vi måste skapa ett gränssnitt som kan skalas med praktiskt taget alla enheter, från små skärmar till stora skärmar i teatersalen.
Detta gjorde det helt enkelt absolut nödvändigt för alla webbplatser att vara lyhörda för olika enheter för enkel navigering och bättre användarupplevelse.
Om du har sett ett av våra tidigare inlägg om användbar verktygslåda för responsiv webbdesign, då vet du att det finns så många verktyg på webben för responsiv webbdesign. Men från min många års erfarenhet som webbdesigner, utvecklare och konsult, tillsammans med grundlig research som jag hade gjort, kommer jag att dela med mig av 21 fantastiska verktyg och resurser för responsiv webbdesign. Kom ihåg, för designers som ännu inte har kommit överens med responsiv webbdesign. Jag rekommenderar att du läser Viktigt och skäl för responsiv webbdesign, du kan också ställa din fråga, så kommer en expert att svara dig via din e-postadress. Därefter kan du fortsätta här med 21 bra verktyg för responsiv webbdesign.
01 ZURB Foundation
ZURB Foundation är ett av världens mest accepterade och avancerade ramverk för en responsiv webbplats. Mycket resurser hade lagts ner av ZURB på ramverket, utöver de många ansträngningar som hade gått till öppen källkodsprojekt på ramverket.
ZURB Foundation har en enorm förbättringsstrategi, eftersom du tillåts öka lagret i komplexitet baserat på storleken på skärmen och designmöjligheter. Inte bara det, du kommer också att hitta ett omfattande bibliotek som består av flera UI-komponenter, vilket gör det enklare för dig att prototypa vilket gränssnitt du kan tänka dig.
02 Jetstrap
Det hade skett en massiv vändning i designprocessen, eftersom wireframe inte kommer att visa hur en viss design kommer att se ut i flera webbmiljöer. Och kunskap om kodning krävs för att använda vissa prototypverktyg.
Det är här Jetstrap kommer. Det låter designern snabbt sätta ihop prototyper genom att helt enkelt dra och släppa komponenter från användargränssnittet till arbetsytan. Frontend-utvecklingsförmåga krävs inte för att börja, och du kommer att sluta med en webbsida som andas. Du behöver bara använda dra och släpp-verktygen i gränssnittet.
03 Responsive Design Weekly
Webbutvecklaren Justin Avery lägger tid på att skicka dedikerade nyhetsbrev om resurser, verktyg och tekniker för responsiv webbdesign. Som designer spenderar jag en del av min tid på twitter och läser feeds på responsiv webbdesign. Några av flödena involverar de senaste resurserna och användbara tips för att bygga en responsiv webbdesign. Att gå med i responsiv webbdesigndiskussion från LinkedIn kommer säkerligen att förbättra din skicklighet och ge dig de senaste idéerna om aktuella trender inom responsiv webbdesign.
04 Style Prototyp
Stilprototyp är en HTML-sida som visar knappstil, typografi, färg, fotografistil, roll-over och andra element för en förslagsplats.
Ett av huvudsyften med stilprototyp är att skapa leveranser som är användbara och replikerbara. Även om det inte finns några regler för att bygga en stilprototyp, måste du inkludera några grundläggande element, som knappstil, typografi, färg och roll över från andra element som kan inkluderas.
Style prototyp låter dig lägga till animationer, färg och andra element i webbmiljön.
05 Elementcollage
När vi skapar helsidesmock-ups är en av de svåraste sakerna vi måste möta som designer att utforma minuten för varje sida. Professionellt är det lämpligt att lägga mer tid på att designa hjältemeddelanden på hemsidan än att spendera mer tid på resten av sidorna.
Som designer är det inte tillrådligt att skapa dina webbplatsmockups i Photoshop med nuvarande trender inom webbutvecklingsbranschen, eftersom du har många andra saker att göra.
Grundaren av byrån SuperFriendly Dan Mall hade gått ett steg längre i att förenkla saker med Element Collages.
Element Collages har ett mycket bra användargränssnitt för visuell utforskning av gränssnittskomponenter. Collage hjälper dig i den visuella riktningen, och du behöver inte skapa hela komponenten själv, med tanke på att du inte designar för bara en enhet.
06 Päron
Några viktiga fördelar med frontend-stilguider innebär att det möjliggör enklare testning, bättre arbetsflöde, delat ordförråd och fungerar som referens att återkomma till. Pears är ett WordPress-tema med öppen källkod skapat av Dan för att skapa guide till frontend-stil.
Pears gör det enkelt för designers att använda gemensamma bibliotek för ett konsekvent designsystem.
07 Icomoon
Retina och andra högupplösta skärmar håller snabbt på att bli dagens ordning, bitmappsikoner skalas inte särskilt bra med dessa högupplösta enheter. Tack och lov är webbutvecklingsbranschen lika med uppgiften.
Den effektiva lösningen på detta är att skapa en upplösningsoberoende ikon, vilket kan uppnås genom att skapa anpassade ikonteckensnitt och bädda in det med CSS @font-face.
Iconmoon gör helt enkelt processen att skapa och visa ikontypsnitt enkelt. Du kommer att kunna välja från ett bibliotek med ikoner, med alternativ för att ladda upp din ikon. Därifrån kan du sedan skapa ditt anpassade ikontypsnitt och ladda ner ett paket som innehåller typsnittet och lämplig CSS. När det gäller att skapa upplösningsoberoende ikon är Iconmoon ett viktigt verktyg.
08 Foresight.js
Olika enheter har olika sätt att visa bitmappsbilder, men som designer måste du ha i åtanke att att ladda högupplösta bilder kan öka sidvikten. Foresight.js detects har förmågan att upptäcka enhetsvisning och anslutning för att avgöra om högupplösta komponenter ska laddas eller inte.
09 Detektor
Enhetsdetektering och profilering kan vara knepigt ibland, eftersom enhetsbibliotek är svåra att hantera. Eftersom funktionsdetektering är beroende av detektering på klientsidan, så enbart beroende på det kan det medföra en viss begränsning i flexibilitet när funktionalitet levereras till ett brett utbud av enheter.
Detta leder till skapandet av detektor av Dave Olsen, med hjälp av PHP-skript, och webbläsare baserad på Javascript, tillsammans med en mängd funktionsdetekteringsbibliotek. Biblioteket användare modernizr och user-agent upptäckt för att bestämma enhetsklasser. Detector har förmågan att anpassa sig till nya enheter och webbläsare på egen hand utan att behöva hämta från central databas med webbläsarinformation.
10 Enquire.js
Varje designer vet hur viktigt det är att använda mediafrågor i CSS. Vad händer då när du vill ändra några upplevelser vid en viss punkt? Dessa kan enkelt utföras Enquire.js-skript.
Enquire.js-skriptet använder matchmedia för att villkorligt köra vissa funktioner, och ladda vissa skript om vissa villkor är uppfyllda. Med detta kan du förvänta dig bättre användarupplevelse och enkelt från användarna.
11 SocialCount
Att ladda dela widgets för sociala medier som Facebook, Twitter och Google tar 19 HTTP-begäran widgets och lägger till ytterligare 246,7 KB till sidvikten, vilket ofta ökar tiden för webbsidor att ladda och förbrukar mer bandbredd.
Zach Leatherman åtgärdade det genom att skapa lättviktslösning, kallad social count.Det är ett litet skript som lata laddar sociala widgets, så att användare inte straffas alls.
12 FitVids
Flera medieobjekt, inklusive videor, är olika när de jämförs med bilder, i den meningen att de inte bibehåller en del av sitt bildförhållande efter storleksändring. Detta skapar ett skalningsproblem när du tittar på video från en mängd olika webbaktiverade enheter.< br/> Chris och annan designer lyckades utveckla en plugin som heter FitVids.js. plugin-programmet kan upptäcka och använda korrekt förhållande mellan video eller något annat medieobjekt när du ändrar storlek. Med detta kan du få korrekt storleksförhållande när din video ändras, och som ett resultat få fint visade medieobjekt inklusive videor i dina applikationer.
13 IE-vänlig mobil-först CSS
Varje designer vet hur viktigt mediefrågor är, men faktum är att Internet Explorer inte stöder mediefrågor. Samtidigt kan du som designer inte bestämma dig för att avskaffa mediafrågan, bara för att du vill stödja gamla IE. Detta problem kan lätt övervinnas med hjälp av Sass. Sass kommer att hjälpa oss att skapa mobil-först stilar, och samtidigt tillhandahålla lämpliga skrivbordsstilar till gamla versioner av IE.
14 jobb.
Om du som designer kollar online för att söka efter testverktyg för viewport, kommer du att hitta många testverktyg för viewport. Men problemet där är att de flesta av viewport-testverktygen är beroende av populära enhetsbredder som 320, 768, 1024 och så vidare.
Ish klassificera och ta fram allmänna intervall (small-ish, medium-ish, large-ish, etc) bara för att se till att du tar fram det allmänna upplösningsspektrumet.
15 Proportionella mediafrågor
Vissa designers använder fortfarande pixelvärden för att ställa in brytpunkter, medan vi har använt bredder, mått och teckensnittsenheter i förhållande till olika enhetssynpunkter. En bra handledning gavs av Lyza Gardner som förklarar hur vi kan använda relativa enheter för brytpunkter för att skapa bättre användarupplevelse.
16 MQTest.io
Som designer kan det ibland vara skrämmande att spåra mediafrågor som en viss webbläsare stöder. Detta löses enkelt genom att använda MQTest.io utvecklat av Viljami Salminen. Verktyget hjälper dig att känna igen och analysera olika mediefrågor som olika webbläsare svarar på. Med detta kanske du också kan använda mediefrågor som inte är vanligt förekommande.
17 Sparkbox media query bookmarklet
Sparkbox är ett bokmärke för mediafrågor som hjälper till att bestämma frågor för aktuella media eller media som används. Det är absolut nödvändigt för designers att ha tillgång till skärmdimensioner, eftersom det sparar tid och även hjälper till att bestämma proportionella mediafrågor.
18 BrowserStack
Som designer vet vi hur dyrt, utmanande och till och med skrämmande det kan vara när det gäller att testa i en representativ hög med webbläsare och enheter. Detta är enkelt att lösa när vi använder BrowserStack.
Webbläsarstack ger fjärråtkomst till flera enheter och miljöer, vilket gör att du kan göra vissa kvalitetssäkringstestningar. BrowserStack är lika imponerande som något annat som det också är effektivt när man testar gamla versioner av Internet Explorer.
19 Mobitest
Prestanda är en av de viktigaste aspekterna av webbdesign. Med Mobitest kommer du att kunna se hur dina designs presterar med lite analys.
När du testar din design på Mobitest behöver du bara ange en webbadress, varefter verktyget visar sajten på en riktig enhet, och ger dig samtidigt massor av prestandastatistik, då du också kommer att kunna veta belastning tid och genomsnittlig sidstorlek tillsammans med annan statistik.
20 Adobe Edge Inspect
Vikten av att testa på en riktig enhet kan inte understrykas för en webbdesigner, eftersom du måste se och analysera vilken typ av prestanda din design kommer att ge en användare innan publicering. En Adobe Edge Inspect hade gjort testning på riktig enhet mycket enkel och okomplicerad, eftersom du har verktyget som automatiskt uppdaterar alla anslutna enheter. Du kan också testa kod på många olika enheter.
21 Codepen Pro
CodePen är ett verktyg som snabbt hjälper till att demonstrera responsiva mönster och tekniker. Det är ett verktyg som också hjälper till att prestera våra designs på olika enheter och datorer, medan du fortfarande skriver.
CodePen är ett kraftfullt verktyg som hjälper dig att se resultatet av din kod på flera enheter och datorer medan du skriver.
Slutsats
Alla de 21 verktyg som nämns ovan är bra för responsiv webbdesign. Men vart och ett av verktygen har olika funktionalitet, personligen har jag ingen preferens, eftersom alla verktyg är effektiva, dock med olika gränssnitt och funktionalitet. Valet är ditt.