8 Nøkkelverktøy for å maksimere trafikken til nettstedet ditt.

Ifølge en undersøkelse fra Verdensbanken har rundt 75 prosent av mennesker over hele verden tilgang til mobile enheter. CNET rapporterer at abonnement på mobilkommunikasjonstjenester vokste fra 1 milliard i 2000 til over 6 milliarder i 2012. På grunn av den raske utvidelsen av mobiltelefonbruk, er det nå mer kritisk enn noen gang at nettsteder fungerer på flere plattformer. Bruk disse åtte verktøyene for å forbedre ditt responsive webdesign og maksimere antall personer som kan se og klikke gjennom nettstedene dine.

8. Adobe Edge Inspection

Oppdatert og utgitt i 2013 med ny branding som binder den til Creative Cloud, lar Adobe Edge Inspect deg forhåndsvise webdesignene dine for å se hvordan de ser på ulike plattformer. Hovedattraksjonen til Edge er evnen til å spare tid ved å se endringer på tvers av plattformer i sanntid.

Dette verktøyet gjør det mulig å synkronisere datamaskin og mobilenheter. Ved å gjøre dette kan du bla gjennom og inspisere webdesign på flere plattformer på en gang. Også når du gjør endringer i webdesignet og feilsøker det, vises ditt arbeid med en gang på enheten, så lenge du arbeider med Java, CSS og HTML-koding.

7. Skjelett

Dette selskapsbuntet av CSS-filer muliggjør sømløs utvikling av nettsider som ser elegant ut om den vises på en stasjonær skjerm eller en liten glødende skjerm i hånden. Betraktes som en brukervennlig boilerplate for responsivt webdesign, er Skjelett passende navngitt fordi det skaper et rammeverk som utvides og kontrakterer i henhold til brukerens størrelse. Mens den inneholder grunnleggende designelementer, er den fleksibel nok til at designere kan ta med seg mer sofistikerte stiler.

6. Responsive Wireframe

Fakturert som et eksperimentelt verktøy som bruker lydige webdesignteknikker, bruker Responsive Wireframe HTML / CSS til å gi et overleggsnett som lar deg se desktop og mobile visninger av designet. Ideen med dette verktøyet er å gjøre det enkelt å designe i nettleseren. Mens noen designere kan argumentere for at disse wireframes knuser kreativitet, sier andre at det er en rask og enkel måte å lage design som fungerer på tvers av plattformer. Ved hjelp av dette verktøyet sparer du tid når du tester design ved å bruke de lydige trådene for å se hvordan de ser på bærbare datamaskiner, skrivebord og mobiler.

5. Style Tiles

Mer konkrete enn et humørbrett, men mindre statisk enn en faktisk mockup, lar Style Tiles la designere vise klienter forskjellige websidelayouter. Ved å presentere flisene, unngår designere å gjøre flere ferdige versjoner.

Disse kaskende fliser utstiller design uten å tilpasse dem til en hvilken som helst enhet, noe som gjør dem enkle å lage design og dele dem med klienter før man tar hensyn til de mange hensynene som er knyttet med responsiv design. Med andre ord gir denne tilnærmingen designere frihet fra dimensjonsbegrensninger. Et søsterprodukt av Style Tiles, "Component Style Guide" gir råd om hvordan du tar design og gjør det til å fungere på tvers av plattformer som iPhone og den nye Blackberry 10-smarttelefonen.

4. Den reagerende kalkulatoren

Ved hjelp av prosenter gir denne kalkulatoren deg de dataene du trenger for å omforme en PSD-design til et element for ditt responsive webprosjekt. Du legger inn seks felt, og deretter klikker du på "Send forespørsel." Velg grenser, marginer og polstring på PSD med denne kalkulatoren.

3. Wookmark

Dette er en plugin for jQuery som tar komponentene til en nettside og setter dem i kolonner. Kolonneoppsettet er basert på størrelsen på nettleservinduet. Dette praktiske verktøyet er en utmerket måte å få et nettsted til å reagere på forskjellige skjermstørrelser.

2. ProtoFluid

Med en fordel fordi den er nettbasert, gjør dette verktøyet det smertefritt å se mock-ups av designet med forskjellige oppløsninger og dimensjoner. Nyt å bruke Firebug når du sjekker HTML, CSS, JS og andre elementer for problemer. Tastaturgenveier, en rask bryter mellom forskjellige visninger og ren kode, sikrer hastighet når du bruker dette verktøyet for å teste hvor godt utformingen ser på forskjellige skjermstørrelser, inkludert Nexus, iPhone og iPad.

1. Stiftelse

Dette front-end-rammeverket gir muligheten til å kode smartere og raskere. Blant funksjonene, lar dette verktøyet begynne med å designe for små skjermer. Når du jobber med å bygge ut designen din for større skjermer, hjelper Foundation deg med å trekke opp designelementene. I tillegg gir dette verktøyet deg kule HTML-maler som gir deg et hopp på nettstedet design.

Dra nytte av dette verktøyets fleksible rutenett, responsive layouter og den raske produksjonen av prototyper. Stiftelsens effektivitet og troverdighet er tydelig på listen over nettsteder som bruker den, som inkluderer National Geographic, Pixar og Los Alamos National Laboratories.

Når du ser på å maksimere ditt responsive webdesign, hva er de største utfordringene du står overfor? Hvilke verktøy har vært mest nyttige for deg?

[Bilder via]