Інформатика в школі: Урок 22. Адаптивна верстка. Кросбраузерна оптимізація сторінок сайту

22.1. Адаптивна верстка

Адаптивна верстка змінює дизайн сторінки в залежності від поведінки користувача, платформи, розміру екрану і орієнтації девайса і є невід'ємною частиною сучасної веб-розробки.

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

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

Для чуйного дизайну ширина основного контейнера сайту задається в %, при цьому вона може бути дорівнює як 100% ширини вікна браузера, так і менше. Ширина стовпців сітки також задається в %. В адаптивному дизайні ширина основного контейнера і стовпців сітки фіксується за допомогою значень в px.

Приклад верстки головної сторінки

Сторінка складається з трьох основних блоків:

заголовок (шапка),

контейнер-обгортка для основного вмісту і сайдбара, і

нижній колонтитул (футер).

1. Метатеги і розділ <head>

1) Додамо в розділ <head> необхідні файли - посилання на використовувані шрифти, бібліотеку jQuery, а також плагін prefixfree (щоб не писати для властивостей браузерні префікси):

<!DOCTYPE html>

<Html>

<Head>

<title> Адаптивна верстка сайту </title>

</Head>

<Body>

2. Шапка сторінки

У шапці сторінки <header> помістимо наступні елементи-контейнери:

логотип <a class="logo">;
кнопку для показу / приховування головного меню <div class="nav-toggle">;
головне меню <ul id="menu">;
форму пошуку по сайту <form id="searchform">.

</a>

</Form>

<Li> <a href=""> Портфоліо </a> </li>

<Li> <a href=""> Про автора </a> </li>

</Ul>

</Nav>

</Header>

3. Блок з коротким змістом статті

Анонс статей задамо елементом <article id="post-1" class="post">:

<Div class = "category"> <a href=""> Дизайн </a> </div>

<P> Мій перший сайт</p>

<a class="more-link" href=""> Продовжити читання </a>

</Div>

</Article>

...

</Article>

</Div>

4. Бічна колонка

У бічну колонку <aside> додамо список категорій, останні записи і форму підписки на розсилку:

<Aside>

<H3 class = "widget-title"> Категорії </h3>

<Li> <a href=""> Дизайн </a> (2) </li>

<Li> <a href=""> Верстка </a> (5) </li>

<Li> <a href=""> Відео </a> (1) </li>

</Ul>

</Div>

<H3 class = "widget-title"> Останні записи </h3>

<Li>

</Div>

<H4 class = "widget-post-title"> Весна </h4>

</ Li>

<Li>

</Div>

</Li>

<Li>

</a>

</Div>

<H4 class = "widget-post-title"> Осінь </h4>

</Li>

</a>

</Div>

</Ul>

</Div>

<H3 class = "widget-title"> Підписка на розсилку </h3>

</Form>

</Div>

</Aside>

</Div>

5. Нижній колонтитул

У підвалі сторінки розмістимо інформацію про копірайт, кнопки соціальних мереж і посилання на електронну пошту:

</Div>

<a href="mailto:admin@yoursite.ru"> Написати листа </a>

</Div>

</Footer>

</Body>

</Html>

6. Стилі шапки та її вмісту

header {

width: 100%;

background: white;

box-shadow: 3px 3px 1px rgba (0,0,0, .05);

padding: 15px 0;

margin-bottom: 30px;

position: relative;

}

/ * Логотип * /

.logo {

display: block;

float: left;

}

.logo span {

color: white;

display: inline-block;

width: 30px;

height: 30px;

line-height: 30px;

border-radius: 50%;

margin: 5px 0;

text-align: center;

text-shadow: 2px 2px 1px rgba (0,0,0, .4);

}

.logo span: nth-child (odd) {

background: # EF5A42;

}

.logo span: nth-child (even) {

background: # F8B763;

}

/ * Меню * /

#menu {

float: right;

}

#menu li {

display: inline-block;

margin-right: 30px;

}

#menu a {

color: # 111;

text-transform: uppercase;

letter-spacing: 1px;

font-weight: 600;

display: block;

line-height: 40px;

}

#menu a: hover {

color: # EF5A42;

}

#menu li: last-child {

margin-right: 0;

}

/ * Форма пошуку * /

#searchform {

float: right;

margin-left: 46px;

display: inline-block;

position: relative;

}

#searchform input {

width: 170px;

float: left;

border: none;

padding-left: 10px;

height: 40px;

overflow: hidden;

outline: none;

color: # 9E9C9C;

font-style: italic;

}

#searchform button {

background: transparent;

height: 40px;

border: none;

position: absolute;

right: 10px;

color: # EF5A42;

cursor: pointer;

font-size: 18px;

}

#searchform input: focus {

outline: 2px solid # EBEBE3;

}

/ * Кнопка перемикання меню, що з'являється при ширині 768px * /

.nav-toggle {

display: none;

position: relative;

float: right;

width: 40px;

height: 40px;

margin-left: 20px;

background: # EF5A42;

cursor: pointer;

}

.nav-toggle span {

display: block;

position: absolute;

top: 19px;

left: 8px;

right: 8px;

height: 2px;

background: white;

}

.nav-toggle span: before, .nav-toggle span: after {

content: "";

position: absolute;

display: block;

left: 0;

width: 100%;

height: 2px;

background: white;

}

.nav-toggle span: before {

top: -10px;

}

.nav-toggle span: after {

bottom: -10px;

}

/ * Клас, який буде додано до верхнього меню при натисканні на кнопку і покаже приховане меню * /

# Menu.active {

max-height: 123px;

}

7. Стилі для блоку з основним вмістом

/ * Лівий контейнер * /

.posts-list {

margin-bottom: 30px;

width: 64%;

float: left;

}

/ * Блок для статті * /

.post {

margin-bottom: 35px;

}

.post-content p {

line-height: 1.5;

padding-bottom: 1em;

}

.post-image {

margin-bottom: 30px;

}

.category {

margin-bottom: 15px;

}

.category a {

color: # F8B763;

text-transform: uppercase;

}

.post-title {

margin-bottom: 12px;

font-size: 26px;

}

/ * Блок з кнопкою "продовжити читання" і кнопками соціальних мереж * /

.post-footer {

border-top: 1px solid # EBEBE3;

border-bottom: 1px solid # EBEBE3;

position: relative;

margin-top: 15px;

}

.more-link {

position: relative;

display: inline-block;

font-size: 10px;

text-transform: uppercase;

color: white;

line-height: 44px;

padding: 0 22px;

background: # 3C3D41;

letter-spacing: 0.1em;

white-space: nowrap;

}

.more-link: after {

content: '';

display: block;

position: absolute;

width: 0;

height: 0;

top: 0;

right: 0;

border: solid transparent;

border-width: 22px 18px;

border-left-color: # 3C3D41;

transform: translateX (100%);

}

.post-social {

position: absolute;

left: auto;

top: 50%;

right: 0;

text-align: right;

transform: translateY (-50%);

padding: 0;

font-size: 12px;

}

.post-social a {

display: inline-block;

margin-left: 8px;

color: # F8B763;

width: 25px;

height: 25px;

line-height: 23px;

text-align: center;

border-radius: 50%;

border: 1px solid;

}

8. Стилі для бічної колонки

/ * Правий контейнер * /
aside {
width: 33%;
float: right;
}
/ * Блок для віджетів * /
.widget {
padding: 20px 15px;
background: white;
font-size: 13px;
margin-bottom: 30px;
box-shadow: 3px 3px 1px rgba (0,0,0, .05);
}
.widget-title {
font-size: 18px;
padding: 10px;
margin-bottom: 20px;
text-align: center;
border: 2px solid # F8B763;
box-shadow: 3px 3px 0 0 # F8B763;
}
.widget-category-list li {
border-bottom: 1px solid # EBEBE3;
padding: 10px 0;
color: # c6c6c6;
font-style: italic;
}
.widget-category-list li: last-child {
border-bottom: none;
}
.widget-category-list li a {
color: # 626262;
margin-right: 6px;
font-style: normal;
}
.widget-category-list li a: before {
content: "\ f105";
display: inline-block;
font-family: 'FontAwesome';
margin-right: 10px;
color: # c6c6c6;
}
.widget-posts-list li {
border-top: 1px solid # EBEBE3;
padding: 15px 0;
}
.widget-posts-list li: nth-child (1) {
border-top: none;
}
.post-image-small {
width: 30%;
float: left;
margin-right: 15px;
}
.widget-post-title {
float: left;
}
/ * Форма підписки * /
#subscribe {
position: relative;
width: 100%;
padding: 15px 0;
}
#subscribe input {
width: 100%;
display: block;
float: left;
border: 2px solid # EBEBE3;
padding: 0 0 0 10px;
height: 40px;
position: relative;
outline: none;
color: # 9E9C9C;
font-style: italic;
}
#subscribe button {
padding: 0 15px;
background: transparent;
height: 40px;
border: none;
position: absolute;
right: 0;
color: # EF5A42;
cursor: pointer;
font-size: 18px;
}
#subscribe input: focus + button {
background: # EF5A42;
color: white;
}

9. Стилі для нижнього колонтитула

Підвал сайту розділимо на три рівних стовпці:
footer {
padding: 30px 0;
background: # 3C3D41;
color: white;
}
.footer-col {
width: 33.3333333333%;
float: left;
}
.footer-col a {
color: white;
}
.footer-col: last-child {
text-align: right;
}
.social-bar-wrap {
text-align: center;
}
.social-bar-wrap a {
padding: 0 7px;
font-size: 18px;
}

10. Медіа-запити

@media (max-width: 768px) {
/ * Показуємо кнопку для перемикання верхньої навігації * /
.nav-toggle {
display: block;
}
header {
padding: 10px 0;
}
/ * Приховуємо верхнє меню, скасовуємо обтікання, позиціонуємо його, змістивши на висоту шапки сайту * /
#menu {
max-height: 0;
background: white;
float: none;
position: absolute;
overflow: hidden;
top: 63px;
right: 0;
left: 0;
margin: 0;
padding: 0;
z-index: 3;
}
/ * Робимо елементи списку блоковими, щоб вони розташовувалися один під одним * /
#menu li {
display: block;
padding-left: 15px;
border-bottom: 1px solid # EBEBE3;
margin-right: 0;
}
/ * Скасовуємо обтікання лівій і правій колонок, встановлюємо їм ширину 100% * /
.posts-list, aside {
width: 100%;
float: none;
}
.widget-post-title {
font-size: 1.5em;
}
}
@media (max-width: 480px) {
/ * Вирівнюванням логотип по центру * /
nav {
text-align: center;
}
/ * Скасовуємо обтікання для логотипу * /
.logo {
float: none;
margin-bottom: 15px;
}
/ * Позиціонуємо меню на збільшену висоту шапки * /
#menu {
top: 118px;
}
/ * Позиціонуємо форму пошуку по лівому краю * /
#searchform {
float: left;
margin-left: 0;
}
/ * Прибираємо верхню і нижню межі і вирівнюємо кнопку по центру * /
.post-footer {
border-top: none;
border-bottom: none;
text-align: center;
}
/ * Скасовуємо позиціонування кнопок соцмереж * /
.post-social {
position: static;
text-align: center;
transform: none;
margin-top: 20px;
}
.widget-post-title {
font-size: 1.2em;
}
/ * Скасовуємо обтікання для стовпців підвалу сторінки * /
.footer-col {
float: none;
margin-bottom: 20px;
width: 100%;
text-align: center;
}
.footer-col: last-child {
text-align: center;
margin-bottom: 0;
}
}

11. Скрипт для мобільного меню

За показ-приховування верхнього меню при кліці на кнопку (перемикається висота меню - від нульової до рівної її вмісту) відповідає код jQuery, який ми раніше додали в розмітку сторінки перед закриває тегом </body>:

<Script>$ ( '. Nav-toggle'). On ( 'click', function () { $ ( '# Menu'). ToggleClass ( 'active');});</ Script>

22.2. Кросбраузерна оптимізація сторінок сайту

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

Чому важливо тестувати кросбраузерну сумісність?

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

Що впливає на труднощі при перегляді мого сайту?

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

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

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

Основні інструменти для тестування кросбраузерної сумісності

Якщо ви не експерт з тестування у веб-розробці, не хвилюйтеся: в мережі Інтернет досить і платних, і безкоштовних ресурсів для цього, і вам не потрібно буде створювати свою власну систему тестування, «але»: україномовних ресурсів немає, всі вони на англійській мові.

Browserling

Browsershots

turbo.net Browser Sandbox

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

Для професійних цілей підійдуть тільки платні рішення. Практично всі вони вимагають наявності підписки, але надають невеликий безкоштовний тестовий період. До таких ресурсів можна віднести: BrowserStack, Cross Browser Testing, Sauce Labs.

Для визначення підтримки елементів HTML5 та CSS3 в різних версіях браузерів скористайтеся сайтом Can I use.

Якщо для вашого сайту критично важлива підтримка в старих браузерах, можете скористатися наступними плагінами і JavaScript-бібліотеками: HTML5 Shiv, Modernizr, Respond.

При підключених вищевказаних плагінах вам потрібно буде писати окремі стилі CSS, додавати потрібні медіа-запити, а в деяких випадках і браузерні префікси css-стилів. Це дозволить вам значно розширити кросбраузерну підтримку для вашого сайту.

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

До уроку 22
FotoJet - онлайн-сервіс для створення колажів і графічного дизайну

Найпростіші техніки адаптивної верстки

https://sales-generator.ru/blog/adaptivnaya-verstka-sayta/

Інформатика в школі

Сторінки

Урок 22. Адаптивна верстка. Кросбраузерна оптимізація сторінок сайту

22.1. Адаптивна верстка

Приклад верстки головної сторінки

1. Метатеги і розділ <head>

2. Шапка сторінки

3. Блок з коротким змістом статті

4. Бічна колонка

5. Нижній колонтитул

6. Стилі шапки та її вмісту

7. Стилі для блоку з основним вмістом

8. Стилі для бічної колонки

9. Стилі для нижнього колонтитула

10. Медіа-запити

11. Скрипт для мобільного меню

22.2. Кросбраузерна оптимізація сторінок сайту

Чому важливо тестувати кросбраузерну сумісність?

Що впливає на труднощі при перегляді мого сайту?

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

Основні інструменти для тестування кросбраузерної сумісності

Немає коментарів:

Дописати коментар

7 клас Python

Архів блогу

Вибірковий модуль "Веб-технології" 10 клас

Загальна кількість переглядів сторінки

Про мене