Отзивчиви Design

Адаптивният дизайн е подход за изграждане на уеб интерфейси, които се адаптират към размера и възможностите на устройството, което ги показва, използвайки флуидни оформления, гъвкави изображения и CSS медийни заявки за пренареждане на единна кодова база в различните viewport-ове. Въведен като именована практика от Итън Маркот през 2010 г., той замени по-ранния подход за поддържане на отделни настолни и мобилни сайтове и сега е стандартното очакване за почти цялата уеб работа.

Основното му предимство е поддържането на една имплементация, а не на няколко. Отделните мобилни сайтове се разминават с времето, натрупват несъответствия, усложняват анализите и индексирането на търсенето и удвояват цената на всяка промяна. Адаптивната имплементация поддържа съдържанието, URL адресите и функционалността унифицирани, което също е в съответствие с начина, по който търсачките индексират и класират страниците, тъй като индексирането „mobile-first“ оценява мобилното изобразяване на един и същ URL адрес.

Често срещано погрешно схващане е, че адаптивният дизайн означава само, че оформлението не се „чупи“. Преформатирането на колони в стек в тесен прозорец за преглед е минимумът, а не целта. Истинската адаптивност отчита различния контекст, възможности и намерения, свързани с различните устройства: цели за докосване, оразмерени за пръсти, а не за курсори, модели на навигация, подходящи за малки екрани, а не за компресирани менюта на работния плот, приоритизиране на съдържанието, което поставя най-важния материал на първо място, когато всичко е подредено вертикално, и формуляри, които използват подходящи типове въвеждане и клавиатури.

Производителността е мястото, където адаптивните имплементации най-често се провалят на практика. Оформление, което се адаптира визуално, като същевременно изтегля изображения с размер за десктоп, пълни JavaScript пакети и ненужни компоненти, предоставя страница, която изглежда правилно, но се представя зле точно на устройствата и връзките, които най-малко могат да поемат разходите. Адаптивните изображения с подходящи набори от източници, условното зареждане на компоненти, които не се показват в малки екрани за преглед, и отлагането на некритични ресурси са това, което прави подхода работещ на практика, а не само в браузър, преоразмерен на десктоп.

Тестването на адаптивна работа изисква реални устройства, а не само преоразмеряване на браузъра. Емулаторите не възпроизвеждат неточността на докосване, действителните мрежови условия, ограниченията на паметта на хардуер от среден клас или начина, по който системните клавиатури и браузърът Chrome консумират вертикално пространство. Много от най-често срещаните дефекти, включително входовете, скрити от клавиатурата, лепкавите елементи, които заемат по-голямата част от малкия екран, и хоризонталното препълване, причинено от един широк елемент, са невидими в емулацията на десктоп и веднага очевидни на телефона.

Адаптивната работа трябва да отчита и мащабирането и приближението на текста, които често се пренебрегват и са често срещан източник на проблеми с достъпността. Оформление, изградено с фиксирани размери в пиксели, може да се преоформи правилно по ширината на устройството, но да се счупи напълно, когато потребителят увеличи размера на текста по подразбиране на браузъра си или го приближи до двеста процента, което е настройка, на която значителен брой хора разчитат постоянно. Съдържание, което препълва контейнерите, се отрязва или изисква хоризонтално превъртане при тези условия, не отговаря нито на стандартите за използваемост, нито на стандартите за достъпност. Тестването при увеличен размер на текста и високи нива на мащабиране отнема минути и улавя категория дефекти, които тестването на ширината на устройството никога не разкрива, тъй като двете ограничения натоварват оформлението по различни начини.

Тъй като адаптивността обхваща оформлението, стратегията за съдържание и доставката, тя рядко се подобрява само чрез коригиране на точките на прекъсване. Дизайн на продукта Работата с трайния подход е да се дефинира оформление, разстояние и поведение на компонентите в различните viewport-ове в рамките на система за проектиране, така че новите страници да наследяват правилното поведение по подразбиране. Производителността е част от... уеб изпълнение работа, тъй като разликата между адаптивен сайт, който конвертира на мобилни устройства, и такъв, който не го прави, обикновено е в теглото и стратегията за зареждане, а не в оформлението.