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

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.

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.