Optimering til mobile enheder css. Tilpas skabelonen til visning på mobile enheder
Hej kære læsere af bloggen. Det er ikke første gang i artikler, at jeg har nævnt det der er markant vækst i RuNet mobil trafik . Og dette begynder at have en ret stor indflydelse på livet for webmastere og SEO'er.
For det første begynder mange webstedsejere at tænke på måder at tjene penge på mobiltrafik, som er ved at blive rigeligt (selv sådan et monster, da det allerede tilbyder sine egne muligheder for at tjene penge på besøgende, der besøger dit websted fra mobile enheder).
Men det vigtigste er, at vi gør "anden". Faktum er, at et websted, der ikke er tilpasset til at modtage den samme mobiltrafik, alvorligt kan miste sin position i søgeresultaterne på grund af forringede adfærdsegenskaber. På mobiltelefon Det er meget ubelejligt at bruge vandret rulning, når de læser tekst eller søger efter menuer, så folk forlader hurtigt sådanne ressourcer og går som regel ikke videre til andre sider.
Naturligvis vidste jeg alt dette i ret lang tid, men der var altid noget vigtigere og vigtigere, og det komplette koncept med at tilpasse siden til visning på mobile enheder Det lykkedes bare ikke i mit hoved. Google pressede mig dog meget hårdt i går morges og sendte mig en besked, der fra 21. april når du bestemmer søgerangeringen af et websted, Google vil tage højde for, om det er praktisk at se websider på mobile enheder.
Som de siger, de er ankommet. Jeg måtte tage hovedet i hånden og på en halv dag udvikle og bringe begrebet sitemobilisering ud i livet. Selvfølgelig påvirkede hastværket og den ufuldstændige forståelse af alle mulighederne for at løse dette problem elegancen af løsningen på problemet, men "det, der er vokset, er vokset", og det vil være muligt at afslutte det undervejs. hovedopgaven afsluttet -. Og hvordan det blev gjort, læs i fortsættelsen af denne publikation.
Relevans af mobilwebsiteoptimering og udfordringer forude
Så først vil jeg beskrive den aktuelle situation og derefter de muligheder for at løse den, som jeg har valgt. Som nævnt lige ovenfor er jeg for længe siden begyndt at tænke på at optimere hjemmesider til mobile enheder, men nogle gange for at tage et skridt fremad, har du brug for, at nogen giver dig et godt spark i røven. Dette kick viste sig at være et brev fra Google Adsense, der sagde, at det var tid til endelig at løse dette problem.
Faktisk kom der jævnligt lignende breve fra denne adressat (de gav normalt eksempler på, hvor godt det var for de sider, der var optimeret til mobiltrafik), men her var der bare et ultimatum:
17 procent af mobiltrafikken er efter min mening ret anstændig, men for at være ærlig, uden at nævne en mulig ændring i algoritmen Google rangering og under hensyntagen til faktoren med at optimere webstedet til mobile enheder, ville jeg næppe flytte (der er altid en vigtigere aktivitet, især når du ikke har en specifik plan for at løse problemet i dit hoved).
I øvrigt får 17 procent af de besøgende adgang til webstedet fra mobile enheder, og det kan ses, at fejlraten for sådanne brugere er meget højere end for dem, der besøgte webstedet fra en computer eller bærbar (dvs. problemet er indlysende) :
Linket i brevet førte til Google-tjeneste, hvor kvaliteten kunne vurderes mobil optimering dit websted efter princippet: alt er i orden, eller fuldstændig rædsel. I starten havde siden selvfølgelig en trist rød dom (alarm):
I skærmbilledet brugte jeg den respekterede Devakis blog til illustration, for nu har jeg et lidt andet billede. I mit tilfælde, forekommer det mig, blev der angivet selv tre grunde, der forstyrrer visningen af webstedet på mobiltelefoner, men denne tjeneste afsiger faktisk kun en dom.
Men for at finde ud af detaljerne anbefaler jeg at bruge en anden tjeneste fra samme Google kaldet. Her vil alt være mere eller mindre detaljeret, og i det mindste vil det være klart "i hvilken retning man skal grave":
De har også en mere lignende service, men det gives kun en vurdering, men der er desværre ingen anbefalinger til forbedringer. Men du kan abonnere på ændringer:
I vores tilfælde skal du være opmærksom på "Brugervenlighed"-vurderingen på fanen "Til mobil". Det er klart, at indlæsningshastigheden også er vigtig, men for mig personligt kommer det hele an på serverindstillingerne, som jeg ikke selv kan ændre (fordi jeg er noob i serveradministration), og jeg kan stadig ikke komme udenom nå til enighed med Infobox teknisk support (igen, selvfølgelig skal jeg have et spark i røven for at begynde at bevæge mig). Men dette er nok et emne for en separat artikel.
Opgaven foran mig om aftenen i går blev løst, og siden fik 95 og 100 mulige point for brugervenlighed mobile brugere. Derfor siger Google-tjenesten, hvortil linket blev givet i brevet, at alt er i orden nu (takket være opladeren):
Han pralede, nu kan du begynde at beskrive de trin, der er taget og planlagte strategier. Så der var flere problemer, der skulle løses:
Tal i pixels angiver brudpunkter. Hvis du begynder at reducere dette vindue (med webstedet https://site åbent i det) i bredden (i det øverste højre hjørne af browseren er der en knap med to firkanter overlejret på hinanden - sagde "Captain Obvious"), så det er, når du passerer bredden 1025px og 760px, der vil være designændringer.
For det første vil sidebjælken falde af (den vil falde helt til bunds), og topmenuen vil ændre sig lidt (jeg vil gøre den til en rullemenu for mobiltelefoner i fremtiden, men jeg er ikke nået til det dog som sædvanlig).
Og ved det andet bristepunkt vil du bemærke, at efterhånden som du yderligere reducerer visningsområdets bredde, begynder tekst, billeder og videoer at tilpasse sig den nye størrelse (tilpasning til den), og sidebjælken nedenfor vil også undergå ændringer. Faktisk har jeg endda forstørret skrifttypen til skærme mindre end 760px i bredden (for en sikkerheds skyld).
Derfor besluttede jeg at bruge den anden mulighed for at skabe et responsivt design til webstedet for at optimere det til mobile enheder. Den består i. I dette tilfælde behøver du ikke oprette tre kopier af stilfilen, men det vil være nok at tilføje noget som dette nederst i hovedfilen:
@medieskærm og (maks. bredde: 1025px) ( CSS-egenskaber, som vil ændre designet, når skærmbredden er mindre end 1025px ) @medieskærm og (maks. bredde: 760px) ( CSS-egenskaber, der ændrer designet, når skærmbredden er mindre end 760px )
Nå, i de områder, der er begrænset af krøllede parenteser, vil det være nok at skrive de CSS-egenskaber, der vil gennemgå ændringer for at tilpasse din hjemmesideskabelon til mobile enheder.
Sandt nok forstod jeg stadig ikke helt nuancerne ved at forbinde disse direktiver i browseren, fordi de simpelthen ikke virkede. Jeg var nødt til at tilføje til header.php-fil Disse er linjerne (der forbinder den samme stilfil, men med forskellige opløsninger skærm):
Det er præcis sådan det hele fungerer på denne blog. dette øjeblik tid.
Generelt valgte jeg den anden mulighed, men ikke med det samme, så jeg var nødt til at sammenligne indholdet af small-device-min.css og small-device.css filerne med den originale style.css for at identificere de linjer, hvor Jeg lavede ændringer. Så satte jeg disse afløb ind krøllede seler@media-direktiver vist ovenfor (i slutningen af hovedfilen style.css). Men dette er ikke længere vigtigt.
Vi tilpasser skabelonen til mobilbrugernes bekvemmelighed
Så du har downloadet dit websted fra internettet, skubbet det ind på en lokal server og gjort dig bekendt med de principper, vi vil bruge. Nu er det tid til at begynde at eksperimentere. Af indlysende grunde kan jeg ikke give dig entydige råd (fordi alle skabeloner er forskellige, selv for den samme motor), hvad der præcist skal ændres i dit tilfælde, og hvilke brudpunkter du skal vælge.
For nemheds skyld kan du generelt kun vælge ét punkt i ordet, for eksempel svarende til standardbredden af hoveddelen (den centrale, hvor artikler vises), og ikke ændre noget før det. Men min mulighed forekom mig at foretrække, selvom jeg ikke havde meget tid til at tænke over det.
Hvad vil brugerne se med skærme, der er mindre end det første bristepunkt?
Se. At implementere et multi-søjle design i moderne layout bruges de. For eksempel flyder min sidebjælke til højre for hovedområdet takket være:
#sidebar(float:right;)
Så for at bryde layoutet med to kolonner og gøre det til et enkelt-kolonne-layout, bliver jeg nødt til at erstatte værdien for float-reglen de rigtige steder. Jeg prikkede virkelig til alting, fordi jeg havde glemt strukturen af min skabelon lidt og derfor kunne have fanget noget unødvendigt, men det er det specifikke ved at "samle et design på knæene" uden at have den passende erfaring. Men siden eksperimentet gik videre lokal server, så efter halvanden time fandt jeg alle de nødvendige punkter (ved forsøg og fejl), hvis resultat du nu kan observere.
Følgelig var det først nødvendigt at træne skabelonen til at blive lagt i to kolonner, hvilket krævede skrivning inde i @media-direktivet (med det første og andet brudpunkt):
#sidebar(float:ingen;) #sidebar(float:ingen !vigtigt;)
Forblev et problem med øverste menu , som ikke går særlig godt i stykker og fylder meget på en lille skærm, men der er planer om at gøre det til en drop-down for mobilversionen af siden (hvis jeg gør det, skriver jeg om det). Ja, tællerne i bunden var bygget som et hus (jeg har først bemærket det nu), men det er svært at reparere (det vigtigste er ikke at glemme).
Så lad os antage, at du vil gøre noget magi på en lokal server, eksperimentere, og som et resultat vil du få en fordøjelig mulighed for at tilpasse dit websted til besøgendes mobile enheder. Tilbage er blot at overføre denne sag til et arbejdssted. Naturligvis vil du ikke kopiere alle filerne (endsige databasen), fordi det vil være nok at tilføje (kopiere) et par linjer til header.php-filen og overføre nogle flere linjer til hovedstilfilen (dem inde i @mediedirektiver).
Herefter vil det være muligt at kontrollere de foretagne ændringer (du skal muligvis nulstille cachen i motoren eller i browseren) på computerskærmen, når du reducerer bredden af browservinduet og på din mobile gadgets(telefon, tablet). Hvis noget "kommer ud", så vil det være muligt hurtigt at rette denne sag.
Det vigtigste er, at efter foretaget ændringer din hjemmeside bestod Google-testen for egnethed til visning på mobile enheder (glem ikke at nulstille cachen, før du gør dette). Nå, du afslutter detaljerne med tiden.
Brug af adaptiv blokkode fra Google AdSense på et websted til adaptivt (responsivt) design
Lad os nu tale om Google Adsense. Hvis du ikke arbejder med dette system kontekstuel annoncering, så behøver du ikke læse videre. Hvis du arbejder og bruger koden til annonceblokke i fast størrelse på dit websted, bliver du nødt til at ændre den til koden for adaptive blokke (Google, som jeg forstår det, insisterer på dette), så annoncer i den passende størrelse indlæses på enheder med forskellig skærmbredde.
Faktisk er dette slet ikke svært at gøre, men personligt havde jeg en blokering, der krævede en mental indsats for at løse den. Så med misundelsesværdig regelmæssighed (for ikke at sige, at det bliver værre, snarere bedre, men når du ikke logger på i lang tid, lægger du lidt på). På grund af dette var jeg allerede nødt til at omskrive artiklen citeret i linket et par gange, men den er igen forældet, hvilket betyder, at dens fjerde inkarnation snart vil dukke op (men det er trættende).
Okay, det er ikke meningen. For at oprette en ny reklameblok Du skal klikke på gearet til højre i Adsense-grænsefladen øverste hjørne og vælg indstillingen "Indstillinger". På den side, der åbner, skal vi bruge øverste punkt menuen "Mine annoncer", hvor du kan oprette en ny blok, du skal blot klikke på knappen af samme navn:
På den side, der åbnes, vil den adaptive blok blive tilbudt dig som standard. Her skal du vælge den type annoncer, der skal vises (i de fleste tilfælde er det mere rentabelt at vise alt), og derefter angive for denne blok samme kundekanal, som du havde sat til den gamle blok (som du vil erstatte). Faktum er, at nogle annoncører kan målrette deres annoncering til din hjemmeside præcist gennem denne kundekanal, og for ikke at miste dem, skal du vælge den samme kanal for en ny reklameblok.
Denne metode virkede ikke for mig (det viste sig at være en slags skrald), så jeg prøvede gå til Google Adsense hjælp for at finde en løsning og fandt den endelig på denne side.
Dette er præcis den version af koden, jeg brugte (på forskellige enheder vil vise blokke passende størrelser). Det lader til, at alt begyndte at se ud, som det skulle, men ikke helt. For det første bemærkede jeg, at efter at have ændret koden, holdt indtryksstatistikken op med at ændre sig annoncer på hjemmeside Adsense. Da jeg så på statistikker specifikt for den nye blok, bemærkede jeg, at der praktisk talt ikke var nogen indtryk.
For det andet besluttede jeg at gøre udseendet af annoncerne (farve, skrifttype) i den nye adaptive blok det samme, som de var i de gamle annoncer. Efter ændringerne var der endnu flere misforståelser. Annoncerne vist i artiklen har ikke ændret deres design. Jeg begyndte at sammenligne koden kildesider(i browseren kan du gøre dette ved at vælge det relevante punkt i menuen højre knap mus) og opdagede, at der på en eller anden måde blev tilføjet et BR-linjeskift-tag efter nogle linjer kode.
Derfor fjernede jeg alle mellemrum og linjeskift i problemområder, hvorefter annoncerne øjeblikkeligt ændrede deres design og statistik begyndte at blive talt. Det er den slags problem, der er muligt.
Før dette havde jeg en synkron Adsense-kode (jeg installerede den tilbage i 2012), og i teorien kunne den reducere sidens indlæsningshastighed. Moderne kode er alt sammen asynkron, hvilket fuldstændig eliminerer muligheden for, at det forårsager en forsinkelse i sideindlæsningen. Jeg tror, at dette er en buzz, men som de siger, vi får se.
P.S. Her er en kort rapport om, hvad jeg færdiggjorde efter at have skrevet artiklen.
Ktonanovenkogo.ru="">
Held og lykke! Vi ses snart på bloggens sider
Du kan se flere videoer ved at gå til");">
Du kan være interesseret
Sådan laver du en indholdsfortegnelse (indhold, menu) til en artikel på en hjemmeside
Med hurtige rettelser kan du gemme dit websted fra Mobilegeddon og sikre, at det består Googles kompatibilitetstest.
Introduktion
I april 2015 var der en reel revolution i virtuel verden, som allerede er blevet kaldt "Mobilegeddon". Dette skyldes, at Google ændrede sin algoritme og begyndte at rangere websteder, der er optimeret til mobile enheder, over resten. Derfor skyndte alle webstedsejere i massevis at foretage ændringer i deres ressourcer.
I skrivende stund kan vi sige, at virkningen af den ændrede algoritme på søgeresultaterne ikke er særlig stærk, men allerede er kendetegnet ved tilføjelsen af en ny etiket ved siden af mobile søgeresultater.
Men i fremtiden kan situationen ændre sig dramatisk. Derfor er det en god idé at tjekke din hjemmeside for kompatibilitet med mobile gadgets.
Måske har du tidligere ikke haft penge eller tid nok til at optimere din ressource. Men nu er det tid til at gøre det, for før eller siden bliver du kørt ud i et hjørne, og du bliver nødt til at gøre det samme, men hurtigt, og tænke lidt over konsekvenserne.
Så hvad leder Googles mobilkompatibilitetstest efter?
Google deler testen op i fem komponenter, og du kan optjene point for at bestå hver:
1. Vis vindueskonfiguration
Indstilling af et viewport inde på en side giver browseren mulighed for at kontrollere bredden og skaleringen af siden for forskellige enheder.
2. Skriftsklarhed
Anvendes i forbindelse med et udsigtsvindue. Skriftstørrelsen kan skaleres, så den passer til sidevisningsenheden. I dette tilfælde kan du angive en basisskriftstørrelse, og den typografiske skala vil blive indstillet af relative stilarter.
3. Undgå at bruge plugins
Flash, Java og Silverlight forårsager en masse besvær for brugere af mobilenheder. Vælg native webteknologier (såsom HTML5).
4. Indholdsstørrelse
Sørg for, at indholdet passer inden for enhedens vandrette rammer, og at brugerne ikke behøver at rulle lodret eller vandret for at se indholdet.
5. Størrelse på knapper og links
Du bør ikke kun teste dit websted selv, på mobile enheder, men også anvende Googles PageSpeed Insights for at optimere indlæsningstider og forbedre brugeroplevelsen.
Nogle baggrundsoplysninger
Med den massive fremkomst af smartphones og tablets har mange webstedsejere opdaget, at deres kreationer, som er så praktiske og ser så godt ud på en stationær computer, er noget ubelejligt og grimt på mobile enheder. De fleste websteder på det tidspunkt blev lavet til en bestemt skærmstørrelse og havde ikke et "flydende" layout.
En meget specifik vej ud af situationen blev fundet - mange virksomheder oprettede simpelthen en anden, separat hjemmeside designet specifikt til mobile enheder.
Så kom CSS3 og medieforespørgsler. Webdesignere og udviklere kan nu oprette websteder, der er i stand til at kontrollere den enhed, siden bliver set fra, og justere designlayoutet i overensstemmelse hermed. Indholdet kan tilpasses til et specifikt udvalg af outputenheder uden at skulle ændre selve indholdet.
Dette giver dig blandt andet også mulighed for at spare omkostninger på at vedligeholde en anden, mobil, version af siden.
Nå, lad os prøve at gøre dette.
Men husk på, at alle disse rettelser er midlertidige, der kan hjælpe dig, mens du laver en ægte, fuldgyldig, responsiv hjemmeside.
Alle beslutninger, du træffer, bør tage hensyn til din virksomheds og besøgendes behov. Enhver af disse ændringer kan også have indflydelse på andre aspekter af din SEO-strategi.
Rådfør dig med en kvalificeret SEO-professionel, før du foretager ændringer på et live-websted.
Så,
*Du har en eksisterende hjemmeside;
*Du ønsker at lave minimale ændringer af hjemmesidens HTML og CSS.
I dette tilfælde har du flere muligheder:
Skift din webstedsskabelon
Mange af nutidens CMS'er giver dig mulighed for at ændre temaet eller skabelonen. Og mange af skabelonerne er adaptive, det vil sige, de tilpasser sig den nødvendige bredde skærmen.
Hvis du for eksempel bruger WordPress, så er arbejdet her cirka fem minutter. Temaet kan ændres med blot et par klik. Næsten øjeblikkeligt vil dit websted modtage et nyt design og vil være velegnet til mobile enheder.
Afhængigt af hvordan dit eksisterende websted blev designet, kan du opleve, at noget indhold ikke automatisk vises i nyt emne. Så noget manuelt arbejde skal muligvis udføres.
fordele
Evne til at ændre design med det samme.
Flere tusinde temaer er tilgængelige (nogle gratis).
Minusser
Ikke alt tidligere indhold er muligvis synligt på den nye skabelon uden yderligere arbejde.
Et nyt design matcher måske ikke altid dit brand.
Opret en separat hjemmeside til mobile enheder
Måske er dette ifølge nogle en indrømmelse af nederlag. Men at skabe et separat, mobilvenligt websted vil nok være det mest omkostningseffektive effektiv løsning på kort sigt for mange hjemmesider, der ikke har adgang til et CMS, eller hvor designændringer ikke er mulige.
God eftermiddag, kære bloglæsere! I dag vil jeg fortælle dig om de vanskeligheder, som mange webmastere er stødt på. Mange af jer er sikkert stødt på et budskab Google resultater, som oplyste, at webstedssiden ikke var optimeret til mobile enheder. Ved at klikke på linket tjekker du kompatibilitet med mobile enheder, og du får 2 visningsfejl: indholdet er bredere end skærmen, og interaktive elementer lokaliseres for hurtigt. I dag vil jeg fortælle dig, hvordan du løser dette problem.
Besked om en uoptimeret side i Google-resultater
Optimering af en enkelt side for kompatibilitet med mobile enheder
Problemet med indhold, der er bredere end skærmen, vises på mange websteder. Det sværeste er, at dette problem opstår, selvom du har responsiv skabelon hjemmeside eller en separat mobilversion er lavet. Det er ved at skabe en separat mobil version Jeg prøvede at løse dette problem, men alt viste sig at være meget enklere. Et par andre forsøg på at løse dette problem:
- Jeg installerede et billed- og mediekomprimeringsplugin til forskellige enheder
- oprettet en separat mobilversion af webstedet
- ændret caching-indstillingerne for webstedet
- komprimerede webstedets CSS og ændrede skærmindstillinger
Hvis du læser om at løse dette problem på internettet, kan du finde mange løsninger, der ikke vil give rigtige resultater. For at løse problemet er det nok kun at løse en uoverensstemmelse. Intet behov for redigering af CSS kode og PHP ændringer webstedskode. Min metode egner sig ikke kun til et WordPress-websted, men også til andre admin-paneler, hvor mediefilstørrelser kan justeres. Det forekommer mig, at de fleste fejl opstår, fordi Google rapporterer forkert placering interaktive elementer websted. Webmastere fokuserer specifikt på at løse dette problem, men spilder en masse tid på det dette problem er sekundær - det følger netop på grund af det bredere indhold.
Indholdet er bredere end skærmen - dette er den første årsag til, at Google modtager en klage over en hjemmeside. Hvis siden er optimeret til mobile enheder, så opstår der klager specifikt over specifikke sider, og ikke hele webressourcen. For at eliminere denne grund, skal du kontrollere alle de viste elementer på siden. Google har generelt problemer med billeder, der er bredere end 600 pixels (jeg kunne desværre ikke finde de præcise parametre i Googles manual). Den første ting du skal gøre er at ændre størrelsen på mediefilerne til 500 pixels (dette er den størrelse, jeg bruger til mine websteder).
Besked om, at dit indhold er bredere end skærmen
Den anden grund til problemet med indhold, der er bredere end skærmen, er bredden grafiske elementer overstiger installeret af Google størrelser til mobile enheder. Disse kunne være skydere, en sidehoved eller baggrundsbilleder. Det er netop problemet med den brede kasket (på trods af adaptivt design) var årsagen til ikke-optimering for mobile enheder af Google-indstillinger på en af mine sider. Efter at have udskiftet headeren blev webstedet fuldt optimeret til mobile enheder.
Sådan optimerer du dit websted til mobile enheder på Google
For at optimere webstedet til mobile enheder og eliminere problemet med bredt indhold, skal du følge følgende algoritme:
- Lad os vælge alle mulige mediefiler på webstedet, startende fra Head-tagget og slutter med Footer.
- Lad os optage størrelsen af hver mediefil
- Lad os gøre størrelsen på hver mediefil mindre end 600 pixels
Når du har gennemført disse enkle trin, kan du tjekke siden i mobiloptimeringsværktøjet. Som du kan se, kan det kun være nødvendigt at ændre interaktive elementer i sjældne tilfælde. Jeg håber, at min artikel var nyttig for dig, og at du var i stand til at løse problemet med indhold bredere end skærmen. Hvis du under løsningen har yderligere problemer, skal du huske at skrive om dem i kommentarerne, vi vil prøve at finde ud af det.
Hej allesammen!
Efter breve fra Google den 21. april 2015 begyndte webmastere at skynde sig for at optimere deres websteder til mobile enheder. Fra dette tidspunkt begyndte æraen mobilt internet, når næsten alle webressourcer bekvemt kan ses på en smartphone eller tablet.
Forklaret dette faktum det faktum, at for præcis to år siden (i skrivende stund - 2017) søgemaskinen Google startede tage højde for websteders tilpasningsevne til mobile enheder. enheder. Hvis en webressource ikke vises korrekt på en smartphone, sænkes den i søgeresultaterne. Og få mennesker ønsker at miste et gennemsnit på 17 % af trafikken. Senere sluttede Yandex sig til.
Desværre, to år senere, er mange sider simpelthen ikke tilpasset til visning på mobiltelefoner og mister meget trafik. Så jeg besluttede at skrive en artikel om dette emne, som et forsøg på at oplyse mine abonnenter, hvis websteder ikke reagerer, og for at give vejledning til læsere, der er brændende interesserede i dette emne, men ikke ved, hvad de skal gøre.
Hvorfor skal du optimere din hjemmeside til mobile enheder?
Mange annoncører og webstedsejere stiller spørgsmålet: hvorfor skal jeg optimere min hjemmeside til mobile enheder? Som sagt siden 2015 søgemaskiner begyndte at være særlig opmærksom i øjeblikket. Og ignorerer man det, kan man nemt få pessimisering fra PS'ens side, som følge af hvilken del af trafikken der går tabt. Google kan især lide at gøre dette.
Det er dog værd at bemærke, at påvirkningen Google algoritmer og Yandex, rettet mod at arbejde med websteder, der er optimeret og ikke optimeret til mobile enheder, små. Det vil sige, at der ikke er en sådan total kontrol over denne faktor, så i de "mobile" søgeresultater kan vi ofte se ikke-responsive sider. Her spiller noget andet en rolle.
Der er også forringelse adfærdsmæssige faktorer hjemmeside i mangel af en mobilversion. Faktum er, at et ikke-responsivt websted ser forfærdeligt ud på skærmene på smartphones og tablets: det bliver umuligt at læse teksten, og det er ubelejligt vandret rulning, interaktion med webstedet er vanskelig. Af disse grunde går besøgende fra det mobile internet blot til konkurrenternes sider, og du, på grund af forværrede adfærdsfaktorer, falder ned i søgeresultaterne.
Så hvis du ikke ønsker at miste positioner, miste trafik og følgelig salg, lav hurtigt en mobilversion af siden. Vi vil tale om, hvordan man gør det yderligere, men først vil vi tjekke webstedet for den såkaldte "mobil egnethed".
Sådan tjekker du en hjemmeside for mobiloptimering. enheder?
Google blev specifikt træt af problemet med mobilwebsteder og skabte en meget bekvem service, der viser, hvor optimeret siden er til mobil. enheder og om det overhovedet er optimeret. Den hedder Mobilvenlig, her er linket til den.
Hvis dit websted er optimeret til mobilenheder, vil du se følgende resultat: 
Ellers: 
Hvordan laver man en mobilversion af siden?
Der er mange måder at gøre en hjemmeside responsiv på, men jeg vil kun liste de mest grundlæggende og forståelige. til den almindelige mand. Men for klarheden af hele billedet anbefaler jeg at læse disse lektioner:
Så konventionelt kan metoder til implementering af adaptivt layout opdeles i to typer:
- Brug af specielle plugins;
- Arbejder med webstedskode.
Hver har sine fordele og ulemper, som vi vil tale om lige nu.
Adaptivt layout ved hjælp af specielle plugins
Da jeg har mere eller mindre stor erfaring med udelukkende at arbejde med CMS WordPress, og jeg ved ikke meget om noget andet system, jeg vil kun tale om det.
Smarte mennesker, udviklerne besluttede at forenkle processen med at skabe en mobilversion af webstedet så meget som muligt for dem, der ikke kender det, ved at oprette specielle plugins - tilføjelser til "motoren". En af disse er WpTouch-plugin'et, som giver dig mulighed for at oprette en "mobil" hjemmeside på en dag (groft sagt), uden at skulle håndtere kode.
Der er også en funktion til at skabe adaptivt layout i populært plugin Jetpack, så vidt jeg ved. Der skal du bare trykke på en knap, og det er det.
Men når du bruger denne metode, er det vigtigt at tage højde for, at de ikke vil fungere korrekt for alle skabeloner, og i nogle tilfælde vil de slet ikke fungere. Derudover alle mulige forskellige reklameindlæg fra selve plugin'et, som forstyrrer visningen af indholdet. Jeg vil gerne advare dig med det samme: Det anbefales ikke at bruge sådanne plugins, men hvis du virkelig har brug for det, så kun for et stykke tid.
For det meste den bedste mulighed Vi vil bruge færdige adaptive løsninger fra WordPress skabelon (tema) databasen. Ved at gøre dette vil du ikke kun gøre dit liv lettere, men også spare på layoutprogrammørernes tjenester.
Adaptivt hjemmesidelayout ved at arbejde med kode
At arbejde med hjemmesidekode er en kompleks sag, og at skabe adaptiv version webressource er endnu sværere. I min praksis forsøgte jeg at oprette to mobilsider, men jeg kunne ikke implementere dem fuldt ud. I det første tilfælde var der et forsøg på at oprette et mobilwebsted på et underdomæne som m.site.ru: Det lykkedes mig at lave et mere eller mindre normalt layout, placere alle blokkene de rigtige steder og gøre teksten læsbar. Kort sagt oprettede jeg en mobilside, men problemet lå et andet sted.
Faktum er, at hvis du bruger et underdomæne med et mobilsite, skal du oprette forbindelse til det fra et almindeligt domæne. Men omdirigeringen er ikke en almindelig, men en smart en, der ville omdirigere besøgende fra smartphones til mobilversionen. Jeg skulle spilde en masse tid på dette affald, men resultatet var utilfredsstillende. Derfor var jeg nødt til at opgive denne idé.
I det andet tilfælde oprettede jeg en hjemmeside for sjov (jeg er meget interesseret i at skrive kode), som jeg forsøgte at gøre adaptiv ved hjælp af cascading CSS stilarter. Det lykkedes, men det gik ikke ud over hjemmesideudvikling.
Jeg vil gerne bemærke, at skabe et adaptivt layout, når CSS hjælp er en fremragende mulighed, fordi: du ikke behøver at oprette en separat hjemmeside og uploade den til separat underdomæne og du behøver ikke bekymre dig om omdirigeringer. Det er nemt nok at bruge @media-direktiver. De kaldes også Media Queries:
@medieskærm og (maks. bredde: 1025px) ( CSS-egenskaber er skrevet for elementer, som de skal anvendes på, når skærmbredden er mindre end 1025px) @medieskærm og (maks. bredde: 760px) ( CSS-egenskaber er skrevet for elementer, som skal påføres, når skærmbredden er mindre end 760px)
Meget bekvem måde, da det ikke kræver oprettelse af venstrehåndede filer. Der arbejdes udelukkende med style.css-filen, hvor du har registreret alle site-styles.
Her er et eksempel fra mine stilarter til specifikke elementer:
@medieskærm og (max-width: 991px) ( /*Alle stilarter bruges til banneret i sidehovedet på artikelsider og headeren på hovedsiden*/ #banner-head ( margin-top:80px; ) . box-wrapper h1( margin -top:150px !important; ) ) @medieskærm og (max-width: 840px) ( #banner-head ( margin-left:60px; ) ) @medieskærm og (max-width: 801px) ) ( #banner-head ( margin-left:40px; ) ) @medieskærm og (max-width: 786px) ( #banner-head ( margin-left:20px; ) ) @medieskærm og (max-width: 765px) ) ( #banner-head ( margin-left:5px; ) ) @media screen og (max-width: 757px) ( .box-wrapper h1( font-size:32px !important; ) ) @media screen og (max- width: 750px) ( # banner-head ( display:none; ) ) @media screen og (max-width: 539px) ( .box-wrapper h1( font-size:28px !important; ) ) @media screen og (max. -bredde: 480px) ( #banner-head ( synlighed: skjult; display: ingen; ) ) @medieskærm og (max-width: 471px) ( .box-wrapper h1( font-size:24px !important; ) ) @ medieskærm og (maks. bredde: 407px) ( .box-wrapper h1( font-size:22px !important; ) ) @medieskærm og (max-width: 375px) ( #banner img( width: 100% !important; ) ) @medieskærm og (max-width: 370px) ( .box-wrapper ( width: 380px !important; ) .box-wrapper h1( margin-left:-15px !important; ) ) @media screen og (max-width: 357px) ( .box-wrapper h1( font-size:20px !important; ) ) @media screen and (max-width: 345px) ( .box-wrapper h1( margin-left:-25px !important; ) ) @medieskærm og (max-width: 338px) (.box-wrapper( margin-top:-50px; ) .box-wrapper h1( margin-left:-35px !important; ) .sep( margin-left:-20px !important; ) )
Viewport-metatag
Hvis du ikke ønsker at oprette en separat mobilversion eller skrive @media-direktiver i CSS-stil, så er der en anden måde, hvorpå dit websted mere eller mindre vil blive vist på mobiltelefoner - ved hjælp af Viewport-metatagget.
Dens opgave er at bestemme vinduesbredden og kontrollere sideskalering. Det vil sige, takket være dette metatag kan vi deaktivere stigningen eller indstille den maksimal værdi(grænse), og indstil også skalaen på den side, der vises.
Dette metatag er sat i tags
og har følgende form:
Vi har således fire måder at optimere siden til mobile enheder på:
- Brug af specielle plugins til dit CMS;
- Brug af et underdomæne som m.site.ru med mobilversionen af webstedet;
- Brug af medieforespørgsler i CSS;
- Brug af Viewport-metatagget.
Alt, hvad der er skrevet ovenfor, er den viden, som jeg besidder. Jeg ved måske ikke noget, så du er velkommen til at tilføje og rette mig i kommentarerne.
Nå, det er alt, kære venner!
Vi ses snart!
Forrige artikelNæste artikel
Google erklærer, at det tager højde for optimering af webstedet til mobile enheder i sin søgning. Hvis du har tilføjet din ressource til google webmastere, så kan det være markeret "Webstedet er ikke optimeret til mobile enheder." Det betyder, at der skal arbejdes på at forbedre ressourcens synlighed i Googles øjne og tilpasse siden til mobile enheder. Instruktioner nedenfor gælder ikke kun for WordPress ressourcer, men også til andre motorer.
For at kontrollere webstedsvisningen for tilpasningsevne, vil vi bruge Google-tjeneste https://developers.google.com/speed/pagespeed/insights.
Angiv webstedets adresse, og klik på knappen "Analyser". Du kan se, at for dette eksempel er scoren for mobilbrugeroplevelsen 69 procent, og derudover er der en besked "Siden er muligvis ikke vil blive testet nem visning på mobile enheder."
Lad os sætte os som mål at optimere siden og forbedre indikatoren til mindst 90 %, hvilket anses for godt i Googles øjne.
Først og fremmest skal du være opmærksom på meddelelsen "Tilpas visningsområdet". Det er bedst at starte her, fordi løsning af dette problem automatisk vil påvirke Googles estimater af skriftstørrelser og aktive elementer.
Klik på linket "Sådan repareres" og se følgende tekst om behovet for at angive viewport-tagget. 
Der er et link til "Tilpas din visningsport", der forklarer, hvordan du bruger dette tag. Vi vil ikke behandle det i detaljer. Lad os bare bruge Googles instruktioner, som du skal bruge til at angive instruktioner i hovedblokken på webstedet:
< meta name = viewport content = "width=device-width, initial-scale=1"> |
Vi tilføjer et tag til webstedet, og for sjov tjekker vi, hvordan bekvemmelighedsindikatoren for mobilbrugere har ændret sig. 
Vi ser en stigning fra 69 til 80%.
Hvis du har aktiveret cachelagring på dit websted, skal du før kontrol enten deaktivere cachen eller slette cachelagrede filer, ellers kan kontrollen udføres ved hjælp af gamle filer.
Dernæst ser vi på problemet i den røde zone "Tilpas indholdsstørrelsen til visningsporten." Problemet er, at Google tjekker for en enhedsbredde på 375 pixels, og størrelsen på nogle webstedselementer overstiger dette tal.
Faktum er, at mange skabeloner lavet tidligere indeholder absolutte størrelser af webstedselementer. Filen style.css kan f.eks. indeholde instruktioner som denne
#wrapper (bredde: 1000px;)
#indpakning ( bredde: 1000px; |
indpakning - i I dette tilfælde Dette er hovedbeholderen på webstedssiden. Et sådant element passer naturligvis ikke på en 375 pixels bred skærm. Du kan også finde andre lignende instruktioner til andre elementer på webstedet.
Vi løser dette problem ved hjælp af følgende trick. Lad os omskrive ovenstående stilarter som følger:
#wrapper ( max-width: 1000px; width: 100%; )
#indpakning ( max-bredde: 1000px; bredde: 100%; |
Når du opretter en side, vil browseren bruge minimumsværdi af to: max-bredde og -bredde. I dette tilfælde, hvis brugerens skærmbredde er større end 1000px, bruges en værdi på 1000, og hvis brugerens skærmbredde er mindre end 1000px, bruges en værdi svarende til skærmbredden (100%).