Kako dućan izgleda i radi na mobitelu?

WebShopHR je građen po načelu „mobilni prvi". Sve stranice prilagođavaju se uskim ekranima, a ključni tokovi rade i bez JavaScripta, pa kupac može kupovati i na starijim ili slabijim uređajima. Danas većina kupaca dolazi s mobitela, pa je mobilni doživljaj ravnopravan desktopu, a ne degradirana inačica.

Bez horizontalnog scrolla

Svaka tema provjerava se na uskim mobilnim širinama na osam ključnih trgovinskih stranica. Alat učitava stranicu, mijenja stylesheet na svaku od dostupnih tema i izravno mjeri javlja li se horizontalni scroll. Ako se pokaže, izlazi s greškom i prijavljuje koji element prelazi desni rub.

To osigurava da niti jedna tema ne izgleda slomljeno ili razvučeno na mobitelu. Horizontalni scroll na mobitelu je jedan od najčešćih razloga zbog kojih kupac napusti stranicu, pa se ovaj audit vodi kao obavezna prepreka.

Tekst se ne ruši izvan ekrana

overflow-wrap: anywhere postavljen je na razini cijelog dokumenta. Dugi nazivi, cijene i opisi artikala mogu se lomiti na bilo kojoj točki, pa čak i vrlo dugi nazivi dućana ne guraju stranicu u horizontalni scroll. Ova jednostavna odluka je puno pouzdanija od ručnog prelamanja ili skraćivanja teksta.

Tablice koje se skrolaju unutar sebe

Košarica, narudžba i druge tablice na uskim ekranima postaju blok elementi s overflow-x: auto. To znači da tablica može biti šira od ekrana, ali se horizontalno skrola unutar vlastitog okvira, a ne gura cijelu stranicu. Kupac i dalje vidi sve stupce, samo ih pomiče unutar tablice.

Mobilno zaglavlje i fluidna tipografija

Kad ekran padne ispod određene širine, zaglavlje se prelama u manje redove. Naslovi koriste clamp() funkciju, pa se veličina slova prilagođava širini ekrana umjesto da bude fiksna pa prelazi rubove. Time se izbjegava situacija u kojoj naslov bude premalen na velikom ekranu ili prevelik na malom.

Responzivne mreže artikala

Popisi artikala i galerije koriste CSS mrežu s auto-fit / auto-fill, pa se kartice same raspoređuju u stupce ovisno o širini. Ne treba zasebnih predložaka za mobitel i desktop. Na uskom ekranu se kartice slažu u jedan ili dva stupca, a na širokom ekranu se raspoređuju u više.

Slike ne guraju sadržaj

Svaki slikovni okvir ima fiksan omjer stranica i object-fit: cover, a svaka slika nosi eksplicitne width i height atribute. Preglednik odmah zna koliko prostora rezervirati, pa se stranica ne pomice kad se slika dovrši učitavanjem. To je posebno važno na sporijim mobilnim mrežama, gdje se slike učitavaju postepeno.

Odgođeno učitavanje slika

Slike koje nisu odmah vidljive (popis artikala, kategorije, galerija) imaju loading="lazy". Hero slika, koja je prvi element stranice, učitava se odmah (loading="eager"), pa najvažniji vizualni sadržaj ne čeka. Na taj način mobilni kupac troši manje prometa i brže dobiva tekst i cijene.

Minimalan JavaScript

Dućan učitava samo jednu malu JavaScript knjižnicu, i to odgođeno (defer). Sve osnovne radnje (dodavanje u košaricu, naplata, pretraga, recenzije, povrat, cookie privola) rade kao obični HTML obrasci. AI chat dodaje dodatnu skriptu, ali samo na Enterprise paketu. Bez obzira na paket, osnovna kupovina ne zahtijeva nikakav složeni frontend okvir.

Prava mobilna tipkovnica

Polja u formama koriste odgovarajuće vrste unosa: email za e-mail, number za količinu, inputmode="numeric" za OIB, inputmode="decimal" za iznos poklon bona. Kupac na mobitelu odmah dobiva numeričku ili decimalnu tipkovnicu bez dodatnih dodira. To smanjuje pogreške kod unosa i ubrzava kupnju.

Podrška bez JavaScripta

Čak i ako kupac isključi JavaScript ili je na uređaju koji ga ne podržava, košarica, naplata, pretraga i recenzije ostaju funkcionalne kao klasični obrasci. HTMX je samo progresivno poboljšanje koje ubrzava interakciju, a ne uvjet za kupnju. To znači da funkcionalnost ne ovisi o kvaliteti mobilne mreže niti o starosti uređaja.

Više o temi: Izgled i brzina.