Адаптивні веб-макети для мобільних екранів Intro, поради та приклади
Дизайнери мають його жорсткіше, ніж раніше. Ми не тільки повинні розробляти для стаціонарних пристроїв, а й мобільних пристроїв, таких як планшет і смартфони, і оскільки ми говоримо про велику кількість різних розмірів екрану і резолюцій, це величезне завдання на плечі. У світлі цього, чуйний веб-дизайн може бути найкращим рішенням. Він пропонує не просто простий мобільний шаблон; замість цього весь макет сайту розроблений таким чином, щоб бути достатньо гнучким, щоб вписатися в будь-яку можливу роздільну здатність екрана.
З такою схемою проектування рідини є очевидні переваги та недоліки. Розгляньте мої приклади нижче, як чуйний веб-дизайн може зробити перехід на мобільні пристрої більш плавним.
Як Responsive Design Works
Коли я використовую слово “чуйний” з точки зору веб-дизайну я маю на увазі, що весь макет відповідає на основі дозволу екрану користувача. Уявіть собі такий сценарій: ви читаєте веб-сайт на одному планшеті, а потім перемикаєтеся на інший пристрій з тієї чи іншої причини. Вікно веб-переглядача тепер змінено. Реагуючий макет веб-дизайну буде включати схеми та макет, який витончено руйнує і переосмислює себе. З точки зору придатності, це блискуча техніка.
Чуйний дизайн - це створення однорідного досвіду незалежно від розміру екрана браузера або пристрою. Я знайшов ідеальний приклад з 'A List Apart', щоб проілюструвати свою точку зору, яка також включає в себе динамічні зображення. Ширина встановлюється в CSS, використовуючи відсотки для більшості внутрішніх елементів контейнера. Великі веб-сайти також добре реагують на видалення динамічного вмісту, наприклад JavaScript, коли його не підтримується.
Чому дизайн для мобільних пристроїв?
Стало очевидним, що більше користувачів збираються мобільними пристроями, а не тільки для перегляду веб-сторінок на ходу. Планшетні ПК почали змінюватися в контексті, коли користувачі знаходяться в мережі в класі. Проектування для мобільних пристроїв безумовно є вимогою в сучасних веб-стандартах. Єдина проблема полягає у виборі методу розробки та належній орієнтації на аудиторію.
Коли ви починаєте кодувати певні роздільні здатності екрана, ви маєте занадто багато таблиць стилів для роботи. Запити мультимедійних даних у CSS3 можна використовувати для створення спеціальних макетів для iPhone як для портретного, так і для пейзажного перегляду. Оскільки ви можете задати щільність пікселів, легко змінити будь-який шаблон HTML для мобільних пристроїв.
(Джерело зображення: bradfrostweb)
Але коли ви кодуєте макет для адаптивного дизайну, мобільні аспекти беруться до уваги за замовчуванням. Користувачам настільних і мобільних пристроїв буде запропоновано подібний досвід, і вам не доведеться турбуватися про зовнішні властивості CSS. Єдине дослідження, яке потрібно виконати, це планування для найменшого можливого екрану. Дані трафіку Google Analytics можуть бути дуже корисними для цього.
Швидше за все, ваш веб-сайт не працюватиме на 100% на кожному пристрої, на якому запущено будь-який веб-переглядач. Але ви можете націлити більшість на основі середньої ширини екрану. Старі моделі iPhone використовують роздільну здатність 320 × 480, яка не є такою неймовірною. Я б стріляв при мінімальній ширині 240px, або навіть менше, якщо ви можете вмістити його.
Видалення масштабу за умовчанням
Якщо ви витратили будь-який час на перегляд веб-сторінок на смартфоні, ви помітите, як масштабуються веб-сайти для повного відображення на екрані. Це зручно для користувачів, оскільки більшість веб-сайтів не мають мобільного аналога, тому повне компонування - це найбезпечніша ставка.
Але коли ви потрапляєте в створення чуйного мобільного дизайну, автоматичне масштабування може дійсно зіпсувати ваші елементи компонування. Зокрема, зображення та навігаційний вміст можуть виглядати невеликими або занадто великими у вашому макеті. Існує спеціальний мета-тег, який можна додати до заголовка документа, який скидає це в більшості пристроїв Android і iPhone.
Це відоме як метатег вікна перегляду яка встановлює деякі користувацькі змінні в контенті. У компанії Apple є сторінка документації, що стосується деяких інших мета-тегів, на які слід звернути увагу, хоча вони спеціально орієнтовані на сайти на iOS. The початкового масштабу значення є важливим, оскільки це налаштування вашого веб-сайту на 100% масштабування.
Останнє значення для масштабується користувачем буде повністю видалити цю функцію масштабування, щоб користувач не міг змінити розмір макета. Це дозволить заблокувати дизайн в один розмір на основі повної ширини пристрою. Зверніть увагу, що навіть якщо ви вимкнете функцію масштабування, хороший реагуючий дизайн все одно пристосується при переході від портретного до пейзажного на будь-якому пристрої! Але має сенс заблокувати реагувати дизайн і видалити загальні параметри масштабування.
Масштабування динамічного зображення
Зображення є ще одним важливим аспектом практично кожного сайту. Користувачі мобільних пристроїв можуть не шукати потокове відео, але фотографії - це зовсім інша історія. Вони також є найбільшими винуватцями, коли мова йде про макети, що виходять з коробки моделі.
img max-width: 100%;
Стандартне правило для CSS - застосувати властивість max-width до всіх зображень. Оскільки вони завжди будуть встановлені на 100%, ви ніколи не помітите спотворень. Коли користувач змінює розмір вікна свого веб-переглядача меншим, ніж зображення, яке він може виконати, він автоматично змінить його на 100%. Проблема полягає в тому, що Internet Explorer не може зрозуміти цю властивість, тому вам потрібно буде зібрати спеціальну таблицю стилів за допомогою IE ширина: 100%;.
Гнучкі зображення також можливі, якщо ви використовуєте JavaScript або jQuery плагіни. Є деякі дійсно розумні розробники, які ввели час для створення неймовірно чудового вмісту зображень. Цей потік є лише одним з багатьох у Stack Overflow, який має чудовий, але зручний підхід до вирішення помилок IE6 / 7.
Я б особисто рекомендував дотримуватися природного зміни розміру зображення CSS. Якщо ваш веб-сайт працює в мобільному веб-переглядачі з підтримкою JavaScript, він, ймовірно, також може підтримувати CSS. Якщо ви дійсно хочете глибше копатися, ознайомтеся з 24-ма статтею Зображення для адаптивних конструкцій ...
Торкаючись конструкцій
Веб-розробники можуть забути, що мобільні користувачі більше не працюють на клавіатурних телефонах, таких як BlackBerry. Більшість смартфонів сьогодні використовують інтерфейси з сенсорним екраном, які відтворюють сценарій, який відрізняється від налаштувань миші та клавіатури.
У такому випадку вам необхідно розглянути альтернативні рішення в мобільних елементах. Випадаючі меню можуть працювати краще, коли вони відображаються як окреме меню з правого боку. Більшість користувачів може легко торкатися посилань на правій стороні, ніж ліворуч, але обидві стовпці працюють для полегшення простору. Використовуючи індекси маржі, легко ідентифікувати ієрархію посилань, не вимагаючи жодного коду jQuery.
Також корисно збільшити розмір цих навігаційних посилань. Мобільні користувачі не мають розкішних великих екранів, які можна отримати на настільних комп'ютерах або навіть портативних комп'ютерах. Вам потрібно тримати текст великим, авансовим, можливим і читаним будь-якою ціною. Ви навіть можете змінити розмір, якщо користувач перемикається між портретом та пейзажем - досить поширеним повторенням при перегляді веб-сайтів мобільного.
Власні розкладки CSS
Загалом, краще адаптувати макет і забезпечити природну деградацію вашого вмісту. Якщо у вас є бічна панель та область вмісту, ви повинні встановити їх у ширину відсотків або ems, все, що буде змінено у вікні веб-переглядача. Якщо ви застосуєте a min-width це врешті-решт перерве частину макета; тепер вміст бічної панелі відображається над вмістом сторінки.
(Джерело зображення: Pepperson)
Розглядаючи, як це впливає на загальний дизайн, набагато простіше розробити зовнішні таблиці стилів. Проте ви, швидше за все, зіткнетеся з роздільними здатностями екрану, які занадто малі для оформлення. Це ідеальний сценарій для додавання власних властивостей CSS для видалення частин сторінки або переформатування вмісту.
Увімкнути / вимкнути додатковий вміст
Приклади великих блоків вмісту включають веб-форми, динамічні меню, повзунки зображень та інші подібні ідеї. Замість того, щоб повністю видалити ці елементи, макет стає меншим, чому б не просто приховати їх у “мінімізовано” вміст div? Ви можете використовувати CSS або JavaScript для редагування, але, зрештою, для створення кнопки перемикання, ймовірно, потрібен код JS.
Ця альтернатива ідеально підходить для того, щоб ваша домашня сторінка була динамічною та наповненою багатими веб-носіями. Замість того, щоб повністю видалити навігацію, що випадає, або змінити структуру сторінки, ви можете приховати її в межах вмісту div. Якщо користувач хоче відобразити ваші посилання, вони натискають кнопку перемикання, щоб відкрити / закрити меню.
Це форматування є простим, інтуїтивно зрозумілим і простим у роботі на сенсорних пристроях. Усередині div можна помістити кожне з випадаючого меню поруч у форматі стовпців. Оскільки розмір вікна стає ще меншим, вони природно опускаються один до одного і збільшують висоту сторінки. Проте можливість згортання всього меню легко досягається і лише одним натисканням. Цей перемикач div також ідеально підходить для повзунків зображення у співпраці з динамічним розміром фотографій.
Використання медіазапитів
Якщо на екрані мобільного пристрою відбудеться розрив вашої 2-х або 3-х стовпців, у кожній з областей вмісту буде розташовано один над одним. Весь сайт, здається, кровоточить і може зійти з ладу без помітних блокових областей. Кращою ідеєю є додавання нижньої межі для кожного стовпця, тільки для мобільних пристроїв, використовуючи зовнішню таблицю стилів mobile.css.
За допомогою цих нових стилів ваш вміст розбивається на роздільні ділянки. Атрибут медіа вище спеціально розроблений для націлювання на пристрої старого iPhone в ландшафтному вигляді. Але це також стосуватиметься пристроїв з екранами розміром менше 480 пікселів. Скористайтеся цією перевагою, щоб визначити, в якому пункті розташування “розпадається”.
Для виявлення орієнтації пристрою можна скористатися ще декількома варіантами. Це фантастичне керівництво по CSS медіа може дати вам кілька ідей. Крім того, новий мобільний проект 320 і вище пропонує шаблон для мобільних CSS @media стилів. Вони можуть бути включені безпосередньо в той же файл mobile.css і застосовувати правила для багатьох різних пристроїв.
/ * Смартфони (портретний та ландшафтний) ----------- * / @media тільки екран та (min-device-width: 320px) та (max-device-width: 480px) / * Стилі * / / * Смартфони (ландшафтний) ----------- * / @media тільки екран і (min-width: 321px) / * Стилі * / / * Смартфони (портрет) ---- ------- * / @media тільки для екрана та (max-width: 320px) / * Стилі * / / * iPads (портрет і ландшафт) ----------- * / @ екран тільки для мультимедійних даних та (min-device-width: 768px) та (max-device-width: 1024px) / * Стилі * /
(Джерело: запит медіаданих CSS3)
Корисні інструменти
- Скелет - красивий шаблон для чуйного мобільного дизайну
- Перехід від адаптивного до повноцінного реагування
Вітрина: красива реагує дизайн
Я сподіваюся, що ці поради та методи дизайну заохочуватимуть вас рухатися до створення захоплюючих реагуючих макетів не тільки для мобільних екранів, але й для будь-якого звичайного пристрою з веб-переглядом. Щоб зберегти творчі соки, я зібрав невелику вітрину реагуючих мобільних веб-дизайнів. Обов'язково ознайомтеся з деякими більш унікальними функціями та поділіться своїми думками щодо дизайну або теми в дискусійній області.
підвішування місяця
Готелі Macdonald
CSS-трюки
Щасливі Cog
Тейсидо
CSS Wizardry
Інформаційні архітектори
ART = WORK
Жорсткий веб-дизайн
Sony США
Майбутнє Дружнє
Ми не зупиняємо мислення
Автентичні вакансії
Дизайн Colbow
320 і вище
Вилка CMS
Щасливий біт
Електрична целюлоза
Прийомні реквізити
Плексичний
Торти Preeti
Більше небезпек
Інформаційний центр стоматології
ribot - дизайн інтерфейсу
Привіт, Фішер
Саміт соціальних маркетологів
Вільям Чете
Шерстистий робот
Meltmedia
Залишайтеся з нами!
У завтрашньому повідомленні ми будемо демонструвати деякі безкоштовні відповідні теми WordPress Ви можете завантажити для використання. Обов'язково налаштуйтеся на це.
