- Відвідувань: 3
- Переглядів: 3
Адаптивний веб-дизайн
Світ:
responsive-web-design.png
Адаптивний веб-дизайн (англ. Responsive web design) — дизайн веб-сторінок, що забезпечує оптимальне відображення та взаємодію сайту з користувачем незалежно від роздільної здатності та формату пристрою, з якого здійснюється перегляд сторінки.
Метою адаптивного веб-дизайну є практичне відображення інформації та зручна навігація на всіх пристроях із доступом до інтернету (від стаціонарних ПК до мобільних телефонів). За технологією адаптивного веб-дизайну не потрібно створювати окремі версії веб-сайту. Один сайт може працювати на всьому спектрі пристроїв.[1]
Популярність адаптивного веб-дизайну зростає з кожним днем так як вже зараз кількість мобільного трафіку сягає більше половини від всього інтернет трафіку.[2] Ця тенденція настільки поширена, що Google 21 квітня 2015 року запустив у своїй пошуковій системі алгоритм оцінки сайту на відповідність принципам «дружного» до мобільних пристроїв інтерфейсу.[3] Від цього показника залежить як високо сторінка буде представлена в результатах мобільного пошуку, а отже дана оцінка частково діє як штраф для сайтів, які не відповідають стандартам інтерфейсу для мобільних пристроїв.
Ця стаття для тих хто розуміється хоча б мінімально в програмному коді або хоче в ному розібратися, дбає про гарний, коректний вигляд своїх сторінок, для редакторів сайту.
Більшість блогерів, гравців роблять одні і ті ж помилки, викладаючи щось складніше за текст:
- видиво,
- зображення,
- таблиці,
- презентації,
- мапи,
- лінки на піблікації в фейсбуці, або інших сервісах,
а саме: все вище перечислене вставляють в свої сторінки так як є тобто в такому вигляді, в якому вони є на тих ресурсах, звідки матеріали запозичені і за розміром пристосовані до тих ресурсів.
За розміром матеріали можуть бути замалі, \ або завеликі.
Колись сам цим грішив і бачу це в інших.
Розмір наприклад малюнка визначається атрибутом width ширина вимірюється в пікселях або в відносних одиницях напиклад процентах %.
Зазвичай виставляються фіксовані розміри в пікселях. Якщо дасте розмір 600 пікселів, то малюнок буде завеликий і вилізе за межі середньої колонки макетної сітки.
500 - добре для декстопу але завеликий для смартфону
Я пропоную давати розмір 100%.
Приклад.
публікація "27 Конференція Інституту Міжмор'я. Знайомство: Ірина Чорна про Живе слово і живу їжу"
тут все добре крім розміру видива
код видива :
Щоб подивитись (скопіювати) код в рамці наводимо курсор на правий нижній край рамки і, утримуючилівою кнопкою миші, тягнемо вправо-вниз
<iframe allowfullscreen="" frameborder="0" height="315px" src="https://www.youtube.com/embed/ffzDXoBwNys" width="560px" </iframe>
в коді нас цікавить ширина елементу виділена червоним width="560px"
міняємо в цьому коді те що між подвійними лапками: 560рх на 100% . Технічною мовою цю фразу можна записати так: міняємо значення атрибуту ширини з 560рх на 100%.
<iframe allowfullscreen="" frameborder="0" height="315px" src="https://www.youtube.com/embed/ffzDXoBwNys" width="100%" </iframe>
Тепер видиво відтворюється коректно.
Вчимося створювати сучасні адаптивні веб сторінки
Коментарі
Дякую! треба буде спробувати.