Uočavajući sve veću upotrebu mobilnih uređaja, Google je od kraja aprila 2015. godine kaznio web stranice čije stranice nisu spremne za mobilne uređaje. Posledica za vas SEO, morate biti sigurni da se vaša web stranica prikazuje pristojno i na velikim i na malim ekranima.
U ovom ću članku pokazati kako možete postaviti svoje web mjesto na stranicu pomoću pravila @media CSS3.
Važno je napomenuti da se izrazi „odgovarajući“ i „kompatibilni s mobilnim uređajima“ često koriste naizmjenično, uprkos razlici u njihovom stvarnom značenju. Razumijevanje svakog značenja važno je da biste mogli osigurati da vaša web stranica zadovoljava potrebne kriterije za prilagodbu svim veličinama zaslona.
Ali prije, ako nikad niste instalirali WordPress, otkrijte Kako instalirati WordPress blog u koracima 7 et Kako pronaći, instalirati i aktivirati WordPress temu na svom blogu
Vratimo se onda zašto smo ovdje.
Odgovarajuće i mobilno kompatibilne
Web stranice koje to nisu niti odgovarajući niti mobilni, prikazuju se identično na svim ekranima, tj. verzija za velike ekrane prikazuje se svugdje. Na manjim zaslonima morate vodoravno pomicati stranicu da biste vidjeli sav njihov sadržaj. Teško se snalaziti na ovim ekranima.
Otkrijte i ove 8 WordPress dodatke za prilagođavanje izgleda vaše web stranice
Web stranica je Mobitel kompatibilan kada ispunjava samo strogi minimum koji se može vidjeti na mobilnom uređaju, što ga ne čini prilagodljivom web lokacijom. Na primjer, web stranica se može smatrati kompatibilnom za mobilne uređaje ako ne morate navigirati vodoravno. Zbog toga njegovi elementi postaju mali i nerazlučivi. Zatim morate zumirati da biste pročitali njegov sadržaj.
Na njihovoj strani web stranice odziv savršeno se prilagođavaju različitim veličinama ekrana. Oni redefiniraju svoje elemente tako da ih je lako vidjeti i koristiti na manjim ekranima. Ovo je vrsta dizajna koju želite za svoju web stranicu.
Pogledajte i naše 10 WordPress dodatke da biste kreirali formular za rezervaciju na svojoj web stranici
Sada znate razliku između responzivnog i kompatibilnog mobilnog telefona. Sada ćemo vidjeti pravilo @media CSS3 koji vam omogućava da ažurirate svoju web stranicu za responzivnu ili da je kreirate prilično jednostavno WordPress teme sa responzivnim sadržajem.
Pravilo @media iz CSS3-a
Da biste svoju temu prilagodili, trebat će vam pravilo @media CSS3. U osnovi, omogućava vam definiranje stilova koje želite koristiti za određeni tip (veličinu) ekrana. Koristit ćete ga kao drugo CSS pravilo (sa zagradama), s jedinom razlikom što ugnijezdi ostala CSS pravila.
@media vrsta medija (izraz) {css-test-selector {svojstvo1: vrijednost1; svojstvo2: vrijednost2; }}
U ovoj strukturi elementi unutar pravila @ mediji funkcioniše samo kada vrsta-od-medija naznačeno da je uspješno otkriveno. Vrsta odabranog medija, možete odrediti karakteristike u smislu dimenzija.
Discover Kako primijeniti sučelje i korisničko iskustvo na WordPress
Pravilo @media otkriva za vas tip ekrana s kojim se posjećuje vaša web stranica i bira pravila koja najbolje odgovaraju ovoj vrsti ekrana. Svi glavni preglednici već su integrirali pravilo @media.
Evo liste za vaše informacije: Chrome , safari, Firefox, IE, opera et Edge.
Definirajte ciljne ekrane
Ako želite da izmenite a WordPress tema postojeći, napravite rezervnu kopiju CSS-a potonjeg kako biste se mogli vratiti ako je potrebno.
Pročitajte i naš članak o Kako postepeno učitavati Facebook i Disqus komentare
Kao što smo vidjeli u njegovoj strukturi, da biste definirali vrstu ekrana, morate proslijediti @media tip ciljanog ekrana. Evo liste različitih vrsta zaslona:
- sve : za sve tipove zaslona ili za dimenzije navedene u izraz
- ekran : za sve ekrane, bilo da su mobilni, tablet, laptop ili desktop
- štampa : za štampače, ako želite određene stilove stranica koje se mogu ispisati
- govor : za čitače ekrana, ako želite stilove za osobe sa oštećenim vidom.
Postoje i operatori koje možete staviti ispred tipa ekrana; kao ne za prikaz stilova za ekrane različitog tipa od navedenog ili samo primijeniti stilove samo na određene ekrane. Stoga možete imati:
@media samo ekran
Definirajte stilove za dimenzije ekrana
Možete koristiti izraz kako biste pružili više detalja o karakteristikama zaslona. Poslije @media ući i praćen izrazom. Ako koristite više izraza, svi bi trebali biti odvojeni i. Evo primjera strukture:
Zaslon samo za @media i (max-width: 640px) {selector-css-example {/ * Vaš uobičajeni CSS ovdje * /}}
U ovom primjeru koristim max-width sa vrijednošću 640px. Ovo je za postavljanje maksimalne širine ekrana veličine iPhonea ili malog Android pametnog telefona. Ovakvom strukturom imate kontrolu nad izgledom web lokacije na različitim uređajima. Ovdje je popis svojstava povezanih s dimenzijama u kojima možete koristiti izraz :
Otkrijte i naše 8 SEO WordPress dodatke za optimizaciju SEO vaše web stranice
- mu širine et max-width : odnosno minimalna i maksimalna širina potrebna za prikaz stilova sadržanih u pravilu @media. Još jedan piksel i stilovi se ne prikazuju.
- mu visini et max-visina : odnosno minimalna i maksimalna visina potrebna za prikaz stilova sadržanih u pravilu @media. Budući da je većina ekrana dizajnirana za vertikalno kretanje stranica, svojstva min-visina et max-visina malo se koriste.
Evo popisa veličina zaslona za neke terminale:
- IPhone: 640px
- iPad: 1024px
- Tablete: 1366px
- Android pametni telefon: 640px, 720px, 854px, 960px
- Android izuzetno velik: 1024px, 1066px
- Windows telefon: 480
- Windows telefon velik: 768px
- mladi i stari: 320px
- Ultrabook / prijenosna računala: 1366px
- Stoni računari i televizori: 1920px
Postoje mnoga druga svojstva u kojima možete koristiti izraz. Na primjer, ako ciljate radne površine ili televizijske ekrane koji mogu prikazati slike u omjeru 16: 9, mogli biste koristiti strukturu poput ove:
Zaslon samo za @media i (minimalna širina: 1920px) i (omjer proporcija uređaja: 16/9) {selector-css-example {/ * Ovdje je vaš uobičajeni CSS * /}}
Za potpunije liste i primere konsultujte se w3schools et Mozilla Developers.
Testirajte funkcionalnost vašeg web mjesta
Dok modifikujete ili gradite svoj WordPress tema ili na kraju, ako volite iznenađenja, morate testirati rezultat da vidite da li konačno odgovara. Zapamtite, Google prati web stranice koje ne reagiraju.
Vidi i ove 10 WordPress plugins za kreiranje kartica na vašem blogu
U nedostatku svih mobilnih uređaja koje ciljate, postoji (srećom za naše berze) niz alata koji mogu vidjeti kako se vaša web stranica prilagođava različitim ekranima.
Direktno u pregledaču vašeg računara možete koristiti Prozor za promjenu prozora Chrome Browser Extension, ResponsiveResize, ResizeMe ou Firesizer. Ispod je slika BlogPasCher-a u responzivnom dizajnerskom prikazu koji se podrazumevano isporučuje sa Firefoxom.
Postoje i web stranice posvećene tom zadatku:
Ova web stranica ima posebnost što vam omogućava da sami odaberete dimenzije ekrana. Imajte na umu da ova web stranica učitava vašu u okviru. Dakle, ako je vaš WordPress tema je dizajniran da se ne prikazuje u okviru, tako da je sasvim moguće da se neće prikazati ovdje.
IPad Peek
https://blogpascher.com/wp-admin/post.php?post=60969&action=edit
Ova web lokacija je korisna za testiranje vaše web lokacije na najnovijim uređajima Apple, iPad i iPhone. Samo unesite svoj url. Imajte na umu da je podložan istom problemu s okvirom kao i responsivepx.
Na ovoj web stranici možete testirati svoje na malim ekranima i na starijim modelima telefona koje odaberete na desnoj strani ekrana. Takođe možete konfigurirati neka svojstva zaslona.
Ovo je jedan od najvažnijih testova, ako ne i najvažniji. Samo unesite svoju adresu u traku i kliknite na analizirati za početak testa. Nakon testa, alat prikazuje izvještaj i ocjenu. Ako je test pozitivan, utoliko bolje što vas Google neće kazniti.
Ako niste programer, savjetujem vam lista odgovornih tema za WordPress za početak.
Preporučeni resursi
Otkrijte i druge preporučene resurse koji će vam pomoći da bolje privučete svoje partnere i pretplatnike, ali i da poboljšate sigurnost svoje web stranice.
- Kako kreirati prilagođene veze na WordPressu
- 5 WordPress dodaci za dodavanje recenzija korisnika na vaš blog
- Kako stvoriti kolo sreće za kupone na WooCommerce
- Otkrijte najbolje ponude i kupone za svoj blog
zaključak
Evo! znate sve što treba znati o tome kako učiniti vašu web stranicu ili WordPress temu odgovornom koristeći pravilo @media CSS3. Ako smo propustili WordPress temu koja vam je draga ili vam je draža, ostavite vezu u odjeljku komentari ispod.
Međutim, takođe ćete moći da se konsultujete sa našim sredstva, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem o Izrada bloga WordPress ili onaj on Divi: najbolja WordPress tema svih vremena.
Pozivamo vas i na dijelite na svojim različitim društvenim mrežama.
...
