Atsaucīgs dizains: kāpēc jūs to darāt nepareizi?

Reaģējošais dizains nav iedoma, kas radās foršās CSS tehnikas dēļ, tā ir atbilde uz problēmu. Vienmēr atcerieties to un nemitīgi pajautājiet sev, vai jūs patiešām pareizi risināt šo problēmu. Ja multivides vaicājuma pārtraukšanas punktu ievietošanai izmantojat kopēšanu un ielīmēšanu, iespējams, ka jūsu risinājums ir kļūdains.

Apspriedīsim, kāpēc eksistē mediju vaicājumi un kā tos izmantot, lai patiesi atrisinātu visuresošā tīmekļa problēmu. Parunāsim par to, kāpēc jums vajadzētu ļaut savam saturam noteikt izkārtojuma robežas, nevis hipotētiskus ekrāna izmērus.

Šis raksts ir daļa no mūsu sērijas “Skatoties ārpus darbvirsmas dizaina”, kas jums tika piegādāta sadarbībā ar Heart Internet VPS.

Ideja par plašsaziņas līdzekļu jautājumiem

Lai šīs debates sāktu pareizi, ir jāapspriež, kāpēc mediju jautājumi pēkšņi ir kļuvuši tik populāri. Protams, atbilde ir tāda, ka Etāna Marcotte radītais termins “Responsive Design” ir fantastisks veids, kā risināt arvien pieaugošo problēmu tīmekļa dizaineriem.

Kamēr visi runāja par un to, kā “mobilais tīkls” apdzīs tradicionālo, notiekošā revolūcija bija daudz drastiskāka: tīmeklis kļuva visuresošs.

Šī “problēma” ir lieliska visai pasaulei, bet mums tas sagādā patiesas galvassāpes. Pēdējā desmitgadē globālais tīmeklis ir pārveidojies par kaut ko jaunu. To vairs nesaista sienas, kuras mēs iepriekš bijām izveidojuši. Esmu to jau teicis, bet ir vērts atkārtot. Kamēr visi runāja par to, kā “mobilais tīmeklis” gatavojas apsteigt tradicionālo, notiekošā revolūcija bija daudz dramatiskāka: tīmeklis kļuva visuresošs.

Šobrīd tīklam nav piekļuves no viena punkta. Mēs neatteicāmies no klēpjdatoriem par labu viedtālruņiem, kā paredzēja “eksperti”. Tā vietā tīmeklis ir visur, kur mēs atrodamies. Tas ir ne tikai mūsu tālruņos un datoros, bet arī planšetdatoros, iPod atskaņotājos, spēļu sistēmās, televizoros un pat automašīnās.

Šī tendence saglabāsies tikai laika gaitā. Reaģējošais dizains ļauj mums izveidot sezonu, kurā tiek veidotas atsevišķas mobilās vietnes, un laikmetā, kurā mēs izstrādājam vienu vietni, kas attīstās un pielāgojas ierīcei, kurā tā tiek skatīta. Izmantojot multivides vaicājumus, mēs varam piedāvāt specifisku CSS jebkuram skatu porta lielumam un pārliecināties, ka ikvienam ir vislabākā iespējamā pieredze.

Reaģējoša dizaina problēma

Iepriekš sniegtā sadaļa nav daļēji vēsturisks skaļruņš, kas paredzēts telpas aizpildīšanai, tas ir svarīgs mērķu, kuru sasniegšanai ir paredzēts atsaucīgs dizains, apskats. Tad rodas jautājums, vai tas atbilst šiem mērķiem? Vai atsaucīgais dizains adekvāti risina visuresamības problēmu?

Atbilde ir sarežģīta, labākajā gadījumā varu teikt: “tas ir atkarīgs no tā, kā jūs to darāt”. Tas ir mulsinošs paziņojums, vai ne? Atsaucīgs dizains ir vienkāršs: izmantojiet multivides vaicājumus, lai pielāgotu CSS padarītu pieejamu dažādiem skata porta izmēriem. Tas ir tas, kā visi tam pieiet pareizi? Tātad, kā var būt pareizais un nepareizais ceļš?

Sarežģītība rodas, kad sākam apspriest šīs tehnikas būtisko daļu: kādus plašsaziņas līdzekļu jautājumus man vajadzētu izmantot? Vai arī izsakiet citu veidu, kādiem “pārtraukšanas punktiem” man vajadzētu būt vērstiem uz pielāgoto CSS? Paredzams, ka pašreizējā populārā atbilde sākas ar labākajām “mobilajām” ierīcēm apkārt: iPhone un iPad (ar dusmīgiem Android lietotāju komentāriem). No šiem arhetipiem mēs izveidojam tā saucamos “vispārīgos” viedtālruņu un planšetdatoru izmērus. Tad mēs virzāmies uz augšu un uzrunājam klēpjdatorus un mazos galddatorus un visbeidzot lielos ekrānus. Standarta multivides vaicājumu komplektam, piemēram, šim no CSS-Tricks, parasti ir deviņi vai desmit iepriekš izveidoti pārtraukuma punkti.

Ko darīt, ja mēs koncentrētos uz konkrēta dizaina vajadzībām, nevis uz hipotētisku ierīces lietošanas gadījumu? Ko darīt, ja mēs veidotu izkārtojumus, kas vienkārši darbojās visur?

Godīgi sakot, šī sistēma zināmā mērā darbojas. Mēs visi esam redzējuši daudz lielisku atsaucīgu vietņu, kas izveidotas, izmantojot komplektu, kas līdzīgs iepriekšminētajam Koijera vietnei. Tomēr es nevaru palīdzēt, bet domāju, ka tas kaut kādā veidā atkārto to pašu kļūdu, kuru mēs pieļāvām, izstrādājot “mobilās vietnes” pirms dažiem gadiem. Šeit galvenā uzmanība tiek pievērsta ierīcei, kas skata vietni. Pirms mēs pat veidojam vietni, mums ir jāpatur prātā šie pārtraukšanas punkti.

Bet ierīces mainās. Mēs jau esam noskaidrojuši, ka tīmeklis ir gandrīz visam savienots ar strāvas slēdzi, tad kāpēc mēs atkal tik daudz akcentējam pašreiz izplatītos ekrāna izmērus? Vai ir labāka alternatīva? Ko darīt, ja mēs koncentrētos uz konkrēta dizaina vajadzībām, nevis uz hipotētisku ierīces lietošanas gadījumu? Ko darīt, ja mēs veidotu izkārtojumus, kas vienkārši darbojās visur?

Uz saturu orientēts adaptīvs dizains

Iepriekš minētās problēmas ar iepriekš izveidotiem plašsaziņas līdzekļu jautājumiem man radās tikai tad, kad es iedziļinājos un tiešām sāku ražot atsaucīgu darbu pats. Teorētiski standarta ieteikumi ir lieliski, taču, tos pielietojot sarežģītā dizainā, jūs atklāsit, ka šie atskaites punkti ne vienmēr to aptver. Kā Bostonas globusa dizaineri ātri uzzināja, kad vietne sāka darboties, problēma ir tā, ka problēmas rodas “pa vidu” (ierasts, ka šis projekts ir fantastisks un visi izkārtojuma jautājumi lielākoties ir risināti). Lietas kļūst nekārtīgas, ja dizains ir tāda izmēra, par kuru jūs neņēmāt vērā, un jums ir jāiet iekšā un jāpielīmē caurumi pēc fakta.

Es to saku kā dedzīgu Apple līdzjutēju: pārtrauciet vietņu izstrādi iPhone.

Mans jautājums ir, kāpēc mēs nesākam tur? Tā vietā, lai iedziļinātos projektā ar ierīču komplektu un attiecīgi mediju jautājumiem, kāpēc mēs neļaujam dizainam izlemt? Katrā tīmekļa lapas izkārtojumā ir punkts, kurā pārlūkprogrammas izmērs samazina tā integritāti. Mūsu, kā dizaineru, darbam, ņemot vērā visuresamības problēmu, vajadzētu atrast šo izmēru un par to ņemt vērā, pēc tam saputot, izskalot un atkārtot, līdz tiek ņemtas vērā visas vājās vietas.

Es to saku kā dedzīgu Apple līdzjutēju: pārtrauciet vietņu izstrādi iPhone. Tā vietā izveidojiet vietni, kas saglabā savu integritāti, jo tās skata loga lielums tiek samazināts līdz jebkuram iespējamam stāvoklim. Paturiet prātā īpašas ierīces kā rokasgrāmatu savam dizainam (piemērs: mazākas ierīces mēdz būt balstītas uz skārienizolāciju, tāpēc izveidojiet saites lielām), taču nelieciet aizbāžņus un neizskatiet lielāku attēlu: ka jūsu dizains vajadzētu labi izskatīties uz jebkura ekrāna.

Jauna darbplūsma

Kā izskatās uz saturu vērsta adaptīva dizaina darbplūsma? Tas ir vienkāršāk, nekā jūs domājat. Acīmredzot jums ir nepieciešams sava veida sākumpunkts. Ja vēlaties sākt mobili un pacelties, lieliski. Ja vēlaties sākt lielu un nokāpt, arī lieliski. Man personīgi ir ļoti grūti reāli iedziļināties dizainā un darīt to pareizi, ja es sāku mobilā līmenī, taču ir daudz nopietnu argumentu, lai to izdarītu šādā veidā.

Sekojot šai darbplūsmai, notiek kaut kas maģisks.

Hipotētiski, pieņemsim, ka jūs sākāt ar lielu, 1020 pikseļu platu vietni. Pārbaudiet to lielākajā ekrānā, kur varat nokļūt, un pārliecinieties, ka tas izskatās lieliski. Tagad velciet logu un padariet to mazāku, līdz dizains kļūst neglīts. Tur ir jūsu pirmais pārtraukuma punkts. Iestatiet multivides vaicājumu šim punktam un salabojiet visu, kas jums jārisina. Kad esat pabeidzis, satveriet šo logu un atrodiet nākamo neglītuma punktu. Atkārtojiet šīs darbības, līdz esat apmierināts ar diapazonu, kuru esat uzņēmis.

Bet kā ir ar iPad? Kā ir ar iekurt uguni vai Samsung jaunākajiem mēģinājumiem būt atbilstošiem? Sekojot šai darbplūsmai, notiek kaut kas maģisks. Jūs tikko to izdarījāt, lai izkārtojums izskatās labi gandrīz jebkura izmēra. Ja izdarījāt pareizi, tad, pavelkot to tālrunī vai planšetdatorā, tas izskatīsies lieliski.

Tikai izkārtojums
Paturiet prātā, ka šī diskusija attiecas tikai uz izkārtojuma koeficientiem. Jūs absolūti neizmantojat dažādu pārlūkprogrammu un ierīču funkcionalitātes testēšanu. Reaģējošais dizains neko neliecina par to, ka dažādi pārlūka dzinēji HTML, CSS un JavaScript dažādi interpretē.

Secinājums

Rezumējot, multivides vaicājumi un atsaucīgs dizains sniedz mums neticami jaudīgu rīku, lai ņemtu vērā faktu, ka vietnes tiek skatītas visu veidu ekrānos un skata porta lielumos. Tomēr, tiklīdz mēs sākam piesaistīt savus dizainus nedaudzām ierīcēm, mēs esam atpakaļ tur, kur sākām. Tā vietā jūsu mērķim vajadzētu būt tāda daudzpusīga izkārtojuma izveidošanai, ka tas var apstrādāt gandrīz jebkuru skata porta izmēru.

Teorētiski tas viss ir jauki, bet kur ir piemērs? Šīs diskusijas sākumpunkts nāca no mana nesenā mēģinājuma izveidot atsaucīgu attēlu galeriju. Izlasiet šo rakstu, lai uzzinātu, kā uz saturu orientēta adaptīva dizaina darbplūsma varētu izskatīties dabiski.