Реактивен уеб дизайн: Тайната за изграждане на уеб приложения, които се чувстват невероятно

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

Считам, че тези техники са достатъчно важни, че се нуждаят от име: Реактивен уеб дизайн.

В обобщение, реактивният уеб дизайн е набор от техники, които могат да бъдат използвани за създаване на сайтове, които винаги се чувстват бързи и отзивчиви към въвеждането на потребителите, независимо от скоростта или закъснението на мрежата.

Като уеб разработчици и автори на рамки вярвам, че намирането на начини да направим тези модели по подразбиране във всичко, което изграждаме, е основен приоритет за подобряване на UX и възприеманата производителност в мрежата.

Техника 1: Незабавни натоварвания със скелетни екрани

Когато се използва добре, тази техника почти никога не се забелязва, но има огромно влияние върху възприеманата ефективност на даден сайт.

Интересното е, че техниката се използва от почти всички местни приложения и ги кара да се чувстват много реактивни дори в ужасни мрежи, но почти никога не се използва в мрежата!

Възможността по този начин се крие!

Накратко, скелетните екрани гарантират, че всеки път, когато потребителят натисне някой бутон или връзка, страницата реагира незабавно, като прехвърли потребителя към тази нова страница и след това се зареди със съдържание на тази страница, когато съдържанието стане достъпно.

Facebook, използвайки скелетен екран, за да подобри възприеманата производителност, когато го отворите за първи път

Екраните за скелет са ключова възприемана техника за изпълнение, тъй като те правят приложенията да се чувстват много по-бързо, като намаляват драстично броя на моментите, в които потребителят остава да се чуди:

Какво става? Дали дори се зарежда? Правилно ли съм го докоснал?

Flipkart.com е рядък пример за уебсайт, който използва този подход. Следователно разглеждането на категории или натискане на продукти се чувства светкавично, дори когато действителните резултати отнемат няколко секунди:

Екранна снимка на flipkart.com стартира от началния екран в самостоятелен режим на Android

Когато тази техника се използва най-добре, съдържанието, което вече е на разположение, като миниатюри или заглавия на статии, може да се използва повторно, за да се подобри още по-добре възприеманата производителност, като натоварванията се чувстват наистина мигновени.

app.jalantikus.com използва модела на екраните на скелета и използва заглавия и миниатюри през преходите

Тестване на сайтове със скелетни екрани

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

Най-бавната скорост, поддържана в емулацията на мрежата на Chrome

Техника 2: „Стабилни товари“ чрез предварително определени размери на елементи

Знаеш ли това усещане, когато уебсайт скача наоколо, докато се опитваш да го използваш? Просто се опитваш да прочетеш статия и текстът продължава да се движи наоколо? Това е, което наричаме „нестабилен товар“ и трябва да го изгорим с огън .

Съдържанието на slate.com скача наоколо много агресивно, докато страницата се зарежда. Колкото по-бавна е мрежата, на която сте, толкова по-дълго ще скочи.

Нестабилните товари правят уебсайтовете трудни за взаимодействие и ги кара да се чувстват ... добре ... Нестабилни!

Разглеждането на нестабилен сайт винаги ми напомня как си представям, че би се почувствал да се разхождам по време на земетресение

Нестабилните товари се причиняват от изображения и реклами, вградени в дадена страница, но не включват информация за оразмеряване. По подразбиране браузърът знае размера на тези, само след като са се заредили, така че веднага след като изображението се зареди, THUNK !, цялата страница се плъзга надолу .

За да предотвратите това, всички тагове на дадена страница трябва активно да включват размерите на изображението, което ще съдържат.

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


Същото важи и за рекламите, често виновник, когато става дума за нестабилни товари. Където е възможно, създайте div, който ще съдържа реклама, и в шаблона си го задайте да бъде оразмерен с най-доброто си предположение за това колко голяма ще бъде тази реклама.

Обърнете внимание, че нестабилните товари са най-лошите в бавните мрежи, тъй като току-що сте се настанили в четене на съдържание, когато изведнъж то скочи, и никога не можете да сте сигурни, че сте в безопасност.

Поставяме всичко заедно

Създадох малък демонстрационен сайт на reactive.surge.sh, за да демонстрирам разликата между конвенционалния и реактивния уеб дизайн.

Конвенционално зареждане на артикули

Обърнете внимание колко мудно се чувства и колко неприятно скача съдържанието. Интересното е, че този порядък е по-досаден на мобилните устройства, когато докосвате екрана и не виждате как реагира.

Зареждане на статия с реактивен уеб дизайн

С реактивен дизайн натоварването се усеща мигновено и сайтът остава реактивен, когато докоснете иконата на гърба и заглавието на статията няколко пъти

Обобщавайки

Колкото по-бавна е мрежата, толкова по-лошо става потребителското изживяване, когато преходите на страницата се блокират в мрежата и страниците скачат наоколо за продължителни периоди.

С реактивен уеб дизайн можем да направим нашия опит да се почувства пъргав и отзивчив („Отзивчив дизайн“, както вече беше взето име, dhoh!), Дори и в бавни и болезнени мрежи.

Бих искал да чуя за данни от общността за ефекта от възприеманата ефективност върху KPI, като ангажираност и приходи!

Освен това бих насърчавал авторите на рамки и библиотеки да обмислят как да направят скелетни екрани и стабилни натоварвания по подразбиране, известни също като ямата на успеха.

Ако имате мисли за това, моля, чукайте ми @owencm, и ако ви хареса това, моля дайте го ♥!

Послепис не забравяйте да проверите демонстрационния сайт reactive.surge.sh на мобилно устройство за пълната си слава!