Responzivnost web stranice je sposobnost stranice da se ispravno prikazuje različiti uređaji sa različitim karakteristikama.
Više videa na našem kanalu - naučite internet marketing uz SEMANTICA
Danas se stranice pregledavaju na personalnim računarima, tabletima, pametnim telefonima. Svaki uređaj ima svoje karakteristike - radnu brzinu, rezoluciju ekrana.
Ako sajt ne reaguje, biće ispravno prikazan na računaru. A na telefonu može "ići" - blokovi će se preklapati, font može postati nečitljiv.
Sam izraz responzivnost se široko koristi od objavljivanja knjige Ethana Marcottea Responsive Web Design - Responsive Web Design. Lokacije sposobne da se dinamički prilagođavaju datim karakteristikama uređaja za gledanje nazivaju se adaptivnim.
Primjer responzivnog izgleda
Prikaz na PC-u:
na tanjiru:
Na pametnom telefonu:
Zašto vam je potrebna responzivna web stranica
Tehnologije se razvijaju velikom brzinom, a proizvođači opreme idu u korak s njima. Pametni telefoni, tableti, televizori i drugi elektronski uređaji povezani na internet dostupni su za svaki ukus i budžet, postoji mnogo opcija za veličinu ekrana.
Istovremeno, potrošnja sadržaja raste eksponencijalno. U borbi za klijenta vlasnici sajtova koriste sva sredstva i metode. Konkretno, u fazi razvoja, predviđena je mogućnost ispravnog prikaza vašeg web resursa na različitim uređajima.
Procenat uređaja koji vam omogućavaju pregled informacija na mreži raste svake godine. Raznolikost formata i rezolucija otežava razvojni proces u cjelini, dodatni zahtjevi se moraju uzeti u obzir u svim fazama: dizajneri, i layout dizajneri, i programeri.
Koncept responzivnog dizajna omogućava vam da pojednostavite proces, jer ne morate da kreirate više varijacija sajta, kao što je to bilo ranije, na primer, sa mobilnim verzijama. U tom slučaju, poseban skup funkcija je dizajniran na posebnoj poddomeni.
Stare lokacije treba poboljšati, a različiti pristupi prilagodljivosti omogućavaju implementaciju ovoga. Glavna stvar je ispravno procijeniti skalu na početku, u nekim slučajevima je lakše, brže i jeftinije koristiti nove dizajne i šablone. Ako vaš korporativni identitet nije prepoznatljiv brend, često vas činjenica da je moralno zastario također tjera na preradu. I niko nije otkazao rebranding kao fazu prelaska na novi nivo. Responzivna web stranica je moćan alat za vaše poslovanje.
Postoje usluge za provjeru koliko je stranica responzivna.
Štoviše, danas najveći pretraživači Google i Yandex uzimaju u obzir ovaj parametar prilikom rangiranja web stranica. Budući da je upotrebljivost, navigacija je jedan od nezamjenjivih faktora u procjeni kvaliteta stranice. Brzina učitavanja informacija, a u slučaju optimizovanih slika pada, nečitljiv tekst i izobličeni elementi koji su premali ili ne stanu na ekran otežavaju pronalaženje informacija i jednostavno dovode do povećanja odbijanja - korisnik zatvara stranicu. To su faktori ponašanja koji također utiču na poziciju u rezultatima pretrage.
Za vlasnike sajtova tehnička terminologija i parametri rangiranja nisu sasvim jasni i opipljivi kriterijumi. Ali dovoljno je da shvate kako to utiče na dinamiku posjećenosti. U mnogim oblastima, udio prometa s mobilnih uređaja je uporediv, pa čak i premašuje promet sa desktopa. S tim se mora računati. Sve je manje moguće sresti programere koji ne nude adaptaciju web stranice, ali neće škoditi da se krećete po ovom pitanju kako biste kontrolirali proces.
Principi prilagodljivosti
Threading
Recimo da ste razvili dizajn za desktop pretraživače. Sve je super. Kada gledate ovu stranicu s mobilnog uređaja, blokovi se pomiču i idu jedan ispod drugog.
Ovo se zove protok. A sada je to jedan od glavnih principa koji se koristi u responzivnom dizajnu. Razmotrite ovo.
Relativnost jedinica
Sa školskih časova fizike se zna da brzina može biti apsolutna, kada bez obzira odakle posmatrate kretanje, brzina će biti ista. I relativno - kada se, ovisno o referentnoj tački, brzina može promijeniti.
Jedinice su iste. Različiti uređaji imaju različite gustine piksela. A veličina, na primjer, 320 px će izgledati drugačije na ekranu računara i pametnog telefona.
Rješenje je korištenje relativnih jedinica. Kada postavite sve veličine, razmere i koordinate bloka u odnosu na element koji se nalazi na ekranu računara i na ekranu pametnog telefona. Na primjer, gornji rub.
Korištenje kontrolnih tačaka
To su elementi čiji se raspored mijenja samo ako se za gledanje koristi određeni uređaj date parametre ekran.
Na primjer, ako sadržaj stranice „ispuzi“, onda ima smisla dodati takvu tačku i popraviti sadržaj.
Minimalne i maksimalne vrijednosti
Na mobilnom telefonu, članak se može prikazati kako treba. Ali sada otvorite istu stranicu na širokom ekranu i niste zadovoljni slikom. Sve je razvučeno, čitljivost ne dolazi u obzir.
Na primjer, možete odrediti svojstva. Ako je širina ekrana manja od 1000 piksela, onda bi sadržaj trebao biti prikazan na cijelom ekranu. U suprotnom, maksimalna širina će biti 1000 piksela.
Ugniježđenje objekata
Događa se da morate koristiti mnogo elemenata koji zavise od položaja drugih blokova. Teško je to kontrolisati. Takve objekte možete ugnijezditi u jedan kontejner. Ovo je pogodno za one blokove koje ne želite da prilagođavate parametrima ekrana - dugmad, logotipi itd.
Ispravni fontovi
Web fontovi izgledaju lijepo. Ali ne zaboravite da su svi napunjeni. Ovo utiče na brzinu učitavanja stranica za korisnika.
Ispravna upotreba rasterske i vektorske grafike
Ako slika ima puno malih detalja, onda koristite rasterski format. Inače - vektor.
Ali nijedna slika se ne smije koristiti bez optimizacije - kompresije. Vektorske slike su obično već komprimirane. Ali ne podržavaju ih svi stariji pretraživači.
Poštovanje rasporeda
Postoje opšti standardi za koje se osnovne dimenzije obično uzimaju da se vode prilikom razvoja izgleda.
U responzivnom dizajnu postoji takva stvar kao što su tačke prekida. Ovo su parametri koji se prosljeđuju u funkcijama medija. Navedite pri kojim rezolucijama dolazi do promjene dizajna.
- Za mobilni 320px, 480px.
- Za tablete 768px.
- Za netbookove i neke tablete 1024px.
- Za personalne računare 1280px i više.
Vezanje za određenu rezoluciju nije kruto. Zavisi od postavki i parametara uređaja.
Ponekad nema potrebe za kreiranjem rasporeda za srednje rezolucije, na primjer, 480px, ako je raspored ispravno prikazan u rasponu od 768 - 320px.
Ako se raspored "pokvari" na određenom gadgetu, neispravno se prikazuje u drugoj rezoluciji, stvarne vrijednosti za ovaj ekran se uzimaju kao granične tačke.
Medijski upiti
Razvoj responzivnih sajtova zasniva se na principu definisanja parametara stila korišćenjem medijskih upita.
Upiti definišu:
- Tip uređaja: projektori, pametni telefoni, monitori, televizori itd.
- Uslovi.
Odgovarajući zahtjev i odgovor će primijeniti odgovarajuće postavke prikaza iz css datoteke stilova.
Provjera responzivnosti stranice
Možete provjeriti kako se vaša stranica prikazuje na mobilnim uređajima koristeći razne usluge i alate.
Korišćenje pretraživača
Na primjer, Google Chrome ima ugrađeni alat za provjeru ispravnosti dizajna stranice za prikaz na mobilnim uređajima. Morate pritisnuti tipku F12 ili Ctrl + Shift + I, ili odabrati "Dodatni alati" - "Alati za programere" u izborniku.
V Mozilla Firefox to se može uraditi na ovaj način "Menu" - "Razvoj" - "Responsive Design", ili Ctrl + Shift + M.
Google Mobile Friendly (Google Search Console)
Samo ukucamo puni URL u string i dobijemo rezultate. Verifikacija obično traje manje od jedne minute.
Responsive site je standard web razvoja, jedan od pokazatelja kvalitete internetskog resursa i pažljivog odnosa prema potrebama korisnika.
Prilagodljivi izgled stranica omogućava da se web stranice automatski prilagode ekranima tableta i pametnih telefona. Promet mobilnog interneta raste svake godine, a da biste efikasno obrađivali ovaj promet, potrebno je korisnicima ponuditi responsive web stranice sa korisničkim sučeljem.
Pretraživači koriste brojne kriterije za procjenu odziva web stranice kada se gleda na mobilnim uređajima. Google pokušava da pojednostavi korištenje interneta za vlasnike pametnih telefona i tableta, označavajući mobilne rezultate prilagođene za mobilnih uređaja lokacije sa posebnom oznakom prilagođen mobilnim uređajima... Yandex također ima algoritam koji daje prednost web lokacijama s mobilnom / responzivnom verzijom za korisnike u mobilnoj pretrazi.
Možete provjeriti prikaz stranice na mobilnim uređajima na uslugama i.
Rice. 1. Rezultati mobilnog pretraživanja Yandex-a i Google-a sa napomenom o pristupačnosti stranice mobilnim uređajima Šta je responzivni izgled
Responzivni izgled pretpostavlja odsustvo horizontalne pruge područja za pomicanje i zumiranje kada se gledaju na bilo kojem uređaju, čitljiv tekst i velika područja za elemente na koje se može kliknuti. Pomoću medijskih upita možete kontrolirati raspored i položaj blokova na stranici, obnavljajući predložak kako bi se prilagodio različitim veličinama ekrana uređaja.
Osnovne tehnike za kreiranje responzivne web stranice navedene su u članku. Za responsive designširina glavnog kontejnera sajta je podešena u%, dok može biti jednaka ili 100% širine prozora pretraživača, ili manje. Širina kolona mreže je također podešena u%. V responsive designširine glavnog kontejnera i stupaca mreže su fiksirane pomoću vrijednosti u px.
Tehnika responzivnog fluidnog rasporeda o kojoj se govori u ovoj lekciji odlično funkcionira na rasporedu s dvije kolone, čineći web lokaciju responzivnom i lakom za pregled na mobilnim uređajima. Predložak pretpostavlja drugačiji izgled glavnog sadržaja stranica, u ovoj lekciji će se analizirati izgled glavne stranice.
Izgled glavne stranice
Stranica se sastoji od tri glavna bloka: zaglavlja (header), kontejnera omotača za glavni sadržaj i bočnu traku i podnožja (footer). Uzet ćemo 768px i 480px kao naše prekretnice u dizajnu.
U prvoj tački ćemo sakriti gornji meni i pomeriti bočnu traku ispod kontejnera sa objavama. U drugoj tački, promijenit ćemo poziciju elemenata zaglavlja, otkazati pozicioniranje dugmadi društvenih medija u objavama i otkazati premotavanje kolona podnožja.
Rice. 2. Primjer responzivnog izgleda 1. Meta oznake i odjeljak
1) Dodajte u sekciju
potrebne datoteke - link do korištenih fontova, jQuery biblioteke i dodatka bez prefiksa (kako ne bi pisali prefikse pretraživača za svojstva):
2. Zaglavlje stranice
U zaglavlju stranice
logo ;
dugme za prikaz / sakrivanje glavnog menija
