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

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

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

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

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

Процес адаптивного дизайну

Я обговорював адаптивність і WordPress всюди протягом двох останніх років, і питання номер один, який я отримую: «Як потрібно змінити мій дизайн і процес розробки для WordPress?». Тому буде логічно почати саме з нього, але будьте готові до разочаровывающему відповіді.

Відповідь така: «Цього не потрібно робити». WordPress – це система управління вмістом сайту або веб-фреймворк, яка пов’язує базу даних контенту з інтерфейсом веб-сайту. Розробляєте ви статичний веб-сайт або тему WordPress, ви в будь-якому випадку повинні враховувати досвідченість користувача, стиль, дизайн, кросбраузерність сумісність пристроїв, відповідність стандартам і багато іншого. Єдина суттєва різниця у ході роботи пов’язана з додатковими інструментами та ресурсами, наданими WordPress для вас.

Незалежно від технології

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

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

Як забезпечити майбутнє вашому чуйному веб-сайту на основі WordPress

Quartz розмиває кордони між веб-сайтом і додатком, і все це реалізовано на WordPress

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

Медіа-контент

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

Коли адміністратор завантажує зображення і вставляє його в посаду, код HTML виглядає приблизно так:

Як забезпечити майбутнє вашому чуйному веб-сайту на основі WordPress

Як ви можете побачити в розмітці вище, статичні атрибути ширини та висоти включені в тег Як забезпечити майбутнє вашому чуйному веб-сайту на основі WordPress. Проблема в тому, що значення атрибутів засновані на дійсному розмірі зображення. Тому якщо адміністратор встановить параметр «full size», вбудоване зображення може відобразитися шириною в тисячі пікселів.

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

Крок 1. Просвітіть користувачів про завантаження медіа-контенту. Допоможіть їм зрозуміти, що не потрібно завжди включати зображення в повний розмір. Якщо їм так зручно, покажіть, як видаляти атрибути через перегляд HTML коду у редакторі посту.

Крок 2. Застосовуйте CSS клас max-width для всіх зображень, вбудованих фреймів та інших типів медіа-контенту в постах.

CSS

.post img { max-width: 100%; }

Ось ця одна рядок CSS коду запобіжить зображення або інше медіа-контенту від виходу за межі контейнера. Якщо ж ви шукаєте JavaScript або jQuery рішення, то ось воно:

JavaScript

document.getElementById(‘post-image’).
removeAttribute(‘width’);
document.getElementById(‘post-image’).
removeAttribute(‘height’);

jQuery

$(«.post img»).removeAttr(«width»).
removeAttr(«висота»);

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

Як забезпечити майбутнє вашому чуйному веб-сайту на основі WordPress

Чуйний робот Джейсі Фрідмана являє собою трагікомічне нагадування, чому в адаптивному веб-дизайні потрібно вважатися і з великими і маленькими екранами

Меню

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

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

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

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

Меню в мобільних пристроях

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

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

Як я сказав раніше, є хороша новина – те, що ваші улюблені підходи будуть працювати і з WordPress. На сьогоднішній день є два основних рішення для навігації в мобільних пристроях. Перше – використання іконки у вигляді трьох ліній, яка при натисканні розкриває меню або зверху, або збоку.

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

Рекомендовані меню для мобільних пристроїв

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

Як забезпечити майбутнє вашому чуйному веб-сайту на основі WordPress

Плагін WP Mobile Detect блокує повнорозмірний контент від поглинання даних і уповільнення завантаження

Один з моїх улюблених способів вирішити цю проблему – це визначення додаткового розташування меню. Положення меню повинні бути завжди визначені, тому що це дозволяє вашому меню бути незалежним від теми.

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

Реєстрація додаткового положення меню

function register_my_menus() {
register_nav_menus(
array(
‘header-menu’ => __( ‘Header Menu’ ),
‘mobile-featured’ => __( ‘Featured Mobile Menu’ )
)
);
}
add_action( ‘init’, ‘reg is ter_my_menus’ );

Відображення рекомендованого меню

$defaults = array(
‘theme_location’ => ‘mobile-featured’,
‘menu’ => «,
‘container’ => ‘div’,
‘container_class’ => ‘featured’,
‘container_id’ => «,
‘menu_class’ => ‘menu’,
‘menu_id’ => «,
‘echo’ => true,
‘fallback_cb’ => ‘wp_page_menu’,
‘before’ => «,
‘after’ => «,
‘link_before’ => «,
‘link_after’ => «,
‘items_wrap’ => ‘

    %3$s

‘,
‘depth’ => 0,
‘walker’ =>»
);
wp_nav_menu( $defaults );

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

Мініатюри зображень

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

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

Візьмемо, наприклад, веб-сайт на основі WordPress Bates University. Він чудово користується слайдами зображень. Подорожуючи по сайту, ви виявите одне і те ж зображення в різних місцях, різного розміру. Адміністратору не потрібно було відкривати Photoshop, обрізати і змінювати розмір зображення, а потім завантажувати їх.

Як забезпечити майбутнє вашому чуйному веб-сайту на основі WordPress

Головне меню веб-сайту Clarke Insurance Agency

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

Код вище буде визначено у файлі functions.php вашої теми. Як ви могли помітити, у мене є п’ять додаткових розмірів мініатюри. При цьому я також дав їм назви. Тому, якщо на першій сторінці вашого чуйною теми у адміністратора-користувача є список останніх повідомлень, при використанні мініатюр за замовчуванням для показу зображення ескізів вийдуть розміром 50 на 50 пікселів.

Це більш ефективно і раціонально, ніж захоплювати і змінювати розміри великих зображень. Пізніше на бічній панелі ви можете встановити розмір sidebar-thumb, як в прикладі нижче.

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

Плагін WP mobile detect

Я виступав з цією темою в минулому році на WordCamp Boston. У своїй промові я згадав про php класі під назвою Mobile Detect. З ним ви можете визначити пристрій користувача на серверному рівні. Відразу після виступу я конвертував клас у WordPress плагін, який ви можете скачати безкоштовно тут.

Визначення пристрою – це не вирішення всіх проблем (і, відверто кажучи, може бути застосовано неправильно), але мені здається, що цей плагін має важливе, позитивний вплив на користувачів WordPress. Плагін WP Mobile Detect – це ще один крок до справді динамічного веб-оточенню.

Завантаження, ініційовані не користувачем

Пам’ятаєте, як років п’ять-сім тому ми боролися з використанням ініційованих не користувачем дій? Наприклад, автоматичне відтворення відео і аудіо, або спливаючі вікна та інші дратівливі підходи. Завантаження, ініційовані не користувачем – це те ж саме: ви не даєте користувачеві право вибору.

Припустимо, ви працюєте над блогом. На домашній сторінці вашого сайту ви показуєте повну версію вашої останньої статті (без посилання «Детальніше»). Сьогодні ви вирішили написати статтю, демонструє топ 10 інфографіка, що належать до WordPress.

Будучи користувачем вашого сайту, я маю намір почитати ваші останні статті. Я перебуваю в автобусі, по дорозі на роботу, і використовую мій смартфон. У мене немає безлімітного трафіку, і моя зона покриття не безперервна. І як тільки я зайшов на ваш сайт, я автоматично несвідомо завантажую 10 повнорозмірних інфографіка.

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

Як забезпечити майбутнє вашому чуйному веб-сайту на основі WordPress

MinimalMonkey.com виробляє унікальне враження плавності

Плагін WP Mobile Detect спрямований на вирішення цієї проблеми. З допомогою простих шорткодов ви можете змінювати повнорозмірну інфографіку на маленькі ескізи. Також ви можете залишити посилання на оригінал, надаючи користувачеві право вибору.

[notdevice]Як забезпечити майбутнє вашому чуйному веб-сайту на основі WordPress[/notdevice]
[телефон]Як забезпечити майбутнє вашому чуйному веб-сайту на основі WordPress[/phone]

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

Плагін WP Mobile Detect дає можливість адміністраторам брати під контроль функціонування сайту на мобільних пристроях, блокування оголошень, контенту і файлів (JavaScript та інші), які не потрібно завантажувати, на серверному рівні допомогою шорткодов і функцій.

Рекомендована мобільна навігація

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

if( wpmd_is_phone() ) {
/* Show Menu */
}

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

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

Повеселимося

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

Пам’ятаєте, коли з’явився сайт Silverback? На ньому були розкидані гілки лози, спадаючі з верхньої частини сайту. Допомагали вони продавати продукт? Можливо, ні. Давали вони користувачам привід повеселитися і, ймовірно, поділитися сайтом з іншими? Ще б.

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

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

Як забезпечити майбутнє вашому чуйному веб-сайту на основі WordPress

Smashingmagazine.com до цих пір зберігає свою цілісність і чуйність

Досвід взаємодії, чуйність та WordPress

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

Візьмемо повідомлення в блозі, до прикладу. Максимизируете сторінку як на 27-дюймовий iMac, і ви отримаєте багато порожнього місця. Якщо ми стали залишати коментарі до посту? Ми всі знаємо, що читачі мають схильність переглядати веб-контент. Не буде здорово допомогти користувачам переглядати вміст і коментарі в один і той же час? Це залишить більш запам’ятовується враження користувача і дозволить йому отримати більше інформації на тому ж екрані.

Інструменти

Є два додаткових інструменту, які обов’язково потрібно згадати в цій статті. Перший – це JetPack, безкоштовний плагін, в даний час входить в комплект c WordPress. У ньому є купа функцій і інструментів, але найбільше пов’язаний з чуйністю і WordPress JetPack Photon.

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

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

Висновок

Є так багато інструментів, ресурсів, фреймворків та середовищ для тестування, покликаних допомогти вам розробити гарний чуйний веб-сайт. Конвертування в чуйну WordPress тему не буде проблемним.

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

Переклад статті «How to futureproof your responsive WordPress website» був підготовлений дружною командою проекту Сайтостроение від А до Я.