Saturs
- Projektēšana nezināmajam
- Pragmatiska pieeja dizainam
- Kļūstot par izkārtojuma agnostiķi
- Kodēšana pakāpeniski
- Niršana uzcenojumā
Šķiet, ka mūsdienās visi runā par atsaucīgu tīmekļa dizainu, un tam ir pamats; tā kā tīmeklī pieejamo ierīču skaits turpina pieaugt - katrai no tām ir dažādas iespējas un iespējas - vairs nav saprātīgi veidot fiksēta platuma vietnes.
Patiesība ir tāda, ka tā nekad nav bijusi. Tomēr līdz šim par labāko praksi tika uzskatīta tādu pieredzes projektēšana, kas radīja vairākus pieņēmumus, vai tie būtu ap ekrāna izšķirtspēju, joslas platumu vai ievades metodi. Ja esat kādreiz izstrādājis 960 pikseļu lielu vietni, tikai lai to apskatītu drauga mazā ekrāna tīklā (un jā, es šeit rakstu no sāpīgas pieredzes), jūs sapratīsit, kāpēc tā nebija īpaši gudra pieeja. Tagad, sajaucot viedtālruņus un planšetdatorus, ir skaidrs, ka mūsu tradicionālās metodes vairs neder mērķim.
Par laimi, CSS plašsaziņas līdzekļu vaicājumu parādīšanās un arvien lielāka atziņa, ka tīmeklis ir pats par sevi nesējs, nozīmē, ka mēs sākam uztvert platformas patieso būtību, pieņemot, ka tās universālums ir stiprums, nevis vājums.
Nākamo piecu dienu laikā es iepazīstināšu jūs ar tehniku, kas atzīst šo faktu: atsaucīgs tīmekļa dizains. Izstrādājis Ītans Markots, tas apvieno plūstošus izkārtojumus, elastīgus attēlus un multivides vaicājumus, lai palīdzētu mums izveidot vietnes, kas graciozi pielāgojas jebkurai videi, ar kuru viņi sastopas.
Es parādīšu šo pieeju, parādot, kā izveidot vienkāršu multivides galeriju. Savos piemēros es izveidošu nelielu vietni, lai dokumentētu neseno ceļa braucienu pa Amerikas Savienotajām Valstīm, taču nekautrējieties pielāgot kodu un dizainu atbilstoši savām vajadzībām.
Projektēšana nezināmajam
Liela daļa šīs apmācības centrā būs adaptīvā dizaina attīstības aspekts. Bet pirms mēs iedziļināmies kādā kodā, izmantosim brīdi, lai padomātu, kā mēs varētu izveidot vietni, kurā, domājams, varētu būt bezgalīgi izkārtojumi.
Tagad man ir paveicies, ka varu izstrādāt saskarnes un izstrādāt frontend kodu, kas tos padara reālus. Protams, tā nav unikāla prasme - ja jūs strādājat sev, tad, iespējams, esat tāds pats. Bet noteikti ir izdevīgi saprast, kā saturs var pielāgoties un mainīties, veidojot šķidru dizainu.
Es arī strādāju kā daļa no lielākas komandas, kur mana loma ir vairāk specializēta. Šādā vidē vizuālais dizainers var koncentrēties tikai uz stiepļu rāmju tulkošanu pievilcīgos, saistošos (bez pierakstīšanās, pikseļiem perfektos) kompaktdiskos. Izstrādātājiem nav nekas neparasts atrasties atsevišķi, pārveidojot šos izkārtojumus vienkāršā un efektīvā marķējumā un CSS.
Tomēr šādas lineāras un nošķirtas darbplūsmas ātri sadalās, tiklīdz mēs sākam novērtēt, kā dizainparaugi pielāgosies dažādām vidēm. Tāpat kā jebkurš jauns rīks vai tehnoloģija, mums jāapsver arī sadarbības un veiklāki darba veidi. Daudzas no sarežģītākajām problēmām, ar kurām saskaras, izstrādājot atsaucīgas vietnes, var atrisināt, vienkārši sarunājot, eksperimentējot un atkārtojot.
Pragmatiska pieeja dizainam
Tas nenozīmē, ka dizaineriem nav iespējas domāt par to, kā dizains var darboties ārpus kādas konkrētas ierīces robežas.
Uzņēmumā Clearleft mēs sākam vizuālo noformējumu no darbvirsmas perspektīvas. Mēs vispirms definējam visaptverošu dizaina valodu un vizuālo estētiku, sākotnējos pētījumus bieži pamatojot ar galveno satura daļu. Piemēram, ja mēs izstrādājam pārtikas vietni, mēs sāksim ar recepšu lapu; ziņu vietnei - stāsta lapai.
Šī ir ne tikai svarīga vietnes lapa, bet arī, iespējams, tajā ir pietiekami daudz strukturēta satura, lai mēs varētu izveidot tipogrāfisku paleti. Mēs domāsim arī par to, kā izkārtojums var pielāgoties - pat ja tas šajā posmā ir tikai mūsu prātā.
Viens noderīgs veids, kā pārbaudīt dizainu, ir uzņemt šādu lapu un pielāgot to šaurākam (~ 320 pikseļu platam) ekrānam. Jūs, iespējams, atklāsiet, ka daži dizaina aspekti būs jāpārdomā, lai tie darbotos šajā platumā. Šeit ir daži piemēri:
- Tipogrāfija: Lieli virsraksti var labi darboties plašākos izkārtojumos, bet mazākos ekrānos tie var aizņemt daudz vertikālas vietas, un tāpēc tiem nepieciešama papildu ritināšana. Mainoties līnijas garumam, jāņem vērā arī līnijas augstums un citas tipogrāfiskās apstrādes metodes.
- Saites: Kā jūsu dizains darbosies skārienekrāna ierīcēs? Lai gan mums vēl nav vienkāršs veids, kā tos atklāt (tas nozīmē, ka mums jāņem vērā visos mūsu dizaina aspektos), dizains šaurākam ekrānam var dot mums iespēju domāt par saišu un citu interaktīvu elementu mērķa apgabaliem . IOS vadlīnijās ieteicams, lai tie būtu vismaz 44 pikseļi / punkti kvadrāts, kas ir labs rādītājs, uz kuru tiekties.
- Navigācija: Tas, iespējams, būs visneērtākais jebkura atsaucīgā dizaina komponents, it īpaši, ja jūsu vietnē ir daudz sadaļu un dziļa hierarhija. Breds Frosts ir uzrakstījis kopsavilkumu par dažām dažādām navigācijas pieejām, kuras pašlaik tiek apsvērtas.
- Lieks saturs: Vai kāds saturs nav nepieciešams? Vai cits saturs ir jāparāda tikai noteiktos scenārijos? Es neatbalstu satura slēpšanu, pamatojoties uz to, kādu ierīci lietotājs izmanto, taču tādas tehnikas kā nosacīta ielāde (kuru apskatīsim vēlāk šonedēļ) var palīdzēt mums apkalpot mazākas lapas, kurās papildinošs saturs tiek ielādēts tikai nepieciešamības gadījumā.
Divu kontrastējošu izkārtojumu veidošana pastiprina domu, ka dizains tiks pielāgots, vienlaikus agri izlīdzinot potenciālās gotikas. Lai gan tas izklausās kā darba dubultošanās, paturiet prātā, ka mēs nevienu lapu noformējam ar perfektu pikseļu precizitāti. Tā vietā mēs koncentrējamies uz mērogojamas dizaina valodas izveidi - tādu, kas attīstīsies, kad mēs sākam to ieviest kodā, un tādu, kuras pamatā ir atsevišķi moduļi un komponenti.
Kļūstot par izkārtojuma agnostiķi
Nav pārsteigums, ka nozarei, kas vēsturiski ir apstrādājusi tīmekli kā druku, fiksēta platuma izkārtojumi ir iekļuvuši daudzos mūsu saražotajos produktos. Kad mēs sākam izstrādāt pielāgojamu datu nesēju, tiek apsvērtas jaunas pieejas, kas ļauj mums atrisināt problēmas un paziņot idejas, vienlaikus atzīstot nesēja mainīgo raksturu. Šeit ir daži no maniem izlases veidiem:
- Lapas apraksta diagrammas: Kaut arī stiepļu rāmji bieži var nozīmēt izkārtojumu (un tādējādi pieņemt noteiktu veida ierīci), lappušu apraksta diagrammas noņem šo pieņēmumu un tā vietā apraksta atsevišķas sastāvdaļas, kas dokumentā sakārtotas prioritārā izteiksmē.
- Stila flīzes: Sazinoties ar klientiem ar dizaina idejām, mēs varam atrast sevi prezentējot ‘vietņu gleznas’. Ja mēs neesam uzmanīgi, klienti pamatoti lūgs redzēt koncepcijas, kas parāda, kā dizains izskatīsies arī citās ierīcēs. Tas var mūs piespiest neilgtspējīgā situācijā, ja vairākām ierīcēm tiek ražotas vairākas lapas. Samanta Vorena ir domājusi par šo problēmu un nākusi klajā ar stila flīzēm. Viņi sēž kaut kur starp noskaņojuma dēli (bet mazāk neskaidri) un pilnībā realizētiem kompjiem (bet mazāk precīzi), un tie palīdz mums sazināties ar tipogrāfiju, pogu stiliem un mastheadu ārstēšanu. Viņi arī veicina nobriedušāku diskusiju ar mūsu klientiem līmeni.
- Mobilizēt dizaina spēli: Šis vingrinājums var ļoti labi darboties dizaina sadarbības semināru laikā. Šajā vingrinājumā visi pieraksta Post-it piezīmes par elementiem, kas var parādīties noteiktā lapā. Pēc tam tie tiek piestiprināti pie sienas svarīguma secībā, it kā tie būtu redzami lineāri mobilajā tālrunī. Rezultātā diskusija var radīt dažus pārsteidzošus secinājumus. Piemēram, jūs varat saprast, ka navigācija nav lapas vissvarīgākā sastāvdaļa. Tas varētu sekot līdz noformējumam, kur izlaišanas saite lapas augšdaļā ved uz navigāciju kājenē.
Protams, vēl ir vieta rīkiem, kurus mēs jau izmantojam, taču, izstrādājot vietni plašā nozīmē, mums jāpatur prātā, ka izkārtojums vairs nav zināms.
Kodēšana pakāpeniski
Par laimi, mums nav jāuztraucas par vizuālo noformējumu piemērā, pie kura strādājam, jo mūsu labā ir paveikts smags darbs! Tā vietā mēs varam koncentrēties uz mūsu dizaina kodēšanu pilnībā atsaucīgā vietnē.
Vēl viena lieta, pirms mēs sākam darbu. Ir svarīgi atcerēties nesēja, ar kuru mēs strādājam, pamatprincipu: universālumu. Tas nozīmē, ka jāveido ne tikai mūsdienīgas ierīces ar tīmekli, bet jānodrošina savietojamība ar vakardienas un rītdienas ierīcēm. Džons Allsops aprakstīja, kāpēc šim principam ir nozīme, savā ierakstā Nākamie 6 miljardi:
"Šis nākamais seši miljardi ir bērni Indijas laukos, Āfrikā, Ķīnā, kur piekļuve spēkam un tīkliem var būt neregulāra. Tas ir kāds Sumatrā desmit gadus vecā Vintela kastē. Tie ir cilvēki, kas runā simtiem dažādu valodu, ar desmitiem dažādu valodu. rakstīšanas sistēmas. Cilvēki ir pirmie savā ģimenē, kas spēj lasīt un rakstīt. Tie ir 20 procenti cilvēku visā pasaulē, kuri nemāk lasīt vai rakstīt. Tomēr.’
Mēs varam izsekot mūsu izpratnei par tīmekli, aplūkojot dažādos veidus (labāka vārda trūkuma dēļ), kas ir izplatījušies mūsu profesijā: tīmekļa standarti, pieejamība, neuzkrītošs JavaScript ... visi ir vienas tēmas varianti: pakāpeniska uzlabošana. Tas pats attiecas arī uz atsaucīgu tīmekļa dizainu. Lai izveidotu a patiesi atsaucīga vietne ir izveidot vietni, kas ir ne tikai savietojama, bet arī draudzīga nākotnei.
Niršana uzcenojumā
Labi, pietiek ar preambulu, ir pienācis laiks atvērt teksta redaktoru.Mūsu dizainers ir nodrošinājis mums uz darbvirsmu orientētu dizainu un ir bijis laipns, lai sniegtu piemērus, kā tas varētu parādīties arī šaurākā skata punktā.
Varbūt būtu vilinoši tos kodēt atsevišķi, bet es ieteikšu citu pieeju. Ievietojot atsevišķas sastāvdaļas vai modeļus, kas veido dizainu, uz vienas lapas, mēs varam izveidot modeļu portfeli. Tas ļauj mums izstrādāt komponentus ārpus jebkura lapas izkārtojuma robežas, un tas dos mums kaut ko atsaukties vēlāk jebkurai regresijas pārbaudei. Apskatīsim sākotnējo marķējumu dažās dažādās ierīcēs:
Apskatiet mūsu iezīmēto modeļu portfeli
Nu, es būšu sasodīts - mums jau ir atsaucīga vietne! Mūsu saturs tiek pielāgots katras ierīces robežām, vai tas būtu jauns iedomāts iPad vai izmests tālrunis. Tas darbojas pat tikai teksta pārlūkprogrammā, piemēram, Lynx.
Pateicoties universāluma pamatprincipiem, tīmeklis ir atsaucīgi pēc noklusējuma. Tas ir lieliski, taču tas nozīmē arī to, ka viss, ko mēs darām ar kodu turpmāk, var apdraudēt šo vietējo pielāgošanās spēju.
Rīt: Mēs uzmanīgi skriesim un sāksim pielietot pirmo adaptīvā dizaina aspektu: tipogrāfiju un šķidruma režģus.
