Responsive design har skapat en helt ny lista över utmaningar för webbdesigners som har bestämt sig för att ta steget och lämna statisk design bakom. Att skapa en layout som fungerar bra på en, men inte flera, eller till och med alla möjliga bredder kräver tålamod, kreativitet och naturligtvis massor av testning.
Ingenting ersätter att du kontrollerar din design på de verkliga enheterna du riktar in, men när du bygger är det trevligt att kunna få en snabb titt på layouten i olika bredder direkt på din dator. Du kan ändra storlek på ditt webbläsarfönster manuellt, men det blir löjligt tråkigt om du skjuter för exakta pixeldimensioner. Lyckligtvis har flera begåvade utvecklare redan byggt några bra verktyg för att hjälpa dig i denna process. Följ med oss idag när vi tittar på tre av dem.
Vänta, varför behöver jag dessa?
Om du är ny på konceptet med lyhörd webbdesign, kanske du är förvirrad om varför följande verktyg är användbara. I grund och botten är målet bakom lyhörd design att bygga en webbplats som anpassar sig och utvecklas till olika visningsstorlekar. Så istället för att bygga en webbplats som fungerar bra på skrivbord, en annan för mobil och en tredjedel för tabletter skapar du en enda layout som svarar bra på alla dessa scenarier.
För att dra av det måste du självklart kunna se din layout på flera olika bredder. Jag rekommenderar personligen att designa för alla möjliga bredder istället för att bara rikta in populära bredd på en bredd, men det är definitivt en bra idé att försöka få en känsla för den layout som användare av vissa enheter ser. Följande verktyg hjälper dig att förenkla detta arbete.
Respondatorn
Respondatorn är förmodligen det enklaste sättet att få en snabb titt på din layout på populära enhetens bredder. Det är snabbt, det är enkelt och erfarenheten har utformats så att alla kan omedelbart berätta vad som händer. Detta är ett viktigt begrepp som vi inte har berört än. Ibland behöver du visa upp din lyhörda design till din klient, och verktyg som detta förenklar processen dramatiskt.
Anledningen till att den här webbplatsen kommunicerar konceptet med lyhörd design så bra är att den använder silhuetter av populära enheter, inom vilka webbplatsen du väljer kommer att visas.
För att komma igång behöver du bara skriva in webbadressen till en webbplats som du vill testa. Det behöver inte vara en webbplats du äger, så det här är också ett bra sätt att undersöka vilka andra designers som har gjort. För detta exempel kastade jag på United Pixel Workers hemsida.
Härifrån bläddrar du helt enkelt ner sidan och ser förhandsgranskningar av layouten i alla tillgängliga enheter. Dessa förhandsgranskningar är levande och kan rullas, klickas osv. Rekkevidden av förhandsgranskningar här är ganska imponerande, inte bara har de inkluderat större enheter som iPads, de har också kastats i vanliga bredder som används över flera enheter som "crappy Android? exempel nedan.
Respondatorn är det enda verktyget som jag har sett som faktiskt tar hänsyn till programvaru-användargränssnittet. Till exempel, i stället för att visa din webbplats till fullo 1024 x 768 för en horisontell iPad, reserverar de faktiskt de översta 125 pixlarna eller så för den mobila Safari-webbläsaren.
Innan vi går vidare till nästa verktyg, här är en snabb översikt över fördelarna och nackdelarna med den här appen.
Respondator Pros
- Nästan enkelt, klistra in bara i en länk och bläddra
- Massor av olika förhandsvisningar av enhetsenheter
- Trevlig visuell representation som kunderna förstår
- Programvaran UI-dimensioner redovisas tydligt
Respondator Cons
- Måste ladda flera instanser av varje sida
- Inget sätt att utforska storlekar som inte är listade
Responsive.is
Nästa verktyg på listan är Responsive. Konceptet här är detsamma som tidigare, sa webbplatsen ett snabbt sätt att se din layout på flera olika bredder. Emellertid är tillvägagångssättet väsentligt annorlunda.
Till att börja med finns det ingen enhetssilhouetter. Det finns en liten verktygsfält längst upp på skärmen, men resten är reserverad för en förhandsgranskning av en enda webbplats som ändras enligt din valda enhet. Det här är lite mer praktiskt eftersom det eliminerar den till synes oändliga rullningen samt laddningen av flera förhandsgranskningar, men en del av uppenbarheten av det som händer är förlorad i processen. Det minsta gränssnittet är riktigt trevligt, men jag uppskattade mycket efter att ha spenderat mycket tid med Respunkens skrymmande silhuetter.
Responsive.is levereras faktiskt med en meny som innehåller inbyggda mottagliga platser för testkörning så att du kan få en känsla för hur tjänsten fungerar (jag använde Food Sense). Om du vill testa en annan webbplats, skriv den helt enkelt in i rutan.
Verktygsfältet upptill ger dig sex olika alternativ för visningsstorlekar, som var och en representeras av en liten ikon: skrivbord, tablettlandskap, vertikal vertikal, smartphonelandskap, smartphone vertikal och automatisk.
Som du förväntar dig, klickar du på en enhet förhandsgranskning av webbplatsen vid den bredden. Jag gillar verkligen hur förhandsvisningen har hanterats här. Den fullständiga platsen visas med den angivna bredden, men allt utanför synlig del av visningsporten mörknar.
Min största peeve här är att de faktiska enhetens bredder inte är riktigt angivna. I stället för pixeldimensioner lämnas du bara med generiska ikoner. Eftersom detta är fallet är denna webbplats definitivt mer för generaliserade tester än specifika omständigheter (även om du kan mäta olika storlekar själv).
Responsive
- Ren, minimal gränssnitt som fokuserar på innehållet
- Endast en instans av testplatsen laddas
- Du behöver inte bläddra, klicka bara på en ikon för att ändra visningsporten
- Inbyggda testalternativ
Responsive. Nackdelar
- Du är begränsad till sex generiska visningsportar
- Inga specifika dimensioner listade
- Kan vara svårare för kunder att räkna ut än Respondatorn
Responsivepx
Hittills har alla verktyg som vi sett sett tvinga dig till förinställda dimensioner för testning. Om du inte gillar teststorlekarna eller helt enkelt vill lägga till en annan, tuff! Det finns inget sätt att göra det. Så vänder du om du bara vill diktera dimensionerna för testet? Svaret är en webbplats som heter Responsivepx.
Här har vi en enkel välkommen skärm med några instruktioner och en länk till en handledning video. För att börja, ange bara en URL i rutan högst upp till höger. Responsivepx är fantastiskt genom att det gör att du kan testa lokala webbplatser som finns på din dator och jobbar för närvarande. Vi använder Bryan Connors webbplats som ett exempel för detta test.
När du väl har skrivit in en webbplats, är det dags att ändra dimensionerna via verktygen längst upp på skärmen. Som du kan se i bilden nedan, finns det inga förinställda storlekar denna gång. Du kontrollerar helt och hållet dimensionerna av förhandsgranskningen genom att antingen skriva in i ett nummer eller använda skjutreglagen.
När du ändrar tweak inställningarna uppdateras webbplatsförhandsgranskningen för att återspegla dessa ändringar. Den visas på ett genomskinningsnät som liknar Photoshop.
Enligt min uppfattning är Responsivepx överlägset det mest användbara alternativet för utvecklare som arbetar på sin egen mottagliga webbplats. Det finns ett antal skäl till detta. För det första är det speciellt skapat för att hjälpa dig att hitta brytpunkter baserat på din unika design. Du kan ladda upp en design, flytta bredden till en punkt där layouten inte längre fungerar, ta sedan in de specifika pixelvärdena som anges för att infoga i din mediefråga. När du har redogjort för ändringarna, spara filen, uppdatera förhandsgranskningen och du är redo att attackera din nästa brytpunkt. Återigen är det faktum att det fungerar med lokala filer verkligen till nytta här.
När du anger testfall och ändrar inställningar uppdateras adressen i webbläsarens webbadress för att återspegla dessa ändringar, vilket gör det super lätt att dela ett specifikt testfall med kollegor.
Med tanke på att den här appen är ett bra sätt att bestämma potentiella brytpunkter, skulle jag gärna vilja se en knapp som medger en mediefråga baserat på den aktuella visningsstorleken. Det skulle verkligen göra Responsivepx ett mördare verktyg för lyhörda designers.
Responsivepx Pros
- Du bestämmer förhandsvisningsdimensionerna
- Perfekt för att hitta brytpunkter
- Fjärrkontroll och lokal testning
- Lätt att dela specifika testfall
Responsivepx Cons
- För det mesta för utvecklare, använd ett annat alternativ för kunder
- Verktygsfältet kan använda något arbete
Slutsats
Du har nu tre nya vapen i din lyhörda webbdesign arsenal. Alla dessa webbplatser har sina särskilda styrkor och är värda bokmärken för senare. Respondatorn låter dig snabbt och enkelt simulera massor av olika enheter och kan vara bra för att hjälpa kunderna att bryta sig om vad du försöker uppnå. Responsive.is är ett anständigt sätt att få en allmän känsla för hur en responsiv layout utför på olika genrer av enheter. Det är inte bäst för specifika teständamål, men det kan vara användbart för ett snabbtest. Slutligen är Responsivepx det ultimata verktyget för att hitta idealiska brytpunkter för din design. Du tar kontroll över de exakta pixeldimensionerna och kan testa lokala filer som du för närvarande arbetar med.
Har du provat något av verktygen ovan? Vad tycker du om dem? Hur kunde de förbättras? Också vara säker på att meddela oss om andra liknande verktyg som du har hittat.
Stockbilder från: Bigstock.