Адаптивний шаблон сайту на html5 – те, що повинен мати будь-який сучасний сайт

21

Від автора: я вітаю вас на блозі webformyself, присвяченому сайтостроению. Починаючи з цієї статті, ми з вами торкнемося основ html5 і сучасного підходу в розробці сайтів. Зокрема, давайте з’ясуємо, чим адаптивний шаблон сайту на html5 вигідно відрізняється від своїх попередників.

Еволюція шаблонів

Веб-стандарти розвиваються сьогодні дуже стрімко. Те, що вчора було актуальним, сьогодні вже застаріло. Щось докладний відбувається і з самою стабільною версією мови HTML 4.1. Довгі роки їм користувалися для створення своїх проектів. Сьогодні він як і раніше використовується, але все ж його все більше і більше буде витісняти новий стандарт HTML5, який вже давно вніс у світ веб-розробки, нові елементи, які значно розширили можливості.

Що дає HTML5

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

Наприклад, шапка отримувала id = header, head або щось подібне, бічна колонка – sidebar і т. д. При цьому з точки зору логіки ніякого поділу не було – просто купа блоків з будь-яким вмістом. Звичайно, все оформляли і людина розумів, де шапка, а де стаття, але в коді такого не було.

Головним нововведенням мови html5 стало появи в ньому так званих семантичних елементів. Вони покликані були замінити звичайні div, але не повністю їх витіснити. Наприклад, елементом header можна сміливо замінювати div id = «header». Це не просто зручно і зрозуміло, це ще й дуже правильно з точки зору сприйняття верстки пошуковими машинами.

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

Адаптивний шаблон сайту на html5 – те, що повинен мати будь-який сучасний сайт

Рис. 1. Приклад розмітки за допомогою нових семантичних тегів.

Щоб змусити нові теги нормально працювати на більшості веб-оглядачів, досить записати правильний доктайп і вказати потрібне елементів блочний тип. Цей код поміщають в початок html:

Помітили, наскільки простіше стало доктайп. Раніше він був настільки довгим і страшним, що його навіть ніхто не писав – все копіювали і вставляли його з інших версток. Ну а такий код потрібно вставити в головний файл стилів css:

header, footer, aside та інші елементи html5{
display: block;
}

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

Більш докладно ознайомитися з елементами HTML5 ви можете в нашому курсі з основ цієї технології, де докладно розбираються найбільш важливі теги.

Що дає адаптивність

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

Адаптивний шаблон сайту на html5 – те, що повинен мати будь-який сучасний сайт

Рис. 2. Ось основна перевага – відсутність горизонтальної прокрутки і гарне відображення на вузьких екранах.

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

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

Адаптивний сайт на html5 – це те, до чого варто прагнути сьогодні

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

У зв’язку з цим виникає питання: а як зробити адаптивний сайт html5, будь то блог, інтернет-магазин або одностраничник? Як ви розумієте, хоча технології і оновилися, вони не принесли чогось кардинально нового. Вам не доведеться отримувати тонну нових знань, достатньо навчитися за нормальним уроків, і ви вже самостійно опануєте даними технологіями. Наприклад, у вивченні адаптивного дизайну вам може допомогти наш курс по верстці для мобільних пристроїв, де ви на практиці зможете побачити, як адаптувати реальний веб-ресурс під сучасні вимоги.

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

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