Адаптивний дизайн на WordPress: приклади тем, основи та поради щодо CSS

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

Так, із щоденним зростанням кількості власників мобільних телефонів, підвищується і необхідність чуйного (адаптивного) дизайну. І сьогодні ми поговоримо про те, як його можна застосувати для сайтів WordPress.

Дивіться також:

• Адаптивні теми WordPress: єдиний сайт для всіх пристроїв
• Як адаптувати контент для теми WordPress з адаптивною версткою
• Розуміння принципу роботи зображень на WordPress (для адаптивного дизайну)
• Як створювати адаптивні веб-макети для різних пристроїв на WordPress
• 22 безкоштовні адаптивні теми WordPress для блогу чи особистого сайту

Що таке адаптивний дизайн?

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

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

Приклади адаптивного дизайну

Тема Дива 2.0

Не треба далеко ходити. І на WordPress є чудовий приклад якісного чуйного дизайну – тема Дива 2.0. Просто відкрийте цю тему на мобільному пристрої. Вона відразу ж отримає ширину екрану і компактно відобразить усі елементи дизайну в читальному вигляді. А ось як поведеться тема, якщо ви будете змінювати розміри вікна браузера на своєму комп'ютері:

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

Ці зміни умовно називаються Медіа -запит CSS – це заява в таблиці стилів, яка використовується для виклику інших заяв і заснована на розмірі екрана пристрою, під який створюється адаптивний дизайн.

Чим менша його ширина, тим більше сайт оптимізовано під мобільні пристрої типу iPhone або Android.

Дизайн змінює свою ширину на екрані, тому що розробники оптимізували її під різні типи пристроїв.

Сайт Time.com

Для Time.com використано такий самий підхід, завдяки чому дизайн відображається чуйно як на планшеті, так і на екрані мобільного телефону.

Як можна розширювати знання про адаптивний дизайн?

Тестування сайтів, що відвідувалися раніше

Якщо тестувати всі відвідувані сайти на різних пристроях, через деякий час це увійде в звичку. Деякі сайти по-різному виводяться на екран на різних пристроях. Наприклад, Google використовує таблиці стилів, що абсолютно відрізняються, залежно від ширини екрана пристрою. Такий метод вимагає додаткового коду CSS, крім стандартного CSS, і застосовується ще й на таких великих сайтах, як Google, Amazon, Yahoo.

Інші методи

Також у самоосвіті у сфері чуйного дизайну допоможе:

• Читання тематичних блогів та посібників
• Проходження курсів
• Відвідування воркшопів
• Поповнення знань про CSS3 та використання Media Queries
• Самостійне використання знань на практиці
• Створення, хай і простого, сайту за допомогою основ HTML та CSS для розуміння принципу їхньої роботи.

Як зробити сайт на WordPress чуйним?

Ну ось, найцікавіша частина посту. Для створення адаптивної версії сайту на WordPress потрібно використовувати CSS3 Media queries, Про які сьогодні вже згадувалося.

Стандартна media-query-заява виглядає таким чином:

@media (max-width: 700px) {
    .container {
        width: 100%;
        margin: 0 auto;
    }
}

За допомогою правила @media Для веб-сайту можна створити різні шаблони під різні види екранів, версію для друку, мобільного телефону або планшета. Можна використовувати відразу кілька видів і визначити будь-яку потрібну ширину, використовуючи media query.

У коді є елемент @media з обмеженням (max-width: 700px) і це означає, що якщо роздільна здатність екрана або вікно браузера досягає 700 пікселів або менше, то застосовуються параметри, вказані в дужках.

Краще звичайно використовувати ці правила @media без фанатизму та по-менше.

Приклад

Для демо версії будуть використані основи HTML і CSS, щоб показати з прикладу, як створюються правила адаптивного дизайну всередині коду. Цей метод використовується і для сайту на WordPress. Потрібно лише застосувати стилі у файлі style.cssзмінити дизайн сайту.

Код HTML

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Elegant Themes Responsive Web Design - Demo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="container">
        <h1>Responsive Web Design</h1>
            <ul>
                <li><a href="#">Sample Link 1</a></li>
                <li><a href="#">Sample Link 2</a></li>
                <li><a href="#">Sample Link 3</a></li>
                <li><a href="#">Sample Link 4</a></li>
                <li><a href="#">Sample Link 5</a></li>
            </ul>
        </div>
    </body>
</html>

Вище наведено приклад стандартного коду. Мета-тег огляд використовується для того, щоб заявити браузеру про виведення коду відповідно до ширини екрана девайса. Частина коду div містить посилання.

Ось як відображається сторінка в Chrome:

Звичайно, ми не можемо залишити її в такому вигляді, і використовуємо CSS.

Код CSS

body {
    background: PowderBlue;
    font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;
    font-size: 16px;
}
.container {
    width: 1000px;
    margin: 0 auto;
    padding: 20px;
    background: white;
}
.container h1 {
    text-align: center;
}
.container ul {
    list-style-type: none;
}
.container ul li {
    display: inline-block;
    padding: 10px 20px;
}
.container ul li a {
    display:block;
    padding: 20px;
    background: Tomato;
    border-radius: 4px;
    color: black;
    text-decoration: none;
}
.container ul li a:hover {
    background: black;
    color: white;
}

Після застосування стилю сторінка виглядає вже так:

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

Що ж тоді робити?

Необхідно використовувати медіа-запит, що допоможе настроїти сторінку під зміни CSS. Для цього потрібно додати нижченаведений код CSS вниз файлу style.css.

@media (max-width: 970px) {

.container {
    width: 100%;
    margin: 0 auto;
    padding:20px 0;
}
.container ul {
    padding:10px;
}
.container ul li {
    display:block;
    padding:10px 0;
}
}

Тепер, коли код доданий, можна змінити розмір вікна браузера, щоб побачити ефект адаптивності:

Чудово! Можна налаштувати ще кілька елементів, як тільки браузер набуде мінімальної ширини. А використання media query допоможе покращити результат. Додайте цю частину внизу файлу style.css:

@media (max-width: 480px) {
    .container h1 {
        font-size: 22px;
    }

}

Помалу дизайн наблизився до бажаного кінцевого вигляду. Чи правда вже краще?

Тепер адаптивний дизайн повністю готовий. Цей принцип можна використовувати будь-якого сайту, незалежно від CMS.

Обробка зображень

Мабуть, питання зображень для адаптивного дизайну є однією з найактуальніших тем для дискусій у середовищі веб-спільнот. Деякі вдаються до використання CSS, а інші використовують зображення тих розмірів, які відповідають ширині екрана.

Але загальне рішення у тому, щоб задавати зображенням максимальну ширину – 100%. А саме ось так:

img {
  max-width:100%;
}

Ось як відображається графіка на сайті після застосування цього рішення:

Читабельність

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

Юзабіліті

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

теми

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

Висновок

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

Джерело: elegantthemes.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/