Kako napraviti responzivnu web stranicu? Ovdje možete dobiti informacije o ovoj adaptivnoj tehnici zasnovanoj na današnjim web modelima, što znači da se pod jednim dizajnom web portalu može pristupiti i pravilno pregledati s bilo kojeg računala ili elektroničkog uređaja.
¿Kako napraviti responzivnu web stranicu?
Vrlo je zgodno učiniti web stranicu prilagodljivom ili osjetljivom na moguće adaptacije. Osim što garantuje uspjeh ispravnog rada na internetu sa bilo koje elektronske platforme. U narednim redovima pojašnjava se način izrade responzivnog weba, koji je koncipiran iz same prirode prilagodljivosti web stranica. Stoga će se prilikom dizajniranja web stranice pod responzivnim modelom izgled ili slika navedenog weba moći prilagoditi i vidjeti ovisno o elektroničkom uređaju koji se koristi za navigaciju.
Niko nije svjestan višestruke količine opreme ili elektronskih uređaja koji trenutno postoje za navigaciju Internetom, kao što su: računari, tableti, pametni telefoni, laptopovi, itd. U ranim danima interneta, programeri web stranica su se navikli na kreiranje stranica sa uobičajenom širinom piksela. Na primjer, 90-ih godina, monitori koji su postojali imali su jedan ekran veličine 14” sa fiksnom širinom od 640 piksela. Dizajneri web stranica su prilagodili svoje dizajne standardnim dimenzijama jedinih monitora koji su postojali.
Blizu početka 2000. i do dolaska 2010-ih, modeli monitora i širine piksela su varirali. Web dizajn je prilagođen svakoj od varijanti. Od 2010. godine dogodila se velika tehnološka revolucija koja je izazvala neravnotežu u scenariju dizajna web stranica. Navigacija putem mobilne telefonije uvedena je u oblasti Interneta. Ova nova telefonija koristila je pretraživače baš kao računar. Sa ovom velikom tehnološkom revolucijom, došlo je vrijeme da se napreduje ka onome što je poznato kao responzivni dizajn ili adaptivni dizajn web stranica.
Važnost znanja kako napraviti responzivni web
Toliko je važno da programeri web stranica znaju kako napraviti responzivni web; da čak i kompanija Google od velikog prestiža na internetu to ukazuje kao nešto izuzetno neophodno. Zato što web stranica dizajnirana prema responzivnom modelu omogućava optimizaciju navigacije, izbjegava dupliranje sadržaja i pruža izvanredno stabilan kvalitet slike. Drugi aspekti koji su važni pri kreiranju responzivne web stranice su:
- Sa jednom adaptacijom jezika za označavanje hiperteksta (HTML) i CSS jezika, može se postići da pokrije bilo koju rezoluciju ekrana. Time se izbjegava kreiranje web stranice za svaki tip uređaja koji vam omogućava da je posjetite ili pretražujete. Ovaj aspekt također smanjuje vrijeme dizajna.
- Automatski se prilagođava prilikom pregledavanja, čineći čitanje i interakciju mogućim pri svakoj određenoj posjeti.
- Uspiju se bolje i brže pozicionirati u pretraživačima. Budući da ovaj tip dizajna izbjegava dupliciranje i preusmjeravanja.
- Web stranice kreirane prema ovom dizajnu omogućavaju da njihov sadržaj brže postane viralan, zbog njihovog originalnog i jednostavnog načina dijeljenja.
Šta je responzivni web dizajn
Responzivni web dizajn, poznat i kao adaptivni web dizajn, način je dizajniranja ili razvoja web stranica. Ovaj sistem ima posebnost što omogućava da se web stranica kreirana pod jednim dizajnom posjeti ili pristupi sa bilo kojeg računara ili elektronske platforme. Naziv responsive je engleski izraz koji se odnosi na nešto što je prilagodljivo, prilagodljivo, vidljivo, vidljivo itd.
Ova tehnika je dobila ovo ime zbog sposobnosti ove vrste web stranice da se prilagodi svakom mjerenju širine ekrana. Omogućavanje njegovog prikaza i ispravnog rada, bez pravljenja bilo kakve razlike u pogledu uređaja koji se koristi za navigaciju.
To je moguće zahvaljujući organizaciji slika i sadržaja, kao i jednostavnosti responzivnog web menija. Četiri glavna kvalifikatora koji definiraju i čine ovu vrstu dizajna web stranice vrlo popularnom su:
- Jednostavno
- Ekonomičan
- Brzo
- I iznad svega navedenog, potpuno su funkcionalni
Kako napraviti responzivni dizajn web i njegova složenost
Može se reći da je složenost oko dizajna i razvoja web stranica nastala od 2010-ih, kada su se na internet sceni počeli pojavljivati mobilni telefoni sa navigacijom. Koja je koristila pretraživače kao što su Google, Firefox, Explorer, između ostalih, baš kao i PC. Ulazak na ovaj način u nove mogućnosti posjećivanja različitih web stranica. U tim vremenima počinju se pojavljivati i prvi elektronski tableti s pristupom internetu.
Odatle su potrebe za dizajnom web stranica postale složenije. Zbog velikog broja veličina ekrana koje su postojale za prikaz i rad web stranica. Morali ste pronaći tip dizajna koji bi funkcionirao za bilo koju vrstu uređaja i automatski se prilagođavao.
Više niste mogli dizajnirati za jednu, dvije ili tri glavne rezolucije ekrana. Trebalo je shvatiti da će rezolucije uređaja biti sve varijabilnije, osim što će biti mnogo manje od kompjuterskog monitora.
Ovaj trenutak označio je kraj rigidnosti web dizajna. I to ne samo na veliku raznolikost uređaja, već i svaki od njih ima specifične karakteristike, kao što su:
- Veličina ekrana
- Rezolucija ekrana
- CPU snaga
- Operativni sistem
- Kapacitet memorije između ostalog.
Zatim se uvodi novi model web dizajna, čiji je cilj da sa jednim dizajnom bude moguća njegova ispravna vizualizacija bez obzira na uređaj za pretraživanje. Međutim, razvoj ove vrste web stranice ima svoj stepen složenosti.
Koji je razlog složenosti razvoja Responsive Weba?
Izrada web stranice prema prilagodljivom dizajnu zvanom responsive ima svoj stepen složenosti, čak i danas. Zbog dva glavna uzroka, koji su navedeni u nastavku:
1-To je tehnologija koja se dugo nije razvijala i zbog višestrukih načina primjene nije bilo moguće odrediti koja bi od svih opcija mogla biti najbolja. Uvijek se pojavljuju inovacije u vezi sa ovom vrstom web dizajna koji treba razviti. Stoga je teško odrediti najbolji okvir ili tehnologiju podrške, niti generalno pravilo koje osigurava rješenje najvećeg broja mogućih prepreka. Kako bi se olakšala izrada ove vrste web stranice.
2- Drugi razlog je taj što sistem adaptivnog dizajna nije zasnovan samo sa tehnološke tačke gledišta. Što se tiče načina na koji će se stranica razlikovati ovisno o različitim ekranima ili uređajima. Umjesto toga, mora biti dizajniran s idejom kako će funkcionirati u svakom od mogućih scenarija navigacije. Ovaj uzrok dodaje visok nivo složenosti modelu responzivnog web dizajna koji treba da razjasne ljudi koji rade kao programeri sajtova.
Vježbanje i stjecanje dovoljno vještina za rad s adaptivnim ili responzivnim web dizajnom zahtijeva više vremena nego s bilo kojom drugom vrstom web dizajna. Ali postoji nada da će, sa napretkom u računarstvu, stepen složenosti biti manji. Kako bi se dalje razvijali u tom pogledu, od osoblja sa znanjem o web stranicama uključenog u vrste responsive dizajna, stručno osoblje kao što su:
- Raspored
- Dizajneri
- Programeri
- Komercijalni i digitalni marketing osoblje
Smanjite vrijeme dizajna
Ako se dva prethodna uzroka riješe, možda će to smanjiti period razvoja ili stvaranja responzivnog weba. Istovremeno ga je moguće učiniti dostupnim za korištenje uobičajenih web stranica.
U međuvremenu, od onoga što imamo danas, možda će biti brže razvijati novi web dizajn za mobilne uređaje od nule; transformirati ili redizajnirati web kako bi ga učinio prilagodljivim ili prilagodljivim. Uvijek će postojati nada da će neko jednog dana pronaći način da to uradi i ostvari, nadajmo se tome.
U međuvremenu, šta se može učiniti?
Činjenica da je još uvijek vrlo složeno redizajnirati čitavu stranicu koju imamo na webu, kako bismo je učinili prilagodljivom. To ne znači da prestajemo sa malim promjenama na stranici. Kako bismo ga poboljšali i učinili prilagodljivim na različitim pretraživačima kao i na različitim elektronskim uređajima.
Prva stvar koju treba učiniti je provjeriti koji tip web dizajna ima navigacijska stranica. Uglavnom provjerite:
- Izgled web stranice
- Koja je njegova struktura u smislu Html-a i CSS-a
Analizirajući ove dvije osnovne točke, može se ustanoviti da se mogu napraviti male izmjene kako bi se web stranica poboljšala.
Prethodna razmatranja koja treba uzeti u obzir da biste znali kako napraviti responzivni web
Ako je slučaj da već imate web portal, odredišnu stranicu ili blog sa sadržajem, koji je razvijen prema uobičajenom dizajnu i želite ga transformirati u web stranicu responzivnog ili prilagodljivog dizajna. To je samo donošenje odluke i poduzimanje prvog koraka da se to postigne, donošenje odluke da to učinite!
Činjenica da se web stranica transformira iz konvencionalnog dizajna u responsive ne znači da će sav originalni rad biti izgubljen. Budući da neće sav sadržaj biti odbačen, ali će pretrpjeti male i male promjene u njemu. Sadržaj kao što su slike, tekstovi i neki drugi elementi postojećeg sajta mogu se koristiti i ispravno raditi sa transformacijom.
Međutim, suočeni s alternativom prilagođavanja i poboljšanja stranice, zgodno je znati neka prethodna razmatranja koja će favorizirati posao koji treba poduzeti.
Provjerite postojeći Web Movement
Prije izvođenja bilo kakvih promjena na postojećem webu, preporučljivo je provjeriti promet koji ima. Odnosno, statistika o broju ljudi koji posjećuju web stranicu. Na osnovu ovih informacija radićemo na modifikaciji dizajna, u cilju većeg uspeha i boljeg pozicioniranja u pretraživanju. U redizajnu i adaptaciji weba zgodno je znati o SEO alati, jer su najbolji kada je u pitanju postizanje boljeg pozicioniranja u mreži.
Dobra inspiracija je neophodna
Također je preporučljivo pogledati i napraviti a analiza konkurencije ili stranice sa sadržajem sličnim web stranici na koju će se primijeniti promjene prema responzivnom web dizajnu. Ovaj pregled je namijenjen za istraživanje mogućih poboljšanja sadržaja. Ali i kako te slične stranice rade na različitim uređajima. Aspekti koje treba uzeti u obzir pri odabiru lokacija koje mogu biti inspiracija ili uzori za poboljšanja. Oni će biti laka navigacija na tim stranicama i onima koje zahtijevaju manje zumiranja ili pomicanja. Ovdje možete pronaći najbolje trikove za Poboljšajte SEO kako biste postigli dobar sadržaj Primijenite ih!
Semantički Html favorizuje
Upotreba semantičkog Html-a ukazuje da je izgled originalne web stranice ispravno uspostavljen. Ovo ide u prilog ili je od velike pomoći, jer su korišteni samo bitni Html elementi. Imajući na umu u razvoju weba, semantiku svake oznake iznad dizajna istog weba. Prepuštajući CSS-u sopstveni rad dizajna, prema klasama i ID-ovima.
Tokom procesa izrade responzivne web stranice, elementi kao što su:
- DIV
- P
- UL
- LI, između ostalih
Međutim, ako je potrebno ispoštovati korak ukidanja cjelokupnog dizajna modela. Zato što ne možete koristiti nametljiv CSS, to jest, nemojte koristiti nijedan Style atribut unutar koda. Budući da je Html prefinjeniji i sa manje DIV-a, pomoći će da se lakše provedu adaptacije ili da se web učini osjetljivijim. Zato što će CSS biti poboljšan u dobijenom rezultatu.
Pravilno podesite zumiranje kako napraviti responzivnu web stranicu
Preporuča se pravilan izbor zumiranja u mobilnim pretraživačima kako bi se postigao potpuni prikaz web stranica. Preglednici na mobilnim uređajima već su postojali prije nego što je počeo da se razvija responzivni web dizajn. Za potpuni pregled web stranica na ovim uređajima, pretraživači moraju koristiti alate za zumiranje. Dakle, kada pristupate tradicionalno dizajniranoj web stranici s mobilnog uređaja. Prirodna rezolucija mobilnog telefona se neće vidjeti, ali će se prikazivati prilagođavanje izvršeno pomoću alata za zumiranje dok se ne podesi na širinu od 960 piksela.
Pošto nije bilo drugog načina da se to uradi, programeri su kreirali Html koji je vršio promenu ili prilagođavanje zuma. Ovako, prilikom prilagođavanja rezolucije na uređajima, timu se mora reći da koristi drugu vrstu skaliranja. Pogodan tip za upotrebu je meta tag poznat kao viewport, koji se unosi u glavu web stranice. Pomoću ove meta oznake možete detaljno opisati proceduru koju će pretraživač izvršiti u transformiranom webu. Pogledajte sljedeću sintaksu, napisanu doslovno:
Ovaj simbolički izgled meta oznake viewport-a je onaj koji se najčešće koristi u responzivnom web dizajnu. Međutim, postoje mnoge druge konfiguracije koje se mogu koristiti u tu svrhu. Samo što predstavljena sintaksa sadrži dvije varijable koje čine da se mobilni pretraživač prilagođava webu, a ne obrnuto. Ove varijable su:
Širina ili širina uređaja
Varijabla width=device-width je uključena u konfiguraciju tako da širina u pikselima ekrana odgovara širini mobilnog uređaja. Na taj način se prikazuje vlastita rezolucija mobilnog telefona.
Kako bi omogućili najbolju moguću upotrebu, mobilni pretraživači prikazuju stranicu sličnu širini ekrana desktopa. Ova širina može varirati ovisno o mobilnom uređaju. Ali često je to obično jedan od približno 980 piksela. Nakon toga, nastoji da optimizira izgled sadržaja povećanjem veličine fonta, kao i promjenom skale sadržaja tako da odgovara ekranu uređaja.
Ovo bi moglo uzrokovati da korisnici smatraju da je to pomalo nekoherentno ili zbunjujuće, a zatim moraju dvaput dodirnuti da zumiraju kako bi se uključili u sadržaj. Korištenje varijable meta tag-a viewport-a: width=device-width zahtijeva akciju na izgledu za podešavanje širine. Na način da stranica može prilagoditi sadržaj kako bi se uklopio u različite dimenzije ekrana, bilo da se prikazuje na malom mobilnom telefonu ili na monitoru računara.
Initial-Scale ili Initial Scale
Varijabla initial-scale= uključena je u konfiguraciju za određivanje relacijske skale između CSS piksela i mobilnih piksela ovisno o uređaju. U gore prikazanoj konfiguraciji naznačeno je za početnu skalu: initial-scale=1.0. Ovdje sintaksa pokazuje da je omjer između piksela 1:1, CSS piksel se čita u piksel uređaja. Zatim se mobilnom pretraživaču daje nalog da usvoji ovu vrijednost za zumiranje i to će biti ona koju koristi uređaj. Međutim, pogledajmo sljedeće dvije opcije:
- Kada je varijabla početne skale jednaka 1.0, to se odnosi na prikaz bez zumiranja, jer je jedan prema jedan.
- Dok ako je početna skala=2.0, varijabla se odnosi na zum uvećan na duplo veću veličinu na cijeloj stranici.
Stoga bi odgovarajuća opcija za korištenje na web stranici dizajniranoj da odgovara širini mobilnog telefona bila prva. Ovo naređuje uređaju da ne primjenjuje nikakvo zumiranje. Ali također, mogu postojati slučajevi u kojima će najbolja opcija biti ne uključiti ili primijeniti ovu varijablu. Ostavljajući na taj način da je isti mobilni onaj koji sam prilagođava zum, na širinu koja je naznačena u dizajnu.
Osnovne konfiguracije vidnog polja – Primjeri aplikacija:
Bez obzira da li imate širinu od 500 piksela i da li je data komanda početne skale, web poprima izgled širine ekrana od 500 piksela. Međutim, na mobilnom uređaju, njegova originalna konfiguracija će biti prikazana s približnim ekvivalentnim omjerom od 320 piksela od ukupnih 500 piksela weba.
Sada, ako, s druge strane, nije zadan redoslijed početne skale, prikazuje se cijeli web, odnosno 500 piksela, pod prilagođenim zumom. Sintaksa ove dvije tipične konfiguracije oznake okvira za prikaz bi tekstualno bila sljedeća:
Prethodna konfiguracija bila bi za web stranicu sa responzivnim dizajnom pravilno prilagođenim mobilnoj rezoluciji. Dok za web stranicu koja nije u potpunosti prilagođena mobilnoj rezoluciji, konfiguracija bi bila sljedeća:
Osim tipičnih, postoje i neke druge konfiguracije. Jedan od njih je dizajn web stranice širine mobilnog, uz primjenu zumiranja. Ali ovakav dizajn bi bio vrlo čudan i zbunjujući za korisnika.
Kako napraviti responzivnu web stranicu – upiti za medije
Kada želite znati kako napraviti responzivnu web stranicu ili prilagodljivu stranicu, trebali biste znati da morate primijeniti sistem poznat kao medijski upiti. Ova tehnika vam omogućava da pomoću uslova uspostavite različite oblike ili stilove u zavisnosti od rezolucije ekrana. Ali šta su medijski upiti?
The Media Queries
Medijski upiti su tehnika koja se sastoji od uspostavljanja CSS rečenica. Uz koje možete dati izjave primjenjive na web dizajn, sve dok su ispunjeni određeni uvjeti koji su već dati ili uspostavljeni. Ove izjave o medijskom upitu se u osnovi mogu primijeniti na dvije točke na webu:
- Prvo, u pozivu CSS fajla, navodeći u svakom koji su uslovi za njegovo učitavanje. primjer:
- Drugo, u istoj CSS datoteci, uspostavljanje odvojenog prostora u koji su uključeni CSS razlomci koji će se koristiti. Primjer:
@medijski ekran i (min. širina:320px) i (maksimalna širina:480px){
/*Deklaracije stila za ovaj raspon širine */
U stvarnosti, medijski upiti su moćan alat koji omogućava mogućnost napuštanja responzivnog web dizajna, radi rješavanja drugih različitih pitanja unutar weba. Vrijedi dokumentirati kasnije, malo više o ovoj tehnici medijskih upita.
U međuvremenu, za sada je dovoljno znati dvije tačke o sistemu medijskih upita:
- Način izrade deklaracija medijskih upita u CSS datoteci
- Kako se ažurirati pomoću tehnike medijskih upita na staromodne internet pretraživače
Deklaracija medijskog upita
U prethodnim paragrafima bilo je moguće uočiti dva načina izvršavanja medijskih upita. Prvo u vanjskoj stranici sa stilom, a drugi način za pisanje direktno na stranicu sa stilom.
U kontekstu kako napraviti responzivni web dizajn, treba shvatiti da je medijski upit CSS deklaracija koja se koristi kao indikator da se zna kada treba napraviti drugu deklaraciju stila na osnovu mjerenja ili vrijednosti mobilnog uređaja. ili drugi uređaj na kojem će se web prikazivati.
Na primjer, način deklariranja CSS razlomka, koji je unutar uvjeta definiranog medijskim upitom, ima sljedeću konfiguraciju sintakse:
@medijski ekran i ([STANJE]) {
/* Naša nova pravila sa ovom širinom ekrana ili manje */
}
Isto tako, u zavisnosti od širine ekrana, mogu se generisati tri vrste izjava medijskog upita. Na taj način možete biti sigurni u svoju aplikaciju u svakom slučaju
-Prva deklaracija se primjenjuje samo u onim rezolucijama koje su manje od širine piksela = X:
@medijski ekran i (max-width:[WIDTH]px) {
/* Naša nova pravila sa ovom širinom ekrana ili manje */
}
-Druga deklaracija se primjenjuje samo u onim rezolucijama koje su veće od širine piksela = X:
@media ekran i (min-width:[WIDTH]px) {
/* Naša nova pravila sa ovom širinom ekrana ili više */
}
-Treću deklaraciju treba primijeniti u onim rezolucijama koje imaju širinu između raspona piksela definiranih između X i Y:
@media ekran i (min-width:[WIDTH X]px) i (max-width:[WIDTH Y]px) {
/* Naša nova pravila sa ovom širinom ekrana ili više */
}
Koji od tri?
Odluka će biti zasnovana na ukusu programera. Štoviše, uobičajeno je primijeniti prvu naredbu medijskog upita prikazanu iznad. Samo se preporučuje da se primjenjuje kumulativno. Na način da se, svaki put kada se širina smanji, mijenjaju elementi dizajna.
Učinite medijske upite kompatibilnim sa Internet Explorerom
Internet Explorer je bio jedan od prvih pretraživača ili pretraživača koji su postojali na webu. Stoga je vrlo moguće da ovaj pretraživač ne podržava ili je kompatibilan sa mnogim sistemima, parametrima ili tehnikama koje korisnici interneta često koriste. Ali postoji mnogo tehničkog osoblja u web razvoju, potpuno uključeno u potragu za inovacijama. Koje su kreirale niz biblioteka koje omogućavaju i čine ove stare pretraživače kompatibilnim.
Da biste napravili kompatibilne verzije manje od devet (9) Internet Explorera. To je samo primjena sljedeće javascript biblioteke: css3-mediaqueries-js.
Postavljanjem sljedeće skripte u glavu web stranice, moći ćete raditi sa medijskim upitima bez ikakvih neugodnosti.
Dobiveni rezultat možda nije najsavršeniji, ali općenito omogućava dobar stupanj kompatibilnosti.
Kako napraviti responzivnu web stranicu – osnovni dizajn
Mogu postojati različiti načini da se web stranica prilagodi i transformiše, međutim responzivna web stranica trenutno ima tri osnove ili oblika koncepcije dizajna. Prethodno su prikazani pregledi programera s nekim novim detaljima koji se mogu primijeniti u ovim dizajnima. Dolazi iz navike razvoja web stranica koje se okarakteriziraju kao krute ili fiksne. Prelazak na web stranice dizajnirane u responsive, mijenjajući tu karakteristiku krutosti.
Danas možete pronaći beskrajne elektronske uređaje pomoću kojih možete pretraživati web. A s vremenom će iznos biti sve veći. Programeri web stranica zahtijevaju da se ove web stranice mogu ispravno prilagoditi ovom širokom rasponu uređaja.
Osnovni dizajn za pojednostavljenje rada
Jedan od načina da se pojednostavi zadatak responzivnog dizajna je da ih podijelite ili klasifikujete u tri osnovne grupe kako biste znali kako se nositi s njima. Ove tri velike kvalifikacione grupe su:
- Veliki ekrani: na kojima web stranica ima dovoljno prostora, pa čak i više da se može pregledati u potpunosti bez ikakvih neugodnosti.
- Stari ili mali ekrani: kod kojih web ne nalazi adekvatnu širinu za svoju potpunu vizualizaciju, odnosno ne uklapa se u okvir ekrana. Čak pokazuje i neudobnu donju traku, bez ikakve upotrebe koja vam omogućava da vidite još manje sadržaja.
- Ekrani mobilnih uređaja: Web pronalazi tako mali prostor na ovim uređajima da je samo uz opći dizajn moguće pročitati informacije o njegovom sadržaju.
Dakle, ako želite transformirati originalni dizajn i izgled web stranice u ažurirani koji se može koristiti i koji je održiv. Ono što je potrebno je riješiti ove tri osnovne grupe. Stepen poteškoća u dobivanju rješenja općenito će ovisiti o tome kako je model formuliran. Ali, općenito gledano, sa današnjom tehnologijom, neke promjene se mogu postići na webu.
Kako napraviti responzivni web za velike ekrane – rješenje
U ovoj baznoj tački to obično ne predstavlja nikakvu veću poteškoću. Zato što je web dizajniran za gledanje na ovim velikim formatima ekrana. Trenutni standard je da se web stranice baziraju na centralnom okviru širine ekrana u pikselima od 960. Na način da kada se učita na mobilne telefone sa prilagođenim zumom, u većinu se pravilno uklapa. Ali u slučaju starijih web stranica, taj središnji okvir širine piksela vjerovatno je dizajniran za ekrane širine 1024 piksela. U bilo kojem od slučajeva, za ovu osnovnu grupu razumno je koristiti kontejnere kako je naznačeno sljedećom sintaksom:
#main { width:960px; margin:0 self; }
Ova konfiguracija podržava postavljanje "glavnog" kontejnera koji mu omogućava da bude usmjeren na web. Uz ovaj kontejner, mogu se dodati različite pozadine kako bi se obogatio vanjski izgled weba. Razvijam malo svoj dizajn kako bi se što je više moguće izbjegla crno-bijela stranica.
Ukratko, na ovom nivou velikih ekrana ne radi se mnogo na transformaciji weba. Iako je moguće da postoje korisnici weba koji žele da ga gledaju sa televizora sa velikim ekranom i takođe na maloj udaljenosti.
Ovi slučajevi zahtijevaju velike promjene kao u grupi mobilne baze. Ali pošto obično nema mnogo onih koji koriste TV za navigaciju, programeri obično ne ulažu mnogo vremena u ove adaptacije. Ukoliko i dalje želite da radite na ovoj vrsti adaptacije, preporučljivo je uspostaviti propise slične onima koji se primjenjuju u mobilnoj grupi, koji su navedeni u nastavku.
Kako napraviti responzivni web za male ekrane – rješenje
Od ove osnovne dizajnerske grupe počinje složenost transformacije weba koji se prilagođava. Scenarij je sljedeći: stranica kreirana za rad na datoj širini ekrana. Da ga u stvari, jedan broj ljudi posjećuje sa kompjutera prilagođenih toj širini. Ali postoji i veliki postotak ljudi koje treba uzeti u obzir, a koji imaju uređaje sa rezolucijama nižim od onih koje su dizajnirane da posjete web.
U ovoj klasifikacionoj grupi uređaji sa rezolucijom ekrana nižom od dizajna moraju biti odvojeni od mobilnih uređaja. Pa, ovi slučajevi su analizirani u trećem slučaju dizajna. Stoga je potrebno poći od jasne definicije tačke gde završava uređaj sa malim ekranom i tačke gde počinje mobilni uređaj.
Za male ekrane na isti način, rezolucija originalne web stranice mora se smanjiti kako bi se prilagodila tim uređajima. Samo da mora biti jasno u kojoj meri će se ovo smanjenje sprovoditi, bez prelaska. Tako da veliki broj elemenata nije konglomeriran na malim ekranima, smanjujući izgled weba.
Informacije potrebne za postavljanje ograničenja
Informacije s mobilnih uređaja dijele se u nastavku. Što će biti od velike važnosti kada je u pitanju uspostavljanje granica kada to prestane biti mali ekran, da postane mobilni uređaj. Ovo će olakšati odluku.
mobilnih podataka:
- Mobilni uređaji koji se koriste okomito, što je najčešće korišteni oblik. Obično usvaja rezoluciju od 320 piksela širine.
- U horizontalnom položaju, rezolucija mobilnog uređaja se prilagođava pravoj veličini ekrana uređaja. Ova rezolucija je uglavnom između 400 i 600 piksela široka.
- S druge strane, kod tableta će rezolucija ovisiti o uređaju. Generalno, uzimajući u obzir statistiku najprodavanijih modela, rezolucija je široka oko 600 piksela. Mogućnost dosezanja čak 1024 piksela širine.
Ograničenja širine ekrana
Najveća standardna granica širine koja se usvaja u responzivnom web dizajnu u ovoj klasifikaciji, prema prethodnim informacijama, je do širine od 400 piksela. Od ovog mjerenja širine, promjena u vizualizaciji mreže mora početi drastično, kao i njegov osnovni rad doživjeti određene promjene.
Više, međutim, neki programeri postavljaju ovo ograničenje na širinu od 600 piksela. Kreiranje od ove rezolucije, posredne adaptacije između malih ekrana i mobilnih uređaja.
Sa strane donje granice, postavljeno je da usvoji minimalnu širinu ekrana do 320 piksela. U svakom slučaju, na web programeru je da uspostavi raspon veći od ovih datih ograničenja. Ali nije preporučljivo pokušavati pokriti sve uređaje sa malim ekranom.
Glavni stilovi navigacije u rješenju za mali ekran
Snimanje barem ova tri glavna stila navigacije može biti dovoljno za adaptivno rješenje za mali ekran. Koji su navedeni u nastavku:
- Mobilni uređaji koji se koriste vertikalno: U ovom slučaju, ekran uređaja omogućava samo čitanje i vrlo pojednostavljenu navigaciju uspostavljenu u rasponu rezolucije između 320 i 400 piksela.
- Mobilni uređaji koji se koriste horizontalno i tableti: U ovom slučaju se već može postići tradicionalni horizontalni prikaz. Međutim, potrebno je napomenuti da se navigacija generira dodirom, a ne klikom. Prema ovome treba izbjegavati radnje: onMouseOver u 400, 600 ili 800 piksela.
- stolnih uređaja: U ovim slučajevima normalan web dizajn radi bez problema sa širinama ekrana preko 800 piksela.
Uzimajući u obzir sve gore navedeno, pod malim ekranom se podrazumijevaju različiti računari, pejzažni mobilni uređaji i tableti. Ova raznolikost pokriva ovu grupu sa mekom složenošću za prilagođavanje weba prilagodljivom dizajnu. U ovom slučaju, to je od velike važnosti za pojednostavljenje rada, rad na rasporedu koji se izvodi po blokovima. Kako bi ujedinili tri tipa uređaja u jednu akciju.
Ako je jasno definisano od koje širine se smatra mobilni ekran. Pojašnjen je srednji format ekrana koji će se prikazati. Kako bi se blokovi trenutnog rasporeda transformirali tako da mijenjaju veličinu u skladu sa ekranom i da mogu raditi i biti ispravno prikazani.
Kontejneri globalne širine
Globalni kontejneri unutar web stranice ispunjavaju funkciju upućivanja ili označavanja globalnih širina. To znači da sa ovim elementima možete centrirati i odrediti specifičnu širinu web stranice. Oni daju konfiguraciji određenu fleksibilnost promjenom s fiksne širine na maksimalnu ili širinu kape. Ustanovljava se u početnoj deklaraciji za web okvir, mijenja se od širina a max-width. Na isti način, minimalna širina se utvrđuje prema prethodno utvrđenim rasponima, uz deklaraciju min-width. Tako će biti moguće kontrolisati širine onih uređaja za koje se mislilo da nisu u kontroli. Uzimajući gore navedeni raspon ograničenja širine ekrana; Sintaksa deklaracije bi bila sljedeća:
#main {max-width:960px; min-width:320px; margin:0 self;}
Za velike ekrane rješenje je isto. Više, međutim, kada se mreža postepeno smanjuje u veličini istovremeno, središnji okvir će to učiniti po širini.
Praktični primjer
Ispod je praktičan primjer postavki za transformaciju okvira širine. U ovom primjeru postoji web stranica širine 1080 piksela, koja se primjenjuje na elemente zaglavlja, glavnog sadržaja i podnožja. Prva stvar koju treba učiniti je naznačiti tu širinu u različitim globalnim blokovima kontejnera, ne kao fiksnu širinu, već kao maksimalnu širinu stranice. Što se tiče rečenica, one će zavisiti od broja blokova ovog tipa koji će se koristiti. Dakle, pogledajmo sljedeću sintaksu:
#header #top {position:relative; max-width:1074px; min-width:320px; visina:115px; margin:0 auto; […]}
[...]
#header ul.menu {position:relative; max-width:1008px; min-width:320px; visina:95px; […]}
[...]
#aux-main{position:relative; max-width:1008px; min-width:320px; margin:0 self; […]}
[...]
#footer ul {max-width:768px; min-width:320px; margin:10px auto;}
Unutrašnji kontejneri
Od ove tačke, proći ćemo malo više o tome kako napraviti responzivnu web stranicu tako što ćemo je transformirati. Gotovo je sigurno da se stranica koju treba transformirati sastoji od dizajna ili izgleda, podijeljenog na različite elemente, na primjer, oni mogu biti:
- Zaglavlje sa stopostotnom širinom
- Sadržaj koji zauzima znatan dio širine
- U dijelu bočne strane jedna ili više bočnih ili bočnih šipki
- Zauzima sto posto širine, podnožje
Tako ćete imati nekoliko kontejnera koji možda imaju fiksnu širinu koji definiraju stupce na stranici. Ovi kontejneri su mogli biti transformirani u stupove primjenom različitih tehnika, kao što su:
- Pluta u najvećoj količini
- Display:inline u nekim slučajevima
- Display:box u drugim od njih
Sljedeći korak koji treba poduzeti će tada biti mogućnost transformacije tih elemenata u ne tako precizne izjave. Tako da roditeljski kontejner ne kalibrira tačno originalnu izjavu na koju je ukazao. Ili što je isto, morate promijeniti iz piksela u procentualne vrijednosti u svim onim elementima koji se odnose na razmak u širini web stranice, kao što su sljedeće:
- Širine
- maksimalne širine
- Margine i
- Padding
Uz prethodno obavljeni rad na rasporedu, ovaj korak postaje zaista jednostavan. Pošto se radi samo o dijeljenju, da bi se moglo odrediti šta odgovara mjeri u pikselima elementa kontejnera u procentualnim vrijednostima. Stoga će postotak biti izračunat primjenom sljedeće matematičke jednadžbe:
[Px širine unutrašnjeg elementa] / [Px širine roditeljskog elementa] * 100
To je dobar način da se web programeri naviknu na rad na web modelu sa mjerenjima u procentima, jer bi ovaj korak već bio riješen.
Obračun procenata
Sljedeći korak je izračunavanje postotaka. U ovom dijelu može se predstaviti nešto dosadno u smislu kolumni. Budući da je prethodno koloniziranje bilo izgrađeno sa plutajućim elementima, a kada skupite okvir, bočna traka se pomiče ispod sadržaja. Međutim, primjenjuje se gore navedena jednačina. I na taj način se izvode procentualni proračuni svakog elementa unutar globalnog kontejnera DIV. Kao što je gore spomenuto, ima širinu od 1080 piksela. Pretvaranjem ovih mjerenja u procentualne vrijednosti, dobijamo sljedeću sintaksu:
#main #content { float:left; širina:63.9880952%; margin:30px 0 0 1.98412698%; }
[...]
#main #sidebar { float:left; margin:20px 0 0 3.47222222%; širina:28.7698413%; }
Kao što se može vidjeti, transformirane su i širine i horizontalne margine. Na ovaj način će web stranica zadržati kvadratni izgled. Još jedna važna stvar koju treba napomenuti je broj decimala naznačenih u procentima. Čija je svrha da proračun bude što precizniji do originalne vrijednosti u pikselima.
Rješenje za labave unutrašnje elemente koji se povećavaju
U procesu transformacije web stranice moguće je pronaći određene labave elemente u modelu koji zbog svoje tipologije mogu rasti iznad maksimalnog globalnog kontejnera, max-width. Ovi elementi se mogu detektovati igranjem sa veličinom pretraživača, pošto se otkriju ispravljaju se. Još jedan brz način da ispravite ili izbjegnete ove elemente je da odaberete kontejnere i date nalog da nijedan unutrašnji element ne raste iznad veličine samog kontejnera.
U primjeru koji se razvija, ovaj posljednji oblik korekcije je primijenjen, unutar glavnog sadržaja i bočne trake. Dakle, određeni problemi koji mogu nastati iz widgeta mogu se sami riješiti. Prema tome, konfiguracija za rješavanje labavih unutrašnjih elemenata bila bi sljedeća:
#main #content { float:left; širina:63.9880952%; margin:30px 0 0 1.98412698%; }
#main #content * {max-width:100%}
[...]
#main #sidebar { float:left; margin:20px 0 0 3.47222222%; širina:28.7698413%; }
#main #sidebar * {max-width:100%}
Elementi pozicionirani u apsolutu
Za sve one elemente koji su uopće pozicionirani na web stranici da se transformišu. Isti prethodni postupak mora se primijeniti na njih sa širinama, prilagođavajući ih vrijednostima u procentima na osi apscise kako bi se mijenjala njihova širina. Pod pretpostavkom da u primjeru koji se razvija, neki elementi su uopće pozicionirani u zaglavlju. Njihovi položaji moraju biti prilagođeni ovim elementima, tako da ne ostanu da lebde u zraku kada se smanjuju dimenzije mreže. Za to bi konfiguracija bila sljedeća:
[...]
#header #top p.breadcrumb {position:absolute; top:90px; lijevo:3.72439479%; boja:bijela;}
[...]
#header #top p.like { position:absolute; top:10px; lijevo:54.0037244%; }
[...]
#header #top div.vcard{position:apsolute; top:11px; desno:5.49348231%; širina:27.9329609%;}
Primjena medijskih upita u elementima interijera
Prilikom prilagođavanja širine stranice moguće je da postoje elementi koji zbog svog sadržaja ne nalaze prostor u redizajniranju. One mogu stati na put, čineći da adaptacije izgledaju loše. Kako bi se izbjegla ova nezgodna situacija, koriste se jednostavni medijski upiti koji omogućavaju drastičnu modifikaciju CSS-a, kada se jave neke specifične dimenzije.
Medijski upiti su vrlo moćan alat s kojim se mogu napraviti mnoge izmišljotine. Ovog puta oni će biti primijenjeni da definišu određene uslove u vezi sa širinom ekrana i odakle će se mijenjati CSS. Za ovo ćemo podsjetiti na sljedeću sintaksu:
@medijski ekran i (max-width:[WIDTH]px) {
/* Naša nova pravila sa ovom širinom ekrana ili manje */
}
Ova izjava medijskog upita posebno nastoji prilagoditi izgled različitim rezolucijama. Dakle, može se koristiti više od svega za skrivanje određenih sekundarnih elemenata, koji, s obzirom na specifične širine ekrana, mogu više smetati nego pomoći korisniku. Osim što služi za izradu malih spojnica, tako da se neki elementi mogu uklopiti u redizajn u različitim scenarijima.
Da bismo ilustrirali ono što je rečeno, neki elementi rezolucija ispod 800 i 600 piksela biće skriveni. Da u jednom slučaju ometaju ispravan prikaz sadržaja glavne stranice web stranice koja se prilagođava. Prema sljedećoj sintaksi:
@media ekran i (maks. širina: 800px) {
#header #top p.like,
#header #top p.breadcrumb,
#header #top div.vcard p.twitter,
#header #top div.vcard p.linkedin,
#header #top div.vcard p.delicious,
#header #top div.vcard p.google,
.vcard h2{ display:none;}
}
@media ekran i (maks. širina: 600px) {
#sidebar .twitter {display:none;}
}
Kao što se može vidjeti, oni su skriveni u rezolucijama manjim od 800 piksela:
-Sviđa mi se
-Mrvica kruha
- Dugmad za društvene mreže, između ostalog
Od 600 piksela niže, posljednji tvitovi se uklanjaju sa bočne trake
Medijski upiti vam takođe omogućavaju da modifikujete neke stilove
Kao što već vidite, medijski upiti vam omogućavaju da sakrijete neke unutrašnje elemente. Ali takođe vam omogućavaju da napravite promene u nekim stilovima. Ova posebnost se može koristiti ako element, osim što nije prilagođen širini, ne želi ili ne želi da se učini da nestane ili sakrije. Ako se ova situacija pojavi na webu, želite se transformirati. Zatim će se, korištenjem medijskih upita, nastojati suptilno promijeniti svoj stil, kako bi se prilagodio.
Pod pretpostavkom da na webu na kojem se radi, dugmad društvenih mreža uzrokuju ovu vrstu problema. I odlučuje suptilno promijeniti svoje formatiranje, uklanjanjem ikona i smanjenjem veličine fonta, kada stranica padne ispod 960 piksela širine. Konfiguracija bi tada bila sljedeća:
@media ekran i (max-width:960px) {
#header #top div.vcard p {font-size:9px;}
#header #top div.vcard p.twitter to,
#header #top div.vcard p.linkedin a ,
#header #top div.vcard p.delicious a,
#header #top div.vcard p.google a {background:none; padding:0;width:50%; float:lijevo;}
}
Šta raditi sa menijima
Šta je sa menijima, u okviru procesa kako napraviti responzivnu web stranicu na malim ekranima? Odgovor na ovo pitanje je da je to donekle složen problem za rješavanje. Budući da se radi o skupu elemenata koji su obično nešto dugački, kao io samom meniju, to nije glavni sadržaj weba. Stoga se ne može dozvoliti da kada se stranica otvori na malim ekranima, meni zauzima puno prostora.
Kod uređaja na dodir korisniku može biti neugodno da se pojavi lista sićušnih linkova, tako da smanjenje linkova ne bi bilo najisplativije rješenje. Alternativa koja može biti povoljna je zamjena menija sa odabranim elementom. Što predstavlja kontrolu koja prikazuje meni opcija, gdje korisnik može udobno birati. Element Select smanjuje dugačke liste menija u mali blok, tako da je njegova upotreba idealna za uređaje kao što su tableti i mobilni telefoni.
Kada radite ovu zamjenu u novom responsive dizajnu, preporučuje se korištenje tinynav jquery dodatka. Što je jednostavno i vrlo kompatibilno, ovaj dodatak se odnosi na sve UL stavke u meniju. A ovo zauzvrat dodaje odabrani element na početak liste sa naznačenim karakteristikama. Nakon toga, korak koji ostaje da se uradi je sakriti UL ili select sa medijskim upitima, sve dok se ne postigne povoljno rešenje.
Procedura sa elementom select
Procedura zamene menija sa selektovanim elementom biće obavljena preko gore pomenutog dodatka. Koje treba staviti u zaglavlje na listi linkova. Dakle, kada stranica počne da se spušta na rezoluciju manju od 800 piksela širine, veze će biti zamijenjene odabirom. Zatim treba slijediti sljedeće korake:
- Dodajte skriptu i u jquery dodatku ready postavite poziv na novi element. prema sljedećem:
$(".menu ul").tinyNav();
Ova konfiguracija dodaje odabir u svaki od linkova u gornjem meniju
- Recite osnovnom CSS-u da sakrije nove elemente odabira, sa sljedećom deklaracijom:
.tinynav { display: none }
- Iskoristite odgovarajući medijski upit i unutar njega dodajte format odabira i redoslijed kako biste sakrili samu listu. Ostavljanje konfiguracije na sljedeći način:
@media ekran i (maks. širina: 800px) {
#header ul.menu li ul {display:none}
.tinynav { display: block; pozicija:apsolutna; bottom:5px; širina:79%; margin-left:15%}
}
Na ovaj način će web meni biti zamijenjen elementom odabira, spuštanjem rezolucije ekrana na manje od 800 piksela širine.
Blokirajte pozadine u tome kako napraviti responzivni web
U ovom trenutku prilagođavanja weba, stepen težine će zavisiti od toga kakav je model. Prilikom dizajniranja weba, na CSS točki, blokovi se obično ukrašavaju pozadinom slika. U procesu dekoracije koristi se veliki broj tehnika. Neki od njih su lakši od drugih kada je u pitanju promjena veličine.
Neka rješenja
Zbog toga, ovisno o korištenoj tehnici, postupak može biti manje ili više jednostavan. Može se čak dogoditi da pozadina koju web ima, izgubi svoj cilj kada se ivice sakriju. U ovim slučajevima rezultira velikim problemom koji treba prevazići. Evo nekoliko rješenja za ovo:
- Izmijenite što je moguće više pozadina u CSS3 stilove. Koji će se vrlo dobro prilagoditi promjenama. Sada je jednostavno postići kompatibilnost većine pretraživača kada koristite zaobljene ivice, sjene ili gradijente. Sa tri CSS situacije, teško je da dizajn zahteva veliki broj slika za uspostavljanje blokova.
- Radite bez pozadinskih slika, da biste ih što je više moguće zamijenili CSS3 koji je najbliži tome kako medijski upiti i prilagodljive širine rade svoj posao
- Ako se radi o sredstvima koja već dominiraju situacijom bloka. Preporučljivo je duplicirati ovaj stil u bloku i tražiti originalnu pozadinu kako bi se malo razlikovala
Ostala rješenja za tri vrste pozadinskih slika koja mogu biti dosadna su:
- Slike sa ivicama u okviru stranice, da čak i ako ostanu izvan dela koji se prikazuje, konačni rezultat ne smeta, pa se ostavlja
- Ikone u određenim naslovima, što je popravljeno tako da ih sakrijete medijskim upitima kada počnu da smetaju
- Globalna pozadina zaglavlja uključuje bijeli okvir gdje ide ime autora weba. Za to se isti stil može ponoviti u polju za autore tako da se jedna pozadina sakri s drugom smanjenjem dimenzije stranice.
Kako napraviti responzivni web za mobilni ekran – rješenje
Nekoliko aspekata kako napraviti responzivnu web stranicu na malim ekranima već smo vidjeli ranije. Sa ovim znanjem možete preći od krutog web dizajna fiksne širine od 1080 piksela do dizajna koji je prilično prilagodljiv malim ekranima, sa velikog broja uređaja. Ali nedostaje responzivno dizajnersko rješenje za mobilne ekrane.
Uz primjenu onoga što je viđeno za male ekrane u dizajnu za mobilne uređaje, promjene čine da izgleda prihvatljivo. Treba još usavršiti, budući da je raspored u dvije kolone sa elementima aglutiniranim u zaglavlju vrlo nepraktičan za mobilne uređaje
Stoga je prikladno započeti proces kako bi se postigao ispravan prikaz na mobilnim uređajima. Važno je napomenuti da upotreba navigacije na mobilnom uređaju nije ista kao na normalnoj web stranici. Tada biste možda željeli ići dalje od jednostavnih promjena prilagodljivosti širine ekrana ili skrivanja elemenata.
Oznaka Viewport u ovom slučaju
Element prikaza je dobar alat za prilagođavanje weba mobilnim uređajima. Prvo, zato što okvir za prikaz služi da mobilnom telefonu ukaže na način na koji želite da njegovo zumiranje funkcioniše, kada uređaj prikaže web stranicu. Međutim, u osnovi se mogu predstaviti dvije opcije, navedene u nastavku:
1 opcija: Za web stranice sa responzivnim dizajnom koji je adekvatno povezan s mobilnim rezolucijama, dostupno je sljedeće:
Ova opcija je najidealnija, ali i najzahtjevnija. Jer kada smanjite širinu kolona ispod 500 ili 400 piksela, širinama postaje potpuno nemoguće upravljati. Stoga se moraju napraviti radikalne promjene u vizualizaciji weba.
2 opcija: Ako se radi o web stranicama koje još nisu savršeno prilagođene rezoluciji mobilnog telefona, imamo sljedeće:
Ova druga opcija bi mogla biti brža. Jer u dizajnu je samo naznačeno da se mobilni može prikazati u željenoj rezoluciji. Drugim riječima, web će i dalje biti normalna stranica, samo u smanjenoj ili prilagođenijoj verziji.
Moguće posljedice
Ako se odlučite za drugu opciju, mogu se pojaviti dva problema s web-stranicom koja treba biti prilagođena ili dizajnirana kako bi odgovarala.
-Primero: Oblast prikaza u ovom slučaju će raditi globalno u svim mobilnim pretraživačima. S obzirom na slučaj, na primjer, da je označena oznaka okvira prikaza širine 500 piksela, to će rezultirati da iPad uređaji sa širinom od oko 800 piksela prikazuju stranicu širine samo 500 piksela. Neuspješno iskoristiti sto posto raspoloživog prostora.
-Drugo: Nastavlja se sa slučajem označavanja okvira za prikaz širine 500 piksela. U ovom slučaju, rezolucije od 320 piksela širine, sadržaj weba na kojem se radi bit će prikazan u vrlo smanjenom načinu rada. Stoga, ako se neka podešavanja ne izvrše, neće raditi. S druge strane, ako se izvrše određena podešavanja radi prilagođavanja menija ili izvora, web verzija će se modificirati na isti način da se prikazuje na tabletu, u slučaju malog ekrana. U zaključku, rješenje označavanja fiksne širine pomoću oznake prozora za prikaz može biti najbrže, ali više nije efikasno.
Vidjevši posljedice odabira opcije 2 oznake okvira za prikaz, čini opciju 1 najpreporučljivijom. Na ovaj način, samom mobilnom telefonu je dozvoljeno da pokaže rezoluciju za koju je sposoban, kada koristi prozor za prikaz koji je gore naznačen kao opcija 1 u zaglavlju stranice.
Sa ovom odlukom o vizualizaciji, kasnije se radi na medijskom upitu, za mobilnu verziju. Ovo zahtijeva prelazak sa stupaca na blokove sa sto posto širine. Također izbrišite, komprimirajte određene elemente, prilagodite fontove tako da budu ugodni za čitanje na širini od 320 piksela.
uklanjanje kolona
Kao što je već spomenuto, za mobilnu responzivnu adaptaciju, potrebno je usavršiti dizajn u izgledu dva stupca kako bi se izbjeglo zgrušavanje elemenata u zaglavlju. Za ovaj proces, stupac će biti eliminisan postavljanjem jedne na drugu, ali postoje dva scenarija koja se mogu dogoditi:
-Da su kolone već uređene u HTML-u: Ako je to slučaj, oni se već predstavljaju na željeni način za mobilne uređaje. Biće potrebno samo učiniti da Floats nestanu ili modifikovati display:inline-block ili display:box, da ga zamenite normalnim display:block. Primjenom sljedeće sintakse:
@media ekran i (maks. širina: 400px) {
#content {display:block; float:none; }
}
-Ako kolone nisu naručene: U ovom scenariju morate raditi s apsolutnim pozicijama tako da donji blokovi zauzimaju vrh stranice. Kao i korištenje margina za pomicanje gornjih blokova u donji, tako da se ne preklapaju. Primjer, uz pretpostavku sljedeće distribucije:
U ovom strukturiranju, poželjno je da se na mobilnom uređaju elementi bočnih traka nalaze prije sadržaja. Tada je CSS predstavljen na sljedeći način:
@media ekran i (maks. širina: 400px) {
#main {position:relative; širina:100%; }
#content{margin-top:80px; širina:100%; float:none;}
#sidebar{height:80px; pozicija:apsolutna; top:0; širina:100%; float:none; }
}
Za vizualizaciju drugog scenarija, u kojem se apsolutne pozicije moraju koristiti u mobilnoj verziji, prikazan je sljedeći primjer strukture
@media ekran i (maks. širina: 450px) {
#main #sidebar {display:block; float:none !important; širina:100%; pozicija:apsolutna; vrh:-80px; margin:0 !važno; border-bottom:1px solid #aaa; padding:0 0 20px 0;}
#main #content { float: none; širina:auto; margin:100px 0 0 0; }
}
U ovom slučaju postoji i promjena na širinu od 450 piksela u mobilnoj verziji.
Podešavanje fontova
Drugi aspekt koji se mora pozabaviti responzivnom adaptacijom u mobilnoj verziji je prilagođavanje fontova. Jer, kada je web dizajniran, napravljen je sa velikim monitorima na umu. Prilikom prelaska na mobilne verzije koje imaju male okomite ekrane, web stranice često nisu ugodne za čitanje ili gledanje. Naslovi na webu zauzimaju dosta prostora, tekst sadržaja, zbog veličine fonta, otežava čitanje. U skladu s tim, potrebno je pregledati sve izvore, dovodeći ih u održivu konfiguraciju za prikaz na mobilnom ekranu.
Ispod su podešavanja u vezi sa ovim aspektom, gdje su fontovi menija izmijenjeni, veličina fonta naslova je smanjena, a sadržaji povećani. Obratite pažnju na sljedeću konfiguraciju:
#header ul.menu li,
#header ul.menu li.analytics,
#header ul.menu li.development {background:none;}
#header ul.menu li h4 {margin:30px 0 0 0px; font-size:12px; uvlaka teksta:10%;}
#main #content .hnews h3 a,
#main #content .hnews h1 a{ font-size:22px; }
#main #content .hnews .entry-content {font-size:16px;}
Ostala prilagođavanja u smislu estetike i stilova
Odradio sam sav prethodni proces kako napraviti responzivnu web stranicu u dizajnu za mobilnu verziju. Ono što preostaje je da dovršite izgled i stil weba. U ovom slučaju možete redizajnirati one stilove koji se ne prilagođavaju novoj verziji i odbaciti one kojima je mjesto u njoj. Na isti način možete premjestiti neke elemente kao što su bočne trake, na primjer, da biste ih pozicionirali na drugu lokaciju, ili također napraviti promjene na marginama, između ostalih podešavanja. Kako biste konačno postigli prekrasan mobilni web spreman za rad.
Kako napraviti responzivnu web stranicu? – Testovi i testovi
Kada dizajnirate ne samo u smislu web razvoja, već u bilo kakvom stvaranju ili strukturiranju nečeg novog. Postoji faza testiranja ili testiranja u kojoj možete provjeriti rezultate, da li su optimalni ili zahtijevaju poboljšanja.
Međutim, zgodno je izvršiti provjeru ili test nakon što ste izvršili sve prethodne procedure. Ove testove treba provoditi kako se koraci izvršavaju i kako bi se mogle provjeriti promjene koje se postižu u svakom od njih. Na isti način potrebno je izvršiti sljedeće dvije provjere u radu weba
Idite na testiranje u pretraživaču
Dok radite na responzivnom dizajnu, morate podesiti širinu ekrana. Kako bi se provjerile nove adaptacije koje poprimaju nove oblike. Na isti način, male greške se mogu detektovati i na taj način biti u mogućnosti da se prilagode korišćeni medijski upiti. Za provjeru širine ekrana, postoje dva načina za to:
- Djelujte uživo uklanjanjem maksimiziranja pretraživača kako biste testirali njegovu širinu.
- Iskoristite stvari kao što je ISH kao koristan alat za izvođenje ovih testnih postavki jednostavnim naredbama.
Zaobiđite mobilni keš memoriju
Mobilni uređaji po svojoj prirodi keširaju podatke izvan onoga što je potrebno, čak i više nego što bi to činio običan pretraživač. U uobičajenim, obično je dovoljno izvršiti CTRL+F5 da izazovete učitavanje bez keša. Iako je ova vrsta radnje teška na mobilnim telefonima, čak i određeni pretraživači imaju opciju da onemoguće keš memoriju. Kako bi se olakšao bolji rad bez keš memorije preporučuje se sljedeće:
- Radite sa varijablama u Css pozivu, kao što su:
"/styles.css?version=xxxx"
Izmjena u svakom konkretnom slučaju broj verzije. Da bi URL bio drugačiji tako da ne koristi keš memoriju.
- Radite direktno u pretraživaču. Lagano povećavajući minimalnu mobilnu rezoluciju, između 420 i 450 piksela. Na ovaj način možete uzrokovati da se prikaže u pretraživaču tako što ćete biti dovoljno smanjeni. Drugi način je korištenje alata koji mijenjaju veličinu web stranica.
Ovim radnjama će se, bez sumnje, dobiti praktičniji i ugodniji rezultat pri provođenju testova.
Kako napraviti responzivnu web stranicu? - Zaključak
U svemu navedenom bilo je moguće poznavati neke tehnike, tehnološke alate i postupke koji se često primjenjuju u dizajnu responsive weba. Sva ova znanja mogu se primijeniti i na postojeću web stranicu koju želite uvesti u adaptivni dizajn. Bez potrebe da radite na izradi nove web stranice.
Stoga, na sljedeće pitanje: Uradite sve što ste naučili, da li je moguće napraviti web stranicu sa responsive dizajnom? Očigledno je odgovor glasno ne. Zašto? Zato što je bilo moguće samo napraviti web stranicu osjetljivom na adaptacije, što prvobitno nije bilo. Budući da je zamišljen pod krutom ili fiksnom prirodom.
Moguće posljedice ili greške
Tokom procesa prilagođavanja tradicionalne web stranice ili nekog osjetljivijeg na promjene može doći do nekih grešaka pa će nastati određene posljedice, da vidimo:
-Moraju se eliminisati određeni elementi koji su bili od vitalnog značaja prilikom kreiranja stranice. S druge strane, radnja njihovog eliminisanja rađena je na osnovu izgleda, a ne zbog važnosti sadržaja koji se prenosi web posjetitelju.
-Možda nije postigla savršenstvo u ukupnom vizuelnom aspektu. Biti u mogućnosti samo poboljšati postojeće. Potpuno drugačiji slučaj da je web kreiran od početka.
- Ovisno o modelu originalne web stranice, ona može, ali i ne mora doći do kraja prilagođavanja promjenama. Uz neke modele, programeri će u ovom pokušaju moći napraviti samo srednja rješenja.
Konačno o responsive dizajnu
Konačno, ono što je izvedeno bili su samo jednostavni detalji. Ističući važnost rada na dobijanju modela prilagodljivog dizajnu koji nije bio izvorno. Kada čitate Responsive Design, shvatite da govorite o dizajnu, a ne o radu na izgledu. Stoga, kako napraviti responzivnu web stranicu mora proizaći iz konteksta originalnog novog dizajna.
Međutim, mogućnost prikazivanja web stranice koja se može mijenjati i prilagođavati rezoluciji mobilnog telefona, počevši od one koja je bila kruta, prilično je veliko i korisno postignuće. Ono što je ovdje objašnjeno ne znači da ste već obučeni za responsive dizajn. Za to je potrebno mnogo više istraživanja.
Zato što bi bilo potrebno mnogo više osnova, znanja i učenja o različitim generalizovanijim, više tehničkih procesa.
Kako napraviti responzivnu web stranicu – završni savjeti
Da zaključimo, važno je znati da je responzivni dizajn ono što je aktuelno na webu. Ova vrsta web dizajna zahtijeva novi način razmišljanja. Razvoj ovih web stranica može biti lakši ako slijedite sljedeće savjete:
- Razmišljajte prvo o mobilnom uređaju: Prilikom dizajniranja, zgodno je započeti prvi prilagođavanjem maloj veličini mobilnog ekrana. Dakle, nakon prilagođavanja sadržaja ekranima većih veličina. Jer, kada dizajnirate imajući na umu mobilni telefon, možete biti objektivniji sa sadržajem koji bi trebao biti prikazan na stranici, ostavljajući samo ono što je zaista važno za prezentiranje.
- NEMOJTE optimizirati dizajn za određeni mobilni ili tablet
- Slijedite standarde i dobre prakse: Na primjer, ne koristite CSS stilove definirane u samoj datoteci, unutar Html oznaka.
- Izbjegavajte da budete rob pikselu u dizajnu: Imajte na umu da elementi pronalaze poziciju koja im odgovara. To je zato što vode računa o fluidnosti kontejnera i dimenzioniranju. U slučaju da se ne prikazuje kako želite, samo popravite raspored elemenata primjenom medijskih upita.