http___media-x.hr_responsive-web-dizajn__1.xml
1.1 2.1 2.2 3.1 3.2
Responsive Web Design (RWD) is an approach to web design in which a site is crafted to provide an optimal viewing experience across a wide range of devices from desktop to tablets to smartphones. *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. * Source: Google Developers When the pictures, text and videos of your website are flexible enough to shrink or expand automatically depending on the device of your visitors, you are just saying to them “Hey!!! use this website whenever and wherever you are”.
1.1 2.1 2.2 2.3 3.1 3.2 4.1 4.2 5.1 6.1 6.2 7.1 7.2 7.3 7.4 7.5 8.1 9.1 9.2 10.1 11.1 12.1 13.1 14.1 14.2 15.1 16.1 16.2 17.1 18.1 19.1 20.1 20.2 22.1 24.1 26.1 26.2 27.1 28.1 28.2 28.3 28.4 29.1 30.1 31.1 32.1 33.1 34.1 35.1 36.1 37.1 38.1 39.1 39.2 40.1
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. Š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. Š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. Responsive web dizajn predstavlja novi trend na polju web dizajna. Što je to zapravo Responsive web dizajn? 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. Primjer Za izgled web stranice možemo koristiti pet Media Queria: 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. Na većim rezolucijama raspored se prilagođava ekranu smartphona u horizontalnom (landscape) načinu prikaza. Na ekranu većem od 600 piksela prikazuje se više informacija, poput blog sidebara.Osim toga, sadržaj se prikazuje u dva stupca . 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. Testirajte svoju web stranicu pomoću alata za testiranje responzivnosti. 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. 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. 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. 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. Izvor: http://googlewebmastercentral.blogspot.com