Suosnivač Smashing Magazinea: Kreirajte responzivne stranice koje mogu trajati godinama

Suosnivač Smashing Magazinea: Kreirajte responzivne stranice koje mogu trajati godinama

Vitaly Friedman, suosnivač Smashing Magazinea, govorio je o responzivnom dizajnu na FFWD.PRO
Vitaly Friedman, suosnivač Smashing Magazinea, govorio je o responzivnom dizajnu na FFWD.PRO (fotografija: Mirko Beović)

Responzivan dizajn. Pojam je to o kojemu u posljednje vrijeme dosta slušamo. Naime, kako internetskim stranicama pristupamo sa sve više različitih uređaja, koji imaju različite veličine i vrste ekrana, iznimno je bitno da iskustvo korištenja bude ujednačeno na svim uređajima. O trikovima i idejama što funkcionira u ovoj vrsti dizajna na konferenciji FFWD.PRO govorio je Vitaly Friedman, suosnivač Smashing Magazinea.

Kako kaže, responzivan dizajn tjera web dizajnere da prihvate novi mentalni sklop za proces dizajniranja, ali i nove tehnike koje koriste u dizajniranju i kodiranju. Osvrnuo se i na tvrdnje da je ova vrsta dizajna pogrešna – upitao se: Kako može biti pogrešna, ako je tu riječ samo o alatu?

To je samo prigodan alat za kaotičan, fluidan web. Možda nije najbolji, ali je najbolji koji za sada postoji. To je novi mentalni sklop koji nas tjera da ponovno razmislimo o svemu i promijenimo naše navike.

Friedman je na praktičnim primjerima pokazao neke od glavnih problema responzivnog dizajna i načine na koje se oni mogu riješiti. Jedan od problema predstavljaju fotografije i ilustracije. Primjerice, kako bi se pravilno prikazivale na zaslonima visoke gustoće, ne trebaju nam slike visoke razlučivosti – bila je to njegova hrabra izjava koja je izazvala iznenađenje u publici, ali je na praktičnim primjerima pokazano kako se to može postići.

Za optimiziranje vizuala mogu se koristiti alati kao što su TinyPNG ili JPEGMini. Osobno smatram da je ova vrsta kompresije značajnija od kompresije HTML ili CSS dokumenata.

Isto tako, napomenuo je kako nema čarobnog trika za postizanje responzivnosti slika, ali preporučio je pristupe kao što je Picturefill.

Prvo tekst, onda slike?

Dotaknuo se i uvjetovanog učitavanja u sklopu kojega se od internetskih preglednika traži da učitava elemente progresivno, osiguravajući na taj način brzo i funkcionalno iskustvo pristupa osnovnim sadržajima stranice. Kao dobar primjer, izdvojio je stranicu od  The Guardiana, odnosno, način na koje ona učitava podatke. Prvo ide osnovni sadržaj (core content), naglašeni sadržaj (enhancement) i ostali dijelovi za koje korisnici najmanje mare (leftovers, kao što su analitike, oglasi i sadržaj trećih strana).

Najbolje bi bilo kada bi se prvo učitavao tekst, a nakon toga slike. Naime, ako na stranicu dolazi korisnik putem mobitela s lošim signalom, recimo, EDGE, dok čeka da se stranica učita, barem može čitati tekst. Korisnici na stranice ionako dolaze zbog sadržaja, a na ovaj način ga mogu odmah početi konzumirati dok čekaju na potpuno učitavanje.

Dao je i savjet da se prilikom planiranja projekta predvide i ciljevi koji se žele ispuniti, odnosno ograničenja koja se ne smiju prijeći, kad je riječ o brzini učitavanja stranice na lošoj internetskoj vezi, te da se na taj način prioretizira ono što je bitno. To će svim članovima tima pomoći prilikom procesa gradnje stranice i dizajna, jer sve što se naknadno dodaje imat će posljedice na brzinu učitavanja.

Fotografija: Mirko Beović
Fotografija: Mirko Beović

Smashing Magazine i web shop

Friedman je prezentirao i način na koji će Smashing Magazine redizajnirati svoj web shop kako bi bio pristupačan (responzivan) za razne tipove uređaja poput mobitela i tableta. Prilikom redizajna počeli su prvo s mobilnim rješenjem, a kako bi olakšali korisnicima na mobitelima kupovinu, osmislili su i testirali niz funkcionalnosti.

Najviše smo pažnje posvetili košarici, gdje se putem lokacije procijeni gdje se osoba nalazi, kako bi se odmah moglo odrediti u kojem će vremenu knjiga, ako je riječ o tiskanom izdanju, stići na kućnu adresu, što se odmah i prikaže kupcu. Također, prilikom upisa adrese, prvo se upisuje poštanski broj, prema kojemu se predviđa o kojem se gradu ili državi radi.

Sve se to radilo sa ciljem da korisnici na mobilnim uređajima moraju što manje stvari upisivati. Isto se odnosi i na odabir metode plaćanja, stoga su osmislili sustav Better Payment – u istome se polju, odvojeni samo zarezima, upisuju broj kartice, datum isteka i sigurnosni kod, a sustav prilikom upisivanja odmah provjerava jesu li podatci točni ili ne. No, iako je ova funkcionalnost izazvala odobravanje publike na konferenciji FFWD.PRO, Friedman je istaknuo kako su prema istraživanju zaključili da je određen dio korisnika smatrao kako takva forma nije ulijeva dovoljno sigurnosti kao standardna, stoga će za njih biti potreban period navikavanja na ovaj zanimljiv pristup.

Friedman je na kraju ohrabrio sudionike konferencije da pokušaju kreirati responzivne stranice, ali a pokušaju razmišljati na način kako bi one mogle dobro funkcionirati i za pet, šest ili sedam godina.

Komentari

Odgovori

Tvoja e-mail adresa neće biti objavljena.

Popularno

Tehnologija

Domaći ININ uz AI “opametio” održavanje cesta i očitavanje brojila u Slavonskom Brodu

Koristimo AI za filtere na Instagramu i razgovaramo s robotima svaki dan. Zašto onda ne bismo koristili umjetnu inteligenciju za bilježenje rupa na cesti? Tvrtka ININ mogla bi imati pravo rješenje.

Društvene mreže

Jeste li mislili da će 16 godina od osnivanja Facebooka na njemu najvažnije biti – grupe?

Pokretači i administratori otkrivaju mi kako su nastala stručna udruženja, pa i poslovna partnerstva, na temelju specijaliziranih Facebook - grupa.

Intervju

Good Game Nikole Stolnika osigurao 2,2 milijuna kuna, među investitorima Sacha Dragić, Ivan Klarić i Bruno Kovačić

Esport organizacija Good Game nedavno je osigurala svoju prvu veliku investiciju od 300 tisuća eura, na krilima grupe investitora koja uključuje Ivana Klarića, Brunu Kovačića i Sachu Dragića.

Što ste propustili

Prikaz

Što znači biti junior, što middle, a što senior u hrvatskoj tehnološkoj industriji?

Tri programerske pozicije - 100 definicija što obuhvaćaju. Ususret objavi matrice senioriteta development agencije Bornfight, iskoristili smo priliku razgovarati s nekoliko članova domaće IT zajednice ne bi li rasvijetlili što bi mogao biti standard za juniorski, middle ili seniorski posao programera. Evo što smo saznali...

Kultura 2.0

Zašto vam baš neću dati email ili broj direktora te tvrtke, ali možda napravim intro (što je bolje za vas)

“Možeš li mi dati email ili telefon od...?” Žao mi je, ne neću. Umjesto dilanja kontaktnih podataka, vrijeme je da usvojimo kulturu “introa”.

Internet marketing

Uvodimo četverodnevni radni tjedan i normalne rokove u marketinšku industriju ASAP!

Svi marketingaši na početku svoje karijere prođu vatreno krštenje rokova "za jučer", ali mora li takvo stanje ostati i u digitalnom dobu? Zajedno s Domagojem Davidovićem iz Švicarske, otkrivamo potencijalna rješenja za normalniji radni ritam u industriji.

Internet marketing

Na Valentinovo ne cvjetaju samo ruže, nego i industrija seksi igračaka za odrasle: LELO i Libido otkrivaju i koliko

Sretno Valentinovo! Danas je dan zaljubljenih, a na Netokraciji smo se odlučili istražiti kupovne navike i digitalne kampanje nešto posebnijih stvari, baš za ovaj dan.

Tehnologija

Nanobit i Microblink: Ako zaživi GDSA, izazivač Google Playa, olakšat će ulazak na kinesko tržište aplikacija

Xiaomi, Vivo i Oppo udružili su se u razvoju platforme koja bi bila direktan konkurent Google Playu. Kako to može utjecati na domaće IT tvrtke, otkrili smo u razgovoru s njihovim predstavnicima.

Mobilno

MWC otkazan: Hrvatski novinari i izlagači, poput Microblinka, Undabota i Delta Realityja, saniraju štetu

Najveći sajam mobilne telefonije, Mobile World Congress u Barceloni jučer je otkazan, a kao razlog se navodi - koronavirus. Neki bi se s time složili, neki vide druge razloge, no posljedice za mnoge u industriji su očigledne i nisu zaobišle hrvatske izlagače, novinare i posjetitelje.