30 Hyödyllisiä reagoivia web-suunnitteluoppaita
Joten olemme päässeet loppuun "Reagoiva web-suunnitteluviikko", tämän illan viimeinen viesti on viimeinen sarja. Aiomme kaikin puolin auttaa sinua hioa taitojasi manipuloimalla näitä koodeja vastaamaan tahdolla, kun ne näkyvät eri laitteissa. Ja tätä varten olemme mukana 30 reagoivat web-suunnittelututkimukset löydetty verkossa. Tämän luettelon ei ole tarkoitus olla tyhjentävä, mutta se alkaa aloittaa ymmärrystä mukautuvan verkkosivuston suunnittelun perusteista, jotka palvelevat kaikenlaisia näytön kokoja.
Aloitamme johdannollisten opetusohjelmien kanssa "Jäähdyttäminen" -kohdassa, kuten RWD: 101 -luokassa, johon sinun pitäisi osallistua, jotta voit ripustaa konseptin ennen kuin siirrymme "Aloita rakentaminen" -harjoituksiin.
Lopuksi me lopetamme "Tee enemmän" -osiosta, jossa esitellään opetusohjelmia, joissa on vaakasuuntaisia asetteluja, "elastisia" videoita, avattavia valikoita ja liukumäkiä harmonikoiden navigointeja, pikkukuvia ja tahmea ongelma taulukoissa.
Mutta ensin…
Tässä on yhteenveto niistä kahdesta opetusohjelmasta, jotka tekijät ovat esittäneet aiemmin tällä viikolla:
Vastaava verkkosivujen navigointi
Tekijä Thoriq Firdaus - [Näytä opetusohjelma]
Seuraavassa on opetusohjelma, jonka avulla voit tehdä oman, omaan verkkosivustosi navigointiin. Yksi verkkosivuston tärkeimmistä näkökohdista on, kuinka helppoa on navigoida sivuston eri osissa. Selvitä, miten optimoida tämä CSS3: n kanssa tämän opetusohjelman avulla.
Reagoiva Resume
Jake Rocheleau - [Näytä opetusohjelma]
Jos olet web-ammattilainen ja online-ansioluettelo on jo olennainen osa urasi, sinun pitäisi käyttää tilaisuutta kääntyä samaan aikaan, kun jatkat vastaavuutta. Tee työnantajille ja asiakkaille helpompi löytää sinut millä tahansa laitteella. Ja kun olet siinä, oman ansioluettelosi kaksinkertaistuu tuotevalikoimaan, jota voit tehdä kehittäjänä.
Murtaa jää
Nyt, missä olimme? Ai kyllä, saamme jäätä rikkovia toimia!
Aloittelijan opas vastuulliseen Web-suunnitteluun
Nick Petit - [Näytä opetusohjelma]
Tämä opetusohjelma on hyvä lähtökohta aloittelijoille, koska siinä kuvataan, mitä web-reagointisuunnittelu tarkoittaa, miten se tuli esiin, sekä selitykset muun muassa nesteen verkkojen ja mediakyselyjen osalta. Katso myös opetusohjelman alareunassa luetellut resurssit.
Johdatus reagoivaan Web-suunnitteluun: Video
Nick Petit - [Näytä opetusohjelma]
Tämä on opetusohjelma, joka on lähes 9 minuutin pituinen ja joka hahmottaa sen, millainen web-suunnittelu on, miten se on tullut, miten se vaikuttaa verkkosivuston suunnitteluun ja mitkä elementit ovat mukana reagoivan web-suunnittelun tuottamisessa . Jos et halua ymmärtää, mitä reagoivaa web-suunnittelua ei ole tarkoitus ensin koodata, aloitat tämän videon.
Miten kääntää mikä tahansa sivusto vastuulliseksi sivustoksi
Rochester Oliveira - [Näytä opetusohjelma]
Tämä on toinen opetusohjelma, joka alkaa perusasioista, mutta katkeaa kaikesta alaspäin, mukaan lukien käyttöjärjestelmä ja selaimet, joihin sivustosi kääntyvät, sekä elementit, joita sivusto vaikuttaa eri laitteista. Kirjoittaja esitteli myös joitakin hyödyllisiä WordPress- ja jQuery-laajennuksia, jotka auttavat tekemään työstäsi paljon helpompaa.
Reagoiva suunnittelu kolmessa vaiheessa
Nick La - [Näytä opetusohjelma]
Tämä opetusohjelma kertoo, kuinka voit luoda reagoivan web-suunnittelun metakoodeilla, HTML-rakenteella ja tärkeillä mediakyselyillä. Tarvitset jonkin verran tietoa CSS: stä sen ymmärtämiseksi ...
Suunnittelu reagoivaan verkkoon
Max Luzuriaga - [Näytä opetusohjelma]
Tässä on artikkeli, joka ei ole niin paljon opetusohjelma, koska se on opas luomaan reagoivaa web-suunnittelua. Tämä tarkoittaa, että kirjailija kertoo kirjaimellisesti sinulle, miten ja mitä ei ole reagoinut web-suunnitteluun. On selityksiä siitä, miksi tietyt ominaisuudet eivät reagoi tarpeeksi, miten työskennellä mittasuhteilla ja moduuleilla, ja mikä parasta, se on suhteellisen lyhyt ja helppo ottaa vastaan.
Reagoiva Web-suunnittelu: visuaalinen opas
Andrew Gormley - [Näytä opetusohjelma]
Jos tekstin täyttämiä opetusohjelmia ei ole kannattavia vaihtoehtoja, kokeile tätä videoopetusta sen sijaan. Se on edelleen melko tekninen, mutta jos se saa sinut tuntemaan olosi paremmin, sinun ei tarvitse tehdä paljon lukemista. Se on noin 25 minuuttia pitkä, ja videon valmistaja on itse asiassa nopeasti läpäissyt osia, joissa hän koodaa, ja palaa sitten selittämään, mitä koodit tekevät.
Aloita rakennus
Alright, aloitetaan rakentaa joitakin vastaavia malleja, alkaen…
Fluidiverkot
Ethan Marcotte - [Näytä opetusohjelma]
Sano ruudukko, ja luulet "jäykät rakenteet", sano nestettä ja luulisi, että se voisi virrata näytön yhdeltä puolelta pohjaan tai yläreunaan tai sivulle, kun käytät painetta selaimeen, mutta laitat nämä kaksi yhdessä ja luultavasti luulisi, että sinun täytyy tarkastella tätä opetusohjelmaa, jotta voit täysin ymmärtää, miten nesteverkot voivat auttaa tekemään suunnittelustasi entistä paremmin.
Fluid Images
Ethan Marcotte - [Näytä opetusohjelma]
Tämän artikkelin loppuun mennessä sinun pitäisi tietää, kuka Ethan Marcotte on. Tässä on vihje: hän on se, joka keksi web-herkkien mallien käsitteen ja termin. Hänen nimensä tulee melko paljon esiin jokaisessa muussa opetusohjelmassa tässä luettelossa, joten miksi ei ota neuvoja nestemäisistä kuvista suoraan Mestarilta?.
Skaalautuvat navigointikuviot reagoivassa Web-suunnittelussa
Michael Mesker - [Näytä opetusohjelma]
Tämä opetusohjelma kertoo oppitunneista, jotka tekijä on oppinut työskentelemällä laajamittaiseen, reagoivaan web-suunnitteluprojektiin. Lue hänen "läpikäynti" siitä, miten voit luoda malleja, jotka on helpompi määrittää käyttäjäystävällisiin ja reagoiviin tuloksiin. Kulissien takana on hyvä katsoa, miten suunnittelemme käyttöliittymiä parhaalla mahdollisella tavalla työpöydälle, tabletille ja mobiilinäkymille.
Reagoiva Web-suunnittelu CSS3-mediakyselyjen avulla
Nick La - [Näytä opetusohjelma]
Ja toinen erinomainen opetusohjelma, jonka avulla voit oppia suunnittelemaan verkkoselainta vastaavan verkkosivuston mallin HTML5: llä ja CSS3: lla. Se on vaiheittainen lähestymistapa, ja web-suunnittelun demot ovat ennen ja jälkeen median kyselyjen toteutuksen, jotta mediakyselyjen vaikutusta voitaisiin paremmin arvostaa.
CSS-tehosteet: Tilaa kuvat ulos tekstin korkeudelle
Zoe Mickley Gillenwater - [Näytä opetusohjelma]
Tämä opetusohjelma oppii, että kiinteän leveyskuvien tekemisen temppu muuttaa niiden kokoa ja välilyöntiä, jotta se sopii yhteen mukana tulevan tekstin kanssa, riippumatta siitä, miten selainikkuna muutetaan.
Adaptiiviset ulkoasut mediakyselyillä
Aaron Gustafson - [Näytä opetusohjelma]
Opi käyttämään mukautuvia tai joustavia ulkoasuja CSS-median kyselyillä. Noudata harjoitusta vain, jos haluat oppia mukauttamaan muotoilusi kaksoissarakkeeseen tai yhden sarakkeen näkymään sekä valmistelemaan iPhonen ja iPadin suunnittelua.
Reagoivat kuvat: Kokeilu kontekstitietoisella kuvakoon avulla
Scott Jehl - [Näytä opetusohjelma]
Tässä on opetusohjelma, jossa käytettiin rakennus-mobiili-ensimmäistä lähestymistapaa. Tämä tekniikka määrittää suurempien kuvien koon suuremmilla näytön resoluutioilla, miinus kuvapyynnöt sekä UA: n nuuskaaminen.
Tehdä enemmän
Elastiset videot
Nick La - [Näytä opetusohjelma]
Tämä opetusohjelma käsittelee videoiden skaalausta selaimen ikkunan koon muuttuessa. Se on pohjimmiltaan CSS-temppu ja siellä on demo, joka näyttää opetuksen työssä.
Kuvien piilottaminen ja paljastaminen
Zoe Mickley Gillenwater - [Näytä opetusohjelma]
Opetusohjelma on otettu tekijän kirjasta, jossa kuvataan, miten kuvien osia voidaan paljastaa tai piilottaa näytön resoluutioiden mukaan. Se opettaa, kuinka rajata kuvia dynaamisesti, kun näytön koko muuttuu, ja näyttää vain osan kokonaiskuvasta, kun tilaa on rajoitettu.
Vastaava sisällönavigaattori CSS3: n kanssa
Mary Lou - [Näytä opetusohjelma]
Haluatko vilpittömän tavan, jolla käyttäjät voivat navigoida sivusi ympärillä? Sitten sinun tulee lukea tämä opetusohjelma, jotta voit oppia koodittamaan joitakin viileitä siirtymiä: häipyä, liukumäkiä, kiertoja ja skaalausta. Siirtymät ovat olennaisesti sisältökerroksia, jotka on esitetty tai piilotettu tietyllä koodauksella.
Luo reagoiva web-suunnittelumalli
Harry Atkins - [Näytä opetusohjelma]
Tämä on lyhyt opetusohjelma, joka tuottaa reagoivan Web-malli joka toimii sekä työpöydällä että iPhonella.
Reagoiva vaakasuunnassa
Mary Lou - [Näytä opetusohjelma]
Tämä opetusohjelma opettaa, miten voit luoda vaakasuunnassa useita vieritettäviä sisältöpaneeleja. käyttämällä Lajin alkuperä näytteen tekstinä jokainen kirjan luku on erotettu sarakkeissa, jotka on sijoitettu vierekkäin koko selaimen tilassa, mutta kun ne pienenevät riittävän pieniksi, ulkoasu muuttuu täysin pystysuoraan vierityskirjaan.
Muunna valikko Pienet näytöt -luetteloon
Tekijä Chris Coyier - [Näytä opetusohjelma]
Tämä opetusohjelma näyttää, miten valikko voidaan muuntaa avattavaksi luetteloksi, kun selainikkuna on kapea tai kun olet mobiililaitteessa. Sivun oikeassa yläkulmassa oleva linkkien rivi muunnetaan avattavaksi valikosta, mikä säästää tilaa ilman, että navigointivaihtoehtoja uhrataan.
Joustava liukusäädin
Mary Lou - [Näytä opetusohjelma]
Opi luomaan yksinkertainen ja joustava harmonikkorakenne, jossa on häipymättömiä siirtymiä ja säädettäviä leveyksiä näytön koon ja resoluutioiden perusteella.
Kuinka käyttää CSS3-orientaatiomedia-kyselyjä
Ryan Seddon - [Näytä opetusohjelma]
Perustuu yksinkertaiseen sääntöön, joka määrittelee muotokuvan (korkeus suurempi kuin leveys) ja maiseman (leveys suurempi kuin korkeus) -tiloja, voit kirjoittaa mediapyynnön kohdennetaksesi tiettyjä tyylejä sen mukaan, millainen tila sitä tarkastellaan. Tämä opetusohjelma näyttää meille, miten tämä tehdään, ja siinä on linkki värin muuttuvaan kameleoniin, joka käyttää väriä näyttääkseen tämän muutoksen, kun kutistat selainikkunan.
Reagoivat tietotaulukot
Tekijä Chris Coyier - [Näytä opetusohjelma]
Pöydät ovat päänsärkyjen lähde, kun kyseessä on pienet näytön koot, mutta se ei tarkoita sitä, että meidän on vältettävä täysin taulukoita. Opi käyttämään mediakyselyjä, jotta taulukon muokkausmuoto muuttuu täysin, kun siirryt mobiilinäyttöön. Tarkastele demoa saadaksesi käsityksen siitä, mitä taika voit tehdä tämän oppaan perusteella.
Fluid CSS3 Diaesitys Parallax-vaikutuksella
Kehän siipi - [Näytä opetusohjelma]
Luo CSS3-diaesitys, jossa käytetään kahta taustakuvaa ja kun taustojen asemia muutetaan, parallaksivaikutus näkyy. Sen lisäksi diaesitys on joustava, ja sen kokoa muutetaan selaimen ikkunan päälle.
Miten rakentaa reagoiva pikkukuva galleria
Joshua Johnson - [Näytä opetusohjelma]
Tämä on hyvä sivustoille, joissa on pienoiskuvia galleriassa. Koska selainikkunan kokoa muutetaan, asettelua muutetaan kahden sarakkeen (pienemmät näytön koot) ja viiden (enintään) sarakkeen väliin. Saat enemmän samanlaisia diaesityksiä ja liukusäätimiä tutustumalla Top 10 Free Responsive Image Galleries / Slideshows -artikkeliin.
Sähköpostin optimointi mobiililaitteille
Ros Hodgekiss - [Näytä opetusohjelma]
Jopa sähköposteja voidaan optimoida pienikokoisille näkymille, kuten verkkosivustojen näyttäminen. Useimmiten HTML-sähköpostin tekstin kokoa muutetaan pisteeksi, jota ei ole tehty lukemista varten; opi hallitsemaan tätä ja muuta tämän oppaan avulla.
käyttäen kehyksiä
Rakenna reagoiva mobiiliystävällinen verkkosivusto, jossa on Skeleton
Joshua Johnson - [Näytä opetusohjelma]
Luuranko on mahtava kehys, jonka avulla voidaan rakentaa vastaavia verkkosivustoja. Tämä opetusohjelma vie sinut vaiheittaiseen oppaaseen, jossa kerrotaan, miten Skeleton-kehystä voidaan käyttää luomaan mahtavia reagoivia malleja. Tulet hämmästymään nähdäksesi, kuinka helppoa on toteuttaa.
Herkkä web-suunnittelu HTML5: llä ja vähemmän kehyksellä 3
Louis Simoneau - [Näytä opetusohjelma]
Jos et ole otettu asianmukaisesti käyttöön Vähemmän -palvelussa, tutustu ensin omaan Vähemmän CSS-opetusohjelmaamme saadaksesi ensin pienemmän maun. Tässä opetuksessa käytettiin vähemmän kehystä, jonka avulla voit nähdä mediakyselyjen vaikutukset selvästi.
johtopäätös
Ja se päättyy Reagoiva Web-suunnittelu sarja. Toivomme, että tässä sarjassa esitetyt teemat, työkalut ja muut resurssit ovat auttaneet altistamaan reagoivan web-suunnittelun käsitteen lukijoillemme. Mutta miten me tiedämme, ettet kerro meille?
Kerro meille palautteestasi ja jos sinulla on ehdotuksia lisää ideoita, joita haluat nähdä osoitteessa hongkiat.com. Vie meille rivi tai kommentti alla.
