Оптимизация за мобилни устройства css. Адаптирайте шаблона за преглед на мобилни устройства
Здравейте, скъпи читатели на сайта на блога. Не за първи път споменавам това в статии има значителен растеж в RuNet мобилен трафик . И това започва да оказва доста голямо влияние върху живота на уеб администраторите и SEO специалистите.
Първо, много собственици на уебсайтове започват да мислят за начини да печелят пари от мобилен трафик, който става изобилен (дори такова чудовище, тъй като вече предлага свои собствени опции за монетизиране на посетители, посещаващи вашия уебсайт от мобилни устройства).
Но най-важното е, че правим „второ“. Факт е, че сайт, който не е адаптиран да получава същия този мобилен трафик, може сериозно да загуби позицията си в резултатите от търсенето поради влошени поведенчески характеристики. На мобилен телефонМного е неудобно да се използва хоризонтално превъртане при четене на текст или търсене в менюта, така че хората бързо напускат такива ресурси и като правило не преминават към други страници.
Разбира се, знаех всичко това от доста дълго време, но винаги имаше нещо по-важно и първостепенно и цялостната концепция за адаптиране на сайта за гледане на мобилни устройстваПросто не се получи в главата ми. Google обаче ме натисна много силно вчера сутринта, като ми изпрати съобщение, че от 21 априлпри определяне на класирането при търсене на даден сайт, Google ще вземе предвид дали е удобно да разглеждате уеб страници на мобилни устройства.
Както се казва, пристигнаха. Трябваше да се хвана за главата и за половин ден да разработя и оживя концепцията за мобилизиране на сайтове. Разбира се, бързането и непълното разбиране на всички възможности за решаване на този проблем се отрази на елегантността на решението на проблема, но „това, което е нараснало, е нараснало“ и ще бъде възможно да го завършите по пътя. основната задачазавършено - . И как беше направено това, прочетете в продължението на тази публикация.
Уместност на оптимизацията на мобилни уебсайтове и бъдещи предизвикателства
И така, първо ще опиша текущата ситуация, а след това вариантите за нейното разрешаване, които съм избрал. Както споменах малко по-горе, започнах да мисля за оптимизиране на уебсайт страници за мобилни устройства преди много време, но понякога, за да направите крачка напред, имате нужда от някой, който да ви ритне добре в задника. Този удар се оказа писмо от Google Adsense, в което се казва, че е време най-накрая да разрешим този проблем.
Всъщност подобни писма от този адресат пристигнаха редовно (обикновено дадоха примери колко добре е за онези сайтове, които са оптимизирани за мобилен трафик), но тук имаше само ултиматум:
17 процента от мобилния трафик според мен е доста приличен, но честно казано, без да споменавам евентуална промяна в алгоритъма Класиране в Googleи като вземем предвид фактора оптимизиране на сайта за мобилни устройства, едва ли бих се преместил (винаги има по-важна дейност, особено когато нямате конкретен план за решаване на проблема в главата си).
Между другото, 17 процента от посетителите влизат в сайта от мобилни устройства и е ясно, че процентът на неуспех на такива потребители е значително по-висок от този на тези, които са влезли в сайта от компютър или лаптоп (т.е. проблемът е очевиден):
Връзката, предоставена в писмото, води до Google услуга, където може да се оцени качеството мобилна оптимизациявашия сайт според принципа: всичко е наред или пълен ужас. Първоначално сайтът имаше, разбира се, тъжна червена присъда (аларма):
В екранната снимка използвах блога на уважаемия Devaki за илюстрация, защото сега имам малко по-различна картина. В моя случай, струва ми се, бяха посочени дори три причини, които пречат на гледането на сайта на мобилни телефони, но тази услуга всъщност прави само присъда.
Но за да разберете подробностите, препоръчвам да използвате друга услуга от същия наречен Google. Тук всичко ще бъде повече или по-малко подробно и поне ще бъде ясно „в коя посока да копаем“:
Имат и още един подобна услуга, но му се дава само оценка, но, за съжаление, няма препоръки за подобрение. Но можете да се абонирате за промените:
В нашия случай трябва да обърнете внимание на оценката „Лекота на потребителя“ в раздела „За мобилни устройства“. Ясно е, че скоростта на зареждане също е важна, но за мен лично всичко се свежда до настройките на сървъра, които аз самият не мога да променя (защото съм нуб в сървърната администрация) и все не мога да стигна до постигане на споразумение с техническата поддръжка на Infobox (отново, очевидно, имам нужда от ритник в задника, за да започна да се движа). Но това вероятно е тема за отделна статия.
Задачата пред мен вечерта вчерабеше решен и сайтът получи 95 и 100 възможни точки за лекота на използване мобилни потребители. Съответно услугата на Google, връзката към която е дадена в писмото, казва, че сега всичко е наред (благодарение на зарядното):
Той се похвали, сега можете да започнете да описвате предприетите стъпки и планираните стратегии. Така че имаше няколко проблема, които трябваше да бъдат решени:
Числата в пиксели показват точки на прекъсване. Ако започнете да намалявате този прозорец (с отворен в него сайт https://site) по ширина (в горния десен ъгъл на браузъра има бутон с два квадрата, насложени един върху друг - каза „Captain Obvious“), тогава когато преминете ширината 1025px и 760px ще има промени в дизайна.
Първо, страничната лента ще падне (ще падне най-долу) и горното меню ще се промени малко (искам да го направя падащо за мобилни телефони в бъдеще, но не съм стигнал до него все още, както обикновено).
И във втората точка на прекъсване ще забележите, че докато допълнително намалявате ширината на зоната за гледане, текстът, снимките и видеоклиповете започват да се адаптират към новия размер (да се адаптират към него), а страничната лента, разположена по-долу, също ще претърпи промени. Всъщност дори увеличих шрифта за екрани с ширина по-малка от 760px (за всеки случай).
Затова реших да използвам втория вариант за създаване на responsive дизайн на сайта, за да го оптимизирам за мобилни устройства. Състои се в. В този случай няма да е необходимо да създавате три копия на стиловия файл, но ще бъде достатъчно да добавите нещо подобно в долната част на основния файл:
@медиен екран и (максимална ширина: 1025 пиксела) ( CSS свойства, което ще промени дизайна, когато ширината на екрана е по-малка от 1025px) @media screen и (max-width: 760px) (CSS свойства, които ще променят дизайна, когато ширината на екрана е по-малка от 760px)
Е, в областите, ограничени от фигурни скоби, ще бъде достатъчно да напишете тези CSS свойства, които ще претърпят промени, за да адаптирате шаблона на уебсайта си за мобилни устройства.
Вярно е, че все още не разбрах напълно нюансите на свързването на тези директиви в браузъра, защото те просто не работеха. трябваше добавете към файла header.phpТова са линиите (свързващи същия стилов файл, но с различни резолюцииекран):
Точно така работи всичко в този блог. този моментвреме.
Като цяло избрах втората опция, но не веднага, така че трябваше да сравня съдържанието на файловете small-device-min.css и small-device.css с оригиналния style.css, за да идентифицирам редовете, където Направих промени. След това вкарах тези дренажи вътре фигурни скоби@media директиви, показани по-горе (в края на главния файл style.css). Но това вече не е важно.
Ние адаптираме шаблона за удобство на мобилните потребители
И така, вие сте изтеглили сайта си от Интернет, поставили сте го в локален сървър и сте се запознали с принципите, които ще използваме. Сега е време да започнете да експериментирате. По очевидни причини не мога да ви дам недвусмислен съвет (тъй като всички шаблони са различни, дори и за един и същ двигател), какво точно трябва да се промени във вашия случай и кои точки на прекъсване да изберете.
За простота можете като цяло да изберете само една точка от думата, например равна на стандартната ширина на основната част (централната, където се показват статиите), и не променяйте нищо преди това. Но моят вариант ми се стори за предпочитане, въпреки че нямах много време да го обмисля.
Какво ще видят потребителите с екрани, по-малки от първата точка на прекъсване?
Виж. За реализиране на многоколонен дизайнв съвременното оформление се използват. Например моята странична лента плава вдясно от основната област благодарение на:
#sidebar(float:right;)
Така че, за да разчупя оформлението с две колони и да го направя оформление с една колона, ще трябва да заменя стойността за правилото за float на правилните места. Наистина бръкнах във всичко, защото малко бях позабравил структурата на моя темплейт и следователно можех да хвана нещо ненужно, но това е спецификата на „сглобяването на дизайн на колене“, без да има подходящ опит. Но тъй като експериментът продължи локален сървър, след час и половина намерих всички необходими точки (чрез проба и грешка), резултатът от които вече можете да наблюдавате.
Съответно, първо беше необходимо да се обучи шаблонът да бъде изложен в две колони, което изискваше писане вътре в директивата @media (с първата и втората точка на прекъсване):
#sidebar(float:none;) #sidebar(float:none !important;)
Остана проблем с горно меню , който не се чупи много добре и заема много място на малък екран, но има планове да го направя падащ за мобилната версия на сайта (ако го направя, ще пиша за това). Да, броячите в самото дъно бяха построени като къща (забелязах го едва сега), но е трудно да се поправи (основното е да не забравяте).
И така, нека приемем, че ще направите някаква магия на локален сървър, експериментирайте и в резултат ще получите лесна за усвояване опция за адаптиране на вашия сайт към мобилните устройства на посетителите. Остава само да прехвърлите този въпрос на работещ сайт. Естествено, няма да копирате всички файлове (да не говорим за базата данни), защото ще бъде достатъчно да добавите (копирате) няколко реда към файла header.php и да прехвърлите още няколко реда към основния стилов файл (тези вътре в @медийни директиви).
След това ще бъде възможно да проверите направените промени (може да се наложи да нулирате кеша в двигателя или в браузъра) на екрана на компютъра, когато намалите ширината на прозореца на браузъра и на вашия мобилни джаджи(телефон, таблет). Ако нещо „излезе“, тогава ще бъде възможно бързо да се коригира този въпрос.
Основното е, че след направени промени твоят уебсайт премина теста на Google за пригодност за гледане на мобилни устройства (не забравяйте да нулирате кеша, преди да направите това). Е, ще завършите подробностите с времето.
Използване на адаптивен блок код от Google AdSense на уебсайт за адаптивен (отзивчив) дизайн
Сега нека поговорим за Google Adsense. Ако не работите с тази система контекстна реклама, тогава не е нужно да четете повече. Ако работите и използвате кода за рекламни блокове с фиксиран размер на вашия сайт, ще трябва да го промените на кода за адаптивни блокове (Google, доколкото разбирам, настоява за това), така че да се зареждат реклами с подходящ размер на устройства с различна ширина на екрана.
Всъщност това не е никак трудно да се направи, но лично аз имах блокаж, който изискваше психически усилия, за да го разреша. И така, със завидна редовност (да не кажа, че става по-лошо, по-скоро по-добро, но когато не влизате дълго време, вие малко затваряте). Поради това вече трябваше да пренапиша статията, цитирана във връзката, няколко пъти, но тя отново е остаряла, което означава, че скоро ще се появи четвъртото й въплъщение (това обаче е уморително).
Добре, не е това въпросът. За създаване на нов рекламен блокЩе трябва да кликнете върху зъбното колело вдясно в интерфейса на Adsense горен ъгъли изберете опцията „Настройки“. На страницата, която се отваря, от която се нуждаем горна точкаменю “Моите обяви”, където за създаване на нов блок трябва само да кликнете върху едноименния бутон:
На страницата, която се отваря, адаптивният блок ще ви бъде предложен по подразбиране. Тук трябва да изберете типа реклами, които ще се показват (в повечето случаи е по-изгодно да показвате всичко) и след това да посочите за този блок същия клиентски канал, които сте задали за стария блок (който ще сменяте). Факт е, че някои рекламодатели могат да насочват рекламите си към вашия уебсайт именно чрез този клиентски канал и за да не ги загубите, трябва да изберете същия канал за нов рекламен блок.
Този метод не работи за мен (оказа се някакъв боклук), затова опитах отидете на помощ за Google Adsense, за да потърсите решениеи най-накрая го намерих на тази страница.
Това е точно версията на кода, който използвах (на различни устройстваще покаже блокове подходящи размери). Изглежда, че всичко започна да изглежда както трябва, но не съвсем. Първо, забелязах, че след промяна на кода статистиката за импресиите спря да се променя рекламиНа начална страница Adsense. Когато разглеждах статистиката специално за новия блок, забелязах, че практически няма импресии.
Второ, реших да направя външния вид на рекламите (цвят, шрифт) в новия адаптивен блок същият, както беше в старите реклами. След извършването на промените имаше още повече недоразумения. Показаните в статията реклами не са променили дизайна си. Започнах да сравнявам кода изходни страници(в браузъра можете да направите това, като изберете съответния елемент от менюто десен бутонмишка) и откри, че по някакъв начин BR таг за нов ред е добавен след няколко реда код.
Затова премахнах всички интервали и прекъсвания на редове в проблемните зони, след което рекламите незабавно промениха дизайна си и статистиката започна да се отчита. Това е вид проблем, който е възможен.
Преди това имах синхронен код на Adsense (инсталирах го през 2012 г.) и на теория можеше да намали скоростта на зареждане на сайта. Съвременният код е изцяло асинхронен, което напълно елиминира възможността той да причини забавяне при зареждането на страницата. Мисля, че това е шум, но, както се казва, ще видим.
P.S.Ето кратък отчет за това, което завърших след написването на статията.
Ktonanovenkogo.ru="">
Късмет! Ще се видим скоро на страниците на сайта на блога
Можете да гледате още видеоклипове, като отидете на");">
Може да се интересувате
Как да направите таблица със съдържание (съдържание, меню) за статия в уебсайт
С бързи поправки можете да спасите сайта си от Mobilegeddon и да се уверите, че преминава теста за съвместимост на Google.
Въведение
През април 2015 г. настъпи истинска революция в виртуален свят, който вече е наречен "Mobilegeddon". Това е така, защото Google промени алгоритъма си и започна да класира сайтовете, които са оптимизирани за мобилни устройства, над останалите. Следователно всички собственици на сайтове се втурнаха масово да правят промени в своите ресурси.
Към момента на писане можем да кажем, че въздействието на променения алгоритъм върху резултатите от търсенето не е много силно, но вече се характеризира с добавянето на нов етикет до резултатите от мобилно търсене.
Но в бъдеще ситуацията може да се промени драматично. Затова е добра идея да проверите уебсайта си за съвместимост с мобилни джаджи.
Може би преди това не сте имали достатъчно пари или време, за да оптимизирате своя ресурс. Но сега е моментът да го направите, защото рано или късно ще бъдете притиснати в ъгъла и ще трябва да направите същото, но бързо, без да мислите малко за последствията.
И така, какво търси тестът за мобилна съвместимост на Google?
Google разделя теста на пет компонента и можете да печелите точки за преминаване на всеки от тях:
1. Преглед на конфигурацията на прозореца
Задаването на прозорец за изглед вътре в страница позволява на браузъра да контролира ширината и мащабирането на страницата за различни устройства.
2. Яснота на шрифта
Използва се заедно с прозорец за наблюдение. Размерът на шрифта може да бъде мащабиран, за да отговаря на устройството за разглеждане на страницата. В този случай можете да посочите основен размер на шрифта и типографският мащаб ще бъде зададен от относителни стилове.
3. Избягвайте използването на добавки
Flash, Java и Silverlight причиняват много неудобства на потребителите на мобилни устройства. Изберете естествени уеб технологии (като HTML5).
4. Размер на съдържанието
Уверете се, че съдържанието се побира в хоризонталните граници на устройството и че потребителите не трябва да превъртат вертикално или хоризонтално, за да видят съдържанието.
5. Размер на бутоните и връзките
Не само трябва да тествате сайта си сами, на мобилни устройства, но и да приложите тези на Google PageSpeed Insightsза оптимизиране на времето за зареждане и подобряване на потребителското изживяване.
Малко основна информация
С масовото навлизане на смартфони и таблети много собственици на уебсайтове откриха, че техните творения, които са толкова удобни и изглеждат толкова добре на настолен компютър, са нещо неудобно и грозно на мобилни устройства. Повечето сайтове по това време бяха създадени за определен размер на екрана и нямаха „течно“ оформление.
Беше намерен много специфичен изход от ситуацията - много компании просто създадоха друг, отделен уебсайт, предназначен специално за мобилни устройства.
След това дойдоха CSS3 и медийните заявки. Уеб дизайнерите и разработчиците вече могат да създават сайтове, които могат да проверяват устройството, от което се преглежда страницата, и съответно да коригират оформлението на дизайна. Съдържанието може да се адаптира към определен набор от изходни устройства, без да се налага да се променя самото съдържание.
Освен всичко друго, това също ви позволява да спестите разходи за поддръжка на друга, мобилна версия на сайта.
Е, нека се опитаме да направим това.
Но имайте предвид, че всички тези поправки са временни, които могат да ви помогнат, докато създавате истински, пълноценен, отзивчив уебсайт.
Всички решения, които вземате, трябва да вземат предвид нуждите на вашия бизнес и посетителите на сайта. Всяка от тези промени може също да окаже влияние върху други аспекти на вашата SEO стратегия.
Моля, консултирайте се с квалифициран SEO специалист, преди да направите каквито и да било промени в активен сайт.
Така,
*Имате съществуващ уебсайт;
*Искате да направите минимални промени в HTML и CSS на уебсайта.
В този случай имате няколко възможности:
Променете шаблона на вашия сайт
Много от днешните CMS ви позволяват да промените темата или шаблона. И много от шаблоните са адаптивни, тоест адаптират се към необходимата ширинаекран.
Ако например използвате WordPress, тогава работата тук е около пет минути. Темата може да се промени само с няколко щраквания. Почти моментално вашият сайт ще получи свеж дизайн и ще бъде подходящ за мобилни устройства.
В зависимост от това как е проектиран съществуващият ви сайт, може да откриете, че част от съдържанието не се появява автоматично в нова тема. Така че може да се наложи да се направи малко ръчна работа.
професионалисти
Възможност за незабавна промяна на дизайна.
Налични са няколко хиляди теми (някои безплатни).
минуси
Не цялото предишно съдържание може да се вижда в новия шаблон без допълнителна работа.
Нов дизайн може не винаги да съответства на вашата марка.
Създайте отделен уебсайт за мобилни устройства
Може би според някои това е равносилно на признание за поражение. Но създаването на отделен, удобен за мобилни устройства сайт вероятно ще бъде най-рентабилно ефективно решениев краткосрочен план за много уебсайтове, които нямат достъп до CMS или за които не са възможни промени в дизайна.
Добър ден, скъпи читатели на блога! Днес ще ви разкажа за трудностите, с които са се сблъскали много уеб администратори. Със сигурност много от вас са попадали на съобщение в Резултати от Google, който заяви, че страницата на сайта не е оптимизирана за мобилни устройства. Щраквайки върху връзката, проверявате съвместимостта с мобилни устройства и получавате 2 грешки при показване: съдържанието е по-широко от екрана и интерактивните елементи се намират твърде бързо. Днес ще ви кажа как да разрешите този проблем.
Съобщение за неоптимизирана страница в резултатите на Google
Оптимизиране на една страница за съвместимост с мобилни устройства
Проблемът със съдържанието, по-широко от екрана, се появява на много сайтове. Най-трудното е, че този проблем възниква, дори ако имате адаптивен шаблонуебсайт или е направена отделна мобилна версия. Това е чрез създаване на отделна мобилна версияОпитах се да разреша този проблем, но всичко се оказа много по-просто. Няколко други опита за решаване на този проблем:
- Инсталирах плъгин за компресиране на изображения и медии за различни устройства
- създаде отделна мобилна версия на сайта
- промени настройките за кеширане на сайта
- компресира CSS на сайта и промени настройките на дисплея
Ако прочетете за решаването на този проблем в Интернет, можете да намерите много решения, които няма да донесат реални резултати. За да разрешите проблема, е достатъчно да разрешите само едно несъответствие. Няма нужда от редактиране на CSSкод и PHP променикод на сайта. Моят метод е подходящ не само за сайт на WordPress, но и за други административни панели, където размерите на медийните файлове могат да се коригират. Струва ми се, че повечето грешки възникват, защото Google докладва неправилно местоположение интерактивни елементисайт. Уеб администраторите се фокусират конкретно върху решаването на този проблем, но губят много време за това този проблеме второстепенна – следва именно поради по-широкото съдържание.
Съдържанието е по-широко от екрана - това е първоначалната причина, поради която Google получава оплакване относно страница на уебсайт. Ако сайтът е оптимизиран за мобилни устройства, тогава оплакванията възникват конкретно срещу конкретни страници, а не целия уеб ресурс. С цел премахване тази причина, трябва да проверите всички показани елементи на страницата. Google обикновено има проблеми с изображения, които са по-широки от 600 пиксела (за съжаление не можах да намеря точните параметри в ръководството на Google). Първото нещо, което трябва да направите, е да промените размера на медийните файлове на 500 пиксела (това е размерът, който използвам за моите сайтове).
Съобщение, че вашето съдържание е по-широко от екрана
Втората причина за проблема със съдържанието, по-широко от екрана, е ширината графични елементинадвишава инсталиран от Googleразмери за мобилни устройства. Това могат да бъдат плъзгачи, заглавка на сайт или фонови изображения. Именно проблемът е в широката капачка (въпреки адаптивен дизайн) беше причината за липсата на оптимизация за мобилни устройства от Настройки на Googleна един от моите сайтове. След смяната на хедъра, сайтът стана напълно оптимизиран за мобилни устройства.
Как да оптимизирате уебсайта си за мобилни устройства в Google
За да оптимизирате сайта за мобилни устройства и да премахнете проблема с широкото съдържание, трябва да следвате следния алгоритъм:
- Нека изберем всички възможни медийни файлове на сайта, като започнем от тага Head и завършим с Footer.
- Нека запишем размерите на всеки медиен файл
- Нека направим размера на всеки медиен файл по-малък от 600 пиксела
След като изпълните тези прости стъпки, можете да проверите страницата в инструмента за оптимизация на мобилно устройство. Както можете да видите, промяната на интерактивните елементи може да е необходима само в редки случаи. Надявам се, че статията ми е била полезна за вас и сте успели да разрешите проблема със съдържанието, по-широко от екрана. Ако по време на решението имате допълнителни проблеми, не забравяйте да пишете за тях в коментарите, ние ще се опитаме да го разберем.
Здравейте всички!
След писма от Google на 21 април 2015 г. уеб администраторите започнаха да бързат да оптимизират сайтовете си за мобилни устройства. От този момент започва ерата мобилен интернет, когато почти всеки уеб ресурс може да се разглежда удобно на смартфон или таблет.
Обяснено този фактфактът, че точно преди две години (по време на писане - 2017 г.) търсачката Google започнавземете предвид адаптивността на сайтовете за мобилни устройства. устройства. Ако даден уеб ресурс не се показва правилно на смартфон, той се понижава в резултатите от търсенето. И малко хора искат да загубят средно 17% от трафика. По-късно Yandex се присъедини.
За съжаление две години по-късно много сайтове просто не са адаптирани за показване на мобилни телефони и губят много трафик. Затова реших да напиша статия за тази тема, като опит да просветля моите абонати, чиито сайтове не са responsive, и да дам насока на читателите, които се интересуват горещо от тази тема, но не знаят какво да правят.
Защо трябва да оптимизирате уебсайта си за мобилни устройства?
Много рекламодатели и собственици на уебсайтове задават въпроса: защо трябва да оптимизирам уебсайта си за мобилни устройства? Както казах, от 2015 г търсачкизапочнаха да обръщат специално внимание в момента. И ако го игнорирате, лесно можете да получите песимизация от страна на PS, в резултат на което се губи част от трафика. Google особено обича да прави това.
Заслужава обаче да се отбележи фактът, че влиянието Алгоритми на Googleи Yandex, насочени към работа със сайтове, оптимизирани и не оптимизирани за мобилни устройства, малки. Тоест, няма такъв тотален контрол върху този фактор, така че в резултатите от „мобилното“ търсене често можем да видим неотзивчиви сайтове. Нещо друго играе роля тук.
Има и влошаване поведенчески факториуебсайт при липса на мобилна версия. Факт е, че неотзивчив уебсайт изглежда ужасно на екраните на смартфони и таблети: става невъзможно да се прочете текстът и неудобно хоризонтално превъртане, взаимодействието със сайта е затруднено. Поради тези причини посетителите от мобилния интернет просто отиват на сайтовете на конкурентите и вие, поради влошаващи се поведенчески фактори, падате в резултатите от търсенето.
Така че, ако не искате да губите позиции, да губите трафик и съответно продажби, бързо направете мобилна версия на сайта. Ще говорим за това как да го направим по-нататък, но първо ще проверим сайта за така наречената „мобилна пригодност“.
Как да проверите уебсайт за мобилна оптимизация. устройства?
Google специално се умориха от проблема с мобилните сайтове и създаде много удобно обслужване, показвайки колко е оптимизирана страницата за мобилни устройства. устройства и дали изобщо е оптимизиран. Нарича се Mobile Friendly, ето връзката към него.
Ако вашият сайт е оптимизиран за мобилни устройства, ще видите следния резултат: 
В противен случай: 
Как да направя мобилна версия на сайта?
Има много начини да направите уебсайт отзивчив, но ще изброя само най-основните и разбираеми. на обикновения човек. Въпреки това, за яснота на цялата картина, препоръчвам да прочетете тези уроци:
Така че условно методите за внедряване на адаптивно оформление могат да бъдат разделени на два типа:
- Използване на специални добавки;
- Работа с кода на сайта.
Всеки има своите плюсове и минуси, за които ще говорим точно сега.
Адаптивно оформление с помощта на специални добавки
Тъй като имам повече или по-малко богат опит в работата изключително с CMS WordPress, и не знам много за никоя друга система, ще говоря само за нея.
Умни хора, разработчиците решиха да опростят процеса на създаване на мобилна версия на сайта колкото е възможно повече за тези, които не знаят, като създадат специални плъгини - допълнения към „двигателя“. Един от тях е плъгинът WpTouch, който ви позволява да създадете „мобилен“ уебсайт за един ден (грубо казано), без да се налага да се занимавате с код.
Има и функция за създаване на адаптивно оформление в популярен плъгин Jetpack, доколкото знам. Там просто трябва да натиснете един бутон и това е.
Въпреки това, когато използвате този метод, е важно да вземете предвид факта, че те няма да работят правилно за всички шаблони, а в някои случаи изобщо няма да работят. Освен това, всякакви различни рекламни вложкиот самия плъгин, които пречат на гледането на съдържанието. Искам да ви предупредя веднага: използването на такива плъгини не се препоръчва, но ако наистина имате нужда от това, тогава само за известно време.
Повечето най-добрият вариантЩе използваме готови адаптивни решения от базата данни с шаблони (теми) на WordPress. Правейки това, не само ще улесните живота си, но и ще спестите от услугите на програмисти за оформление.
Адаптивно оформление на уебсайт чрез работа с код
Работата с кода на уебсайта е сложен въпрос и създаването адаптивна версияуеб ресурс е още по-трудно. В моята практика се опитах да създам два мобилни сайта, но не успях да ги реализирам напълно. В първия случай имаше опит за създаване на мобилен сайт на поддомейн like m.site.ru: Успях да направя повече или по-малко нормално оформление, да поставя всички блокове на правилните места и да направя текста четим. Накратко, създадох мобилен сайт, но проблемът беше другаде.
Факт е, че ако използвате поддомейн с мобилен сайт, трябва да се свържете с него от обикновен домейн. Но пренасочването не е обикновено, а умно, което би пренасочило посетителите от смартфони към мобилната версия. Трябваше да загубя много време за този боклук, но резултатът беше незадоволителен. Затова трябваше да се откажа от тази идея.
Във втория случай създадох уебсайт за забавление (много се интересувам от писане на код), който се опитах да направя адаптивен с каскадно CSS стилове. Успях, но това не надхвърли разработката на уебсайт.
Бих искал да отбележа, че създаването на адаптивно оформление, когато CSS помоще отличен вариант, защото: не е необходимо да създавате отделен уебсайт и да го качвате на отделен поддомейни не е нужно да се занимавате с пренасочвания. Достатъчно лесно е да използвате @media директиви. Те се наричат още медийни заявки:
@media screen and (max-width: 1025px) ( CSS свойствата са написани за елементи, към които те трябва да бъдат приложени, когато ширината на екрана е по-малка от 1025px ) @media screen and (max-width: 760px) ( CSS свойствата са написани за елементи, към които трябва да се приложи, когато ширината на екрана е по-малка от 760px)
Много удобен начин, тъй като не изисква създаването на леви файлове. Работата се извършва изключително с файла style.css, където сте регистрирали всички стилове на сайта.
Ето пример от моите стилове за конкретни елементи:
@media screen and (max-width: 991px) ( /*Всички стилове се използват за банера в заглавката на сайта на страниците със статии и заглавката на главната страница*/ #banner-head ( margin-top:80px; ) . box-wrapper h1( margin -top:150px !important; ) ) @media screen и (max-width: 840px) ( #banner-head ( margin-left:60px; ) ) @media screen and (max-width: 801px) ) ( #banner-head ( margin-left:40px; ) ) @media screen и (max-width: 786px) ( #banner-head ( margin-left:20px; ) ) @media screen и (max-width: 765px) ) ( #banner-head ( margin-left:5px; ) ) @media screen и (max-width: 757px) ( .box-wrapper h1( font-size:32px !important; ) ) @media screen и (max- ширина: 750px) ( # banner-head ( display:none; ) ) @media screen и (max-width: 539px) ( .box-wrapper h1( font-size:28px !important; ) ) @media screen и (max -width: 480px) ( #banner-head ( visibility: hidden; display:none; ) ) @медиен екран и (max-width: 471px) ( .box-wrapper h1( font-size:24px !important; ) ) @ медиен екран и (максимална ширина: 407px) ( .box-wrapper h1( font-size:22px !important; ) ) @медиен екран и (максимална ширина: 375px) ( #banner img( width: 100% !important; ) ) @медиен екран и (максимална ширина: 370px) ( .box-wrapper (ширина: 380px !important; ) .box-wrapper h1( margin-left:-15px !important; ) ) @media screen и (max-width: 357px) ( .box-wrapper h1( font-size:20px !important; ) ) @media screen и (максимална ширина: 345px) ( .box-wrapper h1( margin-left:-25px !important; ) ) @медиен екран и (max-width: 338px) ( .box-wrapper( margin-top:-50px; ) .box-wrapper h1( margin-left:-35px !important; ) .sep( margin-left:-20px !important; ) )
Мета таг на Viewport
Ако не искате да създавате отделна мобилна версия или да пишете @media директиви в CSS стилове, тогава има друг начин, по който вашият сайт ще бъде повече или по-малко показван на мобилни телефони - с помощта на мета тага Viewport.
Неговата задача е да определя ширината на прозореца и да контролира мащабирането на страницата. Тоест, благодарение на този мета таг можем да деактивираме увеличението или да го зададем максимална стойност(ограничение), както и да зададете мащаба на разглежданата страница.
Този мета таг е зададен в тагове
и има следния вид:
По този начин имаме четири начина за оптимизиране на сайта за мобилни устройства:
- Използване на специални добавки за вашата CMS;
- Използване на поддомейн като m.site.ru с мобилната версия на сайта;
- Използване на медийни заявки в CSS;
- Използване на мета тага Viewport.
Всичко написано по-горе са познанията, които притежавам. Може да не знам нещо, така че не се колебайте да ме добавите и коригирате в коментарите.
Е, това е всичко, скъпи приятели!
Ще се видим скоро!
Предишна статияСледваща статия
Google декларира, че взема предвид оптимизацията на сайта за мобилни устройства при търсенето си. Ако сте добавили своя ресурс към уеб администратори на google, тогава може да бъде отбелязано „Сайтът не е оптимизиран за мобилни устройства“. Това означава, че трябва да се работи за подобряване на видимостта на ресурса в очите на Google и адаптиране на сайта за мобилни устройства. Инструкции по-долуприложим не само за Ресурси на WordPress, но и за всякакви други двигатели.
За да проверим дисплея на сайта за адаптивност, ще използваме Google услуга https://developers.google.com/speed/pagespeed/insights.
Посочете адреса на сайта и щракнете върху бутона „Анализиране“. Можете да видите, че за този пример резултатът за мобилно потребителско изживяване е 69 процента и в допълнение има съобщение „Страницата може да не е ще бъдат тестванилекота на гледане на мобилни устройства.
Нека си поставим за цел да оптимизираме сайта и да подобрим показателя поне до 90%, което се счита за добро в очите на Google.
Първо, обърнете внимание на съобщението „Персонализиране на зоната за гледане“. Най-добре е да започнете оттук, защото коригирането на този проблем автоматично ще повлияе на прогнозите на Google за размерите на шрифта и активните елементи.
Щракнете върху връзката „Как да коригирам“ и вижте следния текст относно необходимостта от указване на етикета на прозореца за изглед. 
Има връзка към „Персонализиране на прозореца за изглед“, която обяснява как да използвате този етикет. Няма да се занимаваме с него подробно. Нека просто използваме инструкциите на Google, които трябва да посочите инструкции в главния блок на сайта:
< meta name = viewport content = "width=device-width, initial-scale=1"> |
Добавяме етикет към сайта и просто за забавление проверяваме как се е променил индикаторът за удобство за мобилни потребители. 
Виждаме увеличение от 69 на 80%.
Ако имате активирано кеширане на вашия сайт, тогава преди проверка трябва или да деактивирате кеша, или да изтриете кешираните файлове, в противен случай проверката може да се извърши със стари файлове.
След това разглеждаме проблема в червената зона „Адаптиране на размера на съдържанието за прозореца за изглед“. Проблемът е, че Google проверява за ширина на устройството от 375 пиксела, а размерът на някои елементи на сайта надвишава тази цифра.
Факт е, че много шаблони, направени по-рано, съдържат абсолютни размери на елементите на сайта. Например файлът style.css може да съдържа инструкции като тази
#wrapper (ширина: 1000px;)
#обвивка ( ширина: 1000px; |
обвивка - в в такъв случайТова е основният контейнер на страницата на сайта. Такъв елемент, естествено, не се побира на екран с ширина 375 пиксела. Можете да намерите и други подобни инструкции за други елементи на сайта.
Ще коригираме този проблем, като използваме следния трик. Нека пренапишем горните стилове, както следва:
#wrapper (максимална ширина: 1000px; ширина: 100%;)
#обвивка ( максимална ширина: 1000px; ширина: 100%; |
Когато създавате страница, браузърът ще използва минимална стойностот две: максимална ширина и ширина. В този случай, ако ширината на екрана на потребителя е по-голяма от 1000px, тогава ще се използва стойност от 1000, а ако ширината на екрана на потребителя е по-малка от 1000px, ще се използва стойност, равна на ширината на екрана (100%).