FROONT: Design din webbplats i ett svarande gränssnitt och få koden

Annons

Det är inte särskilt bekvämt för en webbutvecklare att testa sin webbdesign på en dator för att upptäcka att designen är buggy när den ses från en smartphone. Här för att hjälpa dig att ta upp denna fråga i utvecklingsfasen är en app som heter FROONT.

FROONT är en fri att använda webbtjänst som låter dig designa webbplatser i ett lyhörd gränssnitt. Du börjar använda webbtjänsten genom att skapa ett konto på webbplatsen. Nästa steg är att börja med en ny duk, även om du kan testa webbplatsen med sin demosida också. På duken hittar du kontroller i den vänstra rutan som låter dig lägga till behållare, galler, text, bilder och vektorer. Du kan klicka på den elementtyp du vill lägga till.

froont

Det kan vara en liten fördröjning mellan ditt klick på knappen och elementet som faktiskt visas på sidan - det vill säga elementets laddningstid. När elementet är närvarande på sidan kan du klicka på det för att det ska markeras.

froont

Med ett element valt, hittar du dess hierarki låda flytande precis där på sidan. I den här flytande hierarkikrutan kan du enkelt ta bort eller tas till ett visst element. För att redigera element, allt du behöver göra är att dubbelklicka på objektet. Föremålen kan också ändras så att de passar dina egna designpreferenser. För textfält kommer ett gäng alternativ att visas i ett mini-flytande fönster som låter dig lägga till speciell formatering på texten.

FROONT: Designa din webbplats i ett responsivt gränssnitt och få kodalternativen

När du är redo att göra ändringar på sidan kan du få CSS och HTML-koden för siddesignen. Du kan också dela webbadressen till sidorna du skapar för att dela mönster med dina vänner och medarbetare.

FROONT: Designa din webbplats i ett responsivt gränssnitt och få kodkällan

Medan du redigerar dina mönster kan du helt enkelt ändra storlek på webbläsarfönstret för att se hur din sida kommer att se ut i en webbläsare med mindre dimensioner på exempelvis en smartphone.

Funktioner: