Responzivan web dizajn u 2014.: Što misle domaći stručnjaci?

U posljednjih nekoliko godina smo se našli usred još jedne velike web revolucije. Kao što smo nekad radili značajnu tranziciju u svijet kontroliran CSS-om, tako danas radimo ništa manje značajnu tranziciju u responzivni svijet. Dok su najveće svjetske agencije prigrlile RWD i velikom brzinom razvijaju responzivne tehnike, čini se kako domaće agencije tu prilagodbu rade sporije.

Razgovarao sam s nekim istaknutim kolegama o tome kako se snalaze u responzivnom svijetu i što mogu savjetovati kolegama dizajnerima i developerima.

Dizajnirajte u duhu weba

Neopisivo je važno dizajnirati u duhu weba, kao što nam je prošle godine u Zagrebu na FFWD.PRO konferenciji pričao jedan od najvećih svjetskih web stručnjaka, Jeremy Keith.

Jedan od najvažnijih principa responzivnog dizajna je takozvani mobile first pristup, prema kojem dizajn i razvoj stranica kreće od najmanjih rezolucija, prema najvećima. Davor Tomić iz deviantART-a, pokretač Facebook grupe Web Designers Hrvatska preporuča:

Uvijek krenite od najuže verzije weba. Raspolaganje vrlo ograničenim prostorom prisilit će vas da dobro razmislite o tome koja rješenja su najučinkovitija, a koji sadržaji najvažniji.

Kako bismo bili u skladu s duhom weba, moramo se pobrinuti i za fleksibilnost stranica i rezolucijsku neovisnost. Davor nastavlja:

Dodajte novi ‘breakpoint’ — granicu nakon kojih se raspored elemenata na web stranici mijenja — samo onda kad trenutni layout više ne funkcionira. Nemojte unaprijed određivati breakpointe sukladno dimenzijama ekrana trenutno popularnih telefona i tableta jer je to strategija koja u stvarnom životu (zbog velikog broja Android tableta i telefona najrazličitijih dimenzija ekrana) ne funkcionira, a vas nepotrebno ograničava u dizajniranju.

Dizajnirajte oko sadržaja

Dizajniranje u duhu weba znači i dizajniranje takozvanom content out metodom. Marko Dugonjić iz agencije Creative Nights, koja je nedavno radila na raza.hr, opisuje svoja iskustva:

U početnoj fazi projekta istražujemo kako komunicirati naručiteljevu ponudu. Čest je slučaj da interni izrazi i unutarnji ustroj tvrtke nisu razumljivi posjetiocima. Tada prevodimo (pre)stručne sadržaje na jednostavniji i razumljiviji jezik, što zahtijeva i određeni angažman naručitelja. Kroz zajedničku suradnju dogodi se i uzajamna edukacija — mi učimo o poslovnim potrebama, a naručitelji uče da posjetioce moraju postepeno uvesti u svoj stručan svijet.

Stavljanjem naglaska na sadržaj i na prioritete posjetioca, dolazimo do vrlo jasnih ciljeva. Dugonjić nastavlja:

Slijedi dizajn tipografije. Fokusiramo se na čitljivost više nego na dojmljivost. Bez obzira na veličinu ekrana — veličina slova, prored i dužina linije teksta moraju ostati harmonični, pa kada na određenoj širini ekrana, dužina linije postane preduga — uvedemo novi breakpoint i prilagodimo omjere. Jednostavno! Izrada responsive web sučelja na ovakav način prati prirodni slijed i integralna je komponenta svih prethodnih aktivnosti.

Prilagodite proces

Izrađivati stranice u responzivnom duhu znači prilagoditi kompletan proces izrade. Taj se proces uvelike promijenio u proteklih par godina. Umjesto prezentiranja statičnih skica, u modernom procesu se puno češće klijentu na testiranje daju funkcionalni prototipovi. Testiranja u prirodnom okruženju, web pregledniku, daju puno bolje rezultate. Evo što o modernom procesu izrade kaže Emanuel Blagonić iz Blagonic Brothers:

Proces se promijenio u smjeru da sve rjeđe koristimo Photoshop, osim za definiranje osnovnih smjernica dizajna (po rezolucijama) te ‘elements collage’, a većinu ostaloga radimo direktno u HTML-u. To konkretno znači da smo danas brži u produkciji weba nego što smo bili prije godinu dana. S druge strane, možemo se više posvetiti osmišljavanju sučelja web stranice, interakcije s posjetiteljima te na kraju krajeva, povećati vrijednost web stranice za klijenta.

Emanuelov brat i partner Lucijan Blagonić naglašava i ulogu educiranja klijenta, često zanemarenu u procesu izrade stranica:

To svakako podrazumijeva i dodatnu edukaciju klijenta, no kako klijent izrezanu (op. ur. ovo je žargonizam) stranicu može doživjeti tek u pregledniku (na bilo kojem uređaju), lakše je objasniti koncepte kao što su custom tipografija, optimizacija, interakcija — te na koji način će isti imati utjecaj na finalno rješenje.

Ako se pak nađete u situaciji gdje postojeće neresponzivne stranice morate prilagoditi u responzivne, mobile first pristup zamijenite desktop down sustavom. Vanja Bertalan iz web.burze objašnjava iskustvo svog tima nakon uspješne prilagodbe popularne Coolinarike:

Bez obzira što smo kod izrade desktop verzije postavili vrlo dobar grid sustav i informacijsku arhitekturu, morali smo proći sve predloške i napraviti svojevrsni ‘reverse-engineering’ kako bismo došli do suvislog rješenja koje pokriva sve tipove uređaja. Konkretno, napravili smo analizu posjećenosti i ‘user flowa’, korištenja stranica prema tipovima uređaja i rezolucijama, modifikaciju ‘grid’ sustava i automatsko preslagivanje grida na temelju širina ekrana i tipova uređaja, i reviziju svakog pojedinačnog predloška. Dosta vremena smo potrošili i na specifičnosti implementacije oglasa ovisno o tome pristupa li se stranici s desktopa, tableta ili telefona.

Educirajte se i prihvatite nove tehnologije

Biti u korak sa trendovima i tehnologijama na webu je od neizmjerne važnosti i u opisu je posla svakog web dizajnera. Upravo je praćenje tih tehnologija ono što će vam pomoći u unapređivanju procesa izrade i uvelike olakšati i ubrzati posao. Primjerice, modularan kod, OOCSS i CSS preprocesori će vam biti od velike pomoći u svakom responzivnom projektu. Ivan Nikolić iz Trikodera, tvrtke koja je nedavno uz pomoć Creative Nightsa u promet pustila novu, responzivnu verziju Njuškala, naglašava:

Ako ste u mogućnosti, iskoristite prednosti popularnih preprocesora poput Sass-a ili LESS-a. Prednosti koje nude, poput ugnježđivanja selektora i media queryja, dosta olakšavaju održavanje projekata, bez obzira radite li samostalno ili u timu, i pružaju vam mogućnost lakše modularizacije vašeg koda. Pokušajte primijeniti principe OOCSS-a, SMACSS-a ili BEM-a. Nijedan nije savršeno rješenje za modularan kod, no svaki od njih ima nešto što vam definitivno može pomoći na duge staze.

Nadalje, kao profesionalni web dizajneri i developeri imamo mogućnost, ali i obavezu, da unapređujemo svoju zajednicu. Nikolić nastavlja:

Web dizajneri i developeri imaju privilegiju ogromne, otvorene riznice znanja. Sudjelujte u Twitter razgovorima, Facebook grupama, mailing listama ili ‘open source’ projektima i bilježite “komadiće znanja” koje zajednica dijeli. Ako se nađete u situaciji da morate klijentu objasniti zašto je određeni pristup idealan za njegov posao ili projekt, imat ćete čime potkrijepiti vaše mišljenje.

Iako ovaj članak nudi svega par savjeta i zagrebao je samo površinu nekih od problema, vjerujem da vas može inspirirati i vrlo dobro usmjeriti. Savjeti koje ste pročitali darovani su vam od strane nekih od najkompetentnijih domaćih web stručnjaka, koji govore iz bogatog vlastitog iskustva. Učiti od najboljih – sigurna je oklada.