De 5 bästa verktygen för responsiv design
Låt mig börja med att säga detta, jag kommer inte att inkludera några verktyg för pek och klicka i den här listan (tänk Adobe Edge Reflow). Anledningen är enkel nog, jag tror att de är dåliga för alla; designers, klienter, kodare ... alla lider.
Det handlar inte om kvaliteten på kodutgången av dessa program. Det är inte för att det gör designen "för lätt". Det är för att oavsett hur bra dessa program är, kommer de alltid att begränsa de personer som använder dem.
De kommer att vara begränsade, inte ens av vad programmet kan åstadkomma, utan av vad de tycker det kan utföra. Om de tänker på det, kommer den genomsnittliga användaren sannolikt att jämföra den med verktyg som PowerPoint och / eller ett antal printdesignprogram, som åter faller i gamla tankar. Där ligger problemet. Visuella webbpubliceringsverktyg kommer alltid att försöka tillämpa gamla processer på ny teknik.
Ett riktigt webbinriktat arbetsflöde är ett som omfattar de underliggande koncept och teknik som webben bygger på. Visst kan du använda ett visst antal visuella verktyg för att skapa webbplatser som är tekniskt mottagliga, men du saknar poängen.
Det handlar inte om en anpassningsbar layout. Det handlar om att göra information tillgänglig för så många människor som möjligt. Det finns några saker som ett program som Edge Reflow bara inte kan göra. Kort sagt, du måste skriva kod.
Därför är de bästa verktygen för att hjälpa dig med responsiv design de verktyg som hjälper dig att förstå och utnyttja webteknologi, planera din webbplats noggrant, skriva bättre kod mer effektivt och testa / presentera dina lyhörda mönster för kunder i kontext.
Låt oss börja med det uppenbara:
1) Din webbläsare
Nej, jag skojar inte. Det här är helt bokstavligen det viktigaste verktyget du har, för att det visar dig exakt vad din webbplats ser ut under dina specifika förhållanden.
Det har varit mycket debatt om huruvida design i webbläsaren är bättre än att utforma i en bildredigerare som Photoshop eller GIMP. Låt mig lösa detta för dig ...
Är dina webbplatsens användare kommer att surfa i Photoshop? Bildredigerare kan göra vackra bilder, inte efterlikna verkliga upplevelser. Använd bildredigerare för att redigera bilder. Använd din webbläsare för att designa webbplatser.
Det är dags att avvika våra kunder från de hyper-detaljerade mockups som de har blivit vana vid. När webben ändras och våra processer blir mer flytande och iterativa måste vi gå vidare.
Installera minst en webbläsare med varje större återgivningsmotor och få några utvecklarutvidgningar. Vänja dig vid din källkod så som din webbläsare ser det, för att du ska vara här en stund.
2) Google Drive ritningsapp
Tekniskt sett kan bara en vektorbaserad bildredigerare göra jobbet när du inramar dina webbplatser och appar. Jag brukar koppla in den stationära versionen av min webbplats först, skapa en kopia av filen, ändra storlek på duken och gå därifrån. Att använda vektorer gör det enkelt att snabbt ändra storlek och omorganisera dina element medan du fortfarande är i planeringsstadiet.
Jag föredrar ritningen app på Google Drive av ett par skäl:
Delnings- och samarbetsfunktioner: Google delar information bättre än bara om alla andra. Med in-context-kommentar, samtidig redigering och Hangout-integration, är jag kär.
Automatiska guider: I varje ritningsdokument skapas guider automatiskt baserat på måtten på varje objekt du lägger in i dokumentet. Detta gör det enkelt att avbilda element i konsekvent storlek i dokumentet, vilket är bra för gridobsatta designers som jag.
Eftersom jag delar dessa trådramar med kunder är den professionella konsistensen ett stort plus. Och ändå är jag inte begränsad till dessa guider. Jag ser det som ett bra alternativ för att mockup appar som försöker begränsa dig till ett nät.
Åh, och det är gratis. Behöver jag säga mer?
3) Stil Prototyper
Baserat på stilplattor, Stil Prototyper är en levererbar webbläsare utformad för att hjälpa dig att ge dina kunder en uppfattning om hur deras webbplats typografi, färg och användargränssnitt kommer att se ut. Eftersom det är meningen att det ska ses i webbläsaren kommer det att finnas färre inkonsekvenser när webbplatsen är byggd.
Vidare skulle jag vilja att Style Prototypes kan hjälpa våra kunder att mentalt skilja upp begreppen UX och estetik. Och det kan bara vara bra att allt som hjälper våra kunder att bättre förstå webbdesignprocessen.
4) Respondator
Responsinator är ett enkelt verktyg som visar din webbplats i olika storlekar. Det imiterar, på ett mycket grundläggande sätt, flera olika enhetsstorlekar och kontekster. Det här verktyget är inte till din fördel. Vill du se hur din webbplats ser ut i mindre storlekar? Ändra storlek på ditt webbläsarfönster. Bättre än, få några faktiska mobila enheter och gör några riktiga test.
Den här webben används bäst för att visa dina kunder en snabb approximation av hur deras webbplats kommer att se ut i andra sammanhang än en stationär eller bärbar bildskärm.
Återigen finns det många verktyg som kan göra samma jobb som Responsinator, och lika effektivt antar jag. Jag valde den här eftersom den presenterar flera enhetssilhouetter efter varandra, för enkel inspektion.
5) Adobe Edge Inspect
Nu är det här för dig. Om du har ett mobiltestlaboratorium (och ju tidigare du kan göra en, desto bättre) Kanten inspekterar kommer att synkronisera alla dina enheter för att visa samma sida samtidigt. Uppdatera sidan på en enhet, och du uppdaterar dem alla.
Till skillnad från de andra på den här listan är det här inte gratis. Men om du har råd med tillräckligt med mobila enheter för att behöva en lösning så här är det förmodligen värt pengarna.
Slutsats
Som alltid är din viktigaste tillgång din hjärna. Dessa verktyg, och andra som dem, kan bara hjälpa dig på din väg. Jag valde dessa eftersom de utför mycket specifika funktioner som hjälper mig att designa responsiva webbplatser. De begränsar inte vad jag kan göra.
De bästa verktygen är verkligen de som håller sig ur vägen.
Använder du dessa verktyg? Vilka är dina 5 bästa verktyg för responsiv design? Låt oss veta i kommentarerna.