Верстаємо сайт самі

295
  • Актуальність мобільного оптимізації сайту і стоять завдання
  • Вибір методу створення адаптивного дизайну
  • Адаптуємо шаблон для зручності мобільних користувачів
  • Використання адаптивних блоків від Google AdSense
  • Здрастуйте, шановні читачі блогу . Вже не перший раз в статтях я згадую про те, що в рунеті спостерігається істотне зростання мобільного трафіку. І це досить сильно починає впливати на життя вебмайстрів та SEO-шників.

    По-перше, багато власників сайтів починають замислюватися про способи заробітку на мобільному трафіку, якого стає в надлишку (навіть такий монстр як Advmaker вже пропонує свої варіанти монетизації відвідувачів, які заходять на ваш сайт з мобільних пристроїв).

    Але найголовніше — це те, що у нас йде «по-друге». Справа в тому, що сайт, не адаптований для приймання цього самого мобільного трафіку, може серйозно втратити позиції у видачі за рахунок погіршуються поведінкових характеристик. На мобільному телефоні дуже незручно користуватися горизонтальною прокруткою при читанні тексту або пошуку меню, тому з таких ресурсів швидко йдуть і не переходять, як правило, на інші сторінки.

    Верстаємо сайт самі

    Природно, що все це я знав вже досить давно, але постійно знаходилося щось більш важливе і першочергове, так і повної концепції адаптації сайту для перегляду на мобільних пристроях у мене ніяк не складалося в голові. Проте Гугл мене дуже жорстко підстьобнув вчора вранці, надіславши повідомлення про те, що з 21 квітня при визначенні пошукового рейтингу сайту, Google буде враховувати, зручно проглядати веб-сторінок на мобільних пристроях.

    Що називається, припливли. Довелося взяти голову в руки і за півдня розробити і втілити концепцію мобілізації сайту в життя. Звичайно ж, поспіх і не повне розуміння всіх варіантів вирішення даної проблеми вплинули на витонченість вирішення проблеми, але «що виросло, то виросло», а допілівать можна буде вже по ходу справи. Головна задача виконана — проходить текст на оптимізацію для мобільних пристроїв. А вже як це було зроблено читайте в продовженні даної публікації.

    Актуальність мобільного оптимізації сайту і стоять завдання

    Отже, спочатку опишу ситуацію, а потім вже ті варіанти її вирішення, які я вибрав. Як вже згадувалося вище, думати про оптимізацію сторінок сайту під мобільні пристрої я почав давно, але іноді для того, щоб зробити крок вперед, треба, щоб хтось дав доброго стусана під зад. Таким стусаном виявилося лист від Гугл Адсенс про те, що пора вже нарешті вирішити цю проблему.

    Власне, подібні листи від цього адресата приходили регулярно (там зазвичай наводили приклади, як добре стало тим сайтам, хто оптимізувався під мобільний трафік), але тут був прямо-таки ультиматум:

    Курс на мобильную оптимизациюВерстаємо сайт самі

    17 відсотків мобільного трафіку — це, на мій погляд, досить пристойно, але якщо чесно, то без згадки про можливу зміну алгоритму ранжирування Google і врахування при цьому фактору оптімізірованності сайту під мобільні пристрої я навряд чи б поворухнувся (завжди знайдеться більш важливе заняття, особливо коли в тебе немає в голові конкретного плану вирішення проблеми).

    До речі, 17 відсотків відвідувачів, які заходять на з мобільних пристроїв, підтверджують і дані Яндекс Метрики, і там видно, що показник відмов у таких користувачів значно вище, ніж у тих, хто заходив на сайт з комп’ютера або ноутбука (т. е. проблема особа):

    Процент мобильного трафика на Верстаємо сайт самі

    Наведена в листі посилання вели на сервіс Гугла, де можна було оцінити якість мобільного оптимізації вашого сайту за принципом: все нормально, або повний жах. Спочатку для був звичайно сумний вердикт червоного кольору (тривоги):

    Анализ оптимизации сайта под мобильный трафикВерстаємо сайт самі

    На скріншоті я використовував блог шановного Девакі для ілюстрації, бо зараз у мене дещо інша картина. У моєму випадку, як мені здається, вказувалося навіть три причини, що заважають перегляду сайту на мобільниках, але цей сервіс, по суті, лише виносить вердикт.

    А от щоб дізнатися деталі я раджу використовувати інший сервіс від Гугла під назвою PageSpeed Insights. Тут все буде більш-менш деталізовано і хоча б зрозуміло «в яку сторону копати»:

    PageSpeed InsightsВерстаємо сайт самі

    У них з’явився ще один подібний сервіс my Test Site, але він дається тільки оцінку, а ось рекомендацій щодо поліпшення, на жаль, немає. Зате можна підписатися на зміни:

    Test my SiteВерстаємо сайт самі

    У нашому випадку варто звертати увагу на оцінку «Зручність для користувачів» на вкладці «Для мобільних». Зрозуміло, що швидкість завантаження теж важлива, але особисто у мене все вперлося в налаштування сервера, які я сам змінити не в силах (бо нуб в адміністрації серверів), а домовитися з техпідтримкою Инфобокса все ніяк руки не доходять (знову ж таки, очевидно, потрібен стусан під зад, щоб почати ворушитися). Але це вже, напевно, тема для окремої статті.

    Стоїть переді мною завдання до вечора вчорашнього дня була вирішена і отримав 95 і 100 можливих балів за зручність для мобільних користувачів. Відповідно, і той сервіс Гугла, посилання на який була наведена в листі, каже, що теперича все в порядку (спасибі зарядці):

    Оценка удобства сайта для мобильных посетителейВерстаємо сайт самі

    Похвалився, тепер можна приступати до опису зроблених кроків і намічених стратегій. Отже, малося кілька проблем, які треба було вирішити:

  • Очевидно, що при зменшенні ширини екрану, з якого проглядається сайт, стає актуальним на певному рубежі переходити від двухколоночной верстці до одноколоночной. У моєму випадку це еквівалентно переміщенню правого блоку з меню (сайдбара) вниз (під основну частину сторінки).
  • При ще меншій ширині екрану стає очевидним, що і ширина області з основним вмістом повинна буде зменшуватися для того, щоб текст і картинки можна було переглядати без використання жахливо незручною горизонтальної прокрутки.
  • В області вмісту у мене також розміщуються оголошення від Гугл Адсенс, а значить потрібно буде міняти їх код вставки, тому що при використанні адаптивного дизайну (а саме його ми і намагаємося реалізувати) є тільки один допустимий варіант рекламних блоків — адаптивний (він з’явився деякий час тому, але у мене спочатку виникли проблеми з його використанням, які довелося вирішувати, але про це трохи нижче).

    Советы от Гугл АдсенсаВерстаємо сайт самі

  • Напередодні мені як раз попалася на очі публікація, яку я помістив в закладки і яка стала відправною точною для подальшої роботи. Проте, раджу проводити експерименти не на «живому» сайті, а не його копії, завантажений в локальний сервер типу OpenServer. Дуже зручно і для вас, і для відвідувачів, які будуть позбавлені від спостереження ваших проміжних результатів роботи (часто вельми непривабливих).

    Вибір методу створення адаптивного дизайну

    Отже, скачуєте файли движка по ФТП (я все ще юзаю Файлзилу, яку намагаюся використовувати безпечно, зберігаючи паролі від сайтів в Кипассе), робите резервну копію бази даних і імпортуєте її в Опенсервер через вбудованих в нього phpMyAdmin. Отримуєте локальну копію сайту, з якої і будемо надалі працювати — тут можна сміливо експериментувати, не боячись пошкодити працює ресурсу.

    У наведеній трохи вище публікації пропонувалося два варіант реалізації адаптивного дизайну.

  • Можна створити копії файлу стилів (у мене WordPress, тому цей файл називається style.css і живе він в папці з вашою темою оформлення — «/wp-content/themes/папка») і дати їм інші імена. Якщо у вас теж WordPress і ви хочете зрозуміти, як працюють у ньому теми, то раджу ознайомитися з наведеною статтею. Саме цей спосіб я випробував першим і створив копії з назвою small-device.css і small-device-min.css.

    Що саме я в них міняв по відношенню до основного файлу style.css ми ще поговоримо, а от для їх підключення, в області між тегами Head (в WordPress ця область звичайно формується файлом-шаблоном header.php) довелося додати три рядки коду після підключення основного файлу CSS стилів :

    Цифрами в пікселях позначені точки зламу. Якщо ви це вікно (з відкритим у ньому сайтом https://) почнете зменшувати по ширині (у верхньому правому куті браузера є кнопочка з двома накладеними один на одного квадратами — сказав «капітан очевидність»), то саме при проходженні ширини 1025px і 760px будуть відбуватися зміни в дизайні.

    Спочатку відвалиться сайдбар (впаде в самий низ) і трохи поміняється верхнє меню (хочу його в майбутньому зробити для мобільних девайсів випадаючим, але поки ще руки, як зазвичай, не дійшли).

    А на другій точці зламу ви помітите, що при подальшому зменшенні ширини області перегляду текст, картинки і відеоролики починають підлаштовуватися під новий розмір (адаптуватися до нього), і внизу сайдбар теж зазнає змін. Власне, я навіть шрифт збільшив для екранів по ширині менших 760px (так, на всякий випадок).

  • Однак перший варіант, на мій погляд, має один істотний недолік. При завантаженні сторінки завантажуються всі три варіанти файлу стилів (а не тільки той, який буде використовуватися при даній ширині області перегляду). Так як вони важать всі приблизно однаково, бо містять майже одне і те ж кількість властивостей CSS, то це істотно зменшує швидкість завантаження веб-сторінки.

    Тому я вирішив використовувати другий варіант створення адаптивного дизайну для сайту для оптимізації його під мобільні пристрої. Полягає він у використанні директиви @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), їх розмір адаптується до розмірів області перегляду, якщо вона стала для них затісною.

    Адаптация размера изображений через CSSВерстаємо сайт самі

    Можете самі звузити вікно перегляду браузера (з цією сторінкою) і спостерігати цей процес на власні очі. Досить зручно виходить, на мій погляд. Ну, а в кінці наведено хак для інтернет експлорера, який всього цього може не зрозуміти.

    Так, ще я зняв обмеження з ширини сайдабара (він зараз в самому низу виводиться, якщо пам’ятаєте) і збільшив в ньому шрифт на пару пунктів, а також і шрифт в основній частині сайту. У всякому разі на моєму мобільнику цей варіант виглядає більш презентабельно (скріни робив з телефону на Адроіде).

     на мобильном телефонеВерстаємо сайт самі

    Отзывчивый дизайнВерстаємо сайт самі

    Залишилася проблема з верхнім меню, яке ламається не дуже красиво і займає багато місця на маленькому екрані, але у планах є мислячи зробити його для мобільної версії сайту випадаючим (якщо зроблю, то відпишуся про це). Так, ще лічильники в самому низу у мене вишикувалися будиночком (тільки зараз звернув увагу), але поправити це складно (головне не забути).

    Ось, будемо вважати, що ви на локальному сервері поколдуете, поэксперементируете і отримаєте в результаті легкотравний варіант адаптації вашого сайту під мобільні пристрої відвідувачів. Залишиться тільки це справа перенести на працюючий сайт. Естетственно, що копіювати всі файли (а вже тим більше базу даних) ви не будете, бо досить буде додати (скопіювати) кілька рядків у файлі header.php і трохи більше рядків перенести в основний файл стилів (ті, що всередині директив @media).

    Після цього вже можна буде перевіряти внесені зміни (може знадобитися скинути кеш в движку або в браузері) на екрані комп’ютера при зменшенні ширини вікна браузера і на ваших мобільних гаджетах (телефоні, планшеті). Якщо що-то «вилізе», то можна буде це справа оперативно підправити.

    Головне, щоб після внесених змін ваш сайт пройшов тест Гугла на придатність для перегляду на мобільних пристроях (кеш скинути не забудьте перед цим). Ну, а деталі вже допилите з часом.

    Використання на сайті коду адаптивних блоків від Google AdSense при адаптивному (чуйну) дизайні

    Тепер давайте поговоримо через Гугл Адсенс. Якщо ви не працюєте з цією системою контекстної реклами, то й далі не читати вам буде потрібно. Якщо ж працюєте і використовуєте на сайті код рекламних блоків фіксованих розмірів, то доведеться його поміняти на код адаптивних блоків (Гугл на це, як я зрозумів, наполягає, щоб на пристроях з різною шириною екрану завантажувались оголошення підходящого розміру.

    По суті, зробити це зовсім нескладно, але особисто у мене виникло затики, який зажадав напруги розуму для його дозволу. Отже, інтерфейс Google AdSense змінюється із завидною регулярністю (не сказати, що стає гірше, швидше краще, але коли довго не заходиш, то злегка подвисаешь). З-за цього наведену за посиланням статтю мені вже кілька разів доводилося переписувати, але вона знову застаріла, а значить скоро з’явиться вже четверта її інкарнація (проте, це стомлює).

    Гаразд, не суть. Для створення нового рекламного блоку потрібно буде в інтерфейсі Адсенс клікнути по шестірні в правому верхньому кутку і вибрати пункт «Налаштування». На сторінці, що відкрилася нам потрібен верхній пункт меню «Мої оголошення», де для створення нового блоку буде досить натиснути на однойменну кнопку:

    Добавление блока в Google AdSenseВерстаємо сайт самі

    На сторінці адаптивний блок якраз і буде запропонований вам за замовчуванням. Тут слід вибрати тип оголошень, які будуть показуватися (в більшості випадків вигідніше показувати всі), а так вкажіть для цього блоку той же спеціальний канал, що у вас був заданий для старого блоку (який ви буде замінювати). Справа в тому, що якісь рекламодавці можуть зорієнтувати свою рекламу на ваш сайт саме з цього клієнтського каналу, і щоб їх не втратити потрібно для нового рекламного блоку вибрати той же самий канал.

    Адаптивный блок в Google AdSenseВерстаємо сайт самі

    Потім тиснете на кнопку «Зберегти і отримати код». Можна буде спробувати його прямо вставити на місце старого коли і подивитися на результат.

    У мене такий метод не спрацював (фігня якась вийшла), тому я поліз в хелп Гугл Адсенс шукати варіант рішення і знайшов-таки його на цій сторінці.

    Точные размеры для адаптивного блока в Гугл АдсенсеВерстаємо сайт самі

    Саме такий варіант коду я використовував (на різних пристроях будуть показувати блоки відповідних розмірів). Начебто все стало виводитися як треба, але не зовсім. По-перше, я помітив, що після зміни коду перестала бути змінені статистика показів рекламних оголошень на головній сторінці Адсенс. При перегляді статистики саме за нового блоку я помітив, що покази практично не йдуть.

    Верстаємо сайт самі

    По-друге, я вирішив зробити вигляд оголошень (колір, шрифт) в новому адаптивному блоці такими ж, якими вони були в старих оголошеннях. Після внесення змін незрозумілостей стало ще більше. Оголошення відображаються в статті не змінили дизайн. Став порівнювати код початкових сторінок в браузері можна це зробити, вибравши відповідний пункт з меню правої кнопки миші) і виявив, що якимось чином після деяких рядків коду додався тег переносу рядка BR.

    Код адсенс у мене вставлявся через файл functions.php, тому я там прибрав всі пробіли, і переноси рядків в проблемних місцях, після чого оголошення миттєво змінили дизайн і почала відраховувати статистика. Ось така от заковика можлива.

    До цього у мене стояв синхронний код Адсенс (ще в 2012 ставив) і по ідеї він міг знижувати швидкість завантаження сайту. Сучасний код весь асинхронний, що повністю знімає ймовірність того, що він може викликати затримку в завантаженні сторінки. Думаю, що це є гуд, але, як кажуть, будемо подивитися.

    P. S. Тут невеликий звіт по тому, що доробив вже після написання статті.

  • Прибрав у версії сайту для екранів вже 760 px пару останніх пунктів з верхнього меню, щоб воно в три рядки не громоздилось. Для цього у файлі header.php я додав в ці пункти (вони у мене не виводяться функцією, а звичайним Html списком оформленим вручну) клас skrit і прописав для нього в блоці з @media screen and (max-width: 760px) правило:
    .skrit{display:none;}
  • Форма для додавання коментарів не відгукувалася на зміну ширини області перегляду, тому замінив для нього width заданий в пікселях на задане значення у відсотках (90% поставив).
  • Спочатку у версії для мобільних телефонів я прибрав рядок пошуку взагалі з допомогою display:none, але подумавши все ж вирішив її відображати під логотипом і описом. Довелося в блоці з @media screen and (max-width: 760px) прибрати display:none для контейнера, в якому живе рядок пошуку і дописати кілька рядків коду для його позиціонування і адаптації за шириною (width:auto;max-width:340px;).
  • Вирівняв таки в мобільній версії (після останньої точки зламу) піктограми для лічильників відвідування (розташовані в самому низу). Для цього додав @media screen and (max-width: 760px):
    .wdf img {display:inline-block !important;}
  • Спочатку, щоб не возитися, я приховав верхню частину сайдбара (з формою підписки і кнопками соціальних мереж) для екранів менше 760px з допомогою display:none. Зараз вирішив все це справа адаптувати. Довелося для цього додати кілька рядків коду @media screen and (max-width: 760px) прибрати display:none:
    .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;}

    Вийшло приблизно так:

    Верстаємо сайт самі

  • Удачі вам! До зустрічей на сторінках блогу