Зображення користувача Світ Зелений.
Світ Зелений
  • Відвідувань: 2
  • Переглядів: 2

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

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

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

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

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

Якщо ви помітили помилку, то виділіть фрагмент тексту не більше 20 символів і натисніть Ctrl+Enter
Теги: 
код
Підписуюсь на новини

Зверніть увагу

Передчуття Великого джигаду

Фільм і роман «Дюна» як війна людей і психопатів – три вибухові ідеї таємного послання Френка Герберта

Моад’Діб став рукою Господньою – і пророцтво вільних справдилося. Моад’Діб приносив мир туди, де була війна. Моад’Діб приносив любов туди, де панувала ненависть. Він повів свій народ до справжньої...

Останні записи

Кращий коментар

Зображення користувача Оксана Колосовська.
0
Ще не підтримано

Дякую! треба буде спробувати.

Коментарі

Зображення користувача Оксана Колосовська.
0
Ще не підтримано

Дякую! треба буде спробувати.