Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Designing

Методи, які Потрібно Знати для Адаптивного Дизайну в HTML5

by
Read Time:7 minsLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Ukrainian (українська мова) translation by Anatoly Zavadskiy (you can also view the original English article)

The DNA of Responsive Web Design white paperThe DNA of Responsive Web Design white paperThe DNA of Responsive Web Design white paper

Вступ

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

Telerik Responsive Web Design Early Mobile Web Plugin for WordPressTelerik Responsive Web Design Early Mobile Web Plugin for WordPressTelerik Responsive Web Design Early Mobile Web Plugin for WordPress

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

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

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

Реліз Bootstrap з відкритим вихідним кодом від Twitter колосально допоміг у просуванні респонсивності у веб-дизайні. Можливо, як і я, ви використовуєте чуйний шаблон на своєму веб-сайті і знайомі із загальними поняттями динамічного подання. Але чи знаєте ви, як респонсивний веб-дизайн працює під капотом? Ви знаєте, як побудувати щось респонсивне з нуля? Хотіли б дізнатися більше?

ДНК Чуйного Веб-дизайну

У цьому уроці ми заохотимо вас перевірити останній мануал від Telerik щодо адаптивного веб-дизайну (RWD). Методи для побудови HTML5 додатків для будь-якого розміру екрану, які ви можете завантажити безкоштовно прямо зараз, - це надзвичайно докладний посібник, в якому наведені відповіді на ці питання і який допоможе вам значно прискоритись.

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

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

  • використовувати основні структурні блоки чуйного веб-дизайну - системи сіток, медіа-запити та гнучкий зміст - створювати адаптивні макети, які змінюють і приховують чи показують елементи в залежності від пристрою користувача
  • обрати респонсивний фреймворк для веб-дизайну, такий як Bootstrap або Zurb Foundation
  • використовувати розширені функції Bootstrap, такі як рідкі контейнери, зсуви, тягни/штовхай і більше, щоб досягти навіть найскладніших адаптивних веб-сценаріїв

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

Ось деякі з областей, яким мануал навчить вас.

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

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

Telerik Responsive Web Design Media QueriesTelerik Responsive Web Design Media QueriesTelerik Responsive Web Design Media Queries

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

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

Популярні фреймворки, такі як Bootstrap, Foundation і Telerik RadPageLayout, широко використовують медіа-запити для створення своїх потужних систем сіток.

Сітки і Контрольні Точки

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

Синтаксис може варіюватися між різними фреймворками, але загальна концепція та ж сама. Кожен розмір пристрою має відповідні медіа-запити і властивості стилів, які створюють бажаний ефект для макету. Ці медіа-запити називаються контрольними точками. Bootstrap визначає свої контрольні точки, як xs (досить малі), sm (невеликі), md (середні), lg (великі). Вони корелюють до розміру пристрою.

Ось деякі приклади Bootstrap і те, як вони повинні рендеритись при різних розмірах пристроїв:

У верхньому лівому куті - невеликі пристрої, і більш малі планшети, у верхньому правому - це пристрої середнього розміру. Внизу - більші пристрої та настільні комп'ютери.

Telerik Responsive Web Design Grid ExamplesTelerik Responsive Web Design Grid ExamplesTelerik Responsive Web Design Grid Examples

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

Telerik Responsive Web Design ContainerTelerik Responsive Web Design ContainerTelerik Responsive Web Design Container

Робота з Контентом

Мануал також показує як чуйний веб-дизайн інструктує зміст і розширюється або стискається залежно від розміру дисплея відвідувача:

Telerik Responsive Web Design Working with ContentTelerik Responsive Web Design Working with ContentTelerik Responsive Web Design Working with Content

Вибір Фреймворка

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

Вибір стандартного фреймворку в чуйному веб-дизайні може мати величезний вплив на успіх або провал вашого проекту. Мануал від Telerik проведе вас через всі плюси і мінуси одного з найпопулярніших, Bootstrap:

Telerik Responsive Web Design BootstrapTelerik Responsive Web Design BootstrapTelerik Responsive Web Design Bootstrap
Bootstrap пропонує найкращі розширення класів, такі як сітка з міцною респонсивністю, дизайн для мобільних в першу чергу, допоміжні CSS класи, адаптивні компоненти JavaScript і багато інших. Сітка за замовчуванням - це стандартна сітка із 12 колонок, яка за допомогою простого синтаксису створює макети, що підтримують кілька розмірів екрану.

Мануал також містить огляд Zurb Foundation. Це фреймворк з відкритим вихідним кодом, який розвинувся з Bootstrap.

Telerik Responsive Web Design Zurb FoundationTelerik Responsive Web Design Zurb FoundationTelerik Responsive Web Design Zurb Foundation

Foundation містить у собі розширені можливості, що придатні для команд з досвідченими фронт-енд розробниками, особливо тих, що використовують Sass.

Особливості Розширеного Макету

Telerik Responsive White Paper Advanced LayoutsTelerik Responsive White Paper Advanced LayoutsTelerik Responsive White Paper Advanced Layouts

В мануалі розглядається ряд складних питань, як, наприклад:

  • Рідкі контейнери
  • Вкладені рядки
  • Зміщення
  • Тягни/Штовхай (Push/Pull)

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

Завантаж Мануал Зараз!

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

Хочете поринути в це? Відвідайте колекцію Мануалів від Telerik і завантажте Методи, які потрібно знати для будівництва HTML5 додатків для будь-якого розміру екрану зараз.

І ще одне...

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

Telerik Kendo UI

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

 Telerik Responsive Web Design The Kendo UI Telerik Responsive Web Design The Kendo UI Telerik Responsive Web Design The Kendo UI

Я просто хочу дати вам швидкий візуальний тур того, на що ви можете розраховувати з Кендо UI:

Сітки

Створення розширених елементів управління інтерактивних сіток ніколи не було таким легким. Кендо UI забезпечує потужну і гнучку сітку з коробки:

Telerik Kendo UI GridsTelerik Kendo UI GridsTelerik Kendo UI Grids

Планувальник

Так виглядає планувальник (або календар):

Telerik Kendo UI SchedulerTelerik Kendo UI SchedulerTelerik Kendo UI Scheduler

Графіки

Кендо UI включає в себе вбудовані графіки:

Telerik Kendo UI ChartsTelerik Kendo UI ChartsTelerik Kendo UI Charts

Редактор

І є потужний, легконалаштовуваний редактор:

Telerik Kendo UI Rich Text EditorTelerik Kendo UI Rich Text EditorTelerik Kendo UI Rich Text Editor

Віджети

Насправді, в наборі є бібліотека з понад 73 UI віджетів для додавання:

Telerik Kendo UI WidgetsTelerik Kendo UI WidgetsTelerik Kendo UI Widgets

Що далі?

В основному, на цьому етапі є дві речі, які ви можете зробити:

  1. Завантажити Методи, які потрібно знати для будівництва HTML5 додатків для будь-якого розміру екрану, щоб дізнатися про чуйний веб-дизайн і фреймворки.
  2. Підписатись на Пробний Період з Кендо UI Framework і почати з завантаження коду.

Я сподіваюся, що ви заінтриговані тим, що мануал HTML5 від Telerik може запропонувати (і по Кендо UI Framework). Будь ласка, не соромтеся розказувати про свій досвід нижче, а також задавайте питання і коментуйте. Ви також можете твітнути мене @reifman або писати на мою електронну пошту, і переглядати мою сторінку інструктора Envato Tuts+, щоб побачити інші підручники, які я написав.

Корисні Посилання

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.