Scott Jehl - Responsible Responsive Design (Atbildīgs Reaģējošs Tīmekļa lapas dizains)

Jānis Rubļevskis (koko) // 2015. gada 17. februārī, 11:04 // #Grāmatas // 9 komentāri 

Pirms nedaudz vairāk kā divām nedēļām Cube blogā tika publicēts raksts par to, ar ko būtu jāsāk, veidojot responsīvu tīmekļa lapu? Tā kā uzņēmums, kurā strādāju un attīstos arī nodarbojas ar līdzīgām lietām, tad iekšienē sākās diezgan spraigas diskusijas. Pirmais jautājums jau bija tas, kāpēc tāds raksts? Tas tak visiem web deviem ir sen zināma lieta, ja vien neizstrādā superlētu sūdu. Arī ielinkotais raksts ir piecus gadus vecs. Laikam jau uzņēmuma vadībai vajadzēja palaist sen uztaisīto bloga sadaļu, bet tas nenozīmē, ka raksts nespieda mums izvērst diezgan plašu diskusiju. Pat vairāk - mēs paņēmām pāris nedaudz svaigākas grāmatas ar padziļinātu un atsvaidzinātu pieejas apskatu. Tā nu man rokās nonāca šī pagājušajā gadā izdotā grāmata par to, kā tad reaģējošu (jā - tā sauc responsīvu) dizainu izstrādāt atbildīgi.

Sākšu ar to, ka sūds jautājums - tas nav uzbrauciens Cube, jo raksts ir labs, nekas tur nav sadirsts un fundamentālās lietas ir palikušas fundamentālas arī šodien, tikai mūsdienās vairs nevajadzētu lietot terminu mobile first, jo patiesībā ierīču ir tik daudz, ka jārunā par small screen first vai big screen first. Ja godīgi, tad arī tas ir tikai tehnikas un pieredzes jautājums - ja programmētājs un dizaineris nejēdz kopā izdomāt dizainu, kuru var implementēt gan no vienas, gan otras pieejas, tad vajag abiem pamācīties un uzkrāt nedaudz vairāk pieredzes. Tas ir vienkārši max-sizewidth vai min-sizewidth media query jautājums. Joprojām izmantoju vispirms lielo ekrānu, jo: pirmkārt, ja devaiss nejēdz media queries, tad man labpatīkas domāt, ka tas ir lielais ekrāns un labāk es rādu smukāku versiju nekā izstiepju pa 1900px platumu mobilo dizainu. Pēdējā laikā gan domāju pieeju mainīt, jo tendence rāda, ka mazo ekrānu paliek arvien vairāk.

Tagad pieķeršos grāmatas ķidāšanai. Sākšu ar to, ka sākums jāizlasa gan dizaineriem, gan frontend koderiem, taču man un manam kolēģim bija tāda neliela déjà vu sajūta, jo mēs to (varbūd ar dažām atšķirībām) aprakstīto pieeju pielietojam jau sen. Tas iegājies tā tīri organiski. Reaģējošs dizains mūsdienās nav sasists pa izmēriem, kurus reprezentē kāda no plašāk izmantotajām ierīcēm, bet to skaldam atkarībā no satura. Tieši tāpēc vispirms izdomā, ko grib parādīt, tad izdomā kā katra detaļa strādās attiecībā pret dažādiem ekrānu izmēriem un tad tikai iedala kādus dizaina izmaiņu punktus.

Nākamās divas nodaļas ir vairāk frontend programmētājiem un izstrādātājiem. Lielākoties visu jau zināju, bet bija arī šis tas interesants pieminēts no JavaScript API puses, kas ir diezgan svaigs, bet es vēl nebiju sācis izmantot, piemēram, jaunajos browseros testēt media kverijus, nevis mēģināt noteikt pašam viewporta izmēru.

Visi piedāvājumi tiek gan loģiski aprakstīti, gan arī papildināti ar piemēriem. Interesantākais ir sekojošs:

  • kā ielādēt assetus un kuras pieejas tam ir piemērotākās dažādos gadījumos;
  • kā izvairīties no liekiem blokējošiem pieprasījumiem;
  • kā samazināt ielādējamās informācijas daudzumu gan stilam, gan skriptiem, gan attēliem;
  • kā apstrādāt DOM koku, ja ir situācijas, kad dažādiem ekrānu izmēriem blokus jānoliek dažādās vietās;
  • kā optimizēt attēlu ielādi, rēķinoties, ka daudziem ekrāniem ir stipri vairāk par 72 DPI (dots per inch);
  • kā izmantot svg grafikas, lai attēls vienmēr būtu skaidrs;
  • un daudz kas vēl interesants.

Interesantākais ir tas, ka netiek nodalīti slikti browseri vai labi browseri. Tiek uzskatāmi parādīts iespējamais labākais variants un tas, kā var ļoti efektīvi parūpēties, lai pārlūkprogrammai, kas nejēdz visu izdarīt ar jaunajiem līdzekļiem, saturs joprojām rādītos un būtu saprotams. Te gan jāparāda ar līku pirkstu uz Latvijas klientiem - runa bieži vien ir par satura atrādīšanu, bet "megafīču" apgriešanu. Bieži vien esmu saskāries, ka smuku transition vajag panākt arī uz IE 7... Tad nu jāraksta papildus skripti, jo latvietis nesaprot, ka viens un tas pats dažādos browseros varētu rādīties dažādi.

Uzskatu, ka konkrētajā brīdī web lapu un web aplikāciju izstrādātājiem (sevišķi, ja tās ir apjomīgas) šo grāmatu vajadzētu izlasīt un pat dažas vietas izprintēt un ierāmēt. Tomēr, lai arī lielākoties visu uzrakstīto zināju, jāatzīst, ka neesmu nemaz tik balts kā pašam gribētos, jo bieži esmu slinks vai vajadzības spiests neizdarīt dažas lietas tāpēc, lai ātrāk nodotu projektu un ķertos pie nākamā, piemēram, bieži vien neuztraucos par attēlu izmēriem, reizēm produkcijā skriptus neminimzēju, reizēm maziem ekrāniem pasmagus blokus tikai paslēpju, nevis ielādēju tikai vajadzības gadījumā. Es sevi mierinu ar to, ka labi, ka zinu - gan jau svarīgākam projektam pielietošu!

Es vērtēju šo grāmatu ar 9 kokoiem no 10 un iesaku palasīt arī tiem, kam pieredzes ir vairāk par mani - atkārtošana - zināšanu māte!

Komentāri

Ok, kas ir max-size vai min-size media query :D? Otrkārt, labprāt gribētu uzzināt ko jūs diskutējāt un kā, un pie kā nonācāt galu galā :).

Kļūdu izlaboju!

Mēs nonācām pie tā, ka vai nu slinkuma dēļ vai arī tāpēc, ka mēs domājam ar galvu nevis ar dirsu, mēs jau kādus 3 gadus vismz piekopjam uz saturu orientētu responsīvo pieeju, respektīvi, ja logo nelien vairs iekšā, tad priekš tā logo ir breikpoints. Līdz ar to mums vienā lapā var būt neskaitāmi breikpointi priekš dažādiem lapas elementiem.

Un vēl mēs izdomājām, ka šī visa info ir diezgan veca - tagad jādomā vairāk par to, ko darīsim ar pagaidām eksotiskākām iekārtām, respektīvi, viedpulksteņi ar saviem supermazajiem ekrāniem un eink ekrāni, jo tiem bieži vien vajag pavisam citu pieeju krāsu un kontrastu izvēlē, bet es pieļauju domu, ka par to drīzumā būs nedaudz vairāk Click blogā.

Ak un jā, es piemirsu arī par iekārtām, kas nolasa tekstu skaļi... Pagaidām lv ar to ir riktīgs bardaks.

Interesanti secinājumi un jautājumi - satiekamies uz alu pafilozofēt :)?

Teorētiski, kaut kad tuvāko nedēļu laikā vajadzētu notikt kārtējai neregulārajais #php.lv padirnēšanai, bet nu cilvēki vēl nevar saņemties.

Paldies par termina «reaģejošs dizains» radīšanu. Jāskatās, vai pieaugsies valodai. Par padirnēšanu pilnīgi piekrītu, sen nav kopistiski alus cafe Leningrad malkots.

Par terminu vakar jau noskaidrojām tviterī, bet nu šeit ir ofišal: http://termini.lza.lv/term.php?term=responsive&list=&lang=&h=

Padirnēšana bremzē dažu indivīdu dēļ, bet jūtu, ka drīzi varētu mēs savākties :D

Responsīvs dizains ir tagad viena no top problēmām!!!

Tā nav problēma - tā ir tendence. Un beidz likt te linku uz kredītiem - tāpat google viņus neņem vērā.

Paud savu subjektīvo viedokli:

Visi lauki (izņemot interneta vietni) aizpildāmi obligāti!
E-pasts publiski netiks parādīts.
Zinot vairākumu, komentāros tagi netiek atrādīti kā tagi. Linki automātiski pārveidosies par spiežamiem (cerams).
Bloga īpašnieks patur tiesības ļaunus komentārus dzēst vai pārveidot cilvēkiem patīkamākā formā, bet tajā pašā laikā neatbild par komentāru saturu.