30 Korisni odgovarajući web-vodiči
Došli smo do kraja našeg "Tjedan prilagodljivog web-dizajna", večerašnji post će biti posljednji u nizu. Svi ćemo vam pomoći da usavršite svoje vještine u manipuliranju tim kodovima kako biste odgovorili po volji kada se prikazuju na različitim uređajima. A da bismo to učinili, mi smo predstavljeni 30 Prilagodljivi vodiči za web-dizajn pronađeno na mreži. Ovaj popis nije zamišljen kao iscrpan, ali će vas početi shvaćati osnove oblikovanja prilagodljive web-lokacije koja će zadovoljiti sve vrste zaslona.
Započet ćemo s uvodnim tutorijalima u 'Breaking the Ice', nešto poput klase RWD: 101 koju biste trebali pohađati kako biste dobili koncept prije nego što pređemo na vježbe 'Start Building'..
Na kraju ćemo završiti s odjeljkom 'Do More' u kojem ćemo predstaviti tutorijale koji se igraju s horizontalnim izgledom, 'elastičnim' videozapisima, padajućim izbornicima i navigacijom na harmonici, sličicama i problematičnim izdanjima tablica.
Ali prvo…
Evo recenzije dva vodiča koje su naši autori objavili ranije ovog tjedna:
Odgovarajuća web stranica Navigacija
Autor Thoriq Firdaus - [Pogledajte vodič]
Ovo je vodič koji će vam pomoći da napravite vrlo vlastitu navigaciju web-mjesta. Jedan od najvažnijih aspekata web stranice je kako je lako ploviti kroz različite dijelove web-lokacije. Saznajte kako to optimizirati pomoću CSS3 uz ovaj vodič.
Odgovarajući životopis
Autor Jake Rocheleau - [Pogledajte vodič]
Ako ste web profesionalni i online životopis je već sastavni dio vaše karijere, onda biste trebali iskoristiti priliku da uključite i taj nastavak. Olakšajte poslodavcima i klijentima da vas pronađu na bilo kojem uređaju. I dok ste na tome, svoj životopis podvlači kao portfelj onoga što možete učiniti kao programer.
Razbijanje leda
Gdje smo stali? Ah da, pokrenimo akciju razbijanja leda!
Vodič za početnike za odgovarajući web dizajn
Nick Petit - [Pogledajte vodič]
Ovaj tutorial je izvrsna polazna točka za početnike jer opisuje što web dizajn odgovara, kako je došao na vidjelo, kao i objašnjenja o fluidnim mrežama i medijskim upitima među ostalima. Pogledajte i resurse navedene na dnu tutoriala.
Uvod u odgovarajući web dizajn: Video
Nick Petit - [Pogledajte vodič]
Ovo je tutorijal dugačak 9 minuta koji skenira površinu onoga što odgovara web dizajnu, kako je nastao, utjecaj koji ima na dizajn web-lokacije i koji su elementi uključeni u izradu web-dizajna , Ako ste u potrazi za razumijevanje onoga što odgovara web dizajnu bez da se najprije upišete u kodiranje, trebali biste početi s ovim videozapisom.
Kako pretvoriti bilo koju web stranicu u odgovornu stranicu
Autor Rochester Oliveira - [Pogledajte vodič]
Ovo je još jedan tutorial koji počinje od osnove, ali razbija sve dolje malo po malo, uključujući OS i preglednike koje okrećete vaše web stranice odgovara za, kao i elemente koji su pogođeni kada se web stranica je pregledan iz različitih uređaja. Autor je također sadržavao neke korisne dodatke za WordPress i jQuery koji će vam olakšati rad.
Osjetljiv dizajn u 3 koraka
By Nick La - [Pogledajte vodič]
Ovaj vodič će vam objasniti kako možete izraditi web dizajn s meta tagovima, HTML strukturom i svim važnim medijskim upitima. Potrebno vam je malo znanja o CSS-u da biste ga razumjeli ...
Projektiranje za prilagodljiv web
Max Luzuriaga - [Pogledajte vodič]
Evo članka koji nije toliko tutorial kao što je vodič za stvaranje odgovarajući web dizajn. To je rekao, autor vam doslovno govori kako i zašto ne odgovara na web dizajn. Postoje objašnjenja o tome zašto određene značajke nisu dovoljno osjetljive, kako raditi s proporcijama i modulima, a najbolje od svega, relativno je kratko i lako se apsorbira.
Odgovarajući web dizajn: vizualni vodič
Andrew Gormley - [Pogledajte vodič]
Ako tekstualni vodiči nisu izvedivi, umjesto toga pokušajte s ovim videoupravom. Još je uvijek tehnički, ali ako se osjećate bolje, ne morate puno čitati. Duga je oko 25 minuta, a video-uređaj zapravo brzo prolazi kroz dijelove u kojima kodira, a zatim se vraća i objašnjava što kodovi rade.
Započnite s izgradnjom
U redu, počnimo s izgradnjom nekih odgovarajućih dizajna, počevši s ...
Fluid Grids
Ethan Marcotte - [Pogledajte vodič]
Recite rešetku, i pomislili biste "krute strukture", recimo fluidne i pomislili biste da bi to moglo protjecati s jedne strane zaslona na dno ili na vrh ili na stranu kada pritisnete preglednik, ali stavite ih zajedno i vjerojatno biste mislili da trebate pogledati ovaj vodič kako biste u potpunosti razumjeli kako tekuće mreže mogu pomoći da vaš dizajn bude brži.
Slike fluida
Ethan Marcotte - [Pogledajte vodič]
Do kraja ovog članka, trebali biste znati tko je Ethan Marcotte. Evo nagovještaja: on je taj koji je smislio koncept i pojam za web-dizajn koji odgovara potrebama. Njegovo će se ime pojaviti u svakom drugom vodiču na ovom popisu pa zašto ne biste poslušali savjete o fluidnim slikama izravno od samog majstora?.
Skalabilni navigacijski obrasci u prilagodljivom web dizajnu
Michael Mesker - [Pogledajte vodič]
Ovaj tutorijal govori o lekcijama koje je autor naučio iz rada na velikom web-dizajnu. Pročitajte njegov "prohod" o tome kako stvoriti predloške koje je lakše konfigurirati za user-friendly i responsive rezultate. To je sjajan pogled iza kulisa u razumijevanju kako dizajnirati sučelja na najbolji način za desktop, tablet i mobilne prikaze.
Odgovarajući web dizajn s CSS3 medijskim upitima
By Nick La - [Pogledajte vodič]
I još jedan odličan vodič koji će vam pomoći da naučite kako dizajnirati predložak web-mjesta koji odgovara web-pregledniku s HTML5 i CSS3. Pristup korak-po-korak, a postoje i demonstracije web-dizajna prije i nakon implementacije medijskih upita radi boljeg razumijevanja utjecaja medijskih upita.
CSS efekti: Space Images Out na visinu teksta
Zoe Mickley Gillenwater - [Pogledajte vodič]
Ovaj tečaj vas navodi da naučite trik izrade slika fiksne širine kako biste promijenili njihovu veličinu i razmak kako biste se uskladili s pripadajućim tekstom, bez obzira na to kako se mijenja prozor preglednika.
Prilagodljivi izgledi s upitima medija
Aaron Gustafson - [Pogledajte vodič]
Saznajte kako koristiti prilagodljive ili fleksibilne izglede s CSS medijskim upitima. Samo slijedite vježbu kako biste naučili prilagoditi dizajn dizajnu dvostrukog stupca ili prikazu u jednom stupcu, kao i pripremiti dizajn za iPhone i iPad.
Odgovarajuće slike: eksperimentiranje s veličinom slike osviještene kontekstom
Scott Jehl - [Pogledajte vodič]
Evo udžbenika koji je koristio pristup izgradnje-od-mobilnog-prvi. Ova tehnika određuje veću veličinu za slike koje će se koristiti na većim razlučivostima zaslona, manje zahtjeve za slikama, kao i UA njuškanje.
Učinite više
Elastični videozapisi
By Nick La - [Pogledajte vodič]
Ovaj se vodič bavi skaliranjem videozapisa kako se mijenja veličina prozora preglednika. To je u biti CSS trik i tu je demo za vidjeti trik na poslu u samom tutorialu.
Skrivanje i otkrivanje dijelova slika
Zoe Mickley Gillenwater - [Pogledajte vodič]
Vodič je zapravo preuzet iz knjige autora, opisujući kako otkriti ili sakriti dijelove slika ovisno o razlučivosti zaslona. Ona vas uči kako dinamički obrezivati slike kada se promijeni veličina zaslona, prikazujući vam samo dio slike kada je prostor ograničen.
Odgovarajući Navigator Sadržaja s CSS3
Mary Lou - [Pogledajte vodič]
Preferirate li način na koji korisnici mogu kretati oko vas? Zatim biste trebali pročitati ovaj vodič kako biste saznali kako kodirati neke cool prijelaze: fade in, slides, rotations i scaling up. Prijelazi su u biti sadržajni slojevi koji su prikazani ili skriveni specifičnim kodiranjem.
Izradite prilagodljiv predložak za web-dizajn
Harry Atkins - [Pogledajte vodič]
Ovo je kratki vodič za izradu odgovora web predložak koji radi i na radnoj površini kao i na iPhoneu.
Odgovarajući horizontalni raspored
Mary Lou - [Pogledajte vodič]
Ovaj vodič vas uči kako stvoriti horizontalni izgled s nekoliko panela sadržaja koji se mogu pomicati. koristeći Podrijetlo vrsta kao uzorak teksta, svako poglavlje knjige odvojeno je u stupcima postavljenim jedan pored drugoga u načinu rada punog preglednika, ali kada je smanjen na dovoljno mali, izgled se mijenja u potpuno okomitu knjigu za pomicanje.
Pretvorite izbornik u padajući izbornik za male zaslone
Autor Chris Coyier - [Pogledajte vodič]
Ovaj će vam vodič pokazati kako pretvoriti izbornik u padajući popis kada je prozor preglednika uski ili kada ste na mobilnom uređaju. Redak veza u gornjem desnom kutu stranice pretvara se u padajući izbornik radi uštede prostora bez žrtvovanja opcija za navigaciju.
Fleksibilno klizno na vrhu
Mary Lou - [Pogledajte vodič]
Saznajte kako stvoriti jednostavan i fleksibilan raspored harmonike, s prelazima s nestajanjem i podesivim širinama na temelju veličine zaslona i razlučivosti.
Kako koristiti CSS3 orijentacijske medijske upite
Autor Ryan Seddon - [Pogledajte vodič]
Na temelju jednostavnog pravila koje definira portretne (visine veće od širine) i pejzažne (širine veće od visine) načina, možete napisati medijski upit za ciljanje određenih stilova na temelju načina na koji ga gledate. Ovaj će nam vodič pokazati kako to učiniti i dolazi s vezom na kameleon koji mijenja boju i koji koristi boju kako bi prikazao tu promjenu dok ste smanjili prozor preglednika.
Odgovarajuće tablice podataka
Autor Chris Coyier - [Pogledajte vodič]
Tablice su izvor glavobolja kada su u pitanju male veličine zaslona, ali to ne znači da moramo potpuno izbjegavati tablice. Saznajte kako upotrijebiti medijske upite kako biste u potpunosti promijenili formate tablice prilikom prebacivanja na veličinu zaslona mobilnog uređaja. Pogledajte demo da biste dobili ideju o magiji koju možete napraviti na temelju ovog vodiča.
Fluid CSS3 Slideshow s efektom paralakse
By Ring Wing - [Pogledajte vodič]
Napravite slideshow CSS3 gdje se koriste dvije pozadinske slike i kada se mijenjaju pozicije pozadina, vidi se efekt paralakse. Osim toga, slideshow je fleksibilan, mijenjajući veličinu sebe dok se prozor preglednika zatvara na njemu.
Kako izgraditi prilagodljivu galeriju sličica
Joshua Johnson - [Pogledajte vodič]
Ovo je super za web-lokacije koje prikazuju minijature u galeriji. Promjenom veličine prozora preglednika, izgled se mijenja tako da zauzima između dva stupca (manje veličine zaslona) i pet (maksimalno) stupaca. Za više sličnih slajdova i klizača, pogledajte naš članak 10 najboljih besplatnih slikovnih galerija / dijaprojekcija.
Optimizirajte svoju e-poštu za mobilne uređaje
Autor: Ros Hodgekiss - [Pogledajte vodič]
Čak i poruke e-pošte mogu biti optimizirane za prikaz na malom zaslonu, kao što su web-lokacije. Većinu vremena tekst u HTML e-pošti se mijenja do točke koja nije napravljena za ugodno čitanje; s ovim uputama naučite kako upravljati ovim i više.
pomoću okvira
Izgradite prilagodljivu mobilnu web-stranicu s kosturom
Joshua Johnson - [Pogledajte vodič]
Skeleton je strašan okvir za izgradnju odgovarajućih web-mjesta s njim. Ovaj tutorial vas vodi u korak-po-korak vodič o tome kako koristiti okosnicu okvira za izgradnju strašan odgovarajući dizajna. Bit ćete zapanjeni da vidite kako je lako implementirati.
Odgovarajući web dizajn s HTML5 i manje okvirom 3
Louis Simoneau - [Pogledajte vodič]
Ako niste bili dobro upoznati s Lessom, tada provjerite naš vlastiti Less CSS tutorial prvi da biste dobili okus Lessa. U ovom je vodiču korišten okvir Less (Manje) da biste jasno vidjeli učinke medijskih upita.
Zaključak
I to zaključuje naše Odgovarajući web dizajn niz. Nadamo se da su teme, alati i ostali resursi prikazani u ovoj seriji pomogli našim čitateljima u otkrivanju koncepta web-dizajna. Ali kako ćemo znati ako nam ne kažete?
Javite nam svoje povratne informacije na seriji i ako imate prijedloge za više ideja koje želite vidjeti na hongkiat.com. Stavite nam redak ili komentar ispod.
