Кращі практики чуйного веб-дизайну

автор: Bradley Nice, менеджер контенту на ClickHelp.com - інструмент програмної документації

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

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

Чому я повинен переключити свій веб-сайт на RWD?

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

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

  • Це економить час та гроші, оскільки вам не доведеться підтримувати окремі веб-сайти для настільних ПК та мобільних телефонів.
  • Чуйний дизайн хороший для SEO вашого веб-сайту (пошукові рейтинги), оскільки кожна сторінка на вашому веб-сайті матиме одну URL-адресу, і таким чином сок Google зберігається. Вам не потрібно турбуватися про ситуації, коли одні сайти посилаються на ваш мобільний сайт, а інші - на ваш робочий стіл.
  • Ваші звіти Google Analytics дадуть кращу картину використання вашого сайту, оскільки дані консолідованих користувачів мобільних пристроїв та настільних ПК будуть консолідовані.
  • Те саме стосується статистики соціального обміну (Facebook Likes, Tweets, +1), оскільки мобільна та настільна версії ваших веб-сторінок матимуть однакову URL-адресу.
  • Чуйні дизайни легше обслуговувати, оскільки вони не включають будь-яких компонентів на стороні сервера. Вам просто потрібно змінити базовий CSS сторінки, щоб змінити її зовнішній вигляд (або макет) на певному пристрої.

Що я повинен знати, щоб почати роботу з чуйним дизайном?

Чуйний дизайн - це чистий HTML та CSS. Ви створюєте в CSS правила, які змінюють стиль залежно від розміру екрана пристрою користувача.

Наприклад, ви можете написати правило, яке говорить, якщо розмір екрана користувача менше 320 пікселів, не показувати бічну панель або якщо розмір екрана перевищує 1920 пікселів (широкоекранний робочий стіл), збільште розмір шрифту корпусу текст до 15 пікселів.

Як перевірити, чи використовується на певному веб-сайті чуйний дизайн?

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

Якщо я перейду з підходом до чуйного дизайну, чи буде мій веб-сайт працювати зі старими браузерами?

Переважно так. RWD використовує CSS3 медіа-запити та HTML5 (для кращої семантики), які не підтримуються у старих версіях IE. Однак існують рішення на базі JavaScript - respo.js та модернізуються, наприклад, - які забезпечують потужність CSS3 та HTML5 для старих браузерів, включаючи IE6.

Чи чутливий дизайн чудово грає з рекламними мережами, такими як Google AdSense?

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

Є тисячі мобільних пристроїв. Які резолюції екрана має підтримувати мій чуйний веб-сайт?

Я рекомендую встановити точки перерв принаймні для таких вікон перегляду у ваших CSS3 Mediaqueries - 320 пікселів (пейзаж iPhone), 480 пікселів (портрет iPhone), 600 пікселів (планшети Android), 768 пікселів (iPad + ~ Galaxy Tabs) та 1024 пікселів (iPad пейзаж та настільні).

Як почати роботу з чуйним веб-дизайном? Будь-які хороші підручники?

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

Веб-сайти: Net Magazine, Smashing Magazine, CSS Tricks та Web Designer Wall

Відеоуроки: YouTube, Net Tuts

Презентації: Палуби PowerPoint

Подкасти: Shop Talk, Веб-шоу 5by5 та The Industry

Twitter: @RWD, @NetMag та @SmashingMag

Які недоліки використання чуйного дизайну?

  • Додаткові кілобайти на вашу веб-сторінку, оскільки їм доведеться завантажувати стилі CSS та JavaScript, які в іншому випадку були непотрібними.
  • Зображення. Ви не хочете подавати зображення з більшою роздільною здатністю на своєму мобільному веб-сайті, але цього важко досягти в адаптивному дизайні (якщо тільки ви не вдаєтеся до вирішення на стороні сервера, наприклад, Adaptive Images і Sencha.io).
  • Зусилля, щоб додати чутливий шар до вашого існуючого веб-сайту. Іноді має сенс починати з нуля, а не робити існуючий веб-сайт із фіксованою шириною.

Вам також можуть сподобатися: чуйні макети Безкоштовний EBOOK

Гарного дня!

Бредлі Ніцца,
Content Manager на ClickHelp.com - найкращий інструмент онлайн-документації для постачальників SaaS