8 Nøgledesignværktøjer til at maksimere trafikken til dit websted |

Ifølge en undersøgelse fra Verdensbanken har omkring 75 procent af mennesker over hele verden adgang til mobile enheder. CNET rapporterer, at abonnementer på mobilkommunikationstjenester voksede fra 1 milliard i 2000 til mere end 6 milliarder i 2012. På grund af den hurtige udvidelse af mobiltelefonbrug er det nu mere kritisk end nogensinde, at hjemmesider arbejder på tværs af flere platforme. Brug disse otte værktøjer til at forbedre dit responsive webdesign og maksimere antallet af personer, der kan se og klikke gennem dine websteder.

8. Adobe Edge Inspection

Opdateret og udgivet i 2013 med ny branding, der binder den til Creative Cloud, giver Adobe Edge Inspect dig mulighed for at forhåndsvise dine webdesign for at se, hvordan de ser på forskellige platforme. Edge's hovedattraktion er dets evne til at spare tid ved at se ændringer på tværs af platforme i realtid.

Dette værktøj gør det muligt at synkronisere din computer og mobilenheder. Ved at gøre dette kan du gennemse og inspicere webdesign på flere platforme ad gangen. Da du også ændrer webdesign og fejler det, vises dit arbejde med det samme på din enhed, så længe du arbejder med Java, CSS og HTML-kodning.

7. Skelet

Denne virksomhedsbundt af CSS-filer muliggør sømløs websiteudvikling, der ser elegant ud, om den vises på en skærm eller en lille lysende skærm i hånden. Skelettet betragtes som en brugervenlig kedelplader til lydhurtigt webdesign, fordi det skaber en ramme, der udvider og kontrakterer i henhold til brugerens størrelse. Mens den indeholder grundlæggende designelementer, er den fleksibel nok til at give designere mulighed for at indhente mere sofistikerede stilarter.

6. Responsive Wireframe

Faktureret som et eksperimentelt værktøj, der bruger lydhurtige webdesignteknikker, bruger Responsive Wireframe HTML / CSS til at give et overlay-net, som giver dig mulighed for at se desktop og mobile visninger af dit design. Ideen med dette værktøj er at gøre det nemt at designe i browseren. Mens nogle designere kan argumentere for, at disse wireframes knuse kreativitet, siger andre, at det er en hurtig og enkel måde at skabe design på, der arbejder på tværs af platforme. Ved hjælp af dette værktøj sparer du tid, når du tester design ved hjælp af de lydhårede trådrammer for at se, hvordan de ser på bærbare computere, desktops og mobiler.

5. Style Tiles

Mere konkret end et humørbræt, men mindre statisk end en faktisk mockup, giver Style Tiles let designere kunderne forskellige website layouts. Ved at præsentere fliserne undgår designere at lave flere færdige versioner.

Disse cascading fliser udstiller design uden at tilpasse dem til en hvilken som helst enhed, hvilket gør dem til en nem måde at lave design på og dele dem med klienter, før man tager højde for de mange overvejelser, der er forbundet med lydhør design. Med andre ord giver denne tilgang designere frihed fra dimensionelle restriktioner. Et søsterprodukt af Style Tiles, "Component Style Guide" giver råd om at tage dit design og gøre det til at fungere på tværs af platforme som iPhone og den nye Blackberry 10 smartphone.

4. Den reagerende regnemaskine

Ved hjælp af procentdele giver denne regnemaskine dig de data, du har brug for til at omdanne et PSD-design til et element til dit lydhøre web-projekt. Du indtaster seks felter, og klik derefter på "Send forespørgsel." Vælg grænser, margener og polstring på din PSD med denne regnemaskine.

3. Wookmark

Dette er en jQuery-plugin, der tager komponenterne på en webside og sætter dem i kolonner. Søjlelayoutet er baseret på browservinduets størrelse. Dette praktiske værktøj er en glimrende måde at gøre et websted til lyd for forskellige skærmstørrelser.

2. ProtoFluid

Med en fordel, fordi den er webbaseret, gør dette værktøj det smertefrit at se mockups af dit design med forskellige opløsninger og dimensioner. Nyd at komme i gang med Firebug, da du tjekker din HTML, CSS, JS og andre elementer til problemer. Tastaturgenveje, en hurtig skifte mellem forskellige visninger og ren kode sikrer hastighed, når du bruger dette værktøj til at teste, hvor godt dit design ser på forskellige skærmstørrelser, herunder Nexus, iPhone og iPad.

1. Foundation

Denne front-end ramme giver mulighed for at kode smartere og hurtigere. Blandt dens funktioner, dette værktøj lader dig begynde med at designe for små skærme. Som du arbejder på at udbygge dit design til større skærme, hjælper Foundation dig med at træde op i designelementerne. Derudover giver dette værktøj dig kølige HTML-skabeloner, der giver dig et spring start på webdesign.

Udnyt dette værktøjs fleksible net, responsive layouts og den hurtige produktion af prototyper. Stiftelsens effektivitet og troværdighed fremgår af listen over websteder, der bruger den, som omfatter National Geographic, Pixar og Los Alamos National Laboratories.

Hvad er de største udfordringer, du står over for, når du ser på at maksimere dit lydhørige webdesign? Hvilke værktøjer har været mest nyttige for dig?

[Billeder via]