Як зробити адаптивний дизайн сайту і що це таке
А ви знаєте, яким бачать ваш сайт користувачі мобільних пристроїв? На щастя, для перевірки є відмінний сервіс - responsinator.com
Що робити? Виходу два: залишити все як є і спостерігати за тим, як інші проекти обходять твій у видачі пошукових систем або зробити дизайн свого сайту адаптивним.
Що таке адаптивний дизайн
Спочатку я не бачила різниці між адаптивної і «гумовою» версткою, коли розміри блоків змінюються в залежності від ширини екрану. Однак, різниця є.
Адаптивний дизайн не просто тягнеться або стискається по ширині, він підлаштовується під розмір екрану, іноді повністю змінюючи стиль блоків.
Найпростіший приклад: область контенту розтягується на всю ширину екрану, а сайдбар або переноситься вниз або взагалі зникає зі сторінки. Або меню зі звичайного горизонтального перетворюється в список, що випадає.
Як зробити адаптивний дизайн для свого сайту
Залежно від вашого бюджету і знань CSS / HTML, варіантів може бути декілька.
Замовити адаптивну верстку у фрілансера
Найправильніший, на мій погляд, варіант, і він же самий непопулярний. Тому що задоволення не з дешевих. І все ж, якщо дозволяють кошти, і немає бажання розбиратися в тонкощах верстки, краще знайти студію або фрілансера, який адаптує ваш шаблон під мобільні пристрої або зробить новий. А як перевірити його роботу на пристроях з різними дозволами, ви вже знаєте - responsinator.com в допомогу.
Знайти готовий дизайн
Останнім часом практично всі дизайнери намагаються адаптувати свої шаблони під мобільні пристрої. Можна пошукати готовий дизайн, наприклад, тут:
- www.templatemonster.com - одна з найпопулярніших колекцій платних шаблонів для різних CMS і просто HTML-сайтів.
- www.templatemo.com - безліч безкоштовних варіантів сучасного дизайну.
Цей варіант підійде тим, хто не женеться за ексклюзивним дизайном або здатний внести свої правки в код, так, щоб зробити шаблон унікальним.
використовувати фреймворки
Фреймворк (framework) - можна сказати, каркас шаблону, його основні файли і сітка блоків. Дизайнери люблять їх за зручність в роботі і економію часу, тому що готова «риба» шаблону дозволяє не витрачати час на рутину. Якщо ви вмієте працювати з фреймворками, використовувати їх для створення адаптивного дизайну - відмінне рішення.
Величезний список адаптивних фреймворків на будь-який смак ви знайдете на Хабре. Але більшість з них досить складні у використанні і важкі в обсязі. Тому тим, хто любить мінімалізм я рекомендую інший список легких адаптивних фреймворків від Beloweb.ru. Заодно придивіться до блогу, тут дуже багато корисних «смачненького» для дизайнерів і верстальників.
Зробити верстку самому
Цей спосіб для тих, хто не шукає легких шляхів і хоче розібратися в усьому самостійно. По суті, щоб зробити свій шаблон адаптивним, потрібно використовувати дві речі:
Мета-тег viewport
Який визначає тип пристрою, з якого відвідувач зайшов на сайт і встановить вірну ширину екрану. Просто скопіюйте цей код в head свого сайту.
правило @media
Завдяки якому ми можемо прописати різні стилі для одних і тих же блоків в своєму css-файлі. Виглядає це приблизно так:
У цьому прикладі блок #left має ширину 600 пікселів і буде розташовуватися зліва від блоку #right шириною 400 пікселів. Але якщо дозвіл монітора менше 1010 пікселів, ми прибираємо обтікання у обох блоків і розтягуємо їх на 98% ширини екрану.
І ось таким чином потрібно прописати правила під наступні розміри екранів:
Повний список дозволів можна знайти на responsinator.com або в звіті Яндекс.Метрики для вашого сайту (розділ Технології / Роздільна здатність дисплеїв). Одним словом, тим, хто знайомий з версткою сайтів, не важко буде розібратися в цьому питанні.
Але якщо ви не зовсім впевнені в своїх силах, рекомендую курс Михайла Русакова HTML5 та CSS3 з Нулі до Гуру.
Ви знаєте, я рідко даю посилання на платні курси (бо ніколи не рекомендую то, ніж сама ніколи не користувалася), але це дійсно кращий навчальний матеріал по верстці з усіх, які мені доводилося дивитися. Саме завдяки Михайлу шаблон мого блогу тепер не тільки адаптований під різні дозволи екрану, він став легше попереднього варіанту і краще оптимізований під пошукові системи.
Хороший натяк ... :-) і рекомендований сервіс.
Зрозуміло звичайно, що потрібен адаптований під мобільні пристрої дизайн, але як ви правильно помітили варто він копієчку ... треба думати. Судячи з того що у вас дизайн змінився, ви вже набули досвіду. Без особливого розкриття таємниць, чи не підкажете в яких цінових межах це задоволення буде коштувати?
Кай, я б і рада запропонувати свою допомогу, але боюся, мені буде важко адаптувати ваш шаблон. Занадто хитра у нього структура. Як варіант, можна спробувати зробити свій дизайн на основі шаблону за замовчуванням, вони у WP зараз все адаптивні.
Так, шаблон у мене важкувато. Але я його планую міняти пізніше. Вже треба ...
треба мізкувати. :-)
Де небудь на фралансе за адаптацію вашого дизайну візьмуть 3000-4000р. Вигідніше буде поміняти шаблон на адаптивний, благо їх готових вже багато.
Адаптивний дизайн - найболючіша тема зараз.
Днями робив аудит комерційного сайту, до них більше 1000 чоловік в день пре з мобільних пристроїв, вони цей трафф в Ю Я купують за жахливі гроші - а адаптивної верстки немає. І фіг його знає, як переробити сайт - треба терміново шукати хорошого фахівця з адаптивної верстці, яких мало.
Таких магазинів - тисячі, хто купує мобільний трафф, але при цьому не піклується про те, щоб юзабіліті було адекватним.
Дивлюся ваш сайт з мобільного, все відмінно. Що стосується блогу Борисова, у нього мобільна версія є. Чи не адаптивна, а саме мобільна. Це ще краще.
Для створення адаптивного дизайну сайту з чистою семантичної версткою використовуйте MACAW. Всім рекомендую.