Optimalisering for mobile enheter css. Tilpass malen for visning på mobile enheter
Hei, kjære lesere av bloggsiden. Dette er ikke første gang i artikler jeg har nevnt det det er betydelig vekst i RuNet mobiltrafikk . Og dette begynner å ha en ganske stor innvirkning på livene til webmastere og SEO-er.
For det første begynner mange nettstedeiere å tenke på måter å tjene penger på mobiltrafikk, som blir rikelig (selv et slikt monster som det allerede tilbyr sine egne muligheter for å tjene penger på besøkende som besøker nettstedet ditt fra mobile enheter).
Men det viktigste er at vi gjør «andre». Faktum er at et nettsted som ikke er tilpasset for å motta den samme mobiltrafikken alvorlig kan miste sin posisjon i søkeresultatene på grunn av forverrede atferdsegenskaper. På mobiltelefon Det er veldig upraktisk å bruke horisontal rulling når du leser tekst eller søker etter menyer, så folk forlater raskt slike ressurser og går som regel ikke videre til andre sider.
Naturligvis visste jeg alt dette ganske lenge, men det var alltid noe viktigere og viktigere, og det komplette konseptet med å tilpasse nettstedet for visning på mobile enheter Det fungerte bare ikke i hodet mitt. Google presset meg imidlertid veldig hardt i går morges, og sendte meg en melding som fra 21. april når du bestemmer søkerangeringen til et nettsted, Google vil ta hensyn til om det er praktisk å se nettsider på mobile enheter.
Som de sier, de har kommet. Jeg måtte ta hodet i hånden og på en halv dag utvikle og bringe konseptet med nettstedsmobilisering ut i livet. Selvfølgelig påvirket hastverket og den ufullstendige forståelsen av alle alternativene for å løse dette problemet elegansen til løsningen på problemet, men "det som har vokst har vokst," og det vil være mulig å fullføre det underveis. hovedoppgaven fullført -. Og hvordan dette ble gjort, les i fortsettelsen av denne publikasjonen.
Relevans av mobilnettstedoptimalisering og utfordringer fremover
Så først vil jeg beskrive den nåværende situasjonen, og deretter alternativene for å løse den som jeg har valgt. Som nevnt rett ovenfor, begynte jeg å tenke på å optimalisere nettsider for mobile enheter for lenge siden, men noen ganger for å ta et skritt fremover trenger du noen som gir deg et godt spark i rumpa. Dette kicket viste seg å være et brev fra Google Adsense som sa at det var på tide å endelig løse dette problemet.
Faktisk kom lignende brev fra denne adressaten jevnlig (de ga vanligvis eksempler på hvor bra det var for de nettstedene som var optimalisert for mobiltrafikk), men her var det bare et ultimatum:
17 prosent av mobiltrafikken er, etter min mening, ganske grei, men for å være ærlig, uten å nevne en mulig endring i algoritmen Google rangering og tatt i betraktning faktoren for å optimalisere nettstedet for mobile enheter, ville jeg neppe flytte (det er alltid en viktigere aktivitet, spesielt når du ikke har en spesifikk plan for å løse problemet i hodet ditt).
Forresten, 17 prosent av de besøkende får tilgang til nettstedet fra mobile enheter, og det er klart at feilraten til slike brukere er betydelig høyere enn for de som har tilgang til nettstedet fra en datamaskin eller bærbar datamaskin (det vil si at problemet er åpenbart):
Linken i brevet førte til Google-tjeneste, hvor kvaliteten kunne vurderes mobiloptimalisering nettstedet ditt i henhold til prinsippet: alt er bra, eller fullstendig skrekk. I utgangspunktet hadde nettstedet selvfølgelig en trist rød dom (alarm):
I skjermbildet brukte jeg bloggen til den respekterte Devaki til illustrasjon, for nå har jeg et litt annet bilde. I mitt tilfelle, ser det ut for meg, ble til og med tre grunner indikert som forstyrrer visningen av nettstedet på mobiltelefoner, men denne tjenesten gir faktisk bare en dom.
Men for å finne ut detaljene anbefaler jeg å bruke en annen tjeneste fra samme Google som heter. Her vil alt være mer eller mindre detaljert, og i det minste vil det være klart "i hvilken retning du skal grave":
De har også en til lignende tjeneste, men det gis kun en vurdering, men det er dessverre ingen anbefalinger til forbedringer. Men du kan abonnere på endringer:
I vårt tilfelle bør du ta hensyn til "Brukervennlighet" -vurderingen på "For mobil" -fanen. Det er klart at lastehastighet også er viktig, men for meg personlig kommer alt ned på serverinnstillingene, som jeg selv ikke klarer å endre (fordi jeg er en noob i serveradministrasjon), og jeg kommer meg fortsatt ikke utenom oppnå en avtale med Infobox teknisk støtte (igjen, åpenbart, jeg trenger et spark i rumpa for å begynne å bevege meg). Men dette er nok et tema for en egen artikkel.
Oppgaven foran meg på kvelden i går ble løst og siden fikk 95 og 100 mulige poeng for enkel bruk mobilbrukere. Følgelig sier Google-tjenesten, lenken til som ble gitt i brevet, at alt er bra nå (takket være laderen):
Han skrøt, nå kan du begynne å beskrive trinnene som er tatt og planlagte strategier. Så det var flere problemer som måtte løses:
Tall i piksler indikerer bruddpunkter. Hvis du begynner å redusere dette vinduet (med nettstedet https://nettstedet åpent i det) i bredden (i øvre høyre hjørne av nettleseren er det en knapp med to firkanter lagt over hverandre - sa "Captain Obvious"), så det er når du passerer bredden 1025px og 760px det vil være designendringer.
Først vil sidepanelet falle av (det vil falle helt til bunnen) og toppmenyen vil endre seg litt (jeg vil gjøre det til en rullegardin for mobiltelefoner i fremtiden, men jeg har ikke fått til det likevel, som vanlig).
Og ved det andre bruddpunktet vil du legge merke til at når du ytterligere reduserer bredden på visningsområdet, begynner tekst, bilder og videoer å tilpasse seg den nye størrelsen (tilpasse seg den), og sidefeltet nedenfor vil også gjennomgå endringer. Faktisk har jeg til og med forstørret skriften for skjermer som er mindre enn 760 px i bredden (i tilfelle).
Derfor bestemte jeg meg for å bruke det andre alternativet for å lage et responsivt design for nettstedet for å optimalisere det for mobile enheter. Den består i. I dette tilfellet trenger du ikke lage tre kopier av stilfilen, men det vil være nok å legge til noe slikt nederst i hovedfilen:
@mediaskjerm og (maks. bredde: 1025px) ( CSS-egenskaper, som vil endre designet når skjermbredden er mindre enn 1025 piksler ) @mediaskjerm og (maks. bredde: 760 piksler) ( CSS-egenskaper som endrer designet når skjermbredden er mindre enn 760 piksler )
Vel, i områdene begrenset av krøllete parenteser, vil det være nok å skrive de CSS-egenskapene som vil gjennomgå endringer for å tilpasse nettsidemalen din for mobile enheter.
Riktignok forsto jeg fortsatt ikke helt nyansene ved å koble disse direktivene i nettleseren, fordi de rett og slett ikke fungerte. jeg måtte legg til i header.php-filen Dette er linjene (som kobler sammen den samme stilfilen, men med forskjellige oppløsninger skjerm):
Det er akkurat slik det hele fungerer på denne bloggen. dette øyeblikket tid.
Generelt valgte jeg det andre alternativet, men ikke med en gang, så jeg måtte sammenligne innholdet i filene small-device-min.css og small-device.css med den originale style.css for å identifisere linjene der Jeg gjorde endringer. Så satte jeg inn disse avløpene krøllete regulering@media-direktiver vist ovenfor (på slutten av hovedfilen style.css). Men dette er ikke lenger viktig.
Vi tilpasser malen for mobilbrukere
Så du har lastet ned nettstedet ditt fra Internett, presset det inn på en lokal server og gjort deg kjent med prinsippene vi skal bruke. Nå er det på tide å begynne å eksperimentere. Av åpenbare grunner kan jeg ikke gi deg entydige råd (fordi alle maler er forskjellige, selv for samme motor), hva som må endres i ditt tilfelle og hvilke bruddpunkter du bør velge.
For enkelhets skyld kan du vanligvis bare velge ett punkt i ordet, for eksempel lik standardbredden til hoveddelen (den sentrale, hvor artiklene vises), og ikke endre noe før det. Men alternativet mitt virket å foretrekke for meg, selv om jeg ikke hadde mye tid til å tenke på det.
Hva vil brukere se med skjermer som er mindre enn det første knekkepunktet?
Se. Å implementere et design med flere kolonner i moderne layout brukes de. For eksempel flyter sidefeltet min til høyre for hovedområdet takket være:
#sidebar(float:right;)
Så for å bryte to-kolonne-oppsettet og gjøre det til et enkelt-kolonne-oppsett, må jeg erstatte verdien for flyteregelen på de riktige stedene. Jeg pirket virkelig i alt, fordi jeg hadde glemt strukturen til malen min litt og derfor kunne ha fanget opp noe unødvendig, men dette er spesifisiteten til å "montere et design på knærne" uten å ha den passende erfaringen. Men siden eksperimentet fortsatte lokal server, så etter en og en halv time fant jeg alle de nødvendige punktene (ved prøving og feiling), resultatet som du nå kan observere.
Følgelig var det først nødvendig å trene malen til å bli lagt ut i to kolonner, noe som krevde skriving inne i @media-direktivet (med det første og andre bruddpunktet):
#sidebar(float:ingen;) #sidebar(float:ingen !viktig;)
Ble igjen et problem med toppmenyen , som ikke bryter veldig pent og tar opp mye plass på en liten skjerm, men det er planer om å gjøre det til en rullegardin for mobilversjonen av nettstedet (hvis jeg gjør det, skal jeg skrive om det). Ja, tellerne helt nederst ble bygget som et hus (jeg la først merke til det nå), men det er vanskelig å fikse (det viktigste er ikke å glemme).
Så, la oss anta at du vil gjøre litt magi på en lokal server, eksperimentere og som et resultat vil du få et fordøyelig alternativ for å tilpasse nettstedet til besøkendes mobile enheter. Alt som gjenstår er å overføre denne saken til et arbeidssted. Naturligvis vil du ikke kopiere alle filene (for ikke å snakke om databasen), fordi det vil være nok å legge til (kopiere) noen få linjer til header.php-filen og overføre noen flere linjer til hovedstilfilen (de inne i @mediedirektiver) .
Etter dette vil det være mulig å sjekke endringene som er gjort (du må kanskje tilbakestille cachen i motoren eller i nettleseren) på dataskjermen når du reduserer bredden på nettleservinduet og på mobile gadgets(telefon, nettbrett). Hvis noe "kommer ut", vil det være mulig å raskt rette opp denne saken.
Hovedsaken er at etter endringer gjort din nettside besto Google-testen for egnethet for visning på mobile enheter (ikke glem å tilbakestille cachen før du gjør dette). Vel, du vil fullføre detaljene over tid.
Bruk av adaptiv blokkkode fra Google AdSense på et nettsted for adaptiv (responsiv) design
La oss nå snakke om Google Adsense. Hvis du ikke jobber med dette systemet kontekstuell annonsering, så trenger du ikke lese videre. Hvis du jobber og bruker koden for annonseblokker med fast størrelse på nettstedet ditt, må du endre den til koden for adaptive blokker (Google, slik jeg forstår det, insisterer på dette) slik at annonser i passende størrelse lastes inn på enheter med ulik skjermbredde.
Faktisk er dette slett ikke vanskelig å gjøre, men personlig hadde jeg en blokkering som krevde mental innsats for å løse det. Så, med misunnelsesverdig regelmessighet (for ikke å si at det blir verre, heller bedre, men når du ikke logger på på lenge, legger du på litt). På grunn av dette måtte jeg allerede omskrive artikkelen sitert i lenken et par ganger, men den er igjen utdatert, noe som betyr at dens fjerde inkarnasjon snart dukker opp (men dette er slitsomt).
Ok, det er ikke poenget. For å lage en ny reklameblokk Du må klikke på tannhjulet til høyre i Adsense-grensesnittet øverste hjørne og velg alternativet "Innstillinger". På siden som åpner trenger vi topppunkt menyen "Mine annonser", hvor du oppretter en ny blokk, du trenger bare å klikke på knappen med samme navn:
På siden som åpnes, vil den adaptive blokken bli tilbudt deg som standard. Her bør du velge hvilken type annonser som skal vises (i de fleste tilfeller er det mer lønnsomt å vise alt), og deretter spesifisere for denne blokken samme kundekanal, som du hadde satt for den gamle blokken (som du skal erstatte). Faktum er at noen annonsører kan målrette annonseringen mot nettstedet ditt nøyaktig gjennom denne kundekanalen, og for ikke å miste dem, må du velge samme kanal for en ny annonseblokk.
Denne metoden fungerte ikke for meg (det viste seg å være en slags søppel), så jeg prøvde gå til Google Adsense-hjelpen for å se etter en løsning og fant den til slutt på denne siden.
Dette er nøyaktig versjonen av koden jeg brukte (på forskjellige enheter vil vise blokker passende størrelser). Det ser ut til at alt begynte å se ut som det skulle, men ikke helt. For det første la jeg merke til at etter å ha endret koden, sluttet visningsstatistikken å endre seg annonser på hjemmeside Adsense. Når jeg så på statistikk spesifikt for den nye blokken, la jeg merke til at det praktisk talt ikke var noen visninger.
For det andre bestemte jeg meg for å gjøre utseendet til annonsene (farge, skrift) i den nye adaptive blokken på samme måte som de var i de gamle annonsene. Etter endringene var det enda flere misforståelser. Annonsene som vises i artikkelen har ikke endret design. Jeg begynte å sammenligne koden kildesider(i nettleseren kan du gjøre dette ved å velge riktig element fra menyen høyre knapp mus) og oppdaget at en BR-linjeskift-tag på en eller annen måte ble lagt til etter noen linjer med kode.
Derfor fjernet jeg alle mellomrom og linjeskift i problemområder, hvoretter annonsene umiddelbart endret design og statistikk begynte å bli talt. Dette er den typen problem som er mulig.
Før dette hadde jeg en synkron Adsense-kode (jeg installerte den tilbake i 2012) og i teorien kunne den redusere nettstedets lastehastighet. Moderne kode er helt asynkron, noe som helt eliminerer muligheten for at den kan forårsake en forsinkelse i sidelasting. Jeg tror at dette er en buzz, men som de sier, vi får se.
P.S. Her er en kort rapport om hva jeg fullførte etter å ha skrevet artikkelen.
Ktonanovenkogo.ru="">
Lykke til! Vi sees snart på sidene til bloggsiden
Du kan se flere videoer ved å gå til");">
Du kan være interessert
Hvordan lage en innholdsfortegnelse (innhold, meny) for en artikkel på en nettside
Med raske løsninger kan du lagre nettstedet ditt fra Mobilegeddon og sikre at det består Googles kompatibilitetstest.
Introduksjon
I april 2015 skjedde det en reell revolusjon i virtuell verden, som allerede har blitt kalt "Mobilegeddon". Dette er fordi Google endret sin algoritme og begynte å rangere nettsteder som er optimalisert for mobile enheter over resten. Derfor hastet alle nettstedseiere i massevis for å gjøre endringer i ressursene sine.
I skrivende stund kan vi si at virkningen av den endrede algoritmen på søkeresultatene ikke er særlig sterk, men er allerede preget av at det er lagt til en ny etikett ved siden av mobile søkeresultater.
Men i fremtiden kan situasjonen endre seg dramatisk. Derfor er det en god idé å sjekke nettstedet ditt for kompatibilitet med mobile gadgets.
Kanskje du tidligere ikke hadde nok penger eller tid til å optimalisere ressursen din. Men nå er tiden inne for å gjøre det, for før eller siden blir du kjørt inn i et hjørne, og du må gjøre det samme, men raskt, og tenke lite på konsekvensene.
Så, hva ser Googles mobilkompatibilitetstest etter?
Google deler testen inn i fem komponenter, og du kan tjene poeng for å bestå hver:
1. View Window Configuration
Ved å angi en visningsport på en side kan nettleseren kontrollere bredden og skaleringen av siden for forskjellige enheter.
2. Skriftklarhet
Brukes sammen med et visningsvindu. Skriftstørrelsen kan skaleres for å passe til sidevisningsenheten. I dette tilfellet kan du spesifisere en grunnleggende skriftstørrelse, og den typografiske skalaen vil bli satt av relative stiler.
3. Unngå å bruke plugins
Flash, Java og Silverlight forårsaker mye ulempe for brukere av mobilenheter. Velg native web-teknologier (som HTML5).
4. Innholdsstørrelse
Sørg for at innholdet passer innenfor enhetens horisontale rammer, og at brukerne ikke trenger å rulle vertikalt eller horisontalt for å se innholdet.
5. Størrelse på knapper og lenker
Du bør ikke bare teste nettstedet ditt selv, på mobile enheter, men også bruke Googles PageSpeed Insights for å optimalisere lastetidene og forbedre brukeropplevelsen.
Litt bakgrunnsinformasjon
Med den massive bruken av smarttelefoner og nettbrett har mange nettstedeiere oppdaget at kreasjonene deres, som er så praktiske og ser så bra ut på en stasjonær datamaskin, er noe upraktisk og stygt på mobile enheter. De fleste nettsteder på den tiden ble laget for en bestemt skjermstørrelse og hadde ikke en "flytende" layout.
En veldig spesifikk vei ut av situasjonen ble funnet - mange selskaper opprettet ganske enkelt en annen, separat nettside designet spesielt for mobile enheter.
Så kom CSS3 og mediespørringer. Webdesignere og utviklere kan nå lage nettsteder som er i stand til å sjekke enheten siden blir sett fra og justere designoppsettet deretter. Innholdet kan tilpasses et spesifikt utvalg av utdataenheter uten å måtte endre selve innholdet.
Dette lar deg blant annet også spare kostnader på å vedlikeholde en annen, mobil, versjon av siden.
Vel, la oss prøve å gjøre dette.
Men husk at alle disse rettelsene er midlertidige som kan hjelpe deg mens du lager en ekte, fullverdig, responsiv nettside.
Alle avgjørelser du tar bør ta hensyn til behovene til bedriften din og besøkende på nettstedet. Enhver av disse endringene kan også ha innvirkning på andre aspekter av SEO-strategien din.
Rådfør deg med en kvalifisert SEO-ekspert før du gjør endringer på et live-nettsted.
Så,
*Du har et eksisterende nettsted;
*Du ønsker å gjøre minimale endringer i nettsidens HTML og CSS.
I dette tilfellet har du flere alternativer:
Endre nettstedsmalen din
Mange av dagens CMS-er lar deg endre temaet eller malen. Og mange av malene er adaptive, det vil si at de tilpasser seg den nødvendige bredden skjerm.
Hvis du for eksempel bruker WordPress, så er arbeidet her cirka fem minutter. Temaet kan endres med bare noen få klikk. Nesten umiddelbart vil nettstedet ditt få et friskt design og vil være egnet for mobile enheter.
Avhengig av hvordan det eksisterende nettstedet ditt ble utformet, kan det hende at noe innhold ikke vises automatisk i nytt emne. Så noe manuelt arbeid må kanskje gjøres.
proffer
Evne til å endre design umiddelbart.
Flere tusen temaer er tilgjengelige (noen gratis).
Minuser
Ikke alt tidligere innhold er kanskje synlig på den nye malen uten ekstra arbeid.
Et nytt design samsvarer kanskje ikke alltid med merkevaren din.
Lag et eget nettsted for mobile enheter
Kanskje, ifølge noen, utgjør dette en innrømmelse av nederlag. Men å lage en egen, mobilvennlig side vil trolig være det mest kostnadseffektive effektiv løsning på kort sikt for mange nettsider som ikke har tilgang til et CMS, eller som det ikke er mulig med designendringer for.
God ettermiddag, kjære blogglesere! I dag vil jeg fortelle deg om vanskelighetene som mange nettredaktører har møtt. Sikkert mange av dere har kommet over en melding i Google-resultater, som sa at siden ikke var optimalisert for mobile enheter. Ved å klikke på lenken sjekker du kompatibilitet med mobile enheter, og du får 2 visningsfeil: innholdet er bredere enn skjermen og interaktive elementer lokaliseres for raskt. I dag vil jeg fortelle deg hvordan du løser dette problemet.
Melding om en uoptimalisert side i Google-resultater
Optimalisering av én enkelt side for kompatibilitet med mobile enheter
Problemet med innhold bredere enn skjermen vises på mange nettsteder. Det som er vanskeligst er at dette problemet oppstår selv om du har det responsiv mal nettside eller en egen mobilversjon er laget. Det er ved å lage en egen mobilversjon Jeg prøvde å løse dette problemet, men alt viste seg å være mye enklere. Noen andre forsøk på å løse dette problemet:
- Jeg installerte en plugin for bilde- og mediekomprimering for forskjellige enheter
- opprettet en egen mobilversjon av nettstedet
- endret caching-innstillingene for nettstedet
- komprimerte nettstedets CSS og endret skjerminnstillinger
Hvis du leser om å løse dette problemet på Internett, kan du finne mange løsninger som ikke gir reelle resultater. For å løse problemet er det nok å løse bare ett avvik. Ikke behov for redigere CSS kode og PHP endringer nettstedskode. Metoden min passer ikke bare for et WordPress-nettsted, men også for andre admin-paneler der mediefilstørrelser kan justeres. Det ser ut til at de fleste feilene oppstår fordi Google rapporterer feil plassering interaktive elementer nettstedet. Webmastere fokuserer spesielt på å løse dette problemet, men kaster bort mye tid på det dette problemet er sekundær - det følger nettopp på grunn av det bredere innholdet.
Innholdet er bredere enn skjermen – dette er den første grunnen til at Google mottar en klage på en nettside. Hvis siden er optimalisert for mobile enheter, oppstår det klager spesifikt mot bestemte sider, og ikke hele nettressursen. For å eliminere denne grunnen, må du sjekke alle de viste elementene på siden. Google har generelt problemer med bilder som er bredere enn 600 piksler (dessverre kunne jeg ikke finne de eksakte parameterne i Googles manual). Det første du må gjøre er å endre størrelsen på mediefilene til 500 piksler (dette er størrelsen jeg bruker for nettstedene mine).
Meld at innholdet ditt er bredere enn skjermen
Den andre grunnen til problemet med innhold bredere enn skjermen er bredden grafiske elementer overskrider installert av Google størrelser for mobile enheter. Disse kan være glidebrytere, en sideoverskrift eller bakgrunnsbilder. Det er nettopp problemet med den brede hetten (til tross for adaptiv design) var årsaken til ikke-optimalisering for mobile enheter av Google-innstillinger på en av mine sider. Etter å ha erstattet overskriften, ble nettstedet fullstendig optimalisert for mobile enheter.
Hvordan optimalisere nettstedet ditt for mobile enheter på Google
For å optimalisere nettstedet for mobile enheter og eliminere problemet med bredt innhold, må du følge følgende algoritme:
- La oss velge alle mulige mediefiler på nettstedet, fra Head-taggen og slutter med Footer.
- La oss skrive ned størrelsene på hver mediefil
- La oss gjøre størrelsen på hver mediefil mindre enn 600 piksler
Etter å ha fullført disse enkle trinnene, kan du sjekke siden i optimaliseringsverktøyet for mobilenheter. Som du kan se, kan det bare være nødvendig å endre interaktive elementer i sjeldne tilfeller. Jeg håper artikkelen min var nyttig for deg og at du klarte å løse problemet med innhold bredere enn skjermen. Hvis du har flere problemer under løsningen, sørg for å skrive om dem i kommentarene, vi vil prøve å finne ut av det.
Hei alle sammen!
Etter brev fra Google 21. april 2015 begynte nettredaktører å skynde seg for å optimalisere nettstedene sine for mobile enheter. Fra denne tiden begynte æraen mobilt Internett, når nesten hver nettressurs enkelt kan sees på en smarttelefon eller nettbrett.
Forklart denne faktaen det faktum at for nøyaktig to år siden (i skrivende stund - 2017) søkemotoren Google startet ta hensyn til tilpasningsevnen til nettsteder for mobile enheter. enheter. Hvis en nettressurs ikke vises riktig på en smarttelefon, senkes den i søkeresultatene. Og få mennesker ønsker å miste gjennomsnittlig 17 % av trafikken. Senere ble Yandex med.
Dessverre, to år senere, er mange nettsteder rett og slett ikke tilpasset for visning på mobiltelefoner og mister mye trafikk. Så jeg bestemte meg for å skrive en artikkel om dette emnet, som et forsøk på å opplyse mine abonnenter hvis nettsteder ikke reagerer, og for å gi veiledning til lesere som er brennende interessert i dette emnet, men ikke vet hva de skal gjøre.
Hvorfor trenger du å optimalisere nettstedet ditt for mobile enheter?
Mange annonsører og nettstedeiere stiller spørsmålet: hvorfor skal jeg optimalisere nettstedet mitt for mobile enheter? Som jeg sa, siden 2015 søkemotorer begynte å være spesielt oppmerksom for øyeblikket. Og hvis du ignorerer det, kan du lett få pessimisering fra PS'ens side, som følge av hvilken del av trafikken som går tapt. Google liker spesielt godt å gjøre dette.
Det er imidlertid verdt å merke seg det faktum at påvirkningen Google algoritmer og Yandex, rettet mot å jobbe med nettsteder som er optimalisert og ikke optimalisert for mobile enheter, små. Det vil si at det ikke er en slik total kontroll over denne faktoren, så i de "mobile" søkeresultatene kan vi ofte se ikke-responsive nettsteder. Noe annet spiller en rolle her.
Det er også forverring atferdsmessige faktorer nettsted i mangel av en mobilversjon. Faktum er at et ikke-responsivt nettsted ser forferdelig ut på skjermene til smarttelefoner og nettbrett: det blir umulig å lese teksten, og en ubeleilig horisontal rulling, er interaksjon med nettstedet vanskelig. Av disse grunnene går besøkende fra mobilt internett ganske enkelt til konkurrentenes nettsteder, og du, på grunn av forverrede atferdsfaktorer, faller ned i søkeresultatene.
Så hvis du ikke vil miste posisjoner, miste trafikk og følgelig salg, lag raskt en mobilversjon av nettstedet. Vi vil snakke om hvordan du gjør det videre, men først vil vi sjekke nettstedet for såkalt "mobil egnethet".
Hvordan sjekke en nettside for mobiloptimalisering. enheter?
Google ble spesifikt lei av problemet med mobilnettsteder og skapte en veldig praktisk service, som viser hvor optimalisert siden er for mobil. enheter og om den i det hele tatt er optimalisert. Den heter Mobilvennlig, her er lenken til den.
Hvis nettstedet ditt er optimalisert for mobile enheter, vil du se følgende resultat: 
Ellers: 
Hvordan lage en mobilversjon av nettstedet?
Det er mange måter å gjøre en nettside responsiv på, men jeg vil bare liste opp de mest grunnleggende og forståelige. til den vanlige mann. Men for klarhet i hele bildet anbefaler jeg å lese disse leksjonene:
Så konvensjonelt kan metoder for å implementere adaptiv layout deles inn i to typer:
- Bruke spesielle plugins;
- Jobber med nettstedskode.
Hver har sine fordeler og ulemper, som vi vil snakke om akkurat nå.
Adaptiv layout ved hjelp av spesielle plugins
Siden jeg har mer eller mindre lang erfaring med å jobbe utelukkende med CMS WordPress, og jeg vet ikke mye om noe annet system, jeg vil bare snakke om det.
Smarte mennesker, utviklerne bestemte seg for å forenkle prosessen med å lage en mobilversjon av nettstedet så mye som mulig for de som ikke vet ved å lage spesielle plugins - tillegg til "motoren". En av disse er WpTouch-plugin, som lar deg lage en "mobil" nettside på en dag (grovt sett), uten å måtte håndtere kode.
Det er også en funksjon for å lage adaptiv layout i populær plugin Jetpack, så vidt jeg vet. Der trenger du bare å trykke på en knapp og det er det.
Men når du bruker denne metoden, er det viktig å ta hensyn til at de ikke vil fungere riktig for alle maler, og i noen tilfeller vil de ikke fungere i det hele tatt. I tillegg alt mulig forskjellig reklameinnlegg fra selve plugin-modulen, som forstyrrer visningen av innholdet. Jeg vil advare deg med en gang: bruk av slike plugins anbefales ikke, men hvis du virkelig trenger det, så bare for en stund.
Det meste det beste alternativet Vi vil bruke ferdige adaptive løsninger fra WordPress mal (tema) databasen. Ved å gjøre dette vil du ikke bare gjøre livet ditt enklere, men også spare på tjenestene til layoutprogrammerere.
Tilpasset nettsidelayout ved å jobbe med kode
Å jobbe med nettstedskode er en kompleks sak, og å skape adaptiv versjon nettressursen er enda vanskeligere. I praksis prøvde jeg å lage to mobilnettsteder, men jeg klarte ikke å implementere dem fullt ut. I det første tilfellet var det et forsøk på å lage en mobilside på et underdomene som m.site.ru: Jeg klarte å lage et mer eller mindre normalt oppsett, plassere alle blokkene på de riktige stedene, og gjøre teksten lesbar. Kort sagt, jeg opprettet en mobilside, men problemet lå et annet sted.
Faktum er at hvis du bruker et underdomene med en mobilside, må du koble til det fra et vanlig domene. Men omdirigeringen er ikke en vanlig, men en smart en, som vil omdirigere besøkende fra smarttelefoner til mobilversjonen. Jeg måtte kaste bort mye tid på dette søppelet, men resultatet var utilfredsstillende. Derfor måtte jeg forlate denne ideen.
I det andre tilfellet opprettet jeg en nettside for moro skyld (jeg er veldig interessert i å skrive kode), som jeg prøvde å gjøre adaptiv ved hjelp av cascading CSS-stiler. Jeg lyktes, men det gikk ikke utover nettstedsutvikling.
Jeg vil gjerne merke meg at å lage en adaptiv layout når CSS-hjelp er et utmerket alternativ, fordi: du ikke trenger å opprette et eget nettsted og laste det opp til eget underdomene og du trenger ikke å bry deg med omdirigeringer. Det er enkelt nok å bruke @media-direktiver. De kalles også Media Queries:
@medieskjerm og (maks-bredde: 1025px) ( CSS-egenskaper er skrevet for elementer som de må brukes på når skjermbredden er mindre enn 1025px ) @mediaskjerm og (maksbredde: 760px) ( CSS-egenskaper skrives for elementer som må påføres når skjermbredden er mindre enn 760 px)
Veldig praktisk måte, siden det ikke krever opprettelse av noen venstrehendte filer. Arbeidet utføres utelukkende med style.css-filen, hvor du har registrert alle sidestilene.
Her er et eksempel fra stilene mine for spesifikke elementer:
@medieskjerm og (maks-bredde: 991px) ( /*Alle stiler brukes for banneret i sideoverskriften på artikkelsider og overskriften på hovedsiden*/ #banner-head ( margin-top:80px; ) . box-wrapper h1( margin -top:150px !viktig; ) ) @medieskjerm og (maks-bredde: 840px) ( #banner-head ( margin-left:60px; ) ) @mediaskjerm og (maks-bredde: 801px) ) ( #banner-head ( margin-left:40px; ) ) @media screen and (max-width: 786px) ( #banner-head ( margin-left:20px; ) ) @media screen and (max-width: 765px) ) ( #banner-head ( margin-left:5px; ) ) @mediaskjerm og (maks-bredde: 757px) ( .box-wrapper h1( font-size:32px !viktig; ) ) @mediaskjerm og (maks- width: 750px) ( # banner-head ( display:none; ) ) @media screen og (max-width: 539px) ( .box-wrapper h1( font-size:28px !important; ) ) @media screen og (maks. -bredde: 480px) ( #banner-head ( synlighet: skjult; display: ingen; ) ) @mediaskjerm og (maks-bredde: 471px) ( .box-wrapper h1( font-size:24px !viktig; ) ) @ medieskjerm og (maks- bredde: 407px) ( .box-wrapper h1( font-size:22px !viktig; ) ) @medieskjerm og (max-width: 375px) ( #banner img( width: 100% !important; ) ) @mediascreen og (max-width: 370px) ( .box-wrapper ( width: 380px !important; ) .box-wrapper h1( margin-venstre:-15px !viktig; ) ) @medieskjerm og (maks-bredde: 357px) ( .box-wrapper h1( font-size:20px !viktig; ) ) @mediaskjerm og (max-width: 345px) ( .box-wrapper h1( margin-left:-25px !important; ) ) @media-skjerm og (maks-width: 338px) (.box-wrapper( margin-top:-50px; ) .box-wrapper h1( margin-left:-35px !important; ) .sep( margin-left:-20px !important; ) )
Viewport-metatag
Hvis du ikke vil lage en egen mobilversjon eller skrive @media-direktiver i CSS-stiler, så er det en annen måte som nettstedet ditt vil bli mer eller mindre vist på mobiltelefoner - ved å bruke Viewport-metakoden.
Dens jobb er å bestemme vindusbredden og kontrollere sideskalering. Det vil si at takket være denne metakoden kan vi deaktivere økningen eller sette den maksimal verdi(grense), og angi også skalaen til siden som vises.
Denne metakoden er satt i tagger
og har følgende form:
Derfor har vi fire måter å optimalisere nettstedet for mobile enheter:
- Bruke spesielle plugins for CMS;
- Bruk av et underdomene som m.site.ru med mobilversjonen av nettstedet;
- Bruke Media Queries i CSS;
- Bruke Viewport-metakoden.
Alt som er skrevet ovenfor er kunnskapen jeg besitter. Jeg vet kanskje ikke noe, så legg gjerne til og korriger meg i kommentarfeltet.
Vel, det er alt, kjære venner!
Ser deg snart!
Forrige artikkelNeste artikkel
Google erklærer at det tar hensyn til optimalisering av nettstedet for mobile enheter i søket. Hvis du har lagt til ressursen din til google webansvarlige, så kan det være merket "Nettstedet er ikke optimalisert for mobile enheter." Det betyr at det må jobbes med å forbedre synligheten av ressursen i Googles øyne og tilpasse siden for mobile enheter. Instruksjoner nedenfor gjelder ikke bare for WordPress-ressurser, men også for andre motorer.
For å sjekke nettstedets visning for tilpasningsevne vil vi bruke Google-tjeneste https://developers.google.com/speed/pagespeed/insights.
Spesifiser nettstedets adresse og klikk på "Analyser"-knappen. Du kan se at for dette eksempelet er poengsummen for mobilbrukeropplevelse 69 prosent, og i tillegg er det en melding "Siden kan ikke være vil bli testet enkel visning på mobile enheter."
La oss sette oss som mål å optimalisere nettstedet og forbedre indikatoren til minst 90 %, noe som anses som bra i Googles øyne.
Først av alt, vær oppmerksom på meldingen "Tilpass visningsområdet". Det er best å begynne her, fordi å fikse dette problemet vil automatisk påvirke Googles estimater av skriftstørrelser og aktive elementer.
Klikk på koblingen "Hvordan fikser" og se følgende tekst om behovet for å spesifisere viewport-taggen. 
Det er en lenke til "Tilpass visningsporten din" som forklarer hvordan du bruker denne taggen. Vi vil ikke behandle det i detalj. La oss bare bruke Googles instruksjoner som du trenger for å angi instruksjoner i hodeblokken på nettstedet:
< meta name = viewport content = "width=device-width, initial-scale=1"> |
Vi legger til en tag på nettstedet, og for moro skyld sjekker vi hvordan bekvemmelighetsindikatoren for mobilbrukere har endret seg. 
Vi ser en økning fra 69 til 80 %.
Hvis du har aktivert hurtigbuffer på nettstedet ditt, må du før du sjekker enten deaktivere hurtigbufferen eller slette hurtigbufrede filer, ellers kan kontrollen utføres med gamle filer.
Deretter ser vi på problemet i den røde sonen "Tilpass innholdsstørrelsen for visningsporten." Problemet er at Google sjekker for en enhetsbredde på 375 piksler, og størrelsen på enkelte nettstedselementer overstiger dette tallet.
Faktum er at mange maler laget tidligere inneholder absolutte størrelser på nettstedselementer. For eksempel kan style.css-filen inneholde instruksjoner som dette
#wrapper ( bredde: 1000px; )
#wrapper ( bredde: 1000px; |
innpakning - inn i dette tilfellet Dette er hovedbeholderen på siden. Et slikt element passer naturligvis ikke på en 375 piksler bred skjerm. Du kan også finne andre lignende instruksjoner for andre elementer på nettstedet.
Vi vil fikse dette problemet ved å bruke følgende triks. La oss omskrive stilene ovenfor som følger:
#wrapper ( maks-bredde: 1000px; bredde: 100 %; )
#wrapper ( maks-bredde: 1000px; bredde: 100 %; |
Når du oppretter en side, vil nettleseren bruke minimumsverdi av to: maks-bredde og bredde. I dette tilfellet, hvis brukerens skjermbredde er større enn 1000px, vil en verdi på 1000 bli brukt, og hvis brukerens skjermbredde er mindre enn 1000px, vil en verdi lik skjermbredden (100%) brukes.