8 Avaimenmuokkaustyökalua maksimoimaan liikennettä sivustoosi

Maailmanpankin tutkimuksen mukaan noin 75 prosenttia ihmisistä ympäri maailmaa pääsee mobiililaitteisiin. CNET ilmoittaa, että matkaviestintäpalveluiden liittymät kasvoivat 1 miljardista vuonna 2000 yli 6 miljardiin euroon vuonna 2012. Matkapuhelimen käytön nopean laajenemisen ansiosta on nyt kriittisempiä kuin koskaan, että sivustot toimivat useilla eri alustoilla. Käytä näitä kahdeksaa työkalua parantaaksesi reagoivaa verkkosuunnittelua ja maksimoidaksesi niiden ihmisten määrän, jotka voivat tarkastella ja napsauttaa sivustojesi.

8. Adobe Edge Inspect

Päivitetty ja julkaistu vuonna 2013 uudella brändillä, joka sitoo Creative Cloud -palvelun, Adobe Edge Inspect -ominaisuuden avulla voit esikatsella verkkosuunnittelusi ja nähdä, miten ne näyttävät eri alustoille. Edgen tärkein vetonaula on sen kyky säästää aikaa katsomalla muutoksia eri alustoilla reaaliajassa.

Tämä työkalu mahdollistaa tietokoneen ja mobiililaitteiden synkronoinnin. Näin voit selata ja tarkastella web-suunnittelua useilla alustoilla kerralla. Kun teet muutoksia web-suunnitteluun ja suoritetaan virheenkorjaus, työsi ilmestyy välittömästi laitteellesi, kunhan käytät Java-, CSS- ja HTML-koodausta.

7. Skeleton

Tämä CSS-tiedostojen joukko mahdollistaa saumattoman sivuston kehittämisen, joka näyttää tyylikkäiseltä, näkyykö se työpöydän näytössä tai pienessä hehkuvassa näytössä kädessäsi. Pidetty helppokäyttöiseksi hakulausekkeeksi herkälle web-suunnittelulle, Skeleton on nimetty oikein, koska se luo puitteet, jotka laajenevat ja sopimukset käyttäjän kokoon sopiviksi. Vaikka se sisältää peruselementtejä, se on riittävän joustava, jotta suunnittelijat voivat tuoda entistä hienostuneempia tyylejä.

6. Responsive Wireframe

Kokeilutyökalu, joka käyttää reagoivia webdesign-tekniikoita, Responsive Wireframe käyttää HTML / CSS: tä, joka tarjoaa peittorivin, jonka avulla näet työpöytä- ja mobiilinäkymät suunnittelusta. Ajatus tällä työkalulla on helpottaa suunnittelua selaimessa. Vaikka jotkut suunnittelijat saattavat väittää, että nämä rautalangat rikkoo luovuutta, toiset taas sanovat, että se on nopea ja yksinkertainen tapa luoda malleja, jotka toimivat eri alustoilla. Tämän työkalun avulla voit säästää aikaa testatessasi malleja vastausviivapiirroilla, jotta näet, kuinka he katsovat kannettavia tietokoneita, työpöytiä ja matkapuhelimia.

5. Tyylilevyt

Konkreettisempi kuin mielialalevy, mutta vähemmän staattinen kuin varsinainen mockup, Style Tiles antaa suunnittelijoille näyttävät asiakkaille eri verkkosivujen asettelut. Esittelemällä laatat suunnittelijat välttävät tekemättä useita valmiita versioita.

Nämä kasaantuvat laatat esittelevät mallit ilman, että ne sopivat mihinkään laitteeseen, mikä tekee niistä helpon tavan luoda malleja ja jakaa ne asiakkaiden kanssa ennen kuin otetaan huomioon monet asiaan liittyvät näkökohdat reagoiva muotoilu. Toisin sanoen tämä lähestymistapa antaa suunnittelijoille vapauden ulottuvuusrajoituksista. Style Tiles -sisustuotteen "Component Style Guide" antaa neuvoja omaan muotoiluun ja työskentelyyn eri alustoilla, kuten iPhonessa ja uudessa Blackberry 10-älypuhelimessa.

4. Responsive Calculator

Prosenttiosuuksien käyttäminen Tämä laskin antaa sinulle tarvittavat tiedot muuntaaksesi PSD-mallin elementiksi reagoivaan web-projektiin. Syötä kuusi kenttää ja napsauta sitten "Lähetä kysely". Valitse raja, marginaalit ja pehmuste PSD: ssä tämän laskimen avulla. Wookmark

Tämä on jQuery-plug-in, joka ottaa verkkosivun osia ja asettaa ne sarakkeisiin. Sarakkeen ulkoasu perustuu selainikkunaan. Tämä kätevä työkalu on erinomainen tapa tehdä sivusto vastaamaan eri näytön koot.

2. ProtoFluid

Koska sinulla on etu, koska se on web-pohjainen, tämä työkalu tekee siitä kivuttomasti näkemäsi mallineesi malleja eri resoluutioilla ja mitoilla. Nauti Firebugin käytön tarkistamisesta HTML-, CSS-, JS- ja muita elementtejä varten. Näppäimistön pikavalinnat, nopea vaihtaminen eri näkymien välillä ja puhdas koodi antavat nopeuden, kun käytät tätä työkalua, testataksesi kuinka hyvin malli näyttää eri näytön koot mukaan lukien Nexus, iPhone ja iPad.

1. Foundation

Tämä front-end-puitteet tarjoavat mahdollisuuden koodata älykkäämpiä ja nopeampia. Sen ominaisuuksiin kuuluu työkalu, jonka avulla voit aloittaa pienillä näytöillä. Kun työskentelet rakennustöiden suunnittelua varten isompien näyttöjen avulla, säätiö auttaa sinua tehostamaan suunnittelun elementtejä. Lisäksi tämä työkalu tuo mukanaan viileitä HTML-malleja, jotka antavat sinulle hyppykäynnin sivuston suunnittelussa.

Hyödynnä tämän työkalun joustava verkko, reagoivat mallit ja prototyyppien nopea tuotanto. Säätiön tehokkuus ja uskottavuus on nähtävissä sen käyttävien sivustojen luettelossa, johon kuuluvat National Geographic, Pixar ja Los Alamosin kansalliset laboratoriot.

Kun tarkastelet reagoivan web-suunnittelun maksimointia, mitkä ovat suurimmat haasteet? Mitkä työkalut ovat sinulle parhaiten soveltaneet?

[

Kuvat]