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

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

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

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

Історія

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

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

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

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

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

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

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

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

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

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

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

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

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

Тестування

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

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

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

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

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

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

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

Шаблони

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

Mostly fluid

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

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

Column drop

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

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

Layout shifter

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

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

Tiny tweaks

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

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

Off canvas

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

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

Примітки

  1. ↑ а б Marcotte, Ethan (25 травня 2010). Responsive Web design. A List Apart. Архів оригіналу за 24 травня 2013. Процитовано 20 жовтня 2013.
  2. ↑ Cisco Visual Networking Index: Global Mobile Data Traffic Forecast Update 2014–2019 White Paper. Cisco. 30 січня 2015. Архів оригіналу за 2 лютого 2016. Процитовано 12 березня 2016.
  3. ↑ Official Google Webmaster Central Blog: Rolling out the mobile-friendly update. 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. ↑ 15 top web design and development trends for 2012. .net magazine. 9 січня 2012. Архів оригіналу за 30 червня 2017. Процитовано 12 березня 2016.
  6. ↑ Cashmore, Pete (11 грудня 2012). Why 2013 Is the Year of Responsive Web Design. Архів оригіналу за 13 березня 2016. Процитовано 12 березня 2016.
  7. ↑ Wroblewski, Luke (14 березня 2012). Multi-Device Layout Patterns. Архів оригіналу за 30 грудня 2020. Процитовано 12 березня 2016.

Література

  • Ethan Marcotte. Responsive Web Design. — A Book Apart, 2011. — 143 с. — ISBN 978-0-9844425-7-7.
  • Ethan Marcotte. Responsive Web Design. — М., 2012. — 159 с. — ISBN 978-5-91657-385-5.
  • Luke Wroblewski. Mobile first. — М., 2012. — 176 с. — ISBN 978-5-91657-388-6.
  • Ben Frain. Responsive Web Design with HTML5 and CSS3. — Packt Publishing Ltd, 2012. — 324 с. — ISBN 9781849693189.
  • Aaron Gustafson. Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement. — Easy Readers, 2011. — 144 с. — ISBN 978-0-9835895-0-1.

Посилання

Read other articles:

Mark Margolis

American actor (1939–2023) Mark MargolisMargolis at the premiere of Noah in 2014Born(1939-11-26)November 26, 1939Philadelphia, Pennsylvania, U.S.DiedAugust 3, 2023(2023-08-03) (aged 83)New York City, New York, U.S.Alma materTemple UniversityActors StudioOccupationActorYears active1960s–2023Spouse Jacqueline Petcove ​(m. 1962)​Children1 Mark Margolis (/mɑːrˈɡoʊlɪs/, mar-GOH-liss; November 26, 1939 – August 3, 2023) was an American actor, ...

 

Mercury(II) chloride

Chemical compound known as 'corrosive sublimate' Mercury(II) chloride Names IUPAC names Mercury(II) chlorideMercury dichloride Other names Mercury bichlorideCorrosive sublimateAbavitMercuric chlorideSulema (Russia)TL-898AgrosanHydrargyri dichloridum (homeopathy) Identifiers CAS Number 7487-94-7 Y 3D model (JSmol) Interactive image ChemSpider 22517 Y ECHA InfoCard 100.028.454 EC Number 231-299-8 KEGG C13377 Y PubChem CID 24085 RTECS number OV9100000 UNII 53GH7MZT1R Y UN num...

 

Type R ship

USS Aludra (AF-55) (built as SS Matchless a type R2-S-BV1 ship) at sea, 17 September 1954 SS Adria (AF-30), a type R1-M-AV3 Adria-class ship, in 1949 The Type R ship is a United States Maritime Administration (MARAD) designation for World War II refrigerated cargo ship, also called a reefer ship. The R type ship was used in World War II, Korean War, Vietnam War and the Cold War. Type R ships were used to transport perishable commodities which require temperature-controlled transportation, suc...

Suranenggala, Cirebon

SuranenggalaKecamatanNegara IndonesiaProvinsiJawa BaratKabupatenCirebonPemerintahan • CamatMasroekhin, S.STP., M.H.Populasi • Total47,197 jiwaKode Kemendagri32.09.39 Kode BPS3209181 Luas22,03 km²Desa/kelurahan- Gerbang Kecamatan Suranenggala ASN Kecamatan Suranenggala Suranenggala adalah sebuah kecamatan di Kabupaten Cirebon, Provinsi Jawa Barat, Indonesia. Kecamatan Suranenggala terdiri dari 9 desa. Unicha Noberpi Sejarah Suranenggala Sejarah Suranenggala atau d...

 

Синелобый амазон

Синелобый амазон Научная классификация Домен:ЭукариотыЦарство:ЖивотныеПодцарство:ЭуметазоиБез ранга:Двусторонне-симметричныеБез ранга:ВторичноротыеТип:ХордовыеПодтип:ПозвоночныеИнфратип:ЧелюстноротыеНадкласс:ЧетвероногиеКлада:АмниотыКлада:ЗавропсидыКласс:Пт�...

 

Jorge Socías

Questa voce sull'argomento calciatori cileni è solo un abbozzo. Contribuisci a migliorarla secondo le convenzioni di Wikipedia. Segui i suggerimenti del progetto di riferimento. Jorge Socías Nazionalità  Cile Altezza 176 cm Calcio Ruolo Allenatore (ex attaccante) Termine carriera 1984 - giocatore Carriera Squadre di club1 1972-1983 Universidad de Chile318 (88)1984 Unión San Felipe16 (1) Nazionale 1974-1980 Cile4 (0) Carriera da allenatore 1987 Dep. Puerto Montt19...

1792 United States presidential election in Virginia

This article relies largely or entirely on a single source. Relevant discussion may be found on the talk page. Please help improve this article by introducing citations to additional sources.Find sources: 1792 United States presidential election in Virginia – news · newspapers · books · scholar · JSTOR (May 2024) The second U.S. presidential election in Virginia1792 United States presidential election in Virginia ← 1788–89 November 2 – D...

 

Contrôleur général des finances

Jean-Baptiste Colbert Il Contrôleur général des finances (lett. Controllore generale delle finanze) era, sotto l'Ancien Régime, il responsabile ministeriale delle finanze reali in Francia, dopo la soppressione della carica di Surintendant des finances nel 1661, incaricato di amministrare le finanze della monarchia. Jean-Baptiste Colbert fu il primo ed il Contrôleur più famoso, dal 1665 al 1683. Indice 1 Storia 2 Competenze 3 Organizzazione 4 Elenco cronologico 5 Note 6 Bibliografia 7 Vo...

 

Museum Nasional Tiongkok

Museum Nasional TiongkokDidirikan2003; 21 tahun lalu (2003)LokasiBeijingJenisMuseum seni, museum sejarahKoleksiSeni TiongkokUkuran koleksi1,3 jutaWisatawan1,6 juta (2020)[1]DirekturWang Chunfa[2]PemilikKementerian Kebudayaan dan Pariwisata Republik Rakyat Tiongkok.Akses transportasi umum 1  Timur TiananmenSitus weben.chnmuseum.cn (in English) Museum Nasional Tiongkok pada malam hari, Januari 2021 Museum Nasional Tiongkok (Hanzi: 中国国家博物馆; Pinyin...

Max Casella

Max CasellaCasella pada Agustus 2016LahirMaximilian Deitch6 Juni 1967 (umur 56)Washington, D.C., Amerika SerikatPekerjaanPemeranTahun aktif1981–sekarangSuami/istriLeona Robbins ​ ​(m. 2002; separated 2018)​[1]Anak2 Max Casella (lahir Maximilian Deitch; lahir 6 Juni 1967)[2] adalah pemeran Amerika Serikat. Ia paling dikenal untuk perannya dalam seri televisi Doogie Howser, M.D., The Sopranos, Boardwalk Empire, Vinyl, ...

 

Dutch courage

Reduced inhibitions due to alcohol Look up dutch courage in Wiktionary, the free dictionary. Look up pot-valiant in Wiktionary, the free dictionary. Dutch courage, also known as pot-valiance or liquid courage, refers to courage gained from intoxication with alcohol.[1] Uses Criminal See also: Alcohol-related crime For the use of non-intentional offenses, such as drunk walking, see § Alcohol-related crimes. Alcohol is occasionally used by criminals as a tool to commit alcohol-rel...

 

الأوروغواي

  الأوروغواي (بالإسبانية: Repúbilca Oriental del Uruguay)‏  الأوروغوايعلم الأوروغواي  الأوروغوايشعار الأوروغواي    النشيد:  نشيد أوروغواي الوطني  الأرض والسكان إحداثيات 33°S 56°W / 33°S 56°W / -33; -56   [1] أعلى قمة سيرو كاتيدرال  [لغات أخرى]‏  أخفض ن�...

Baron Gainford

Title in the Peerage of the United Kingdom Baron Gainford, of Headlam in the County Palatine of Durham, is a title in the Peerage of the United Kingdom.[1] It was created on 3 January 1917 for the Liberal politician Jack Pease, a member of the Darlington Pease family. He notably served as President of the Board of Education from 1911 to 1915. Pease was the second son of Sir Joseph Pease, 1st Baronet, and the grandson of Joseph Pease, while Arthur Pease was his uncle and Sir Arthur Pea...

 

Convoy commodore

Convoy commodoreEnsign of the Royal NavyAdmiraltyAppointerFirst Lord of the AdmiraltyTerm lengthNot fixedFormation1939–1945 Convoy commodore also known as commodore, convoys was the title of a civilian put in charge of the good order of the merchant ships in the British convoys used during World War II. Usually the convoy commodore was a retired naval officer or a senior merchant captain drawn from the Royal Naval Reserve. He was aboard one of the merchant ships. The convoy commodore was di...

 

Tumors of the hematopoietic and lymphoid tissues

Tumors that affect the blood, bone marrow, lymph, and lymphatic system Medical conditionTumors of the hematopoietic and lymphoid tissuesMicrograph of a plasmacytoma, a hematological malignancy Tumors of the hematopoietic and lymphoid tissues (American English) or tumours of the haematopoietic and lymphoid tissues (British English) are tumors that affect the blood, bone marrow, lymph, and lymphatic system.[1][2] Because these tissues are all intimately connected through both th...

The Reason of Church-Government Urged against Prelaty

The Reason of Church-Government Urged against Prelaty is an essay by English poet John Milton distributed as one of a series of religious pamphlets by the writer. Published in 1642, the political work details Milton's preference for a Presbyterian approach to the Church of England over approaches favoured by the episcopal organization of the time. Milton states that this form of worship stems from Hebrew scriptures. The essay was meant as a response to the beliefs of Bishop Joseph Hall and A...

 

Anna Freud

Austrian–British psychoanalyst (1895–1982) Anna FreudFreud in 1957Born3 December 1895Vienna, Austria-HungaryDied9 October 1982(1982-10-09) (aged 86)London, EnglandResting placeGolders Green CrematoriumNationalityAustrian (1895–1946) British (1946–1982)OccupationPsychoanalystKnown forChild analysis, ego psychologyParentsSigmund Freud (father)Martha Bernays (mother)RelativesFreud family Part of a series of articles onPsychoanalysis Concepts Psychosexual development Psychosocia...

 

石井啓一

日本の政治家石井 啓一いしい けいいち 2023年3月15日、首相官邸生年月日 (1958-03-20) 1958年3月20日（66歳）出生地 日本 東京都豊島区出身校 東京大学工学部土木工学科前職 建設省技官所属政党 （公明党→）（公明新党→）（新進党→）（新党平和→）公明党称号 工学士公式サイト 公明党幹事長 衆議院議員 石井啓一オフィシャルサイト 第20-21代 国土交通大臣内閣 第3次安�...

Ticket (election)

A single election choice which fills more than one political office or seat This article needs additional citations for verification. Please help improve this article by adding citations to reliable sources. Unsourced material may be challenged and removed.Find sources: Ticket election – news · newspapers · books · scholar · JSTOR (December 2023) (Learn how and when to remove this message)The examples and perspective in this article deal primarily...

 

Battle of Driefontein

1900 battle of Second Boer War Battle of DriefonteinPart of Second Boer WarDate10 March 1900Locationnear Bloemfontein, Orange Free StateResult British victoryBelligerents  United Kingdom  South African Republic Orange Free StateCommanders and leaders Lord Roberts Robert George Broadwood Thomas Kelly-Kenny[1] Christiaan de WetStrength ~6000 men2 Vickers guns[1]Casualties and losses 82 killed342 wounded[2] 102 killed22 POW[2]vteSecond Boer War1899 ...