30 Kasulikud tundlikud veebidisaini õpetused
Nii et me oleme jõudnud meie lõpuni "Reageeriv veebidisaini nädal", täna on viimane postitus viimane. Oleme kõik selleks, et aidata teil hoogustada oma oskusi nende koodide manipuleerimisel, et vastata soovi korral, kui neid kuvatakse erinevates seadmetes. Ja selleks on meil tegemist 30 Tundlikud veebidisaini õpetused leitud võrgus. See loend ei ole mõeldud ammendavaks, kuid see aitab teil alustada arusaamist adaptiivse veebilehe kujundamisest, mis rahuldab igasuguseid ekraani suurusi.
Alustame sissejuhatavatest õpetustest "Jäämurdmine", midagi sarnast RWD: 101 klassi, mida peaksite osalema, et kontseptsiooni riputada, enne kui me edasi liikuma "Start Building" harjutustele.
Lõpuks lõpetame lõiku „Tee rohkem“, kus me esitleme juhendeid, mis mängivad horisontaalsete paigutustega, „elastsete” videote, rippmenüüde ja liug-top-akordioni navigatsioonidega, pisipilte ja kleepuvat probleemi tabelitega.
Aga esmalt…
Siin on kokkuvõte kahest juhendajast, mida meie autorid olid sel nädalal esile tõstnud:
Vastuvõetav veebisait Navigation
Autor Thoriq Firdaus - [Vaata juhendit]
Siin on juhendaja, mis aitab teil oma enda veebisaidi navigeerimist teha. Veebisaidi üks tähtsamaid aspekte on see, kui lihtne on saidi eri osades liikuda. Uuri, kuidas seda CSS3-ga selle juhendiga optimeerida.
Reageeriv jätkamine
Jake Rocheleau - [Vaata juhendit]
Kui olete veebispetsialist ja online-CV on juba teie karjääri lahutamatu osa, siis peaksite kasutama võimalust, et ka see, mis jälle reageeriks, jätkuks. Tee tööandjatele ja klientidele lihtsam leida teid mis tahes seadmes. Ja kuigi te olete seda teinud, kahekordistub teie enda töö kui arendaja portfelli.
Jää purustamine
Nüüd, kus me olime? Ah jah, alustame jäämurdmist!
Algaja juhend tundliku veebidisaini loomiseks
Nick Petit - [Vaata juhendit]
See õpetus on algajatele suurepärane lähtepunkt, kuna see kirjeldab, mida veebi reageeriv disain tähendab, kuidas see tuli esile, samuti selgitused vedeliku võrkude ja meedia päringute kohta. Tutvuge ka juhendi allosas loetletud ressurssidega.
Reageeriva veebidisaini tutvustus: Video
Nick Petit - [Vaata juhendit]
See on juhendaja, mis on ligi 9 minuti pikkune, mis libiseb selle veebilehe kujunduse pinnalt, kuidas see oli, milline on selle mõju veebilehe kujundusele ja millised elemendid on seotud tundliku veebidisaini loomisega . Kui soovid mõista, milline reageeriv veebidisain ei kavatse kõigepealt kodeerida, peaksite seda videot alustama.
Kuidas muuta mis tahes veebisait reageerivaks saidiks
Rochester Oliveira - [Vaata juhendit]
See on veel üks õpetus, mis algab põhitõedest, kuid murrab kõike mööda natuke, kaasa arvatud operatsioonisüsteem ja brauserid, mida te oma veebisaidile reageerite, samuti elemendid, mida veebisait erinevatest seadmetest vaadates mõjutab. Autoril oli ka mõningaid kasulikke WordPressi ja jQuery pluginaid, mis aitavad teie tööd palju lihtsamalt muuta.
Vastupidav disain kolmel etapil
Nick La - [Vaata juhendit]
See õpetus selgitab, kuidas saate luua tundliku veebidisaini, millel on metakoodid, HTML-struktuur ja kõik olulised meedia päringud. Sa pead teadma CSS-i, et seda mõista ...
Reageeriva veebi projekteerimine
Max Luzuriaga - [Vaata juhendit]
Siin on artikkel, mis ei ole nii palju õpetus, kui see on juhend tundliku veebidisaini loomiseks. See tähendab, et autor sõna otseses mõttes ütleb teile, kuidas ja millised on reageerivad veebidisainid. On selgitusi selle kohta, miks teatud funktsioonid ei reageeri piisavalt, kuidas töötada proportsioonide ja moodulitega ning mis kõige parem, see on suhteliselt lühike ja kerge absorbeerida.
Vastupidav veebidisain: visuaalne juhend
Andrew Gormley - [Vaata juhendit]
Kui tekstiga täidetud õpetused ei ole elujõulised võimalused, proovige selle videoõpetust. See on endiselt üsna tehniline, kuid kui see teeb sinu enesetunde paremaks, ei pea sa palju lugemist tegema. See on umbes 25 minutit pikk ja video tegija tõepoolest kiirelt läbi osade, kus ta kodeerib, ja siis läheb tagasi selgitama, mida koodid teevad.
Alusta hoone
Alright, alustame ehitatavate disainilahenduste ehitamist, alustades…
Fluidivõrgud
Ethan Marcotte - [Vaata juhendit]
Ütle võrku ja te arvate, et „jäigad struktuurid”, ütleme vedelikku ja te arvate, et see võiks liikuda ekraani ühelt küljelt alt või ülalt või küljelt, kui kasutate brauserile survet, kuid paned need kaks kokku ja ilmselt arvate, et peate seda juhendit vaatama, et täielikult mõista, kuidas vedeliku võrgud aitavad teie disaini paremini reageerida.
Fluid Images
Ethan Marcotte - [Vaata juhendit]
Selle artikli lõpuks peaksite teadma, kes on Ethan Marcotte. Siin on vihje: ta on see, kes leidis veebi vastavate disainilahenduste kontseptsiooni ja tähtaja. Tema nimi tõuseb selles nimekirjas igal teisel õpetusest päris palju, nii et miks mitte nõuda vedelate kujutiste kohta otse isandalt?.
Skaalautuvia navigeerimismudeleid tundlikul veebidisainil
Michael Mesker - [Vaata juhendit]
See õpetus räägib sellest, mida autor on õppinud laiaulatusliku reageeriva veebidisaini projektist. Lugege oma „läbimurdet” selle kohta, kuidas luua mallid, mida on lihtsam konfigureerida kasutajasõbralike ja reageerivate tulemuste jaoks. See on suurepärane pilk kulisside taga, et mõista, kuidas luua liideseid töölaua, tahvelarvutite ja mobiilvaadete jaoks parimal viisil.
Tundlik veebidisain CSS3 meedia päringutega
Nick La - [Vaata juhendit]
Ja veel üks suurepärane juhendaja, mille abil saate õppida, kuidas kujundada HTML5 ja CSS3 abil veebipõhine brauserile reageeriv veebilehe mall. See on samm-sammult lähenemine ja veebimängu demod on enne ja pärast meedia päringute rakendamist, et meedia päringute mõju paremini mõista.
CSS-i efektid: tühjendage pildid tekstide kõrguse sobitamiseks
Zoe Mickley Gillenwater - [Vaata juhendit]
See õpetus annab teile teada, et fikseeritud laiusega piltide muutmine muudab nende suurust ja vahekaugust, et liita sellega kaasasoleva tekstiga, olenemata sellest, kuidas brauseri akent muudetakse.
Adaptive Layouts koos meedia päringutega
Aaron Gustafson - [Vaata juhendit]
Lugege, kuidas kasutada adaptiivseid või paindlikke paigutusi CSS meedia päringutega. Järgige lihtsalt treeningut, et õppida oma disaini kohandama kahekordse veergu või ühe veeru vaatega ning valmistama ette iPhone'i ja iPadi disaini.
Reageerivad pildid: katsetamine kontekstiteadliku pildi suurusega
Scott Jehl - [Vaata juhendit]
Siin on õpetus, mis kasutas mobiil-mobiil-esimese lähenemist. See meetod määrab suurema pildi suurematel ekraaniresolutsioonidel, miinus pildi taotlused ja UA nuusutamine.
Tee rohkem
Elastsed videod
Nick La - [Vaata juhendit]
See õpetus käsitleb videote skaleerimist teie brauseri akna suuruse muutmisel. See on sisuliselt CSS trikk ja seal on demo, et näha õpinguid juhendis ise.
Piltide osade peitmine ja paljastamine
Zoe Mickley Gillenwater - [Vaata juhendit]
Õpetus on tegelikult autori raamatust võetud, kirjeldades, kuidas kuvada või peita piltide osi sõltuvalt ekraani resolutsioonidest. See õpetab, kuidas kujutiste suuruse muutmisel dünaamiliselt kärpida, näidates teile vaid osa kogu pildist, kui ruumi on piiratud.
Reageeriv sisu navigator CSS3-ga
Mary Lou - [Vaata juhendit]
Kas eelistate, et kasutajad saaksid teie poolel navigeerida? Seejärel lugege läbi see õpetus, et õppida, kuidas mõningate lahedate üleminekutega koodi kodeerida: kaob, slaidid, pöörded ja suurendamine. Üleminekud on sisuliselt sisu kihid, mis on näidatud või peidetud konkreetse kodeerimisega.
Loo reageeriv veebidisaini mall
Harry Atkins - [Vaata juhendit]
See on lühike õpetus, mis võimaldab reageerida veebimall mis toimib nii töölaual kui ka iPhone'is.
Reageeriv horisontaalne paigutus
Mary Lou - [Vaata juhendit]
See õpetus õpetab, kuidas luua horisontaalne paigutus mitme keritava sisupaneeliga. Kasutamine Liikide päritolu kui näidistekst, eraldatakse iga raamatu peatükk veergudes, mis asuvad üksteise kõrval täis-brauseri režiimis, kuid kui need on piisavalt väikesed, muutub paigutus täiesti vertikaalseks kerimisraamatuks.
Konverteeri menüü väikeste ekraanide jaoks alla
Chris Coyier - [Vaata juhendit]
See õpetus näitab, kuidas muuta menüü rippmenüüst, kui brauseri aken on kitsas või kui olete mobiilseadmes. Lehekülje paremas ülanurgas asuvate linkide rida konverteeritakse rippmenüüsse, et säästa ruumi ilma navigatsioonivalikuid ohverdamata.
Paindlik slaidi-ülemise akordion
Mary Lou - [Vaata juhendit]
Õppige, kuidas luua lihtsa ja paindliku akordionipaigutuse, mis sisaldab ekraani suuruse ja eraldusvõime põhjal fade-in üleminekuid ja reguleeritavaid laiusi.
Kuidas kasutada CSS3 orienteerimismeedia päringuid
Ryan Seddon - [Vaata juhendit]
Tuginedes lihtsale reeglile, mis määratleb portree (kõrgus laiem kui kõrgus) ja maastiku (laius suurem kui kõrgus) režiimid, saate kirjutada meediumipäringu, et sihtida konkreetseid stiile vastavalt režiimile, mida seda vaatate. See õpetus näitab meile, kuidas seda teha, ja see on varustatud lingiga värvi muutvale kameeleonile, mis kasutab värvi, et näidata seda muudatust, kui vähendate brauseri akent.
Reageerivate andmete tabelid
Chris Coyier - [Vaata juhendit]
Tabelid on peavalu allikaks, kui tegemist on väikeste ekraani suurustega, kuid see ei tähenda, et peame tabeleid täielikult vältima. Vaadake, kuidas kasutada meediumiküsimusi, et muuta oma tabeli vorminguid täielikult, kui lülitate mobiiliekraanide suurustele. Vaadake demot, et saada idee selle juhendi põhjal, mida saate teha.
Fluid CSS3 slaidiseanss parallaksiefektiga
Ringi tiibu järgi - [Vaata juhendit]
Looge CSS3 slaidiseanss, kus kasutatakse kahte taustapilti ja kui taustapositsioone muudetakse, ilmneb parallaksi efekt. Peale selle on slaidiseanss paindlik, muutes selle suuruse, kui brauseri aken suleb.
Kuidas ehitada reageeriv pisipiltide galerii
Joshua Johnson - [Vaata juhendit]
See on suurepärane veebisaitidele, millel on galeriis pisipildid. Kuna brauseri akna suurust muudetakse, muudetakse paigutust kahe veeru (väiksemad ekraanisuurused) ja viie (maksimaalse) veeru vahele. Sarnaste slaidiesitluste ja liugurite jaoks vaadake meie Top 10 Free Responsive Image Galeriid / Slideshow'i artiklit.
Mobiilseadmete e-posti optimeerimine
Autor Ros Hodgekiss - [Vaata juhendit]
Isegi e-kirju saab optimeerida väikese ekraani vaatamiseks, nagu veebisaitide olemasolu. Enamasti muudetakse HTML-e-kirjas oleva teksti suuruseks punktiks, mis ei ole mugav lugemine; õppige, kuidas seda juhendit rohkem ja rohkem hallata.
kasutades raamistikke
Ehita skeletiga reageeriv mobiilne-sõbralik veebisait
Joshua Johnson - [Vaata juhendit]
Skeleton on fantastiline raamistik, mille abil on võimalik luua vastavaid veebisaite. See juhendaja viib teid samm-sammult juhendisse, kuidas kasutada skeleti raamistikku, et ehitada awesome reageerivaid projekte. Teid uimastatakse, kui lihtne on seda rakendada.
Vastupidav veebidisain HTML5 ja vähem raamistikuga 3
Louis Simoneau - [Vaata juhendit]
Kui te ei ole vähem vähem tutvunud, siis kontrollige kõigepealt oma väiksemat CSS juhendit, et saada vähem maitset. Selles juhendis kasutati vähem raamistikku, et näha selgelt meedia päringute mõju.
Järeldus
Ja see lõpeb meie Tundlik veebidisain seeria. Loodame, et selle seeria teemad, tööriistad ja muud vahendid on aidanud meie lugejatele reageerida tundliku veebidisaini kontseptsioonile. Aga kuidas me teaksime, kas te ei ütle meile?
Anna meile teada oma tagasisidet ja kui teil on ettepanekuid rohkemate ideede kohta, mida soovite näha aadressil hongkiat.com. Lohistage meile rida või kommentaar allpool.
