Важливість: 
4
Адаптивний веб-дизайн

Метою адаптивного веб-дизайну є практичне відображення інформації та зручна навігація на всіх пристроях із доступом до інтернету (від стаціонарних ПК до мобільних телефонів). За технологією адаптивного веб-дизайну не потрібно створювати окремі версії веб-сайту. Один сайт може працювати на всьому спектрі пристроїв.[1]

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>

Тепер видиво відтворюється коректно.

Наші інтереси: 

Вчимося створювати сучасні адаптивні веб сторінки

Гравець: 
Світ Зелений

Теги:

Новини від RedTram - для популяризації НО

 
Форум Підтримати сайт Довідка