Test pokazuje kako responzivna web stranica izgleda na različitim mobilnim uređajima. Da bi bila testirana, vaša stranica mora podržavati učitavanje i pokretanje u okvirima. Za lakše gledanje, prebacite svoj pretraživač na režim preko celog ekrana.
Provjeri
Šta je responzivna web stranica?
Responzivna web stranica automatski se prilagođava širini uređaja. U ovom slučaju, blokovi web mjesta mogu se sakriti ili modificirati. Na primjer, na računaru se logotip i meni web-mjesta nalaze s lijeva na desno, a na telefonu odozgo prema dolje.
Koja je razlika između responzivne web stranice i mobilne verzije?
Ako web lokacija ima mobilnu verziju, onda prilikom učitavanja takve stranice sa mobilni telefon, bit ćete preusmjereni na drugu adresu: site.ru → m.site.ru. Mobilna verzija je zasebna stranica s drugom adresom.
Ako stranica nema mobilnu verziju, adresa stranice se neće promijeniti prilikom učitavanja s telefona. Na telefon će se preuzeti isti podaci kao i na računar. Najčešće je to nezgodno za korisnika, jer je ekran telefona nekoliko puta manji.
Ovaj problem se može riješiti na dva načina: dodavanjem mobilna verzija m.site.ru ili NE napravite zasebnu stranicu, već dodajte na svoju glavnu stranicu prilagodljivost. To su posebni stilovi i skripte koje se uključuju ako je širina ekrana premala: na primjer, sakriti izbornik, povećati font, prikazati male umjesto velikih slika itd.
Strogo govoreći, ne možete porediti responzivnu web stranicu i mobilnu verziju web stranice. U suštini, responzivna web stranica = puna verzija + verzija za tablete + verzija za telefone (mobilni), i sve to u jednoj boci. To jest, jedan koncept je sadržan u drugom.
Adaptivna stranica kombinuje i običnu (za računare), i mobilnu (za telefone), i nekoliko srednjih opcija (veliki telefoni, tableti, televizori, itd.). Glavna prednost responzivne web stranice je da izgleda dobro na bilo kojoj širini ekrana.
Zašto je širina telefona u ovom servisu tako mala?
Stvarni broj piksela na modernim napravama je obično vrlo velik, a web stranice nisu dizajnirane za tako veliku širinu. Stoga mobilni uređaji sa ekranima visoke definicije otvaraju stranice, dovodeći ih do određenog virtualnog standarda. Da biste sami saznali ove brojeve, kliknite na dugme tako što ćete otvoriti ovu stranicu sa svog telefona ili tableta:
Koja je veličina prozora mog pretraživača?
Na uređajima sa ekranima sličnim mrežnjači, prikazane dimenzije će se razlikovati od stvarne rezolucije piksela navedene u specifikaciji uređaja. Pametni telefoni će prikazati 320x480 ili 480x800 piksela, tableti - 1280x800.
Od autora: Imate datoteke rasporeda u svojim rukama. Ali kako možete provjeriti njen kvalitet? Koji alati postoje za one koji ne razumiju HTML i CSS? Koje korisne stvari treba koristiti sam dizajner izgleda? Ovaj članak će pokušati odgovoriti na ova pitanja.
Zašto je važno provjeriti kvalitetu izgleda
Pitanje koje brine i kupce i dizajnere izgleda. Prvi se tako može uveriti da je izvođač efikasno obavio svoj posao. Bilo bi korisno da dizajner izgleda provjeri izgled stranice prije nego što ga pošalje na odobrenje klijentu. Ovo će uštedjeti vrijeme, inače može doći do situacije kada će se morati izvršiti promjene nakon što je projekat isporučen. Ako kreirate vlastitu web stranicu, alati za provjeru također će vam dobro doći.
Alati za provjeru
Debugger. Jedan od najvecih jednostavne načine, kako možete provjeriti izgled stranice - uključite program za otklanjanje grešaka. Pokreće se kada pritisnete F12 u pretraživaču. Ovaj alat vam pomaže da vidite kako će se izgled stranice promijeniti ako s nje uklonite neke elemente ili stilove. Na primjer, dodali ste neka nova CSS svojstva, a zatim dodali još nekoliko. Odlučili smo da vidimo kako će sve to izgledati u pretraživaču.
Ispostavilo se da elementi nisu prikazani kako je planirano. Koje je svojstvo uzrokovalo ovu grešku? Određivanje ovog ručno traje dugo. U programu za otklanjanje grešaka možete brzo onemogućiti sve stilove i brzo otkriti greške. Takođe jasno pokazuje greške u kucanju. Većina iskusnih kodera traži greške koristeći debuger, umjesto da sami pregledavaju kod.
Rice. 1. Debugger olakšava pronalaženje grešaka.
W3C Validator. Servis za provjeru koda za manje greške. W3C je organizacija koja razvija i službeno održava web standarde. Budući da postavlja ove standarde, njegova web stranica ima posebnu uslugu koja može provjeriti valjanost bilo koje stranice na mreži (odnosno, grešaka). Mora se reći da je ovo prilično strog validator.
Često ga koriste kupci koji pokušavaju odrediti kvalitetu izgleda. Čak i na dobro dizajniranoj stranici, validator može pronaći više od trideset grešaka. Međutim, u tome nema ništa loše. Servis to smatra greškom čak i ako niste stavili razmak ispred vrijednosti html atributa. Sada zamislite da ste napisali sav kod u ovom stilu. Imat ćete stotine grešaka, ali u stvari će raspored biti urađen ispravno, samo ćete prekršiti standarde koje je W3C postavio za ispravno kodiranje.
Više informacija o ovim pravilima možete pronaći na web stranici W3C. U stvari, jedina lokacija koju validator provjerava bez grešaka je sama W3C stranica. Stoga nije potrebno ispravljati sve greške. Ipak, validator može ukazivati na neke ozbiljne probleme, pa je preporučljivo provjeriti izgled stranice s njim. validator.w3.org - validator.
IE Tester. Postoji program koji vam omogućava da testirate stranicu u starijim verzijama Internet Explorer. Mnogim kupcima i danas je potrebna podrška za ovaj pretraživač, tako da se stranica u njemu prikazuje na isti način kao iu ostalima. Možda već postoje online usluge na kojima možete izvršiti sličnu provjeru. U svakom slučaju, potrebno je samo zalijepiti traženi kod i program će pokazati kako bi sve to bilo prikazano u IE 6, 7 i 8.
Obično nikome nije potrebna podrška za šestu verziju, a osma se može ponašati sasvim adekvatno osim ako, naravno, nema novih CSS svojstava u vašem izgledu. Starije verzije IE-a imaju zanimljivu osobinu - čitaju komentirani kod. Stoga, u jedan od komentara možete uključiti stilski list koji će biti kreiran posebno za starije verzije ovog pretraživača.
Drugi pretraživači će jednostavno preskočiti ovaj fragment. Ova metoda se može koristiti ako vam je zaista potrebna IE podrška.
Ostale usluge. U posljednje vrijeme sve je više usluga za provjeru izgleda. Nema smisla zadržavati se na bilo kojem određenom. Većina ovih usluga dobro funkcionira, ali još uvijek ne provjeravate sve temeljito.
Kako provjeriti prilagodljivi izgled
Trebalo bi razgovarati i o adaptivnom rasporedu. Vaš najbolji alat za ovo je običan prozor pretraživača. Samo smanjite širinu prozora i gledajte kako se dizajn mijenja. Ako vidite da se pojavljuje horizontalni skrol ili neki elementi ne staju na stranicu, to znači da je vaš izgled daleko od idealnog i da ga treba poboljšati. Ako želite vidjeti kako će se stranica ponašati na velikom ekranu, umanjite prikaz. Naravno, ako imate tablet i telefon, možete postaviti svoj izgled na neki besplatni hosting i pristupiti stranici s ovih uređaja.
Rice. 2. Promjena širine prozora pretraživača je najlakši način za testiranje odziva.
Kompatibilnost među pretraživačima
Kako drugačije možete provjeriti izgled web stranice? Mora postojati provjera kompatibilnosti među pretraživačima. Morate otvoriti stranice u različitim pretraživačima i vidjeti kako tamo izgledaju. Možete promijeniti veličinu i veličinu fonta. Morate biti sigurni da će barem većina korisnika biti dobro. Ako provjerite ručno, također možete zamoliti svoje prijatelje da provjere izgled u svojim pretraživačima ako se njihove verzije razlikuju od vaše. Ovdje možemo dati još jedan savjet - nemojte koristiti previše specifična svojstva koja su podržana samo u jednom pretraživaču. A ako ih već koristite, smislite neku alternativu za njih u drugim pretraživačima. Neka svojstva i dalje moraju koristiti prefikse dobavljača. To je zato što se web standardi stalno razvijaju i ne mogu svi pretraživači sve podržavati. Ali ako već provjerite kompatibilnost među pretraživačima, učinite to barem za sljedeće preglednike: Chrome, Mozilla, Opera, Safari, IE.
Postoje vrlo dobri strani servisi za naprednu verifikaciju među pretraživačima. Na primjer, browserstack.com. Ovaj ček vas može koštati novca. Ako zaista imate jako veliki projekat i želite ga temeljito provjeriti, onda ima smisla koristiti takve usluge.
Provjera usklađenosti sa rasporedom
Raspored možete provjeriti i na ovaj način: snimka zaslona izgleda stranice mora se dodati u izgled u Photoshopu kao novi sloj. Postavite ovaj sloj na transparentnost i vidite koliko dobro se prikaz elemenata podudara sa izgledom. Za to možete koristiti poseban dodatak. Na primjer, Pixel Perfect za Mozilu.
Dodatni zahtjevi
Naravno, u svakom normalnom rasporedu kodiranje i tip dokumenta moraju biti specificirani. Također možete provjeriti funkcionalnost stranice kada su slike isključene ili kada je javascript kod blokiran. Činjenica je da u postavkama bilo kojeg preglednika korisnik može onemogućiti ove opcije. Posebno će biti korisno odrediti alt atribute za slike, tako da kada nestanu korisnik može barem nekako da se kreće. U stvari, može biti puno zahtjeva za izgled. Čak iu RuNetu postoji prilično stroga lista potrebnih provjera. Na primjer, s pojavom HTML5, izgled se može provjeriti za ispravne semantičke oznake. Međutim, sve ovo nije kritično. Gore opisane provjere sasvim su dovoljne za sigurno pokretanje normalne, funkcionalne web stranice.
U ovom članku opisali smo glavne načine provjere izgleda pomoću različitih programa, usluga i alata. To će vam pomoći da prilagodite stranicu svim uvjetima.
Nikada nije bilo važnije osigurati da je vaš projekt spreman za svaki tip korisnika i uređaja prije pokretanja. Iako je fizički teško testirati dizajn na svakom uređaju, postoje neki alati i aplikacije koje vam mogu pomoći da simulirate različite scenarije odziva.
Uz toliko dostupnih besplatnih i vrhunskih alata, nema razloga da ne testirate svoj responzivni dizajn prije nego što ga objavite na internetu. Samo budite sigurni da koristite ove informacije za mnoga potrebna prilagođavanja dizajna! Danas vam nudimo set alata za testiranje responzivnog dizajna.
1. Googleov test prilagođenosti mobilnim uređajima
Google Mobile-Friendly Test je jedan od onih alata koji se nekako zanemaruje. Potreban vam je dizajn vaše web stranice kako bi zadovoljio Googleove standarde kako bi pomogao u vidljivosti pretraživanja, a to je tako jednostavno.
Alat je jednostavan za korištenje, samo unesite URL i pogledajte kako se vaše stranice rangiraju na mobilnim uređajima. Najbolji dio ovog alata je da identificira gdje vaša web lokacija može biti spora ili se slabo prikazuje na mobilnim uređajima kako biste mogli ispraviti greške.
Zdravo, dragi čitaoci bloga. Nije iznenađujuće da adaptivni dizajn postaje sve popularniji na ruskom internetu. I naravno, dizajneri izgleda moraju to proučiti. Budući da će responzivni dizajn uskoro biti na gotovo svim web stranicama, jer sve više ljudi koristi mobilne uređaje.
I želio bih reći da su stranice s njim mnogo praktičnije za čitanje na takvim uređajima nego bez njega.
Danas želim da vas upoznam sa 5 vrlo korisnih i cool servisa pomoću kojih možete provjeriti prilagodljivost vaše web stranice.
I tako, idemo.
5 usluga na kojima možete provjeriti prilagodljivost vaše web stranice.
www.responsivedesigntest.net
Dobar servis za proveru sajtova. Postoji mnogo rezolucija ekrana za tablete i telefone.
mattkersley.com
Jednostavna usluga za provjeru web stranice od Matta Kersleya. Dostupne su i sve popularne rezolucije mobilnih uređaja.
screenqueri.es
Vrlo cool servis koji će provjeriti bilo koju stranicu. Zaista mi se dopao dizajn, kao i funkcionalnost.
quirktools.com
Vrlo lijepa i funkcionalna usluga. Čak je moguće provjeriti kako će stranica izgledati na TV-u :-)
Okviri, kao što je ili, koji uvelike olakšavaju i ubrzavaju izgled stranice.
podrazumijeva odličan prikaz web stranice na svim uređajima i ekstenzijama monitora. Vjerovatno nema svaki dizajner rasporeda kompletan skup uređaja sa svim mogućim ekstenzijama za prikaz, za testiranje vašeg izgleda. To nije iznenađujuće, jer tehnologija ovih dana nije jeftina.
Dakle. Kupovina brda mobilnih telefona i tableta nije opcija - provalićemo. sta da radim? Za ove zadatke su razvijeni usluge za testiranje adaptivnih web stranica. Princip njihovog rada je vrlo jednostavan. Najčešće postoji okvir određene veličine gdje se stranica otvara. Efekat je približno isti kao pri gledanju na mobilni uređaj. Želio bih napomenuti da usluga neće uvijek precizno prikazati prikaz stranice na telefonu ili tabletu. Prilikom kodiranja trebali biste testirati korištenjem usluga, ali nakon završetka, ako je moguće, testirajte na najčešćim uređajima.
Dakle. Za vašu pažnju najbolji alati za testiranje responzivnih web stranica.
Alat za testiranje responzivnih web stranica kompanije Adobe. Da biste ga koristili potrebno je da ga instalirate na svoj računar.
Program vam omogućava da sinhronizirate svoje uređaje putem WIFI-ja i pregledate stranicu onako kako će biti prikazana na vašem uređaju. On trenutno Podržani su uređaji sa sljedećim operativnim sistemima: iOS, Android, Kindle Fire.
