• Početna
  • Usluge
    • Grafički dizajn
    • Izrada web stranica
    • Oglašavanje na društvenim mrežama
    • Google Adwords oglašavanje
    • Content marketing
    • E-mail marketing
    • Optimizacija za tražilice (SEO)
    • Optimizacija konverzija (CRO)
    • Web analitika
    • Video marketing
    • Tisak
    • Sustavi za prezentaciju
  • Upoznaj nas
  • Radovi
  • Blog
  • Kontakt
  • HR
logobox
logobox

Što je responzivni dizajn?

Ana Cvetković
15. studenoga 2017.
Web dizajn
responzivni-web-dizajn
S razvojem pametnih telefona i tableta razvio se i responzivni dizajn te postao jedan od parametara kvalitetno izrađenih web stranica.

Responzivni web dizajn, skraćeno RWD, ne postoji dugo. Razvio se u ranim 2010-ima s pojavom pametnih mobitela i zanimljiva je tema zato što se još uvijek mijenja.

To je pristup web dizajnu pri kojem se pazi kako se web stranica prikazuje na različitim uređajima i veličinama zaslona. Sadržaj, dizajn i performanse moraju biti što sličniji pri pregledu zbog boljeg korisničkog doživljaja i lakoće upotrebe web stranice.

Pojam responzivni web dizajn skovao je Ethan Marcotte, autor u časopisu A List Apart. Ethan naglašava da responzivni dizajn mora odgovarati potrebama korisnika i uređajima koje oni upotrebljavaju. Između ostalog, to znači da se raspored elemenata stranice (layout) mijenja ovisno o veličini i mogućnostima. Primjerice, na pametnom telefonu korisnici vide samo jednu kolumnu, na tabletu dvije, na desktopu npr. četiri…

Imagine-a-responsive-world

Prije smo web stranice gledali samo na desktop računalima i laptopima te su one rađene upravo s tim fiksnim veličinama prikaza. Dakle responzivni dizajn zapravo je evoluirao s razvojem pametnih telefona i tableta. Danas rijetko koja stranica nije responzivna, a RWD je postao standard pri njihovoj izradi.

Dizajneri koji rade predloške za web stranice moraju znati sve o responzivnom dizajnu kako bi mogli predvidjeti izgled stranice na tri uređaja: mobitelu, tabletu i desktopu. Tu su također pametni televizori na kojima sve više ljudi surfa, a dobro je znati da Apple uređaji imaju Retina Display koji omogućuje puno veću rezoluciju.

Zašto je responzivni dizajn važan?

Sweor.com ima statistiku koja daje odgovor na gore navedeno pitanje:

  • 60% online prometa odvija se na mobilnim uređajima
  • početkom 2014. broj korisnika koji internetu pristupaju preko mobilnih uređaja premašio je broj desktop korisnika
  • 40% korisnika izabrat će drugi rezultat u tražilici ako prvi nije optimiziran za mobitele tj. responzivan
  • 4 od 5 korisnika bar jednom mjesečno pregledava retail sadržaje preko mobitela i tamo ih kupuje
  • od 2015. Google nagrađuje ​​web stranice koje su responzivne i kažnjava one koje nisu (ovaj update poznat je kao Mobilegeddon)

responzivni-dizajn

Pri izradi responzivne web stranice posebnu pažnju treba obratiti na viewport, točke prijeloma i responzivnost slika.

Viewport

Prije su se web stranice dizajnirale samo za zaslone računala i imale su fiksnu veličinu. Kada smo surfati počeli na tabletima i mobitelima, takve stranice su bile prevelike i nisu se uklapale u okvire pametnih uređaja. Tom se problemu doskočilo smanjivanjem cijele web stranice kako bi ona odgovarala manjim zaslonima. Ovo nije bilo savršeno, ali poslužilo je svrsi.

Uz HTML5 predstavljena je metoda koja web dizajnerima daje nadzor nad viewportom putem oznake <meta>. Viewport je područje web stranice koje korisnik vidi i varira ovisno o veličini uređaja na kojem se web stranica gleda. Ovaj <meta> viewport element, koji pruža upute pregledniku o tome kako kontrolirati dimenzije i proporcionalno povećanje stranice, trebala bi imati svaka web stranica:

<meta name=”viewport” content=”width=device-width, initial scale=1.0″>

  • width=device-width postavlja širinu stranice tako da ona slijedi širinu zaslona uređaja
  • initial-scale=1.0 postavlja početnu razinu zumiranja kada se stranica prvi put učita
responsive-design

Media queries ili prijelomne točke

Media queries su jednostavni filteri koji se mogu implementirati unutar CSS-a. Preko njih tj. točaka prekida moguće je kontrolirati CSS stilove specifične za određene uređaje. Standardne točke prekida stalno se mijenjaju zato što se standardna veličina uređaja mijenja, ali najčešće točke za mobilne uređaje, tablete i desktop računala prikazane su ispod.

// Vrlo mali uređaji (portret telefoni, manji od 576px)
// No media query since this is the default in Bootstrap

// Mali uređaji (landscape telefoni, 576px i više)
@media (min-width: 576px) { … }

// Srednji uređaji (tableti, 768px i više)
@media (min-width: 768px) { … }

// Veliki uređaji (desktop računala, 992px i više)
@media (min-width: 992px) { … }

// Extra veliki uređaji (velika desktop računala, 1200px i više)
@media (min-width: 1200px) { … }

device-size-responsive-desig

Zadnjih nekoliko godina web stranice je također važno optimizirati za pametne televizore, uređaje koji imaju Retina Display (npr. 15.6-inčni laptop ima rezoluciju 1600 px, 17-inčni laptop ima 1920 px, a iMac Retina 5K ima 5120×2880 px) te male uređaje kao što su pametni satovi.

Responzivne slike

Problem sa slikama na webu je njihova fiksna veličina. Npr. sliku veličine 500×300 px ne može se „rastegnuti“ na 1000×600 px zato što će izgubiti na kvaliteti tj. biti će pikselizirana. Retina Display i pametni mobiteli još više kompliciraju stvari. Zato treba paziti na nekoliko stvari:

  • dimenzije uređaja
  • dimenzije slika
  • rezoluciju uređaja

Ako optimiziramo slike za Retina Display koji ima veću gustoću piksela po inču, (u prosjeku 2x veću, a na iPhone 6 Plus i drugim novijim mobitelima čak i do 3x), najednostavnije je zamijeniti ih slikama veće rezolucije. Recimo da imate sliku rezolucije 500×300 px, tada u kodu trebate staviti 2x veću sliku dimenzija 1000×600 px. SVG slike su vektorske i najčešće su oštre na svim rezolucijama.

: responzivni web dizajn, web dizajn, web stranica
Avatar
Ana Cvetković

Kategorije

  • AdWords oglašavanje (3)
  • Content marketing (4)
  • Digitalni marketing (6)
  • Društvene mreže (12)
  • Grafički dizajn (11)
  • Novosti (7)
  • Video marketing (1)
  • Web dizajn (8)

Oznake

AdWords boja brend content content marketing DAMconf digitalni marketing dizajn društvene mreže e-mail Facebook fotoaparat fotografija Google grafički dizajn inbound marketing infografika Instagram konverzija live video logotip marketinška strategija medijska objava metrika odnosi s javnošću oglas oglašavanje Photoshop pr prijelom remarketing responzivni web dizajn sadržaj SEO Snapchat stock fotografija struktura teksta targetiranje tekst tipografija tražilica video vizualni identitet web dizajn web stranica

LOGOBOX d.o.o.
Ured: Trg žrtava fašizma 6
10 000 Zagreb
T: +385 1 5574 320
E: [email protected]

Pretplati se na naš newsletter

Pravila privatnosti

Facebook
Twitter
LinkedIn
Instagram

LOGOBOX d.o.o.
Ured: Tomislavova 11
Sjedište: A. Šoljana 22
10 000 Zagreb
T: +385 1 5574 320
E: [email protected]

Pretplati se na naš newsletter

Ova web stranica koristi kolačiće (eng. cookies) zbog pružanja boljeg korisničkog iskustva i funkcionalnosti. Više informacija o kolačićima pronađite u pravilima privatnosti. Prihvaćam
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Uvijek omogućeno
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
Spremi i prihvati
 Logo Header Menu
  • Početna
  • Usluge
    • Grafički dizajn
    • Izrada web stranica
    • Oglašavanje na društvenim mrežama
    • Google Adwords oglašavanje
    • Content marketing
    • E-mail marketing
    • Optimizacija za tražilice (SEO)
    • Optimizacija konverzija (CRO)
    • Web analitika
    • Video marketing
    • Tisak
    • Sustavi za prezentaciju
  • Upoznaj nas
  • Radovi
  • Blog
  • Kontakt
  • HR