Адаптивна верстка. Шпаргалки верстальника

за Ніколаєнко Максим · Опубліковано Жовтень 20, 2013 · Оновлено Серпень 27, 2020

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

Для тих хто ще не чув про такий термін як адаптивна верстка, можу сказати, що таку верстку можна назвати людською мовою слухняною.. Цей вид верстки підлаштовується під усі можливі екрани пристроїв, з яких прийшов ваш відвідувач., а останнім часом їх м'яко кажучи повно (нетбуки, планшети, iphone, Пристрої на базі Android … ). Всі ці пристрої мають особливість, вони працюють із різними екранами, але деякі з них навіть перебудовують окремі елементи, так наприклад iPhone дуже не до речі, вашому дизайну робить свої кнопки та поля форм на вашому сайті.

Адаптивна верстка – з чого почати

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

Що використовувати для верстки:

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

/* Для больших экранов */
@media (min-width: 1200px) { ... }
 
/* Для некоторых нетбуков и планшетов (таблеток) */
@media (min-width: 768px) and (max-width: 979px) { ... }
 
/* Для планшетов и некоторых телефонов */
@media (max-width: 767px) { ... }
 
/* Для телефонов и некоторых устройств у которых совсем маленький экран */
@media (max-width: 480px) { ... }

/* Для больших экранов */

@media (min-width: 1200px) { ... }

/* Для некоторых нетбуков и планшетов (таблеток) */

@media (min-width: 768px) and (max-width: 979px) { ... }

/* Для планшетов и некоторых телефонов */

@media (max-width: 767px) { ... }

/* Для телефонов и некоторых устройств у которых совсем маленький экран */

@media (max-width: 480px) { ... }

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

1 2	<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

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

Бонус на користь адаптивних сайтів

Пошукові системи вже набагато краще розпізнають адаптивні сайти та змінюють видачу під них. Тобто ваш сайт, зроблений за правилами адаптивної верстки, швидше за все, буде вищим для тих, хто шукає інформацію з мобільних пристроїв, ніж прості та нудні сайти які потрібно зменшувати та збільшувати на екрані, щоб на них прочитати хоч щось. Такий висновок дійшов мені з досвіду розробки сайту для юридичної компанії та аналізу його статистики. Google та Yandex люблять зручні сайти, але враховуючи, що такі сайти стоять у 3 – 4 рази дорожче, не кожен може собі дозволити замовити адаптивний дизайн та розробку під цей дизайн.. Вартість обумовлена тим, що потрібно малювати дизайн під 3-4 пристрої та верстати також під різні пристрої, а такі CSS фреймворки як Bootstrap далеко не завжди можуть вирішити всі поставлені завдання, які не придумував клієнт. ).

Поговоримо трохи про Bootstrap

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

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

Тексти в адаптивній верстці

Для того, щоб сайт виглядав добре на всіх екранах, недостатньо тільки перебудовувати блоки., змінювати їх розмір та призначення за допомогою css фреймворків і JavaScript, потрібно ще й пам'ятати як поводиться текст на різних екранах. Якщо на маленькому екрані телефону 480 пікселів текст добре виглядає на 12 пікселях, то на більшому екрані цей текст потрібно збільшувати, оскільки на великих моніторах ніхто не дивиться на текст впритул, а читають його здалеку. Недовго покопавшись в Інтернет, я знайшов відмінну відмінний плагін написаний на jqery. Називається плагін FitText і знаходиться тут. Все, що вам треба зробити, це підключити плагін та викликати його для потрібних елементів сторінки.

<script src="jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script type="text/javascript">
        $("#fittext1").fitText();
        $("#fittext2").fitText(1.5);
        $("#fittext3").fitText(1.1, { minFontSize: 50, maxFontSize: '75px' });
</script>

$("#fittext1").fitText();

$("#fittext2").fitText(1.5);

$("#fittext3").fitText(1.1, { minFontSize: 50, maxFontSize: '75px' });

</script>

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

Проблеми при адаптивній верстці:

На iPhone ваші стилі будуть виглядати інакше, раджу при верстці роздобути цей пристрій для тестування.
На iPhone трансформація працює інакше, причому у всіх пристроях по-різному. Коли ви виставляєте 3D поворот об'єкта в CSS3 = 0 градусів, то об'єкт таємничим чином може обернутися під деяким кутом, замість зникнути.
Для адаптивної верстки веб-дизайнер має бути навчений усім тонкощам і якщо ви знаєте PhotoShop, раджу запастися прикладами якісних адаптивних дизайнів у форматі PSD, для прикладів як робити треба чи не треба. Також вам знадобиться гора терпіння та жодних відмовок (чому розробнику треба вивчати PhotoShop або SEO, які я чую все частіше). Моя вам порада з досвіду, ніколи не працюйте з іменитими дизайнерами, які до веб-дизайну не мають жодного відношення. Був поганий досвід роботи та мороз з боку дизайнера.
Працюючи з Bootstrap вам потрібно буде допрацьовувати фреймворк, якщо клієнту потрібен макет більше ніж 1200 пікселів завширшки. Хоча там роботи не так багато, але на складних проектах мороки багато, плавали, ми знаємо…
Тестувати адаптивний дизайн часто доводиться у різних браузерах і навіть у різних версіях, те саме стосується і різних пристроїв. Наприклад, на iphone3 та iphone4 різниця велика, менше різниця між iphone4 та iphone5. Пристрої Android вам теж знадобляться, тому що там свої хитрощі при виділенні блоку або написання у форму тексту. Якщо грошей на купівлю купи пристроїв немає, то можна використовувати спеціальні сервіси як цей https://viewlike.us/, але він тільки змінює розмір екрану та не змінює відображення елементів, як це роблять пристрої.

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

Якщо вам потрібно, щоб ваші блоки плавно змінювалися на сайті, можна використовувати анімацію CSS3 у ваших стилях для всіх блоків.

*{
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

-webkit-transition: all 0.3s ease;

-moz-transition: all 0.3s ease;

-o-transition: all 0.3s ease;

-ms-transition: all 0.3s ease;

transition: all 0.3s ease;

}

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

.class-block, .class-block * {
 /*CSS transitions*/
 -o-transition-property: none !important;
 -moz-transition-property: none !important;
 -ms-transition-property: none !important;
 -webkit-transition-property: none !important;
 transition-property: none !important;
 /*CSS transforms*/
 -o-transform: none !important;
 -moz-transform: none !important;
 -ms-transform: none !important;
 -webkit-transform: none !important;
 transform: none !important;
 /*CSS animations*/
 -webkit-animation: none !important;
 -moz-animation: none !important;
 -o-animation: none !important;
 -ms-animation: none !important;
 animation: none !important;
}

.class-block, .class-block * {

/*CSS transitions*/

-o-transition-property: none !important;

-moz-transition-property: none !important;

-ms-transition-property: none !important;

-webkit-transition-property: none !important;

transition-property: none !important;

/*CSS transforms*/

-o-transform: none !important;

-moz-transform: none !important;

-ms-transform: none !important;

-webkit-transform: none !important;

transform: none !important;

/*CSS animations*/

-webkit-animation: none !important;

-moz-animation: none !important;

-o-animation: none !important;

-ms-animation: none !important;

animation: none !important;

}

У цьому прикладі скасовується вся можлива анімація в CSS для блоку з класом .класно-блочний і всього його вмісту.

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

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