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.

Pravila ponašanja

Na Netokraciji za vas stvaramo kvalitetan, autorski potpisan sadržaj i zaista se veselimo vašim kvalitetnim, kontruktivnim komentarima. Poštujmo stoga jedni druge prilikom komentiranja držeći se sljedećih pravila ponašanja:

  • Ne budite 💩: Nema vrijeđanja, diskriminiranja, ni psovanja (osim ako nije osobni izričaj, ali onda neka psovka bude općenita, a ne usmjerena prema nekome)
  • Samo kvalitetna rasprava, manje trolanja: Ne morate se ni sa kim slagati, ali budite konstruktivni i doprinesite raspravi! Svako trolanje, flameanje, koliko god "plesalo" na granici, leti van.
  • Imenom i prezimenom, nismo Anonymous 👤: Autor sadržaja stoji iza svog sadržaja, stoga stojite i vi iza svog komentara. Koristimo ime i prezime (Hrvoje Lončar) ili barem ime i inicijala (Hrvoje L.) te pravu email adresu. Kako koristimo podatke koje tamo ostavljate? Bacite oko na našu izjavu o privatnosti.

Sve ostale komentare ćemo s guštom spaliti, jer ne zaslužuju svoje mjesto na internetu.

Komentari

Odgovori

Tvoja e-mail adresa neće biti objavljena.

Popularno

Tehnologija

Brate, trebam li stvarno uzeti Šaomi?

Xiaomi je u relativno kratkom vremenu postao brend koji se daleko najviše preporučuje u Hrvatskoj i regiji. Zašto?

Izrada web stranica

Kad vam u 2021. padne server, što očekivati od svog hosting poslužitelja?

Po muci se poznaju junaci pa tako i hosting poslužitelji. Kako izgleda posao s druge strane vašeg weba, otkrili smo.

Startupi i poslovanje

Kad bi umjesto nogometaša, jedan od najpoznatijih nogometnih menadžera vodio – programere…

Pojam voditelja tima u IT zajednici poprilično je širok. Različite tvrtke definiraju poziciju na različite načine te sama pozicija može uključivati različite vještine i odgovornosti. Kako onda opisati tu mističnu poziciju tako da ju opća populacija može lakše razumijeti?

Što ste propustili

Startupi i poslovanje

Od design-driven do data-driven tvrtke, kako je Score Alarm postao Superology

Superology će uskoro napuniti 10 godina, no njihov rebrending odvio se ne samo ususret toj velikoj obljetnici već kao posljedica rasta tvrtke koja je doktorirala razvoj digitalnog proizvoda u svom području.

Startupi i poslovanje

Počele su prijave za novu generaciju startup inkubatora Algebra LAB-a

Naš najdugovječniji inkubator kojeg je prošlo preko 150 startup projekata u potrazi je za svojom 14. generacijom polaznika.

Karijere

Ivan Šimić odlazi iz Netokracije

Pa, da. Kao što naslov kaže, "onaj drugi Ivan iz Netokracije" - od danas nije više u Netokraciji.

Startupi i poslovanje

Ona je Infobipov tehnički pisac, a hobi joj je učenje o hitnoj medicini

Pisanje tehničke dokumentacije uz istraživanje medicine i pandemije uzrokovane koronavirusom možda ne zvuče kao srodne stvari, ali Sara Tilly iz Infobipa ih uspješno spaja već dugo vremena. Kako joj takav pristup učenju pomaže danas u poslu?

Karijere

Klaudija Šarkanj nova je direktorica HR-a u Gideonu

Klaudija u Gideon Brothers dolazi iz Infobipa, a imat će ključnu ulogu u širenju Gideon tima.

Tehnologija

Brate, trebam li stvarno uzeti Šaomi?

Xiaomi je u relativno kratkom vremenu postao brend koji se daleko najviše preporučuje u Hrvatskoj i regiji. Zašto?