Здрастуйте, шановні читачі блогу . Вже не перший раз в статтях я згадую про те, що в рунеті спостерігається істотне зростання мобільного трафіку. І це досить сильно починає впливати на життя вебмайстрів та SEO-шників.
По-перше, багато власників сайтів починають замислюватися про способи заробітку на мобільному трафіку, якого стає в надлишку (навіть такий монстр як Advmaker вже пропонує свої варіанти монетизації відвідувачів, які заходять на ваш сайт з мобільних пристроїв).
Але найголовніше — це те, що у нас йде «по-друге». Справа в тому, що сайт, не адаптований для приймання цього самого мобільного трафіку, може серйозно втратити позиції у видачі за рахунок погіршуються поведінкових характеристик. На мобільному телефоні дуже незручно користуватися горизонтальною прокруткою при читанні тексту або пошуку меню, тому з таких ресурсів швидко йдуть і не переходять, як правило, на інші сторінки.
Природно, що все це я знав вже досить давно, але постійно знаходилося щось більш важливе і першочергове, так і повної концепції адаптації сайту для перегляду на мобільних пристроях у мене ніяк не складалося в голові. Проте Гугл мене дуже жорстко підстьобнув вчора вранці, надіславши повідомлення про те, що з 21 квітня при визначенні пошукового рейтингу сайту, Google буде враховувати, зручно проглядати веб-сторінок на мобільних пристроях.
Що називається, припливли. Довелося взяти голову в руки і за півдня розробити і втілити концепцію мобілізації сайту в життя. Звичайно ж, поспіх і не повне розуміння всіх варіантів вирішення даної проблеми вплинули на витонченість вирішення проблеми, але «що виросло, то виросло», а допілівать можна буде вже по ходу справи. Головна задача виконана — проходить текст на оптимізацію для мобільних пристроїв. А вже як це було зроблено читайте в продовженні даної публікації.
Актуальність мобільного оптимізації сайту і стоять завдання
Отже, спочатку опишу ситуацію, а потім вже ті варіанти її вирішення, які я вибрав. Як вже згадувалося вище, думати про оптимізацію сторінок сайту під мобільні пристрої я почав давно, але іноді для того, щоб зробити крок вперед, треба, щоб хтось дав доброго стусана під зад. Таким стусаном виявилося лист від Гугл Адсенс про те, що пора вже нарешті вирішити цю проблему.
Власне, подібні листи від цього адресата приходили регулярно (там зазвичай наводили приклади, як добре стало тим сайтам, хто оптимізувався під мобільний трафік), але тут був прямо-таки ультиматум:
17 відсотків мобільного трафіку — це, на мій погляд, досить пристойно, але якщо чесно, то без згадки про можливу зміну алгоритму ранжирування Google і врахування при цьому фактору оптімізірованності сайту під мобільні пристрої я навряд чи б поворухнувся (завжди знайдеться більш важливе заняття, особливо коли в тебе немає в голові конкретного плану вирішення проблеми).
До речі, 17 відсотків відвідувачів, які заходять на з мобільних пристроїв, підтверджують і дані Яндекс Метрики, і там видно, що показник відмов у таких користувачів значно вище, ніж у тих, хто заходив на сайт з комп’ютера або ноутбука (т. е. проблема особа):
Наведена в листі посилання вели на сервіс Гугла, де можна було оцінити якість мобільного оптимізації вашого сайту за принципом: все нормально, або повний жах. Спочатку для був звичайно сумний вердикт червоного кольору (тривоги):
На скріншоті я використовував блог шановного Девакі для ілюстрації, бо зараз у мене дещо інша картина. У моєму випадку, як мені здається, вказувалося навіть три причини, що заважають перегляду сайту на мобільниках, але цей сервіс, по суті, лише виносить вердикт.
А от щоб дізнатися деталі я раджу використовувати інший сервіс від Гугла під назвою PageSpeed Insights. Тут все буде більш-менш деталізовано і хоча б зрозуміло «в яку сторону копати»:
У них з’явився ще один подібний сервіс my Test Site, але він дається тільки оцінку, а ось рекомендацій щодо поліпшення, на жаль, немає. Зате можна підписатися на зміни:
У нашому випадку варто звертати увагу на оцінку «Зручність для користувачів» на вкладці «Для мобільних». Зрозуміло, що швидкість завантаження теж важлива, але особисто у мене все вперлося в налаштування сервера, які я сам змінити не в силах (бо нуб в адміністрації серверів), а домовитися з техпідтримкою Инфобокса все ніяк руки не доходять (знову ж таки, очевидно, потрібен стусан під зад, щоб почати ворушитися). Але це вже, напевно, тема для окремої статті.
Стоїть переді мною завдання до вечора вчорашнього дня була вирішена і отримав 95 і 100 можливих балів за зручність для мобільних користувачів. Відповідно, і той сервіс Гугла, посилання на який була наведена в листі, каже, що теперича все в порядку (спасибі зарядці):
Похвалився, тепер можна приступати до опису зроблених кроків і намічених стратегій. Отже, малося кілька проблем, які треба було вирішити:
Напередодні мені як раз попалася на очі публікація, яку я помістив в закладки і яка стала відправною точною для подальшої роботи. Проте, раджу проводити експерименти не на «живому» сайті, а не його копії, завантажений в локальний сервер типу OpenServer. Дуже зручно і для вас, і для відвідувачів, які будуть позбавлені від спостереження ваших проміжних результатів роботи (часто вельми непривабливих).
Вибір методу створення адаптивного дизайну
Отже, скачуєте файли движка по ФТП (я все ще юзаю Файлзилу, яку намагаюся використовувати безпечно, зберігаючи паролі від сайтів в Кипассе), робите резервну копію бази даних і імпортуєте її в Опенсервер через вбудованих в нього phpMyAdmin. Отримуєте локальну копію сайту, з якої і будемо надалі працювати — тут можна сміливо експериментувати, не боячись пошкодити працює ресурсу.
У наведеній трохи вище публікації пропонувалося два варіант реалізації адаптивного дизайну.
Що саме я в них міняв по відношенню до основного файлу style.css ми ще поговоримо, а от для їх підключення, в області між тегами Head (в WordPress ця область звичайно формується файлом-шаблоном header.php) довелося додати три рядки коду після підключення основного файлу CSS стилів :
Цифрами в пікселях позначені точки зламу. Якщо ви це вікно (з відкритим у ньому сайтом https://) почнете зменшувати по ширині (у верхньому правому куті браузера є кнопочка з двома накладеними один на одного квадратами — сказав «капітан очевидність»), то саме при проходженні ширини 1025px і 760px будуть відбуватися зміни в дизайні.
Спочатку відвалиться сайдбар (впаде в самий низ) і трохи поміняється верхнє меню (хочу його в майбутньому зробити для мобільних девайсів випадаючим, але поки ще руки, як зазвичай, не дійшли).
А на другій точці зламу ви помітите, що при подальшому зменшенні ширини області перегляду текст, картинки і відеоролики починають підлаштовуватися під новий розмір (адаптуватися до нього), і внизу сайдбар теж зазнає змін. Власне, я навіть шрифт збільшив для екранів по ширині менших 760px (так, на всякий випадок).
Тому я вирішив використовувати другий варіант створення адаптивного дизайну для сайту для оптимізації його під мобільні пристрої. Полягає він у використанні директиви @media при верстці. В цьому випадку не потрібно буде створювати три копії файлу стилів, а достатньо буде внизу основного файлу дописати щось на зразок цього:
@media screen and (max-width: 1025px) {
CSS властивості, які змінять дизайн при ширині екрану менше 1025px
}
@media screen and (max-width: 760px) {
CSS властивості, які змінять дизайн при ширині екрану менше 760px
}
Ну, а в обмежені фігурними скобочками області достатньо буде прописати ті CSS властивості, які зазнають змін для адаптації шаблону вашого сайту під мобільні пристрої.
Правда, я так до кінця і не зрозумів нюанси підключення браузером цих директив, бо просто так вони не працювали. Довелося в файл header.php додати такі ось рядки (підключення одного і того ж файлу стилів, але при різних дозволах екрану):
Саме в такому вигляді все це і працює на даному блозі в даний момент часу.
Загалом я вибрав другий варіант, але не відразу, тому довелося з допомогою плагіна Compare в Notepad++ порівнювати вміст файлів small-device-min.css і small-device.css з оригінальним style.css, щоб виявити ті рядки, куди я вносив зміни. Потім вже ці стоки я вставив всередині фігурних дужок показаних вище директив @media (наприкінці основного файлу стилів style.css). Але це вже не суть важливо.
Адаптуємо шаблон для зручності мобільних користувачів
Отже, ви викачали свій сайт з інтернету, запхали його в локальний сервер, ознайомилися з принципами, які ми будемо використовувати. Тепер пора починати експериментувати. Зі зрозумілих причин я не можу вам дати однозначних порад (бо всі шаблони різні, навіть в одного движка), що саме потрібно змінювати у вашому випадку і які точки зламу вибирати.
Для простоти, що ви можете взагалі вибрати тільки одну точку слова, наприклад, дорівнює стандартній ширині основної частини (центральної, де статті виводяться), а до цього нічого не міняти. Але мені мій варіант здався краще, хоча особливо над ним подумати, у мене часу не було.
Що побачать користувачі з екранами по ширині меншими першої точки зламу
Дивіться. Для реалізації багатоколонкового дизайну в сучасній верстці використовуються плаваючі блоки, які задаються CSS правилом Float. Наприклад, сайдбар у мене плаває правіше основною області завдяки:
#sidebar{float:right;}
Тому, щоб зламати двухколоночный макет і зробити з нього одноколонковий, мені потрібно буде замінити значення для правила float в потрібних місцях. Я правда тикав у все підряд, бо структуру свого шаблону трохи призабув і тому міг зачепити щось не обов’язкове, але така специфіка «складання дизайну на коліні» без наявності відповідного досвіду. Але так як експеримент йшов на локальному сервері, то вже через годину-півтора я намацав усі потрібні моменти (методом проб і помилок), результат чого ви зараз і можете спостерігати.
Відповідно, для початку потрібно було відучити шаблон верстатися у дві колонки, що вимагало прописати всередині директиви @media (з першою і другою точкою зламу):
#sidebar{float:none;}
Якщо не спрацює, то підвищіть пріоритет цього CSS властивості з допомогою додавання !important:
#sidebar{float:none !important;}
Можете самі викачати мій файл стилів і подивитися що до чого. Власне, CSS правила для адаптації шаблону після першої точки зламу виглядають так (не забудьте закрити фігурну дужку від @media після останньої рядки цього додаткового коду):
@media screen and (max-width: 1025px) {
#page{min-width:750px;background:#e5eff4 url(images/containerbg.png) repeat-x;background-position:0 145px;}
#header-in{width:750px;margin:0 auto;}
#content-wrap{width:760px;margin:0 auto;padding-bottom:20px;min-height:500px;height:100%;overflow:hidden;}
#content{float:none;width:740px;overflow:hidden;}
#sidebar{float:none;width:370px;background-color:#ffffff;;padding:0;overflow:hidden;height:100%;margin: 30px 0 0 200px;}
#footer-in{width:740px;margin:0 auto;height:100%;}
.h_left{float:left;width:330px;}
.h_right{float:left;margin:21px 0 10px 70px;}
.p_left{float:left; margin:12px 0 0 -30px;}#navi-in{width:740px;margin:0 auto;}
#navi-in{width:740px;margin:0 auto;}
#nav .page_item a{color:#fff;display:block;text-decoration:none;padding:7px 5px 6px 5px;font:bold 13px «Trebuchet MS» Verdana, Arial;text-transform:uppercase;border-right: 1px solid #01638D;}
}
Крім «опускання» сайдбара я обмежив ширину шаблону новим значенням з допомогою min-width:750px; і width:750px. CSS властивість Width задає ширину того елемента, для якого воно прописується. Також я підкоригував розмір і розташування елементів в шапці сайту, щоб вони більш-менш пристойно виглядали після проходження першої точки зламу в 760px.
Ну, а в останньому рядку я зменшив внутрішні відступ (padding) для пунктів верхнього меню, бо вони не вміщалися в одну лінію. Корявенько, але головне, що працює (потім завжди можна буде знайти час і «всі необроблені деталі обробити напилком»).
Адаптація дизайну під екрани мобільних пристроїв менше другої точки зламу
Тепер можна переходити до оформлення зовнішнього вигляду сайту, який побачать користувачі мобільних пристроїв, екран яких вже 760px. Простим згортанням колонок тут не обійдешся, бо потрібно, щоб контент сторінки не вилазив за межі області перегляду, якою б вузькою вона не була.
Це завдання з успіхом вирішується заміною в потрібних місцях CSS властивості width:***px; на width:auto. Деякі області з шапки і сайдбара я взагалі сховав за допомогою display:none, бо поки не було швидкого рішення для їх адаптації. Код при цьому виглядає жахливо (копіював вже існуючі рядки і вносив зміни без видалення з них зайвого, тобто того, що не вимагає зміни), тобто просто він ще на оптимізовано — лише б працювало, а потім зайве видалю:
@media screen and (max-width: 760px) {
.rasporverh {margin:0 0 0 95px;display:none;}
#page{width:auto;min-width:150px;}
#header{overflow:hidden;height:146px;margin-bottom:10px;background:url(https:///wp-content/themes/Organic/images/spriteme2.png) repeat-x;background-position:0px -61px;clear:both ;}
#header-in{width:auto;margin:0 auto ;}
#content-wrap{width:auto;margin:0 auto;padding-bottom:20px;min-height:500px;height:100%;overflow:hidden;}
#content{float:none;width:auto;overflow:hidden;}
#sidebar{float:none;width:347;background-color:#ffffff;;padding:0;overflow:hidden;height:100%;margin: 30px auto;width: auto;}
#sidebar_l{float:none;width:auto;padding-left:10px;margin-top:10px;}
#sidebar_r{float:none;width:auto;padding-right:10px;margin-top:10px;}
#footer-in{width:auto;margin:0 auto;height:100%;}
.h_left{float:none;max-width:330px;width:auto;}
.h_right{float:left;margin:21px 0 10px 70px;display:none;}
.p_left{float:left; margin:12px 0 0 -30px;display:none;}
#navi-in{width:auto;margin:0 auto;}
#nav{padding:0px;height:31px;list-style:none;margin-left:2px;float:none;}
#nav .page_item a{color:#fff;display:block;text-decoration:none;padding:7px 5px 6px 5px;font:bold 13px «Trebuchet MS» Verdana, Arial;text-transform:uppercase;border-right: 1px solid #01638D;}
.sidebar_top{background:url(https:///wp-content/themes/Organic/images/spriteme1.png) no-repeat left top;background-position:-10px -84px;height:120px;padding:10px 10px;margin-bottom:0px;display:none;}
.sidebar_bottom{background:url(https:///wp-content/themes/Organic/images/spriteme1.png) no-repeat left top;height:11px;clear:both;background-position:-10px -351px;display:none;}
.tabermain{width: auto;margin:0 auto;}
#sidebar ul ul li li a{color:#00648E;text-decoration:none;border-bottom:none;font: 17px «Courier new», «Helvetica», sans-serif;}
.reklama123{width:auto;margin:15px 0 10px 5px;}
.reklama1234{width:auto;margin-top:15px;}
img {display: block;max-width: 100%;height: auto;}
iframe {max-width: 100%;height: auto ;}
@media \0screen {
img {
width: auto; /* для ie 8 */
}
}
}
Зверніть увагу на останні рядки:
img {display: block;max-width: 100%;height: auto;}
iframe {max-width: 100%;height: auto ;}
Вони служать для адаптації зображень і відеороликів наявних на сайті під розмір мобільного пристрою користувача. При ширині екрану менше, ніж ширина картинки або ролика (вставленого за допомогою iframe), їх розмір адаптується до розмірів області перегляду, якщо вона стала для них затісною.
Можете самі звузити вікно перегляду браузера (з цією сторінкою) і спостерігати цей процес на власні очі. Досить зручно виходить, на мій погляд. Ну, а в кінці наведено хак для інтернет експлорера, який всього цього може не зрозуміти.
Так, ще я зняв обмеження з ширини сайдабара (він зараз в самому низу виводиться, якщо пам’ятаєте) і збільшив в ньому шрифт на пару пунктів, а також і шрифт в основній частині сайту. У всякому разі на моєму мобільнику цей варіант виглядає більш презентабельно (скріни робив з телефону на Адроіде).
Залишилася проблема з верхнім меню, яке ламається не дуже красиво і займає багато місця на маленькому екрані, але у планах є мислячи зробити його для мобільної версії сайту випадаючим (якщо зроблю, то відпишуся про це). Так, ще лічильники в самому низу у мене вишикувалися будиночком (тільки зараз звернув увагу), але поправити це складно (головне не забути).
Ось, будемо вважати, що ви на локальному сервері поколдуете, поэксперементируете і отримаєте в результаті легкотравний варіант адаптації вашого сайту під мобільні пристрої відвідувачів. Залишиться тільки це справа перенести на працюючий сайт. Естетственно, що копіювати всі файли (а вже тим більше базу даних) ви не будете, бо досить буде додати (скопіювати) кілька рядків у файлі header.php і трохи більше рядків перенести в основний файл стилів (ті, що всередині директив @media).
Після цього вже можна буде перевіряти внесені зміни (може знадобитися скинути кеш в движку або в браузері) на екрані комп’ютера при зменшенні ширини вікна браузера і на ваших мобільних гаджетах (телефоні, планшеті). Якщо що-то «вилізе», то можна буде це справа оперативно підправити.
Головне, щоб після внесених змін ваш сайт пройшов тест Гугла на придатність для перегляду на мобільних пристроях (кеш скинути не забудьте перед цим). Ну, а деталі вже допилите з часом.
Використання на сайті коду адаптивних блоків від Google AdSense при адаптивному (чуйну) дизайні
Тепер давайте поговоримо через Гугл Адсенс. Якщо ви не працюєте з цією системою контекстної реклами, то й далі не читати вам буде потрібно. Якщо ж працюєте і використовуєте на сайті код рекламних блоків фіксованих розмірів, то доведеться його поміняти на код адаптивних блоків (Гугл на це, як я зрозумів, наполягає, щоб на пристроях з різною шириною екрану завантажувались оголошення підходящого розміру.
По суті, зробити це зовсім нескладно, але особисто у мене виникло затики, який зажадав напруги розуму для його дозволу. Отже, інтерфейс Google AdSense змінюється із завидною регулярністю (не сказати, що стає гірше, швидше краще, але коли довго не заходиш, то злегка подвисаешь). З-за цього наведену за посиланням статтю мені вже кілька разів доводилося переписувати, але вона знову застаріла, а значить скоро з’явиться вже четверта її інкарнація (проте, це стомлює).
Гаразд, не суть. Для створення нового рекламного блоку потрібно буде в інтерфейсі Адсенс клікнути по шестірні в правому верхньому кутку і вибрати пункт «Налаштування». На сторінці, що відкрилася нам потрібен верхній пункт меню «Мої оголошення», де для створення нового блоку буде досить натиснути на однойменну кнопку:
На сторінці адаптивний блок якраз і буде запропонований вам за замовчуванням. Тут слід вибрати тип оголошень, які будуть показуватися (в більшості випадків вигідніше показувати всі), а так вкажіть для цього блоку той же спеціальний канал, що у вас був заданий для старого блоку (який ви буде замінювати). Справа в тому, що якісь рекламодавці можуть зорієнтувати свою рекламу на ваш сайт саме з цього клієнтського каналу, і щоб їх не втратити потрібно для нового рекламного блоку вибрати той же самий канал.
Потім тиснете на кнопку «Зберегти і отримати код». Можна буде спробувати його прямо вставити на місце старого коли і подивитися на результат.
У мене такий метод не спрацював (фігня якась вийшла), тому я поліз в хелп Гугл Адсенс шукати варіант рішення і знайшов-таки його на цій сторінці.
Саме такий варіант коду я використовував (на різних пристроях будуть показувати блоки відповідних розмірів). Начебто все стало виводитися як треба, але не зовсім. По-перше, я помітив, що після зміни коду перестала бути змінені статистика показів рекламних оголошень на головній сторінці Адсенс. При перегляді статистики саме за нового блоку я помітив, що покази практично не йдуть.
По-друге, я вирішив зробити вигляд оголошень (колір, шрифт) в новому адаптивному блоці такими ж, якими вони були в старих оголошеннях. Після внесення змін незрозумілостей стало ще більше. Оголошення відображаються в статті не змінили дизайн. Став порівнювати код початкових сторінок в браузері можна це зробити, вибравши відповідний пункт з меню правої кнопки миші) і виявив, що якимось чином після деяких рядків коду додався тег переносу рядка BR.
Код адсенс у мене вставлявся через файл functions.php, тому я там прибрав всі пробіли, і переноси рядків в проблемних місцях, після чого оголошення миттєво змінили дизайн і почала відраховувати статистика. Ось така от заковика можлива.
До цього у мене стояв синхронний код Адсенс (ще в 2012 ставив) і по ідеї він міг знижувати швидкість завантаження сайту. Сучасний код весь асинхронний, що повністю знімає ймовірність того, що він може викликати затримку в завантаженні сторінки. Думаю, що це є гуд, але, як кажуть, будемо подивитися.
P. S. Тут невеликий звіт по тому, що доробив вже після написання статті.
.skrit{display:none;}
.wdf img {display:inline-block !important;}
.sidebar_top{background:none;width: auto;}
.subscribetextbg {width: auto !important; }
.subscribe_textieldpost {display: block;width: auto !important;max-width:330px;margin: 20px auto;padding:5px 25px 5px 25px;font: 15px «Trebuchet MS», «Verdana», «Arial»; }
.naity {display: block;width: auto !important;max-width:330px;margin: 15px auto;padding:5px 20px 5px 20px; font: 15px «Trebuchet MS», «Verdana», «Arial»;}
img.ghdjk {float:none;margin: 10px auto;}
#soci {display: block;width: auto !important;max-width:330px;margin: 15px auto;}
Вийшло приблизно так:
Удачі вам! До зустрічей на сторінках блогу
