19 doista korisnih vodiča za web dizajn

Responzivni web dizajn više nije neobavezan; web stranice ovih dana jednostavno moraju reagirati. Srećom, RWD je lakše implementirati nego ikad jer postoji toliko sjajnih alata koji će vam pomoći u stvaranju i testiranju dizajna te osigurati stvaranje najboljih korisničko iskustvo .

Evo našeg pregleda nekih od najboljih resursa koji će vas voditi u tome da vaše web stranice rade dobro i izgledaju sjajno na bilo kojem uređaju. Želite još korisnih resursa? Naši vodiči za najbolje graditelj web stranica i web hosting službe su tu da vam pomognu. A ako vas brine sigurno spremanje datoteka, trebaju vam ove sjajne pohrana u oblaku mogućnosti.



01. Kako početi razmišljati odgovorno

Odzivni vodiči za web dizajn: Kako početi razmišljati odgovorno



kako fotografirati umjetnost za portfelj
Uđite u odgovarajuće stanje uma(Slika zaslužna: FreeCodeCamp)

U ovaj post na FreeCodeCampu , Kevin Powell ističe važnost da responzivni web dizajn više nije trend; to je način na koji se očekuje izrada web mjesta, a to znači razmišljanje od početka. Ovdje pokazuje kako ući u prilagodljiv mentalni sklop, istovremeno gradeći web stranicu s 3 stranice koja u potpunosti reagira.

02. 9 odzivnih tipografskih savjeta

Odzivni vodiči za web dizajn: 9 responzivnih savjeta za tipografiju



Zatražite odgovarajuće savjete stručnjaka(Slika pripisana: Adam Banks)

Responzivni web dizajn, naravno, dovoljno je da odgovara prilagodljivoj tipografiji. Ali što to uopće znači i kako to provodite? Pitali smo sedam vodećih web dizajnera za savjete o stvaranju elegantnog, čitljivog teksta u svakom prozoru.

03. Pravila responzivne web tipografije

Pravila responzivne web tipografije

Slijedite ove savjete kako biste ispravno reagirali na svoju web-tipografiju

Responzivna web tipografija je teška - morate imati i dizajnerske odreske i tehničku stručnost. No koliko god bilo nezgodno, pogrešno shvaćanje nije opcija, jer je tipografija temelj web dizajna. slijediti ova načela dizajna i praktična rješenja da to ispravno shvatim.



04. Dizajnirajte responzivno web mjesto s veličinom na temelju em

Dizajnirajte responzivno web mjesto s veličinom na temelju em

Izgradite svoje stranice tako da se dizajn ne pokvari ako se veličina fonta promijeni

Korištenjem em jedinica za veličinu fonta možete na stranici dizajnirati komponente koje automatski reagiraju u slučaju promjene veličine fonta. Tada pametnim trikom za prilagodljivu veličinu fonta možete izraditi cijelu stranicu koja se dinamički prilagođava na temelju širine prikaza preglednika. Slijedite ovaj vodič naučiti kako iskoristiti 'relativno' ponašanje ems-a za stvaranje dizajna koji je skalabilan i odgovara.

05. Prioritetni vodiči: alternativa žičanim okvirima koja je prva sadržajna

Prioritetni vodiči: alternativa žičanim okvirima koja je prva sadržajna

Saznajte zašto biste trebali koristiti prioritetne vodiče, a ne žičane okvire

Žičani okviri mogu biti najrašireniji alat za dizajniranje web stranica, aplikacija i drugih digitalnih sučelja, ali nisu bez nedostataka, posebno kada je riječ o responzivnom dizajnu. Ovdje Heleen van Nues i Lennart Overkamp predstavljaju svoju omiljenu alternativu žičanim okvirima: vodiči za prioritet , koji sadrže sadržaj i elemente za mobilni zaslon, poredane po hijerarhiji od vrha do dna i bez specifikacija izgleda.

06. Profesionalni vodič za responzivni web dizajn

Profesionalac

Izradite bolja web mjesta za bilo koji uređaj pomoću ovog vodiča

Napisao Justin Avery , kustos biltena Responsive Design Weekly, ovaj vodič iz mrežnog časopisa vodi web profesionalce kroz osnove do naprednijih tehnika responzivnog web dizajna.

07. Kako dizajnirati responzivne i agnostičke forme uređaja

Odzivni oblici koji se prilagođavaju različitim uređajima

Provjerite rade li obrasci bez obzira na uređaj

Obrasci su jedan od najvažnijih elemenata u bilo kojem digitalnom dizajnu proizvoda, a treba li vam protok prijave ili koračnica s više prikaza, trebate ga dizajnirati tako da će učinkovito raditi na mobilnim uređajima jednako kao i na radnoj površini. Evo kako to učiniti , zajedno s korisnim savjetima o korištenju Flexboxa.

08. Stvorite responzivni izgled s CSS mrežom

Dizajner izrada web stranice CSS Grid

Izradite web stranicu portfelja sjajnog izgleda pogodnu za sve okvire prikaza

CSS Grid Layout svakim danom raste u podršci preglednika, i premda nije zamjena za Flexbox ili čak za plutajuće, kada se koristi u kombinaciji s njima, to je izvrstan način za stvaranje novih i uzbudljivih responzivnih izgleda. Slijedite ovaj detaljni vodič izgradnji odgovarajuće web stranice portfelja pomoću Grid-a.

09. Vodič web dizajnera za Flexbox

Flexbox stupci označeni 1 2 3 4 5 strelicom koja pokazuje da je glavna os vodoravna

Započnite s Flexboxom

Jeste li već počeli koristiti Flexbox? U ovom vodiču Wes Bos pruža a sveobuhvatan vodič do temeljnih koncepata koji će vam pružiti čvrsto razumijevanje svega što vam je potrebno da biste se uhvatili u koštac s ovim moćnim alatom.

10. Codrops Flexbox referenca

Snimka zaslona Codrops kaže

Kompletni vodič Sara Soueidan

Ovaj cjelovit vodič za Flexbox napisala je Sara Soueidan, autorica koja je poznata po svojoj sposobnosti objašnjavanja koncepata na način koji je lako slijediti, a da se ne štedi na detaljima. Vodič za Codrops redovito se ažurira, pa je sjajan resurs kojem se možete vratiti kad vam zatreba.

11. Stogovi: Flexbox za skicu

Snimka zaslona za srednji članak kaže

Nabavite Flexbox mogućnosti u programu Sketch

Snopovi, dio dodatka Auto Layout, pružaju vam način upotrebe tehnologije Flexbox u programu Sketch, bez upotrebe CSS-a. ovaj članak objašnjava kako možete iskoristiti ovu moćnu tehniku ​​za jednostavan dizajn.

12. Tečaj sudara u tehničkim pogonima na vučni pogon

Tečaj pada u snimci zaslona tehničkog odgovora na web dizajn

Upoznajte se s osnovama responzivnog web dizajna

Pišući na blogu Treehouse, Jerry Cao sažeo je mnoštvo korisnih informacija u relativno kratak, čitljiv članak.

13. Stvorite fleksibilne izglede pomoću Susy i Breakpoint

Zasloni uređaja koji prikazuju prilagodljivi izgled web stranice prilagođen svakom omjeru

Sass ekstenzije kako bi se pobrinule za matematiku koja reagira

Ako ne želite koristiti okvir za izradu svojeg responzivnog web mjesta, ova Sassova proširenja su lijepa alternativa, svaka sa svojim snagama. Oni će se za vas pobrinuti za odgovarajuću matematiku kako biste se mogli usredotočiti na dizajn.

14. Kako stvoriti responzivne vodiče u Adobe XD

Odgovarajući vodiči izrađeni u Adobe XD

Adobe Experience Design (XD) je UX i alat za izradu prototipova

Ako želite isprobati Adobe Experience Design (XD) , evo dobar tutorial za početak. Uključuje video demonstraciju koja vas vodi kroz svaki klik postupka.

15. CSS na BBC Sport

Snimka zaslona web stranice BBC Sport

Lagan CSS za veliku responzivnu web lokaciju

Ovo samo po sebi nije udžbenik, ali ovdje se puno uči. U ovom postu , prvi iz dvodijelne serije, frontend programer Shaun Bent vodi nas u detaljan obilazak kako se CSS radi na BBC Sport. Uspjeli su održati CSS temelje ove masivne stranice ispod 9 kb, a fascinantno je vidjeti kako je to učinjeno.

Snimak zaslona CSS trikova započinjući članak s

Načini ljepljenja podnožja Chrisa Coyiera

Ljepljivo podnožje ... to bi trebalo biti dovoljno jednostavno, zar ne? Nažalost ne. Može biti nezgodnije nego što biste očekivali da ćete podnožje postaviti na pravo mjesto na svakom uređaju. Srećom Chris Coyier je sastavio pet trikova to će vam pomoći da to učinite pomoću izračun () , Flexbox, negativne marže i rešetka.

17. Prilagođavanje ulazu

Tablica prikazuje udoban, ugodan i kompaktan dizajn teksta na različitim veličinama zaslona

Provjerite može li vaša responzivna web lokacija prihvatiti ulaz s bilo koje vrste uređaja

Responzivni dizajn nije samo u tome da vaša stranica pravilno prikazuje na bilo kojem uređaju, već morate i dobro funkcionirati - a to znači da mora biti dobar u prihvaćanju unosa u svijetu u kojem stolna računala imaju dodirne zaslone, a telefoni tipkovnice. ovaj članak Jason Grigsby iz Oblaka Four ima nekoliko dobrih savjeta.

18. Naši najbolji postupci su ubijanje performansi mobilnog weba

Snimak zaslona čitanja članka

Razlozi učinka moraju funkcionirati i za mobilne uređaje

Primijenjeni bez razmatranja, određeni najbolji primjeri iz prakse stvoreni tijekom ere stolnih računala mogu imati štetan učinak na izvedbu mobilnog weba. ovaj članak natjerat će vas da dublje razmislite o tome kako postižete da vaša web lokacija dobro funkcionira na mobilnim uređajima.

19. Kako napraviti responzivne web aplikacije s upitima za spremnike

Zasloni različitih dimenzija koji prikazuju skaliranje makete web-aplikacije

Naučite kako napraviti medijsku ljestvicu pomoću upita za spremnike

Naučite kako transformirati lijepu, složenu web aplikaciju - s komponentama, stanjima i interakcijama - u različite dimenzije i rezolucije, pomoću quiera kontejnera .

Povezani članci: