Azərbaycanca AzərbaycancaБеларускі БеларускіDansk DanskDeutsch DeutschEspañola EspañolaFrançais FrançaisIndonesia IndonesiaItaliana Italiana日本語 日本語Қазақ ҚазақLietuvos LietuvosNederlands NederlandsPortuguês PortuguêsРусский Русскийසිංහල සිංහලแบบไทย แบบไทยTürkçe TürkçeУкраїнська Українська中國人 中國人United State United StateAfrikaans Afrikaans
Підтримка
www.wikidata.uk-ua.nina.az

Адаптивний вебдизайн англ Responsive web design дизайн вебсторінок що забезпечує оптимальне відображення та взаємодію са

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

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

Адаптивний вебдизайн (англ. Responsive web design) — дизайн вебсторінок, що забезпечує оптимальне відображення та взаємодію сайту з користувачем незалежно від роздільної здатності та формату пристрою, з якого здійснюється перегляд сторінки.

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

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

Історія

Першим сайтом, на якому був використаний макет, що змінювався відповідно до ширини браузера, став Audi.com, запущений наприкінці 2001 року. Сайт був розроблений компанією [en]. У браузері Internet Explorer макет міг змінюватись динамічно із зміною розміру. Проте у Netscape сторінка повинна була перезавантажитись із сервера при зміні розміру браузера.

У травні 2010 року Ітан Маркотт ввів термін адаптивний вебдизайн та описав основні принципи у статті «A List Apart». Він також описав теорію і практичне застосування адаптивного вебдизайну в своїй книзі під назвою «Responsive Web Design», яка була видана 2011 року.

Адаптивний дизайн був внесений другим номером до списку топ вебдизайн тенденцій станом на 2012 за версією журналу «.net».[en] назвав 2013 роком адаптивного вебдизайну. Багато інших джерел рекомендували адаптивний дизайн як економічну альтернативу мобільним додаткам.

Основні принципи

image
Desktop first (зліва) та mobile first (справа)

Підходи до побудови

Існує два підходи до побудови адаптивного веб дизайну. Розробка починається або з мобільного інтерфейсу, а далі відбувається адаптація інтерфейсу для інших розширень (англ. mobile first), або, навпаки, розробка починається від вигляду на екранах стаціонарних ПК і закінчується інтерфейсом на мобільних телефонах (англ. desktop first).

image
Відносні одиниці вимірювання

Відносні одиниці вимірювання

Область перегляду сторінки може бути монітором, екраном мобільного або яким завгодно пристроєм. Щільність пікселів на різних екранах також різна, тому потрібні гнучкі одиниці вимірювання, що працюють всюди. Адаптивний дизайн — саме той випадок, коли відносні одиниці вимірювання на зразок відсотків стають дійсно корисними. За допомогою відсотків можливо поставити блоку ширину в 50 %, і на будь-якому пристрої він буде займати лише половину екрану.

image
Дизайн з контрольною точкою(зліва) та без(справа)

Контрольні точки

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

Тестування

Для тестування адаптивного вебдизайну існують такі основні способи.

Мобільні емулятори

Емулятор дозволяє перевірити адаптивність і функціональність вебсайту на різних мобільних платформах, таких як iPhone, IPAD, Android і BlackBerry, фактично не використовуючи самого пристрою. Мобільні емулятори можуть допомогти визначити проблеми вебсайту і дозволять прийняти коригуючі заходи, щоб зробити сайт візуально привабливим та функціональним на мобільних пристроях.

Вебсервіси для тестів

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

Зміна розміру браузеру

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

Шаблони

Люк Вроблевскі запропонував зібрання шаблонів адаптивного вебдизайну.

image
Mostly fluid

Перетічний (англ. mostly fluid)

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

image
Column drop

Спадні стовпці (англ. column drop)

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

image
Layout shifter

Рухомий макет (англ. layout shifter)

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

image
Tiny tweaks

Крихітні зміни (англ. tiny tweaks)

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

image
Off canvas

Поза тлом (англ. off canvas)

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

Примітки

  1. Marcotte, Ethan (25 травня 2010). Responsive Web design. A List Apart. Архів оригіналу за 24 травня 2013. Процитовано 20 жовтня 2013.
  2. . Cisco. 30 січня 2015. Архів оригіналу за 2 лютого 2016. Процитовано 12 березня 2016.
  3. . Official Google Webmaster Central Blog. Архів оригіналу за 8 березня 2016. Процитовано 12 березня 2016.
  4. Kalbach, Jim (July 22, 2012). «The First Responsive Design Website: Audi (circa 2002).» [ 4 березня 2016 у Wayback Machine.]
  5. . .net magazine. 9 січня 2012. Архів оригіналу за 30 червня 2017. Процитовано 12 березня 2016.
  6. Cashmore, Pete (11 грудня 2012). . Архів оригіналу за 13 березня 2016. Процитовано 12 березня 2016.
  7. Wroblewski, Luke (14 березня 2012). . Архів оригіналу за 30 грудня 2020. Процитовано 12 березня 2016.

Література

  • Ethan Marcotte. Responsive Web Design. — A Book Apart, 2011. — 143 с. — .
  • Ethan Marcotte. Responsive Web Design. — М., 2012. — 159 с. — .
  • Luke Wroblewski. Mobile first. — М., 2012. — 176 с. — .
  • Ben Frain. Responsive Web Design with HTML5 and CSS3. — Packt Publishing Ltd, 2012. — 324 с. — .
  • Aaron Gustafson. Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement. — Easy Readers, 2011. — 144 с. — .

Посилання

  • (ісп.). Архів оригіналу за 20 жовтня 2013. Процитовано 13 січня 2012.1
  • Електронний довідник CSS і HTML [ 28 листопада 2020 у Wayback Machine.] (укр.)

Вікіпедія, Українська, Україна, книга, книги, бібліотека, стаття, читати, завантажити, безкоштовно, безкоштовно завантажити, mp3, відео, mp4, 3gp, jpg, jpeg, gif, png, малюнок, музика, пісня, фільм, книга, гра, ігри, мобільний, телефон, android, ios, apple, мобільний телефон, samsung, iphone, xiomi, xiaomi, redmi, honor, oppo, nokia, sonya, mi, ПК, web, Інтернет

Adaptivnij vebdizajn angl Responsive web design dizajn vebstorinok sho zabezpechuye optimalne vidobrazhennya ta vzayemodiyu sajtu z koristuvachem nezalezhno vid rozdilnoyi zdatnosti ta formatu pristroyu z yakogo zdijsnyuyetsya pereglyad storinki Metoyu adaptivnogo vebdizajnu ye praktichne vidobrazhennya informaciyi ta zruchna navigaciya na vsih pristroyah iz dostupom do internetu vid stacionarnih PK do mobilnih telefoniv Za tehnologiyeyu adaptivnogo vebdizajnu ne potribno stvoryuvati okremi versiyi vebsajtu Odin sajt mozhe pracyuvati na vsomu spektri pristroyiv Populyarnist adaptivnogo vebdizajnu zrostaye z kozhnim dnem tak yak vzhe zaraz kilkist mobilnogo trafiku syagaye bilshe polovini vid vsogo internet trafiku Cya tendenciya nastilki poshirena sho Google 21 kvitnya 2015 roku zapustiv u svoyij poshukovij sistemi algoritm ocinki sajtu na vidpovidnist principam druzhnogo do mobilnih pristroyiv interfejsu Vid cogo pokaznika zalezhit yak visoko storinka bude predstavlena v rezultatah mobilnogo poshuku a otzhe dana ocinka chastkovo diye yak shtraf dlya sajtiv yaki ne vidpovidayut standartam interfejsu dlya mobilnih pristroyiv IstoriyaPershim sajtom na yakomu buv vikoristanij maket sho zminyuvavsya vidpovidno do shirini brauzera stav Audi com zapushenij naprikinci 2001 roku Sajt buv rozroblenij kompaniyeyu en U brauzeri Internet Explorer maket mig zminyuvatis dinamichno iz zminoyu rozmiru Prote u Netscape storinka povinna bula perezavantazhitis iz servera pri zmini rozmiru brauzera U travni 2010 roku Itan Markott vviv termin adaptivnij vebdizajn ta opisav osnovni principi u statti A List Apart Vin takozh opisav teoriyu i praktichne zastosuvannya adaptivnogo vebdizajnu v svoyij knizi pid nazvoyu Responsive Web Design yaka bula vidana 2011 roku Adaptivnij dizajn buv vnesenij drugim nomerom do spisku top vebdizajn tendencij stanom na 2012 za versiyeyu zhurnalu net en nazvav 2013 rokom adaptivnogo vebdizajnu Bagato inshih dzherel rekomenduvali adaptivnij dizajn yak ekonomichnu alternativu mobilnim dodatkam Osnovni principiDesktop first zliva ta mobile first sprava Pidhodi do pobudovi Isnuye dva pidhodi do pobudovi adaptivnogo veb dizajnu Rozrobka pochinayetsya abo z mobilnogo interfejsu a dali vidbuvayetsya adaptaciya interfejsu dlya inshih rozshiren angl mobile first abo navpaki rozrobka pochinayetsya vid viglyadu na ekranah stacionarnih PK i zakinchuyetsya interfejsom na mobilnih telefonah angl desktop first Vidnosni odinici vimiryuvannyaVidnosni odinici vimiryuvannya Oblast pereglyadu storinki mozhe buti monitorom ekranom mobilnogo abo yakim zavgodno pristroyem Shilnist pikseliv na riznih ekranah takozh rizna tomu potribni gnuchki odinici vimiryuvannya sho pracyuyut vsyudi Adaptivnij dizajn same toj vipadok koli vidnosni odinici vimiryuvannya na zrazok vidsotkiv stayut dijsno korisnimi Za dopomogoyu vidsotkiv mozhlivo postaviti bloku shirinu v 50 i na bud yakomu pristroyi vin bude zajmati lishe polovinu ekranu Dizajn z kontrolnoyu tochkoyu zliva ta bez sprava Kontrolni tochki Kontrolni tochki dozvolyayut zminyuvati roztashuvannya blokiv na storinci tilki v razi vikoristannya ekranu z pevnimi rozmirami Napriklad na stacionarnih komp yuterah na storinci bude tri kolonki a na mobilnih telefonah tilki odna Kontrolni tochki viznachaye kontent storinki tobto rozrobnik postupovo pochinayuchi vid pevnoyi tochki zminyuye rozmir i koli roztashuvannyu kontentu potribni zmini vstanovlyuye kontrolnu tochku Isnuye inshij pidhid yakij bazuyetsya na stvorennya kontrolnih tochok dlya najbilsh poshirenih pristroyiv prote zvazhayuchi na zbilshennya kilkosti nestandartnih rozshiren ekraniv cej pidhid ne ye populyarnim TestuvannyaDlya testuvannya adaptivnogo vebdizajnu isnuyut taki osnovni sposobi Mobilni emulyatori Emulyator dozvolyaye pereviriti adaptivnist i funkcionalnist vebsajtu na riznih mobilnih platformah takih yak iPhone IPAD Android i BlackBerry faktichno ne vikoristovuyuchi samogo pristroyu Mobilni emulyatori mozhut dopomogti viznachiti problemi vebsajtu i dozvolyat prijnyati koriguyuchi zahodi shob zrobiti sajt vizualno privablivim ta funkcionalnim na mobilnih pristroyah Vebservisi dlya testiv Sajti nadayut dostup do stacionarnih i mobilnih pristroyiv shob vebrozrobniki mogli testuvati svoyi adaptivni vebdizajni Brauzeri Firefox ta Chrome u svoyemu funkcionali dozvolyayut modelyuvati viglyad vebdizajnu na najpopulyarnishih pristroyah Zmina rozmiru brauzeru Pri rozrobci sajtu shob shvidko pereviriti povedinku sajtu dostatno zminiti rozmir vikna brauzera Ce korisno dlya shvidkoyi perevirki zmini kodu prote cej metod ne varto porivnyuvati z usima inshimi adzhe ye nadto bagato aspektiv yaki ne vrahovuye danij tip perevirki ShabloniLyuk Vroblevski zaproponuvav zibrannya shabloniv adaptivnogo vebdizajnu Mostly fluidPeretichnij angl mostly fluid Populyarnij i ne zvazhayuchi na ce prostij shablon Maket skladayetsya z dekilkoh kolonok rozmiri yakih na ekranah velikoyi ta serednoyi shirini zalishayutsya nezminnimi a zminyuyutsya lishe polya Na nevelikih ekranah vidbuvayetsya zmina rozmiru kontentu ta stovpci rozmishuyutsya odin pid odnim Column dropSpadni stovpci angl column drop Vikoristovuyetsya v maketah sho skladayutsya z dekilkoh stovpciv yaki zajmayut vsyu shirinu ekranu Koli shirina vikna staye zanadto maloyu dlya vidobrazhennya vsogo kontentu shablon rozmishuye stovpci odin za odnim po vertikali Z chasom ce prizvodit do togo sho vsi stovpci budut roztashovani vertikalno odin pid odnim Vibir kontrolnih tochok dlya cogo shablonu zalezhit vid kontentu i viznachayetsya dlya kozhnogo variantu dizajnu okremo Layout shifterRuhomij maket angl layout shifter Danij shablon ye najbilsh adaptivnim oskilki v nomu peredbacheno nayavnist dekilkoh kontrolnih tochok dlya ekraniv riznoyi shirini Osnovnoyu vidminnistyu cogo maketa ye te sho zamist rozmishennya stovpciv odin pid odnim ruhayetsya sam kontent Cherez znachni vidminnosti mizh osnovnimi kontrolnimi tochkami pidtrimka cogo maketa ye bilsh skladnim zavdannyam krim togo dovoditsya zminyuvati ne tilki zagalnij maket kontentu ale i jogo elementi Tiny tweaksKrihitni zmini angl tiny tweaks Danij shablon vnosit neveliki zmini v maket napriklad regulyuye rozmir shriftu zminyuye rozmir zobrazhen chi peremishuye kontent Vin dobre pracyuye na maketah sho skladayutsya z odnogo stovpchika yak odnostorinkovi linijni vebsajti i statti z velikoyu kilkistyu tekstu Off canvasPoza tlom angl off canvas U vsih vishe perelichenih shablonah prisutnya tendenciya do rozmishennya elementiv kontentu vertikalno odin pid odnim Danij shablon vikoristovuye inshij pidhid Kontent yakij vikoristovuyetsya ridko napriklad elementi navigaciyi abo menyu rozmishuyetsya za mezhami ekranu i vikoristovuyutsya tilki todi koli ce dozvolyaye zrobiti rozmir ekranu Na nevelikih ekranah kontent mozhna vidkriti za dopomogoyu dodatkovoyi knopki chasto vikoristovuyetsya ikonka gamburgera PrimitkiMarcotte Ethan 25 travnya 2010 Responsive Web design A List Apart Arhiv originalu za 24 travnya 2013 Procitovano 20 zhovtnya 2013 Cisco 30 sichnya 2015 Arhiv originalu za 2 lyutogo 2016 Procitovano 12 bereznya 2016 Official Google Webmaster Central Blog Arhiv originalu za 8 bereznya 2016 Procitovano 12 bereznya 2016 Kalbach Jim July 22 2012 The First Responsive Design Website Audi circa 2002 4 bereznya 2016 u Wayback Machine net magazine 9 sichnya 2012 Arhiv originalu za 30 chervnya 2017 Procitovano 12 bereznya 2016 Cashmore Pete 11 grudnya 2012 Arhiv originalu za 13 bereznya 2016 Procitovano 12 bereznya 2016 Wroblewski Luke 14 bereznya 2012 Arhiv originalu za 30 grudnya 2020 Procitovano 12 bereznya 2016 LiteraturaEthan Marcotte Responsive Web Design A Book Apart 2011 143 s ISBN 978 0 9844425 7 7 Ethan Marcotte Responsive Web Design M 2012 159 s ISBN 978 5 91657 385 5 Luke Wroblewski Mobile first M 2012 176 s ISBN 978 5 91657 388 6 Ben Frain Responsive Web Design with HTML5 and CSS3 Packt Publishing Ltd 2012 324 s ISBN 9781849693189 Aaron Gustafson Adaptive Web Design Crafting Rich Experiences with Progressive Enhancement Easy Readers 2011 144 s ISBN 978 0 9835895 0 1 Posilannya isp Arhiv originalu za 20 zhovtnya 2013 Procitovano 13 sichnya 2012 1 Elektronnij dovidnik CSS i HTML 28 listopada 2020 u Wayback Machine ukr

Дата публікації:
Топ