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

Infobip ❤️ Netokracijašto akvizicija znači za vas - i nas?

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.

Sukladno članku 94. Zakona o elektroničkim medijima, komentiranje članaka na Netokraciji dopušteno je samo korisnicima koji ostave svoje ime i prezime te mail adresu i prihvate pravila ponašanja.

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, kao i Zakon, 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). Također, upoznajte se sa stavkom 2. članka 94. Zakona o elektroničkim medijima prije no što ostavite komentar.
  • 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 te pravu email adresu.

Kako koristimo podatke koje 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

Novost

Što se događa u tech industriji? Masovna otpuštanja, kripto-burza propala preko noći, a tek Twitter…

Malo je reći kako ovaj tjedan nije bio dobar za IT industriju. Zapravo, poprilično je kaotičan i čini se kako stabilnost neće doći uskoro...

Društvene mreže

Gdje ćemo se družiti i raspravljati ako propadne Twitter?

Bilo da vas brine koliko dugo će još Twitter funkcionirati (što nije čudo s obzirom na svakodnevne vijesti o zbunjujućim poslovnim potezima) ili da ne želite biti dio Muskovog Twittera, evo što se nudi od alternativa.

Programiranje

Miro Jurić već 23 godine radi u Microsoftu u Redmondu, a nama je otkrio tajne uspješnog developer managmenta

Kročiti u sjedište operativnog sustava kojeg koristiš cijeli svoj život, kojeg poznaješ po pozadini predivne livade i oblaka, stvarno je nezaboravno iskustvo. Ipak, ono što te još više iznenadi je razgovor s Hrvatom koji tamo radi 23 godine i koji je s tobom podijelio sve što zna o developer managementu.

Što ste propustili

Tehnologija

30. godina od prvog SMS-a: Kako je privatni kanal postao alat za B2C komunikaciju

Na 30. obljetnicu SMS-a prolazimo specifičnosti SMS kanala komunikacije koji je preživio dolazak interneta, pametnih telefona i messaging aplikacija, a s Infobipovim stručnjacima otkrivamo i zbog čega je na kraju opstao.

Tehnologija

Panika, izgubljeni podaci, ransomware: Kako spriječiti i liječiti sigurnosne incidente?

Napadi hakera, malware i ransomware ne događaju se nekom drugom. Kako takve napade spriječiti i što učiniti ako se ipak dogode - s tehničke, ali i ljudske strane, saznali smo od konzultanta za cybersigurnost Tomislava Poljaka.

Intervju

Zoran Božičević: Zdrav tim “tajna” je dobrog developmenta

Zanimljivi projekti i dobra plaća nužan su uvjet zadovoljstva developera, međutim, posebno je umijeće održati ih zadovoljnima i sretnima.

Scaleupi i jednorozi

ReversingLabs: Kad radite s petabajtima podataka, tehnički izazovi su jedinstveni i često pomiču sve granice

Vodeće društvene mreže, antivirusne kompanije, korporacije i vladine agencije širom svijeta od malicioznog softvera štite se koristeći tehnologije razvijene u Zagrebu. S kakvim se sve izazovima susreću jer su stvorili najveću svjetsku bazu malwarea ispričali su nam voditelji tehničkih timova ReversingLabsa.

Društvene mreže

MUP u suradnji s Metom predstavio hrvatsku verziju Amber Alerta, NENO Alarm

NENO Alarm pomoći će u pronalaženju nestale djece u Hrvatskoj - ako dijete nestane, Ministarstvo unutarnjih poslova će obavijestiti tvrtku Meta, koja će inicirati upozorenje tj. NENO Alarm građanima - korisnicima društvenih mreža Facebook i Instagram – u krugu od 60 kilometara.

Intervju

Dobili ste poruku od “prijatelja” koji moli da mu kupite bon? Evo što kaže policija o takvim prijevarama

Uvijek razmišljaš kako se upravo tako nešto neće dogoditi tebi... Ali ipak se dogodi.