Реактивни веб дизајн: Тајна израде веб апликација које осећају невероватно

У последњој години приметио сам две суптилне технике које користе неки програмери који користе веб апликацију од осећања спорог и безобразног до високо реактивног и полираног.

Вјерујем да су ове технике довољно важне да им треба назив: Реактивни веб дизајн.

Укратко, реактивни веб дизајн је скуп техника које се могу користити за прављење веб локација које се увек осећају брзо и брзо реагују на корисников унос, без обзира на брзину или кашњење мреже.

Као веб програмери и аутори оквира, верујем да је проналажење начина да се ови обрасци поставе задани у свему што изградимо главни приоритет за побољшање УКС-а и перципираних перформанси на вебу.

Техника 1: Тренутно оптерећење скелетним екранима

Када се добро користи, ова техника се готово никада не примећује, али има огроман утицај на перципиране перформансе веб локације.

Занимљиво је да се техника користи готово свим изворним апликацијама и чини их врло реактивним чак и на ужасним мрежама, али се скоро никада не користи на вебу!

Ова могућност лежи!

Укратко, костурни екрани осигуравају да када год корисник додирне било које дугме или везу, страница одмах реагира преласком корисника на ту нову страницу, а затим учитавањем садржаја на ту страницу када садржај постане доступан.

Фацебоок помоћу костурног екрана за побољшање перципираних перформанси када га први отворите

Скелетни екрани су кључна техника перформанси која омогућава да се апликације осећају много брже, драстично смањујући број тренутака у којима корисник остаје да се пита:

Шта се догађа? Да ли се чак и учитава? Да ли сам га добро погодио?

Флипкарт.цом је редак пример веб странице која користи овај приступ. Прегледавање категорија или додиривање производа стога делује муњевито, чак и када се за учитавање стварних резултата тражи неколико секунди:

Снимка екрана флипкарт.цом покренута је са почетног екрана у самосталном режиму на Андроиду

Када се ова техника најбоље користи, садржај који је већ доступан, као што су сличице или наслови чланака, може се поново користити да би се побољшала перципирана перформанса још више, чинећи да се учитавање заиста осећа тренутним.

апп.јалантикус.цом користи образац Скелетон Сцреенс и користи наслове и сличице преко прелаза

Тестирање места са скелетним екранима

Провјеравање колико добро веб странице користе ову технику је једноставно: једноставно употријебите емулацију Цхроме мреже како бисте мрежу учинили што споријом, а затим кликнули на неко веб мјесто. Ако то ради добро, веб локација ће се и даље осећати неискрено и реагирати на ваш унос.

Најспорија брзина подржана у Цхроме мрежи емулације

Техника 2: „Стабилна оптерећења“ помоћу унапред дефинисаних величина елемената

Знате онај осећај где веб страница скаче наоколо док то покушавате да користите? Само покушавате да прочитате чланак, а текст се непрестано креће? То је оно што називамо „нестабилним теретом“ и морамо га палити ватром .

Садржај слате.цом скаче врло агресивно док страница учитава. Што је мрежа спорија, то дуже траје.

Нестабилна оптерећења отежавају интеракцију веб локација и осећају се ... добро ... Нестабилно!

Прегледавање нестабилног места увек ме подсећа на то како замишљам како би се осећао ходати наоколо током земљотреса

Нестабилно оптерећење узрокују слике и огласи уграђени у страницу, али не укључују никакве податке о величини. Браузер подразумевано зна величину ових димензија тек када се учитају, па чим се слика учита, ТХУНК !, цела страница клизи према доле .

Да бисте то спречили, све <имг> ознаке на страници морају проактивно укључивати димензије слике коју ће садржавати.

У многим случајевима слике које се користе на одређеним страницама су увијек исте величине, па се њихова величина може једноставно укључити у ХТМЛ предложак, али у неким случајевима је величина слика динамична и стога њихова величина треба бити израчуната када је слика пренесена и предложена. у ХТМЛ када се креира.


<имг срц = '/ тхумбнаил.пнг' стиле = 'ширина: 100пк; висина: 84пк '>

Исто важи и за огласе, често кривце за нестабилно оптерећење. Гдје год је то могуће, направите див који ће садржавати оглас, а према предлошку поставите га према величини с најбољим нагађањима колико ће овај оглас бити велик.

Имајте на уму да су нестабилна оптерећења најгора у спорим мрежама, јер сте се тек усадили у читање садржаја кад одједном скочи, и никад не можете бити сигурни да сте на сигурном.

Све састављање

Направио сам мали демо сајт на реацтиве.сурге.сх да бих показао разлику између конвенционалног и реактивног веб дизајна.

Уобичајено пуњење чланака

Имајте на уму како се то споро и како фрустрирајуће скакање садржаја. Занимљиво је да ове наредбе величине још више нервирају мобилне уређаје када тапкате по екрану и не видим да реагује.

Учитавање чланка са реактивним веб дизајном

Реактивним дизајном оптерећење се осјећа тренутно и веб локација остаје реактивна када више пута додирнете икону позадине и наслов чланка

Окончање

Што је мрежа спорија, то је лошије корисничко искуство када блокаде транзиције страница на мрежи и странице прескачу током дужег периода.

Помоћу Реактивног веб дизајна можемо учинити да наше искуство постане смешно и респонзивно („респонзивни дизајн“ као што је име већ узело, д'ох!) Чак и на спорим и болним мрежама.

Волио бих чути о подацима из заједнице о учинку перципираног учинка на КПИ-е, попут ангажмана и прихода!

Поред тога, охрабривао бих ауторе оквира и библиотеке да размотре како да поставе костурне екране и стабилна оптерећења као подразумеване, такође познате као јама успеха.

Ако имате размишљања о овоме, молим вас да ми поскачите @овенцм, а ако сте уживали у овом молим вас дајте му ♥!

П.С. будите сигурни да на мобилном уређају потражите демо локацију реацтиве.сурге.сх да бисте добили пуну славу!