Od čega su sastavljene web stranice ?

Web stranice su sastavljene od mnogo linija koda u npr. HTML-u (HyperText Markup Language) , prezentacijskom jeziku za izradu web stranica kojime opisujemo strukturu web dokumenta. Kako se web razvijao, prvotno su u HTML ubacivani elementi za definiciju prezentacije ali se uskoro pojavila potreba za stilskim jezikom koji će HTML osloboditi potrebe prikazivanja sadržaja i njegovog oblikovanja te je tako nastao CSS.
CSS je kratica za (eng.) Cascading Style Sheets. Radi se stilskom jeziku, koji koristimo za opis prezentacije dokumenta napisanog pomoću HTML jezika.
Web stranice gledamo preko web preglednika (eng. browsera). Popularni web preglednici su Google Chrome, Mozilla Firefox, Opera, Safari i Internet Explorer.

[br]
[br]

Što kada poželimo smanjiti web preglednika u kojem gledamo web stranicu?

Sadržaj stranice će ostati na svom mjestu (ako su elementi apsolutno pozicionirani), odnosno sakupljat će se do određene mjere te će se nakon toga elementi stranice (slike, tekstovi, ikone) početi međusobno preklapati (ukoliko su elementi pozicionirani relativno). U oba slučaja sam raspored web stranice ostat će isti i najčešće nećemo  imati kompletan uvid u sadržaj web stranice u prozoru web preglednika, ukoliko web stranicu ne pregledavamo lijevo – desno po horizontalnoj osi (skrolamo).
S obzirom na intezivan razvoj i rastuću popularnost mobilnih platformi (smartphona, tableta, netbooka i sl. ) ovaj problem je postao još izraženiji. Privremeno rješenje su pružile mobilne verzije web stranica. Međutim i one imaju ograničenja u prikazu sadržaja jer se rade za unaprijed određene standardizirane rezolucije. Radilo se o tzv. adaptivnom web dizajnu.

[br]
[br]

Što je to adaptivni web dizajn?

Standardne rezolucije smartphona su 320px vertikalno (portrait) i 480px horizontalno (landscape), rezolucije tableta (i mnogih netbooka) su 768 px vertikalno (portrait) i 1024px horizontalno (landscape) . Naravno, postoje i razne rezolucije desktop monitora.
Adaptivni web dizajn koristi CSS pravila (raspored elemenata) za unaprijed određene rezolucije što s porastom broja rezolucija, veličina ekrana, platformi (operativnih sustava) jednostavno nije bilo zadovoljavajuće.
Responsive web dizajn s druge strane koristi tzv. em-ove i postotke te je sukladno tome mogućnost “skaliranja” prikaza sadržaja doslovce neograničena.

[br]
[br]

[hr]

Responsive web dizajn predstavlja novi trend na polju web dizajna.

[hr]

[br]

[br]

Što je to zapravo Responsive web dizajn?

Izrada responsive web stranica u WordPressu
Sama riječ response, odnosno responsive , prevedeno označava nešto osjetljivo, uzvratno, odzivno, prijemljivo, prilagodljivo. Dakle, responsive web design bi još mogli zvati prilagodjiv web dizajn , odnosno ,  jedan prilagodljiv raspored web stranice za sve moguće verzije rezolucija i uređaja.

Kako responsive web dizajn funkcionira?

Pojednostavljeno rečeno, prilikom izrade web stranice koristimo tzv. Media Queries kako bi aktivirali ili deaktivirali određene CSS klase (pravila) u CSS dokumentu.
[br]
[br]

[br]

Primjer

Za izgled web stranice možemo koristiti pet Media Queria:

Razlike u prikazu pomoću responsive web dizajna

Do 480 px
Ako je rezolucija ekrana manja od 480 piksela (px) , prikazuje se “mobilni raspored”. Sav je sadržaj prikazan u jednom stupcu i ,uvjetno rečeno, manje bitan dio sadržaja se ne prikazuje.

481 – 599 px
Na većim rezolucijama raspored se prilagođava ekranu smartphona u horizontalnom (landscape) načinu prikaza.

600 – 767 px
Na ekranu većem od 600 piksela prikazuje se više informacija, poput blog sidebara.Osim toga, sadržaj se prikazuje u dva stupca .

768 – 1023 px
Ako pregledavate web stranicu preko tableta kao što je npr. iPad, meni će biti prikazan u cijelosti (čitav element) a sve informacije koje su ranije bile skrivene,  sada će se prikazivati. Većina sadržaja će se prikazivati u tri stupca.

1024 px ili više
Posljednja promjena je na ekranima širim od 1024 piksela. Od ove rezolucije prikazivat će se tzv. desktop raspored elemenata web stranice. Sadržaj će se prikazivati u tri stupca a polje za pretraživanje sadržaja će se prikazati pored menija. S obzirom da sve fotografije imaju zadane dimenzije u postotcima , a ne fiksno u pikselima , od ove rezolucije ekrana  fotografije će se prikazivati u maksimalnoj mogućoj rezoluciji.
[br]
[hr]

Testirajte svoju web stranicu pomoću alata za testiranje responzivnosti.

[hr]
[br]

[hr]

[br]

Google preporučuje

Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device.

[br]
Google preporučuje webmasterima da koriste responsive web dizajn, odnosno da koriste isti HTML kod za sve uređaje te da koriste Media queries za izbor prikaza na raznim uređajima.
[br]
Izvor: https://developers.google.com

Advantages of using responsive web design:
it keeps your desktop and mobile content on a single URL, which is easier for your users to interact with, share, and link to and for Google’s algorithms to assign the indexing properties to your content.
Google can discover your content more efficiently as we wouldn’t need to crawl a page with the different Googlebot user agents to retrieve and index all the content.

[br]
Prednosti korištenja responsive web dizajna:
Sadržaj za desktop i mobilne uređaje se nalazi na jednom URL-u (web adresi) što olakšava  interakciju s Vašim korisnicima, dijeljenje sadržaja te Googlovim algoritmima indeksiranje sadržaja Vaše web stranice.
Google efikasnije indeksira sadržaj Vaše web stranice jer ne treba pretraživati sadržaj stranice sa više raznih tzv. Google botova (skraćeni naziv za robota, u značenju računalnog programa koji se izvršava samostalno) kako bi indeksirao cjelokupni sadržaj web stranice.
[br]
Izvor: http://googlewebmastercentral.blogspot.com

Odgovori

Vaša email adresa neće biti objavljena. Obavezna polja su označena s *

Komentiraj