30 Vadnice za uporaben odzivni spletni dizajn
Tako smo prišli do konca našega "Odzivni teden spletnega oblikovanja", Nocojšnja objava bo zadnja v seriji. Vsi bomo pomagali, da vam pomagamo izboljšati svoje sposobnosti pri upravljanju teh kod, da se bodo odzvali po volji, ko bodo prikazani na različnih napravah. In da bi to naredili, smo predstavljeni 30 odzivnih vaj za spletno oblikovanje najdete na spletu. Ta seznam ni izčrpen, vendar vas bo začel razumevati osnove oblikovanja prilagodljive spletne strani, ki bo poskrbela za vse vrste zaslonov..
Začeli bomo z uvodnimi vajami v razdelku »Breaking the Ice«, ki je podoben razredu RWD: 101, ki bi se ga morali udeležiti, da bi dobili koncept, preden se lotimo vaj »Start Building«..
Končno bomo končali z razdelkom »Več«, v katerem bomo predstavili vadnice, ki se igrajo z vodoravnimi postavitvami, »elastičnimi« videoposnetki, spustnimi meniji in navigacijskimi vrsticami, sličicami in lepljivimi vprašanji s tabelami.
Ampak najprej ...
Tukaj je povzetek dveh vaj, ki sta jih ta teden predstavila avtorja:
Odzivna spletna stran Navigacija
Avtor Thoriq Firdaus - [Oglejte si vadnico]
Tukaj je vadnica, ki vam bo pomagala, da naredite svojo lastno odzivno navigacijo po spletnih straneh. Eden od najpomembnejših vidikov spletne strani je, kako enostavno je krmariti po različnih delih spletnega mesta. Ugotovite, kako to optimizirati s CSS3 s tem vodičem.
Odzivno nadaljevanje
Avtor Jake Rocheleau - [Oglejte si vadnico]
Če ste spletni strokovnjak in spletni življenjepis je že del vaše kariere, potem morate izkoristiti priložnost, da obrnete tudi to življenje. Delodajalcem in strankam olajšajte iskanje na kateri koli napravi. In medtem ko ste pri tem, vaš lastni življenjepis podvoji kot portfelj, kar lahko storite kot razvijalec.
Razbijanje ledu
Kje smo bili? Ah, da, začnimo z ledom!
Vodnik za začetnike po odzivnem spletnem oblikovanju
Nick Petit - [Oglejte si vadnico]
Ta vadnica je odlična izhodiščna točka za začetnike, saj opisuje, kaj pomeni spletno odzivno oblikovanje, kako je prišlo do svetlobe, kot tudi pojasnila o tekočih mrežah in medijskih poizvedbah. Oglejte si tudi vire, ki so navedeni na dnu vadnice.
Uvod v odziven spletni dizajn: Video
Nick Petit - [Oglejte si vadnico]
To je tutorski priročnik, ki je dolg skoraj 9 minut in prepleta površino tega, na kaj se odziva spletni dizajn, kako je nastal, kakšen je vpliv na oblikovanje spletne strani in kateri elementi so vključeni v izdelavo odzivnega spletnega oblikovanja. . Če iščete, da razumete, kaj je odzivno oblikovanje spleta, ne da bi se najprej lotili kodiranja, morate začeti s tem videoposnetkom.
Kako spremeniti katero koli spletno mesto v odgovorno spletno mesto
Avtor Rochester Oliveira - [Oglejte si vadnico]
To je še ena vadnica, ki se začne z osnovami, vendar razčlenjuje vse po bitih, vključno z operacijskim sistemom in brskalniki, ki jih obračate na vašo spletno stran, pa tudi na elemente, ki so prizadeti, ko se spletna stran gleda z različnih naprav. Avtor je predstavil tudi nekaj koristnih vtičnikov za WordPress in jQuery, ki vam bodo olajšali delo.
Odzivno oblikovanje v 3 korakih
Nick La - [Oglejte si vadnico]
V tej vadnici boste razložili, kako lahko ustvarite odzivno spletno oblikovanje z meta oznakami, strukturo HTML in vse pomembne medijske poizvedbe. Potrebujete nekaj znanja o CSS-ju, da ga razumete ...
Oblikovanje odzivnega spleta
Max Luzuriaga - [Oglejte si vadnico]
Tukaj je članek, ki ni toliko tutorski kot je vodnik za ustvarjanje odziven web design. To je rekel, avtor dobesedno vam pove, kaj storiti in kaj storiti pri odzivnem spletnem oblikovanju. Obstajajo pojasnila o tem, zakaj nekatere funkcije niso dovolj odzivne, kako delati z razmerji in moduli, in kar je najbolje, je relativno kratko in enostavno absorbirati.
Odziven spletni dizajn: vizualni vodič
Andrew Gormley - [Oglejte si vadnico]
Če vaje z besedilom, ki so napolnjene, niso izvedljive, namesto tega poskusite s to video vadnico. Še vedno je precej tehnično, če pa se počutite bolje, vam ni treba veliko branja. Dolg je približno 25 minut in video ustvarjalec se hitro premika po delih, kjer kodira, nato se vrne nazaj in pojasni, kaj delajo kode.
Začnite z gradnjo
V redu, začnimo z gradnjo nekaterih odzivnih modelov, začenši z ...
Fluid Grids
Ethan Marcotte - [Oglejte si vadnico]
Recite mrežo, in mislili bi, da so "toge strukture", recimo tekoče, in pomislite, da lahko teče od ene strani zaslona do dna ali zgoraj ali ob strani, ko pritiskate na brskalnik, vendar jih sestavite skupaj in verjetno mislite, da morate pogledati to vadnico, da bi popolnoma razumeli, kako lahko tekoče mreže pripomorejo k boljši odzivnosti vašega modela.
Slike tekočin
Ethan Marcotte - [Oglejte si vadnico]
Do konca tega članka bi morali vedeti, kdo je Ethan Marcotte. Tukaj je namig: on je tisti, ki je oblikoval koncept in izraz za spletne odzivne modele. Njegovo ime se bo precej pojavilo v vseh drugih vadnicah na tem seznamu, zato zakaj ne vzamete nasvet o slikah tekočin naravnost od samega Mojstra?.
Prilagodljivi navigacijski vzorci v odzivnem spletnem oblikovanju
Michael Mesker - [Oglejte si vadnico]
V tej vadnici so predstavljene lekcije, ki jih je avtor naučil od dela na obsežnem odzivnem spletnem projektu. Preberite njegov »sprehod« o tem, kako ustvariti predloge, ki jih je lažje konfigurirati za uporabniku prijazne in odzivne rezultate. To je odličen pogled v zakulisje razumevanja, kako oblikovati vmesnike na najboljši način za namizne, tablične in mobilne poglede.
Odzivno spletno oblikovanje s poizvedbami CSS3 Media
Nick La - [Oglejte si vadnico]
In še ena odlična vadnica, s katero boste izvedeli, kako oblikovati spletno predlogo, ki se odziva na brskalnik, s HTML5 in CSS3. Gre za postopen pristop in obstajajo predstavitve spletnega oblikovanja pred in po izvedbi medijskih poizvedb, da bi bolje ocenili vpliv medijskih poizvedb..
Učinki CSS: vesoljske slike ven na višino besedila
Zoe Mickley Gillenwater - [Oglejte si vadnico]
V tej vadnici se naučite trika, kako slike fiksne širine spreminjajo njihovo velikost in razmik, da se ujemajo s spremljajočim besedilom, ne glede na to, kako se spreminja velikost okna brskalnika..
Prilagodljive oblike s poizvedbami za medije
Avtor Aaron Gustafson - [Oglejte si vadnico]
Več o uporabi prilagodljivih ali prilagodljivih postavitev s poizvedbami CSS medijev. Samo sledite vaji in se naučite prilagajati svoj dizajn pogledu na dvojni stolpec ali pogled z enim stolpcem ter pripraviti zasnovo za iPhone in iPad.
Odzivne slike: eksperimentiranje s spreminjanjem velikosti slike, ki se zaveda konteksta
Scott Jehl - [Oglejte si vadnico]
Tukaj je vadnica, ki je uporabila pristop gradnje iz mobilnega. Ta tehnika določa večjo velikost slik, ki jih je mogoče uporabiti na večjih ločljivostih zaslona, minus zahteve po slikah in UA sniffing.
Naredi več
Elastični videoposnetki
Nick La - [Oglejte si vadnico]
Ta vadnica obravnava spreminjanje velikosti videoposnetkov, ko se spremeni velikost okna brskalnika. To je v bistvu CSS trik in tam je demo, da vidite trik pri delu v sami vadnici.
Skrivanje in odkrivanje delov slik
Zoe Mickley Gillenwater - [Oglejte si vadnico]
Vadnica je dejansko vzeta iz avtorjeve knjige in opisuje, kako razkriti ali skriti dele slik, odvisno od ločljivosti zaslona. Naučil vas je, kako dinamično obrezati slike, ko se spremeni velikost zaslona, kar vam pokaže le del celotne slike, če je prostor omejen.
Odzivni navigator vsebine s CSS3
Mary Lou - [Oglejte si vadnico]
Ali raje uporabite način za uporabnike, da se pomikajo okoli vaše strani? Nato preberite ta priročnik in se naučite kodirati v nekaterih kul prehodih: zbledi, diapozitivi, rotacije in povečanje. Prehodi so v bistvu vsebinske plasti, ki so bile prikazane ali skrite s posebnim kodiranjem.
Ustvarite odzivno predlogo za spletno oblikovanje
Avtor Harry Atkins - [Oglejte si vadnico]
To je kratek vodnik za pripravo odziva spletna predloga ki deluje tako na namizju kot tudi na iPhoneu.
Odzivna vodoravna postavitev
Mary Lou - [Oglejte si vadnico]
Ta vadnica vas uči, kako ustvariti vodoravno postavitev z več plošče z vsebino, ki se lahko premika. Uporaba Izvor vrst kot vzorčno besedilo je vsako poglavje knjige ločeno v stolpcih, ki so postavljeni drug ob drugem v načinu celotnega brskalnika, vendar se je pri zmanjšanju na dovolj majhno, postavitev spremeni v popolnoma navpično »knjigo«..
Pretvarjanje menija v spustni meni za majhne zaslone
Avtor Chris Coyier - [Oglejte si vadnico]
Ta vadnica vam bo pokazala, kako pretvoriti meni v spustni seznam, ko je okno brskalnika ozko ali ko ste na mobilni napravi. Vrstica povezav v zgornjem desnem kotu strani se pretvori v spustni meni, da prihranite prostor brez žrtvovanja navigacijskih možnosti..
Prilagodljivo harmonikasto drsenje
Mary Lou - [Oglejte si vadnico]
Več o tem, kako ustvariti preprosto in prilagodljivo postavitev harmonike s prehodom pojemanja in nastavljivimi širinami glede na velikost zaslona in ločljivost.
Uporaba poizvedb za medije CSS3 Orientation
Avtor Ryan Seddon - [Oglejte si vadnico]
Glede na preprosto pravilo, ki definira portretne (višje kot širina) in krajinske (širina večje od višine) načine, lahko napišete medijsko poizvedbo, da ciljate na določene sloge glede na način, v katerem ga gledate. Ta vadnica nam bo pokazala, kako narediti prav to in je na voljo s povezavo do kameleona, ki spreminja barvo in uporablja barvo za prikaz te spremembe, ko krčite okno brskalnika..
Odzivne podatkovne tabele
Avtor Chris Coyier - [Oglejte si vadnico]
Tabele so vir glavobolov pri majhnih velikostih zaslona, vendar to ne pomeni, da se moramo v celoti izogibati tabelam. Več o tem, kako uporabiti poizvedbe medijev za popolno spreminjanje formatov tabele, ko preklopite na velikost zaslona za mobilne naprave. Oglejte si demo, da dobite idejo o čarobnosti, ki jo lahko naredite na podlagi te vadnice.
Fluid CSS3 Diaprojekcija z učinkom paralakse
Z Ring Wing - [Oglejte si vadnico]
Ustvarite diaprojekcijo CSS3, kjer uporabljate dve sliki ozadja in ko se položaji ozadja spremenijo, se pokaže paralaksni učinek. Poleg tega je diaprojekcija fleksibilna, sama spreminjanje velikosti, ko se okno brskalnika zapre.
Kako zgraditi odzivno galerijo sličic
Avtor Joshua Johnson - [Oglejte si vadnico]
To je super za spletne strani, ki v galeriji prikazujejo sličice. Ko spremenite velikost okna brskalnika, se postavitev spremeni tako, da zavzame dva stolpca (manjše velikosti zaslona) in pet (največ) stolpcev. Za več podobnih diaprojekcij in drsnikov si oglejte naš članek 10 najboljših odzivnih slikovnih galerij / diaprojekcij.
Optimizacija e-pošte za mobilne naprave
Avtor Ros Hodgekiss - [Oglejte si vadnico]
Tudi e-poštna sporočila se lahko optimizirajo za pogled na majhen zaslon, kot so spletne strani. Večino časa je besedilo v e-poštnem sporočilu HTML spremenjeno na točko, ki ni narejena za udobno branje; Naučite se upravljati to in še več iz tega vodiča.
uporabo okvirov
Z okostjem zgradite odzivno mobilno spletno stran
Avtor Joshua Johnson - [Oglejte si vadnico]
Skeleton je odličen okvir za izgradnjo odzivnih spletnih strani z njim. Ta vadnica vas popelje v korak po korak navodila o tem, kako uporabiti ogrodje Skeleton za gradnjo odličnih odzivnih modelov. Presenečeni boste, ko boste videli, kako enostavno je izvajati.
Odziven spletni dizajn z HTML5 & manj okvirjem 3
Louis Simoneau - [Oglejte si vadnico]
Če še niste bili pravilno predstavljeni v Lessu, potem preverite naš lastni Less CSS tutorial prvi, da dobite okus manj. V tej vadnici smo uporabili okvir Less, da bi lahko jasno videli učinke medijskih poizvedb.
Zaključek
In to zaključuje naše Odzivno spletno oblikovanje serije. Upamo, da so teme, orodja in drugi viri, ki so bili predstavljeni v tej seriji, pomagali našim bralcem razkriti koncept odzivnega spletnega oblikovanja. Toda kako bomo vedeli, če nam ne boste povedali?
Sporočite nam svoje povratne informacije o seriji in če imate predloge za več idej, ki jih želite videti na hongkiat.com. Spustite nam vrstico ali komentar spodaj.
