21 flotte verktøy for responsiv webdesign
Som webdesigner vet vi at responsiv webdesign hadde kommet for å bli. Du har tatt deg tid til å bygge et veldig vakkert og robust nettsted, med et betydelig antall trafikk til nettstedet ditt fra søkemotorer. Så kommer du til virkeligheten av enheter. Hvilken enhet skal brukes til å åpne nettstedet ditt?. Hva med høyden og bredden på enheten? Det er tusenvis av enheter, sammen med flere dimensjoner og visningsporter.
Som webdesignere vet vi at designet vårt vil bli sett fra ulike enheter og nettlesere, og samtidig vil kodeblokkene våre bli utført av ulike enheter.
Det hadde vært en massiv økning i antall nettaktiverte enheter, som kom sammen med mye pikseltetthet, interaksjon, oppløsning og så videre, også å dømme etter de nåværende trendene innen teknologi, vil det være flere enheter som folk kan få tilgang til nettet med.
Det faktum at responsiv webdesign er nødvendig for alle nett, betyr ikke at det er så enkelt som det, med tanke på at du må ta hensyn til flere enheter, samt dimensjoner og visningsporter. Utfordringen er at vi må lage et grensesnitt som kan skaleres med praktisk talt alle enheter, fra liten skjerm til storskjerm i teatersalen.
Dette gjorde det ganske enkelt viktig for alle nettsteder å være responsive på ulike enheter for enkel navigering og bedre brukeropplevelse.
Hvis du har sett et av våre tidligere innlegg om nyttig verktøykasse for responsiv webdesign, så vet du at det er så mange verktøy på nettet for responsiv webdesign. Men fra min mange års erfaring som webdesigner, utvikler og konsulent, kombinert med grundig research som jeg hadde gjort, vil jeg dele 21 flotte verktøy og ressurser for responsiv webdesign. Merk deg, for designere som ennå ikke har kommet overens med responsiv webdesign. Jeg anbefaler å lese Viktighet og grunner for responsivt webdesign, du kan også stille spørsmålet ditt, og en ekspert vil svare deg via e-postadressen din. Deretter kan du fortsette her med 21 flotte verktøy for responsiv webdesign.
01 ZURB Foundation
ZURB Foundation er et av verdens mest aksepterte og avanserte rammeverk for et responsivt nettsted. ZURB hadde brukt mye ressurser på rammeverket, i tillegg til den flere innsatsen som hadde gått til åpen kildekode-prosjekt på rammeverket.
ZURB Foundation har en enorm forbedringsstrategi, da du har lov til å øke laget i kompleksitet basert på størrelsen på skjermen og designfunksjonene. Ikke bare det, du vil også finne et omfattende bibliotek som består av flere UI-komponenter, noe som gjør det lettere for deg å prototype et hvilket som helst grensesnitt du kan forestille deg.
02 Jetstrap
Det hadde vært en massiv vending i designprosessen, siden wireframe ikke vil vise hvordan et bestemt design vil se ut i flere webmiljøer. Og kodekunnskap er nødvendig for å bruke noen prototypingverktøy.
Det er her Jetstrap kommer. Det lar designeren raskt sette sammen prototyper ved å dra og slippe komponenter fra brukergrensesnittet til lerretet. Frontend-utviklingsferdigheter er ikke nødvendig for å starte, og du vil ende opp med en pustende nettside. Du trenger bare å bruke dra og slipp-verktøyene på grensesnittet.
03 Responsive Design Weekly
Nettutvikler Justin Avery bruker tid på å sende dedikerte nyhetsbrev om ressurser, verktøy og teknikker for responsiv webdesign. Som designer bruker jeg deler av tiden min på twitter og leser feeds på responsiv webdesign. Noen av feedene involverer de nyeste ressursene og nyttige tips for å bygge et responsivt webdesign. Å bli med i responsiv webdesigndiskusjon fra LinkedIn vil helt sikkert forbedre ferdighetene dine og gi deg de nyeste ideene om aktuelle trender innen responsiv webdesign.
04 Style Prototype
Stilprototype er en HTML-side som viser knappstil, typografi, farge, fotografistil, roll over og andre elementer for et foreslått nettsted.
Et av hovedformålene med stilprototypen er å lage leveranser som er nyttige og replikerbare. Selv om det ikke er noen regler for å bygge en stilprototype, må du inkludere noen grunnleggende elementer, som knappestil, typografi, farge og rulle over til side fra andre elementer som kan inkluderes.
Style prototype lar deg legge til animasjon, farger og andre elementer i webmiljøet.
05 Elementkollager
Når du lager helsidemodeller, er noe av det vanskeligste vi må møte som designer, utformingen av minuttet på hver side. Profesjonelt er det tilrådelig å bruke mer tid på å designe heltemeldingene på hjemmesiden enn å bruke mer tid på resten av sidene.
Som designer er det ikke tilrådelig å lage nettstedsmodeller i photoshop med gjeldende trender i nettutviklingsindustrien, siden du har mange andre ting å gjøre.
Grunnlegger av byrået SuperFriendly Dan Mall hadde gått et skritt videre i å forenkle ting med Element Collages.
Element Collages har et veldig godt brukergrensesnitt for visuell utforskning av grensesnittkomponenter. Collager hjelper deg i den visuelle retningen, og du trenger ikke lage hele komponenten selv, med tanke på at du ikke designer for bare én enhet.
06 Pærer
Noen viktige fordeler med frontend-stilguider innebærer, tillater enklere testing, bedre arbeidsflyt, delt ordforråd, og fungerer som referanse for å fortsette å komme tilbake til. Pears er et open source wordpress-tema laget av Dan for å lage en guide til frontend-stil.
Pears gjør det enkelt for designere å bruke felles bibliotek for et konsistent designsystem.
07 Icomoon
Retina og andre høyoppløselige skjermer er raskt i ferd med å bli dagens orden, punktgrafikkikoner skaleres ikke særlig godt med disse høyoppløselige enhetene. Heldigvis er webutviklingsbransjen lik oppgaven.
Den effektive løsningen på dette er å lage et oppløsningsuavhengig ikon, som kan oppnås ved å lage egendefinert ikonskrift og bygge den inn med CSS @font-face.
Iconmoon gjør enkelt prosessen med å lage og vise ikonfont. Du vil kunne velge fra et bibliotek med ikoner, med alternativer for å laste opp ikonet ditt. Derfra kan du generere din egendefinerte ikonfont og laste ned en pakke som inkluderer fonten og passende CSS. Når det gjelder å lage oppløsningsuavhengig ikon, er Iconmoon et viktig verktøy.
08 Foresight.js
Ulike enheter har forskjellige måter å vise punktgrafikkbilder på, men som designer må du ha det i bakhodet at lasting av høyoppløselige bilder kan øke sidevekten. Foresight.js detects har muligheten til å oppdage enhetsvisning og tilkobling for å bestemme om høyoppløselige komponenter skal lastes eller ikke.
09 Detektor
Enhetsdeteksjon og profilering kan være vanskelig noen ganger, siden enhetsbiblioteket er vanskelig å administrere. Siden funksjonsdeteksjon er avhengig av gjenkjenning på klientsiden, så kun avhengig av det kan det gi en viss begrensning i fleksibilitet når funksjonalitet leveres til et bredt spekter av enheter.
Dette fører til opprettelse av detektor av Dave Olsen, ved hjelp av PHP-skript og nettleser basert på Javascript, sammen med en rekke funksjonsdeteksjonsbibliotek. Biblioteket brukere modernizr og user-agent deteksjon for å bestemme enhetsklasser. Detektor har evnen til å tilpasse seg nye enheter og nettlesere på egen hånd uten behov for å hente fra sentral database med nettleserinformasjon.
10 Enquire.js
Hver designer vet viktigheten av å bruke mediesøk i CSS. Så hva skjer når du ønsker å endre noen opplevelser på et bestemt tidspunkt? Disse kan enkelt gjøres Enquire.js-skript.
Enquire.js-skriptet bruker matchmedia for å betinget utføre noen funksjoner, og laste inn noe skript hvis visse betingelser er oppfylt. Med dette kan du forvente bedre brukeropplevelse og enkelt fra brukere.
11 SocialCount
Lasting av widgeter for sosiale medier som Facebook, Twitter og Google tar 19 HTTP-forespørselswidgeter og legger til ytterligere 246,7 KB til sidevekten, dette øker ofte tiden for nettsider å laste, og bruker mer båndbredde.
Zach Leatherman adresserte det ved å lage en lettvektsløsning, kalt social count.Det er et lite skript som laster inn sosiale widgets, slik at brukerne ikke blir straffet i det hele tatt.
12 FitVis
Flere medieobjekter, inkludert videoer, er forskjellige når de sammenlignes med bilder, i den forstand at de ikke opprettholder noe av størrelsesforholdet etter endring av størrelse. Dette skaper et skaleringsproblem når du ser på video fra en rekke forskjellige nettaktiverte enheter.< br/> Chris og andre designere lyktes i å utvikle en plugin kalt FitVids.js. plugin-modulen er i stand til å oppdage og bruke riktig forhold mellom video eller andre medieobjekter når du endrer størrelse. Med dette kan du få riktig størrelsesforhold når videoen endres, og som et resultat få fint viste medieobjekter inkludert videoer i applikasjonene dine.
13 IE-vennlig mobil-først CSS
Hver designer vet hvor viktig mediesøk er, men faktum er at internet explorer ikke støtter mediesøk. Samtidig kan du som designer ikke bestemme deg for å gjøre unna mediesøk, bare fordi du ønsker å støtte gamle IE. Dette problemet kan enkelt løses ved å bruke Sass. Sass vil hjelpe oss med mobil-første stiler, og samtidig gi passende skrivebordsstiler til gammel versjon av IE.
14 jobber.
Som designer, hvis du sjekker på nettet for å søke etter viewport-testverktøy, vil du finne mange viewport-testverktøy. Men problemet der er at de fleste viewport-testverktøyene er avhengige av populære enhetsbredder som 320, 768, 1024 og så videre.
Ish klassifisere og få frem generelle områder (small-ish, medium-ish, large-ish, etc) bare for å sikre at du får frem det generelle oppløsningsspekteret.
15 Proporsjonale mediespørringer
Noen designere bruker fortsatt pikselverdier for å angi bruddpunkter, mens vi har brukt bredder, mål og skriftenheter i forhold til forskjellige enheters synspunkt. En god opplæring ble gitt av Lyza Gardner som forklarer hvordan vi kan bruke relative enheter for bruddpunkter for å skape bedre brukeropplevelse.
16 MQTest.io
Som designer, noen ganger, kan det på en eller annen måte være skremmende å spore mediesøk som en bestemt nettleser støtter. Dette løses enkelt ved å bruke MQTest.io utviklet av Viljami Salminen. Verktøyet vil hjelpe deg å gjenkjenne og analysere ulike medieforespørsler som ulike nettlesere svarer på. Med dette kan du kanskje også bruke mediespørringer som ikke er vanlig å bruke.
17 Sparkbox mediesøk bokmerke
Sparkbox er et mediesøk-bokmerke som hjelper deg med å finne spørringer for gjeldende medier eller medier som er i bruk. Det er viktig for designere å ha tilgang til skjermdimensjoner, da det sparer tid og hjelper til med å bestemme proporsjonale mediespørringer.
18 BrowserStack
Som designer vet vi hvor dyrt, utfordrende og til og med skremmende det kan være når det kommer til testing i en representativ stabel av nettlesere og enheter. Dette løses enkelt når vi bruker BrowserStack.
Nettleserstabel gir ekstern tilgang til flere enheter og miljøer, og lar deg dermed utføre kvalitetssikringstesting. BrowserStack er like imponerende som noe annet som det også er effektivt når du tester på gamle versjoner av Internet Explorer.
19 Mobitest
Ytelse er et av de viktigste aspektene ved webdesign. Med Mobitest vil du kunne se hvordan designene dine presterer med litt analyse.
Når du tester designet ditt på Mobitest trenger du bare å skrive inn en nettadresse, hvoretter verktøyet viser siden på en ekte enhet, og gir deg samtidig masse ytelsesstatistikk, da du også vil kunne vite belastning tid og gjennomsnittlig sidestørrelse sammen med annen statistikk.
20 Adobe Edge Inspect
Viktigheten av å teste på en ekte enhet kan ikke understrekes for mye for en webdesigner, siden du må se og analysere hva slags ytelse designet ditt vil gi en bruker før publisering. En Adobe Edge Inspect hadde gjort testing på ekte enhet veldig enkel og rett frem, siden du har verktøyet som automatisk oppdaterer alle tilkoblede enheter. Du kan også teste kode på et bredt spekter av enheter.
21 Codepen Pro
CodePen er et verktøy som raskt hjelper til med å demonstrere responsive mønstre og teknikker. Det er et verktøy som også hjelper ytelsen til designene våre på forskjellige enheter og datamaskiner, mens du fortsatt skriver.
CodePen er et kraftig verktøy som hjelper deg å se resultatene av koden din på flere enheter og datamaskiner mens du skriver.
Konklusjon
Alle de 21 verktøyene som er nevnt ovenfor er gode for responsiv webdesign. Men hvert av verktøyene har forskjellig funksjonalitet, personlig har jeg ingen preferanse, siden alle verktøyene er effektive, men med forskjellig grensesnitt og funksjonalitet. Valget er ditt.