Адаптивна верстка: уроки або відразу в бій?

39

Від автора: доброго часу доби всім гостям і передплатникам! Верстка сайтів — це справа цікаве і непросте. Тут набагато важливіше практика та досвід, ніж отриманий диплом. Все частіше у вакансії по пошуку верстальника вказують однією з вимог знання того, що таке адаптивна верстка — уроки по чуйному веб-дизайну та адаптивної верстці присутні в інтернеті у величезній кількості, однак, чи достатньо їх для початку кар’єри? Спробуємо розібратися в нашій сьогоднішній статті.

Нагадаємо, що верстальник — це людина, який повинен зробити так, щоб веб-сторінка виглядала точно так само, як і її дизайн-макет у форматі psd. У цій справі йому допомагають мови розмітки XHTML/HTML і каскадні таблиці стилів CSS.

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

Всі блоки повинні підлаштовуватися під висоту і ширину екрану, елементи не повинні «з’їжджати», куди ні попадя. Напевно, кожен з вас бачив такі сайти, на яких при відкритті на смартфоні бачиш елементи (текст, логотип, зображення), які збилися в купки, немов злякалися вас, великого і злого дядька (або тітку). Виглядає це не дуже естетично, погодьтеся.

Чим відрізняється адаптивна верстка від інших підходів до верстки сайту?

Існує кілька підходів, які ви повинні знати, перш ніж навчатися адаптивної верстання:

фіксована верстка. Блоки не поміняють свою ширину навіть при зміні розміру вікна браузера. При перегляді сайту на моніторі з низьким розширенням з’явиться смуга прокручування;

гумова верстка. При цьому підході блоки змінюють свою ширину, в залежності від висоти і ширини вікна браузера;

адаптивна верстка. Заточена під певні дозволу екрану (768, 1024 і т. д.), реалізується за допомогою різних скриптів. Зміна розміру здійснюється ривками;

чуйна верстка. Своєрідний мікс гумової і адаптивної верстки. З технічної точки зору це дуже складний підхід, однак, він найбільш ефективний;

мобільна версія. Являє собою інший сайт з іншою адресою, дизайном і версткою.

Переваги адаптивного інтерфейсу

Сайт виглядає привабливо на абсолютно всіх пристроях (комп’ютери, ноутбуки, планшети, смартфони);

сайт добре ранжирується в звичайному і мобільному пошуку, піднімається по позиціях у видачі;

відсутні проблеми, пов’язані з мобільною версією сайту;

більше довіри та лояльності з боку відвідувачів сайту;

хороша юзабіліті і, як наслідок, високі поведінкові фактори і менший показник кількості відмов.

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

Так як мобільний пристрій не завжди підключено до мережі wi-fi і часто використовує повільний мобільний інтернет, сайти слід робити максимально легкими при завантаженні. Тут-то на допомогу і приходить адаптивна верстка, завдяки якій веб-сторінки відмінно завантажуються на невеликі екрани навіть при повільному інтернеті..

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

Що потрібно знати фахівця з адаптивної верстці.

Щоб навчитися адаптивної верстці, слід мати хороший рівень знання HTML, CSS і JavaScript. Відповідаючи на питання, закладений в темі статті: потрібно поєднувати теорію з практикою вже з початку навчання. Ідеальний варіант — це відео уроки по адаптивної верстці, що роблять упор на практичні заняття, складність яких зростає по мірі вивчення основ.

До мінімального пакету джентльмена верстальника також відноситься Adobe Photoshop і основи роботи з зображеннями. Якщо ви готуєтеся верстати проекти не крупніше одностраничников, то можете використовувати Adobe Muse і йому подібні інструменти.

Базові навички верстки отримуються досить швидко. Розібратися з HTML і CSS не займе багато часу. Спочатку можуть бути труднощі з освоєнням JavaScript, однак, вони компенсуються наявністю величезної кількості плагінів і інших готових рішень на всі випадки життя.

Де знаходиться межа між версткою, веб-дизайном і фронтендом?

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

Коли необхідно розробити складний інтерактивний інтерфейс, від верстальників вимагають певних знань мов веб-програмування. Тут навіть може знадобитися тісна робота з базами даних. Як ви зрозуміли, грань між Front-End і версткою дуже і дуже тонка.

Чи можуть змусити верстати макет веб-дизайнера, який взагалі не уявляє, що з його макетом далі роблять, і яким глибоко начхати на ваші проблеми. А це, повірте мені, досить поширена ситуація. Верстальщику часто доводиться групувати шари psd шаблон і взагалі наводити в ньому лад.

Фреймворки та препроцессоры: бути чи не бути?

Використання CSS фреймворків грає дуже важливу роль у швидкості верстки. Можливо, зараз почнуться незадоволені вигуки самобутніх верстальників 80 лэвла, які вважають, що можуть зробити сітку проекту в сто разів краще Бутстрэпа. Їм поддакнут противники надмірної стандартизації та обмежень у веб-дизайні. Ну що ж, я нікого переконувати не буду. Ми тут не картини на полотні малюємо.

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

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

Ще одна порада: не економте час на написання CSS за допомогою препроцесора. І це дуже важливо, незалежно, чи використовуєте ви який-небудь фреймворк, чи ні. Так як 60-70% верстки займає написання CSS, цей етап логічно автоматизувати. Я особисто користуюся препроцесором Sass, однак, ви можете використовувати будь-який інший, що вам підходить.

Висновок

Ви вже почали проходити відеокурси по HTML і CSS, але ви не впевнені в своїх силах і нічого ще не зверстали самі? Не хвилюйтеся, всі проходять через етап сумнівів. Бажаю вам скоріше переступити через сумніви, набратися впевненості і почати робити. Будь практичний досвід, навіть верстка елементарних макетів, принесе набагато більше користі, ніж проглядання відео і самобичування.

Використовуйте різні інструменти, що спрощують процес, але тільки тоді, коли в них бачите необхідність. Git, CSS-препроцессоры, бібліотеки, системи збирання і т. д. допоможуть вам зробити верстку більш якісної і швидкої.

Наступного разу, як будете їхати в громадському транспорті, погляньте на людей, чим вони зайняті? Більшість з них всю дорогу проводять, втупившись у свої смартфони і планшети. Розумієте, до чого я хилю? Можливо, ці люди — ваші майбутні клієнти. У шаленому ритмі сучасного життя мобільний інтернет і адаптивні інтерфейси просто необхідні! Ось чому фахівці з адаптивної верстці зараз затребувані як ніколи.

Щоб дізнатися все про створення адаптивних інтерфейсів, підписуйтесь на наш блог і обговорюйте найцікавіші матеріали з друзями. До нових зустрічей!