Todella helppoa reagoiva muotoilu
Ei ole mikään salaisuus, että monet uskovat, että reagoiva verkko on tulevaisuus. Reagoivan sivuston luominen tarkoittaa sitä, että se pystyy sopeutumaan moniin erilaisiin selaimiin ja kokoihin, jotka ovat käytettävissä. Jos haluan varmistaa, että työpöydälle luoma verkkosivusto on näkyvissä tablet-laitteella, jossa on minium-vieritys ja zoomaus, olen kiinnostunut luomaan reagoivan sivuston.
Yksi syy reagoivista sivustoista on tullut suosittu, koska se on järkevää. Se on halvempaa kuin luoda yksi tai useampi lisä sivusto matkapuhelimille ja tabletteille. Se varmistaa myös, että laitteiden ja työpöydän näytöissä on johdonmukainen katselukokemus. Ei ole hauskaa lisätä ikkunan kokoa tai vierittää vaakasuunnassa nähdäksesi koko sivuston.
Luomalla reagoivien verkkomallien luominen on entistä helpompaa, on olemassa joitakin tapoja saada se menemään entistä nopeammin. Kiitos muutamasta CSS: stä ja HTML: stä, voimme koodata sen suoraan sivustoihimme. Muut elementit vaativat vähän enemmän työtä. Kummassakin tapauksessa olemme saaneet luettelon, jonka avulla voit sijoittaa vastaavan sivustosi yhdessä pienimpien haasteiden ja tulosten kanssa.
jQuery-laajennuksia
isotooppi
Isotooppi on jQuery-laajennus, joka haluaa luoda maagisia ulkoasuja, joita CSS ja HTML eivät voi muutoin luoda. Sillä on kyky järjestellä säiliön sisältämät elementit niin, että ne sopivat siihen, kun ne muuttuvat. Voit myös käyttää isotooppia suodattaa ja lajitella kohteita luokkiin ja muihin.
Breakpoints.js
Yhteyspiste tehtiin kehittäjien ja suunnittelijoiden mielessä. Se on plugin, jonka avulla voit luoda rajapintoja eri selaimen koot. Kun selaimesi on koonneet yhteen näistä kooista, elementit voivat sopeutua näyttöön.
FitText.js
Tämä on yksi suosikki jQuery-laajennuksistani, koska se on fontteja varten. Hyvin usein liian houkuttelevassa web-suunnittelussa ihmiset eivät ota huomioon, että otsikoiden pitäisi olla herkkiä sen sijaan, että ne liitettiin tiettyyn tilaan. FitTextin avulla voit tehdä juuri sen, mutta muista käyttää vain otsikoita!
Response.js
Jos pidät idea Breakpoint.js: sta, mutta haluat enemmän räätälöintiä, Response.js on vastaus. Se on todella hieno niille, jotka tietävät jQuery paremmin kuin CSS ja HTML, ja täytyy luoda reagoivia verkkosivustoja. Käytät raja-arvoja, mutta siinä on paljon muuta räätälöintiä, kuten laitekokoa, pikselin annoksia ja kykyä ladata eri lähteitä eri kokoja.
TinyNav.js
TinyNav on kevyt jQuery-laajennus, jonka avulla voit muuttaa mitä tahansa valikkokohtaa listoilla, jos haluat muuttaa pudotusvalikoita selaimen kokoa muutettaessa. Voit määrittää koot sekä valikot muuttuvat. Se ei ole niin laaja toiminta, mutta se on erittäin tehokas, mitä se tekee.
Suosittuja puitteita ja järjestelmiä
Responsive Grid System
Tämä järjestelmä väittää, ettei se ole kattolevy tai kehys vaan vain järjestelmä, joka tekee malleja reagoiviksi. Se näyttää olevan yksi joustavimmista, sillä se ei rajoita tietyn kokoisia tai tietyntyyppisiä gridsize. He käyttävät erilaisia CSS-luokkia, jotka pystyvät kellumaan ja luomaan omat sarakkeet.
Golden Grid System
GGS on myös järjestelmä, eikä "kehys". He haluavat viitata itsensä lähtökohtana tai ohjeeksi niille, jotka haluavat käyttää tietyn määrän verkkoja web-suunnittelussaan. Näyttöön on annettu 18 colums, mutta 16 on käytettävä suunnittelussa. Teet omat leveytesi ja kourut käyttöösi ja lähdet lähinnä sinne.
1140 Grid System
Jonkin ajan kuluttua monet suunnittelijat käyttivät web-malleja, jotka olivat 960px leveä. Sitten tämä tuli pieneksi ja he nousivat ylös. Nyt monia malleja kehitetään 1140px: n leveydellä. Tämä 1140-grid-järjestelmä mahdollistaa 12 sarakkeen käyttämistä laaja-alaisessa web-suunnittelussa.
Twitter Bootstrap
Bootstrap on yksi suosituimmista puitteista. Se on 12 grid-kehystä, joka on tehnyt käyttökelpoisen ristisanalistan (Internet Explorer 7 mukaan lukien) ja sitä voidaan käyttää reagoivasti kannettaviin laitteisiin. Siinä on useita tyylitekijöitä, typografiaa ja JavaScriptia, ja ne luovat tyylikkäitä, intuitiivisia sivustoja.
SimpleGrid
SimpleGrid ottaa ruudukon idean ja yksinkertaistaa sitä. Useimmissa verkkojärjestelmissä ja kehyksissä sinulla on nämä tuntemattomat luokat ja tuntemattomat sarakkeet. Yksinkertaisella verkolla on luokkia, jotka määrittävät, mitkä sarakkeet ovat ensimmäiset, keski- ja viimeiset. Lisäksi voit lisätä sarakkeisiin eri "lähtö", jotta se näyttää siltä, että on enemmän sarakkeita. Se on hyvin yksinkertainen ja selkeä kehys.
Muut reagoivat työkalut
Responsive Web Design Sketch Sheets
Kuten kaikki suunnittelijat tai kehittäjät, luultavasti luonnostat malleitasi, ennen kuin teet itse asiassa. Toivottavasti teet. Jos ei, ehkä sinun pitäisi aloittaa käyttämällä näitä RWD-luonnoslehtiä. Ne tulevat erilaisilla laitteilla ja työpöydän kooilla, jotta voit suunnitella kaiken.
Responsive Design Sketchbook
Jos pidät ajatuksesta piirrosta paperille, mutta haluat kaikkien teippausten yhdistelemisen, voit harkita vastaavan suunnittelun luonnosluettelon hankkimista. Siinä on 50 sivua, spiraali sidottuna eri näytön kokoihin jokaisella sivulla. Kaikki ruudut ja matematiikka on jo tehty sinulle, joten tämä on loistava työkalu aloittelijoille ja asiantuntevalle suunnittelijalle.
Tyyli laatat
Tämä on hieno resurssi web-suunnittelijoille, etsivätkö ne jotain herkälle suunnittelulle vai ei. Se on PSD, jonka avulla voit saada sivuston ydin lisäämällä otsikoita (typografia), logoja, värejä ja muita elementtejä. Syy siihen, miksi tämä toimii reagoivaan web-suunnitteluun, koska se ei tarkoita mitään ulottuvuuksia, vain digitaalinen idea ilman rajoituksia.
Responsive Calculator
On olemassa monta matematiikkaa, joka liittyy pikselin täydelliseen reagointiin. On välttämätöntä, että matematiikka on oikea, koska käsittelemme eri prosenttiosuuksia, leveyksiä ja selaimen koot. Apua on tässä laskin, joka antaa sinulle oikean matematiikan ja CSS: n.
johtopäätös
On välttämätöntä, että huomaamme, mitä reagoiva verkko tekee. Monet asiakkaat haluavat käyttää sivustojaan monenlaisiin laitteisiin, ja se on vain kustannustehokkaampaa luoda vastaavia sivustoja. Lisäksi suurin osa kehyksistäsi ja muista resursseista herkälle suunnittelulle todella auttaa luomaan järjestäytyneitä ja laadukkaita, standardisivuja.
Mitkä ovat suosikki tapasi aloittaa herkät mallit? Oletteko jättäneet resurssin johon luotat? Kerro meille kommentit.