Адаптивний розмір тексту

Розмір тексту може бути встановлений за допомогою “vw” одиниці, що означає “viewport width” (ширина області перегляду).

Таким чином, розмір тексту буде відповідати розміру вікна браузера:

Hello World

Змініть розмір вікна браузера, щоб побачити, як масштабується розмір тексту.

Приклад

Hello World

Вікно перегляду – це розмір вікна браузера. 1vw = 1% ширини області перегляду. Якщо ширина вікна складає 50 см, 1vw – 0,5 см.

Медіа запити

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

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

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

Приклад

.main float: left;
width: 60%; /* Ширина 60%, за умовчанням */
>

/* Використовуйте медіа-запит, щоб додати точку переходу на 800px: */
@media screen and (max-width: 800px) .left, .main, .right width: 100%; /* Ширина складає 100%, коли область перегляду складає 800 пікселів або менше */
>
>

Порада: Щоб дізнатися більше про медіазапити і адаптивний веб-дизайн, прочитайте RWD Підручник на нашому сайті W3Schools українською.

Адаптивна веб-сторінка – Повний приклад

Адаптивна веб-сторінка повинна добре виглядати на великих екранах настільних комп’ютерів і на невеликих мобільних телефонах.

Адаптивний веб-дизайн – фреймворки

Є досить багато CSS-фреймворків, які пропонують адаптивний веб-дизайн.

Вони безкоштовні і прості у використанні.

Використання фреймворку W3.CSS

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

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

W3.CSS Демо

Змініть розмір сторінки, щоб побачити адаптивність!

London

London is the capital city of England.

It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Paris

Paris is the capital of France.

The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.

Tokyo

Tokyo is the capital of Japan.

It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.

Приклад

Щоб дізнатися більше про W3.CSS, прочитайте W3.CSS Підручник на нашому сайті W3Schools українською.

Фреймворк Bootstrap

Інший популярний фреймворк – Bootstrap, він використовує HTML, CSS і jQuery для створення адаптивних веб-сторінок.

Приклад

Щоб дізнатися більше про Bootstrap, перейдіть на Bootstrap Підручники на нашому сайті W3Schools українською.

ПАЛІТРА КОЛЬОРІВ

ПРИЄДНУЙТЕСЬ!

Зв’язок з адміном

Якщо ви хочете повідомити про помилку, а також внести пропозиції про роботу сайту, додати оголошення, рекламу на сайт і т.п., відправте адміну електронного листа на email:

Підручники

Довідники

Приклади

Веб-Сертифікати

Цей сайт оптимізований для навчання і тестування. Приклади можуть бути спрощені для поліпшення читання і базового розуміння. Навчальні посібники, посилання і приклади постійно переглядаються, щоб уникнути помилок, але ми не можемо гарантувати повну правильність і працездатність всього контенту. Використовуючи цей сайт, ви погоджуєтеся з тим, що прочитали і прийняли умови використання, cookie і політику конфіденційності.
Також ви можете абсолютно безкоштовно скачати офлайн версію сайту W3Schools українською архівом з GitHub і користуватися локально на своєму комп’ютері.
Також доступна версія сайту W3Schools англійською мовою.
Copyright 1999-2024 by Refsnes Data. All Rights Reserved.
Сайт створений і працює на фреймворку W3.CSS.

Мобільний веб-дизайн 10 порад для кращого юзабіліті

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

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

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

1. Визначте роздільну здатність екрана

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

Ось список веб-резолюцій, популярних на мобільних пристроях, починаючи з лютого 2011 року, представлених Uxbooth.com з їх опублікованою статтею, Міркування для мобільного веб-дизайну (Частина 2): Розміри, Девід Леггетт. Автор пояснює кілька моментів щодо розмірів дисплея та рішень для макетування.

2. Розбийте веб-сторінки невеликими порціями

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

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

3. Спростити конструкцію

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

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

4. Можливість перегляду повного веб-сайту

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

Наприклад, Ars Technica має свою кнопку посилання на стандартний сайт, розміщений на заголовку. В той час, як Shangri-La мають їхній повний зв’язок вебсайту розміщеного на footer.

5. Розташування навігації

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

6. Використовуйте текстові посилання

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

7. Зробіть різницю між вибраним посиланням

Переміщення курсору вниз призведе до прокрутки сторінки та висвітлення посилань відразу. Отже, важливо чітко порадити користувачеві, який елемент знаходиться у фокусі. Це можна зробити, змінивши колір шрифту та кольору тла посилань і кнопок, або просто додавши кілька посилань навколо посилань, щоб збільшити область, що піддається кліку, приблизно 44px на 44px. Geek Squad і Diesel використовували великі шрифти для текстового тексту.

8. Балансові ланки

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

9. Зменште введення тексту користувача

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

Для нашого зразка нижче, Fedex використовував контрольний список і випадаюче меню. Поки Tumblr змусив вас вибрати мову, використовуючи випадаюче меню.

10. Ніяких вискоків або освіжень

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

Коротко

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

Чи є у вас бажані сайти для мобільних пристроїв, які дійсно вас надихнули? Чи можете ви поділитися деякими своїми порадами щодо веб-дизайну? Дайте нам знати!

Подальше читання

1. Чуйний веб-дизайн (alistapart.com)
2. Зробіть свій сайт мобільним (thinkvitamin.com)
3. W3C mobileOK Checker (w3.org)
4. iPhone Simulator