Natrag na vodič za poslovne web stranice

Oriphiel web vodič

Responsive web dizajn za mobitel, tablet i desktop

Kako prilagoditi sadržaj, navigaciju, forme, tablice i CTA elemente različitim ekranima bez skrivanja važne ponude.

Oriphiel stručni tim Ažurirano 23. 7. 2026. 3 min čitanja

Odgovor ukratko

Responsive dizajn nije samo smanjeni desktop; prioritet sadržaja, veličina dodirnih elemenata i način navigacije moraju odgovarati uređaju.

Ključne odluke

  • Koja radnja je najvažnija na mobitelu
  • Koji sadržaj se može presložiti
  • Kako se ponašaju tablice i kartice
  • Treba li mobilni sticky CTA

Provedba korak po korak

Cilj ove lekcije je Kako prilagoditi sadržaj, navigaciju, forme, tablice i CTA elemente različitim ekranima bez skrivanja važne ponude. Korake treba provoditi redom i svaki potvrditi prije širenja opsega.

Preporučeni redoslijed

  • Projektirati mobile-first hijerarhiju
  • Definirati breakpoint prema sadržaju
  • Testirati navigaciju, formu i CTA na stvarnim uređajima
  • Provjeriti landscape i povećani tekst

Praktičan primjer

Primjer primjene: projekt prvo provodi korak „Projektirati mobile-first hijerarhiju”, zatim potvrđuje „Nema horizontalnog scrolla” i tek tada prati pokazatelj „Mobilni conversion rate”. Tako se odluka temelji na provjeri, a ne na dojmu.

Kontrolna lista prije nastavka

Ova provjera odvaja završenu implementaciju od postavke koja samo izgleda dovršeno.

Provjerite

  • Nema horizontalnog scrolla
  • Gumbi su dovoljno veliki
  • Forma ne traži zumiranje
  • Ključna poruka ostaje u prvom viewportu

Najčešće pogreške i rizici

Rizike treba provjeriti prije povećanja prometa, automatizacije ili ovlasti sustava.

Na što treba paziti

  • Elementi se samo stisnu
  • Hover je jedini način otkrivanja sadržaja
  • Mobilni CTA prekriva formu
  • Tablet ostaje neprovjeren

Mjerenje rezultata

Učinak se procjenjuje kroz mali skup metrika koje su povezane s ciljem lekcije i stvarnim poslovnim ishodom.

Metrike koje imaju smisla

  • Mobilni conversion rate
  • Klikovi na telefon
  • Greške po viewportu
  • Core Web Vitals po uređaju

Česta pitanja

Koji je prvi korak za temu „Responsive web dizajn za mobitel, tablet i desktop”?

Projektirati mobile-first hijerarhiju Prije nastavka potvrdite odluku: Koja radnja je najvažnija na mobitelu

Kako provjeriti da je provedba uspješna?

Nema horizontalnog scrolla Nakon toga pratite metriku: Mobilni conversion rate.

Koju pogrešku treba prvo spriječiti?

Elementi se samo stisnu Problem ispravite prije automatizacije ili povećanja budžeta.

Službeni i stručni izvori

Sučelja, pravila i preporuke mogu se mijenjati. Prije produkcijske izmjene provjerite aktualnu dokumentaciju.

Povezani vodiči za poslovni web

Mobilna navigacija za poslovni webKako složiti kratku, dostupnu mobilnu navigaciju s jasnim prioritetima, kontaktom, fokusom i zatvaranjem bez skrivenih zamki. Sticky CTA na mobiteluKada koristiti stalnu donju traku za poziv i WhatsApp te kako spriječiti prekrivanje sadržaja, forme i browser sučelja. Pristupačnost poslovne web straniceOsnove pristupačnog weba: tipkovnica, kontrast, forme, semantika, alt tekst, fokus, smanjena animacija i povećani tekst. Profesionalni web dizajn za poslovnu stranicuKoje odluke razlikuju profesionalan poslovni web od generičkog predloška: hijerarhija, tipografija, ritam, fotografije i dosljednost.

Povežite ovu temu s ostatkom sustava

SEO za izradu web stranicaPovežite prodajnu ponudu, vodiče, interne linkove i organske upite bez kanibalizacije. Google alati i mjerenjePostavite Search Console, GA4, Tag Manager i konverzije nakon tehnički spremnog weba. Kontakt forma i CRMNastavite proces od slanja obrasca prema leadu, statusu i sljedećoj aktivnosti.

Primijenite lekciju na stvarni projekt

Pošaljite postojeću konfiguraciju, cilj i problem koji želite riješiti. Dobit ćete prijedlog sljedećeg tehničkog ili operativnog koraka.

Pošaljite upitPregledajte sve vodiče