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

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.

rwd
Domaći stručnjaci daju praktične savjete za izradu RWD stranica.

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.

Emanuel i Lucijan Blagonić (Snimila Marina Filipović Marinshe)
Emanuel i Lucijan Blagonić govore o promjeni procesa izrade stranica. (Snimila Marina Filipović Marinshe)

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

Ivan Nikolić
Ivan Nikolić savjetuje korištenje prednosti popularnih preprocesora.

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.

Komentari

Odgovori

Tvoja e-mail adresa neće biti objavljena.

Popularno

Startupi i poslovanje

Nasmijali smo se ‘Otvorenom’, a unutar IT zajednice se hejtamo, ne podržavamo – i ne poznajemo?

Jučerašnje Otvoreno dokaz je da ni javnost ni država i dalje ne razumiju IT. Može li tehnološka zajednica konačno pokazati razumijevanje sama prema sebi?

Mobilno

George je nova bankarska aplikacija od Erstea – za račune u svim bankama?

Iako će Erste službeno predstaviti George tijekom tjedna, već danas otkrivamo kako će nova aplikacija (Da!) biti zamjena ne samo za Erste mBanking nego potencijalno i za druge banke koje koristite!

Startupi i poslovanje

Web stranice javnih tijela od 23.9. moraju biti pristupačne: Kako se tijela, agencije, dizajneri i developeri mogu prilagoditi?

Informacije od javnog značaja koje objavljuju javna tijela na svojim web stranicama i aplikacijama moraju biti pristupačne svima - o tome više nema rasprave. Što vas očekuje ako je pristupačnost sljedeći korak i za vas? Hrvatska agencija Neuralab dizajnirala je po novim standardima web Hrvatske banke za obnovu i razvitak - evo što su oboje naučili u procesu.

Što ste propustili

Kultura 2.0

Kladarić, Šarić i Blagonić: Kako napredovati, biti inovativan i kreativan – dok radite na daljinu!

Iako je rad na daljinu mnogima nametnut, ne znači da je drugima odlično sjeo. Dapače, s Lukom Kladarićem, Marinom Šarićem i Lucijanom Blagonićem otkrivamo dobre prakse temeljene na godinama iskustva!

Mobilno

Ljuti smo na Apple… ali treba li nam još punjača?

Zašto su svi tako ljuti jer neće imati još jednu kocku za punjenje viška i kabel koji će ionako puknuti?

Startupi i poslovanje

Croatia osiguranje prepoznalo je potrebe korisnika u 2020. i u deset mjeseci je nastao LAQO

Usred krize i pandemije Croatia osiguranje napravila je ozbiljan iskorak prema digitalizaciji svojih usluga - okupili su vrhunski tim domaćih stručnjaka s kojima su razvili digitalni proizvod na razini punokrvnog insurtecha. Kako je nastalo LAQO, otkrivamo.

Digitalni marketing

#jedvačekam: Kad se industrija udruži, a javnost postane kreativac – kampanja osvaja medije i nagrade

Kafići, teretane, kazališta, tržnice i još mnogo drugih poslovanja i brendova u vrijeme društvene izolacije nisu mogli doći do svojih kupaca. Kako su 3 hrvatske agencije uz HURA-u pripremile projekt koji je u korist svih njih ostvario milijun kuna medijske vrijednosti?

Intervju

Najčešći mentori u IT-u su Google, StackOverflow… A 4 naše entuzijastice žele tome dodati Mentoring Byte

Iako mnoge tehnološke tvrtke imaju organiziran sustav mentoriranja, najčešće se on fokusira na tehničke vještine. Nataša Kapov, Andrea Knez Karačić, Marina Grljušić i Lora Pleško žele to promijeniti i uvesti kulturu mentoriranja – i tehničkih, ali i mekih vještina u ponekad poprilično “tvrdu” IT zajednicu.

Mobilno

Krajnje je vrijeme da konačno bacimo naljepnice i papire: Stiže era aplikacija za vjernost

Točite gorivo, dobijete naljepnice na papirić pa onda popuste. I onda izgubite papirić pa naljepnice... A kartice vjernosti redovito nemate uza sebe. I onda nikakve koristi. Česta je to praksa u Hrvatskoj već niz godina, ali se polako mijenja. Vrijeme je digitalizirati i takvo iskustvo, a Inina loyalty aplikacija je sjajan primjer.