Sadržaj
- Dizajniranje za nepoznato
- Pragmatičan pristup dizajnu
- Postati agnostik izgleda
- Kodiranje postupno
- Zaron u nadoknadu
Čini se da svi danas govore o responzivnom web dizajnu i to s razlogom; kako broj uređaja s omogućenom mrežom i dalje raste - svaki s različitim mogućnostima i značajkama - više nije smisleno izrađivati web stranice fiksne širine.
Istina je, nikad nije bila. Ipak, do sada se smatralo najboljom praksom dizajnirati iskustva koja su stvorila brojne pretpostavke, bilo da se radi o razlučivosti zaslona, propusnosti ili načinu unosa. Ako ste ikad dizajnirali web mjesto široko 960 piksela, samo da biste ga pogledali na prijatelju na malom zaslonu (i da, pišem iz bolnog iskustva ovdje), shvatit ćete zašto ovo nije bio posebno pametan pristup. Sad, kada se pametni telefoni i tableti bace u kombinaciju, jasno je da naše tradicionalne metode više nisu prikladne za svoju svrhu.
Srećom, pojava CSS medijskih upita i sve veće priznanje da je web medij sam za sebe, znači da počinjemo prihvaćati pravu prirodu platforme, prihvaćajući da je njezina univerzalnost snaga, a ne slabost.
Sljedećih pet dana vodit ću vas kroz tehniku koja prepoznaje ovu činjenicu: responzivni web dizajn. Razvio ga je Ethan Marcotte, a kombinira fluidne izglede, fleksibilne slike i medijske upite kako bi nam pomogao da napravimo web stranice koje se graciozno prilagođavaju bilo kojem okruženju s kojim se susreću.
Pokazat ću ovaj pristup pokazujući vam kako napraviti jednostavnu galeriju medija. U svojim primjerima izradit ću malu web stranicu koja će dokumentirati nedavno putovanje kojim sam prošao Sjedinjene Države, ali slobodno prilagodite kôd i dizajn prema vlastitim potrebama.
Dizajniranje za nepoznato
Većina ovog vodiča usredotočit će se na razvojni aspekt responzivnog dizajna. No, prije nego što istražimo bilo koji kod, uzmimo trenutak da razmislimo kako bismo mogli dizajnirati web stranicu koja bi mogla imati beskonačne izglede.
Sad imam sreće u tome što mogu dizajnirati sučelja i razviti frontend kôd koji ih čini stvarnima. Ovo naravno nije jedinstvena vještina - ako radite za sebe, vjerojatno ste isti. No, zasigurno je korisno razumjeti kako se sadržaj može prilagoditi i pretočiti prilikom izrade dizajna fluida.
Također radim kao dio većeg tima gdje je moja uloga više specijalizirana. U takvom okruženju vizualni dizajner može se usredotočiti samo na prevođenje žičanih okvira u atraktivne, privlačne (odjavljene, savršene piksele) komade. I nije neobično da se programeri nalaze odvojeno, prevodeći te izglede u vitke i učinkovite oznake i CSS.
Međutim, takvi linearni i odvojeni tijekovi rada brzo se kvare kad počnemo procjenjivati kako će se dizajni prilagoditi različitim okruženjima. Kao i bilo koji novi alat ili tehnologija, trebali bismo razmotriti i suradljiviji i agilniji način rada. Mnogi najteži problemi s kojima se susreću prilikom dizajniranja responzivnih web stranica mogu se riješiti jednostavnim razgovorom, eksperimentiranjem i ponavljanjem.
Pragmatičan pristup dizajnu
To ne znači da dizajneri nemaju prostora razmišljati o tome kako dizajn može raditi izvan granica bilo kojeg određenog uređaja.
U tvrtki Clearleft pokrećemo vizualni dizajn iz perspektive radne površine. Započinjemo definiranjem sveobuhvatnog dizajnerskog jezika i vizualne estetike, često temeljeći početna istraživanja oko temeljnog dijela sadržaja. Na primjer, ako dizajniramo web mjesto s hranom, započet ćemo sa stranicom s receptima; za web mjesto vijesti, stranicu priče.
Ne samo da je ovo važna stranica na web mjestu, već vjerojatno uključuje dovoljno strukturiranog sadržaja da bismo mogli stvoriti tipografsku paletu. Razmislit ćemo i o tome kako se izgled može prilagoditi - čak i ako nam je u ovoj fazi u glavi.
Jedan od korisnih načina testiranja otpornosti na stres je zauzeti takvu stranicu i prilagoditi je za uži (približno 320 piksela) zaslon. Vjerojatno ćete otkriti da će neke aspekte dizajna trebati preispitati kako bi mogli raditi na ovoj širini. Evo nekoliko primjera:
- Tipografija: Veliki naslovi mogu dobro funkcionirati na širim izgledima, ali na manjim zaslonima mogu zauzimati puno okomitog prostora i zato zahtijevaju dodatno pomicanje. Kako se duljine linija mijenjaju, trebali biste uzeti u obzir visine linija i druge tipografske tretmane.
- Veze: Kako će vaš dizajn funkcionirati na uređajima osjetljivim na dodir? Iako ih još uvijek nemamo jednostavan način otkriti (što znači da bismo trebali uzeti u obzir u svim aspektima našeg dizajna), projektiranje užeg zaslona može nam pružiti priliku da razmislimo o ciljanim područjima za poveznice i druge interaktivne elemente . Smjernice za iOS preporučuju da budu najmanje 44 piksela po bodovima, što je dobra brojka kojoj treba težiti.
- Navigacija: Ovo će vjerojatno biti najneugodnija komponenta bilo kojeg responzivnog dizajna, pogotovo ako vaše web mjesto ima mnogo odjeljaka i duboku hijerarhiju. Brad Frost napisao je sažetak nekih različitih pristupa navigaciji koji se trenutno razmatraju.
- Suvišan sadržaj: Nije li potreban neki sadržaj? Treba li drugi sadržaj prikazivati samo u određenim scenarijima? Ne zagovaram skrivanje sadržaja na temelju toga koji uređaj korisnik slučajno koristi, ali tehnike poput uvjetnog učitavanja (koje ćemo pogledati kasnije ovog tjedna) mogu nam pomoći da poslužimo manje stranice koje dopunski sadržaj učitavaju samo kada je to potrebno.
Dizajniranje dva kontrastna izgleda jača ideju da će se dizajn prilagoditi, dok se rano pegla potencijalni problem. Iako ovo zvuči kao udvostručavanje posla, imajte na umu da ne dizajniramo svaku stranicu s piksel-savršenom preciznošću. Umjesto toga, usredotočujemo se na izgradnju skalabilnog dizajnerskog jezika - onog koji će se razvijati kad ga počnemo implementirati u kod, i koji se temelji na pojedinačnim modulima i komponentama.
Postati agnostik izgleda
Nije iznenađujuće da su se za industriju koja se u povijesti Webu u povijesti ponašala kao prema ispisu, rasporedi fiksne širine proželi mnogim isporučenim proizvodima. Kako započinjemo s dizajniranjem prilagodljivog medija, razmatraju se novi pristupi koji nam omogućuju rješavanje problema i komuniciranje ideja, istovremeno priznajući fluidnu prirodu medija. Evo nekoliko mojih najdražih:
- Dijagrami opisa stranice: Iako žičani okviri često mogu podrazumijevati izgled (i na taj način pretpostavljaju određenu vrstu uređaja), dijagrami opisa stranice uklanjaju tu pretpostavku i umjesto toga opisuju pojedinačne komponente, poredane u dokumentu u smislu prioriteta.
- Stilske pločice: Kada komuniciramo dizajnerske ideje s klijentima, možemo se naći kako predstavljamo 'slike web stranica'. Ako ne budemo pažljivi, klijenti će s pravom tražiti da vide koncepte koji pokazuju kako će dizajn izgledati i na drugim uređajima. To nas može natjerati u neodrživu situaciju stvaranja više stranica za više uređaja. Samantha Warren razmišljala je o ovom problemu i smislila pločice sa stilom. Oni se nalaze negdje između ploče raspoloženja (ali manje nejasne) i potpuno realiziranih dijelova (ali manje preciznih) i pomažu nam u komunikaciji tipografije, stilova gumba i tretmana masthead-a. Oni također potiču zreliju razinu razgovora s našim klijentima.
- Dizajn igra Mobilify: Ova vježba može stvarno dobro funkcionirati tijekom suradničkih radionica dizajna. U ovoj vježbi svi zapisuju na Post-it bilježi elemente koji se mogu pojaviti na određenoj stranici. Zatim se zalijepe za zid redom važnosti, kao da se čine lineariziranima na mobilnom telefonu. Rezultirajuća rasprava može donijeti neke iznenađujuće zaključke. Na primjer, mogli biste shvatiti da navigacija nije najvažnija komponenta na stranici. To bi moglo uslijediti do dizajna, gdje link za preskakanje na vrhu stranice vodi do navigacije u podnožju.
Još uvijek ima mjesta za alate koje već koristimo, naravno, ali prilikom dizajniranja web stranice u širem smislu, moramo imati na umu da izgled više nije poznat.
Kodiranje postupno
Srećom, ne trebamo brinuti o vizualnom dizajnu u primjeru na kojem radimo jer je naporan posao urađen za nas! Umjesto toga, možemo se koncentrirati na kodiranje našeg dizajna u potpuno odgovorno web mjesto.
Još jedna stvar prije nego što započnemo. Važno je upamtiti osnovno načelo medija s kojim radimo: univerzalnost. To ne znači samo izgradnju za današnje uređaje s omogućenom mrežom, već i osiguravanje kompatibilnosti s onim od jučer i sutra. John Allsopp opisao je zašto je ovo načelo važno u svom postu Sljedećih 6 milijardi:
"Sljedećih šest milijardi čine djeca u ruralnim dijelovima Indije, Afrike i Kine gdje pristup energiji i mrežama može biti isprekidan. To je netko na Sumatri u deset godina staroj Wintelovoj kutiji. Ljudi govore stotine različitih jezika, s desecima različitih jezika To su ljudi koji su prvi u svojoj obitelji koji mogu čitati i pisati. To je 20 posto ljudi širom svijeta koji ne znaju čitati ili pisati. Ipak.’
Svoje razumijevanje weba možemo pratiti uvidom u različite mode (u potrazi za boljom riječju) koje su se zavladale među našim zanimanjima: web standardi, dostupnost, neupadljivi JavaScript ... sve su inačice na istu temu: progresivno poboljšanje. Isto vrijedi i za responzivni web dizajn. Za izgradnju a uistinu responzivna web stranica je izgraditi web stranicu koja nije samo unatrag kompatibilna, već i buduća.
Zaron u nadoknadu
Ok, dosta preambule, vrijeme je da otvorimo uređivač teksta.Naš dizajner pružio nam je dizajn orijentiran na radnu površinu i bio je ljubazan pružiti primjere kako bi se to moglo pojaviti i u užem pogledu.
Možda bi bilo primamljivo da se ovo posebno kodira, ali predložit ću drugačiji pristup. Smještanjem zasebnih komponenata - ili uzoraka - koji čine dizajn na jednu stranicu, možemo stvoriti portfelj uzoraka. To nam omogućuje razvoj komponenata izvan granica bilo kojeg izgleda stranice i dat će nam nešto na što ćemo se kasnije pozvati za bilo kakvo regresijsko testiranje. Pogledajmo početnu oznaku na nekoliko različitih uređaja:
Pogledajte naš označeni portfolio uzoraka
Pa, proklet bio - već imamo prilagodljivu web stranicu! Naš se sadržaj prilagođava ograničenjima svakog uređaja, bilo da se radi o modernom novom iPadu ili odbačenom telefonu s značajkama. Djeluje čak i u tekstualnom pregledniku poput Lynxa.
Zahvaljujući temeljnim načelima univerzalnosti, web je reagira prema zadanim postavkama. To je sjajno, ali to također znači da sve što od sada radimo na kodu može ugroziti tu izvornu prilagodljivost.
Sutra: Kročit ćemo pažljivo i početi primjenjivati prvi aspekt responzivnog dizajna: tipografiju i fluidne rešetke.
