Рекомендується до прочитання верстальникам, а так само їх керівникам. Не є керівництвом до якого-небудь дії.

Сьогодні 13 лютого 17-ого. Історія почалася 3 дні тому. Власне проблема з'явилася наступна. Є каруселька (це тип слайдера), верстальщику компанії «R&K» прийшов запит, про те що каруселька не адаптивна, тобто не стискається як годиться, при стисненні вікна браузера по ширині. Баг виявлено в Firefox v50.1.0 32-bit, Win7 32-bit. При цьому, на наступний день, з'явився дивний телефонний дзвінок від замовника, з повідомленням про те, що все працює, і подяку за швидке реагування. Т. к. верстку взагалі ніхто не дивився, то люди почухали в подиві ріпи і розійшлися. Через два дні знову подзвонив замовник, і вже люто/нестямно/дико/люто почав кричати, що верстка знову не адаптивна, і не стискується у вікно браузера при стисненні браузера. Ось тут-то люди задумалися і почали крутити верстку.

Читати далі →

«Великий зрівнювач» або спосіб вирішити проблему вирівнювання по висоті

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

Ця стаття стане у пригоді тим, хто часто стикається з проблемою вирівнювання елементів по висоті в різних ситуаціях.

Рис. 1. Порядок відображення групи товарів.


Читати далі →

«Великий зрівнювач» або спосіб вирішити проблему вирівнювання по висоті

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

Ця стаття стане у пригоді тим, хто часто стикається з проблемою вирівнювання елементів по висоті в різних ситуаціях.

Рис. 1. Порядок відображення групи товарів.



Читати далі →

Робити мобільну версію? 5 поширених проблем, які вирішує адаптивна верстка. Досвід Яндекса

з 2007 року дуже швидко зростає кількість використовуваних у світі смартфонів. У числі інших причин різкого стрибка популярності кілька років тому покупців привернула здатність цих пристроїв відображати сайти так, як вони виглядали на екранах комп'ютерів. Але, купивши смартфон і почавши ним користуватися, люди відзначали, що для читання окремих блоків тексту на відносно невеликому екрані доводилося постійно масштабувати сторінку. Плюс до того, багато елементів управління сайтів виявилося незручно використовувати. Це відбувалося тому, що сторінки не були розраховані на управління за допомогою дотиків до екрану і часто вимагали комп'ютерну мишу або інший маніпулятор. Для вирішення цих проблем почали з'являтися окремі версії сайтів, призначені виключно для пристроїв з маленьким екраном. При цьому користувачам виявилося не потрібно знати адреси мобільних сайтів. Замість цього сервер зчитує інформацію про пристрої з зверненого до нього запиту і визначає, яку версію краще віддати відвідувачу.
Сайт smashingmagazine.com на різних розмірах екранів
Незабаром багатьом стало зрозуміло, що розробка окремої мобільної версії — це довго і дорого підтримки. Крім того, це суперечить ідеології веба, який передбачає, що розмічений документ універсальний і може бути прочитаний практично на будь-якому пристрої виводу. Для вирішення виниклого протиріччя в CSS був доданий стандарт Media Queries. З'явилися нові можливості щодо визначення особливостей пристрою, зокрема з'явилася можливість використовувати різне оформлення сторінки для довільних розмірів вікна.
Читати далі →

На замітку досвідченому верстальщику: Кращий спосіб зробити липкий футер

image

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

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

Читати далі →

По-справжньому адаптивні листи. Частина друга. Фреймворк


Картинка для привернення уваги чесно сперта у invisionapp (до речі, у них божественна розсилка)

З моменту публікації останнього посту минуло ні багато ні мало, півтора місяця, але на те були причини. Сила-силенна роботи і маревні думки задрота-верстальника. Спочатку я збирався просто перейняти прийоми Ніколь Мерлін для верстки листів собі, але потім «хіпстерске» голова подумала: А чому б не зафігачити цілий фреймворк? Гучне слово для моєї вироби, але мені приємно його так називати. Почнемо з простого.

Читати далі →

Тотальна мобілізація c MobilizeToday

C квітня 2015 року Google ввів новий алгоритм ранжирування пошукової видачі на мобільних пристроях, що в США вже охрестили «мобайлгеддоном». Тепер ресурси, що не мають мобільної версії сайту, будуть мати більш низькі позиції. При цьому пошуковик описав вимоги до мобільних сайтів і навіть запропонував інструменти для оцінки якості і виявлення помилок. Така політика IT-гіганта невипадкова: мобільні девайси підкорили світ і не здають позиції.

Згідно исследованию, опублікованим навесні 2015 року компанією Яндекс, в кінці 2014 року 68% користувачів інтернету в російських містах хоча б раз в місяць виходили в мережу за допомогою мобільних пристроїв (роком раніше – 56%). Мобільні користувачі стали значною частиною аудиторії сайтів. За 2014 рік частка візитів на сайти зі смартфонів і планшетів зросла в півтора рази. Причому зі смартфонів в кінці 2014 року росіяни здійснювали майже в два рази більше візитів, ніж з планшетів, і зростання активності також зріс. Якщо звернутися до світових трендів, то частка власників смартфонів серед користувачів Інтернету становить 80% і зростання триває.



З мобільних пристроїв шукають як звичайні користувачі, так і бізнес. А значить, настала пора створювати мобільні версії сайтів. Довго, дорого, складно.
Читати далі →

Адаптивні сайти, або Як добитися прихильності Google



В кінці червня в Москві пройшла конференція Bitrix Summer Fest, на якій було представлено багато цікавих і корисних доповідей. Щоб це джерело мудрості не зникав, ми публікуватимемо у нашому блозі матеріали з виступів з конференції. І почати ми вирішили з звіт Антона Герасим'юка, присвяченого оптимізації швидкості завантаження сторінок.

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

Читати далі →

По-справжньому адаптивні листи. Частина перша

Написання даного поста навіяно недавньої воістину шикарною роботою, Niсole Merlin. У чому його методика верстки схожа з моєю і мені радісно від того, що цей напрямок розвивається тепер і на заході. Чим же цей спосіб хороший? Все дуже просто. Не потрібно пояснювати, як важливо адаптувати під мобільні платформи зверстані листи для того, щоб вони були прочитані. Читати простирадла на телефоні мало хто буде. Що ж весь цей час робив західний розробник? Він верстав табличній версткою з елементами блочності, потім причісував цей код медиазапросами для підтримки мобільників. Чим цей підхід збитковий? А тим, що ні на андроїд, ні на яблуці медиазапросы не підтримуються такими поштовими клієнтами: Gmail, Yandex, Mail.ru. За великим рахунком західні колеги могли б і наплювати на яндекс з мейлом, але ось Gmail як не крути перший серед поштовиків.



Для Nicole Merlin це стало очевидно і вона розробила власну методику, яка ґрунтується на гумової верстки з мінімальним використанням медиазапросов(progressive enhancement) і це працює! Але трохи не так як хотілося б нам в Росії. Вся гумовість автора тримається на inline-block елементах і оперування max-width. Але от біда-то, наші хлопці з яндекса і мейла max-width не підтримують. Спочатку я розповім про відмінності мого підходу від прийомів Nicole, а потім плавно перейду до своїх думок і прикладів коду, які варто використовувати при підготовці листів.

Читати далі →

Вирівнюємо блок по центру екрана

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

Читати далі →