Що таке адаптивний веб-дизайн. Методи реалізації адаптивності інтерфейсу. Усі сили на креатив, а не на пошук кнопки

на Наразіблизько 11-12% зі 100 000 найбільш відвідуваних сайтів - адаптивні, і немає сумнівів, що в найближчі кілька років їх кількість зросте.

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

Адаптивна модернізація

Адаптивна модернізація - це процес, при якому береться існуючий сайт, призначений тільки для настільних комп'ютерів, і переробляється в адаптивний за фактом.

Щодо готових сайтів (зокрема комерційних), у команд не завжди є можливість все відкинути та побудувати заново.
Ден Седерхольм

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

Переваги

• Щодо швидко.
  Способів зробити адаптивну модернізацію досить багато, ця стратегія може полягати у додаванні файлу small-screens.css на сайт. Незважаючи на цей досить грубий приклад, адаптивна модернізація - привабливий варіант для великої кількості організацій, оскільки не потребує перебудови всього з нуля.
• Знайоме.
  Не збиває з пантелику користувачів . Люди роками звикають до інтерфейсу і роблячи модернізацію існуючого організації зберігають знайомий підхід, при цьому покращуючи життя людям з мобільними пристроями.
• Організаційно швидше.
  Говорячи політичною мовою, модернізувати інтерфейс безпечніше, ніж починати все з нуля. Менше суперечок про те, який відтінок зеленого вибрати, які банальні стокові фотографії використовувати, а управлінню не доведеться вивертати руки. Це дозволяє командам швидше запускати адаптивні веб-сайти.

Недоліки

• Торкається лише малої частини.
  Знову ж таки, є безліч варіантів виконання модернізації, але ціль більшості з них – «зробити симпатично». Фокусуючись на переробці макета, модернізація часто упускає величезну кількість інших факторів, які потрібно враховувати при створенні успішного проектудля різних пристроїв.
• 10 літрів води у трилітровій банці.
  Так як сайти для настільних комп'ютерів розраховані тільки для них (і часто існують протягом тривалого часу), вони можуть містити багато непотребу. Оскільки модернізація, переважно, полягає у переплавці макета, більшість проблем із контентом, не враховуються повністю.
• Продуктивність.
  Є щось дивне в написанні коду для кращої підтримки невеликих пристроїв. Видалення зайвого може зайти надто далеко, але без концентрації на продуктивності вона сама по собі не зросте.
• Найгірша підтримка.
  Медіа-запити, розроблені для настільних комп'ютерів, погано підтримуються більшістю мобільних пристроїв.
• Тимчасові виправлення.
  Мені хочеться померти, коли я чую від людей прохання «зробити адаптивним» щось, начебто це просто чекбокс у плані проекту (який іноді насправді існує). Такий тип обмеженого мислення упускає реальні можливості, які пропонує адаптивний дизайн.

Адаптивні мобільні сайти Адаптивні мобільні сайти, або як я їх називаю «насіння для адаптивного майбутнього», є практикою створення окремого сайту формату «m.yourdomain.ru» з використанням технік адаптивного дизайну. Цю стратегію використовують такі сайти, як The BBC, The Guardian та Entertainment Weekly (над яким працював я).

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

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

Переваги

• Нижче ризик.
  Більшість організацій досі зауважують, що трафік із мобільних пристроїв становить меншість. Тому запуск мобільного адаптивного сайту дозволяє таким організаціям протестувати ситуацію без необхідності кидатися в цю тему з головою.
• Можливість навчитися бути гнучким.
  Дизайнери можуть навчитися думати гнучкіше. Розробники дізнаються міріади хитрощів пристроїв на Android. Менеджери можуть зрозуміти, як уникнути вдосконалення пікселів. Адаптивний мобільний сайт може стати чудовою пісочницею для навчання.
• Інфраструктура.
  Команди можуть навчитися як раз і назавжди вирішити проблеми з керуванням вмістом, наприклад, зі створенням зображень
• Видалити зайве.
  Цей підхід пропонує чудову можливість для команд запитати себе: «Чи дійсно нам це потрібно», а також сфокусуватися на продуктивності. Чому? Тому що в першу чергу вони зайняті покращенням взаємодії користувачів зі своїм сайтом на мобільних пристроях.
• Майбутнє за мобільними сайтами.
  Незважаючи на спочатку неповноцінний контент або функціонал, за достатньої кількості часу та зусиль ці мобільні сайти, зрештою, можуть замінити своїх повноформатних предків.

Недоліки

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

Адаптивний дизайн спочатку для мобільних пристроїв
Недоліки

• 50 відтінків недосконалості.
  Цей підхід може виявитися невдалим, оскільки користувачам доведеться мати справу з інтерфейсом Франкенштейна, який одночасно і старий і новий.
• Можливість зачахнути на корені.
  Такі типи проектів потребують чітких кінцевих цілей, інакше вони можуть назавжди застрягти в чистилищі.
• Технічне співіснування.
  Що відбувається, коли один модуль, який використовує новітні технології та техніки, стикається чолом із застарілим модулем? У цьому підході є багато складнощів, пов'язаних з архітектурою.

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

Це переклад статті під назвою "Responsive Strategy" від Brad Frost. Переклали в компанії UXDepot із схваленням автора.

PS від перекладачів: Сподіваюся, вам сподобалася стаття. Ми будемо раді, якщо ви вкажете нам помилки в перекладі, щоб ми могли їх оперативно виправити. Пишіть нам на адресу [email protected], будь ласка:)

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

У вашому браузері вимкнено JavaScript

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

І як би ми не сподівалися, кожен клієнт хотітиме свій, індивідуальний дизайн та структуру сайту. І, звичайно, всі хочуть, щоб сайт відкривався швидко і міг витримати більшу відвідуваність. Вирішуючи крок за кроком ці завдання, ми розробили концепцію, що поєднує в собі технології та інтерфейсні рішення, та назвали її «1С-Бітрікс: Ермітаж»

"Ермітаж" - це: Редизайн «капота» - Re: Ермітаж
Інтерфейс адміністративної частини продукту - стильний та виразний, але найголовніше – зрозумілий з першого погляду, який не вимагає навчання. Працювати з «адмінкою» приємно та легко. Дизайн адаптований для роботи з touchscreen-інтерфейсами мобільних пристроїв – смартфонів та планшетів.

Дизайн адміністративного розділу

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

Управління

Концепція інтерфейсу управління сайтом Управління інформацією – щоденна робота, і ми робимо все, щоб така робота приносила задоволення! В кожній нової версіїпродукту виконуються кроки щодо розвитку Панелі управління. При цьому враховується досвід використання панелі як розробниками, так і клієнтами компанії «1С-Бітрікс». В результаті Панель управління вдосконалюється - набуває не тільки нового вигляду, а й нових можливостей.

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

Панель керування сайтом. Інтерфейс «Ермітаж»

Управління сайтом поділяється на два основні режими:

Режим роботи «Над сайтом»

«Ермітаж» у розрізі управління включає такі функції:
Функціонал Панелі керування в рамках концепції «1С-Бітрікс: Ермітаж Зверніть увагу, що функціональність Панелі керування залежить від прав, наданих вам, як користувачу сайту. А ось перейти в розділ Адміністрування ви можете з будь-якого місця на сайті та за будь-якого режиму Панелі управління. Режим редагування Натискаючи кнопку Режим редагування , ви переходите в режим редагування. І, що потрібно особливо відзначити - включення цього режиму можна налаштувати як з перевантаженням сторінки, так і без неї. Керуйте всіма елементами та компонентами на публічних сторінках! Адже режим редагування включає не тільки можливість зміни поточної сторінки або елементів інформаційних блоків, таких як новини або товари в каталозі. У режимі редагування ви можете так само легко - прямо "над сайтом" - керувати компонентами, включеними в шаблон сайту і в основну робочу область конкретної сторінки.

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

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

Можна «відкотити» останню дію

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

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

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

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

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

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

Кому хочете показувати сторінку?

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

Інтерфейс

Керуйте сайтом легко та професійно! Інтерфейс продукту «Ермітаж» адаптується до вашої щоденної роботи з сайтом, запам'ятовує ваші уподобання та дозволяє витрачати менше часу на виконання технічних завдань. Інтерфейс як би "парить" над сайтом, дозволяючи вам бачити, що ви робите, і відразу показує результати.

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

Використовуйте звичну кнопку «Меню» для доступу по одному кліку до всіх можливостей сайту. Все зрозуміло для новачків та зручно для професіоналів. Не ви звикаєте до сайту, а сайт звикає до вас, адаптується до ваших звичок та завдань.

Генеральний директор, «1С-Бітрікс», Сергій Рижиков

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

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

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

Вадим Думбравану, керівник проектів компанії "Бітрікс"

Адаптивний інтерфейс – це:

• Контекстне редагування – керуйте вмістом безпосередньо на сайті. Якщо потрібно виправити сторінку, натисніть «Змінити» відразу. Потрібно додати розділ – натисніть кнопку «Створити». Не втрачайте контексту роботи. Новий інтерфейсяк би «парить» над сайтом, дозволяючи вам бачити, що ви робите, і одразу показує результати.
• Індивідуальна адаптація під користувача - в інтерфейсі продукту запам'ятовуються останні дії, налаштування фільтрів, зручні способи представлення інформації. Інтерфейс адаптується до вашої щоденної роботи та дозволяє з кожним днем ​​витрачати на неї дедалі менше часу.
• Кнопка «Меню» - звичний та швидкий доступпо одному кліку до всіх можливостей вашого сайту. Це дуже зручно! До того ж, при переході в " " по кнопці " Меню" запам'ятовується сторінка, звідки зроблено перехід - це не менш приємно!
• Рольова адаптація – для впевненого виконання щоденної роботи. Розробникам доступні всі інструменти для розробки та налаштування сайту. Редактори сайту працюють лише з контентом, не побоюючись порушити технічну роботупроекту. Кожен чітко виконує своє завдання.
• Майстри створення контенту допоможуть вибрати імена файлів та розділів, доповнять меню сайту та допоможуть заповнити властивості. Складні щоденні дії стають простими. Ми тільки не можемо написати за вас контент, решта зробить за вас майстер.

Адаптивний інтерфейс створений для того, щоб:

• скоротити витрати на навчання нових користувачів - навчання не потрібно, потрібен лише час на звикання сайту до вас. Термін звикання до інтерфейсу – лише 1 година!
• перетворити рутинні завдання на творчий процес, витрачати енергію на креативні завдання, а не на технічну публікацію сторінок, розділів та меню;
• скоротити час на управління сайтом, зробивши щоденне управління проектів звичним;
• зняти побоювання нових користувачів «зламати проект» та уникнути більшості помилок при керуванні контентом.

Робота над адміністративним інтерфейсом продукту продовжується. Всі оновлення інтерфейсу користувачі «1С-Бітрікс: Управління сайтом» можуть завантажити за технологією SiteUpdate. Про нові можливості ви завжди дізнаєтесь на сайті, а також у наших розсилках.

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

Візуальний редактор вже вбудовано у ваш сайт!

Управління структурою Зручний інтерфейс Красивий, легкий, сучасний!

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

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

WYSIWYG (вимовляється як «ві-зі-віг», від англ. What You See Is What You Get - «що бачиш, те й отримаєш») - спосіб редагування, при якому матеріал, що коригується в процесі редагування виглядає в точності так само, як та кінцевий результат.

Редагування real-time До редактора включені всі необхідні контент-менеджеру інструменти

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

Візуальний редактор: редагування параметрів компонента

Редактор має великі засоби редагування сторінок

Зручний механізм пошуку допомагає миттєво знайти необхідний компонентдля розміщення на сторінці. При копіюванні тексту з Мережі та інших джерел, наприклад Word, код «зачищається» від надлишкових тегів. Більш того, цей код, що вставляється, стає валідним і коректним кодом HTML5. При цьому результат роботи редактора завжди однаковий - який би браузер ви не використовували!

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

Підсвічування коду та нумерація рядків

Дуже зручно редагувати сторінки як PHP, тому що вбудований у систему редактор підсвічує код та нумерує рядки. А самі сторінки зберігаються «аяксово» «на очах» – без перезавантаження сторінки та без втрати фокусу!

Темна схема редактора

• підсвічування синтаксису HTML+ PHP + Javascript + SQL;
• підсвічування відключається, і відключити його можна без перезавантаження сторінки;
• 2 колірні теми - світла та темна;
• швидкий перехідна рядок за номером;
• Tab/Shift+Tab для вставки та скасування табуляції.

Управління інформацією – щоденна робота, ми робимо все, щоб така робота приносила задоволення!

«Спліт»-режим Вертикальний та горизонтальний

Тепер у вашого редактора є 2 повноцінних «спліт»-режиму – вертикальний та горизонтальний. Це дуже зручно – працювати у поєднаному режимі.

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

Split – поділ вікна на дві частини – візуальне редагування та редагування коду.

Зручний пошук/заміна Знайти компонент за секунду!

У редактор вбудований зручний пошук/заміна – мрія будь-якого контент-менеджера. Тепер ви можете, наприклад, миттєво знайти необхідний компонент і «перетягнути» його на сторінку. Вам не потрібно згадувати, де він знаходиться у структурі компонетів. Це особливо цінно за наявності великої кількості використовуваних компонентів.

Один результат у всіх браузерах Використовуйте будь-який браузер!

Вбудований у продукт візуальний редактор сумісний із усіма популярними браузерами. Редактор працює однаково коректно у всіх популярних браузерах і використовує ті самі функції для роботи. Ви можете правити сторінки на сайті в будь-якому браузері - результат буде однаковим.

"Зачистка" коду при вставці Чистий код!

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

Для розробників

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

Валідний та коректний HTML5 З валідацією – все ок!

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

Не потрібно вручну писати правильний код

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

Навіщо вам потрібний валідний HTML5
Плюси переходу на валідний HTML5 безперечні, вони давно обговорюються веб-розробниками (наприклад,

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

• Рекомендуємо для прискорення роботи сайту та масштабування проекту підтримувати технологію Автокешування та використовувати Кероване кешування – технологію.
• Авто+Кероване

Розробникам

"Ермітаж" для веб-розробників Концепція "Ермітаж" включає цілий набір технологічних рекомендацій для веб-розробників. Це значний список, що містить рекомендації щодо «правильного» створення своїх додатків. Це ермітаж-концепція для розробників, що показує, як саме потрібно розробляти програми для платформи "Бітрікс". Розробляти так, щоб ці програми забезпечували зручність та простоту роботи в інтерфейсі «Ермітаж». Більшість із таких рекомендацій добре відомі досвідченим розробникам.

Рекомендації для веб-розробників:

• Дизайн. Виконується відповідно до . Особливо в тих моментах, які стосуються створення свого шаблону дизайну та його застосування. Ми постаралися розробити інтерфейси управління так, щоб не обмежувати веб-розробників у варіантах верстки та дизайну.
• У шаблоні сайту рекомендується використовувати стандартні компоненти меню з кешуванням. ()
• Рекомендується створювати сайт із використанням . Або використовувати стандартні компоненти, або з метою проекту створювати індивідуальні компоненти під його специфічні потреби.
• Рекомендуємо при налаштуванні зовнішнього вигляду. Це забезпечить їх збереження під час оновлення продукту. Копіювати шаблон можна безпосередньо з публічного інтерфейсу в режимі редагування. У компонента може бути необмежену кількість шаблонів.
• Рекомендуємо, якщо модифікується компонент «1С-Бітрікс» або створюється компонент – створювати його .
• Під час розробки компонентів можна враховувати .
• Використання рекомендується у разі створення складного функціоналу або багатосторінкових уявлень, коли ув'язування одиночних компонент буде представляти складність для користувачів.
• Рекомендуємо для прискорення роботи сайту та масштабування проекту підтримувати технологію Автокешування та використовувати Кероване кешування – технологію.
• При налаштуванні компонентів бажано обов'язкове встановлення в параметрах компонента значення Авто+Керування з великим часом кешування (1-12 місяців у випадку, якщо ви повністю працюєте за технологією Сache Dependencies).
• Бажано, щоб у режимі Автокешування компонент не виконував запитів до бази даних або виконував ті запити, кешування яких є нераціональним.
• По можливості бажана підтримка для пошукової оптимізації.
• Рекомендується підтримка керування елементами списків через продукт API. Це дозволить користувачам редагувати та видаляти елементи прямо на сторінках сайту.
• Рекомендується оформлювати великі розробки у власні модулі з API та включенням до них своїх компонентів. З подальшим розміщенням їх у MarketPlace та можливістю оновлення за технологією SiteUpdate. ()
• Рекомендується використовувати API платформу для роботи з об'єктами системи. Надзвичайно небажані прямі запити до бази даних. Це може призвести до несумісності оновлень продукту з партнером.
• Збереження цілісності ядра продукту та використання наших рекомендацій при реалізації проекту для забезпечення можливості оновлення продукту за технологією оновлень SiteUpdate. Використовуйте систему внутрішніх подій, щоб змінити логіку роботи продукту або запитувати появу нових подій. (

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

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

Responsive Design (RWD) – чуйний дизайн – проектування сайту з певними значеннями властивостей, наприклад, гнучка сітка макета, які дозволяють одному макету працювати на різних пристроях;

Adaptive Design (AWD) - адаптивний дизайн, або динамічний показ - проектування сайту з умовами, що змінюються в залежності від пристрою, базуючись на кількох макетах фіксованої ширини.

1. Прийоми чуйного дизайну

Філософія чуйного веб-дизайну полягає в тому, що сайт був зручним для перегляду будь-якого пристрою, незалежно від розміру екрана. Фраза чуйний дизайн була придумана Ethan Marcotte у 2011 році. Головна особливість чуйного веб-дизайну - за рахунок рухомої (fluid) сітки макет автоматично реагує на зміну розмірів екрана, роздмухуючись або звужуючись, як повітряна куля.

Чуйний дизайн (англ. Responsive Web Design) поєднує в собі три методики - гнучкий макет на основі сітки, гнучкі зображення та медіазапити.

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

Гнучкість текстового вмісту досягається шляхом обчислення розмірів шрифту щодо розміру шрифту в браузерах за замовчуванням 16px, наприклад, для фіксованого розміру font-size: 42px відносний розмір дорівнює 42px / 16px = 2.625em.

Проблема гнучких зображень вирішується за допомогою правила img (width: 100%; max-width: 100%;) для всіх картинок на сайті. Це правило гарантує, що зображення ніколи не будуть ширшими, ніж їхні контейнери і ніколи не перевищать своїх справжніх розмірів на великих екранах.

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

Мал. 1. Чуйний дизайн Додаткові прийоми чуйного дизайну

Масштабована векторна графіка— використовуйте зображення svg, які масштабуються до будь-якого розміру без втрати якості і добре виглядають на дисплеях Retina.

Карткові інтерфейси — використовуйте так звані карткові інтерфейси — прямокутні фігури із закругленими кутами, які є контейнерами для контенту. Такі блоки є самодостатніми одиницями інтерфейсу і легко переміщати їх по макету.

Мал. 2. Pinterest, макет на основі карт

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

Мал. 3. Hotellook, мінімалізм у веб-дизайні

Розставте пріоритети та правильно приховайте контент — використовуйте приховані елементи керування, особливо для невеликих пристроїв. Спливаючі вікна, таби, off-canvas меню та інші подібні прийоми допоможуть зменшити кількість елементів на сторінці. Звільнивши простір від зайвих елементів, ви зробите інтерфейс зручним та доброзичливим для користувача.

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

Додайте інтерактивності у свої інтерфейси - у відповідь на дію користувача створіть дію у відповідь - анімацію, яка буде працювати при наведенні на елемент на десктопних пристроях і при дотику до елемента на мобільних пристроях.

2. Налаштування області перегляду за допомогою мета-тегу viewport

Щоб мобільні браузеридля операційних систем Android та iOS не змінювали автоматично розмір сторінок сайту, використовується спеціальний тег з атрибутом name="viewport" . У даному тегу допускається встановлювати певне значення для параметрів widthта initial-scale:

— initial-scale=1 говорить про те, що розмір сторінки в браузері дорівнюватиме 100% величини області перегляду. Тобто співвідношення між фізичним пікселем та css пікселем буде 1:1;

— width=device-width говорить про те, що ширина сторінки дорівнюватиме 100% ширини вікна будь-якого браузера. Тобто ширина сторінки сайту відповідає ширині пристрою, тому її не потрібно масштабувати.

У даному прикладівміст у вікні браузера буде в 2 рази більшим у порівнянні з фізичним розміром.

Також тег можна використовувати для контролю над тим, наскільки користувачі можуть збільшувати та зменшувати ширину сторінки:

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

Позбавити користувачів можливості масштабування можна за допомогою атрибуту user-scalable:

3. Універсальні шаблони

Більшість макетів, які використовуються для створення чуйного веб-дизайну, належать до однієї з п'яти категорій шаблонів, визначених Люком Вроблевськи:
Mostly Fluid (Найбільш гумовий),
Column Drop (Стовпці один під одним),
Layout Shifter (Макет, що рухається),
Tiny Tweaks (Крихітні зміни),
Off Canvas (Поза екраном).
У деяких випадках на сторінці можна використовувати поєднання шаблонів, наприклад Column Drop і Off Canvas.

3.1. Mostly Fluid

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

3.2. Column Drop

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

3.3. Layout Shifter

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

3.4. Tiny Tweaks

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

3.5. Off Canvas

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

4. Адаптивний дизайн

На відміну від чуйного дизайну адаптивний дизайн (Adaptive Web Design) орієнтується на розміри пристроїв. Він використовує кілька статичних макетів для різних типів пристроїв (мобільні пристрої, планшети, настільні комп'ютери), базуючись на контрольних (переломних) точках. Тобто макети завантажуються за певних розмірів вікна браузера пристрою, а переходи між макетами відбуваються стрибкоподібно, а не плавно.

Зазвичай адаптивні макети мають шість варіантів макетів залежно від ширини екрану:
320
480
760
960
1200
1600.

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

Основні прийоми адаптивного дизайну

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

Використовуйте сітку — структура з 12 колонок є кращою для керування шириною колонок і відступами між ними.

5. У чому різниця між чуйним та адаптивним веб-дизайном
Мал. 4. Чуйний та адаптивний дизайн на різних пристроях

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

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

6. Корисні сервіси та інструменти

Android-емулятор для Windows, Linux та Mac OS X. iOS-симулятор доступний лише для користувачів Mac OS X і є частиною пакету Xcode (його можна безкоштовно завантажити з Mac App Store).

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

Таблиці відповідності фізичних розмірів пристроїв CSS-значенням висоти та ширини, а також значення pixel-ratio для мобільних пристроїв.

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

CSS-фреймворк на основі 12 колонкової розмітки, максимум 960px. Підтримується Chrome, Safari, Firefox, IE 7 та вище, мобільними версіямибраузерів.

Набір інструментів для розробки веб-програм. Мова LESS, 12-ти колонкова адаптивна розмітка, підтримка мобільних пристроїв, планшетів і моніторів, безліч компонентів, кнопок, меню, власний стиль полів введення, списків, заголовків, міток, іконок, алерти, таби, прогрес-бари, підказки, "акордеон", "карусель", і так далі, різні Javascript-плагіни, підтримка Scaffolding, у тому числі застосування Bootstrap-стилю до вже створених HTML.

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

У цій статті будуть розглянуті основні елементи сайту та способи їхньої адаптації.

Регулювання роздільної здатності екрану

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

Стає очевидним, що ми не зможемо продовжувати верстати для кожного пристрою окремо. Але що ж тоді робити?

Часткове рішення: робимо все гнучким

Звичайно, це не ідеальний спосіб, але він усуває більшу частину проблем.

Ітан Маркотт (Ethan Marcotte) створив простий шаблон, що демонструє використання гнучкої верстки:

На перший погляд, може здатися, що все легко, але це не так. Погляньте на логотип:

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

Елемент h1 містить зображення як фон, а картинка вирівняна щодо фону контейнера (заголовка).

Гнучкі зображення

Робота з картинками - одна з найголовніших проблем під час роботи з адаптивним дизайном. Існує багато способів зміни розміру зображень, і більшість з них досить просто реалізувати. Одне з рішень - використання max-width у CSS:

Img (max-width: 100%;)

Максимальна ширина зображення дорівнює 100% від ширини екрана або вікна браузера, тому що менше ширина, то менше зображення. Зауважте, що max-width не підтримується в IE, тому використовуйте width: 100% .

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

Ще один спосіб: чуйні зображення

Техніка, представлена ​​Filament Group, не тільки змінює розмір зображень, але й стискає роздільну здатність картинок на маленьких екранах, щоб прискорити завантаження.

Для використання цієї техніки потрібно кілька файлів, доступних на Github. Спочатку беремо JavaScript-файл ( rwd-images.js), файл .htaccessі rwd.gif(Файл зображення). Потім використовуємо трохи HTML, щоб зв'язати великі та маленькі дозволи: спочатку маленьке зображення з префіксом .r(щоб показати, що картинка має бути адаптивною), потім посилання на велике зображенняза допомогою data-fullsrc:

Для будь-якого екрану ширше 480 px завантажиться зображення з великою роздільною здатністю ( largeRes.jpg), а на маленьких екранах завантажиться ( smallRes.jpg).

У iPhone та iPod Touchє особливість: дизайн, створений для великих екранів, просто стиснеться у браузері з маленькою роздільною здатністю без скролла або додаткової мобільної верстки. Однак зображень та тексту не буде видно:

Для вирішення цієї проблеми використовується тег meta:

Якщо initial-scale дорівнює одиниці, ширина картинок дорівнює ширині екрана.

Настроювана структура макета сторінки

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

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

style.css (основний):

/* Основні стилі, які будуть успадковані дочірньою таблицею стилів */ html,body( background... font... color... ) h1,h2,h3() p, blockquote, pre, code, ol, ul() /* Структурні елементи */ #wrapper( width: 80%; margin: 0 auto; background: #fff; padding: 20px; ) #content( width: 54%; float: left; margin-right: 3%; ) # sidebar-left( width: 20%; float: left; margin-right: 3%; ) #sidebar-right( width: 20%; float: left; )

mobile.css (дочірній):

#wrapper( width: 90%; ) #content( width: 100%; ) #sidebar-left( width: 100%; clear: both; /* Додаткові стилі для нового дизайну */ border-top: 1px solid #ccc; margin-top: 20px; ) #sidebar-right( width: 100%; clear: both; /* Additional styling for our new layout */ border-top: 1px solid #ccc; margin-top: 20px; )

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

Медіа-запити CSS3

Розглянемо, як можна використовувати CSS3-медіа-запити для створення адаптивного дизайну. min-width визначає мінімальну ширину вікна браузера або екрана, до якої будуть застосовані певні стилі. Якщо якесь значення буде нижче min-width, то стилі будуть проігноровані. max-width робить протилежне.

@media screen and (min-width: 600px) ( .hereIsMyClass ( width: 30%; float: right; ) )

Медіазапит запрацює тільки коли min-width буде більшим або дорівнює 600 px.

@media screen and (max-width: 600px) ( .aClassforSmallScreens ( clear: both; font-size: 1.3em; ) )

У цьому випадку клас ( aClassforSmallscreens) буде працювати при ширині екрана менше або дорівнює 600 px.

У той час як min-width і max-width можуть бути застосовні і до ширини екрану, і до ширини вікна браузера, нам може знадобитися працювати тільки з шириною пристрою. Наприклад, щоб ігнорувати браузери, відкриті у маленькому вікні. Для цього можна використовувати min-device-width та max-device-width:

@media screen and (max-device-width: 480px) ( .classForiPhoneDisplay ( font-size: 1.2em; ) ) @media screen and (min-device-width: 768px) ( .minimumiPadWidth ( clear: both; margin-bottom : 2px solid #ccc; ) )

Спеціально для iPad у медіазапитів є властивість orientation, значеннями якого можуть бути або landscape(горизонтальний), або portrait(вертикальний):

@media screen and (orientation: landscape) ( .iPadLandscape ( width: 30%; float: right; ) ) @media screen and (orientation: portrait) ( .iPadPortrait ( clear: both; ) )

Також значення медіа-запитів можна комбінувати:

@media screen and (min-width: 800px) and (max-width: 1200px) ( .classForaMediumScreen ( background: #cc0000; width: 30%; float: right; ) )

Цей код буде виконано лише для екранів або вікон браузерів шириною від 800 до 1200 px.

Завантажити певний аркуш зі стилями для різних значень медіазапитів можна так:

JavaScript

Якщо ваш браузер не підтримує CSS3-медіазапити, заміну стилів можна організувати з допомогою jQuery:

$(document).ready(function()( $(window).bind("resize", resizeWindow); function resizeWindow(e)( var newWindowWidth = $(window).width(); // Якщо ширина менше 600 px , використовується таблиця стилів для мобільного if(newWindowWidth< 600){ $("link").attr({href: "mobile.css"}); } else if(newWindowWidth >600)( // Якщо ширина більше 600 px, використовується таблиця стилів для робочого столу $("link").attr((href: "style.css")); ) ) )));

Опціональне відображення контенту

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

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

Display: none;

display: none використовується для об'єктів, які потрібно сховати.

Ось наша розмітка:

Left Sidebar Content | Right Sidebar Content

Main Content A Left Sidebar A Right Sidebar

style.css (основний):

#content( width: 54%; float: left; margin-right: 3%; ) #sidebar-left( width: 20%; float: left; margin-right: 3%; ) #sidebar-right( width: 20 %; float: left; ) .sidebar-nav( display: none; )

mobile.css (спрощений):

#content( width: 100%; ) #sidebar-left( display: none; ) #sidebar-right( display: none; ) .sidebar-nav( display: inline; )

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

Як Яндекс використовує ваші дані та машинне навчання для персоналізації сервісів - .