Адаптивний вебдизайн

Існує два підходи до побудови адаптивного веб дизайну. Розробка починається або з мобільного інтерфейсу, а далі відбувається адаптація інтерфейсу для інших розширень (англ. mobile first), або, навпаки, розробка починається від вигляду на екранах стаціонарних ПК і закінчується інтерфейсом на мобільних телефонах (англ. desktop first).

Відносні одиниці вимірювання

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

Дизайн з контрольною точкою(зліва) та без(справа)

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

Емулятор дозволяє перевірити адаптивність і функціональність вебсайту на різних мобільних платформах, таких як iPhone, IPAD, Android і BlackBerry, фактично не використовуючи самого пристрою. Мобільні емулятори можуть допомогти визначити проблеми вебсайту і дозволять прийняти коригуючі заходи, щоб зробити сайт візуально привабливим та функціональним на мобільних пристроях.

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

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

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

Column drop

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

Layout shifter

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

Tiny tweaks

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

Off canvas

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